diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index abe6e55c0f..7eea9d5397 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -32,6 +32,7 @@
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
 		"@vueuse/core": "^11.1.0",
+		"ace-builds": "^1.43.5",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
@@ -45,6 +46,7 @@
 		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8",
+		"vue3-ace-editor": "^2.2.4",
 		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 28764564ba..668c557a86 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -14,6 +14,7 @@ import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
 	CompassIcon,
+	ImagesIcon,
 	LogInIcon,
 	LogOutIcon,
 	NewspaperIcon,
@@ -64,6 +65,7 @@ import { renderString } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { convertFileSrc, invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { openUrl } from '@tauri-apps/plugin-opener'
@@ -118,7 +120,12 @@ import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
 import { get_user, get_user_many, get_version } from '@/helpers/cache.js'
 import { install_create_modpack_instance, install_get_modpack_preview } from '@/helpers/install'
-import { can_current_user_use_shared_instances, get as getInstance, run } from '@/helpers/instance'
+import {
+	can_current_user_use_shared_instances,
+	get as getInstance,
+	get_global_synced_options,
+	run,
+} from '@/helpers/instance'
 import {
 	get as getCreds,
 	getAll as getAllCreds,
@@ -173,7 +180,10 @@ import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
 import { AppPopupNotificationManager } from './providers/app-popup-notifications'
-import { appSettingsModalOpenProfileKey } from './providers/app-settings-modal'
+import {
+	appSettingsModalOpenProfileKey,
+	appSettingsModalOpenSyncedOptionsKey,
+} from './providers/app-settings-modal'
 
 const appSettings = useAppSettings()
 const appTheme = useTheme()
@@ -438,6 +448,11 @@ const os = ref('')
 const isDevEnvironment = ref(false)
 
 const stateInitialized = ref(false)
+const globalSyncedOptionsQuery = useQuery({
+	queryKey: ['global-synced-options'],
+	queryFn: get_global_synced_options,
+	enabled: computed(() => stateInitialized.value),
+})
 
 const criticalErrorMessage = ref()
 
@@ -469,7 +484,24 @@ const authUnreachable = computed(() => {
 	return false
 })
 
+let unlistenEditMenu
+
+function handleEditMenuAction(action) {
+	const event = new CustomEvent(`edit-menu:${action}`, { cancelable: true })
+	if (document.dispatchEvent(event)) document.execCommand(action)
+}
+
 onMounted(async () => {
+	try {
+		const listeners = await Promise.all([
+			listen('edit-menu://undo', () => handleEditMenuAction('undo')),
+			listen('edit-menu://redo', () => handleEditMenuAction('redo')),
+		])
+		unlistenEditMenu = () => listeners.forEach((unlisten) => unlisten())
+	} catch (error) {
+		handleError(error)
+	}
+
 	await useCheckDisableMouseover()
 	try {
 		handleAdsConsentRequired(await should_show_ads_consent_popup())
@@ -490,6 +522,7 @@ onUnmounted(async () => {
 	document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
 	document.querySelector('body').removeEventListener('contextmenu', handleContextMenu)
 	document.removeEventListener('fullscreenchange', handleFullscreenChange)
+	unlistenEditMenu?.()
 	clearDelayedUpdatePopup()
 
 	if (fullscreenAdsWindowHold) {
@@ -557,6 +590,10 @@ const messages = defineMessages({
 		id: 'app.nav.modrinth-hosting',
 		defaultMessage: 'Modrinth Hosting',
 	},
+	screenshots: {
+		id: 'app.nav.screenshots',
+		defaultMessage: 'Screenshots',
+	},
 	createNewInstance: {
 		id: 'app.nav.create-new-instance',
 		defaultMessage: 'Create new instance',
@@ -999,6 +1036,7 @@ const updateToPlayModal = ref()
 const modrinthLoginModal = ref()
 const appSettingsModal = ref()
 provide(appSettingsModalOpenProfileKey, () => appSettingsModal.value?.showProfile())
+provide(appSettingsModalOpenSyncedOptionsKey, () => appSettingsModal.value?.showSyncedOptions())
 
 watch(incompatibilityWarningModal, (modal) => {
 	if (modal) {
@@ -2025,6 +2063,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton v-tooltip.right="formatMessage(appMessages.skinSelectorLabel)" to="/skins">
 				<ShirtIcon />
 			</NavButton>
+			<NavButton
+				v-if="globalSyncedOptionsQuery.data.value?.screenshots"
+				v-tooltip.right="formatMessage(messages.screenshots)"
+				to="/screenshots"
+			>
+				<ImagesIcon />
+			</NavButton>
 			<NavButton
 				v-tooltip.right="formatMessage(messages.modrinthHosting)"
 				to="/hosting/manage"
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index d6f9850456..8db35f4cf8 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -291,10 +291,11 @@ const messages = defineMessages({
 				v-model="search"
 				:icon="SearchIcon"
 				type="text"
+				appearance="transparent"
 				:placeholder="formatMessage(messages.searchFriends)"
 				clearable
-				input-class="!bg-transparent !border !border-solid !border-button-bg !text-primary !placeholder:text-primary"
-				wrapper-class="flex-1 [&>svg]:!text-primary [&>svg]:!opacity-100"
+				input-class="!text-primary !placeholder:text-primary"
+				wrapper-class="flex-1 !border-button-bg [&>span:first-child]:!text-primary [&>span:first-child]:!opacity-100"
 				@keyup.esc="search = ''"
 			/>
 		</template>
diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
index d1dfbec528..78b58fc443 100644
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {
 	CoffeeIcon,
-	GameIcon,
 	GaugeIcon,
 	HeartHandshakeIcon,
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
+	RefreshCwIcon,
 	Settings2Icon,
 	ShieldIcon,
 	ToggleRightIcon,
@@ -33,7 +33,7 @@ import AppearanceSettings from '@/components/ui/settings/display/AppearanceSetti
 import BehaviorSettings from '@/components/ui/settings/display/BehaviorSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/display/FeatureFlagSettings.vue'
 import LanguageSettings from '@/components/ui/settings/display/LanguageSettings.vue'
-import DefaultInstanceSettings from '@/components/ui/settings/instances/DefaultInstanceSettings.vue'
+import InstancesSyncedSettings from '@/components/ui/settings/instances/InstancesSyncedSettings.vue'
 import JavaSettings from '@/components/ui/settings/instances/JavaSettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/instances/ResourceManagementSettings.vue'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
@@ -130,12 +130,12 @@ const tabs = [
 	},
 	{
 		name: defineMessage({
-			id: 'app.settings.tabs.default-instance-options',
-			defaultMessage: 'Default game options',
+			id: 'app.settings.tabs.synced-options',
+			defaultMessage: 'Synced settings',
 		}),
 		category: tabCategories.instances,
-		icon: GameIcon,
-		content: DefaultInstanceSettings,
+		icon: RefreshCwIcon,
+		content: InstancesSyncedSettings,
 	},
 	{
 		name: defineMessage({
@@ -232,7 +232,17 @@ function showFeatureFlags(): void {
 	modal.value?.show()
 }
 
-defineExpose({ show, showProfile, showFeatureFlags })
+function showSyncedOptions(): void {
+	const syncedOptionsTabIndex = availableTabs.value.findIndex(
+		(tab) => tab.content === InstancesSyncedSettings,
+	)
+	if (syncedOptionsTabIndex >= 0) {
+		modal.value?.setTab(syncedOptionsTabIndex)
+	}
+	modal.value?.show()
+}
+
+defineExpose({ show, showProfile, showFeatureFlags, showSyncedOptions })
 
 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
 
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/card.vue b/apps/app-frontend/src/components/ui/screenshots-page/card.vue
new file mode 100644
index 0000000000..adf1222ef8
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/card.vue
@@ -0,0 +1,195 @@
+<script lang="ts"></script>
+
+<script setup lang="ts">
+import { KeyboardSensor, PointerSensor, useDraggable } from '@dnd-kit/vue'
+import { CheckIcon, ClipboardCopyIcon, EditIcon, MoreHorizontalIcon } from '@modrinth/assets'
+import { defineMessages, IconButton, useFormatDateTime, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref, watch } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+const loadedScreenshotUrls = new Set<string>()
+
+const props = defineProps<{
+	screenshot: InstanceScreenshot
+	selectionKey: string
+	selected: boolean
+	selectionActive: boolean
+	activeDragged: boolean
+	canDrag: boolean
+	showInstanceName: boolean
+	highlighted: boolean
+	copied: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'activate', event: MouseEvent | KeyboardEvent): void
+	(e: 'copy' | 'edit' | 'toggle-selection'): void
+	(e: 'more', event: MouseEvent): void
+}>()
+
+const card = ref<HTMLElement>()
+const image = ref<HTMLImageElement>()
+const loaded = ref(loadedScreenshotUrls.has(props.screenshot.url))
+const { formatMessage } = useVIntl()
+const formatTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+const messages = defineMessages({
+	select: { id: 'app.screenshots.select', defaultMessage: 'Select {name}' },
+	deselect: { id: 'app.screenshots.deselect', defaultMessage: 'Deselect {name}' },
+	copy: { id: 'app.screenshots.copy', defaultMessage: 'Copy image' },
+	copied: { id: 'app.screenshots.copied', defaultMessage: 'Copied' },
+	edit: { id: 'app.screenshots.edit', defaultMessage: 'Edit screenshot' },
+	moreActions: { id: 'app.screenshots.more-actions', defaultMessage: 'More actions' },
+})
+
+const sensors = [
+	PointerSensor.configure({
+		preventActivation: () => false,
+	}),
+	KeyboardSensor,
+]
+
+useDraggable({
+	id: computed(() => `screenshot:${props.selectionKey}`),
+	element: card,
+	disabled: computed(() => !props.canDrag),
+	sensors,
+	data: computed(() => ({
+		selectionKey: props.selectionKey,
+		instanceId: props.screenshot.instance_id,
+	})),
+})
+
+function activate(event: MouseEvent | KeyboardEvent) {
+	if (event instanceof KeyboardEvent) {
+		if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) {
+			return
+		}
+		event.preventDefault()
+	}
+	emit('activate', event)
+}
+
+function markImageLoaded() {
+	loadedScreenshotUrls.add(props.screenshot.url)
+	loaded.value = true
+}
+
+onMounted(() => {
+	if (image.value?.complete && image.value.naturalWidth > 0) markImageLoaded()
+})
+
+watch(
+	() => props.screenshot.url,
+	(url) => {
+		loaded.value = loadedScreenshotUrls.has(url)
+	},
+)
+</script>
+
+<template>
+	<article
+		ref="card"
+		role="button"
+		tabindex="0"
+		class="group relative aspect-video min-w-0 cursor-pointer overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 p-0 text-left shadow-sm transition-[filter] hover:brightness-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+		:class="{
+			'!border-contrast brightness-110': selected,
+			'!border-brand ring-2 ring-brand animate-pulse': highlighted,
+			'opacity-50': activeDragged,
+			'cursor-grab active:cursor-grabbing': canDrag,
+		}"
+		data-screenshot-card
+		:data-screenshot-id="screenshot.id"
+		:data-selection-key="selectionKey"
+		:aria-label="
+			selectionActive
+				? formatMessage(selected ? messages.deselect : messages.select, {
+						name: screenshot.file_name,
+					})
+				: screenshot.file_name
+		"
+		:aria-pressed="selectionActive ? selected : undefined"
+		@click="activate"
+		@contextmenu.prevent.stop="emit('more', $event)"
+		@keydown="activate"
+	>
+		<button
+			type="button"
+			class="selection-button group/selection absolute right-0.5 top-0 z-[2] flex size-[50px] cursor-pointer items-start justify-center border-0 bg-transparent p-0 pt-4"
+			:aria-label="
+				formatMessage(selected ? messages.deselect : messages.select, {
+					name: screenshot.file_name,
+				})
+			"
+			:aria-pressed="selected"
+			@click.stop="emit('toggle-selection')"
+		>
+			<span
+				class="relative flex size-6 items-center justify-center rounded-full opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100 group-focus-within:opacity-100 group-hover/selection:brightness-125"
+				:class="
+					selected ? 'border-0 !opacity-100' : 'border-2 border-solid border-primary bg-transparent'
+				"
+			>
+				<span v-if="selected" class="absolute inset-0 rounded-full bg-contrast" />
+				<CheckIcon v-if="selected" class="relative size-4 invert [stroke-width:3]" />
+			</span>
+		</button>
+		<div v-if="!loaded" class="absolute inset-0 animate-pulse bg-surface-3" />
+		<img
+			ref="image"
+			:src="screenshot.url"
+			:alt="screenshot.file_name"
+			loading="lazy"
+			draggable="false"
+			class="h-full w-full object-cover transition duration-200"
+			:class="loaded ? 'opacity-100' : 'opacity-0'"
+			@load="markImageLoaded"
+		/>
+		<div
+			class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-gradient-to-t from-surface-1 to-transparent p-3 pt-[120px] text-contrast opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"
+		>
+			<div class="min-w-0">
+				<div v-tooltip="screenshot.file_name" class="truncate text-sm font-semibold">
+					{{ screenshot.file_name }}
+				</div>
+				<div class="truncate text-xs text-secondary">
+					{{ showInstanceName ? screenshot.instance_name : formatTime(screenshot.created_at) }}
+				</div>
+			</div>
+			<div
+				v-if="!selectionActive"
+				class="flex shrink-0 translate-y-1 gap-1 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100"
+				@click.stop
+			>
+				<IconButton
+					v-tooltip="formatMessage(messages.edit)"
+					:label="formatMessage(messages.edit)"
+					type="quiet"
+					class="bg-surface-2 text-contrast hover:bg-surface-3"
+					@click="emit('edit')"
+				>
+					<EditIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(copied ? messages.copied : messages.copy)"
+					:label="formatMessage(copied ? messages.copied : messages.copy)"
+					type="quiet"
+					class="bg-surface-2 text-contrast hover:bg-surface-3"
+					@click="emit('copy')"
+				>
+					<CheckIcon v-if="copied" class="text-green" />
+					<ClipboardCopyIcon v-else />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.moreActions)"
+					:label="formatMessage(messages.moreActions)"
+					type="quiet"
+					class="bg-surface-2 text-contrast hover:bg-surface-3"
+					@click="emit('more', $event)"
+				>
+					<MoreHorizontalIcon />
+				</IconButton>
+			</div>
+		</div>
+	</article>
+</template>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/drag-gather.vue b/apps/app-frontend/src/components/ui/screenshots-page/drag-gather.vue
new file mode 100644
index 0000000000..eedee94806
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/drag-gather.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import ScreenshotDragPreview from './drag-preview.vue'
+import { gatherDuration, type ScreenshotDragGatherItem } from './use-screenshot-drag-gather'
+
+const props = defineProps<{
+	items: ScreenshotDragGatherItem[]
+	target: {
+		x: number
+		y: number
+	}
+}>()
+
+const emit = defineEmits<{
+	complete: []
+}>()
+
+const gathered = ref(false)
+const finishing = ref(false)
+let animationFrame: number | undefined
+let completionTimer: number | undefined
+
+const itemContainerStyles = computed(() =>
+	props.items.map((_, index) => ({
+		left: `${props.target.x}px`,
+		top: `${props.target.y}px`,
+		zIndex: `${index}`,
+	})),
+)
+
+const itemStyles = computed(() =>
+	props.items.map((item, index) => {
+		const originX = item.rect.left - props.target.x
+		const originY = item.rect.top - props.target.y
+
+		return {
+			width: `${item.rect.width}px`,
+			height: `${item.rect.height}px`,
+			transform: gathered.value
+				? `translate3d(${-item.rect.width / 2}px, ${-item.rect.height / 2}px, 0)`
+				: `translate3d(${originX}px, ${originY}px, 0)`,
+			transitionDuration: `${gatherDuration}ms`,
+			transitionDelay: `${Math.min(index, 8) * 10}ms`,
+		}
+	}),
+)
+
+onMounted(() => {
+	animationFrame = requestAnimationFrame(() => {
+		animationFrame = requestAnimationFrame(() => {
+			gathered.value = true
+			completionTimer = window.setTimeout(
+				() => {
+					finishing.value = true
+					emit('complete')
+				},
+				Math.max(gatherDuration - 250, 0),
+			)
+		})
+	})
+})
+
+onBeforeUnmount(() => {
+	if (animationFrame !== undefined) {
+		cancelAnimationFrame(animationFrame)
+	}
+	if (completionTimer !== undefined) {
+		clearTimeout(completionTimer)
+	}
+})
+</script>
+
+<template>
+	<Teleport to="body">
+		<div
+			class="pointer-events-none fixed inset-0 z-[9998] overflow-hidden transition-opacity duration-150 ease-out"
+			:class="finishing ? 'opacity-0' : 'opacity-100'"
+			aria-hidden="true"
+		>
+			<div
+				v-for="(item, index) in items"
+				:key="item.selectionKey"
+				class="fixed"
+				:style="itemContainerStyles[index]"
+			>
+				<div
+					class="origin-center transition-transform ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+					:style="itemStyles[index]"
+				>
+					<ScreenshotDragPreview :screenshot="item.screenshot" />
+				</div>
+			</div>
+		</div>
+	</Teleport>
+</template>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/drag-preview.vue b/apps/app-frontend/src/components/ui/screenshots-page/drag-preview.vue
new file mode 100644
index 0000000000..f658bcad94
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/drag-preview.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { TagItem } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+import { gatherDuration } from './use-screenshot-drag-gather'
+
+const props = withDefaults(
+	defineProps<{
+		screenshot: InstanceScreenshot
+		count?: number
+	}>(),
+	{
+		count: 1,
+	},
+)
+
+const showGatheredCount = ref(false)
+let countTimer: number | undefined
+
+onMounted(() => {
+	if (props.count <= 1 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+		showGatheredCount.value = true
+		return
+	}
+
+	countTimer = window.setTimeout(() => {
+		showGatheredCount.value = true
+		countTimer = undefined
+	}, gatherDuration - 150)
+})
+
+onBeforeUnmount(() => {
+	if (countTimer !== undefined) {
+		clearTimeout(countTimer)
+	}
+})
+</script>
+
+<template>
+	<div aria-hidden="true" class="relative w-full select-none">
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-3 -bottom-2 top-2 rounded-xl border border-solid border-surface-5 bg-surface-2 shadow-md motion-safe:transition-opacity motion-safe:duration-200 motion-safe:delay-100 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-60' : 'opacity-0'"
+		/>
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-1.5 -bottom-1 top-1 rounded-xl border border-solid border-surface-4 bg-surface-3 shadow-md motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-80' : 'opacity-0'"
+		/>
+		<div
+			class="relative aspect-video w-full overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 opacity-90 shadow-lg"
+		>
+			<img :src="screenshot.url" alt="" class="h-full w-full object-cover" />
+			<TagItem
+				v-if="count > 1"
+				class="!absolute right-3 top-3 z-[2] border-surface-5 bg-surface-4 tabular-nums text-secondary motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+			>
+				{{ count }}
+			</TagItem>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/group.vue b/apps/app-frontend/src/components/ui/screenshots-page/group.vue
new file mode 100644
index 0000000000..f9705c6e5f
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/group.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { useDroppable } from '@dnd-kit/vue'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+import ScreenshotCard from './card.vue'
+import ScreenshotSection from './section.vue'
+
+const props = defineProps<{
+	id: string
+	title: string
+	screenshots: InstanceScreenshot[]
+	selectedKeys: ReadonlySet<string>
+	selectionActive: boolean
+	activeDraggedKeys: ReadonlySet<string>
+	showDropOutline: boolean
+	canDrag: boolean
+	dropInstanceId?: string
+	dropCustomGroup?: boolean
+	dropCustomGroupId?: string
+	showInstanceName: boolean
+	highlightedScreenshotId?: string
+	copiedScreenshotIds: ReadonlySet<string>
+	forceOpen: boolean
+	animateEntry: boolean
+	hideHeader?: boolean
+	editableTitle?: boolean
+	startEditingTitle?: boolean
+	maxTitleLength?: number
+	validateTitle?: (value: string) => boolean
+	onTitleChange?: (value: string) => boolean | void | Promise<boolean | void>
+}>()
+
+const collapsed = defineModel<boolean>('collapsed', { required: true })
+const dropTarget = ref<HTMLElement>()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	emptyGroup: {
+		id: 'app.screenshots.group.empty',
+		defaultMessage: 'Drag and drop to add screenshots.',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'activate', screenshot: InstanceScreenshot, event: MouseEvent | KeyboardEvent): void
+	(e: 'toggle-selection' | 'copy' | 'edit', screenshot: InstanceScreenshot): void
+	(e: 'more', screenshot: InstanceScreenshot, event: MouseEvent): void
+}>()
+
+useDroppable({
+	id: computed(() => `screenshot-group:${props.id}`),
+	element: dropTarget,
+	disabled: computed(() => !props.dropInstanceId && !props.dropCustomGroup),
+	data: computed(() =>
+		props.dropCustomGroup
+			? { groupId: props.id, customGroupId: props.dropCustomGroupId ?? null }
+			: { groupId: props.id, instanceId: props.dropInstanceId },
+	),
+})
+
+function getSelectionKey(screenshot: InstanceScreenshot) {
+	return JSON.stringify([screenshot.instance_id, screenshot.file_name])
+}
+</script>
+
+<template>
+	<div
+		ref="dropTarget"
+		class="group/instance-container relative select-none pb-3 transition-colors"
+	>
+		<Transition
+			enter-active-class="transition-opacity duration-150 ease-out"
+			enter-from-class="!opacity-0"
+			enter-to-class="opacity-100"
+			leave-active-class="transition-opacity duration-150 ease-in"
+			leave-from-class="opacity-100"
+			leave-to-class="!opacity-0"
+		>
+			<div
+				v-if="showDropOutline"
+				class="pointer-events-none absolute -inset-2 inset-y-0 z-20 rounded-xl border-2 border-dashed border-contrast bg-transparent opacity-40"
+			/>
+		</Transition>
+		<ScreenshotSection
+			v-model:collapsed="collapsed"
+			:title="title"
+			:count="screenshots.length"
+			:force-open="forceOpen"
+			:hide-header="hideHeader"
+			:editable="editableTitle"
+			:start-editing="startEditingTitle"
+			:max-title-length="maxTitleLength"
+			:validate-title="validateTitle"
+			:on-title-change="onTitleChange"
+		>
+			<template #actions="{ startEditing }">
+				<slot name="actions" :start-editing="startEditing" />
+			</template>
+			<TransitionGroup
+				tag="div"
+				class="grid min-h-[45px] w-full grid-cols-1 gap-3 sm:grid-cols-2 2xl:grid-cols-4"
+				move-class="transition-transform duration-200 ease-out motion-reduce:transition-none"
+				:enter-active-class="
+					animateEntry
+						? 'transition-[opacity,transform] duration-[150ms] ease-out motion-reduce:transition-none'
+						: ''
+				"
+				:enter-from-class="animateEntry ? 'opacity-0' : ''"
+				enter-to-class="opacity-100 scale-100"
+			>
+				<ScreenshotCard
+					v-for="screenshot in screenshots"
+					:key="getSelectionKey(screenshot)"
+					:screenshot="screenshot"
+					:selection-key="getSelectionKey(screenshot)"
+					:selected="selectedKeys.has(getSelectionKey(screenshot))"
+					:selection-active="selectionActive"
+					:active-dragged="activeDraggedKeys.has(getSelectionKey(screenshot))"
+					:can-drag="canDrag"
+					:show-instance-name="showInstanceName"
+					:highlighted="highlightedScreenshotId === screenshot.id"
+					:copied="copiedScreenshotIds.has(screenshot.id)"
+					@activate="(event) => emit('activate', screenshot, event)"
+					@toggle-selection="emit('toggle-selection', screenshot)"
+					@copy="emit('copy', screenshot)"
+					@edit="emit('edit', screenshot)"
+					@more="(event) => emit('more', screenshot, event)"
+				/>
+				<p
+					v-if="screenshots.length === 0"
+					key="empty-group"
+					class="col-span-full m-0 pl-0.5 pt-1 text-base font-base text-secondary opacity-80"
+				>
+					{{ formatMessage(messages.emptyGroup) }}
+				</p>
+			</TransitionGroup>
+		</ScreenshotSection>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/index.vue b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
new file mode 100644
index 0000000000..e688e435f7
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
@@ -0,0 +1,1469 @@
+<script setup lang="ts">
+import {
+	DragDropProvider,
+	type DragEndEvent,
+	type DragMoveEvent,
+	type DragOverEvent,
+	DragOverlay,
+	type DragStartEvent,
+} from '@dnd-kit/vue'
+import {
+	CheckIcon,
+	ClipboardCopyIcon,
+	EditIcon,
+	FileArchiveIcon,
+	FolderOpenIcon,
+	MinusIcon,
+	SquarePlusIcon,
+	TrashIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	Button,
+	type ButtonMenuOption,
+	type ComboboxOption,
+	commonMessages,
+	ConfirmModal,
+	ContextMenu,
+	defineMessages,
+	EmptyState,
+	FloatingActionBar,
+	IconButton,
+	ImageViewerEditor,
+	type ImageViewerEditorSavePayload,
+	injectNotificationManager,
+	ReadyTransition,
+	useFormatDateTime,
+	useReadyState,
+	useVIntl,
+} from '@modrinth/ui'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { save } from '@tauri-apps/plugin-dialog'
+import { readFile } from '@tauri-apps/plugin-fs'
+import { useStorage } from '@vueuse/core'
+import dayjs from 'dayjs'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useAppEvent } from '@/composables/use-app-event'
+import {
+	create_screenshot_group,
+	delete_screenshot_group,
+	delete_screenshots,
+	export_screenshots,
+	getInstanceIconUrl,
+	import_screenshot_groups,
+	type InstanceScreenshot,
+	list_all_screenshots,
+	move_screenshots,
+	open_screenshot,
+	rename_screenshot_group,
+	save_edited_screenshot,
+	type ScreenshotGroup,
+	type ScreenshotGroupImport,
+	type ScreenshotKey,
+	set_screenshot_group_memberships,
+} from '@/helpers/instance'
+import { MAX_INSTANCE_GROUP_NAME_LENGTH } from '@/helpers/instance-groups'
+import {
+	instanceListQueryOptions,
+	instanceScreenshotsQueryOptions,
+	screenshotGroupsQueryOptions,
+	screenshotKeys,
+	syncedScreenshotsQueryOptions,
+} from '@/pages/instance/query-options'
+
+import ScreenshotDragGather from './drag-gather.vue'
+import ScreenshotDragPreview from './drag-preview.vue'
+import ScreenshotGroupSection from './group.vue'
+import ScreenshotToolbar from './toolbar.vue'
+import { type ActiveScreenshotDrag, useScreenshotDragGather } from './use-screenshot-drag-gather'
+
+type ScreenshotSort = 'newest' | 'oldest' | 'name'
+type ScreenshotGroupBy = 'custom' | 'instance' | 'date' | 'none'
+
+type LegacyCustomScreenshotGrouping = {
+	groups: ScreenshotGroup[]
+	assignments: Record<string, string>
+}
+
+type ScreenshotGroupData = {
+	id: string
+	title: string
+	screenshots: InstanceScreenshot[]
+	dropInstanceId?: string
+	customGroupId?: string | null
+}
+
+type ScreenshotDragData = {
+	selectionKey: string
+	instanceId: string
+}
+
+type ScreenshotDropData = {
+	groupId: string
+	instanceId?: string
+	customGroupId?: string | null
+}
+
+const props = withDefaults(
+	defineProps<{
+		instanceId?: string
+		showHeading?: boolean
+	}>(),
+	{
+		instanceId: undefined,
+		showHeading: false,
+	},
+)
+
+const isGlobal = computed(() => !props.instanceId)
+const storageSuffix = props.instanceId ? 'instance' : 'global'
+const search = ref('')
+const sort = useStorage<ScreenshotSort>(`screenshots-sort-${storageSuffix}`, 'newest')
+const groupBy = useStorage<ScreenshotGroupBy>(`screenshots-group-v2-${storageSuffix}`, 'date')
+const sortModel = computed<string>({
+	get: () => sort.value,
+	set: (value) => {
+		sort.value = value as ScreenshotSort
+	},
+})
+const groupByModel = computed<string>({
+	get: () => groupBy.value,
+	set: (value) => {
+		groupBy.value = value as ScreenshotGroupBy
+	},
+})
+const collapsedGroups = useStorage<Record<string, boolean>>(
+	`screenshots-collapsed-groups-${storageSuffix}`,
+	{},
+)
+const legacyCustomGrouping = useStorage<LegacyCustomScreenshotGrouping>(
+	'screenshots-custom-groups',
+	{
+		groups: [],
+		assignments: {},
+	},
+)
+const selectedKeys = ref(new Set<string>())
+const copiedScreenshotIds = ref(new Set<string>())
+const copiedResetTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const screenshotsPage = ref<HTMLElement>()
+const regrouping = ref(false)
+const screenshotToDelete = ref<InstanceScreenshot | null>(null)
+const deleteFromPreview = ref(false)
+const activeDrag = ref<ActiveScreenshotDrag | null>(null)
+const activeDropGroupId = ref<string | null>(null)
+const imageViewer = ref<InstanceType<typeof ImageViewerEditor>>()
+const screenshotOptionsMenu = ref<InstanceType<typeof ContextMenu>>()
+const screenshotOptionsTarget = ref<InstanceScreenshot>()
+const deleteModal = ref<InstanceType<typeof ConfirmModal>>()
+const bulkDeleteModal = ref<InstanceType<typeof ConfirmModal>>()
+const deleteGroupModal = ref<InstanceType<typeof ConfirmModal>>()
+const customGroupToDelete = ref<ScreenshotGroup>()
+const groupIdPendingNameEdit = ref<string>()
+const migratingLegacyGroups = ref(false)
+const creatingCustomGroup = ref(false)
+const updatingCustomGroupMemberships = ref(false)
+const revealedScreenshotId = ref<string>()
+const highlightedScreenshotId = ref<string>()
+const queryClient = useQueryClient()
+const route = useRoute()
+const router = useRouter()
+const { formatMessage } = useVIntl()
+const { addNotification, handleError } = injectNotificationManager()
+const formatDateTime = useFormatDateTime({ dateStyle: 'long', timeStyle: 'short' })
+const formatMonth = useFormatDateTime({ month: 'long', year: 'numeric' })
+const messages = defineMessages({
+	heading: { id: 'app.screenshots.heading', defaultMessage: 'Screenshots' },
+	emptyHeading: { id: 'app.screenshots.empty-heading', defaultMessage: 'No screenshots yet' },
+	emptyDescription: {
+		id: 'app.screenshots.empty-description',
+		defaultMessage: 'Screenshots you take in-game will appear here.',
+	},
+	noResultsHeading: {
+		id: 'app.screenshots.no-results-heading',
+		defaultMessage: 'No matching screenshots',
+	},
+	noResultsDescription: {
+		id: 'app.screenshots.no-results-description',
+		defaultMessage: 'Try a different search or filter.',
+	},
+	errorHeading: {
+		id: 'app.screenshots.error-heading',
+		defaultMessage: 'Failed to load screenshots',
+	},
+	newest: { id: 'app.screenshots.sort.newest', defaultMessage: 'Newest' },
+	oldest: { id: 'app.screenshots.sort.oldest', defaultMessage: 'Oldest' },
+	name: { id: 'app.screenshots.sort.name', defaultMessage: 'Name' },
+	custom: { id: 'app.screenshots.group.custom', defaultMessage: 'Custom group' },
+	instance: { id: 'app.screenshots.group.instance', defaultMessage: 'Instance' },
+	date: { id: 'app.screenshots.group.date', defaultMessage: 'Date' },
+	none: { id: 'app.screenshots.group.none', defaultMessage: 'No grouping' },
+	today: { id: 'app.screenshots.group.today', defaultMessage: 'Today' },
+	yesterday: { id: 'app.screenshots.group.yesterday', defaultMessage: 'Yesterday' },
+	thisWeek: { id: 'app.screenshots.group.this-week', defaultMessage: 'This week' },
+	thisMonth: { id: 'app.screenshots.group.this-month', defaultMessage: 'This month' },
+	allScreenshots: {
+		id: 'app.screenshots.group.all-screenshots',
+		defaultMessage: 'All screenshots',
+	},
+	ungrouped: { id: 'app.screenshots.group.ungrouped', defaultMessage: 'Ungrouped' },
+	editGroup: { id: 'app.screenshots.group.edit', defaultMessage: 'Edit group name' },
+	deleteGroup: { id: 'app.screenshots.group.delete', defaultMessage: 'Delete group' },
+	deleteGroupDescription: {
+		id: 'app.screenshots.group.delete-description',
+		defaultMessage: 'Screenshots in this group will become ungrouped.',
+	},
+	instanceAndDate: {
+		id: 'app.screenshots.preview.instance-and-date',
+		defaultMessage: '{instance} · {date}',
+	},
+	copy: { id: 'app.screenshots.copy', defaultMessage: 'Copy image' },
+	copied: { id: 'app.screenshots.copied', defaultMessage: 'Copied' },
+	edit: { id: 'app.screenshots.edit', defaultMessage: 'Edit screenshot' },
+	showInFolder: { id: 'app.screenshots.show-in-folder', defaultMessage: 'Show in folder' },
+	goToInstance: { id: 'app.screenshots.go-to-instance', defaultMessage: 'Go to instance' },
+	deleteTitle: { id: 'app.screenshots.delete-title', defaultMessage: 'Delete screenshot' },
+	deleteDescription: {
+		id: 'app.screenshots.delete-description',
+		defaultMessage: 'Permanently delete {name}? This action cannot be undone.',
+	},
+	deleteSuccess: { id: 'app.screenshots.delete-success', defaultMessage: 'Screenshot deleted' },
+	selectionAriaLabel: {
+		id: 'app.screenshots.selection.aria-label',
+		defaultMessage: 'Selected screenshots',
+	},
+	selectedCount: {
+		id: 'app.screenshots.selection.selected-count',
+		defaultMessage: '{count} selected',
+	},
+	exportZip: { id: 'app.screenshots.selection.export-zip', defaultMessage: 'Export ZIP' },
+	newGroup: { id: 'app.screenshots.group.new', defaultMessage: 'New group' },
+	removeFromGroup: {
+		id: 'app.screenshots.selection.remove-from-group',
+		defaultMessage: 'Remove from group',
+	},
+	zipArchive: { id: 'app.screenshots.selection.zip-archive', defaultMessage: 'ZIP archive' },
+	globalExportFilename: {
+		id: 'app.screenshots.selection.global-export-filename',
+		defaultMessage: 'Modrinth screenshots.zip',
+	},
+	instanceExportFilename: {
+		id: 'app.screenshots.selection.instance-export-filename',
+		defaultMessage: '{instance} screenshots.zip',
+	},
+	bulkDeleteTitle: {
+		id: 'app.screenshots.selection.delete-title',
+		defaultMessage: 'Delete selected screenshots',
+	},
+	bulkDeleteDescription: {
+		id: 'app.screenshots.selection.delete-description',
+		defaultMessage:
+			'Delete {count, plural, one {# screenshot} other {# screenshots}}? This action cannot be undone.',
+	},
+	bulkDeleteSuccess: {
+		id: 'app.screenshots.selection.delete-success',
+		defaultMessage: '{count, plural, one {# screenshot deleted} other {# screenshots deleted}}',
+	},
+})
+
+const screenshotsQuery = useQuery(
+	computed(() =>
+		props.instanceId
+			? instanceScreenshotsQueryOptions(props.instanceId)
+			: syncedScreenshotsQueryOptions(),
+	),
+)
+const instancesQuery = useQuery(instanceListQueryOptions())
+const screenshotGroupsQuery = useQuery(screenshotGroupsQueryOptions())
+const screenshotsQueryPending = useReadyState(screenshotsQuery)
+const screenshotGroupsQueryPending = useReadyState(screenshotGroupsQuery)
+const screenshotsReadyPending = computed(
+	() =>
+		screenshotsQueryPending.value ||
+		(groupBy.value === 'custom' &&
+			(screenshotGroupsQueryPending.value || migratingLegacyGroups.value)),
+)
+const screenshots = computed(() => screenshotsQuery.data.value ?? [])
+const customGroups = computed(() => screenshotGroupsQuery.data.value ?? [])
+const screenshotOptionsInstance = computed(() =>
+	(instancesQuery.data.value ?? []).find(
+		(instance) => instance.id === screenshotOptionsTarget.value?.instance_id,
+	),
+)
+const screenshotsError = computed(() => {
+	const error =
+		screenshotsQuery.error.value ||
+		(groupBy.value === 'custom' ? screenshotGroupsQuery.error.value : null)
+	return error instanceof Error ? error : error ? new Error(String(error)) : null
+})
+const selectionActive = computed(() => selectedKeys.value.size > 0)
+const selectedScreenshots = computed(() =>
+	screenshots.value.filter((screenshot) => selectedKeys.value.has(getSelectionKey(screenshot))),
+)
+const selectedGroupedScreenshots = computed(() =>
+	selectedScreenshots.value.filter((screenshot) => screenshot.group_id),
+)
+const activeDraggedKeys = computed(() => new Set(activeDrag.value?.selectionKeys ?? []))
+const activeDraggedScreenshots = computed(() => {
+	const drag = activeDrag.value
+	if (!drag) return []
+
+	const screenshotsByKey = new Map(
+		screenshots.value.map((screenshot) => [getSelectionKey(screenshot), screenshot]),
+	)
+	return drag.selectionKeys.flatMap((selectionKey) => {
+		const screenshot = screenshotsByKey.get(selectionKey)
+		return screenshot ? [screenshot] : []
+	})
+})
+const activeDraggedScreenshot = computed(() =>
+	activeDrag.value
+		? screenshots.value.find(
+				(screenshot) => getSelectionKey(screenshot) === activeDrag.value?.primarySelectionKey,
+			)
+		: undefined,
+)
+const {
+	items: gatherItems,
+	target: gatherTarget,
+	isGathering,
+	start: startGather,
+	updateTarget: updateGatherTarget,
+	clear: clearGather,
+	finish: finishGather,
+} = useScreenshotDragGather(screenshots)
+const isNarrowingResults = computed(() => search.value.trim().length > 0)
+
+const sortOptions = computed<ComboboxOption<string>[]>(() => [
+	{ value: 'newest', label: formatMessage(messages.newest) },
+	{ value: 'oldest', label: formatMessage(messages.oldest) },
+	{ value: 'name', label: formatMessage(messages.name) },
+])
+const groupOptions = computed<ComboboxOption<string>[]>(() => [
+	{ value: 'custom', label: formatMessage(messages.custom) },
+	...(isGlobal.value ? [{ value: 'instance', label: formatMessage(messages.instance) }] : []),
+	{ value: 'date', label: formatMessage(messages.date) },
+	{ value: 'none', label: formatMessage(messages.none) },
+])
+
+const filteredScreenshots = computed(() => {
+	const query = search.value.trim().toLocaleLowerCase()
+	const filtered = screenshots.value.filter((screenshot) => {
+		if (screenshot.id === revealedScreenshotId.value) return true
+		return (
+			!query ||
+			screenshot.file_name.toLocaleLowerCase().includes(query) ||
+			screenshot.instance_name.toLocaleLowerCase().includes(query)
+		)
+	})
+
+	return filtered.sort((a, b) => {
+		if (sort.value === 'name') return a.file_name.localeCompare(b.file_name)
+		const difference = new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+		return sort.value === 'oldest' ? difference : -difference
+	})
+})
+
+const groupedScreenshots = computed((): ScreenshotGroupData[] => {
+	if (groupBy.value === 'none') {
+		return [
+			{
+				id: 'all',
+				title: formatMessage(messages.allScreenshots),
+				screenshots: filteredScreenshots.value,
+			},
+		]
+	}
+
+	if (groupBy.value === 'instance') {
+		const screenshotGroups = new Map<string, InstanceScreenshot[]>()
+		for (const screenshot of filteredScreenshots.value) {
+			const group = screenshotGroups.get(screenshot.instance_id) ?? []
+			group.push(screenshot)
+			screenshotGroups.set(screenshot.instance_id, group)
+		}
+
+		const syncedInstances = (instancesQuery.data.value ?? [])
+			.filter((instance) => instance.synced_options.screenshots)
+			.sort((a, b) => a.name.localeCompare(b.name))
+		const groups = syncedInstances.flatMap((instance) => {
+			const instanceScreenshots = screenshotGroups.get(instance.id)
+			return instanceScreenshots
+				? [
+						{
+							id: `instance:${instance.id}`,
+							title: instance.name,
+							screenshots: instanceScreenshots,
+							dropInstanceId: instance.id,
+						},
+					]
+				: []
+		})
+
+		for (const [instanceId, instanceScreenshots] of screenshotGroups) {
+			if (groups.some((group) => group.dropInstanceId === instanceId)) continue
+			groups.push({
+				id: `instance:${instanceId}`,
+				title: instanceScreenshots[0]?.instance_name ?? instanceId,
+				screenshots: instanceScreenshots,
+				dropInstanceId: instanceId,
+			})
+		}
+
+		return groups
+	}
+
+	if (groupBy.value === 'custom') {
+		const screenshotGroups = new Map<string, InstanceScreenshot[]>()
+		const ungroupedScreenshots: InstanceScreenshot[] = []
+		const validGroupIds = new Set(customGroups.value.map((group) => group.id))
+		for (const screenshot of filteredScreenshots.value) {
+			const customGroupId = screenshot.group_id
+			if (!customGroupId || !validGroupIds.has(customGroupId)) {
+				ungroupedScreenshots.push(screenshot)
+				continue
+			}
+			const group = screenshotGroups.get(customGroupId) ?? []
+			group.push(screenshot)
+			screenshotGroups.set(customGroupId, group)
+		}
+
+		const groups: ScreenshotGroupData[] = customGroups.value.map((group) => ({
+			id: `custom:${group.id}`,
+			title: group.name,
+			screenshots: screenshotGroups.get(group.id) ?? [],
+			customGroupId: group.id,
+		}))
+		groups.push({
+			id: 'custom:ungrouped',
+			title: formatMessage(messages.ungrouped),
+			screenshots: ungroupedScreenshots,
+			customGroupId: null,
+		})
+		return isNarrowingResults.value
+			? groups.filter(
+					(group) =>
+						group.screenshots.length > 0 || group.customGroupId === groupIdPendingNameEdit.value,
+				)
+			: groups
+	}
+
+	const groups = new Map<string, ScreenshotGroupData>()
+	for (const screenshot of filteredScreenshots.value) {
+		const dateGroup = getDateGroup(screenshot.created_at)
+		const group = groups.get(dateGroup.id) ?? { ...dateGroup, screenshots: [] }
+		group.screenshots.push(screenshot)
+		groups.set(dateGroup.id, group)
+	}
+	return [...groups.values()].sort((a, b) => {
+		const aTime = Math.max(
+			...a.screenshots.map((screenshot) => new Date(screenshot.created_at).getTime()),
+		)
+		const bTime = Math.max(
+			...b.screenshots.map((screenshot) => new Date(screenshot.created_at).getTime()),
+		)
+		return sort.value === 'oldest' ? aTime - bTime : bTime - aTime
+	})
+})
+
+const previewItems = computed(() =>
+	filteredScreenshots.value.map((screenshot) => ({
+		id: getSelectionKey(screenshot),
+		src: screenshot.url,
+		alt: screenshot.file_name,
+		title: screenshot.file_name,
+		editorSource: {
+			id: getSelectionKey(screenshot),
+			path: screenshot.path,
+		},
+		description: isGlobal.value
+			? formatMessage(messages.instanceAndDate, {
+					instance: screenshot.instance_name,
+					date: formatDateTime(screenshot.created_at),
+				})
+			: formatDateTime(screenshot.created_at),
+	})),
+)
+
+const deleteMutation = useMutation({
+	mutationFn: (keys: ScreenshotKey[]) => delete_screenshots(keys),
+	onSuccess: async (_, keys) => {
+		await invalidateScreenshots(keys.map((key) => key.instance_id))
+	},
+})
+const exportMutation = useMutation({
+	mutationFn: ({ keys, path }: { keys: ScreenshotKey[]; path: string }) =>
+		export_screenshots(keys, path),
+})
+const moveMutation = useMutation({
+	mutationFn: ({ keys, targetInstanceId }: { keys: ScreenshotKey[]; targetInstanceId: string }) =>
+		move_screenshots(keys, targetInstanceId),
+	onSuccess: async (_, variables) => {
+		await invalidateScreenshots([
+			...variables.keys.map((key) => key.instance_id),
+			variables.targetInstanceId,
+		])
+		selectedKeys.value = new Set()
+	},
+})
+const saveEditMutation = useMutation({
+	mutationFn: (payload: {
+		screenshot: InstanceScreenshot
+		pngBytes: Uint8Array
+		mode: 'create_copy' | 'replace_edit'
+	}) =>
+		save_edited_screenshot(getScreenshotKey(payload.screenshot), payload.pngBytes, payload.mode),
+	onSuccess: async (saved) => {
+		await invalidateScreenshots([saved.instance_id])
+		await imageViewer.value?.markSavedAndView(getSelectionKey(saved))
+		await revealScreenshot(saved.id)
+	},
+	onError: handleError,
+})
+
+function saveScreenshotEdit(payload: ImageViewerEditorSavePayload) {
+	const screenshot = screenshotBySelectionKey(payload.item.id)
+	if (!screenshot) return
+	saveEditMutation.mutate({
+		screenshot,
+		pngBytes: payload.pngBytes,
+		mode: payload.mode,
+	})
+}
+
+const bulkBusy = computed(
+	() =>
+		deleteMutation.isPending.value ||
+		exportMutation.isPending.value ||
+		moveMutation.isPending.value ||
+		creatingCustomGroup.value ||
+		updatingCustomGroupMemberships.value,
+)
+
+watch(screenshots, (currentScreenshots) => {
+	const currentKeys = new Set(currentScreenshots.map(getSelectionKey))
+	selectedKeys.value = new Set([...selectedKeys.value].filter((key) => currentKeys.has(key)))
+})
+
+watch(groupBy, async (currentGroupBy, previousGroupBy) => {
+	if (currentGroupBy !== 'custom') {
+		groupIdPendingNameEdit.value = undefined
+	}
+	if (currentGroupBy === previousGroupBy) return
+
+	const previousPositions = getScreenshotCardPositions()
+	regrouping.value = true
+	await nextTick()
+	animateScreenshotCardsFrom(previousPositions)
+	regrouping.value = false
+})
+
+let handledFocus: string | undefined
+
+watch(
+	[() => route.query.focus, screenshots],
+	([focus]) => {
+		if (typeof focus !== 'string') {
+			handledFocus = undefined
+			return
+		}
+		if (handledFocus === focus) return
+		if (!screenshots.value.some((screenshot) => screenshot.id === focus)) return
+		handledFocus = focus
+		void revealScreenshot(focus)
+	},
+	{ immediate: true },
+)
+
+watch(
+	() => screenshotGroupsQuery.isSuccess.value,
+	(groupsLoaded) => {
+		if (groupsLoaded) void migrateLegacyScreenshotGroups()
+	},
+	{ immediate: true },
+)
+
+useAppEvent('instance', (event) => {
+	if (event.event !== 'screenshots_updated') return
+	void invalidateScreenshots([event.instance_id])
+})
+
+function getSelectionKey(screenshot: InstanceScreenshot) {
+	return JSON.stringify([screenshot.instance_id, screenshot.file_name])
+}
+
+function getScreenshotCardPositions() {
+	const positions = new Map<string, DOMRect>()
+	const cards = screenshotsPage.value?.querySelectorAll<HTMLElement>('[data-screenshot-card]') ?? []
+	for (const card of cards) {
+		const selectionKey = card.dataset.selectionKey
+		if (selectionKey) positions.set(selectionKey, card.getBoundingClientRect())
+	}
+	return positions
+}
+
+function animateScreenshotCardsFrom(previousPositions: Map<string, DOMRect>) {
+	if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+	const cards = screenshotsPage.value?.querySelectorAll<HTMLElement>('[data-screenshot-card]') ?? []
+	for (const card of cards) {
+		const selectionKey = card.dataset.selectionKey
+		const previousPosition = selectionKey ? previousPositions.get(selectionKey) : undefined
+		if (!previousPosition) continue
+
+		const currentPosition = card.getBoundingClientRect()
+		const translateX = previousPosition.left - currentPosition.left
+		const translateY = previousPosition.top - currentPosition.top
+		if (translateX === 0 && translateY === 0) continue
+
+		card.animate(
+			[
+				{ transform: `translate(${translateX}px, ${translateY}px)` },
+				{ transform: 'translate(0, 0)' },
+			],
+			{ duration: 200, easing: 'ease-out' },
+		)
+	}
+}
+
+function getScreenshotKey(screenshot: InstanceScreenshot): ScreenshotKey {
+	return {
+		instance_id: screenshot.instance_id,
+		file_name: screenshot.file_name,
+	}
+}
+
+async function migrateLegacyScreenshotGroups() {
+	const legacy = legacyCustomGrouping.value
+	if (migratingLegacyGroups.value || legacy.groups.length === 0) return
+
+	migratingLegacyGroups.value = true
+	try {
+		const allScreenshots = await list_all_screenshots()
+		const screenshotIdsByLegacyKey = new Map(
+			allScreenshots.map((screenshot) => [getSelectionKey(screenshot), screenshot.id]),
+		)
+		const screenshotIdsByGroupId = new Map<string, string[]>()
+		for (const [legacyKey, groupId] of Object.entries(legacy.assignments)) {
+			const screenshotId = screenshotIdsByLegacyKey.get(legacyKey)
+			if (!screenshotId) continue
+			const screenshotIds = screenshotIdsByGroupId.get(groupId) ?? []
+			screenshotIds.push(screenshotId)
+			screenshotIdsByGroupId.set(groupId, screenshotIds)
+		}
+		const groups: ScreenshotGroupImport[] = legacy.groups.map((group) => ({
+			...group,
+			screenshot_ids: screenshotIdsByGroupId.get(group.id) ?? [],
+		}))
+		await import_screenshot_groups(groups)
+		legacyCustomGrouping.value = { groups: [], assignments: {} }
+		await Promise.all([
+			queryClient.invalidateQueries({ queryKey: screenshotKeys.groups() }),
+			invalidateScreenshots(allScreenshots.map((screenshot) => screenshot.instance_id)),
+		])
+	} catch (error) {
+		handleError(error)
+	} finally {
+		migratingLegacyGroups.value = false
+	}
+}
+
+function getDefaultCustomGroupName() {
+	const existingNames = new Set(
+		customGroups.value.map((group) => group.name.trim().toLocaleLowerCase()),
+	)
+	let groupNumber = customGroups.value.length + 1
+	while (existingNames.has(`group ${groupNumber}`.toLocaleLowerCase())) {
+		groupNumber += 1
+	}
+	return `Group ${groupNumber}`
+}
+
+async function createCustomGroup() {
+	if (creatingCustomGroup.value) return
+	creatingCustomGroup.value = true
+	try {
+		const screenshotsToGroup = [...selectedScreenshots.value]
+		const group = await create_screenshot_group(
+			getDefaultCustomGroupName(),
+			screenshotsToGroup.map((screenshot) => screenshot.id),
+		)
+		queryClient.setQueryData<ScreenshotGroup[]>(screenshotKeys.groups(), (groups = []) => [
+			group,
+			...groups.filter((existingGroup) => existingGroup.id !== group.id),
+		])
+		await invalidateScreenshots([
+			...new Set(screenshotsToGroup.map((screenshot) => screenshot.instance_id)),
+		])
+		groupBy.value = 'custom'
+		selectedKeys.value = new Set()
+		groupIdPendingNameEdit.value = group.id
+	} catch (error) {
+		handleError(error)
+	} finally {
+		creatingCustomGroup.value = false
+	}
+}
+
+function validateCustomGroupName(value: string) {
+	const normalizedGroupName = value.trim()
+	return (
+		normalizedGroupName.length > 0 && normalizedGroupName.length <= MAX_INSTANCE_GROUP_NAME_LENGTH
+	)
+}
+
+async function renameCustomGroup(groupId: string | null | undefined, name: string) {
+	if (!groupId) return false
+	try {
+		const group = await rename_screenshot_group(groupId, name)
+		queryClient.setQueryData<ScreenshotGroup[]>(screenshotKeys.groups(), (groups = []) =>
+			groups.map((existingGroup) => (existingGroup.id === group.id ? group : existingGroup)),
+		)
+		return true
+	} catch {
+		return false
+	}
+}
+
+async function requestCustomGroupDeletion(groupId: string) {
+	const group = customGroups.value.find((candidate) => candidate.id === groupId)
+	if (!group) return
+
+	customGroupToDelete.value = group
+	try {
+		const allScreenshots = await list_all_screenshots()
+		if (allScreenshots.some((screenshot) => screenshot.group_id === groupId)) {
+			deleteGroupModal.value?.show()
+		} else {
+			await deleteCustomGroup()
+		}
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function deleteCustomGroup() {
+	const group = customGroupToDelete.value
+	if (!group) return
+	try {
+		await delete_screenshot_group(group.id)
+		queryClient.setQueryData<ScreenshotGroup[]>(screenshotKeys.groups(), (groups = []) =>
+			groups.filter((candidate) => candidate.id !== group.id),
+		)
+		await invalidateScreenshots(screenshots.value.map((screenshot) => screenshot.instance_id))
+		if (groupIdPendingNameEdit.value === group.id) {
+			groupIdPendingNameEdit.value = undefined
+		}
+		customGroupToDelete.value = undefined
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function assignCustomGroup(
+	screenshotsToMove: InstanceScreenshot[],
+	customGroupId: string | null,
+) {
+	const movedScreenshots = screenshotsToMove.filter(
+		(screenshot) => (screenshot.group_id ?? null) !== customGroupId,
+	)
+	if (movedScreenshots.length === 0 || updatingCustomGroupMemberships.value) return
+	updatingCustomGroupMemberships.value = true
+	try {
+		await set_screenshot_group_memberships(
+			movedScreenshots.map((screenshot) => ({
+				screenshot_id: screenshot.id,
+				group_id: customGroupId,
+			})),
+		)
+		await invalidateScreenshots(movedScreenshots.map((screenshot) => screenshot.instance_id))
+		selectedKeys.value = new Set()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		updatingCustomGroupMemberships.value = false
+	}
+}
+
+function removeSelectedScreenshotsFromGroups() {
+	if (bulkBusy.value || selectedGroupedScreenshots.value.length === 0) return
+	void assignCustomGroup(selectedGroupedScreenshots.value, null)
+}
+
+function getDateGroup(createdAt: string): Omit<ScreenshotGroupData, 'screenshots'> {
+	const created = dayjs(createdAt)
+	const now = dayjs()
+	if (created.isSame(now, 'day')) {
+		return { id: 'date:today', title: formatMessage(messages.today) }
+	}
+	if (created.isSame(now.subtract(1, 'day'), 'day')) {
+		return { id: 'date:yesterday', title: formatMessage(messages.yesterday) }
+	}
+	if (created.isSame(now, 'week')) {
+		return {
+			id: `date:week:${created.startOf('week').format('YYYY-MM-DD')}`,
+			title: formatMessage(messages.thisWeek),
+		}
+	}
+	if (created.isSame(now, 'month')) {
+		return {
+			id: `date:month:${created.format('YYYY-MM')}`,
+			title: formatMessage(messages.thisMonth),
+		}
+	}
+	return {
+		id: `date:month:${created.format('YYYY-MM')}`,
+		title: formatMonth(created.toDate()),
+	}
+}
+
+async function invalidateScreenshots(instanceIds: string[]) {
+	const uniqueInstanceIds = [...new Set(instanceIds)]
+	await Promise.all([
+		queryClient.invalidateQueries({ queryKey: screenshotKeys.global() }),
+		...uniqueInstanceIds.map((instanceId) =>
+			queryClient.invalidateQueries({ queryKey: screenshotKeys.instance(instanceId) }),
+		),
+	])
+}
+
+function toggleScreenshotSelection(screenshot: InstanceScreenshot) {
+	if (bulkBusy.value) return
+	const key = getSelectionKey(screenshot)
+	const next = new Set(selectedKeys.value)
+	if (next.has(key)) {
+		next.delete(key)
+	} else {
+		next.add(key)
+	}
+	selectedKeys.value = next
+}
+
+function activateScreenshot(screenshot: InstanceScreenshot, event: MouseEvent | KeyboardEvent) {
+	if (selectionActive.value || event.shiftKey) {
+		toggleScreenshotSelection(screenshot)
+		return
+	}
+	const index = filteredScreenshots.value.findIndex(
+		(candidate) => getSelectionKey(candidate) === getSelectionKey(screenshot),
+	)
+	if (index >= 0) {
+		screenshotOptionsMenu.value?.close()
+		imageViewer.value?.show(index)
+	}
+}
+
+function clearSelection() {
+	if (!bulkBusy.value) selectedKeys.value = new Set()
+}
+
+function requestDelete(screenshot: InstanceScreenshot, fromPreview = false) {
+	deleteFromPreview.value = fromPreview
+	screenshotToDelete.value = screenshot
+	deleteModal.value?.show()
+}
+
+function showScreenshotOptions(screenshot: InstanceScreenshot, event: MouseEvent) {
+	screenshotOptionsTarget.value = screenshot
+	const options: ButtonMenuOption[] = [
+		...(event.type === 'contextmenu'
+			? [
+					{
+						id: 'edit',
+						label: formatMessage(messages.edit),
+						icon: EditIcon,
+						action: () => editScreenshot(screenshot),
+					},
+					{
+						id: 'copy',
+						label: formatMessage(messages.copy),
+						icon: ClipboardCopyIcon,
+						action: () => void copyScreenshot(screenshot),
+					},
+				]
+			: []),
+		{
+			id: 'open',
+			label: formatMessage(messages.showInFolder),
+			icon: FolderOpenIcon,
+			action: () => void openScreenshot(screenshot),
+		},
+		{
+			id: 'go-to-instance',
+			label: formatMessage(messages.goToInstance),
+			action: () => void goToInstance(screenshot),
+		},
+		{ type: 'divider' },
+		{
+			id: 'delete',
+			label: formatMessage(commonMessages.deleteLabel),
+			icon: TrashIcon,
+			tone: 'red',
+			action: () => requestDelete(screenshot),
+		},
+	]
+	screenshotOptionsMenu.value?.open(event, options)
+}
+
+function goToInstance(screenshot: InstanceScreenshot) {
+	return router.push(`/instance/${encodeURIComponent(screenshot.instance_id)}`)
+}
+
+function screenshotBySelectionKey(selectionKey: string) {
+	return screenshots.value.find((screenshot) => getSelectionKey(screenshot) === selectionKey)
+}
+
+function copyScreenshotBySelectionKey(selectionKey: string) {
+	const screenshot = screenshotBySelectionKey(selectionKey)
+	if (screenshot) void copyScreenshot(screenshot)
+}
+
+function isScreenshotCopiedBySelectionKey(selectionKey: string) {
+	const screenshot = screenshotBySelectionKey(selectionKey)
+	return screenshot ? copiedScreenshotIds.value.has(screenshot.id) : false
+}
+
+function openScreenshotBySelectionKey(selectionKey: string) {
+	const screenshot = screenshotBySelectionKey(selectionKey)
+	if (screenshot) void openScreenshot(screenshot)
+}
+
+function requestPreviewDelete(selectionKey: string) {
+	const screenshot = screenshotBySelectionKey(selectionKey)
+	if (screenshot) requestDelete(screenshot, true)
+}
+
+function editScreenshot(screenshot: InstanceScreenshot) {
+	const index = filteredScreenshots.value.findIndex(
+		(candidate) => getSelectionKey(candidate) === getSelectionKey(screenshot),
+	)
+	if (index >= 0) {
+		screenshotOptionsMenu.value?.close()
+		void imageViewer.value?.edit(index)
+	}
+}
+
+let revealTimeout: ReturnType<typeof setTimeout> | undefined
+
+async function revealScreenshot(id: string) {
+	if (revealTimeout) clearTimeout(revealTimeout)
+	revealedScreenshotId.value = id
+	await nextTick()
+
+	const group = groupedScreenshots.value.find((candidate) =>
+		candidate.screenshots.some((screenshot) => screenshot.id === id),
+	)
+	if (group) setGroupCollapsed(group.id, false)
+
+	await nextTick()
+	const card = document.querySelector<HTMLElement>(`[data-screenshot-id="${CSS.escape(id)}"]`)
+	card?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+	card?.focus()
+	highlightedScreenshotId.value = id
+	revealTimeout = setTimeout(() => {
+		if (highlightedScreenshotId.value === id) highlightedScreenshotId.value = undefined
+		if (revealedScreenshotId.value === id) revealedScreenshotId.value = undefined
+		revealTimeout = undefined
+	}, 2400)
+}
+
+async function confirmDelete() {
+	const screenshot = screenshotToDelete.value
+	if (!screenshot) return
+	try {
+		await deleteMutation.mutateAsync([getScreenshotKey(screenshot)])
+		if (deleteFromPreview.value) imageViewer.value?.hide()
+		addNotification({ type: 'success', title: formatMessage(messages.deleteSuccess) })
+	} catch (error) {
+		handleError(error)
+	} finally {
+		screenshotToDelete.value = null
+		deleteFromPreview.value = false
+	}
+}
+
+async function deleteSelected() {
+	const selected = selectedScreenshots.value
+	if (bulkBusy.value || selected.length === 0) return
+	try {
+		await deleteMutation.mutateAsync(selected.map(getScreenshotKey))
+		selectedKeys.value = new Set()
+		addNotification({
+			type: 'success',
+			title: formatMessage(messages.bulkDeleteSuccess, { count: selected.length }),
+		})
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function exportSelected() {
+	const selected = selectedScreenshots.value
+	if (bulkBusy.value || selected.length === 0) return
+	const instanceName =
+		selected[0]?.instance_name.replace(/[\\/:*?"<>|]/g, '-') ?? formatMessage(messages.heading)
+	const outputPath = await save({
+		defaultPath: isGlobal.value
+			? formatMessage(messages.globalExportFilename)
+			: formatMessage(messages.instanceExportFilename, { instance: instanceName }),
+		filters: [{ name: formatMessage(messages.zipArchive), extensions: ['zip'] }],
+	})
+	if (!outputPath) return
+	try {
+		await exportMutation.mutateAsync({
+			keys: selected.map(getScreenshotKey),
+			path: outputPath,
+		})
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function copyScreenshot(screenshot: InstanceScreenshot) {
+	try {
+		const png = readFile(screenshot.path).then((bytes) => new Blob([bytes], { type: 'image/png' }))
+		await navigator.clipboard.write([new ClipboardItem({ 'image/png': png })])
+		markScreenshotCopied(screenshot.id)
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+function markScreenshotCopied(id: string) {
+	copiedScreenshotIds.value = new Set([...copiedScreenshotIds.value, id])
+	const existingTimeout = copiedResetTimeouts.get(id)
+	if (existingTimeout) clearTimeout(existingTimeout)
+	copiedResetTimeouts.set(
+		id,
+		setTimeout(() => {
+			const nextCopiedScreenshotIds = new Set(copiedScreenshotIds.value)
+			nextCopiedScreenshotIds.delete(id)
+			copiedScreenshotIds.value = nextCopiedScreenshotIds
+			copiedResetTimeouts.delete(id)
+		}, 2000),
+	)
+}
+
+async function openScreenshot(screenshot: InstanceScreenshot) {
+	try {
+		await open_screenshot(getScreenshotKey(screenshot))
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+function handleDragStart(event: DragStartEvent) {
+	const source = event.operation.source?.data as ScreenshotDragData | undefined
+	if (!source) return
+
+	const selectedDragKeys = selectedKeys.value.has(source.selectionKey)
+		? selectedScreenshots.value.map(getSelectionKey)
+		: []
+	const selectionKeys = [
+		source.selectionKey,
+		...selectedDragKeys.filter((selectionKey) => selectionKey !== source.selectionKey),
+	]
+	activeDrag.value = {
+		primarySelectionKey: source.selectionKey,
+		selectionKeys,
+	}
+	startGather(activeDrag.value, event.operation.position.current)
+}
+
+function handleDragMove(event: DragMoveEvent) {
+	if (gatherItems.value.length === 0) return
+	updateGatherTarget(event.to ?? event.operation.position.current)
+}
+
+function handleDragOver(event: DragOverEvent) {
+	const target = event.operation.target?.data as ScreenshotDropData | undefined
+	activeDropGroupId.value = target?.groupId ?? null
+}
+
+function canDropScreenshotsOnTarget(target: ScreenshotDropData) {
+	if (!activeDrag.value || activeDraggedScreenshots.value.length === 0) return false
+
+	if ('customGroupId' in target) {
+		const targetGroupId = target.customGroupId ?? null
+		return activeDraggedScreenshots.value.some(
+			(screenshot) => (screenshot.group_id ?? null) !== targetGroupId,
+		)
+	}
+
+	return Boolean(
+		target.instanceId &&
+		activeDraggedScreenshots.value.some(
+			(screenshot) => screenshot.instance_id !== target.instanceId,
+		),
+	)
+}
+
+function canDropScreenshotsOnGroup(group: ScreenshotGroupData) {
+	if (groupBy.value === 'custom') {
+		return canDropScreenshotsOnTarget({
+			groupId: group.id,
+			customGroupId: group.customGroupId ?? null,
+		})
+	}
+	if (groupBy.value === 'instance' && group.dropInstanceId) {
+		return canDropScreenshotsOnTarget({
+			groupId: group.id,
+			instanceId: group.dropInstanceId,
+		})
+	}
+	return false
+}
+
+async function handleDragEnd(event: DragEndEvent) {
+	const drag = activeDrag.value
+	const target = event.operation.target?.data as ScreenshotDropData | undefined
+	clearGroupHoverOpenTimeout()
+	if (!event.canceled && drag && target && canDropScreenshotsOnTarget(target)) {
+		if ('customGroupId' in target) {
+			await assignCustomGroup(activeDraggedScreenshots.value, target.customGroupId ?? null)
+			await nextTick()
+		} else if (target.instanceId) {
+			const keys = activeDraggedScreenshots.value.map(getScreenshotKey)
+			const movableKeys = keys.filter((key) => key.instance_id !== target.instanceId)
+			if (movableKeys.length > 0) {
+				moveMutation.mutate({ keys: movableKeys, targetInstanceId: target.instanceId })
+			}
+		}
+	}
+
+	clearGather()
+	activeDrag.value = null
+	activeDropGroupId.value = null
+}
+
+function setGroupCollapsed(groupId: string, collapsed: boolean) {
+	collapsedGroups.value = { ...collapsedGroups.value, [groupId]: collapsed }
+}
+
+const GROUP_HOVER_OPEN_DELAY = 750
+let groupHoverOpenTimeout: ReturnType<typeof setTimeout> | undefined
+
+function clearGroupHoverOpenTimeout() {
+	if (groupHoverOpenTimeout !== undefined) {
+		clearTimeout(groupHoverOpenTimeout)
+	}
+	groupHoverOpenTimeout = undefined
+}
+
+watch(activeDropGroupId, (groupId) => {
+	clearGroupHoverOpenTimeout()
+	if (!groupId || !collapsedGroups.value[groupId]) return
+
+	const group = groupedScreenshots.value.find((candidate) => candidate.id === groupId)
+	if (!group || !canDropScreenshotsOnGroup(group)) return
+
+	groupHoverOpenTimeout = setTimeout(() => {
+		groupHoverOpenTimeout = undefined
+		if (activeDropGroupId.value === groupId) {
+			setGroupCollapsed(groupId, false)
+		}
+	}, GROUP_HOVER_OPEN_DELAY)
+})
+
+onBeforeUnmount(() => {
+	clearGroupHoverOpenTimeout()
+	if (revealTimeout) clearTimeout(revealTimeout)
+	for (const timeout of copiedResetTimeouts.values()) clearTimeout(timeout)
+	copiedResetTimeouts.clear()
+})
+</script>
+
+<template>
+	<ConfirmModal
+		ref="deleteModal"
+		:title="formatMessage(messages.deleteTitle)"
+		:description="
+			formatMessage(messages.deleteDescription, {
+				name: screenshotToDelete?.file_name ?? '',
+			})
+		"
+		:proceed-label="formatMessage(commonMessages.deleteLabel)"
+		:markdown="false"
+		@proceed="confirmDelete"
+	/>
+	<ConfirmModal
+		ref="bulkDeleteModal"
+		:title="formatMessage(messages.bulkDeleteTitle)"
+		:description="formatMessage(messages.bulkDeleteDescription, { count: selectedKeys.size })"
+		:proceed-label="formatMessage(commonMessages.deleteLabel)"
+		:markdown="false"
+		@proceed="deleteSelected"
+	/>
+	<ConfirmModal
+		ref="deleteGroupModal"
+		:title="formatMessage(messages.deleteGroup)"
+		:description="formatMessage(messages.deleteGroupDescription)"
+		:proceed-label="formatMessage(commonMessages.deleteLabel)"
+		:markdown="false"
+		@proceed="deleteCustomGroup"
+	/>
+	<ContextMenu ref="screenshotOptionsMenu" :label="formatMessage(commonMessages.actionsLabel)">
+		<template #go-to-instance>
+			<Avatar
+				:src="getInstanceIconUrl(screenshotOptionsInstance?.icon_path)"
+				:tint-by="screenshotOptionsTarget?.instance_id"
+				alt=""
+				size="1rem"
+				class="shrink-0"
+			/>
+			{{ formatMessage(messages.goToInstance) }}
+		</template>
+	</ContextMenu>
+	<ImageViewerEditor
+		ref="imageViewer"
+		:items="previewItems"
+		editor="enabled"
+		:saving="saveEditMutation.isPending.value"
+		@save="saveScreenshotEdit"
+	>
+		<template #actions="{ item }">
+			<IconButton
+				v-tooltip="
+					formatMessage(isScreenshotCopiedBySelectionKey(item.id) ? messages.copied : messages.copy)
+				"
+				:label="
+					formatMessage(isScreenshotCopiedBySelectionKey(item.id) ? messages.copied : messages.copy)
+				"
+				type="quiet"
+				@click="copyScreenshotBySelectionKey(item.id)"
+			>
+				<CheckIcon v-if="isScreenshotCopiedBySelectionKey(item.id)" class="text-green" />
+				<ClipboardCopyIcon v-else />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(messages.showInFolder)"
+				:label="formatMessage(messages.showInFolder)"
+				type="quiet"
+				@click="openScreenshotBySelectionKey(item.id)"
+			>
+				<FolderOpenIcon />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(commonMessages.deleteLabel)"
+				:label="formatMessage(commonMessages.deleteLabel)"
+				type="quiet"
+				class="hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+				@click="requestPreviewDelete(item.id)"
+			>
+				<TrashIcon />
+			</IconButton>
+		</template>
+	</ImageViewerEditor>
+
+	<div
+		ref="screenshotsPage"
+		class="flex h-full w-full flex-col gap-3"
+		:class="{ 'justify-center': screenshots.length === 0 && !groupIdPendingNameEdit }"
+	>
+		<template v-if="screenshots.length > 0 || groupIdPendingNameEdit">
+			<h1 v-if="showHeading" class="m-0 text-2xl font-bold text-contrast">
+				{{ formatMessage(messages.heading) }}
+			</h1>
+
+			<ScreenshotToolbar
+				v-model:search="search"
+				v-model:sort="sortModel"
+				v-model:group="groupByModel"
+				:sort-options="sortOptions"
+				:group-options="groupOptions"
+				@new-group="createCustomGroup"
+			/>
+		</template>
+
+		<ReadyTransition :pending="screenshotsReadyPending">
+			<EmptyState
+				v-if="screenshotsError"
+				type="error"
+				:heading="formatMessage(messages.errorHeading)"
+				:description="screenshotsError.message"
+			>
+				<template #actions>
+					<Button type="outlined" @click="screenshotsQuery.refetch()">
+						{{ formatMessage(commonMessages.retryButton) }}
+					</Button>
+				</template>
+			</EmptyState>
+
+			<EmptyState
+				v-else-if="screenshots.length === 0 && !groupIdPendingNameEdit"
+				type="no-images"
+				:heading="formatMessage(messages.emptyHeading)"
+				:description="formatMessage(messages.emptyDescription)"
+			/>
+			<EmptyState
+				v-else-if="filteredScreenshots.length === 0 && !groupIdPendingNameEdit"
+				type="no-images"
+				:heading="formatMessage(messages.noResultsHeading)"
+				:description="formatMessage(messages.noResultsDescription)"
+			/>
+
+			<DragDropProvider
+				v-else
+				@drag-start="handleDragStart"
+				@drag-move="handleDragMove"
+				@drag-over="handleDragOver"
+				@drag-end="handleDragEnd"
+			>
+				<div class="flex flex-col">
+					<ScreenshotGroupSection
+						v-for="group in groupedScreenshots"
+						:id="group.id"
+						:key="group.id"
+						:title="group.title"
+						:screenshots="group.screenshots"
+						:selected-keys="selectedKeys"
+						:selection-active="selectionActive"
+						:active-dragged-keys="activeDraggedKeys"
+						:show-drop-outline="activeDropGroupId === group.id && canDropScreenshotsOnGroup(group)"
+						:can-drag="groupBy === 'custom' || (isGlobal && groupBy === 'instance')"
+						:drop-instance-id="groupBy === 'instance' ? group.dropInstanceId : undefined"
+						:drop-custom-group="groupBy === 'custom'"
+						:drop-custom-group-id="group.customGroupId ?? undefined"
+						:show-instance-name="isGlobal && groupBy !== 'instance'"
+						:highlighted-screenshot-id="highlightedScreenshotId"
+						:copied-screenshot-ids="copiedScreenshotIds"
+						:animate-entry="!regrouping"
+						:force-open="search.length > 0"
+						:hide-header="groupBy === 'none'"
+						:editable-title="Boolean(group.customGroupId)"
+						:start-editing-title="groupIdPendingNameEdit === group.customGroupId"
+						:max-title-length="MAX_INSTANCE_GROUP_NAME_LENGTH"
+						:validate-title="validateCustomGroupName"
+						:on-title-change="(name: string) => renameCustomGroup(group.customGroupId, name)"
+						:collapsed="Boolean(collapsedGroups[group.id])"
+						@update:collapsed="(value) => setGroupCollapsed(group.id, value)"
+						@activate="activateScreenshot"
+						@toggle-selection="toggleScreenshotSelection"
+						@copy="copyScreenshot"
+						@edit="editScreenshot"
+						@more="showScreenshotOptions"
+					>
+						<template v-if="group.customGroupId" #actions="{ startEditing }">
+							<div
+								class="flex shrink-0 items-center opacity-0 transition-opacity duration-250 group-hover/header:opacity-100 focus-within:opacity-100"
+							>
+								<IconButton
+									v-tooltip="formatMessage(messages.editGroup)"
+									:label="formatMessage(messages.editGroup)"
+									type="quiet"
+									size="sm"
+									@click.stop="startEditing"
+								>
+									<EditIcon />
+								</IconButton>
+								<IconButton
+									v-tooltip="formatMessage(messages.deleteGroup)"
+									:label="formatMessage(messages.deleteGroup)"
+									type="quiet"
+									size="sm"
+									@click.stop="requestCustomGroupDeletion(group.customGroupId)"
+								>
+									<TrashIcon />
+								</IconButton>
+							</div>
+						</template>
+					</ScreenshotGroupSection>
+				</div>
+				<Teleport to="body">
+					<div class="pointer-events-none fixed inset-0 z-[9999]">
+						<DragOverlay :drop-animation="null">
+							<div
+								v-if="activeDraggedScreenshot"
+								class="w-full transition-all duration-150 ease-out"
+								:class="isGathering ? 'scale-[0.975]' : 'scale-100'"
+							>
+								<ScreenshotDragPreview
+									:screenshot="activeDraggedScreenshot"
+									:count="activeDraggedScreenshots.length"
+								/>
+							</div>
+						</DragOverlay>
+					</div>
+				</Teleport>
+			</DragDropProvider>
+			<ScreenshotDragGather
+				v-if="gatherItems.length > 0"
+				:items="gatherItems"
+				:target="gatherTarget"
+				@complete="finishGather"
+			/>
+		</ReadyTransition>
+	</div>
+
+	<FloatingActionBar
+		:shown="selectionActive"
+		:aria-label="formatMessage(messages.selectionAriaLabel)"
+		hide-when-modal-open
+	>
+		<div class="flex items-center gap-0.5">
+			<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-contrast">
+				{{ formatMessage(messages.selectedCount, { count: selectedKeys.size }) }}
+			</span>
+			<div class="mx-1 h-6 w-px bg-surface-5" />
+			<Button
+				v-tooltip="formatMessage(commonMessages.clearButton)"
+				type="quiet"
+				:aria-label="formatMessage(commonMessages.clearButton)"
+				:disabled="bulkBusy"
+				@click="clearSelection"
+			>
+				<XIcon class="hidden cq-show-icon" />
+				<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+			</Button>
+		</div>
+		<div class="ml-auto flex items-center gap-0.5">
+			<Button
+				v-tooltip="formatMessage(messages.newGroup)"
+				type="quiet"
+				:aria-label="formatMessage(messages.newGroup)"
+				:disabled="bulkBusy"
+				@click="createCustomGroup"
+			>
+				<SquarePlusIcon />
+				<span class="bar-label">{{ formatMessage(messages.newGroup) }}</span>
+			</Button>
+			<Button
+				v-if="selectedGroupedScreenshots.length > 0"
+				v-tooltip="formatMessage(messages.removeFromGroup)"
+				type="quiet"
+				:aria-label="formatMessage(messages.removeFromGroup)"
+				:disabled="bulkBusy"
+				@click="removeSelectedScreenshotsFromGroups"
+			>
+				<MinusIcon />
+				<span class="bar-label">{{ formatMessage(messages.removeFromGroup) }}</span>
+			</Button>
+			<Button
+				v-tooltip="formatMessage(messages.exportZip)"
+				type="quiet"
+				:aria-label="formatMessage(messages.exportZip)"
+				:disabled="bulkBusy"
+				@click="exportSelected"
+			>
+				<FileArchiveIcon />
+				<span class="bar-label">{{ formatMessage(messages.exportZip) }}</span>
+			</Button>
+			<div class="mx-1 h-6 w-px bg-surface-5" />
+			<Button
+				v-tooltip="formatMessage(commonMessages.deleteLabel)"
+				type="quiet"
+				color="red"
+				interaction="filled"
+				:aria-label="formatMessage(commonMessages.deleteLabel)"
+				:disabled="bulkBusy"
+				@click="bulkDeleteModal?.show()"
+			>
+				<TrashIcon />
+				<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+			</Button>
+		</div>
+	</FloatingActionBar>
+</template>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/section.vue b/apps/app-frontend/src/components/ui/screenshots-page/section.vue
new file mode 100644
index 0000000000..b5872c4ddf
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/section.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import {
+	Accordion,
+	commonMessages,
+	defineMessages,
+	InlineEditableText,
+	TagItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { nextTick, ref, watch } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		title: string
+		count: number
+		collapsed?: boolean
+		forceOpen?: boolean
+		hideHeader?: boolean
+		editable?: boolean
+		startEditing?: boolean
+		maxTitleLength?: number
+		validateTitle?: (value: string) => boolean
+		onTitleChange?: (value: string) => boolean | void | Promise<boolean | void>
+	}>(),
+	{
+		collapsed: false,
+		forceOpen: false,
+		hideHeader: false,
+		editable: false,
+		startEditing: false,
+	},
+)
+
+const emit = defineEmits<{
+	(e: 'update:collapsed', collapsed: boolean): void
+}>()
+
+const { formatMessage } = useVIntl()
+const accordion = ref<InstanceType<typeof Accordion>>()
+const titleInput = ref<InstanceType<typeof InlineEditableText>>()
+const titleModel = ref(props.title)
+const messages = defineMessages({
+	collapse: { id: 'app.screenshots.group.collapse', defaultMessage: 'Collapse group' },
+	expand: { id: 'app.screenshots.group.expand', defaultMessage: 'Expand group' },
+})
+
+function toggle() {
+	if (accordion.value?.isOpen) {
+		accordion.value.close()
+	} else {
+		accordion.value?.open()
+	}
+}
+
+async function startTitleEditing() {
+	if (!props.editable) return
+	await titleInput.value?.startEditing()
+}
+
+watch(
+	() => props.title,
+	(title) => {
+		titleModel.value = title
+	},
+)
+
+watch(
+	() => props.startEditing,
+	async (shouldStartEditing) => {
+		if (!shouldStartEditing) return
+		await nextTick()
+		await startTitleEditing()
+	},
+	{ immediate: true, flush: 'post' },
+)
+</script>
+
+<template>
+	<section class="flex w-full flex-col">
+		<div
+			v-if="!hideHeader"
+			class="group/header flex h-10 w-full items-center gap-2 border-0 border-b border-solid border-b-surface-5"
+		>
+			<div class="group/open-target flex min-w-0 cursor-pointer items-center gap-2" @click="toggle">
+				<button
+					type="button"
+					class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0"
+					:aria-expanded="accordion?.isOpen"
+					:aria-label="formatMessage(accordion?.isOpen ? messages.collapse : messages.expand)"
+					@click.stop="toggle"
+				>
+					<DropdownIcon
+						class="size-5 shrink-0 text-secondary transition-all duration-300 group-hover/open-target:text-primary"
+						:class="{ 'rotate-180': accordion?.isOpen }"
+					/>
+				</button>
+				<InlineEditableText
+					v-if="editable"
+					ref="titleInput"
+					v-model="titleModel"
+					activation-mode="manual"
+					class="!h-10 select-none text-base font-semibold text-primary group-hover/open-target:text-contrast"
+					:edit-label="formatMessage(commonMessages.renameButton)"
+					max-width="24rem"
+					icon-text-class="select-none"
+					:max-length="maxTitleLength"
+					:validate="validateTitle"
+					:on-change="onTitleChange"
+				/>
+				<span
+					v-else
+					class="select-none truncate text-base font-semibold text-primary group-hover/open-target:text-contrast"
+				>
+					{{ title }}
+				</span>
+				<TagItem v-if="count" class="shrink-0 border-surface-3 bg-surface-2">
+					{{ count }}
+				</TagItem>
+			</div>
+			<div class="min-w-0 flex-1" />
+			<slot name="actions" :start-editing="startTitleEditing" />
+		</div>
+		<Accordion
+			ref="accordion"
+			:open-by-default="hideHeader || !props.collapsed"
+			:force-open="forceOpen"
+			overflow-visible
+			class="w-full"
+			@on-open="emit('update:collapsed', false)"
+			@on-close="emit('update:collapsed', true)"
+		>
+			<div class="mt-2.5">
+				<slot />
+			</div>
+		</Accordion>
+	</section>
+</template>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/toolbar.vue b/apps/app-frontend/src/components/ui/screenshots-page/toolbar.vue
new file mode 100644
index 0000000000..3b5812ec1c
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/toolbar.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ArrowUpDownIcon, LayoutGridIcon, SearchIcon, SquarePlusIcon } from '@modrinth/assets'
+import {
+	Button,
+	Combobox,
+	type ComboboxOption,
+	defineMessages,
+	Input,
+	useVIntl,
+} from '@modrinth/ui'
+
+const search = defineModel<string>('search', { required: true })
+const sort = defineModel<string>('sort', { required: true })
+const group = defineModel<string>('group', { required: true })
+
+defineProps<{
+	sortOptions: ComboboxOption<string>[]
+	groupOptions: ComboboxOption<string>[]
+}>()
+
+const emit = defineEmits<{
+	(e: 'new-group'): void
+}>()
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	search: { id: 'app.screenshots.search', defaultMessage: 'Search' },
+	newGroup: { id: 'app.screenshots.group.new', defaultMessage: 'New group' },
+	sortBy: { id: 'app.screenshots.sort-by', defaultMessage: 'Sort by' },
+	groupBy: { id: 'app.screenshots.group-by', defaultMessage: 'Group by' },
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
+			<Input
+				v-model="search"
+				:icon="SearchIcon"
+				type="text"
+				:placeholder="formatMessage(messages.search)"
+				clearable
+				wrapper-class="min-w-[16rem] flex-1"
+			/>
+			<Button @click="emit('new-group')">
+				<SquarePlusIcon />
+				{{ formatMessage(messages.newGroup) }}
+			</Button>
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			<Combobox
+				v-model="sort"
+				class="w-max"
+				:options="sortOptions"
+				:show-icon-in-selected="false"
+				dropdown-min-width="160px"
+			>
+				<template #prefix>
+					<ArrowUpDownIcon
+						class="size-5 text-primary"
+						:aria-label="formatMessage(messages.sortBy)"
+					/>
+				</template>
+				<template #selected="{ label }">
+					<span>{{ label }}</span>
+				</template>
+			</Combobox>
+			<Combobox
+				v-model="group"
+				class="w-max"
+				:options="groupOptions"
+				:show-icon-in-selected="false"
+				dropdown-min-width="160px"
+			>
+				<template #prefix>
+					<LayoutGridIcon
+						class="size-5 text-primary"
+						:aria-label="formatMessage(messages.groupBy)"
+					/>
+				</template>
+				<template #selected="{ label }">
+					<span>{{ label }}</span>
+				</template>
+			</Combobox>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/use-screenshot-drag-gather.ts b/apps/app-frontend/src/components/ui/screenshots-page/use-screenshot-drag-gather.ts
new file mode 100644
index 0000000000..9afe8b949a
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/use-screenshot-drag-gather.ts
@@ -0,0 +1,130 @@
+import { onBeforeUnmount, type Ref, ref } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+type Point = {
+	x: number
+	y: number
+}
+
+export type ActiveScreenshotDrag = {
+	primarySelectionKey: string
+	selectionKeys: string[]
+}
+
+export const gatherDuration = 500
+
+export type ScreenshotDragGatherItem = {
+	screenshot: InstanceScreenshot
+	selectionKey: string
+	rect: {
+		left: number
+		top: number
+		width: number
+		height: number
+	}
+}
+
+function getSelectionKey(screenshot: InstanceScreenshot) {
+	return JSON.stringify([screenshot.instance_id, screenshot.file_name])
+}
+
+export function useScreenshotDragGather(screenshots: Ref<InstanceScreenshot[]>) {
+	const items = ref<ScreenshotDragGatherItem[]>([])
+	const target = ref<Point>({ x: 0, y: 0 })
+	const targetOffset = ref<Point>({ x: 0, y: 0 })
+	const isGathering = ref(false)
+	let cleanupTimer: number | undefined
+
+	const clearCleanupTimer = () => {
+		if (cleanupTimer !== undefined) {
+			clearTimeout(cleanupTimer)
+			cleanupTimer = undefined
+		}
+	}
+
+	const clear = () => {
+		clearCleanupTimer()
+		items.value = []
+		targetOffset.value = { x: 0, y: 0 }
+		isGathering.value = false
+	}
+
+	const updateTarget = (pointer: Point) => {
+		target.value = {
+			x: pointer.x + targetOffset.value.x,
+			y: pointer.y + targetOffset.value.y,
+		}
+	}
+
+	const start = (drag: ActiveScreenshotDrag | null, pointer: Point) => {
+		clear()
+
+		const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		if (!drag || drag.selectionKeys.length < 2 || reduceMotion) return
+
+		const screenshotCards = Array.from(
+			document.querySelectorAll<HTMLElement>('[data-screenshot-card]'),
+		)
+		const sourceCard = screenshotCards.find(
+			(card) => card.dataset.selectionKey === drag.primarySelectionKey,
+		)
+
+		if (sourceCard) {
+			const sourceRect = sourceCard.getBoundingClientRect()
+			targetOffset.value = {
+				x: sourceRect.left + sourceRect.width / 2 - pointer.x,
+				y: sourceRect.top + sourceRect.height / 2 - pointer.y,
+			}
+		}
+
+		const screenshotsByKey = new Map(
+			screenshots.value.map((screenshot) => [getSelectionKey(screenshot), screenshot]),
+		)
+		items.value = drag.selectionKeys.flatMap((selectionKey) => {
+			const screenshot = screenshotsByKey.get(selectionKey)
+			const card = screenshotCards.find(
+				(candidate) =>
+					candidate.dataset.selectionKey === selectionKey && candidate.getClientRects().length > 0,
+			)
+			if (!screenshot || !card) return []
+
+			const rect = card.getBoundingClientRect()
+			return [
+				{
+					screenshot,
+					selectionKey,
+					rect: {
+						left: rect.left,
+						top: rect.top,
+						width: rect.width,
+						height: rect.height,
+					},
+				},
+			]
+		})
+		updateTarget(pointer)
+		isGathering.value = items.value.length > 0
+	}
+
+	const finish = () => {
+		isGathering.value = false
+		clearCleanupTimer()
+		cleanupTimer = window.setTimeout(() => {
+			items.value = []
+			cleanupTimer = undefined
+		}, 400)
+	}
+
+	onBeforeUnmount(clearCleanupTimer)
+
+	return {
+		items,
+		target,
+		isGathering,
+		start,
+		updateTarget,
+		clear,
+		finish,
+	}
+}
diff --git a/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
deleted file mode 100644
index ebe9e9af7b..0000000000
--- a/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<script setup lang="ts">
-import {
-	defineMessages,
-	injectNotificationManager,
-	Input,
-	Slider,
-	Toggle,
-	useVIntl,
-} from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import useMemorySlider from '@/composables/useMemorySlider'
-import { get, parseEnvVars, serializeEnvVars, set } from '@/helpers/settings.ts'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	fullscreenTitle: {
-		id: 'app.settings.default-instance-options.fullscreen.title',
-		defaultMessage: 'Fullscreen',
-	},
-	fullscreenDescription: {
-		id: 'app.settings.default-instance-options.fullscreen.description',
-		defaultMessage: 'Start instances in fullscreen by updating their options.txt file.',
-	},
-	widthTitle: {
-		id: 'app.settings.default-instance-options.width.title',
-		defaultMessage: 'Width',
-	},
-	widthDescription: {
-		id: 'app.settings.default-instance-options.width.description',
-		defaultMessage: 'The width of the game window when launched.',
-	},
-	widthPlaceholder: {
-		id: 'app.settings.default-instance-options.width.placeholder',
-		defaultMessage: 'Enter width...',
-	},
-	heightTitle: {
-		id: 'app.settings.default-instance-options.height.title',
-		defaultMessage: 'Height',
-	},
-	heightDescription: {
-		id: 'app.settings.default-instance-options.height.description',
-		defaultMessage: 'The height of the game window when launched.',
-	},
-	heightPlaceholder: {
-		id: 'app.settings.default-instance-options.height.placeholder',
-		defaultMessage: 'Enter height...',
-	},
-	memoryAllocationTitle: {
-		id: 'app.settings.default-instance-options.memory-allocation.title',
-		defaultMessage: 'Memory allocation',
-	},
-	memoryAllocationDescription: {
-		id: 'app.settings.default-instance-options.memory-allocation.description',
-		defaultMessage: 'Maximum memory available to each instance.',
-	},
-	javaArgumentsTitle: {
-		id: 'app.settings.default-instance-options.java-arguments.title',
-		defaultMessage: 'Java arguments',
-	},
-	javaArgumentsPlaceholder: {
-		id: 'app.settings.default-instance-options.java-arguments.placeholder',
-		defaultMessage: 'Enter Java arguments...',
-	},
-	javaArgumentsDescription: {
-		id: 'app.settings.default-instance-options.java-arguments.description',
-		defaultMessage: 'Arguments passed to Java when launching an instance.',
-	},
-	environmentVariablesTitle: {
-		id: 'app.settings.default-instance-options.environment-variables.title',
-		defaultMessage: 'Environment variables',
-	},
-	environmentVariablesPlaceholder: {
-		id: 'app.settings.default-instance-options.environment-variables.placeholder',
-		defaultMessage: 'Enter environment variables...',
-	},
-	environmentVariablesDescription: {
-		id: 'app.settings.default-instance-options.environment-variables.description',
-		defaultMessage: 'Environment variables set when launching an instance.',
-	},
-	preLaunchHookTitle: {
-		id: 'app.settings.default-instance-options.pre-launch-hook.title',
-		defaultMessage: 'Pre-launch hook',
-	},
-	preLaunchHookPlaceholder: {
-		id: 'app.settings.default-instance-options.pre-launch-hook.placeholder',
-		defaultMessage: 'Enter pre-launch command...',
-	},
-	preLaunchHookDescription: {
-		id: 'app.settings.default-instance-options.pre-launch-hook.description',
-		defaultMessage: 'Runs before the instance starts.',
-	},
-	wrapperHookTitle: {
-		id: 'app.settings.default-instance-options.wrapper-hook.title',
-		defaultMessage: 'Wrapper hook',
-	},
-	wrapperHookPlaceholder: {
-		id: 'app.settings.default-instance-options.wrapper-hook.placeholder',
-		defaultMessage: 'Enter wrapper command...',
-	},
-	wrapperHookDescription: {
-		id: 'app.settings.default-instance-options.wrapper-hook.description',
-		defaultMessage: 'Command used to wrap the Minecraft launch process.',
-	},
-	postExitHookTitle: {
-		id: 'app.settings.default-instance-options.post-exit-hook.title',
-		defaultMessage: 'Post-exit hook',
-	},
-	postExitHookPlaceholder: {
-		id: 'app.settings.default-instance-options.post-exit-hook.placeholder',
-		defaultMessage: 'Enter post-exit command...',
-	},
-	postExitHookDescription: {
-		id: 'app.settings.default-instance-options.post-exit-hook.description',
-		defaultMessage: 'Runs after the game closes.',
-	},
-	hookVariablesDescription: {
-		id: 'instance.settings.tabs.hooks.variables.description',
-		defaultMessage:
-			'Hooks run in the working directory of the instance, with the following variables:',
-	},
-	instanceNameDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-name.description',
-		defaultMessage: '$INST_NAME: The name of the instance',
-	},
-	instanceIdDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-id.description',
-		defaultMessage: "$INST_ID: The name of the instance's folder",
-	},
-	instanceDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-dir.description',
-		defaultMessage: "$INST_DIR: The absolute path to the instance's folder",
-	},
-	instanceMcDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-mc-dir.description',
-		defaultMessage: '$INST_MC_DIR: An alias for $INST_DIR',
-	},
-	instanceJavaDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java.description',
-		defaultMessage: '$INST_JAVA: The absolute path to the java binary',
-	},
-	instanceJavaArgsDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
-		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
-	},
-})
-
-const fetchSettings = await get()
-fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
-fetchSettings.envVars = serializeEnvVars(fetchSettings.custom_env_vars)
-
-const settings = ref(fetchSettings)
-
-const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
-	maxMemory: number
-	snapPoints: number[]
-}
-
-watch(
-	settings,
-	async () => {
-		const setSettings = JSON.parse(JSON.stringify(settings.value))
-
-		setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
-		setSettings.custom_env_vars = parseEnvVars(setSettings.envVars)
-		delete setSettings.launchArgs
-		delete setSettings.envVars
-
-		if (!setSettings.custom_dir) {
-			setSettings.custom_dir = null
-		}
-
-		await set(setSettings).catch(handleError)
-	},
-	{ deep: true },
-)
-</script>
-
-<template>
-	<div>
-		<div class="flex flex-col gap-6">
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.fullscreenTitle) }}
-					</h3>
-					<p class="m-0 leading-tight">
-						{{ formatMessage(messages.fullscreenDescription) }}
-					</p>
-				</div>
-
-				<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
-			</div>
-
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.widthTitle) }}
-					</h3>
-					<p class="m-0 leading-tight">
-						{{ formatMessage(messages.widthDescription) }}
-					</p>
-				</div>
-
-				<Input
-					id="width"
-					v-model="settings.game_resolution[0]"
-					:disabled="settings.force_fullscreen"
-					autocomplete="off"
-					type="number"
-					:placeholder="formatMessage(messages.widthPlaceholder)"
-				/>
-			</div>
-
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.heightTitle) }}
-					</h3>
-					<p class="m-0 leading-tight">
-						{{ formatMessage(messages.heightDescription) }}
-					</p>
-				</div>
-
-				<Input
-					id="height"
-					v-model="settings.game_resolution[1]"
-					:disabled="settings.force_fullscreen"
-					autocomplete="off"
-					type="number"
-					:placeholder="formatMessage(messages.heightPlaceholder)"
-				/>
-			</div>
-		</div>
-
-		<hr class="my-6 bg-button-border border-none h-[1px]" />
-
-		<div class="flex flex-col gap-6">
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.memoryAllocationTitle) }}
-				</h2>
-				<Slider
-					id="max-memory"
-					v-model="settings.memory.maximum"
-					:min="512"
-					:max="maxMemory"
-					:step="64"
-					:snap-points="snapPoints"
-					:snap-range="512"
-					unit="MB"
-				/>
-				<p class="m-0 mt-1 leading-tight">
-					{{ formatMessage(messages.memoryAllocationDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.javaArgumentsTitle) }}
-				</h2>
-				<Input
-					id="java-args"
-					v-model="settings.launchArgs"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.javaArgumentsPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.javaArgumentsDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.environmentVariablesTitle) }}
-				</h2>
-				<Input
-					id="env-vars"
-					v-model="settings.envVars"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.environmentVariablesPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.environmentVariablesDescription) }}
-				</p>
-			</div>
-		</div>
-
-		<hr class="my-6 bg-button-border border-none h-[1px]" />
-
-		<div class="flex flex-col gap-6">
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.preLaunchHookTitle) }}
-				</h3>
-				<Input
-					id="pre-launch"
-					v-model="settings.hooks.pre_launch"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.preLaunchHookPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.preLaunchHookDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.wrapperHookTitle) }}
-				</h3>
-				<Input
-					id="wrapper"
-					v-model="settings.hooks.wrapper"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.wrapperHookPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.wrapperHookDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.postExitHookTitle) }}
-				</h3>
-				<Input
-					id="post-exit"
-					v-model="settings.hooks.post_exit"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.postExitHookPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.postExitHookDescription) }}
-				</p>
-			</div>
-
-			<div class="m-0 leading-tight">
-				{{ formatMessage(messages.hookVariablesDescription) }}
-				<ul>
-					<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</template>
diff --git a/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
new file mode 100644
index 0000000000..ecef91748c
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
@@ -0,0 +1,887 @@
+<script setup lang="ts">
+import {
+	EditIcon,
+	// FolderOpenIcon,
+	SaveIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
+	commonMessages,
+	defineMessages,
+	IconButton,
+	injectNotificationManager,
+	Input,
+	NewModal,
+	Slider,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Component } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+import useMemorySlider from '@/composables/useMemorySlider'
+import {
+	get_command_history,
+	get_global_synced_options,
+	type GlobalSyncedOptions,
+	list_synced_servers,
+	// open_synced_options_folder,
+	remove_synced_server,
+	set_command_history,
+	set_global_synced_option,
+	type SyncedOption,
+	type SyncedServer,
+	update_synced_server,
+} from '@/helpers/instance'
+import { get, parseEnvVars, serializeEnvVars, set } from '@/helpers/settings.ts'
+import {
+	refreshServerData,
+	refreshServers,
+	type ServerData,
+	type ServerWorld,
+} from '@/helpers/worlds.ts'
+import { instanceKeys, screenshotKeys } from '@/pages/instance/query-options'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const queryClient = useQueryClient()
+
+const messages = defineMessages({
+	// syncedDescription: {
+	// 	id: 'app.settings.synced-options.description',
+	// 	defaultMessage:
+	// 		'Sync options and config across instances so you don’t have to set them up every time.',
+	// },
+	// syncedFolder: {
+	// 	id: 'app.settings.synced-options.folder',
+	// 	defaultMessage: 'Synced folder',
+	// },
+	multiplayerServers: {
+		id: 'app.settings.synced-options.multiplayer-servers',
+		defaultMessage: 'Multiplayer servers',
+	},
+	multiplayerServersDescription: {
+		id: 'app.settings.synced-options.multiplayer-servers.description',
+		defaultMessage: 'Sync multiplayer servers across your instances.',
+	},
+	commandHistory: {
+		id: 'app.settings.synced-options.command-history',
+		defaultMessage: 'Command history',
+	},
+	commandHistoryDescription: {
+		id: 'app.settings.synced-options.command-history.description',
+		defaultMessage: 'Sync command history across your instances.',
+	},
+	creativeHotbars: {
+		id: 'app.settings.synced-options.creative-hotbars',
+		defaultMessage: 'Saved creative hotbars',
+	},
+	creativeHotbarsDescription: {
+		id: 'app.settings.synced-options.creative-hotbars.description',
+		defaultMessage: 'Sync saved creative hotbars across your instances.',
+	},
+	screenshots: {
+		id: 'app.settings.synced-options.screenshots',
+		defaultMessage: 'Screenshots',
+	},
+	screenshotsDescription: {
+		id: 'app.settings.synced-options.screenshots.description',
+		defaultMessage: 'View screenshots from your instances in one place.',
+	},
+	commandHistoryEditorTitle: {
+		id: 'app.settings.synced-options.command-history.editor-title',
+		defaultMessage: 'Edit command history',
+	},
+	serverEditorTitle: {
+		id: 'app.settings.synced-options.multiplayer-servers.editor-title',
+		defaultMessage: 'Edit synced servers',
+	},
+	editServerTitle: {
+		id: 'instance.edit-server.title',
+		defaultMessage: 'Edit server',
+	},
+	serverName: {
+		id: 'app.settings.synced-options.multiplayer-servers.name',
+		defaultMessage: 'Server name',
+	},
+	serverAddress: {
+		id: 'app.settings.synced-options.multiplayer-servers.address',
+		defaultMessage: 'Server address',
+	},
+	noSyncedServers: {
+		id: 'app.settings.synced-options.multiplayer-servers.empty',
+		defaultMessage: 'No user-added servers are currently synced.',
+	},
+	noServersSyncedYet: {
+		id: 'app.settings.synced-options.multiplayer-servers.none-synced-yet',
+		defaultMessage: 'No servers synced yet',
+	},
+	windowSectionTitle: {
+		id: 'app.settings.default-instance-options.window.title',
+		defaultMessage: 'Window',
+	},
+	javaAndMemorySectionTitle: {
+		id: 'app.settings.default-instance-options.java-and-memory.title',
+		defaultMessage: 'Java and memory',
+	},
+	launchHooksSectionTitle: {
+		id: 'app.settings.default-instance-options.launch-hooks.title',
+		defaultMessage: 'Launch hooks',
+	},
+	fullscreenTitle: {
+		id: 'app.settings.default-instance-options.fullscreen.title',
+		defaultMessage: 'Fullscreen',
+	},
+	fullscreenDescription: {
+		id: 'app.settings.default-instance-options.fullscreen.description',
+		defaultMessage: 'Start instances in fullscreen by updating their options.txt file.',
+	},
+	widthTitle: {
+		id: 'app.settings.default-instance-options.width.title',
+		defaultMessage: 'Width',
+	},
+	widthDescription: {
+		id: 'app.settings.default-instance-options.width.description',
+		defaultMessage: 'The width of the game window when launched.',
+	},
+	widthPlaceholder: {
+		id: 'app.settings.default-instance-options.width.placeholder',
+		defaultMessage: 'Enter width...',
+	},
+	heightTitle: {
+		id: 'app.settings.default-instance-options.height.title',
+		defaultMessage: 'Height',
+	},
+	heightDescription: {
+		id: 'app.settings.default-instance-options.height.description',
+		defaultMessage: 'The height of the game window when launched.',
+	},
+	heightPlaceholder: {
+		id: 'app.settings.default-instance-options.height.placeholder',
+		defaultMessage: 'Enter height...',
+	},
+	memoryAllocationTitle: {
+		id: 'app.settings.default-instance-options.memory-allocation.title',
+		defaultMessage: 'Memory allocation',
+	},
+	memoryAllocationDescription: {
+		id: 'app.settings.default-instance-options.memory-allocation.description',
+		defaultMessage: 'Maximum memory available to each instance.',
+	},
+	javaArgumentsTitle: {
+		id: 'app.settings.default-instance-options.java-arguments.title',
+		defaultMessage: 'Java arguments',
+	},
+	javaArgumentsPlaceholder: {
+		id: 'app.settings.default-instance-options.java-arguments.placeholder',
+		defaultMessage: 'Enter Java arguments...',
+	},
+	javaArgumentsDescription: {
+		id: 'app.settings.default-instance-options.java-arguments.description',
+		defaultMessage: 'Arguments passed to Java when launching an instance.',
+	},
+	environmentVariablesTitle: {
+		id: 'app.settings.default-instance-options.environment-variables.title',
+		defaultMessage: 'Environment variables',
+	},
+	environmentVariablesPlaceholder: {
+		id: 'app.settings.default-instance-options.environment-variables.placeholder',
+		defaultMessage: 'Enter environment variables...',
+	},
+	environmentVariablesDescription: {
+		id: 'app.settings.default-instance-options.environment-variables.description',
+		defaultMessage: 'Environment variables set when launching an instance.',
+	},
+	preLaunchHookTitle: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.title',
+		defaultMessage: 'Pre-launch hook',
+	},
+	preLaunchHookPlaceholder: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.placeholder',
+		defaultMessage: 'Enter pre-launch command...',
+	},
+	preLaunchHookDescription: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.description',
+		defaultMessage: 'Runs before the instance starts.',
+	},
+	wrapperHookTitle: {
+		id: 'app.settings.default-instance-options.wrapper-hook.title',
+		defaultMessage: 'Wrapper hook',
+	},
+	wrapperHookPlaceholder: {
+		id: 'app.settings.default-instance-options.wrapper-hook.placeholder',
+		defaultMessage: 'Enter wrapper command...',
+	},
+	wrapperHookDescription: {
+		id: 'app.settings.default-instance-options.wrapper-hook.description',
+		defaultMessage: 'Command used to wrap the Minecraft launch process.',
+	},
+	postExitHookTitle: {
+		id: 'app.settings.default-instance-options.post-exit-hook.title',
+		defaultMessage: 'Post-exit hook',
+	},
+	postExitHookPlaceholder: {
+		id: 'app.settings.default-instance-options.post-exit-hook.placeholder',
+		defaultMessage: 'Enter post-exit command...',
+	},
+	postExitHookDescription: {
+		id: 'app.settings.default-instance-options.post-exit-hook.description',
+		defaultMessage: 'Runs after the game closes.',
+	},
+	hookVariablesDescription: {
+		id: 'instance.settings.tabs.hooks.variables.description',
+		defaultMessage:
+			'Hooks run in the working directory of the instance, with the following variables:',
+	},
+	instanceNameDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-name.description',
+		defaultMessage: '$INST_NAME: The name of the instance',
+	},
+	instanceIdDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-id.description',
+		defaultMessage: "$INST_ID: The name of the instance's folder",
+	},
+	instanceDirDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-dir.description',
+		defaultMessage: "$INST_DIR: The absolute path to the instance's folder",
+	},
+	instanceMcDirDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-mc-dir.description',
+		defaultMessage: '$INST_MC_DIR: An alias for $INST_DIR',
+	},
+	instanceJavaDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-java.description',
+		defaultMessage: '$INST_JAVA: The absolute path to the java binary',
+	},
+	instanceJavaArgsDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
+		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
+	},
+})
+
+const globalRows: Array<{
+	option: SyncedOption
+	title: keyof typeof messages
+	description?: keyof typeof messages
+	editable?: 'servers' | 'commands'
+}> = [
+	{
+		option: 'multiplayer_servers',
+		title: 'multiplayerServers',
+		description: 'multiplayerServersDescription',
+		editable: 'servers',
+	},
+	{
+		option: 'command_history',
+		title: 'commandHistory',
+		description: 'commandHistoryDescription',
+		editable: 'commands',
+	},
+	{
+		option: 'creative_hotbars',
+		title: 'creativeHotbars',
+		description: 'creativeHotbarsDescription',
+	},
+	{
+		option: 'screenshots',
+		title: 'screenshots',
+		description: 'screenshotsDescription',
+	},
+]
+
+const globalSyncedOptionsQueryKey = ['global-synced-options'] as const
+const globalSyncedOptionsMutationKey = ['global-synced-options', 'set'] as const
+const defaultGlobalOptions: GlobalSyncedOptions = {
+	command_history: false,
+	multiplayer_servers: false,
+	creative_hotbars: false,
+	screenshots: false,
+}
+
+const globalOptionsQuery = useQuery({
+	queryKey: globalSyncedOptionsQueryKey,
+	queryFn: get_global_synced_options,
+})
+const globalOptions = computed(() => globalOptionsQuery.data.value ?? defaultGlobalOptions)
+const commandHistoryModal = ref<InstanceType<typeof NewModal> | null>(null)
+const serverEditorModal = ref<InstanceType<typeof NewModal> | null>(null)
+const editServerModal = ref<InstanceType<typeof NewModal> | null>(null)
+const commandHistory = ref('')
+const syncedServers = ref<SyncedServer[]>(
+	(await list_synced_servers().catch((error) => {
+		handleError(error)
+		return []
+	})) ?? [],
+)
+const editedServer = ref<SyncedServer | null>(null)
+const serverData = ref<Record<string, ServerData>>({})
+const editorComponent = shallowRef<Component | null>(null)
+
+const syncedServerCards = computed(() =>
+	syncedServers.value.map((server, index) => ({
+		server,
+		world: {
+			name: server.name,
+			type: 'server',
+			index,
+			server_id: server.id,
+			address: server.address,
+			pack_status:
+				server.accept_textures === true
+					? 'enabled'
+					: server.accept_textures === false
+						? 'disabled'
+						: 'prompt',
+			display_status: 'normal',
+		} satisfies ServerWorld,
+	})),
+)
+
+async function invalidateSyncedOptions() {
+	await Promise.all([
+		queryClient.invalidateQueries({ queryKey: instanceKeys.all }),
+		queryClient.invalidateQueries({ queryKey: ['instance-synced-options'] }),
+		queryClient.invalidateQueries({ queryKey: globalSyncedOptionsQueryKey }),
+		queryClient.invalidateQueries({ queryKey: screenshotKeys.all }),
+	])
+}
+
+type GlobalOptionMutationVariables = {
+	option: SyncedOption
+	enabled: boolean
+}
+
+const globalOptionMutation = useMutation({
+	mutationKey: globalSyncedOptionsMutationKey,
+	mutationFn: ({ option, enabled }: GlobalOptionMutationVariables) =>
+		set_global_synced_option(option, enabled),
+	onMutate: async ({ option, enabled }) => {
+		await queryClient.cancelQueries({ queryKey: globalSyncedOptionsQueryKey })
+		const previous = globalOptions.value[option]
+
+		queryClient.setQueryData<GlobalSyncedOptions>(globalSyncedOptionsQueryKey, (current) => ({
+			...(current ?? defaultGlobalOptions),
+			[option]: enabled,
+		}))
+
+		return { previous }
+	},
+	onError: (error, { option }, context) => {
+		queryClient.setQueryData<GlobalSyncedOptions>(globalSyncedOptionsQueryKey, (current) => ({
+			...(current ?? defaultGlobalOptions),
+			[option]: context?.previous ?? defaultGlobalOptions[option],
+		}))
+		handleError(error)
+	},
+	onSettled: async () => {
+		if (queryClient.isMutating({ mutationKey: globalSyncedOptionsMutationKey }) === 1) {
+			await invalidateSyncedOptions()
+		}
+	},
+})
+
+function applyGlobalOption(option: SyncedOption, enabled: boolean) {
+	globalOptionMutation.mutate({ option, enabled })
+}
+
+function toggleGlobalOption(option: SyncedOption, enabled: boolean) {
+	applyGlobalOption(option, enabled)
+}
+
+async function openCommandHistoryEditor() {
+	commandHistory.value = await get_command_history().catch((error) => {
+		handleError(error)
+		return ''
+	})
+	if (!editorComponent.value) {
+		const [editor] = await Promise.all([
+			import('vue3-ace-editor'),
+			import('@modrinth/ui/src/utils/ace-theme'),
+			import('@modrinth/ui/src/utils/ace-mode-mcfunction'),
+		])
+		editorComponent.value = editor.VAceEditor
+	}
+	commandHistoryModal.value?.show()
+}
+
+async function saveCommandHistory() {
+	try {
+		commandHistory.value = await set_command_history(commandHistory.value)
+		commandHistoryModal.value?.hide()
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function openServerEditor() {
+	syncedServers.value = await list_synced_servers().catch((error) => {
+		handleError(error)
+		return []
+	})
+	serverData.value = {}
+	serverEditorModal.value?.show()
+	await refreshServers(
+		syncedServerCards.value.map(({ world }) => world),
+		serverData.value,
+		null,
+	)
+}
+
+function openSyncedServerEditor(server: SyncedServer) {
+	editedServer.value = { ...server }
+	editServerModal.value?.show()
+}
+
+async function saveSyncedServer() {
+	if (!editedServer.value) return
+	const server = editedServer.value
+
+	try {
+		await update_synced_server(server)
+		const index = syncedServers.value.findIndex(({ id }) => id === server.id)
+		if (index !== -1) {
+			syncedServers.value[index] = { ...server }
+		}
+		editServerModal.value?.hide()
+		serverData.value[server.address] = { refreshing: true }
+		await refreshServerData(serverData.value[server.address], null, server.address)
+		await queryClient.invalidateQueries({ queryKey: ['worlds'] })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function refreshSyncedServer(address: string) {
+	serverData.value[address] ??= { refreshing: true }
+	await refreshServerData(serverData.value[address], null, address)
+}
+
+async function removeSyncedServer(serverId: string) {
+	try {
+		await remove_synced_server(serverId)
+		syncedServers.value = syncedServers.value.filter((server) => server.id !== serverId)
+		await queryClient.invalidateQueries({ queryKey: ['worlds'] })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+const fetchSettings = await get()
+fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
+fetchSettings.envVars = serializeEnvVars(fetchSettings.custom_env_vars)
+
+const settings = ref(fetchSettings)
+
+const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
+	maxMemory: number
+	snapPoints: number[]
+}
+
+watch(
+	settings,
+	async () => {
+		const setSettings = JSON.parse(JSON.stringify(settings.value))
+
+		setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
+		setSettings.custom_env_vars = parseEnvVars(setSettings.envVars)
+		delete setSettings.launchArgs
+		delete setSettings.envVars
+
+		if (!setSettings.custom_dir) {
+			setSettings.custom_dir = null
+		}
+
+		await set(setSettings).catch(handleError)
+	},
+	{ deep: true },
+)
+</script>
+
+<template>
+	<div>
+		<NewModal
+			ref="commandHistoryModal"
+			:header="formatMessage(messages.commandHistoryEditorTitle)"
+			class="command-history-modal"
+			max-width="700px"
+			width="700px"
+		>
+			<component
+				:is="editorComponent"
+				v-if="editorComponent"
+				v-model:value="commandHistory"
+				lang="mcfunction"
+				theme="modrinth"
+				:print-margin="false"
+				class="command-history-editor ace-modrinth rounded-[20px] !border !border-solid !border-surface-5"
+				style="height: 420px; font-size: 0.875rem"
+			/>
+			<template #actions>
+				<div class="flex justify-end gap-2">
+					<Button type="outlined" @click="commandHistoryModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button type="colored" color="brand" @click="saveCommandHistory">
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveButton) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
+		<NewModal
+			ref="serverEditorModal"
+			:header="formatMessage(messages.serverEditorTitle)"
+			scrollable
+			actions-divider
+			no-padding
+			max-content-height="34.5rem"
+			max-width="750px"
+			width="750px"
+		>
+			<p v-if="syncedServers.length === 0" class="m-0 px-6 py-4 text-secondary">
+				{{ formatMessage(messages.noSyncedServers) }}
+			</p>
+			<div v-else class="flex flex-col gap-2 px-6 py-4">
+				<WorldItem
+					v-for="{ server, world } in syncedServerCards"
+					:key="server.id"
+					:world="world"
+					card-background="surface-2"
+					:show-play-button="false"
+					:refreshing="serverData[server.address]?.refreshing"
+					:server-status="serverData[server.address]?.status"
+					:rendered-motd="serverData[server.address]?.renderedMotd"
+					@refresh="refreshSyncedServer(server.address)"
+					@edit="openSyncedServerEditor(server)"
+					@delete="removeSyncedServer(server.id)"
+				/>
+			</div>
+			<template #actions>
+				<div class="flex justify-end">
+					<Button type="outlined" @click="serverEditorModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.closeButton) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
+		<NewModal
+			ref="editServerModal"
+			:header="formatMessage(messages.editServerTitle)"
+			max-width="500px"
+			width="500px"
+		>
+			<div v-if="editedServer" class="flex flex-col gap-4">
+				<label class="flex flex-col gap-2 font-semibold text-contrast">
+					{{ formatMessage(messages.serverName) }}
+					<Input v-model="editedServer.name" autocomplete="off" wrapper-class="w-full" />
+				</label>
+				<label class="flex flex-col gap-2 font-semibold text-contrast">
+					{{ formatMessage(messages.serverAddress) }}
+					<Input v-model="editedServer.address" autocomplete="off" wrapper-class="w-full" />
+				</label>
+			</div>
+			<template #actions>
+				<div class="flex justify-end gap-2">
+					<Button type="outlined" @click="editServerModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="!editedServer?.address"
+						@click="saveSyncedServer"
+					>
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
+		<section class="border-0 border-b border-solid border-divider pb-6">
+			<div class="flex flex-col gap-6">
+				<!--
+				<div class="flex items-center justify-between gap-4">
+					<p class="m-0 text-secondary">{{ formatMessage(messages.syncedDescription) }}</p>
+					<Button @click="open_synced_options_folder().catch(handleError)">
+						<FolderOpenIcon />
+						{{ formatMessage(messages.syncedFolder) }}
+					</Button>
+				</div>
+				-->
+
+				<div class="flex flex-col gap-4">
+					<div
+						v-for="row in globalRows"
+						:key="row.option"
+						class="flex items-center justify-between gap-6"
+					>
+						<div class="flex min-w-0 flex-col gap-1">
+							<h2 class="m-0 text-lg font-semibold text-contrast">
+								{{ formatMessage(messages[row.title]) }}
+							</h2>
+							<p v-if="row.description" class="m-0 text-secondary">
+								{{ formatMessage(messages[row.description]) }}
+							</p>
+						</div>
+						<div class="flex shrink-0 items-center gap-2">
+							<span
+								v-if="row.editable"
+								v-tooltip="
+									row.editable === 'servers' && syncedServers.length === 0
+										? formatMessage(messages.noServersSyncedYet)
+										: formatMessage(commonMessages.editButton)
+								"
+								class="flex"
+							>
+								<IconButton
+									type="outlined"
+									circular
+									:disabled="
+										!globalOptions[row.option] ||
+										(row.editable === 'servers' && syncedServers.length === 0)
+									"
+									:label="formatMessage(commonMessages.editButton)"
+									@click="
+										row.editable === 'commands' ? openCommandHistoryEditor() : openServerEditor()
+									"
+								>
+									<EditIcon />
+								</IconButton>
+							</span>
+							<Toggle
+								:id="`global-sync-${row.option}`"
+								:model-value="globalOptions[row.option]"
+								@update:model-value="(enabled) => toggleGlobalOption(row.option, enabled)"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section class="mt-6">
+			<h2 class="m-0 text-xl font-semibold text-contrast">
+				{{ formatMessage(messages.windowSectionTitle) }}
+			</h2>
+			<div class="mt-4 flex flex-col gap-6">
+				<div class="flex items-center justify-between gap-4">
+					<div class="flex flex-col gap-1">
+						<h3 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.fullscreenTitle) }}
+						</h3>
+						<p class="m-0 leading-tight">
+							{{ formatMessage(messages.fullscreenDescription) }}
+						</p>
+					</div>
+
+					<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
+				</div>
+
+				<div class="flex items-center justify-between gap-4">
+					<div class="flex flex-col gap-1">
+						<h3 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.widthTitle) }}
+						</h3>
+						<p class="m-0 leading-tight">
+							{{ formatMessage(messages.widthDescription) }}
+						</p>
+					</div>
+
+					<Input
+						id="width"
+						v-model="settings.game_resolution[0]"
+						:disabled="settings.force_fullscreen"
+						autocomplete="off"
+						type="number"
+						:placeholder="formatMessage(messages.widthPlaceholder)"
+					/>
+				</div>
+
+				<div class="flex items-center justify-between gap-4">
+					<div class="flex flex-col gap-1">
+						<h3 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.heightTitle) }}
+						</h3>
+						<p class="m-0 leading-tight">
+							{{ formatMessage(messages.heightDescription) }}
+						</p>
+					</div>
+
+					<Input
+						id="height"
+						v-model="settings.game_resolution[1]"
+						:disabled="settings.force_fullscreen"
+						autocomplete="off"
+						type="number"
+						:placeholder="formatMessage(messages.heightPlaceholder)"
+					/>
+				</div>
+			</div>
+		</section>
+
+		<section class="mt-8 border-0 border-t border-solid border-divider pt-6">
+			<h2 class="m-0 text-xl font-semibold text-contrast">
+				{{ formatMessage(messages.javaAndMemorySectionTitle) }}
+			</h2>
+			<div class="mt-4 flex flex-col gap-6">
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.memoryAllocationTitle) }}
+					</h3>
+					<Slider
+						id="max-memory"
+						v-model="settings.memory.maximum"
+						:min="512"
+						:max="maxMemory"
+						:step="64"
+						:snap-points="snapPoints"
+						:snap-range="512"
+						unit="MB"
+					/>
+					<p class="m-0 mt-1 leading-tight">
+						{{ formatMessage(messages.memoryAllocationDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.javaArgumentsTitle) }}
+					</h3>
+					<Input
+						id="java-args"
+						v-model="settings.launchArgs"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.javaArgumentsPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.javaArgumentsDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.environmentVariablesTitle) }}
+					</h3>
+					<Input
+						id="env-vars"
+						v-model="settings.envVars"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.environmentVariablesPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.environmentVariablesDescription) }}
+					</p>
+				</div>
+			</div>
+		</section>
+
+		<section class="mt-8 border-0 border-t border-solid border-divider pt-6">
+			<h2 class="m-0 text-xl font-semibold text-contrast">
+				{{ formatMessage(messages.launchHooksSectionTitle) }}
+			</h2>
+			<div class="mt-4 flex flex-col gap-6">
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.preLaunchHookTitle) }}
+					</h3>
+					<Input
+						id="pre-launch"
+						v-model="settings.hooks.pre_launch"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.preLaunchHookPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.preLaunchHookDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.wrapperHookTitle) }}
+					</h3>
+					<Input
+						id="wrapper"
+						v-model="settings.hooks.wrapper"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.wrapperHookPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.wrapperHookDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.postExitHookTitle) }}
+					</h3>
+					<Input
+						id="post-exit"
+						v-model="settings.hooks.post_exit"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.postExitHookPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.postExitHookDescription) }}
+					</p>
+				</div>
+
+				<div class="m-0 leading-tight">
+					{{ formatMessage(messages.hookVariablesDescription) }}
+					<ul>
+						<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
+					</ul>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style>
+.command-history-editor.ace-modrinth {
+	background-color: var(--surface-2);
+}
+
+.command-history-editor.ace-modrinth .ace_gutter {
+	background: var(--surface-1);
+}
+
+.command-history-editor.ace-modrinth .ace_marker-layer .ace_active-line {
+	background: var(--surface-2-5);
+}
+
+.command-history-editor.ace-modrinth .ace_gutter-active-line {
+	background-color: var(--surface-1-5);
+}
+
+.command-history-editor.ace-modrinth.ace_multiselect .ace_selection.ace_start {
+	box-shadow: 0 0 3px 0 var(--surface-2);
+}
+
+.command-history-modal > [data-modal-content] {
+	padding-bottom: 0;
+}
+</style>
diff --git a/apps/app-frontend/src/components/ui/world/WorldItem.vue b/apps/app-frontend/src/components/ui/world/WorldItem.vue
index 509fbdd27d..c226d7be0d 100644
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -67,7 +67,7 @@ const router = useRouter()
 const { addNotification } = injectNotificationManager()
 
 const emit = defineEmits<{
-	(e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
+	(e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete' | 'desync'): void
 	(e: 'open-folder', world: SingleplayerWorld): void
 }>()
 
@@ -95,6 +95,8 @@ const props = withDefaults(
 		}
 
 		managed?: boolean
+		showPlayButton?: boolean
+		cardBackground?: 'raised' | 'surface-2'
 
 		// Instance
 		instanceId?: string
@@ -117,6 +119,8 @@ const props = withDefaults(
 
 		gameMode: undefined,
 		managed: false,
+		showPlayButton: true,
+		cardBackground: 'raised',
 
 		instanceId: undefined,
 		instanceName: undefined,
@@ -218,6 +222,10 @@ const messages = defineMessages({
 		id: 'instance.worlds.copy_address',
 		defaultMessage: 'Copy address',
 	},
+	desync: {
+		id: 'instance.worlds.desync_server',
+		defaultMessage: 'Desync',
+	},
 	viewInstance: {
 		id: 'instance.worlds.view_instance',
 		defaultMessage: 'View instance',
@@ -270,7 +278,10 @@ const messages = defineMessages({
 
 const cardOptions = useTemplateRef('cardOptions')
 const showStop = computed(
-	() => (props.playingWorld || (locked.value && props.playingInstance)) && !props.startingInstance,
+	() =>
+		props.showPlayButton &&
+		(props.playingWorld || (locked.value && props.playingInstance)) &&
+		!props.startingInstance,
 )
 const playDisabled = computed(
 	() =>
@@ -327,6 +338,17 @@ const overflowOptions = computed((): ButtonMenuOption[] => [
 		shown: props.world.type === 'server',
 		action: () => copyToClipboard((props.world as ServerWorld).address),
 	},
+	{
+		id: 'desync',
+		label: formatMessage(messages.desync),
+		icon: XIcon,
+		action: () => emit('desync'),
+		shown:
+			!props.instanceId &&
+			props.world.type === 'server' &&
+			(props.world as ServerWorld).source === 'user_synced' &&
+			!!(props.world as ServerWorld).server_id,
+	},
 	{
 		id: 'edit',
 		label: formatMessage(commonMessages.editButton),
@@ -404,6 +426,7 @@ const contextMenuOptions = computed((): ButtonMenuOption[] => [
 				label: formatMessage(commonMessages.stopButton),
 				icon: StopCircleIcon,
 				tone: 'red',
+				shown: props.showPlayButton,
 				action: () => emit('stop'),
 			}
 		: {
@@ -411,11 +434,12 @@ const contextMenuOptions = computed((): ButtonMenuOption[] => [
 				label: formatMessage(messages.playWorld),
 				icon: PlayIcon,
 				tone: 'brand',
+				shown: props.showPlayButton,
 				disabled: playDisabled.value,
 				tooltip: playTooltip.value ?? undefined,
 				action: () => emit('play'),
 			},
-	{ type: 'divider' },
+	{ type: 'divider', shown: props.showPlayButton },
 	...overflowOptions.value,
 ])
 
@@ -433,9 +457,11 @@ function openContextMenu(event: MouseEvent) {
 				/>
 			</template>
 			<div
-				class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised border border-solid border-surface-4 smart-clickable:highlight-on-hover rounded-[20px] transition-[filter] ease-out [--hover-brightness:1.25] min-h-20"
+				class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 border border-solid border-surface-4 smart-clickable:highlight-on-hover rounded-[20px] transition-[filter] ease-out [--hover-brightness:1.25] min-h-20"
 				:class="{
 					'world-item-highlighted': highlighted,
+					'bg-bg-raised': cardBackground === 'raised',
+					'bg-surface-2': cardBackground === 'surface-2',
 				}"
 			>
 				<Avatar
@@ -592,12 +618,17 @@ function openContextMenu(event: MouseEvent) {
 					</template>
 				</div>
 				<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-					<Button v-if="showStop" type="colored" color="red" @click="emit('stop')">
+					<Button
+						v-if="showPlayButton && showStop"
+						type="colored"
+						color="red"
+						@click="emit('stop')"
+					>
 						<StopCircleIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.stopButton) }}
 					</Button>
 					<Button
-						v-else
+						v-else-if="showPlayButton"
 						v-tooltip="playTooltip"
 						:disabled="playDisabled"
 						type="colored"
diff --git a/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
index 685ce81fcb..f42b2b1ac4 100644
--- a/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
@@ -16,6 +16,7 @@ const { formatMessage } = useVIntl()
 
 const props = defineProps<{
 	world: World | null
+	otherSyncedInstanceCount: number
 }>()
 
 const emit = defineEmits<{
@@ -44,6 +45,11 @@ const messages = defineMessages({
 		defaultMessage:
 			'This server will be removed from your server list and from the in-game server list. You can add it again later if you know the address.',
 	},
+	syncedServerRemovalNotice: {
+		id: 'app.instance.worlds.remove-server-modal.synced-removal-notice',
+		defaultMessage:
+			'This server will also be removed from {count, plural, one {# other instance} other {# other instances}} because it’s synced.',
+	},
 	deleteWorldWarningBody: {
 		id: 'app.instance.worlds.delete-world-modal.warning-body',
 		defaultMessage:
@@ -62,6 +68,9 @@ const messages = defineMessages({
 const modal = ref<InstanceType<typeof NewModal>>()
 
 const isServer = computed(() => props.world?.type === 'server')
+const isSyncedServer = computed(
+	() => props.world?.type === 'server' && props.world.source === 'user_synced',
+)
 const isSingleplayer = computed(() => props.world?.type === 'singleplayer')
 const titleMessage = computed(() =>
 	isServer.value ? messages.removeServerTitle : messages.deleteWorldTitle,
@@ -102,6 +111,13 @@ defineExpose({ show, hide })
 			>
 				{{ formatMessage(warningBodyMessage) }}
 			</Admonition>
+			<p v-if="isSyncedServer" class="m-0 text-secondary">
+				{{
+					formatMessage(messages.syncedServerRemovalNotice, {
+						count: otherSyncedInstanceCount,
+					})
+				}}
+			</p>
 		</div>
 
 		<template #actions>
diff --git a/apps/app-frontend/src/components/ui/world/modal/DesyncServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/DesyncServerModal.vue
new file mode 100644
index 0000000000..c7ceac1022
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/world/modal/DesyncServerModal.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { LinkIcon, TrashIcon, XIcon } from '@modrinth/assets'
+import { Button, commonMessages, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { ref } from 'vue'
+
+import type { DesyncServerMode, ServerWorld } from '@/helpers/worlds'
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const server = ref<ServerWorld | null>(null)
+
+const emit = defineEmits<{
+	confirm: [server: ServerWorld, mode: DesyncServerMode]
+}>()
+
+const messages = defineMessages({
+	title: {
+		id: 'instance.worlds.desync-server.title',
+		defaultMessage: 'Desync server',
+	},
+	description: {
+		id: 'instance.worlds.desync-server.description',
+		defaultMessage:
+			'Do you want to keep this server in other synced instances, or remove it from them?',
+	},
+	keep: {
+		id: 'instance.worlds.desync-server.keep',
+		defaultMessage: 'Keep',
+	},
+	remove: {
+		id: 'instance.worlds.desync-server.remove',
+		defaultMessage: 'Remove',
+	},
+})
+
+function show(value: ServerWorld) {
+	server.value = value
+	modal.value?.show()
+}
+
+function confirm(mode: DesyncServerMode) {
+	if (server.value) emit('confirm', server.value, mode)
+	modal.value?.hide()
+}
+
+defineExpose({ show })
+</script>
+
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.title)" max-width="540px">
+		<p class="m-0 text-secondary">{{ formatMessage(messages.description) }}</p>
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" class="whitespace-nowrap" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button class="whitespace-nowrap" @click="confirm('keep_in_other_instances')">
+					<LinkIcon />
+					{{ formatMessage(messages.keep) }}
+				</Button>
+				<Button
+					type="colored"
+					color="red"
+					class="whitespace-nowrap"
+					@click="confirm('remove_from_other_instances')"
+				>
+					<TrashIcon />
+					{{ formatMessage(messages.remove) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
diff --git a/apps/app-frontend/src/generated/app-events/InstancePayload.ts b/apps/app-frontend/src/generated/app-events/InstancePayload.ts
index cac7ca562d..53c3a154ba 100644
--- a/apps/app-frontend/src/generated/app-events/InstancePayload.ts
+++ b/apps/app-frontend/src/generated/app-events/InstancePayload.ts
@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type InstancePayload = { instance_id: string, } & ({ "event": "created" } | { "event": "synced" } | { "event": "servers_updated" } | { "event": "world_updated", world: string, } | { "event": "server_joined", host: string, port: number, timestamp: string, } | { "event": "edited" } | { "event": "content_install_finished", project_ids: Array<string>, } | { "event": "content_install_failed", project_ids: Array<string>, message: string, } | { "event": "removed" });
+export type InstancePayload = { instance_id: string, } & ({ "event": "created" } | { "event": "synced" } | { "event": "servers_updated" } | { "event": "screenshots_updated" } | { "event": "world_updated", world: string, } | { "event": "server_joined", host: string, port: number, timestamp: string, } | { "event": "edited" } | { "event": "content_install_finished", project_ids: Array<string>, } | { "event": "content_install_failed", project_ids: Array<string>, message: string, } | { "event": "removed" });
diff --git a/apps/app-frontend/src/generated/app-events/postcard/index.d.ts b/apps/app-frontend/src/generated/app-events/postcard/index.d.ts
index 4484308461..66144c0ada 100644
--- a/apps/app-frontend/src/generated/app-events/postcard/index.d.ts
+++ b/apps/app-frontend/src/generated/app-events/postcard/index.d.ts
@@ -44,7 +44,7 @@ export type CommandPayload = { tag: "InstallMod", value: { id: string } } | { ta
 export type ProcessPayload = { instance_id: string, uuid: string, event: ProcessPayloadType, message: string }
 export type ProcessPayloadType = { tag: "launched" } | { tag: "finished" }
 export type InstancePayload = { instance_id: string, event: InstancePayloadType }
-export type InstancePayloadType = { tag: "created" } | { tag: "synced" } | { tag: "servers_updated" } | { tag: "world_updated", value: { world: string } } | { tag: "server_joined", value: { host: string, port: u16, timestamp: string } } | { tag: "edited" } | { tag: "content_install_finished", value: { project_ids: string[] } } | { tag: "content_install_failed", value: { project_ids: string[], message: string } } | { tag: "removed" }
+export type InstancePayloadType = { tag: "created" } | { tag: "synced" } | { tag: "servers_updated" } | { tag: "screenshots_updated" } | { tag: "world_updated", value: { world: string } } | { tag: "server_joined", value: { host: string, port: u16, timestamp: string } } | { tag: "edited" } | { tag: "content_install_finished", value: { project_ids: string[] } } | { tag: "content_install_failed", value: { project_ids: string[], message: string } } | { tag: "removed" }
 export type InstanceGroupsChangedPayload = { instance_ids: string[] }
 export type FriendPayload = { tag: "friend_request", value: { from: string } } | { tag: "user_offline", value: { id: string } } | { tag: "status_update", value: { user_status: FriendStatusPayload } } | { tag: "status_sync" }
 export type FriendStatusPayload = { user_id: string, profile_name: string | undefined, last_update: string }
diff --git a/apps/app-frontend/src/generated/app-events/postcard/index.js b/apps/app-frontend/src/generated/app-events/postcard/index.js
index 8f719d0c15..c8816ffeec 100644
--- a/apps/app-frontend/src/generated/app-events/postcard/index.js
+++ b/apps/app-frontend/src/generated/app-events/postcard/index.js
@@ -351,13 +351,17 @@ function deserialize_INSTANCE_PAYLOAD_TYPE(d) {
             tag: "servers_updated"
         };
     case 3:
+        return {
+            tag: "screenshots_updated"
+        };
+    case 4:
         return {
             tag: "world_updated",
             value: {
                 world: d.deserialize_string()
             }
         };
-    case 4:
+    case 5:
         return {
             tag: "server_joined",
             value: {
@@ -366,18 +370,18 @@ function deserialize_INSTANCE_PAYLOAD_TYPE(d) {
                 timestamp: d.deserialize_string()
             }
         };
-    case 5:
+    case 6:
         return {
             tag: "edited"
         };
-    case 6:
+    case 7:
         return {
             tag: "content_install_finished",
             value: {
                 project_ids: d.deserialize_array(() => d.deserialize_string())
             }
         };
-    case 7:
+    case 8:
         return {
             tag: "content_install_failed",
             value: {
@@ -385,7 +389,7 @@ function deserialize_INSTANCE_PAYLOAD_TYPE(d) {
                 message: d.deserialize_string()
             }
         };
-    case 8:
+    case 9:
         return {
             tag: "removed"
         };
diff --git a/apps/app-frontend/src/helpers/instance.ts b/apps/app-frontend/src/helpers/instance.ts
index 3e81ff24a5..64af3c336f 100644
--- a/apps/app-frontend/src/helpers/instance.ts
+++ b/apps/app-frontend/src/helpers/instance.ts
@@ -167,6 +167,219 @@ export async function get_mod_full_path(instanceId: string, projectPath: string)
 	return await invoke('plugin:instance|instance_get_mod_full_path', { instanceId, projectPath })
 }
 
+export type ScreenshotKey = {
+	instance_id: string
+	file_name: string
+}
+
+export type InstanceScreenshot = ScreenshotKey & {
+	id: string
+	instance_name: string
+	created_at: string
+	modified_at: number
+	group_id?: string | null
+	path: string
+	url: string
+}
+
+export type ScreenshotGroup = {
+	id: string
+	name: string
+}
+
+export type ScreenshotGroupMembershipUpdate = {
+	screenshot_id: string
+	group_id?: string | null
+}
+
+export type ScreenshotGroupImport = ScreenshotGroup & {
+	screenshot_ids: string[]
+}
+
+export async function list_instance_screenshots(instanceId: string): Promise<InstanceScreenshot[]> {
+	return await invoke('plugin:instance|instance_list_screenshots', { instanceId })
+}
+
+export async function list_all_screenshots(): Promise<InstanceScreenshot[]> {
+	return await invoke('plugin:instance|instance_list_all_screenshots')
+}
+
+export async function list_synced_screenshots(): Promise<InstanceScreenshot[]> {
+	return await invoke('plugin:instance|instance_list_synced_screenshots')
+}
+
+export async function save_edited_screenshot(
+	key: ScreenshotKey,
+	pngBytes: Uint8Array,
+	mode: 'create_copy' | 'replace_edit',
+): Promise<InstanceScreenshot> {
+	return await invoke('plugin:instance|instance_save_edited_screenshot', {
+		key,
+		pngBytes: Array.from(pngBytes),
+		mode,
+	})
+}
+
+export async function list_screenshot_groups(): Promise<ScreenshotGroup[]> {
+	return await invoke('plugin:instance|instance_list_screenshot_groups')
+}
+
+export async function create_screenshot_group(
+	name: string,
+	screenshotIds: string[],
+): Promise<ScreenshotGroup> {
+	return await invoke('plugin:instance|instance_create_screenshot_group', {
+		name,
+		screenshotIds,
+	})
+}
+
+export async function rename_screenshot_group(
+	id: string,
+	newName: string,
+): Promise<ScreenshotGroup> {
+	return await invoke('plugin:instance|instance_rename_screenshot_group', { id, newName })
+}
+
+export async function delete_screenshot_group(id: string): Promise<void> {
+	return await invoke('plugin:instance|instance_delete_screenshot_group', { id })
+}
+
+export async function set_screenshot_group_memberships(
+	updates: ScreenshotGroupMembershipUpdate[],
+): Promise<void> {
+	return await invoke('plugin:instance|instance_set_screenshot_group_memberships', { updates })
+}
+
+export async function import_screenshot_groups(groups: ScreenshotGroupImport[]): Promise<void> {
+	return await invoke('plugin:instance|instance_import_screenshot_groups', { groups })
+}
+
+export async function delete_screenshots(keys: ScreenshotKey[]): Promise<void> {
+	return await invoke('plugin:instance|instance_delete_screenshots', { keys })
+}
+
+export async function export_screenshots(keys: ScreenshotKey[], exportPath: string): Promise<void> {
+	return await invoke('plugin:instance|instance_export_screenshots', { keys, exportPath })
+}
+
+export async function move_screenshots(
+	keys: ScreenshotKey[],
+	targetInstanceId: string,
+): Promise<ScreenshotKey[]> {
+	return await invoke('plugin:instance|instance_move_screenshots', { keys, targetInstanceId })
+}
+
+export async function open_screenshot(key: ScreenshotKey): Promise<void> {
+	return await invoke('plugin:instance|instance_open_screenshot', { key })
+}
+
+export async function set_synced_option(
+	instanceId: string,
+	option: SyncedOption,
+	enabled: boolean,
+	resolution?: SyncedOptionJoinResolution,
+): Promise<GameInstance> {
+	return await invoke('plugin:instance|instance_set_synced_option', {
+		instanceId,
+		option,
+		enabled,
+		resolution,
+	})
+}
+
+export type SyncedOption =
+	| 'command_history'
+	| 'multiplayer_servers'
+	| 'creative_hotbars'
+	| 'screenshots'
+
+export type GlobalSyncedOptions = Record<SyncedOption, boolean>
+
+export type SyncedOptionJoinAction = 'seed_shared' | 'attach' | 'merge' | 'requires_resolution'
+
+export type SyncedOptionJoinResolution = 'use_synced' | 'use_instance'
+
+export type SyncedOptionJoinPreview = {
+	action: SyncedOptionJoinAction
+}
+
+export type SyncedOptionCapability = {
+	option: SyncedOption
+	supported: boolean
+	disabled_reason?: string | null
+}
+
+export type SyncedOptionsOverview = {
+	global_options: GlobalSyncedOptions
+	capabilities: SyncedOptionCapability[]
+}
+
+export async function get_synced_option_join_preview(
+	instanceId: string,
+	option: SyncedOption,
+): Promise<SyncedOptionJoinPreview> {
+	return await invoke('plugin:instance|instance_get_synced_option_join_preview', {
+		instanceId,
+		option,
+	})
+}
+
+export async function get_synced_options_overview(
+	instanceId: string,
+): Promise<SyncedOptionsOverview> {
+	return await invoke('plugin:instance|instance_get_synced_options_overview', { instanceId })
+}
+
+export async function get_global_synced_options(): Promise<GlobalSyncedOptions> {
+	return await invoke('plugin:instance|instance_get_global_synced_options')
+}
+
+export async function set_global_synced_option(
+	option: SyncedOption,
+	enabled: boolean,
+): Promise<GlobalSyncedOptions> {
+	return await invoke('plugin:instance|instance_set_global_synced_option', {
+		option,
+		enabled,
+	})
+}
+
+export async function get_command_history(): Promise<string> {
+	return await invoke('plugin:instance|instance_get_command_history')
+}
+
+export async function set_command_history(contents: string): Promise<string> {
+	return await invoke('plugin:instance|instance_set_command_history', { contents })
+}
+
+export async function open_synced_options_folder(): Promise<void> {
+	return await invoke('plugin:instance|instance_open_synced_options_folder')
+}
+
+export type SyncedServer = {
+	id: string
+	name: string
+	address: string
+	accept_textures?: boolean | null
+}
+
+export async function list_synced_servers(): Promise<SyncedServer[]> {
+	return await invoke('plugin:instance|instance_list_synced_servers')
+}
+
+export async function update_synced_server(server: SyncedServer): Promise<void> {
+	return await invoke('plugin:instance|instance_update_synced_server', { server })
+}
+
+export async function remove_synced_server(serverId: string): Promise<void> {
+	return await invoke('plugin:instance|instance_remove_synced_server', { serverId })
+}
+
+export async function rebuild_synced_options(instanceId?: string): Promise<void> {
+	return await invoke('plugin:instance|instance_rebuild_synced_options', { instanceId })
+}
+
 export interface JavaVersion {
 	parsed_version: number
 	version: string
diff --git a/apps/app-frontend/src/helpers/types.d.ts b/apps/app-frontend/src/helpers/types.d.ts
index 5981a51f6e..6057921316 100644
--- a/apps/app-frontend/src/helpers/types.d.ts
+++ b/apps/app-frontend/src/helpers/types.d.ts
@@ -16,6 +16,12 @@ export type GameInstance = {
 	loader_version?: string
 
 	group_ids: string[]
+	synced_options: {
+		command_history: boolean
+		multiplayer_servers: boolean
+		creative_hotbars: boolean
+		screenshots: boolean
+	}
 
 	link?: InstanceLink | null
 	shared_instance?: SharedInstanceAttachment | null
diff --git a/apps/app-frontend/src/helpers/worlds.ts b/apps/app-frontend/src/helpers/worlds.ts
index 4403149c7a..7039437136 100644
--- a/apps/app-frontend/src/helpers/worlds.ts
+++ b/apps/app-frontend/src/helpers/worlds.ts
@@ -29,12 +29,18 @@ export type SingleplayerWorld = BaseWorld & {
 export type ServerWorld = BaseWorld & {
 	type: 'server'
 	index: number
+	server_id?: string
+	source?: ServerSource
 	address: string
 	pack_status: ServerPackStatus
 	project_id?: string
 	content_kind?: string
 }
 
+export type ServerSource = 'user_synced' | 'modpack' | 'linked_server_project' | 'local_desynced'
+
+export type DesyncServerMode = 'keep_in_other_instances' | 'remove_from_other_instances'
+
 export type World = SingleplayerWorld | ServerWorld
 
 export type WorldWithInstance = {
@@ -44,6 +50,14 @@ export type WorldWithInstance = {
 export type SingleplayerGameMode = 'survival' | 'creative' | 'adventure' | 'spectator'
 export type ServerPackStatus = 'enabled' | 'disabled' | 'prompt'
 
+export async function desync_server(
+	instanceId: string,
+	serverId: string,
+	mode: DesyncServerMode,
+): Promise<void> {
+	return await invoke('plugin:worlds|desync_server', { instanceId, serverId, mode })
+}
+
 export type ServerStatus = {
 	// https://minecraft.wiki/w/Text_component_format
 	description?: string | Chat
@@ -260,17 +274,6 @@ function parseServerHost(address: string): string {
 	return trimmedAddress.toLowerCase()
 }
 
-function isIPv4Host(host: string): boolean {
-	const segments = host.split('.')
-	if (segments.length !== 4) return false
-
-	return segments.every((segment) => {
-		if (!/^\d+$/.test(segment)) return false
-		const value = Number.parseInt(segment, 10)
-		return value >= 0 && value <= 255
-	})
-}
-
 /**
  * Normalization converts addresses to a canonical form (lowercase-host:port, default port 25565)
  */
@@ -307,28 +310,6 @@ export function normalizeServerAddress(address: string): string {
 
 	return `${host}:${port}`
 }
-
-/**
- * Domain key used for deduping server entries by removing a single leading subdomain.
- * Example: test.cobblemon.gg and cobblemon.gg map to cobblemon.gg
- */
-export function getServerDomainKey(address: string): string {
-	const normalizedAddress = normalizeServerAddress(address)
-	if (!normalizedAddress) return ''
-
-	const separator = normalizedAddress.lastIndexOf(':')
-	if (separator <= 0 || separator === normalizedAddress.length - 1) return normalizedAddress
-
-	const host = normalizedAddress.slice(0, separator).replace(/\.+$/, '')
-	if (!host) return normalizedAddress
-	if (host.includes(':') || isIPv4Host(host)) return normalizedAddress
-
-	const segments = host.split('.').filter(Boolean)
-	if (segments.length <= 2) return host
-
-	return segments.slice(1).join('.')
-}
-
 export function resolveManagedServerWorld(
 	worlds: World[],
 	managedName: string | null | undefined,
diff --git a/apps/app-frontend/src/locales/ar-SA/index.json b/apps/app-frontend/src/locales/ar-SA/index.json
index b272e74cca..4f777d659f 100644
--- a/apps/app-frontend/src/locales/ar-SA/index.json
+++ b/apps/app-frontend/src/locales/ar-SA/index.json
@@ -1400,9 +1400,6 @@
   "app.settings.tabs.behavior": {
     "message": "السلوك"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "خيارات اللعبة الافتراضية"
-  },
   "app.settings.tabs.java-installations": {
     "message": "تثبيتات جافا"
   },
@@ -2210,12 +2207,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "اختر قناة التحديث"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "إجراءات تشغيل إضافية"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "إجراءات تشغيل إضافية مخصصة"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "إجراءات التشغيل المضافة تسمح للمستخدمين المتقدمين بإنشاء أوامر نظامية محددة قبل و عند تشغيل اللعبة."
   },
@@ -2279,9 +2270,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "إعدادات التثبيت غير متاحة أثناء قفل هذه النسخة."
   },
-  "instance.settings.tabs.java": {
-    "message": "جافا والذاكرة"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "متغيرات البيئة المخصصة"
   },
diff --git a/apps/app-frontend/src/locales/cs-CZ/index.json b/apps/app-frontend/src/locales/cs-CZ/index.json
index 181f195d02..3b0d9b55fd 100644
--- a/apps/app-frontend/src/locales/cs-CZ/index.json
+++ b/apps/app-frontend/src/locales/cs-CZ/index.json
@@ -1691,12 +1691,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Vyber aktualizační kanál"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Spouštěcí hooky"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Vlastní spouštěcí hooky"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Hooky umožňují pokročilým uživatelům spustit určité systémové příkazy před a po spuštění hry."
   },
@@ -1736,9 +1730,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} verze"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java a pamět"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Vlastní proměnná prostředí"
   },
diff --git a/apps/app-frontend/src/locales/da-DK/index.json b/apps/app-frontend/src/locales/da-DK/index.json
index 4dc3909539..449b51491d 100644
--- a/apps/app-frontend/src/locales/da-DK/index.json
+++ b/apps/app-frontend/src/locales/da-DK/index.json
@@ -881,12 +881,6 @@
   "instance.settings.tabs.general.update-channel.beta": {
     "message": "Beta"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Startkommandoer"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Brugerfinansieret startkommandoer"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Startkommandoer giver avancerede brugere mulighed for at køre bestemte systemkommandoer før og efter spillet startes."
   },
@@ -926,9 +920,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} version"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java og hukommelse"
-  },
   "instance.settings.tabs.java.enter-java-arguments": {
     "message": "Indskriv Java argumenter..."
   },
diff --git a/apps/app-frontend/src/locales/de-CH/index.json b/apps/app-frontend/src/locales/de-CH/index.json
index 6bf37d6c82..ccee306aa0 100644
--- a/apps/app-frontend/src/locales/de-CH/index.json
+++ b/apps/app-frontend/src/locales/de-CH/index.json
@@ -1478,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "Verhalten"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Standard-Spieloptionen"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java Installationen"
   },
@@ -2303,12 +2300,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Update-Kanal auswählen"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Start Hooks"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Benutzerdefinierte Start Hooks"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Hooks ermöglichen es erfahrenen Benutzern, bestimmte Systembefehle vor und nach dem Start des Spiels auszuführen."
   },
@@ -2372,9 +2363,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Installationseinstellungen sind nicht verfügbar, solange diese Instanz gesperrt ist."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java und Arbeitsspeicher"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Benutzerdefinierte Umgebungsvariablen"
   },
diff --git a/apps/app-frontend/src/locales/de-DE/index.json b/apps/app-frontend/src/locales/de-DE/index.json
index 545562d90b..775bd649c3 100644
--- a/apps/app-frontend/src/locales/de-DE/index.json
+++ b/apps/app-frontend/src/locales/de-DE/index.json
@@ -1478,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "Verhalten"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Standard-Spieloptionen"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java-Installationen"
   },
@@ -2303,12 +2300,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Aktualisierungskanal auswählen"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Startargumente"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Benutzerdefinierte Startargumente"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Hooks ermöglichen es fortgeschrittenen Benutzern, bestimmte Systembefehle vor und nach dem Spielstart auszuführen."
   },
@@ -2372,9 +2363,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Installationseinstellungen sind nicht verfügbar, solange diese Instanz gesperrt ist."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java und Arbeitsspeicher"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Benutzerdefinierte Umgebungsvariablen"
   },
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 96412bd7ae..0f06178e09 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -758,6 +758,9 @@
   "app.instance.tab.logs": {
     "message": "Logs"
   },
+  "app.instance.tab.screenshots": {
+    "message": "Screenshots"
+  },
   "app.instance.tab.share": {
     "message": "Share"
   },
@@ -806,6 +809,9 @@
   "app.instance.worlds.remove-server-modal.remove-button": {
     "message": "Remove server"
   },
+  "app.instance.worlds.remove-server-modal.synced-removal-notice": {
+    "message": "This server will also be removed from {count, plural, one {# other instance} other {# other instances}} because it’s synced."
+  },
   "app.instance.worlds.remove-server-modal.title": {
     "message": "Remove server"
   },
@@ -1259,6 +1265,9 @@
   "app.nav.remove-account": {
     "message": "Remove account"
   },
+  "app.nav.screenshots": {
+    "message": "Screenshots"
+  },
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Sign into Modrinth"
   },
@@ -1355,6 +1364,159 @@
   "app.restarting": {
     "message": "Restarting..."
   },
+  "app.screenshots.copied": {
+    "message": "Copied"
+  },
+  "app.screenshots.copy": {
+    "message": "Copy image"
+  },
+  "app.screenshots.delete-description": {
+    "message": "Permanently delete {name}? This action cannot be undone."
+  },
+  "app.screenshots.delete-success": {
+    "message": "Screenshot deleted"
+  },
+  "app.screenshots.delete-title": {
+    "message": "Delete screenshot"
+  },
+  "app.screenshots.deselect": {
+    "message": "Deselect {name}"
+  },
+  "app.screenshots.edit": {
+    "message": "Edit screenshot"
+  },
+  "app.screenshots.empty-description": {
+    "message": "Screenshots you take in-game will appear here."
+  },
+  "app.screenshots.empty-heading": {
+    "message": "No screenshots yet"
+  },
+  "app.screenshots.error-heading": {
+    "message": "Failed to load screenshots"
+  },
+  "app.screenshots.go-to-instance": {
+    "message": "Go to instance"
+  },
+  "app.screenshots.group-by": {
+    "message": "Group by"
+  },
+  "app.screenshots.group.all-screenshots": {
+    "message": "All screenshots"
+  },
+  "app.screenshots.group.collapse": {
+    "message": "Collapse group"
+  },
+  "app.screenshots.group.custom": {
+    "message": "Custom group"
+  },
+  "app.screenshots.group.date": {
+    "message": "Date"
+  },
+  "app.screenshots.group.delete": {
+    "message": "Delete group"
+  },
+  "app.screenshots.group.delete-description": {
+    "message": "Screenshots in this group will become ungrouped."
+  },
+  "app.screenshots.group.edit": {
+    "message": "Edit group name"
+  },
+  "app.screenshots.group.empty": {
+    "message": "Drag and drop to add screenshots."
+  },
+  "app.screenshots.group.expand": {
+    "message": "Expand group"
+  },
+  "app.screenshots.group.instance": {
+    "message": "Instance"
+  },
+  "app.screenshots.group.new": {
+    "message": "New group"
+  },
+  "app.screenshots.group.none": {
+    "message": "No grouping"
+  },
+  "app.screenshots.group.this-month": {
+    "message": "This month"
+  },
+  "app.screenshots.group.this-week": {
+    "message": "This week"
+  },
+  "app.screenshots.group.today": {
+    "message": "Today"
+  },
+  "app.screenshots.group.ungrouped": {
+    "message": "Ungrouped"
+  },
+  "app.screenshots.group.yesterday": {
+    "message": "Yesterday"
+  },
+  "app.screenshots.heading": {
+    "message": "Screenshots"
+  },
+  "app.screenshots.more-actions": {
+    "message": "More actions"
+  },
+  "app.screenshots.no-results-description": {
+    "message": "Try a different search or filter."
+  },
+  "app.screenshots.no-results-heading": {
+    "message": "No matching screenshots"
+  },
+  "app.screenshots.preview.instance-and-date": {
+    "message": "{instance} · {date}"
+  },
+  "app.screenshots.search": {
+    "message": "Search"
+  },
+  "app.screenshots.select": {
+    "message": "Select {name}"
+  },
+  "app.screenshots.selection.aria-label": {
+    "message": "Selected screenshots"
+  },
+  "app.screenshots.selection.delete-description": {
+    "message": "Delete {count, plural, one {# screenshot} other {# screenshots}}? This action cannot be undone."
+  },
+  "app.screenshots.selection.delete-success": {
+    "message": "{count, plural, one {# screenshot deleted} other {# screenshots deleted}}"
+  },
+  "app.screenshots.selection.delete-title": {
+    "message": "Delete selected screenshots"
+  },
+  "app.screenshots.selection.export-zip": {
+    "message": "Export ZIP"
+  },
+  "app.screenshots.selection.global-export-filename": {
+    "message": "Modrinth screenshots.zip"
+  },
+  "app.screenshots.selection.instance-export-filename": {
+    "message": "{instance} screenshots.zip"
+  },
+  "app.screenshots.selection.remove-from-group": {
+    "message": "Remove from group"
+  },
+  "app.screenshots.selection.selected-count": {
+    "message": "{count} selected"
+  },
+  "app.screenshots.selection.zip-archive": {
+    "message": "ZIP archive"
+  },
+  "app.screenshots.show-in-folder": {
+    "message": "Show in folder"
+  },
+  "app.screenshots.sort-by": {
+    "message": "Sort by"
+  },
+  "app.screenshots.sort.name": {
+    "message": "Name"
+  },
+  "app.screenshots.sort.newest": {
+    "message": "Newest"
+  },
+  "app.screenshots.sort.oldest": {
+    "message": "Oldest"
+  },
   "app.settings.app-version": {
     "message": "Modrinth App {version}"
   },
@@ -1382,6 +1544,9 @@
   "app.settings.default-instance-options.height.title": {
     "message": "Height"
   },
+  "app.settings.default-instance-options.java-and-memory.title": {
+    "message": "Java and memory"
+  },
   "app.settings.default-instance-options.java-arguments.description": {
     "message": "Arguments passed to Java when launching an instance."
   },
@@ -1391,6 +1556,9 @@
   "app.settings.default-instance-options.java-arguments.title": {
     "message": "Java arguments"
   },
+  "app.settings.default-instance-options.launch-hooks.title": {
+    "message": "Launch hooks"
+  },
   "app.settings.default-instance-options.memory-allocation.description": {
     "message": "Maximum memory available to each instance."
   },
@@ -1424,6 +1592,9 @@
   "app.settings.default-instance-options.width.title": {
     "message": "Width"
   },
+  "app.settings.default-instance-options.window.title": {
+    "message": "Window"
+  },
   "app.settings.default-instance-options.wrapper-hook.description": {
     "message": "Command used to wrap the Minecraft launch process."
   },
@@ -1520,15 +1691,54 @@
   "app.settings.sidebar.label.instances": {
     "message": "Instances"
   },
+  "app.settings.synced-options.command-history": {
+    "message": "Command history"
+  },
+  "app.settings.synced-options.command-history.description": {
+    "message": "Sync command history across your instances."
+  },
+  "app.settings.synced-options.command-history.editor-title": {
+    "message": "Edit command history"
+  },
+  "app.settings.synced-options.creative-hotbars": {
+    "message": "Saved creative hotbars"
+  },
+  "app.settings.synced-options.creative-hotbars.description": {
+    "message": "Sync saved creative hotbars across your instances."
+  },
+  "app.settings.synced-options.multiplayer-servers": {
+    "message": "Multiplayer servers"
+  },
+  "app.settings.synced-options.multiplayer-servers.address": {
+    "message": "Server address"
+  },
+  "app.settings.synced-options.multiplayer-servers.description": {
+    "message": "Sync multiplayer servers across your instances."
+  },
+  "app.settings.synced-options.multiplayer-servers.editor-title": {
+    "message": "Edit synced servers"
+  },
+  "app.settings.synced-options.multiplayer-servers.empty": {
+    "message": "No user-added servers are currently synced."
+  },
+  "app.settings.synced-options.multiplayer-servers.name": {
+    "message": "Server name"
+  },
+  "app.settings.synced-options.multiplayer-servers.none-synced-yet": {
+    "message": "No servers synced yet"
+  },
+  "app.settings.synced-options.screenshots": {
+    "message": "Screenshots"
+  },
+  "app.settings.synced-options.screenshots.description": {
+    "message": "View screenshots from your instances in one place."
+  },
   "app.settings.tabs.appearance": {
     "message": "Appearance"
   },
   "app.settings.tabs.behavior": {
     "message": "Behavior"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Default game options"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java installations"
   },
@@ -1541,6 +1751,9 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
+  "app.settings.tabs.synced-options": {
+    "message": "Synced settings"
+  },
   "app.sidebar.playing-as": {
     "message": "Playing as"
   },
@@ -2354,12 +2567,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Select update channel"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Launch hooks"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Custom launch hooks"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Hooks allow advanced users to run certain system commands before and after launching the game."
   },
@@ -2423,20 +2630,17 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Installation settings are unavailable while this instance is locked."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java and memory"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
-    "message": "Custom environment variables"
+    "message": "Use custom environment variables for this instance."
   },
   "instance.settings.tabs.java.custom-java-arguments": {
-    "message": "Custom Java arguments"
+    "message": "Use custom Java arguments for this instance."
   },
   "instance.settings.tabs.java.custom-java-installation": {
-    "message": "Custom Java installation"
+    "message": "Use a custom Java installation for this instance."
   },
   "instance.settings.tabs.java.custom-memory-allocation": {
-    "message": "Custom memory allocation"
+    "message": "Use a custom memory allocation for this instance."
   },
   "instance.settings.tabs.java.enter-environment-variables": {
     "message": "Enter environmental variables..."
@@ -2462,14 +2666,74 @@
   "instance.settings.tabs.java.java-path-placeholder": {
     "message": "/path/to/java"
   },
+  "instance.settings.tabs.settings-overrides": {
+    "message": "Sync overrides"
+  },
   "instance.settings.tabs.sharing": {
     "message": "Sharing"
   },
+  "instance.settings.tabs.synced-options.command-history": {
+    "message": "Command history"
+  },
+  "instance.settings.tabs.synced-options.command-history.disabled-in-app": {
+    "message": "Command history syncing is turned off in app settings."
+  },
+  "instance.settings.tabs.synced-options.command-history.exclude-description": {
+    "message": "Exclude this instance from command history syncing."
+  },
+  "instance.settings.tabs.synced-options.creative-hotbars": {
+    "message": "Saved creative hotbars"
+  },
+  "instance.settings.tabs.synced-options.creative-hotbars.disabled-in-app": {
+    "message": "Saved creative hotbar syncing is turned off in app settings."
+  },
+  "instance.settings.tabs.synced-options.creative-hotbars.exclude-description": {
+    "message": "Exclude this instance from saved creative hotbar syncing."
+  },
+  "instance.settings.tabs.synced-options.hotbars-conflict.backup-description": {
+    "message": "The version being replaced will be backed up before anything changes."
+  },
+  "instance.settings.tabs.synced-options.hotbars-conflict.description": {
+    "message": "{instance} and your synced version have different creative hotbars. Choose which one to use across your instances."
+  },
+  "instance.settings.tabs.synced-options.hotbars-conflict.title": {
+    "message": "Choose creative hotbars"
+  },
+  "instance.settings.tabs.synced-options.hotbars-conflict.use-instance": {
+    "message": "Overwrite others"
+  },
+  "instance.settings.tabs.synced-options.hotbars-conflict.use-synced": {
+    "message": "Use synced"
+  },
+  "instance.settings.tabs.synced-options.multiplayer-servers": {
+    "message": "Multiplayer servers"
+  },
+  "instance.settings.tabs.synced-options.multiplayer-servers.disabled-in-app": {
+    "message": "Multiplayer server syncing is turned off in app settings."
+  },
+  "instance.settings.tabs.synced-options.multiplayer-servers.exclude-description": {
+    "message": "Exclude this instance from multiplayer server syncing."
+  },
+  "instance.settings.tabs.synced-options.open-app-settings": {
+    "message": "Open synced settings"
+  },
+  "instance.settings.tabs.synced-options.screenshots": {
+    "message": "Screenshots"
+  },
+  "instance.settings.tabs.synced-options.screenshots.disabled-in-app": {
+    "message": "Screenshots are turned off in app settings."
+  },
+  "instance.settings.tabs.synced-options.screenshots.exclude-description": {
+    "message": "Exclude this instance’s screenshots from the Screenshots page."
+  },
+  "instance.settings.tabs.synced-options.shared-settings.description": {
+    "message": "Game settings can be shared between instances. Choose what to share in app settings."
+  },
   "instance.settings.tabs.window": {
     "message": "Window"
   },
   "instance.settings.tabs.window.custom-window-settings": {
-    "message": "Custom window settings"
+    "message": "Use custom window settings for this instance."
   },
   "instance.settings.tabs.window.fullscreen": {
     "message": "Fullscreen"
@@ -2567,6 +2831,21 @@
   "instance.worlds.create_shortcut": {
     "message": "Create shortcut"
   },
+  "instance.worlds.desync-server.description": {
+    "message": "Do you want to keep this server in other synced instances, or remove it from them?"
+  },
+  "instance.worlds.desync-server.keep": {
+    "message": "Keep"
+  },
+  "instance.worlds.desync-server.remove": {
+    "message": "Remove"
+  },
+  "instance.worlds.desync-server.title": {
+    "message": "Desync server"
+  },
+  "instance.worlds.desync_server": {
+    "message": "Desync"
+  },
   "instance.worlds.dont_show_on_home": {
     "message": "Don't show on Home"
   },
diff --git a/apps/app-frontend/src/locales/es-419/index.json b/apps/app-frontend/src/locales/es-419/index.json
index 4e5a4540ed..68f4eae890 100644
--- a/apps/app-frontend/src/locales/es-419/index.json
+++ b/apps/app-frontend/src/locales/es-419/index.json
@@ -1478,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "Comportamiento"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Opciones por defecto del juego"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Instalaciones de Java"
   },
@@ -2303,12 +2300,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Selecciona el canal de actualizaciones"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Hooks de inicio"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Hooks personalizados"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Los hooks permiten que usuarios avanzados ejecuten comandos del sistema antes y despues de lanzar el juego."
   },
@@ -2372,9 +2363,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Los ajustes de instalación no están disponibles mientras esta instancia esté bloqueada."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java y memoria"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Variables de entorno personalizadas"
   },
diff --git a/apps/app-frontend/src/locales/es-ES/index.json b/apps/app-frontend/src/locales/es-ES/index.json
index b4f77d9cfc..ac0c6d6e80 100644
--- a/apps/app-frontend/src/locales/es-ES/index.json
+++ b/apps/app-frontend/src/locales/es-ES/index.json
@@ -1412,9 +1412,6 @@
   "app.settings.tabs.behavior": {
     "message": "Comportamiento"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Opciones predeterminadas del juego"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Instalaciones de Java"
   },
@@ -2231,12 +2228,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Seleccionar canal de actualizaciones"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Hooks de lanzamiento"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Hooks de lanzamiento personalizados"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Los hooks permiten a los usuarios avanzados ejecutar ciertas funciones del sistema antes y después de lanzar el juego."
   },
@@ -2294,9 +2285,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Los ajustes de instalación no están disponibles mientras esta instancia esté bloqueada."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java y memoria"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Variables de entorno personalizadas"
   },
diff --git a/apps/app-frontend/src/locales/fi-FI/index.json b/apps/app-frontend/src/locales/fi-FI/index.json
index fa9ff52e50..fe17d0b061 100644
--- a/apps/app-frontend/src/locales/fi-FI/index.json
+++ b/apps/app-frontend/src/locales/fi-FI/index.json
@@ -728,12 +728,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Valitse päivitys kanava"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Aloitustoiminnot"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Mukautetut aloitustoiminnot"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Koukut antavat edistyneiden käyttäjien suorittaa tiettyjä järjestelmä komentoja pelin käynnistystä ennen ja sen jälkeen."
   },
@@ -773,9 +767,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} versio"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java ja muisti"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Mukautetut ympäristö muuttujat"
   },
diff --git a/apps/app-frontend/src/locales/fil-PH/index.json b/apps/app-frontend/src/locales/fil-PH/index.json
index 679dc01c80..3c6b11f3fd 100644
--- a/apps/app-frontend/src/locales/fil-PH/index.json
+++ b/apps/app-frontend/src/locales/fil-PH/index.json
@@ -494,12 +494,6 @@
   "instance.settings.tabs.general.update-channel.beta": {
     "message": "Beta"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Mga launch hook"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Mga pasadyang launch hook"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Binibigyan-daan ng mga hook ang mga ekspertong tagagamit na makapagtakbo ng mga pansistemang utos o system command bago at pagkatapos ma-launch ang laro."
   },
@@ -539,9 +533,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Bersiyon ng {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java at memorya"
-  },
   "instance.settings.tabs.java.environment-variables": {
     "message": "Environment variables"
   },
diff --git a/apps/app-frontend/src/locales/fr-FR/index.json b/apps/app-frontend/src/locales/fr-FR/index.json
index 74ddb3d96d..55fe8b13dd 100644
--- a/apps/app-frontend/src/locales/fr-FR/index.json
+++ b/apps/app-frontend/src/locales/fr-FR/index.json
@@ -1439,9 +1439,6 @@
   "app.settings.tabs.behavior": {
     "message": "Comportement"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Options de jeu par défaut"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Installations de Java"
   },
@@ -2159,12 +2156,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Sélectionner le canal de mise à jour"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Crochets de lancement"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Crochets de lancement personnalisés"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Les crochets permettent aux usagers avancés d'exécuter certaines commandes systèmes avant et après le lancement du jeu."
   },
@@ -2228,9 +2219,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Les paramètres d'installation ne sont pas disponible pendant que cette instance est verrouillée."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java et mémoire"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Variables d'environnement personnalisé"
   },
diff --git a/apps/app-frontend/src/locales/he-IL/index.json b/apps/app-frontend/src/locales/he-IL/index.json
index e82537c362..7159014578 100644
--- a/apps/app-frontend/src/locales/he-IL/index.json
+++ b/apps/app-frontend/src/locales/he-IL/index.json
@@ -389,12 +389,6 @@
   "instance.settings.tabs.general.name": {
     "message": "שם"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "פעולות בעת הפעלה"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "פעולות בעת הפעלה מותאמות אישית"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "פעולות בעת הפעלה מאפשרות למשתמשים מתקדמים להריץ פקודות מערכת מסוימות לפני ואחרי שהמשחק מופעל."
   },
@@ -434,9 +428,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} גרסה"
   },
-  "instance.settings.tabs.java": {
-    "message": "ג'אווה וזיכרון"
-  },
   "instance.settings.tabs.java.environment-variables": {
     "message": "משתני סביבה"
   },
diff --git a/apps/app-frontend/src/locales/hu-HU/index.json b/apps/app-frontend/src/locales/hu-HU/index.json
index d8ba639d3b..8c54633968 100644
--- a/apps/app-frontend/src/locales/hu-HU/index.json
+++ b/apps/app-frontend/src/locales/hu-HU/index.json
@@ -1214,9 +1214,6 @@
   "app.settings.tabs.behavior": {
     "message": "Működés"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "A játék alapbeállításai"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Telepített Java példányok"
   },
@@ -1817,12 +1814,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Frissítési csatorna kiválasztása"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Indítási horgok"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Saját indítási horgok"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "A horgok lehetővé teszik a haladó felhasználók számára, hogy bizonyos rendszerparancsokat futtassanak a játék elindítása előtt és után."
   },
@@ -1877,9 +1868,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "A telepítési beállítások nem érhetők el, amíg ez a példány zárolva van."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java és memória"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Egyéni környezeti változók"
   },
diff --git a/apps/app-frontend/src/locales/id-ID/index.json b/apps/app-frontend/src/locales/id-ID/index.json
index 5122d14e45..057a985b9b 100644
--- a/apps/app-frontend/src/locales/id-ID/index.json
+++ b/apps/app-frontend/src/locales/id-ID/index.json
@@ -593,12 +593,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Pilih kanal pembaruan"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Luncurkan kait"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Luncurkan kait tersuai"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Kait membolehkan pengguna ahli untuk menjalankan beberapa perintah sistem sebelum dan setelah meluncurkan permainan."
   },
@@ -638,9 +632,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Versi {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java dan memori"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Variabel lingkungan tersuai"
   },
diff --git a/apps/app-frontend/src/locales/it-IT/index.json b/apps/app-frontend/src/locales/it-IT/index.json
index 9164ec714a..88398232a4 100644
--- a/apps/app-frontend/src/locales/it-IT/index.json
+++ b/apps/app-frontend/src/locales/it-IT/index.json
@@ -1472,9 +1472,6 @@
   "app.settings.tabs.behavior": {
     "message": "Comportamento"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Opzioni di gioco predefinite"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Installazioni Java"
   },
@@ -2297,12 +2294,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Seleziona il canale di aggiornamento"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Hook di avvio"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Hook di avvio personalizzati"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "I hook permettono a utenti avanzati di eseguire comandi di sistema prima e dopo l'avvio del gioco."
   },
@@ -2366,9 +2357,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Le impostazioni non sono disponibili mentre l'istanza è bloccata."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java e memoria"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Personalizzate"
   },
diff --git a/apps/app-frontend/src/locales/ja-JP/index.json b/apps/app-frontend/src/locales/ja-JP/index.json
index 54b1f4c9bb..80108b0183 100644
--- a/apps/app-frontend/src/locales/ja-JP/index.json
+++ b/apps/app-frontend/src/locales/ja-JP/index.json
@@ -989,9 +989,6 @@
   "app.settings.tabs.behavior": {
     "message": "動作"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "デフォルトのゲーム設定"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Javaのインストール設定"
   },
@@ -1682,12 +1679,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "アップデートチャンネルを選択"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "起動フック"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "カスタム起動フック"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "フックを使用して、ゲームの起動前後にシステムコマンドを実行するようにできます。"
   },
@@ -1751,9 +1742,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "このインスタンスがロックされている間は、インストール設定を利用できません。"
   },
-  "instance.settings.tabs.java": {
-    "message": "Javaとメモリ"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "カスタム環境変数"
   },
diff --git a/apps/app-frontend/src/locales/ko-KR/index.json b/apps/app-frontend/src/locales/ko-KR/index.json
index 34c40a6f0c..3ddcf6104a 100644
--- a/apps/app-frontend/src/locales/ko-KR/index.json
+++ b/apps/app-frontend/src/locales/ko-KR/index.json
@@ -1397,9 +1397,6 @@
   "app.settings.tabs.behavior": {
     "message": "동작"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "기본 게임 옵션"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java 설치"
   },
@@ -1958,12 +1955,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "업데이트 채널 선택"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "실행 후크"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "사용자 지정 실행 후크"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "후크 기능을 사용하면 고급 사용자가 게임 실행 전후에 특정 시스템 명령을 실행할 수 있습니다."
   },
@@ -2006,9 +1997,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "이 인스턴스가 잠긴 상태에서는 설치 설정을 사용할 수 없습니다."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java 및 메모리"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "사용자 지정 환경 변수"
   },
diff --git a/apps/app-frontend/src/locales/ms-MY/index.json b/apps/app-frontend/src/locales/ms-MY/index.json
index 5898d93f88..96866d312d 100644
--- a/apps/app-frontend/src/locales/ms-MY/index.json
+++ b/apps/app-frontend/src/locales/ms-MY/index.json
@@ -665,12 +665,6 @@
   "instance.settings.tabs.general.update-channel.release": {
     "message": "Terbitan"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Cangkuk pelancaran"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Cangkuk pelancaran tersuai"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Cangkuk membenarkan pengguna lanjutan menjalankan perintah sistem tertentu sebelum dan selepas melancarkan permainan."
   },
@@ -710,9 +704,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Versi {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java dan ingatan"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Pembolehubah persekitaran tersuai"
   },
diff --git a/apps/app-frontend/src/locales/nl-NL/index.json b/apps/app-frontend/src/locales/nl-NL/index.json
index 23179a67e1..1ea41836ef 100644
--- a/apps/app-frontend/src/locales/nl-NL/index.json
+++ b/apps/app-frontend/src/locales/nl-NL/index.json
@@ -971,9 +971,6 @@
   "app.settings.tabs.behavior": {
     "message": "Gedrag"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Standaard spelopties"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java installaties"
   },
@@ -1532,12 +1529,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Selecteer updatekanaal"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Opstart haakjes"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Aangepaste opstart haakjes"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Haakjes maken het mogelijk voor gevorderde gebruikers om bepaalde systeemcommando's uit te voeren voor en na het opstarten van het spel."
   },
@@ -1601,9 +1592,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Installatie-instellingen zijn niet beschikbaar zolang deze instantie is vergrendeld."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java en geheugen"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Aangepaste omgevingsvariabelen"
   },
diff --git a/apps/app-frontend/src/locales/no-NO/index.json b/apps/app-frontend/src/locales/no-NO/index.json
index c6f17212b4..59de7ad037 100644
--- a/apps/app-frontend/src/locales/no-NO/index.json
+++ b/apps/app-frontend/src/locales/no-NO/index.json
@@ -362,12 +362,6 @@
   "instance.settings.tabs.general.name": {
     "message": "Navn"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Startkroker"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Egendefinerte startkroker"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Startkroker lar avanserte brukere køre visse systemkommandoer før og etter spillet blir startet."
   },
@@ -407,9 +401,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} versjon"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java og minne"
-  },
   "instance.settings.tabs.java.custom-memory-allocation": {
     "message": "Egendefinert minneallokasjon"
   },
diff --git a/apps/app-frontend/src/locales/pl-PL/index.json b/apps/app-frontend/src/locales/pl-PL/index.json
index 95286f34be..2ffdc1b41b 100644
--- a/apps/app-frontend/src/locales/pl-PL/index.json
+++ b/apps/app-frontend/src/locales/pl-PL/index.json
@@ -1280,9 +1280,6 @@
   "app.settings.tabs.behavior": {
     "message": "Zachowanie"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Domyślne opcje gry"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Instalacje Java"
   },
@@ -2018,12 +2015,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Wybierz kanał aktualizacji"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Haczyki startowe"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Własne haczyki przy uruchomieniu"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Hooki pozwalają zaawansowanym użytkownikom uruchamiać określone systemowe komendy przed i po uruchomieniu gry."
   },
@@ -2069,9 +2060,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Wersja {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java i pamięć"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Zmienne środowiskowe"
   },
diff --git a/apps/app-frontend/src/locales/pt-BR/index.json b/apps/app-frontend/src/locales/pt-BR/index.json
index 16563101c8..bf1178833a 100644
--- a/apps/app-frontend/src/locales/pt-BR/index.json
+++ b/apps/app-frontend/src/locales/pt-BR/index.json
@@ -1064,9 +1064,6 @@
   "app.settings.tabs.behavior": {
     "message": "Comportamento"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Configurações padrão do jogo"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Instalações Java"
   },
@@ -1628,12 +1625,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Selecionar canal de atualização"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Ações de inicialização"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Ações de inicialização personalizadas"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "As ações permitem usuários experientes que executem certos comandos do sistema antes ou após iniciar o jogo."
   },
@@ -1697,9 +1688,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "As opções de instalação estarão indisponíveis enquanto esta instância estiver privada."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java e memória"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Variáveis ​​de ambiente personalizadas"
   },
diff --git a/apps/app-frontend/src/locales/pt-PT/index.json b/apps/app-frontend/src/locales/pt-PT/index.json
index 94c24d6abc..16c0e30c77 100644
--- a/apps/app-frontend/src/locales/pt-PT/index.json
+++ b/apps/app-frontend/src/locales/pt-PT/index.json
@@ -806,12 +806,6 @@
   "instance.settings.tabs.general.update-channel.beta": {
     "message": "Beta"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Ganchos de inicio"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Ganchos de inicio personalizados"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Ganchos permitem a utilizadores avançados executarem certos comandos de sistema antes e após abrir o jogo."
   },
@@ -869,9 +863,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Versão {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java e memória"
-  },
   "instance.settings.tabs.java.environment-variables": {
     "message": "Variáveis de ambiente"
   },
diff --git a/apps/app-frontend/src/locales/ro-RO/index.json b/apps/app-frontend/src/locales/ro-RO/index.json
index 1abc92b15d..aa17c16ff6 100644
--- a/apps/app-frontend/src/locales/ro-RO/index.json
+++ b/apps/app-frontend/src/locales/ro-RO/index.json
@@ -347,12 +347,6 @@
   "instance.settings.tabs.general.name": {
     "message": "Nume"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Cârlige de lansare"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Cârlige de lansare personalizate"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Cârligele permit utilizatorilor avansați să ruleze anumite comenzi de sistem înainte și după lansarea jocului."
   },
@@ -392,9 +386,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Versiune {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java și memorie"
-  },
   "instance.settings.tabs.java.environment-variables": {
     "message": "Variabile de mediu"
   },
diff --git a/apps/app-frontend/src/locales/ru-RU/index.json b/apps/app-frontend/src/locales/ru-RU/index.json
index 7f5170a067..162095fa72 100644
--- a/apps/app-frontend/src/locales/ru-RU/index.json
+++ b/apps/app-frontend/src/locales/ru-RU/index.json
@@ -1457,9 +1457,6 @@
   "app.settings.tabs.behavior": {
     "message": "Поведение"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Предустановки игры"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Расположение Java"
   },
@@ -2279,12 +2276,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Выберите канал обновления"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Команды запуска"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Переопределение команд запуска"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Позволяет опытным пользователям задать системные команды, выполняемые до и после запуска игры."
   },
@@ -2348,9 +2339,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Параметры установки недоступны, пока сборка заблокирована."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java и память"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Переопределение переменных среды"
   },
diff --git a/apps/app-frontend/src/locales/sr-CS/index.json b/apps/app-frontend/src/locales/sr-CS/index.json
index b380c2f579..1ffc2b5e8c 100644
--- a/apps/app-frontend/src/locales/sr-CS/index.json
+++ b/apps/app-frontend/src/locales/sr-CS/index.json
@@ -848,12 +848,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Izaberi kanal ažuiranja"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Hookovi pokreta"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Prilagođeni hookovi za lansiranje"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Hookovi omogućavaju naprednim korisnicima da pokreću određene sistemske komande pre i posle pokretanja igre."
   },
@@ -893,9 +887,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Verzija {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java i radna memorija"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Prilagođene promenljive okruženja"
   },
diff --git a/apps/app-frontend/src/locales/sv-SE/index.json b/apps/app-frontend/src/locales/sv-SE/index.json
index 73cc72e16d..d800d8ce32 100644
--- a/apps/app-frontend/src/locales/sv-SE/index.json
+++ b/apps/app-frontend/src/locales/sv-SE/index.json
@@ -1373,9 +1373,6 @@
   "app.settings.tabs.behavior": {
     "message": "Beteende"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Standard spelinställningar"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java-installationer"
   },
@@ -2138,12 +2135,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Välj uppdateringskanal"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Startkrokar"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Egendefinierade startkrokar"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Krokar gör det möjligt för avancerade användare att köra vissa systemkommandon före och efter att spelet startas."
   },
@@ -2198,9 +2189,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Installationsinställningar är otillgängligt medan den här instansen är låst."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java och minne"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Anpassade miljövariabler"
   },
diff --git a/apps/app-frontend/src/locales/th-TH/index.json b/apps/app-frontend/src/locales/th-TH/index.json
index ae609fd6de..0058a1b26f 100644
--- a/apps/app-frontend/src/locales/th-TH/index.json
+++ b/apps/app-frontend/src/locales/th-TH/index.json
@@ -578,12 +578,6 @@
   "instance.settings.tabs.general.name": {
     "message": "ชื่อ"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Launch Hook"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "กำหนด Launch Hook เอง"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Launch Hook จะช่วยให้ผู้เล่นที่ชำนาญสามารถใช้คำสั่งต่อระบบบางอย่างได้ ทั้งก่อนและหลังเกมถูกเปิด"
   },
@@ -623,9 +617,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "เวอร์ชัน {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java และ หน่วยความจำ"
-  },
   "instance.settings.tabs.java.environment-variables": {
     "message": "Environment Variables"
   },
diff --git a/apps/app-frontend/src/locales/tr-TR/index.json b/apps/app-frontend/src/locales/tr-TR/index.json
index 7cfcc12c2b..576b032063 100644
--- a/apps/app-frontend/src/locales/tr-TR/index.json
+++ b/apps/app-frontend/src/locales/tr-TR/index.json
@@ -1478,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "Davranış"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Varsayılan oyun seçenekleri"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java kurulumları"
   },
@@ -2303,12 +2300,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Güncelleme kanalını seç"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Başlatma kancaları"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Özel başlatma kancaları"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Kancalar gelişmiş kullanıcıların oyunu başlattıktan önce ve sonra belirli sistem komutları çalıştırmasını sağlar."
   },
@@ -2372,9 +2363,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Bu örnek kilitliyken kurulum ayarlarına erişilemez."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java ve bellek"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Özel ortam değişkenleri"
   },
diff --git a/apps/app-frontend/src/locales/uk-UA/index.json b/apps/app-frontend/src/locales/uk-UA/index.json
index 68b26c2da8..cb5d6e3811 100644
--- a/apps/app-frontend/src/locales/uk-UA/index.json
+++ b/apps/app-frontend/src/locales/uk-UA/index.json
@@ -1253,9 +1253,6 @@
   "app.settings.tabs.behavior": {
     "message": "Поведінка"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Стандартні параметри гри"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Інсталяції Java"
   },
@@ -2003,12 +2000,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Оберіть випуск оновлення"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Параметри запуску"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Користувацькі параметри запуску"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Дають змогу досвідченим користувачам застосовувати певні системні команди до та після запуску гри."
   },
@@ -2072,9 +2063,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "Налаштування інсталяції недоступні, поки ця збірка заблокована."
   },
-  "instance.settings.tabs.java": {
-    "message": "Java та пам’ять"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Власні змінні середовища"
   },
diff --git a/apps/app-frontend/src/locales/vi-VN/index.json b/apps/app-frontend/src/locales/vi-VN/index.json
index 0e63294e68..a11c0a5855 100644
--- a/apps/app-frontend/src/locales/vi-VN/index.json
+++ b/apps/app-frontend/src/locales/vi-VN/index.json
@@ -938,12 +938,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "Chọn kênh cập nhật"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "Khởi chạy Hooks"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Hooks khởi chạy tuỳ biến"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "Hooks cho phép người dùng nâng cao chạy câu lệnh hệ thống trước và sau khi chạy game."
   },
@@ -983,9 +977,6 @@
   "instance.settings.tabs.installation.loader-version": {
     "message": "Phiên bản {loader}"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java và bộ nhớ"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "Tùy chọn biến môi trường"
   },
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 6354300bf0..f347fea4d2 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -1478,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "行为"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "默认游戏选项"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java 管理"
   },
@@ -2303,12 +2300,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "选择更新渠道"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "启动钩子"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "自定义启动钩子"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "钩子供高级用户使用，可设置游戏启动前后运行的特定系统命令。"
   },
@@ -2372,9 +2363,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "当实例被锁定时，安装设置不可用。"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java 及内存"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "自定义环境变量"
   },
diff --git a/apps/app-frontend/src/locales/zh-TW/index.json b/apps/app-frontend/src/locales/zh-TW/index.json
index 2b3d423594..5dcd5c2d9c 100644
--- a/apps/app-frontend/src/locales/zh-TW/index.json
+++ b/apps/app-frontend/src/locales/zh-TW/index.json
@@ -1478,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "行為"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "預設遊戲選項"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java 安裝"
   },
@@ -2303,12 +2300,6 @@
   "instance.settings.tabs.general.update-channel.select": {
     "message": "選擇更新通道"
   },
-  "instance.settings.tabs.hooks": {
-    "message": "啟動掛勾"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "自訂啟動掛勾"
-  },
   "instance.settings.tabs.hooks.description": {
     "message": "掛勾讓進階使用者能在遊戲啟動前和啟動後執行特定的系統指令。"
   },
@@ -2372,9 +2363,6 @@
   "instance.settings.tabs.installation.locked": {
     "message": "實例被鎖定時無法使用安裝設定選項。"
   },
-  "instance.settings.tabs.java": {
-    "message": "Java 和記憶體"
-  },
   "instance.settings.tabs.java.custom-environment-variables": {
     "message": "自訂環境變數"
   },
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index abb2c70bff..c088dfb550 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -1330,7 +1330,7 @@ provideBrowseManager({
 </script>
 
 <template>
-	<div class="flex flex-col gap-3 p-6">
+	<div class="flex flex-col gap-2 p-6">
 		<BrowsePageLayout>
 			<template #after>
 				<ContextMenu ref="contextMenuRef" :label="formatMessage(messages.projectActionsLabel)">
diff --git a/apps/app-frontend/src/pages/Screenshots.vue b/apps/app-frontend/src/pages/Screenshots.vue
new file mode 100644
index 0000000000..650acb3faa
--- /dev/null
+++ b/apps/app-frontend/src/pages/Screenshots.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ImagesIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { onActivated } from 'vue'
+
+import ScreenshotsPage from '@/components/ui/screenshots-page/index.vue'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+
+defineOptions({ name: 'ScreenshotsPage' })
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	screenshots: { id: 'app.screenshots.heading', defaultMessage: 'Screenshots' },
+})
+const breadcrumb = useRootBreadcrumb({
+	slot: 'root',
+	id: 'screenshots',
+	label: formatMessage(messages.screenshots),
+	to: '/screenshots',
+	visual: { type: 'icon', component: ImagesIcon },
+})
+onActivated(breadcrumb.reset)
+</script>
+
+<template>
+	<div class="box-border h-full p-6">
+		<ScreenshotsPage show-heading />
+	</div>
+</template>
diff --git a/apps/app-frontend/src/pages/index.js b/apps/app-frontend/src/pages/index.js
index 3c218fa833..ad2bd5f4a5 100644
--- a/apps/app-frontend/src/pages/index.js
+++ b/apps/app-frontend/src/pages/index.js
@@ -1,7 +1,8 @@
 import Browse from './Browse.vue'
 import Index from './Index.vue'
+import Screenshots from './Screenshots.vue'
 import Servers from './Servers.vue'
 import Skins from './Skins.vue'
 import User from './User.vue'
 
-export { Browse, Index, Servers, Skins, User }
+export { Browse, Index, Screenshots, Servers, Skins, User }
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
index 3c01318362..b7f83911cb 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox, defineMessages, injectNotificationManager, Input, useVIntl } from '@modrinth/ui'
+import { defineMessages, injectNotificationManager, Input, Toggle, useVIntl } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/instance'
@@ -7,6 +7,7 @@ import { get } from '@/helpers/settings.ts'
 
 import type { AppSettings } from '../../../../helpers/types'
 import { injectInstanceSettings } from './instance-settings-context'
+import SettingsOptionsTransition from './settings-options-transition.vue'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -15,12 +16,12 @@ const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
-const overrideHooks = ref(
+const hasCustomHooks =
 	!!instance.value.hooks.pre_launch ||
-		!!instance.value.hooks.wrapper ||
-		!!instance.value.hooks.post_exit,
-)
-const hooksRaw = instance.value.hooks ?? globalSettings.hooks
+	!!instance.value.hooks.wrapper ||
+	!!instance.value.hooks.post_exit
+const overrideHooks = ref(hasCustomHooks)
+const hooksRaw = hasCustomHooks ? instance.value.hooks : globalSettings.hooks
 const hooks = ref({
 	pre_launch: hooksRaw.pre_launch ?? '',
 	wrapper: hooksRaw.wrapper ?? '',
@@ -87,10 +88,6 @@ const messages = defineMessages({
 		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
 		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
 	},
-	customHooks: {
-		id: 'instance.settings.tabs.hooks.custom-hooks',
-		defaultMessage: 'Custom launch hooks',
-	},
 	preLaunch: {
 		id: 'instance.settings.tabs.hooks.pre-launch',
 		defaultMessage: 'Pre-launch',
@@ -132,69 +129,72 @@ const messages = defineMessages({
 
 <template>
 	<div>
-		<h2 class="m-0 m-0 text-lg font-semibold text-contrast">
-			{{ formatMessage(messages.hooks) }}
-		</h2>
-		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="my-2.5" />
-		<p class="m-0">
-			{{ formatMessage(messages.hooksDescription) }}
-		</p>
-
-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
-			{{ formatMessage(messages.preLaunch) }}
-		</h2>
-		<Input
-			id="pre-launch"
-			v-model="hooks.pre_launch"
-			autocomplete="off"
-			:disabled="!overrideHooks"
-			:placeholder="formatMessage(messages.preLaunchEnter)"
-			wrapper-class="w-full my-2.5"
-		/>
-		<p class="m-0">
-			{{ formatMessage(messages.preLaunchDescription) }}
-		</p>
-
-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
-			{{ formatMessage(messages.wrapper) }}
-		</h2>
-		<Input
-			id="wrapper"
-			v-model="hooks.wrapper"
-			autocomplete="off"
-			:disabled="!overrideHooks"
-			:placeholder="formatMessage(messages.wrapperEnter)"
-			wrapper-class="w-full my-2.5"
-		/>
-		<p class="m-0">
-			{{ formatMessage(messages.wrapperDescription) }}
-		</p>
-
-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
-			{{ formatMessage(messages.postExit) }}
-		</h2>
-		<Input
-			id="post-exit"
-			v-model="hooks.post_exit"
-			autocomplete="off"
-			:disabled="!overrideHooks"
-			:placeholder="formatMessage(messages.postExitEnter)"
-			wrapper-class="w-full my-2.5"
-		/>
-		<p class="m-0">
-			{{ formatMessage(messages.postExitDescription) }}
-		</p>
-
-		<div class="m-0 mt-6">
-			{{ formatMessage(messages.hookVariablesDescription) }}
+		<div class="flex items-center justify-between gap-4">
+			<div class="flex min-w-0 flex-col gap-1">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.hooks) }}
+				</h2>
+				<p class="m-0">{{ formatMessage(messages.hooksDescription) }}</p>
+			</div>
+			<Toggle id="override-launch-hooks" v-model="overrideHooks" />
 		</div>
-		<ul class="m-0 mt-2">
-			<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
-		</ul>
+
+		<SettingsOptionsTransition :show="overrideHooks">
+			<div class="pt-6">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.preLaunch) }}
+				</h2>
+				<Input
+					id="pre-launch"
+					v-model="hooks.pre_launch"
+					autocomplete="off"
+					:placeholder="formatMessage(messages.preLaunchEnter)"
+					wrapper-class="w-full my-2.5"
+				/>
+				<p class="m-0">
+					{{ formatMessage(messages.preLaunchDescription) }}
+				</p>
+
+				<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.wrapper) }}
+				</h2>
+				<Input
+					id="wrapper"
+					v-model="hooks.wrapper"
+					autocomplete="off"
+					:placeholder="formatMessage(messages.wrapperEnter)"
+					wrapper-class="w-full my-2.5"
+				/>
+				<p class="m-0">
+					{{ formatMessage(messages.wrapperDescription) }}
+				</p>
+
+				<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.postExit) }}
+				</h2>
+				<Input
+					id="post-exit"
+					v-model="hooks.post_exit"
+					autocomplete="off"
+					:placeholder="formatMessage(messages.postExitEnter)"
+					wrapper-class="w-full my-2.5"
+				/>
+				<p class="m-0">
+					{{ formatMessage(messages.postExitDescription) }}
+				</p>
+
+				<div class="m-0 mt-6">
+					{{ formatMessage(messages.hookVariablesDescription) }}
+				</div>
+				<ul class="m-0 mt-2">
+					<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
+					<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
+					<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
+					<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
+					<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
+					<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
+				</ul>
+			</div>
+		</SettingsOptionsTransition>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue
index 98d5823eac..e1598c30de 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue
@@ -1,14 +1,6 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import {
-	ChevronRightIcon,
-	CodeIcon,
-	CoffeeIcon,
-	InfoIcon,
-	MonitorIcon,
-	UsersIcon,
-	WrenchIcon,
-} from '@modrinth/assets'
+import { ChevronRightIcon, InfoIcon, Settings2Icon, UsersIcon, WrenchIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	commonMessages,
@@ -28,12 +20,10 @@ import { get_game_versions, get_loaders } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 
 import GeneralSettings from './general-settings.vue'
-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 SharingSettings from './sharing-settings.vue'
-import WindowSettings from './window-settings.vue'
+import SyncedOptionsSettings from './synced-options-settings.vue'
 
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
@@ -98,6 +88,14 @@ const tabs = computed<TabbedModalTab[]>(() => [
 		icon: WrenchIcon,
 		content: InstallationSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'instance.settings.tabs.settings-overrides',
+			defaultMessage: 'Sync overrides',
+		}),
+		icon: Settings2Icon,
+		content: SyncedOptionsSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.sharing',
@@ -107,30 +105,6 @@ const tabs = computed<TabbedModalTab[]>(() => [
 		content: SharingSettings,
 		shown: props.instance.shared_instance?.role === 'owner' && !props.instance.quarantined,
 	},
-	{
-		name: defineMessage({
-			id: 'instance.settings.tabs.window',
-			defaultMessage: 'Window',
-		}),
-		icon: MonitorIcon,
-		content: WindowSettings,
-	},
-	{
-		name: defineMessage({
-			id: 'instance.settings.tabs.java',
-			defaultMessage: 'Java and memory',
-		}),
-		icon: CoffeeIcon,
-		content: JavaSettings,
-	},
-	{
-		name: defineMessage({
-			id: 'instance.settings.tabs.hooks',
-			defaultMessage: 'Launch hooks',
-		}),
-		icon: CodeIcon,
-		content: HooksSettings,
-	},
 ])
 
 function getSupportedModpackLoaders() {
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
index cfaab9e877..09e1f43b81 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
@@ -10,11 +10,11 @@ import {
 } from '@modrinth/assets'
 import {
 	Button,
-	Checkbox,
 	defineMessages,
 	injectNotificationManager,
 	Input,
 	Slider,
+	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
@@ -28,6 +28,7 @@ import { get, parseEnvVars, serializeEnvVars } from '@/helpers/settings.ts'
 
 import type { AppSettings } from '../../../../helpers/types'
 import { injectInstanceSettings } from './instance-settings-context'
+import SettingsOptionsTransition from './settings-options-transition.vue'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -41,9 +42,7 @@ const optimalJava = readonly(await get_optimal_jre_key(instance.value.id).catch(
 const overrideJavaInstall = ref(!!instance.value.java_path)
 const javaPath = ref(instance.value.java_path ?? optimalJava?.path ?? '')
 
-const activePath = computed(() =>
-	overrideJavaInstall.value ? javaPath.value : (optimalJava?.path ?? ''),
-)
+const activePath = computed(() => (overrideJavaInstall.value ? javaPath.value : ''))
 
 watch(overrideJavaInstall, (enabled) => {
 	if (enabled && !javaPath.value) {
@@ -140,7 +139,7 @@ const messages = defineMessages({
 	},
 	customJavaInstallation: {
 		id: 'instance.settings.tabs.java.custom-java-installation',
-		defaultMessage: 'Custom Java installation',
+		defaultMessage: 'Use a custom Java installation for this instance.',
 	},
 	javaPathPlaceholder: {
 		id: 'instance.settings.tabs.java.java-path-placeholder',
@@ -152,7 +151,7 @@ const messages = defineMessages({
 	},
 	customMemoryAllocation: {
 		id: 'instance.settings.tabs.java.custom-memory-allocation',
-		defaultMessage: 'Custom memory allocation',
+		defaultMessage: 'Use a custom memory allocation for this instance.',
 	},
 	javaArguments: {
 		id: 'instance.settings.tabs.java.java-arguments',
@@ -160,7 +159,7 @@ const messages = defineMessages({
 	},
 	customJavaArguments: {
 		id: 'instance.settings.tabs.java.custom-java-arguments',
-		defaultMessage: 'Custom Java arguments',
+		defaultMessage: 'Use custom Java arguments for this instance.',
 	},
 	enterJavaArguments: {
 		id: 'instance.settings.tabs.java.enter-java-arguments',
@@ -172,7 +171,7 @@ const messages = defineMessages({
 	},
 	customEnvironmentVariables: {
 		id: 'instance.settings.tabs.java.custom-environment-variables',
-		defaultMessage: 'Custom environment variables',
+		defaultMessage: 'Use custom environment variables for this instance.',
 	},
 	enterEnvironmentVariables: {
 		id: 'instance.settings.tabs.java.enter-environment-variables',
@@ -186,144 +185,175 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<div>
+	<div class="flex flex-col gap-6">
 		<JavaDetectionModal ref="javaDetectionModal" @submit="(val) => (javaPath = val.path)" />
-		<h2 class="m-0 mb-2 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaInstallation) }}
-		</h2>
-		<Checkbox
-			v-model="overrideJavaInstall"
-			:label="formatMessage(messages.customJavaInstallation)"
-			class="mb-2"
-		/>
-		<div class="flex gap-4 p-4 bg-bg rounded-2xl">
-			<div class="flex gap-3 items-start flex-1 min-w-0">
-				<div
-					class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 mt-1 shrink-0 [&_svg]:h-full [&_svg]:w-full"
-				>
-					<CoffeeIcon />
+
+		<section class="flex flex-col">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex min-w-0 flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.javaInstallation) }}
+					</h2>
+					<p class="m-0">{{ formatMessage(messages.customJavaInstallation) }}</p>
 				</div>
-				<div class="flex flex-col gap-2 flex-1 min-w-0">
-					<span class="font-semibold leading-none mt-2"
-						>Java {{ optimalJava?.parsed_version }}</span
-					>
-					<div class="flex gap-2 items-center">
-						<Input
-							:model-value="activePath"
-							:disabled="!overrideJavaInstall"
-							autocomplete="off"
-							:placeholder="formatMessage(messages.javaPathPlaceholder)"
-							wrapper-class="flex-1 min-w-0"
-							@update:model-value="(val) => (javaPath = String(val))"
-						/>
-						<Button
-							type="quiet"
-							:color="
-								!hoveringTest && !testingJava
-									? javaTestResult === true
-										? 'green'
-										: 'red'
-									: undefined
-							"
-							:disabled="!overrideJavaInstall || testingJava"
-							:style="{
-								'--legacy-button-color':
-									(!hoveringTest && !testingJava
-										? javaTestResult === true
-											? 'green'
-											: 'red'
-										: 'standard') &&
-									(!hoveringTest && !testingJava
-										? javaTestResult === true
-											? 'green'
-											: 'red'
-										: 'standard') !== 'standard'
-										? `var(--color-${
-												!hoveringTest && !testingJava
+				<Toggle id="override-java-installation" v-model="overrideJavaInstall" />
+			</div>
+			<SettingsOptionsTransition :show="overrideJavaInstall">
+				<div class="pt-3">
+					<div class="flex gap-4 rounded-2xl bg-bg p-4">
+						<div class="flex gap-3 items-start flex-1 min-w-0">
+							<div
+								class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 mt-1 shrink-0 [&_svg]:h-full [&_svg]:w-full"
+							>
+								<CoffeeIcon />
+							</div>
+							<div class="flex flex-col gap-2 flex-1 min-w-0">
+								<span class="font-semibold leading-none mt-2"
+									>Java {{ optimalJava?.parsed_version }}</span
+								>
+								<div class="flex gap-2 items-center">
+									<Input
+										:model-value="activePath"
+										autocomplete="off"
+										:placeholder="formatMessage(messages.javaPathPlaceholder)"
+										wrapper-class="flex-1 min-w-0"
+										@update:model-value="(val) => (javaPath = String(val))"
+									/>
+									<Button
+										type="quiet"
+										:color="
+											!hoveringTest && !testingJava
+												? javaTestResult === true
+													? 'green'
+													: 'red'
+												: undefined
+										"
+										:disabled="testingJava"
+										:style="{
+											'--legacy-button-color':
+												(!hoveringTest && !testingJava
 													? javaTestResult === true
 														? 'green'
 														: 'red'
-													: 'standard'
-											})`
-										: undefined,
-							}"
-							class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
-							@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
-							@mouseenter="overrideJavaInstall && (hoveringTest = true)"
-							@mouseleave="hoveringTest = false"
-						>
-							<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-							<CheckCircleIcon
-								v-else-if="javaTestResult === true && !hoveringTest"
-								class="h-4 w-4"
-							/>
-							<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
-							<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
-						</Button>
-					</div>
-					<div v-if="overrideJavaInstall" class="flex gap-2">
-						<Button @click="handleDetectJava">
-							<SearchIcon />
-							Detect
-						</Button>
-						<Button @click="handleBrowseJava">
-							<FolderSearchIcon />
-							Browse
-						</Button>
+													: 'standard') &&
+												(!hoveringTest && !testingJava
+													? javaTestResult === true
+														? 'green'
+														: 'red'
+													: 'standard') !== 'standard'
+													? `var(--color-${
+															!hoveringTest && !testingJava
+																? javaTestResult === true
+																	? 'green'
+																	: 'red'
+																: 'standard'
+														})`
+													: undefined,
+										}"
+										class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
+										@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
+										@mouseenter="hoveringTest = true"
+										@mouseleave="hoveringTest = false"
+									>
+										<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+										<CheckCircleIcon
+											v-else-if="javaTestResult === true && !hoveringTest"
+											class="h-4 w-4"
+										/>
+										<XCircleIcon
+											v-else-if="javaTestResult !== true && !hoveringTest"
+											class="h-4 w-4"
+										/>
+										<RefreshCwIcon v-else class="h-4 w-4" />
+									</Button>
+								</div>
+								<div class="flex gap-2">
+									<Button @click="handleDetectJava">
+										<SearchIcon />
+										Detect
+									</Button>
+									<Button @click="handleBrowseJava">
+										<FolderSearchIcon />
+										Browse
+									</Button>
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
+			</SettingsOptionsTransition>
+		</section>
+
+		<section class="flex flex-col">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex min-w-0 flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.javaMemory) }}
+					</h2>
+					<p class="m-0">{{ formatMessage(messages.customMemoryAllocation) }}</p>
+				</div>
+				<Toggle id="override-memory-allocation" v-model="overrideMemorySettings" />
 			</div>
-		</div>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaMemory) }}
-		</h2>
-		<Checkbox
-			v-model="overrideMemorySettings"
-			:label="formatMessage(messages.customMemoryAllocation)"
-			class="mb-2"
-		/>
-		<Slider
-			id="max-memory"
-			v-model="memory.maximum"
-			:disabled="!overrideMemorySettings"
-			:min="512"
-			:max="maxMemory"
-			:step="64"
-			:snap-points="snapPoints"
-			:snap-range="512"
-			unit="MB"
-		/>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaArguments) }}
-		</h2>
-		<Checkbox
-			v-model="overrideJavaArgs"
-			:label="formatMessage(messages.customJavaArguments)"
-			class="my-2"
-		/>
-		<Input
-			id="java-args"
-			v-model="javaArgs"
-			autocomplete="off"
-			:disabled="!overrideJavaArgs"
-			:placeholder="formatMessage(messages.enterJavaArguments)"
-			wrapper-class="w-full"
-		/>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaEnvironmentVariables) }}
-		</h2>
-		<Checkbox
-			v-model="overrideEnvVars"
-			:label="formatMessage(messages.customEnvironmentVariables)"
-			class="mb-2"
-		/>
-		<Input
-			id="env-vars"
-			v-model="envVars"
-			autocomplete="off"
-			:disabled="!overrideEnvVars"
-			:placeholder="formatMessage(messages.enterEnvironmentVariables)"
-			wrapper-class="w-full"
-		/>
+			<SettingsOptionsTransition :show="overrideMemorySettings">
+				<div class="pt-3">
+					<Slider
+						id="max-memory"
+						v-model="memory.maximum"
+						:min="512"
+						:max="maxMemory"
+						:step="64"
+						:snap-points="snapPoints"
+						:snap-range="512"
+						unit="MB"
+					/>
+				</div>
+			</SettingsOptionsTransition>
+		</section>
+
+		<section class="flex flex-col">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex min-w-0 flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.javaArguments) }}
+					</h2>
+					<p class="m-0">{{ formatMessage(messages.customJavaArguments) }}</p>
+				</div>
+				<Toggle id="override-java-arguments" v-model="overrideJavaArgs" />
+			</div>
+			<SettingsOptionsTransition :show="overrideJavaArgs">
+				<div class="pt-3">
+					<Input
+						id="java-args"
+						v-model="javaArgs"
+						autocomplete="off"
+						:placeholder="formatMessage(messages.enterJavaArguments)"
+						wrapper-class="w-full"
+					/>
+				</div>
+			</SettingsOptionsTransition>
+		</section>
+
+		<section class="flex flex-col">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex min-w-0 flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.javaEnvironmentVariables) }}
+					</h2>
+					<p class="m-0">{{ formatMessage(messages.customEnvironmentVariables) }}</p>
+				</div>
+				<Toggle id="override-environment-variables" v-model="overrideEnvVars" />
+			</div>
+			<SettingsOptionsTransition :show="overrideEnvVars">
+				<div class="pt-3">
+					<Input
+						id="env-vars"
+						v-model="envVars"
+						autocomplete="off"
+						:placeholder="formatMessage(messages.enterEnvironmentVariables)"
+						wrapper-class="w-full"
+					/>
+				</div>
+			</SettingsOptionsTransition>
+		</section>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/settings-options-transition.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/settings-options-transition.vue
new file mode 100644
index 0000000000..c0044667c2
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/settings-options-transition.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+	show: boolean
+}>()
+</script>
+
+<template>
+	<Transition name="settings-options">
+		<div v-if="show" class="settings-options" :inert="!show">
+			<div>
+				<slot />
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+.settings-options {
+	display: grid;
+	grid-template-rows: 1fr;
+}
+
+.settings-options-enter-active,
+.settings-options-leave-active {
+	transition:
+		grid-template-rows 0.25s var(--ease-out-expo),
+		opacity 0.2s ease-out;
+}
+
+.settings-options-enter-from,
+.settings-options-leave-to {
+	grid-template-rows: 0fr;
+	opacity: 0;
+}
+
+.settings-options > div {
+	min-height: 0;
+}
+
+.settings-options-enter-active > div,
+.settings-options-leave-active > div {
+	overflow: hidden;
+}
+
+@media (prefers-reduced-motion) {
+	.settings-options-enter-active,
+	.settings-options-leave-active {
+		transition: none;
+	}
+}
+</style>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
new file mode 100644
index 0000000000..f4458d87bc
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import {
+	EditIcon,
+	RefreshCwIcon,
+	RotateCounterClockwiseIcon,
+	SpinnerIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	NewModal,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, inject, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import {
+	get_synced_option_join_preview,
+	get_synced_options_overview,
+	set_synced_option,
+	type SyncedOption,
+	type SyncedOptionJoinResolution,
+} from '@/helpers/instance'
+import type { GameInstance } from '@/helpers/types'
+import { appSettingsModalOpenSyncedOptionsKey } from '@/providers/app-settings-modal'
+
+import { instanceKeys, screenshotKeys } from '../../query-options'
+import HooksSettings from './hooks-settings.vue'
+import { injectInstanceSettings } from './instance-settings-context'
+import JavaSettings from './java-settings.vue'
+import WindowSettings from './window-settings.vue'
+
+const { instance, closeModal } = injectInstanceSettings()
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()
+const route = useRoute()
+const router = useRouter()
+const openAppSettingsSyncedOptions = inject(appSettingsModalOpenSyncedOptionsKey, () => {})
+
+const messages = defineMessages({
+	sharedSettingsDescription: {
+		id: 'instance.settings.tabs.synced-options.shared-settings.description',
+		defaultMessage:
+			'Game settings can be shared between instances. Choose what to share in app settings.',
+	},
+	openSyncedOptions: {
+		id: 'instance.settings.tabs.synced-options.open-app-settings',
+		defaultMessage: 'Open synced settings',
+	},
+	multiplayerServers: {
+		id: 'instance.settings.tabs.synced-options.multiplayer-servers',
+		defaultMessage: 'Multiplayer servers',
+	},
+	multiplayerServersDescription: {
+		id: 'instance.settings.tabs.synced-options.multiplayer-servers.exclude-description',
+		defaultMessage: 'Exclude this instance from multiplayer server syncing.',
+	},
+	multiplayerServersDisabled: {
+		id: 'instance.settings.tabs.synced-options.multiplayer-servers.disabled-in-app',
+		defaultMessage: 'Multiplayer server syncing is turned off in app settings.',
+	},
+	commandHistory: {
+		id: 'instance.settings.tabs.synced-options.command-history',
+		defaultMessage: 'Command history',
+	},
+	commandHistoryDescription: {
+		id: 'instance.settings.tabs.synced-options.command-history.exclude-description',
+		defaultMessage: 'Exclude this instance from command history syncing.',
+	},
+	commandHistoryDisabled: {
+		id: 'instance.settings.tabs.synced-options.command-history.disabled-in-app',
+		defaultMessage: 'Command history syncing is turned off in app settings.',
+	},
+	creativeHotbars: {
+		id: 'instance.settings.tabs.synced-options.creative-hotbars',
+		defaultMessage: 'Saved creative hotbars',
+	},
+	creativeHotbarsDescription: {
+		id: 'instance.settings.tabs.synced-options.creative-hotbars.exclude-description',
+		defaultMessage: 'Exclude this instance from saved creative hotbar syncing.',
+	},
+	creativeHotbarsDisabled: {
+		id: 'instance.settings.tabs.synced-options.creative-hotbars.disabled-in-app',
+		defaultMessage: 'Saved creative hotbar syncing is turned off in app settings.',
+	},
+	screenshots: {
+		id: 'instance.settings.tabs.synced-options.screenshots',
+		defaultMessage: 'Screenshots',
+	},
+	screenshotsDescription: {
+		id: 'instance.settings.tabs.synced-options.screenshots.exclude-description',
+		defaultMessage: 'Exclude this instance’s screenshots from the Screenshots page.',
+	},
+	screenshotsDisabled: {
+		id: 'instance.settings.tabs.synced-options.screenshots.disabled-in-app',
+		defaultMessage: 'Screenshots are turned off in app settings.',
+	},
+	hotbarConflictTitle: {
+		id: 'instance.settings.tabs.synced-options.hotbars-conflict.title',
+		defaultMessage: 'Choose creative hotbars',
+	},
+	hotbarConflictDescription: {
+		id: 'instance.settings.tabs.synced-options.hotbars-conflict.description',
+		defaultMessage:
+			'{instance} and your synced version have different creative hotbars. Choose which one to use across your instances.',
+	},
+	hotbarBackupDescription: {
+		id: 'instance.settings.tabs.synced-options.hotbars-conflict.backup-description',
+		defaultMessage: 'The version being replaced will be backed up before anything changes.',
+	},
+	useSyncedHotbars: {
+		id: 'instance.settings.tabs.synced-options.hotbars-conflict.use-synced',
+		defaultMessage: 'Use synced',
+	},
+	useInstanceHotbars: {
+		id: 'instance.settings.tabs.synced-options.hotbars-conflict.use-instance',
+		defaultMessage: 'Overwrite others',
+	},
+})
+
+const globalDisabledMessages: Record<SyncedOption, keyof typeof messages> = {
+	multiplayer_servers: 'multiplayerServersDisabled',
+	command_history: 'commandHistoryDisabled',
+	creative_hotbars: 'creativeHotbarsDisabled',
+	screenshots: 'screenshotsDisabled',
+}
+
+const rows: Array<{
+	option: SyncedOption
+	title: keyof typeof messages
+	description?: keyof typeof messages
+}> = [
+	{
+		option: 'multiplayer_servers',
+		title: 'multiplayerServers',
+		description: 'multiplayerServersDescription',
+	},
+	{
+		option: 'command_history',
+		title: 'commandHistory',
+		description: 'commandHistoryDescription',
+	},
+	{
+		option: 'creative_hotbars',
+		title: 'creativeHotbars',
+		description: 'creativeHotbarsDescription',
+	},
+	{
+		option: 'screenshots',
+		title: 'screenshots',
+		description: 'screenshotsDescription',
+	},
+]
+
+const overviewQuery = useQuery(
+	computed(() => ({
+		queryKey: ['instance-synced-options', instance.value.id],
+		queryFn: () => get_synced_options_overview(instance.value.id),
+	})),
+)
+
+const capabilities = computed(
+	() =>
+		new Map(
+			overviewQuery.data.value?.capabilities.map((capability) => [capability.option, capability]) ??
+				[],
+		),
+)
+const hotbarResolutionModal = ref<InstanceType<typeof NewModal> | null>(null)
+const previewingOption = ref<SyncedOption | null>(null)
+
+function excluded(option: SyncedOption): boolean {
+	return (
+		overviewQuery.data.value?.global_options[option] === true &&
+		!instance.value.synced_options[option]
+	)
+}
+
+function disabledReason(option: SyncedOption): string | undefined {
+	if (overviewQuery.data.value?.global_options[option] === false) {
+		return formatMessage(messages[globalDisabledMessages[option]])
+	}
+	return capabilities.value.get(option)?.disabled_reason ?? undefined
+}
+
+function showAppSyncedOptions(): void {
+	closeModal?.()
+	openAppSettingsSyncedOptions()
+}
+
+const mutation = useMutation({
+	mutationFn: ({
+		option,
+		enabled,
+		resolution,
+	}: {
+		option: SyncedOption
+		enabled: boolean
+		resolution?: SyncedOptionJoinResolution
+	}) => set_synced_option(instance.value.id, option, enabled, resolution),
+	onSuccess: async (updatedInstance, variables) => {
+		hotbarResolutionModal.value?.hide()
+		queryClient.setQueryData(instanceKeys.detail(updatedInstance.id), updatedInstance)
+		queryClient.setQueryData<GameInstance[]>(instanceKeys.list(), (instances) =>
+			instances?.map((candidate) =>
+				candidate.id === updatedInstance.id ? updatedInstance : candidate,
+			),
+		)
+		await queryClient.invalidateQueries({
+			queryKey: ['instance-synced-options', updatedInstance.id],
+		})
+		if (variables.option === 'multiplayer_servers') {
+			await queryClient.invalidateQueries({
+				queryKey: instanceKeys.worlds(updatedInstance.id),
+			})
+		}
+
+		if (variables.option === 'screenshots') {
+			await queryClient.invalidateQueries({ queryKey: screenshotKeys.all })
+			if (updatedInstance.synced_options.screenshots && route.name === 'InstanceScreenshots') {
+				await router.replace(`/instance/${encodeURIComponent(updatedInstance.id)}`)
+			} else if (!updatedInstance.synced_options.screenshots && route.name === 'Screenshots') {
+				await router.replace('/')
+			}
+		}
+	},
+	onError: handleError,
+})
+
+async function setExcluded(option: SyncedOption, nextExcluded: boolean) {
+	const enabled = !nextExcluded
+	if (!enabled || option !== 'creative_hotbars') {
+		mutation.mutate({ option, enabled })
+		return
+	}
+
+	previewingOption.value = option
+	try {
+		const preview = await get_synced_option_join_preview(instance.value.id, option)
+		if (preview.action === 'requires_resolution') {
+			hotbarResolutionModal.value?.show()
+		} else {
+			mutation.mutate({ option, enabled })
+		}
+	} catch (error) {
+		handleError(error)
+	} finally {
+		previewingOption.value = null
+	}
+}
+
+function resolveHotbars(resolution: SyncedOptionJoinResolution) {
+	mutation.mutate({
+		option: 'creative_hotbars',
+		enabled: true,
+		resolution,
+	})
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-6">
+		<NewModal
+			ref="hotbarResolutionModal"
+			:header="formatMessage(messages.hotbarConflictTitle)"
+			fade="warning"
+			max-width="560px"
+		>
+			<div class="flex flex-col gap-3 text-primary">
+				<p class="m-0">
+					{{
+						formatMessage(messages.hotbarConflictDescription, {
+							instance: instance.name,
+						})
+					}}
+				</p>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.hotbarBackupDescription) }}
+				</p>
+			</div>
+			<template #actions>
+				<div class="flex flex-wrap justify-end gap-2">
+					<Button
+						type="outlined"
+						:disabled="mutation.isPending.value"
+						@click="hotbarResolutionModal?.hide()"
+					>
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="orange"
+						:disabled="mutation.isPending.value"
+						@click="resolveHotbars('use_instance')"
+					>
+						<EditIcon aria-hidden="true" />
+						{{ formatMessage(messages.useInstanceHotbars) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="mutation.isPending.value"
+						@click="resolveHotbars('use_synced')"
+					>
+						<RotateCounterClockwiseIcon aria-hidden="true" />
+						{{ formatMessage(messages.useSyncedHotbars) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
+		<div class="flex items-center justify-between gap-4">
+			<p class="m-0 text-secondary">
+				{{ formatMessage(messages.sharedSettingsDescription) }}
+			</p>
+			<Button class="shrink-0" @click="showAppSyncedOptions">
+				<RefreshCwIcon />
+				{{ formatMessage(messages.openSyncedOptions) }}
+			</Button>
+		</div>
+
+		<div class="flex flex-col gap-4">
+			<div v-for="row in rows" :key="row.option" class="flex items-center justify-between gap-6">
+				<div class="flex min-w-0 flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages[row.title]) }}
+					</h2>
+					<p v-if="row.description" class="m-0 text-secondary">
+						{{ formatMessage(messages[row.description]) }}
+					</p>
+				</div>
+				<div class="flex shrink-0 items-center gap-2">
+					<SpinnerIcon
+						v-if="
+							(mutation.isPending.value && mutation.variables.value?.option === row.option) ||
+							previewingOption === row.option
+						"
+						class="size-5 animate-spin"
+					/>
+					<span v-tooltip="disabledReason(row.option)" class="flex">
+						<Toggle
+							:id="`exclude-${row.option}`"
+							:model-value="excluded(row.option)"
+							:disabled="
+								mutation.isPending.value ||
+								previewingOption !== null ||
+								overviewQuery.isPending.value ||
+								!!disabledReason(row.option)
+							"
+							@update:model-value="(excluded) => setExcluded(row.option, excluded)"
+						/>
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<hr class="m-0 h-px border-none bg-button-border" />
+
+		<WindowSettings />
+
+		<hr class="m-0 h-px border-none bg-button-border" />
+
+		<JavaSettings />
+
+		<hr class="m-0 h-px border-none bg-button-border" />
+
+		<HooksSettings />
+	</div>
+</template>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
index f1a8890596..0965160794 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-	Checkbox,
-	defineMessages,
-	injectNotificationManager,
-	Input,
-	Toggle,
-	useVIntl,
-} from '@modrinth/ui'
+import { defineMessages, injectNotificationManager, Input, Toggle, useVIntl } from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/instance'
@@ -14,6 +7,7 @@ import { get } from '@/helpers/settings.ts'
 
 import type { AppSettings } from '../../../../helpers/types'
 import { injectInstanceSettings } from './instance-settings-context'
+import SettingsOptionsTransition from './settings-options-transition.vue'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -54,9 +48,13 @@ watch(
 )
 
 const messages = defineMessages({
+	window: {
+		id: 'instance.settings.tabs.window',
+		defaultMessage: 'Window',
+	},
 	customWindowSettings: {
 		id: 'instance.settings.tabs.window.custom-window-settings',
-		defaultMessage: 'Custom window settings',
+		defaultMessage: 'Use custom window settings for this instance.',
 	},
 	fullscreen: {
 		id: 'instance.settings.tabs.window.fullscreen',
@@ -94,68 +92,68 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<div class="flex flex-col gap-6">
-		<Checkbox
-			v-model="overrideWindowSettings"
-			:label="formatMessage(messages.customWindowSettings)"
-		/>
-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
+	<div class="flex flex-col">
+		<div class="flex items-center justify-between gap-4">
+			<div class="flex min-w-0 flex-col gap-1">
 				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.fullscreen) }}
+					{{ formatMessage(messages.window) }}
 				</h2>
-				<p class="m-0">
-					{{ formatMessage(messages.fullscreenDescription) }}
-				</p>
+				<p class="m-0">{{ formatMessage(messages.customWindowSettings) }}</p>
 			</div>
-			<Toggle
-				id="fullscreen"
-				:model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
-				:disabled="!overrideWindowSettings"
-				@update:model-value="
-					(e) => {
-						fullscreenSetting = e
-					}
-				"
-			/>
+			<Toggle id="override-window-settings" v-model="overrideWindowSettings" />
 		</div>
+		<SettingsOptionsTransition :show="overrideWindowSettings">
+			<div class="flex flex-col gap-6 pt-6">
+				<div class="flex items-center gap-4 justify-between">
+					<div class="flex flex-col gap-1">
+						<h2 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.fullscreen) }}
+						</h2>
+						<p class="m-0">
+							{{ formatMessage(messages.fullscreenDescription) }}
+						</p>
+					</div>
+					<Toggle id="fullscreen" v-model="fullscreenSetting" />
+				</div>
 
-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.width) }}
-				</h2>
-				<p class="m-0">
-					{{ formatMessage(messages.widthDescription) }}
-				</p>
-			</div>
-			<Input
-				id="width"
-				v-model="resolution[0]"
-				autocomplete="off"
-				:disabled="!overrideWindowSettings || fullscreenSetting"
-				type="number"
-				:placeholder="formatMessage(messages.enterWidth)"
-			/>
-		</div>
+				<div class="flex items-center gap-4 justify-between">
+					<div class="flex flex-col gap-1">
+						<h2 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.width) }}
+						</h2>
+						<p class="m-0">
+							{{ formatMessage(messages.widthDescription) }}
+						</p>
+					</div>
+					<Input
+						id="width"
+						v-model="resolution[0]"
+						autocomplete="off"
+						:disabled="fullscreenSetting"
+						type="number"
+						:placeholder="formatMessage(messages.enterWidth)"
+					/>
+				</div>
 
-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.height) }}
-				</h2>
-				<p class="m-0">
-					{{ formatMessage(messages.heightDescription) }}
-				</p>
+				<div class="flex items-center gap-4 justify-between">
+					<div class="flex flex-col gap-1">
+						<h2 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.height) }}
+						</h2>
+						<p class="m-0">
+							{{ formatMessage(messages.heightDescription) }}
+						</p>
+					</div>
+					<Input
+						id="height"
+						v-model="resolution[1]"
+						autocomplete="off"
+						:disabled="fullscreenSetting"
+						type="number"
+						:placeholder="formatMessage(messages.enterHeight)"
+					/>
+				</div>
 			</div>
-			<Input
-				id="height"
-				v-model="resolution[1]"
-				autocomplete="off"
-				:disabled="!overrideWindowSettings || fullscreenSetting"
-				type="number"
-				:placeholder="formatMessage(messages.enterHeight)"
-			/>
-		</div>
+		</SettingsOptionsTransition>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/index.ts b/apps/app-frontend/src/pages/instance/index.ts
index a4cfdec8da..18a6ea53b7 100644
--- a/apps/app-frontend/src/pages/instance/index.ts
+++ b/apps/app-frontend/src/pages/instance/index.ts
@@ -2,7 +2,8 @@ import Content from './content/index.vue'
 import Files from './files/index.vue'
 import Index from './layout.vue'
 import Logs from './logs/index.vue'
+import Screenshots from './screenshots/index.vue'
 import Share from './share/index.vue'
 import Worlds from './worlds/index.vue'
 
-export { Content, Files, Index, Logs, Share, Worlds }
+export { Content, Files, Index, Logs, Screenshots, Share, Worlds }
diff --git a/apps/app-frontend/src/pages/instance/layout.vue b/apps/app-frontend/src/pages/instance/layout.vue
index 571af0d3a5..6ece98f1f7 100644
--- a/apps/app-frontend/src/pages/instance/layout.vue
+++ b/apps/app-frontend/src/pages/instance/layout.vue
@@ -92,6 +92,7 @@ import {
 	EditIcon,
 	FolderOpenIcon,
 	GlobeIcon,
+	ImagesIcon,
 	PlayIcon,
 	PlusIcon,
 	StopCircleIcon,
@@ -139,6 +140,7 @@ import {
 } from '@/helpers/install'
 import {
 	get_full_path,
+	get_global_synced_options,
 	getInstanceIconUrl,
 	kill,
 	refresh_content_updates,
@@ -187,6 +189,7 @@ const messages = defineMessages({
 	},
 	contentTab: { id: 'app.instance.tab.content', defaultMessage: 'Content' },
 	filesTab: { id: 'app.instance.tab.files', defaultMessage: 'Files' },
+	screenshotsTab: { id: 'app.instance.tab.screenshots', defaultMessage: 'Screenshots' },
 	worldsTab: { id: 'app.instance.tab.worlds', defaultMessage: 'Worlds' },
 	logsTab: { id: 'app.instance.tab.logs', defaultMessage: 'Logs' },
 	shareTab: { id: 'app.instance.tab.share', defaultMessage: 'Share' },
@@ -230,6 +233,10 @@ useQuery(
 	})),
 )
 const instance = computed(() => instanceQuery.data.value)
+const globalSyncedOptionsQuery = useQuery({
+	queryKey: ['global-synced-options'],
+	queryFn: get_global_synced_options,
+})
 useQuery(
 	computed(() => ({
 		queryKey: instanceKeys.contentUpdateCheck(instanceId.value),
@@ -495,6 +502,17 @@ const tabs = computed(() => {
 		},
 	]
 
+	const screenshotsSynced =
+		globalSyncedOptionsQuery.data.value?.screenshots === true &&
+		instance.value?.synced_options.screenshots === true
+	if (!screenshotsSynced) {
+		instanceTabs.splice(2, 0, {
+			label: formatMessage(messages.screenshotsTab),
+			href: `${basePath.value}/screenshots`,
+			icon: ImagesIcon,
+		})
+	}
+
 	if (showShareTab.value) {
 		instanceTabs.push({
 			label: formatMessage(messages.shareTab),
diff --git a/apps/app-frontend/src/pages/instance/query-options.ts b/apps/app-frontend/src/pages/instance/query-options.ts
index 6848ccb7ac..72d9ddabaa 100644
--- a/apps/app-frontend/src/pages/instance/query-options.ts
+++ b/apps/app-frontend/src/pages/instance/query-options.ts
@@ -1,13 +1,20 @@
 import { queryOptions } from '@tanstack/vue-query'
 
 import { get_project_v3 } from '@/helpers/cache.js'
-import { get as getInstance } from '@/helpers/instance'
+import {
+	get as getInstance,
+	list as listInstances,
+	list_instance_screenshots,
+	list_screenshot_groups,
+	list_synced_screenshots,
+} from '@/helpers/instance'
 import { loadInstanceContentData } from '@/helpers/instance-content'
 import { get_by_instance_id } from '@/helpers/process'
 import { refreshWorlds } from '@/helpers/worlds'
 
 export const instanceKeys = {
 	all: ['instances'] as const,
+	list: () => [...instanceKeys.all, 'list'] as const,
 	detail: (instanceId: string) => [...instanceKeys.all, 'summary', instanceId] as const,
 	processes: (instanceId: string) => [...instanceKeys.all, 'processes', instanceId] as const,
 	content: (instanceId: string) => [...instanceKeys.all, 'content', instanceId] as const,
@@ -30,6 +37,45 @@ export const instanceKeys = {
 	sharedMembers: (instanceId: string) => ['sharedInstanceUsers', instanceId] as const,
 }
 
+export const screenshotKeys = {
+	all: ['screenshots'] as const,
+	global: () => [...screenshotKeys.all, 'global'] as const,
+	instance: (instanceId: string) => [...screenshotKeys.all, 'instance', instanceId] as const,
+	groups: () => [...screenshotKeys.all, 'groups'] as const,
+}
+
+export function instanceListQueryOptions() {
+	return queryOptions({
+		queryKey: instanceKeys.list(),
+		queryFn: listInstances,
+		staleTime: 30_000,
+	})
+}
+
+export function syncedScreenshotsQueryOptions() {
+	return queryOptions({
+		queryKey: screenshotKeys.global(),
+		queryFn: list_synced_screenshots,
+		staleTime: 0,
+	})
+}
+
+export function instanceScreenshotsQueryOptions(instanceId: string) {
+	return queryOptions({
+		queryKey: screenshotKeys.instance(instanceId),
+		queryFn: () => list_instance_screenshots(instanceId),
+		staleTime: 0,
+	})
+}
+
+export function screenshotGroupsQueryOptions() {
+	return queryOptions({
+		queryKey: screenshotKeys.groups(),
+		queryFn: list_screenshot_groups,
+		staleTime: 0,
+	})
+}
+
 export function instanceDetailQueryOptions(instanceId: string) {
 	return queryOptions({
 		queryKey: instanceKeys.detail(instanceId),
diff --git a/apps/app-frontend/src/pages/instance/screenshots/index.vue b/apps/app-frontend/src/pages/instance/screenshots/index.vue
new file mode 100644
index 0000000000..b2d1a0fbe7
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/screenshots/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ScreenshotsPage from '@/components/ui/screenshots-page/index.vue'
+
+import { injectInstancePage } from '../instance-context'
+
+const instancePage = injectInstancePage()
+</script>
+
+<template>
+	<ScreenshotsPage :instance-id="instancePage.instanceId.value" />
+</template>
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
index 8c0c4126c3..35d81cabc0 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col gap-4">
-		<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-2">
 			<div class="flex items-center gap-2">
 				<Input
 					v-model="search"
diff --git a/apps/app-frontend/src/pages/instance/worlds/index.vue b/apps/app-frontend/src/pages/instance/worlds/index.vue
index 18cd38b8cd..3d28bd9ce5 100644
--- a/apps/app-frontend/src/pages/instance/worlds/index.vue
+++ b/apps/app-frontend/src/pages/instance/worlds/index.vue
@@ -16,10 +16,12 @@
 	<ConfirmRemoveWorldModal
 		ref="removeWorldModal"
 		:world="worldToRemove"
+		:other-synced-instance-count="otherSyncedInstanceCount"
 		@confirm="proceedRemoveWorld"
 	/>
+	<DesyncServerModal ref="desyncServerModal" @confirm="confirmDesyncServer" />
 	<ReadyTransition :pending="worldsReadyPending">
-		<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-4">
+		<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-2">
 			<div class="flex flex-wrap items-center gap-2">
 				<Input
 					v-model="searchFilter"
@@ -75,7 +77,7 @@
 					}}
 				</Button>
 			</div>
-			<div class="flex flex-col w-full gap-2">
+			<div class="mt-2 flex w-full flex-col gap-2">
 				<WorldItem
 					v-for="world in filteredWorlds"
 					:key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
@@ -108,6 +110,7 @@
 									: editServerModal?.show(world)
 					"
 					@delete="() => !isManagedServerWorld(world) && promptToRemoveWorld(world)"
+					@desync="() => world.type === 'server' && desyncServerModal?.show(world as ServerWorld)"
 					@open-folder="(world: SingleplayerWorld) => showWorldInFolder(instance.id, world.path)"
 				/>
 			</div>
@@ -153,6 +156,7 @@ import { useRoute } from 'vue-router'
 
 import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
 import ConfirmRemoveWorldModal from '@/components/ui/world/modal/ConfirmRemoveWorldModal.vue'
+import DesyncServerModal from '@/components/ui/world/modal/DesyncServerModal.vue'
 import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
 import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
@@ -164,8 +168,9 @@ import { get_game_versions } from '@/helpers/tags'
 import { ensureManagedServerWorldExists, getServerAddress } from '@/helpers/worlds'
 import {
 	delete_world,
+	desync_server,
+	type DesyncServerMode,
 	get_instance_protocol_version,
-	getServerDomainKey,
 	getWorldIdentifier,
 	handleDefaultInstanceUpdateEvent,
 	hasServerQuickPlaySupport,
@@ -189,7 +194,11 @@ import {
 import { injectServerInstall } from '@/providers/server-install'
 
 import { injectInstancePage } from '../instance-context'
-import { instanceKeys, instanceWorldsQueryOptions } from '../query-options'
+import {
+	instanceKeys,
+	instanceListQueryOptions,
+	instanceWorldsQueryOptions,
+} from '../query-options'
 
 const messages = defineMessages({
 	searchWorldsPlaceholder: {
@@ -244,6 +253,7 @@ const addServerModal = ref<InstanceType<typeof AddServerModal>>()
 const editServerModal = ref<InstanceType<typeof EditServerModal>>()
 const editWorldModal = ref<InstanceType<typeof EditWorldModal>>()
 const removeWorldModal = ref<InstanceType<typeof ConfirmRemoveWorldModal>>()
+const desyncServerModal = ref<InstanceType<typeof DesyncServerModal>>()
 
 const worldToRemove = ref<World | null>(null)
 
@@ -283,6 +293,15 @@ function toggleFilter(id: string) {
 
 const queryClient = useQueryClient()
 
+const instanceListQuery = useQuery(instanceListQueryOptions())
+const otherSyncedInstanceCount = computed(
+	() =>
+		instanceListQuery.data.value?.filter(
+			(candidate) =>
+				candidate.id !== instance.value.id && candidate.synced_options.multiplayer_servers,
+		).length ?? 0,
+)
+
 const refreshingAll = ref(false)
 const hadNoWorlds = ref(true)
 const startingInstance = ref(false)
@@ -507,6 +526,12 @@ async function removeServer(server: ServerWorld) {
 	}
 }
 
+async function confirmDesyncServer(server: ServerWorld, mode: DesyncServerMode) {
+	if (!server.server_id) return
+	await desync_server(instance.value.id, server.server_id, mode).catch(handleError)
+	await refreshAllWorlds()
+}
+
 async function editWorld(path: string, name: string, removeIcon: boolean) {
 	const world = worlds.value.find((world) => world.type === 'singleplayer' && world.path === path)
 	if (world) {
@@ -590,7 +615,7 @@ function worldsMatch(world: World, other: World | undefined) {
 
 const dedupedWorlds = computed(() => {
 	const visibleWorlds: World[] = []
-	const serverIndexByDomain = new Map<string, number>()
+	const serverIndexByAddress = new Map<string, number>()
 
 	for (const world of worlds.value) {
 		if (world.type !== 'server') {
@@ -598,14 +623,11 @@ const dedupedWorlds = computed(() => {
 			continue
 		}
 
-		const domainKey =
-			getServerDomainKey(world.address) ||
-			normalizeServerAddress(world.address) ||
-			`server-${world.index}`
-		const existingIndex = serverIndexByDomain.get(domainKey)
+		const addressKey = normalizeServerAddress(world.address) || `server-${world.index}`
+		const existingIndex = serverIndexByAddress.get(addressKey)
 
 		if (existingIndex == null) {
-			serverIndexByDomain.set(domainKey, visibleWorlds.length)
+			serverIndexByAddress.set(addressKey, visibleWorlds.length)
 			visibleWorlds.push(world)
 			continue
 		}
diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index 5d4446b3cd..ac6a31c2d5 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -14,88 +14,31 @@
 			</span>
 		</Card>
 	</div>
-	<Teleport to="#teleports">
-		<div v-if="expandedGalleryItem" class="expanded-image-modal" @click="hideImage">
-			<div class="content">
-				<img
-					class="image"
-					:class="{ 'zoomed-in': zoomedIn }"
-					:src="
-						expandedGalleryItem.raw_url
-							? expandedGalleryItem.raw_url
-							: 'https://cdn.modrinth.com/placeholder-banner.svg'
-					"
-					:alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-					@click.stop="() => {}"
-				/>
-
-				<div class="floating" @click.stop="() => {}">
-					<div class="text">
-						<h2 v-if="expandedGalleryItem.title">
-							{{ expandedGalleryItem.title }}
-						</h2>
-						<p v-if="expandedGalleryItem.description">
-							{{ expandedGalleryItem.description }}
-						</p>
-					</div>
-					<div class="controls">
-						<div class="buttons">
-							<IconButton label="Close" class="close" @click="hideImage">
-								<XIcon aria-hidden="true" />
-							</IconButton>
-							<ButtonLink
-								class="open btn icon-only !w-9 !px-0 !rounded-full"
-								target="_blank"
-								:href="
-									expandedGalleryItem.raw_url
-										? expandedGalleryItem.raw_url
-										: 'https://cdn.modrinth.com/placeholder-banner.svg'
-								"
-							>
-								<ExternalIcon aria-hidden="true" />
-							</ButtonLink>
-							<IconButton label="Toggle zoom" @click="zoomedIn = !zoomedIn">
-								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-								<ContractIcon v-else aria-hidden="true" />
-							</IconButton>
-							<IconButton
-								v-if="filteredGallery.length > 1"
-								label="Previous image"
-								class="previous"
-								@click="previousImage()"
-							>
-								<LeftArrowIcon aria-hidden="true" />
-							</IconButton>
-							<IconButton
-								v-if="filteredGallery.length > 1"
-								label="Next image"
-								class="next"
-								@click="nextImage()"
-							>
-								<RightArrowIcon aria-hidden="true" />
-							</IconButton>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</Teleport>
+	<ImageViewerEditor
+		ref="galleryViewer"
+		:items="galleryViewerItems"
+		editor="disabled"
+		@navigate="trackGalleryNavigation"
+	>
+		<template #actions="{ item }">
+			<Button
+				type="quiet"
+				class="!w-9 !rounded-full !p-0"
+				aria-label="Open image in new tab"
+				@click="openUrl(item.src)"
+			>
+				<ExternalIcon aria-hidden="true" />
+			</Button>
+		</template>
+	</ImageViewerEditor>
 </template>
 
 <script setup>
-import {
-	CalendarIcon,
-	ContractIcon,
-	ExpandIcon,
-	ExternalIcon,
-	LeftArrowIcon,
-	RightArrowIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { ButtonLink, Card, IconButton, useFormatDateTime } from '@modrinth/ui'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { CalendarIcon, ExternalIcon } from '@modrinth/assets'
+import { Button, Card, ImageViewerEditor, useFormatDateTime } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { computed, ref } from 'vue'
 
-import { release_ads_window_hold, take_ads_window_hold } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
 
 const MC_SERVER_BANNER_NAME = '__mc_server_banner__'
@@ -117,84 +60,31 @@ const filteredGallery = computed(
 	() => props.project.gallery?.filter((img) => img.title !== MC_SERVER_BANNER_NAME) ?? [],
 )
 
-const expandedGalleryItem = ref(null)
-const expandedGalleryIndex = ref(0)
-const zoomedIn = ref(false)
-let adsWindowHold = false
-
-const hideImage = () => {
-	expandedGalleryItem.value = null
-	if (adsWindowHold) {
-		adsWindowHold = false
-		release_ads_window_hold()
-	}
-}
-
-const nextImage = () => {
-	expandedGalleryIndex.value++
-	if (expandedGalleryIndex.value >= filteredGallery.value.length) {
-		expandedGalleryIndex.value = 0
-	}
-	expandedGalleryItem.value = filteredGallery.value[expandedGalleryIndex.value]
-	trackEvent('GalleryImageNext', {
-		project_id: props.project.id,
-		url: expandedGalleryItem.value.url,
-	})
-}
-
-const previousImage = () => {
-	expandedGalleryIndex.value--
-	if (expandedGalleryIndex.value < 0) {
-		expandedGalleryIndex.value = filteredGallery.value.length - 1
-	}
-	expandedGalleryItem.value = filteredGallery.value[expandedGalleryIndex.value]
-	trackEvent('GalleryImagePrevious', {
-		project_id: props.project.id,
-		url: expandedGalleryItem.value,
-	})
-}
+const galleryViewer = ref()
+const galleryViewerItems = computed(() =>
+	filteredGallery.value.map((image) => ({
+		id: image.url,
+		src: image.raw_url ?? 'https://cdn.modrinth.com/placeholder-banner.svg',
+		alt: image.title || 'Gallery image',
+		title: image.title,
+		description: image.description,
+	})),
+)
 
 const expandImage = (item, index) => {
-	if (!adsWindowHold) {
-		adsWindowHold = true
-		take_ads_window_hold()
-	}
-	expandedGalleryItem.value = item
-	expandedGalleryIndex.value = index
-	zoomedIn.value = false
-
+	galleryViewer.value?.show(index)
 	trackEvent('GalleryImageExpand', {
 		project_id: props.project.id,
 		url: item.url,
 	})
 }
 
-function keyListener(e) {
-	if (expandedGalleryItem.value) {
-		if (e.key === 'Escape') {
-			e.preventDefault()
-			hideImage()
-		} else if (e.key === 'ArrowLeft') {
-			e.preventDefault()
-			previousImage()
-		} else if (e.key === 'ArrowRight') {
-			e.preventDefault()
-			nextImage()
-		}
-	}
+function trackGalleryNavigation(item, _index, direction) {
+	trackEvent(direction === 'next' ? 'GalleryImageNext' : 'GalleryImagePrevious', {
+		project_id: props.project.id,
+		url: item.id,
+	})
 }
-
-onMounted(() => {
-	document.addEventListener('keydown', keyListener)
-})
-
-onUnmounted(() => {
-	document.removeEventListener('keydown', keyListener)
-	if (adsWindowHold) {
-		adsWindowHold = false
-		release_ads_window_hold()
-	}
-})
 </script>
 
 <style scoped lang="scss">
@@ -229,140 +119,4 @@ onUnmounted(() => {
 		vertical-align: center;
 	}
 }
-
-.expanded-image-modal {
-	position: fixed;
-	z-index: 11;
-	overflow: auto;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #000000;
-	background-color: rgba(0, 0, 0, 0.7);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	.content {
-		position: relative;
-		width: calc(100vw - 2 * var(--gap-lg));
-		height: calc(100vh - 2 * var(--gap-lg));
-
-		.circle-button {
-			padding: 0.5rem;
-			line-height: 1;
-			display: flex;
-			max-width: 2rem;
-			color: var(--color-button-text);
-			background-color: var(--color-button-bg);
-			border-radius: var(--size-rounded-max);
-			margin: 0;
-			box-shadow: inset 0px -1px 1px rgb(17 24 39 / 10%);
-
-			&:not(:last-child) {
-				margin-right: 0.5rem;
-			}
-
-			&:hover {
-				background-color: var(--color-button-bg-hover) !important;
-
-				svg {
-					color: var(--color-button-text-hover) !important;
-				}
-			}
-
-			&:active {
-				background-color: var(--color-button-bg-active) !important;
-
-				svg {
-					color: var(--color-button-text-active) !important;
-				}
-			}
-
-			svg {
-				height: 1rem;
-				width: 1rem;
-			}
-		}
-
-		.image {
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			max-width: calc(100vw - 2 * var(--gap-lg));
-			max-height: calc(100vh - 2 * var(--gap-lg));
-			border-radius: var(--radius-lg);
-
-			&.zoomed-in {
-				object-fit: cover;
-				width: auto;
-				height: calc(100vh - 2 * var(--gap-lg));
-				max-width: calc(100vw - 2 * var(--gap-lg));
-			}
-		}
-		.floating {
-			position: absolute;
-			left: 50%;
-			transform: translateX(-50%);
-			bottom: var(--gap-md);
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: var(--gap-md);
-			transition: opacity 0.25s ease-in-out;
-			opacity: 1;
-			padding: 2rem 2rem 0 2rem;
-
-			&:not(&:hover) {
-				opacity: 0.4;
-				.text {
-					transform: translateY(2.5rem) scale(0.8);
-					opacity: 0;
-				}
-				.controls {
-					transform: translateY(0.25rem) scale(0.9);
-				}
-			}
-
-			.text {
-				display: flex;
-				flex-direction: column;
-				max-width: 40rem;
-				transition:
-					opacity 0.25s ease-in-out,
-					transform 0.25s ease-in-out;
-				text-shadow: 1px 1px 10px #000000d4;
-				margin-bottom: 0.25rem;
-				gap: 0.5rem;
-
-				h2 {
-					color: var(--dark-color-base);
-					font-size: 1.25rem;
-					text-align: center;
-					margin: 0;
-				}
-
-				p {
-					color: var(--dark-color-base);
-					margin: 0;
-				}
-			}
-			.controls {
-				background-color: var(--color-raised-bg);
-				padding: var(--gap-md);
-				border-radius: var(--radius-md);
-				transition:
-					opacity 0.25s ease-in-out,
-					transform 0.25s ease-in-out;
-			}
-		}
-	}
-}
-
-.buttons {
-	display: flex;
-	gap: 0.5rem;
-}
 </style>
diff --git a/apps/app-frontend/src/providers/app-settings-modal.ts b/apps/app-frontend/src/providers/app-settings-modal.ts
index a8136a2ce6..4c35a015f4 100644
--- a/apps/app-frontend/src/providers/app-settings-modal.ts
+++ b/apps/app-frontend/src/providers/app-settings-modal.ts
@@ -19,3 +19,6 @@ export const appSettingsModalContextKey: InjectionKey<AppSettingsModalContext> =
 export const appSettingsModalOpenProfileKey: InjectionKey<() => void> = Symbol(
 	'appSettingsModalOpenProfile',
 )
+export const appSettingsModalOpenSyncedOptionsKey: InjectionKey<() => void> = Symbol(
+	'appSettingsModalOpenSyncedOptions',
+)
diff --git a/apps/app-frontend/src/providers/setup.ts b/apps/app-frontend/src/providers/setup.ts
index 6fada30801..5e71ccb7c8 100644
--- a/apps/app-frontend/src/providers/setup.ts
+++ b/apps/app-frontend/src/providers/setup.ts
@@ -8,6 +8,7 @@ import { setupOnboardingChecklistProvider } from './onboarding-checklist'
 import { setupCreationModal } from './setup/creation-modal'
 import { setupFileDropProvider } from './setup/file-drop'
 import { setupFilePickerProvider } from './setup/file-picker'
+import { setupImageViewerEditorProvider } from './setup/image-viewer-editor'
 import { setupInstanceImportProvider } from './setup/instance-import'
 import { setupTagsProvider } from './setup/tags'
 import { setupUserCountryProvider } from './setup/user-country'
@@ -23,6 +24,7 @@ export function setupProviders(
 	setupTagsProvider(notificationManager)
 	setupFileDropProvider()
 	setupFilePickerProvider()
+	setupImageViewerEditorProvider()
 	setupInstanceImportProvider(notificationManager)
 	const onboardingChecklist = setupOnboardingChecklistProvider(appEvents)
 
diff --git a/apps/app-frontend/src/providers/setup/image-viewer-editor.ts b/apps/app-frontend/src/providers/setup/image-viewer-editor.ts
new file mode 100644
index 0000000000..8d09016e96
--- /dev/null
+++ b/apps/app-frontend/src/providers/setup/image-viewer-editor.ts
@@ -0,0 +1,20 @@
+import {
+	type ImageViewerEditorData,
+	type ImageViewerEditorSource,
+	provideImageViewerEditor,
+} from '@modrinth/ui'
+import { readFile } from '@tauri-apps/plugin-fs'
+
+import { release_ads_window_hold, take_ads_window_hold } from '@/helpers/ads.js'
+
+export function setupImageViewerEditorProvider() {
+	provideImageViewerEditor({
+		async loadEditorData(source: ImageViewerEditorSource): Promise<ImageViewerEditorData> {
+			return {
+				source: new Blob([await readFile(source.path)], { type: 'image/png' }),
+			}
+		},
+		onShow: take_ads_window_hold,
+		onHide: release_ads_window_hold,
+	})
+}
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index ff0bac7bf6..a5327694cb 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -63,6 +63,11 @@ export default new createRouter({
 			name: 'Skin selector',
 			component: Pages.Skins,
 		},
+		{
+			path: '/screenshots',
+			name: 'Screenshots',
+			component: Pages.Screenshots,
+		},
 		{
 			path: '/user/:user/:projectType?',
 			name: 'User',
@@ -134,6 +139,11 @@ export default new createRouter({
 					name: 'InstanceFiles',
 					component: Instance.Files,
 				},
+				{
+					path: 'screenshots',
+					name: 'InstanceScreenshots',
+					component: Instance.Screenshots,
+				},
 				{
 					path: 'logs',
 					name: 'InstanceLogs',
diff --git a/apps/app/build.rs b/apps/app/build.rs
index 5af039fa05..41f80995c5 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -218,6 +218,32 @@ fn main() {
                         "instance_get_optimal_jre_key",
                         "instance_get_full_path",
                         "instance_get_mod_full_path",
+                        "instance_list_screenshots",
+                        "instance_list_all_screenshots",
+                        "instance_list_synced_screenshots",
+                        "instance_save_edited_screenshot",
+                        "instance_list_screenshot_groups",
+                        "instance_create_screenshot_group",
+                        "instance_rename_screenshot_group",
+                        "instance_delete_screenshot_group",
+                        "instance_set_screenshot_group_memberships",
+                        "instance_import_screenshot_groups",
+                        "instance_delete_screenshots",
+                        "instance_export_screenshots",
+                        "instance_move_screenshots",
+                        "instance_open_screenshot",
+                        "instance_set_synced_option",
+                        "instance_get_synced_option_join_preview",
+                        "instance_get_synced_options_overview",
+                        "instance_get_global_synced_options",
+                        "instance_set_global_synced_option",
+                        "instance_get_command_history",
+                        "instance_set_command_history",
+                        "instance_open_synced_options_folder",
+                        "instance_list_synced_servers",
+                        "instance_update_synced_server",
+                        "instance_remove_synced_server",
+                        "instance_rebuild_synced_options",
                         "instance_list",
                         "instance_list_groups",
                         "instance_create_group",
@@ -398,6 +424,7 @@ fn main() {
                         "add_server_to_instance",
                         "edit_server_in_instance",
                         "remove_server_from_instance",
+                        "desync_server",
                         "get_instance_protocol_version",
                         "get_server_status",
                         "start_join_singleplayer_world",
diff --git a/apps/app/src/api/instance.rs b/apps/app/src/api/instance.rs
index f21d82afef..705201788b 100644
--- a/apps/app/src/api/instance.rs
+++ b/apps/app/src/api/instance.rs
@@ -4,6 +4,9 @@ use path_util::SafeRelativeUtf8UnixPathBuf;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::path::{Path, PathBuf};
+use tauri::{AppHandle, Manager, Runtime};
+use tauri_plugin_fs::FsExt;
+use tauri_plugin_opener::OpenerExt;
 use theseus::DownloadReason;
 use theseus::data::{
     AppliedContentSetPatch, ContentItem, Dependency,
@@ -43,6 +46,32 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
             instance_get_optimal_jre_key,
             instance_get_full_path,
             instance_get_mod_full_path,
+            instance_list_screenshots,
+            instance_list_all_screenshots,
+            instance_list_synced_screenshots,
+            instance_save_edited_screenshot,
+            instance_list_screenshot_groups,
+            instance_create_screenshot_group,
+            instance_rename_screenshot_group,
+            instance_delete_screenshot_group,
+            instance_set_screenshot_group_memberships,
+            instance_import_screenshot_groups,
+            instance_delete_screenshots,
+            instance_export_screenshots,
+            instance_move_screenshots,
+            instance_open_screenshot,
+            instance_set_synced_option,
+            instance_get_synced_option_join_preview,
+            instance_get_synced_options_overview,
+            instance_get_global_synced_options,
+            instance_set_global_synced_option,
+            instance_get_command_history,
+            instance_set_command_history,
+            instance_open_synced_options_folder,
+            instance_list_synced_servers,
+            instance_update_synced_server,
+            instance_remove_synced_server,
+            instance_rebuild_synced_options,
             instance_check_installed,
             instance_update_all,
             instance_update_project,
@@ -94,6 +123,7 @@ pub struct Instance {
     pub loader: ModLoader,
     pub loader_version: Option<String>,
     pub group_ids: Vec<String>,
+    pub synced_options: InstanceSyncedOptions,
     pub link: Option<InstanceLink>,
     pub shared_instance: Option<SharedInstanceAttachment>,
     pub quarantined: bool,
@@ -112,6 +142,19 @@ pub struct Instance {
     pub hooks: Hooks,
 }
 
+#[derive(Serialize, Debug, Clone)]
+pub struct InstanceScreenshot {
+    pub id: String,
+    pub instance_id: String,
+    pub instance_name: String,
+    pub file_name: String,
+    pub created_at: chrono::DateTime<chrono::Utc>,
+    pub modified_at: i64,
+    pub group_id: Option<String>,
+    pub path: PathBuf,
+    pub url: url::Url,
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone)]
 #[serde(tag = "type", rename_all = "snake_case")]
 pub enum InstanceLink {
@@ -258,6 +301,7 @@ impl From<InstanceMetadata> for Instance {
             loader: metadata.applied_content_set.loader,
             loader_version: metadata.applied_content_set.loader_version,
             group_ids: metadata.group_ids,
+            synced_options: metadata.synced_options,
             link: InstanceLink::from_core(metadata.link),
             shared_instance: metadata.shared_instance.map(Into::into),
             quarantined: metadata.quarantined,
@@ -632,6 +676,268 @@ pub async fn instance_get_mod_full_path(
     Ok(theseus::instance::get_mod_full_path(instance_id, project_path).await?)
 }
 
+#[tauri::command]
+pub async fn instance_list_screenshots<R: Runtime>(
+    app_handle: AppHandle<R>,
+    instance_id: &str,
+) -> Result<Vec<InstanceScreenshot>> {
+    let screenshots = theseus::instance::list_screenshots(instance_id).await?;
+    serialize_screenshots(&app_handle, screenshots)
+}
+
+#[tauri::command]
+pub async fn instance_list_all_screenshots<R: Runtime>(
+    app_handle: AppHandle<R>,
+) -> Result<Vec<InstanceScreenshot>> {
+    let screenshots = theseus::instance::list_all_screenshots().await?;
+    serialize_screenshots(&app_handle, screenshots)
+}
+
+#[tauri::command]
+pub async fn instance_list_synced_screenshots<R: Runtime>(
+    app_handle: AppHandle<R>,
+) -> Result<Vec<InstanceScreenshot>> {
+    let screenshots = theseus::instance::list_synced_screenshots().await?;
+    serialize_screenshots(&app_handle, screenshots)
+}
+
+#[tauri::command]
+pub async fn instance_save_edited_screenshot<R: Runtime>(
+    app_handle: AppHandle<R>,
+    key: theseus::instance::ScreenshotKey,
+    png_bytes: Vec<u8>,
+    mode: theseus::instance::ScreenshotEditSaveMode,
+) -> Result<InstanceScreenshot> {
+    let screenshot =
+        theseus::instance::save_edited_screenshot(key, png_bytes, mode).await?;
+    serialize_screenshot(&app_handle, screenshot)
+}
+
+#[tauri::command]
+pub async fn instance_list_screenshot_groups()
+-> Result<Vec<theseus::instance::ScreenshotGroup>> {
+    Ok(theseus::instance::list_screenshot_groups().await?)
+}
+
+#[tauri::command]
+pub async fn instance_create_screenshot_group(
+    name: String,
+    screenshot_ids: Vec<String>,
+) -> Result<theseus::instance::ScreenshotGroup> {
+    Ok(
+        theseus::instance::create_screenshot_group(name, screenshot_ids)
+            .await?,
+    )
+}
+
+#[tauri::command]
+pub async fn instance_rename_screenshot_group(
+    id: String,
+    new_name: String,
+) -> Result<theseus::instance::ScreenshotGroup> {
+    Ok(theseus::instance::rename_screenshot_group(id, new_name).await?)
+}
+
+#[tauri::command]
+pub async fn instance_delete_screenshot_group(id: String) -> Result<()> {
+    Ok(theseus::instance::delete_screenshot_group(id).await?)
+}
+
+#[tauri::command]
+pub async fn instance_set_screenshot_group_memberships(
+    updates: Vec<theseus::instance::ScreenshotGroupMembershipUpdate>,
+) -> Result<()> {
+    Ok(theseus::instance::set_screenshot_group_memberships(updates).await?)
+}
+
+#[tauri::command]
+pub async fn instance_import_screenshot_groups(
+    groups: Vec<theseus::instance::ScreenshotGroupImport>,
+) -> Result<()> {
+    Ok(theseus::instance::import_screenshot_groups(groups).await?)
+}
+
+#[tauri::command]
+pub async fn instance_delete_screenshots(
+    keys: Vec<theseus::instance::ScreenshotKey>,
+) -> Result<()> {
+    Ok(theseus::instance::delete_screenshots(&keys).await?)
+}
+
+#[tauri::command]
+pub async fn instance_export_screenshots(
+    keys: Vec<theseus::instance::ScreenshotKey>,
+    export_path: PathBuf,
+) -> Result<()> {
+    Ok(theseus::instance::export_screenshots(&keys, export_path).await?)
+}
+
+#[tauri::command]
+pub async fn instance_move_screenshots(
+    keys: Vec<theseus::instance::ScreenshotKey>,
+    target_instance_id: &str,
+) -> Result<Vec<theseus::instance::ScreenshotKey>> {
+    Ok(theseus::instance::move_screenshots(&keys, target_instance_id).await?)
+}
+
+#[tauri::command]
+pub async fn instance_open_screenshot<R: Runtime>(
+    app_handle: AppHandle<R>,
+    key: theseus::instance::ScreenshotKey,
+) -> Result<()> {
+    let path = theseus::instance::get_screenshot_path(&key).await?;
+    app_handle
+        .opener()
+        .reveal_item_in_dir(path)
+        .map_err(|error| std::io::Error::other(error.to_string()))?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn instance_set_synced_option(
+    instance_id: &str,
+    option: InstanceSyncedOption,
+    enabled: bool,
+    resolution: Option<theseus::instance::SyncedOptionJoinResolution>,
+) -> Result<Instance> {
+    Ok(Instance::from(
+        theseus::instance::set_synced_option(
+            instance_id,
+            option,
+            enabled,
+            resolution,
+        )
+        .await?,
+    ))
+}
+
+#[tauri::command]
+pub async fn instance_get_synced_option_join_preview(
+    instance_id: &str,
+    option: InstanceSyncedOption,
+) -> Result<theseus::instance::SyncedOptionJoinPreview> {
+    Ok(
+        theseus::instance::get_synced_option_join_preview(instance_id, option)
+            .await?,
+    )
+}
+
+#[tauri::command]
+pub async fn instance_get_synced_options_overview(
+    instance_id: &str,
+) -> Result<theseus::instance::SyncedOptionsOverview> {
+    Ok(theseus::instance::get_synced_options_overview(instance_id).await?)
+}
+
+#[tauri::command]
+pub async fn instance_get_global_synced_options()
+-> Result<theseus::instance::GlobalSyncedOptions> {
+    Ok(theseus::instance::get_global_synced_options().await?)
+}
+
+#[tauri::command]
+pub async fn instance_set_global_synced_option(
+    option: InstanceSyncedOption,
+    enabled: bool,
+) -> Result<theseus::instance::GlobalSyncedOptions> {
+    Ok(theseus::instance::set_global_synced_option(option, enabled).await?)
+}
+
+#[tauri::command]
+pub async fn instance_get_command_history() -> Result<String> {
+    Ok(theseus::instance::get_command_history().await?)
+}
+
+#[tauri::command]
+pub async fn instance_set_command_history(contents: &str) -> Result<String> {
+    Ok(theseus::instance::set_command_history(contents).await?)
+}
+
+#[tauri::command]
+pub async fn instance_open_synced_options_folder<R: Runtime>(
+    app_handle: AppHandle<R>,
+) -> Result<()> {
+    let path = theseus::instance::get_synced_options_folder().await?;
+    app_handle
+        .opener()
+        .open_path(path.to_string_lossy(), None::<&str>)
+        .map_err(|error| std::io::Error::other(error.to_string()))?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn instance_list_synced_servers()
+-> Result<Vec<theseus::instance::SyncedServer>> {
+    Ok(theseus::instance::list_synced_servers().await?)
+}
+
+#[tauri::command]
+pub async fn instance_update_synced_server(
+    server: theseus::instance::SyncedServer,
+) -> Result<()> {
+    Ok(theseus::instance::update_synced_server(server).await?)
+}
+
+#[tauri::command]
+pub async fn instance_remove_synced_server(server_id: &str) -> Result<()> {
+    Ok(theseus::instance::remove_synced_server(server_id).await?)
+}
+
+#[tauri::command]
+pub async fn instance_rebuild_synced_options(
+    instance_id: Option<&str>,
+) -> Result<()> {
+    if let Some(instance_id) = instance_id {
+        theseus::instance::reconcile_instance_synced_options(instance_id)
+            .await?;
+    } else {
+        theseus::instance::reconcile_all_synced_options().await?;
+    }
+    Ok(())
+}
+
+fn serialize_screenshots<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    screenshots: Vec<theseus::instance::InstanceScreenshot>,
+) -> Result<Vec<InstanceScreenshot>> {
+    let mut result = Vec::with_capacity(screenshots.len());
+
+    for screenshot in screenshots {
+        result.push(serialize_screenshot(app_handle, screenshot)?);
+    }
+
+    Ok(result)
+}
+
+fn serialize_screenshot<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    screenshot: theseus::instance::InstanceScreenshot,
+) -> Result<InstanceScreenshot> {
+    app_handle
+        .asset_protocol_scope()
+        .allow_file(&screenshot.path)
+        .map_err(|error| std::io::Error::other(error.to_string()))?;
+    app_handle
+        .fs_scope()
+        .allow_file(&screenshot.path)
+        .map_err(|error| std::io::Error::other(error.to_string()))?;
+    let mut url = super::utils::tauri_convert_file_src(&screenshot.path)?;
+    url.query_pairs_mut()
+        .append_pair("revision", &screenshot.modified_at.to_string());
+
+    Ok(InstanceScreenshot {
+        id: screenshot.id,
+        instance_id: screenshot.instance_id,
+        instance_name: screenshot.instance_name,
+        file_name: screenshot.file_name,
+        created_at: screenshot.created_at,
+        modified_at: screenshot.modified_at,
+        group_id: screenshot.group_id,
+        path: screenshot.path,
+        url,
+    })
+}
+
 #[tauri::command]
 pub async fn instance_get_optimal_jre_key(
     instance_id: &str,
diff --git a/apps/app/src/api/worlds.rs b/apps/app/src/api/worlds.rs
index afa743e0eb..56dcdd091b 100644
--- a/apps/app/src/api/worlds.rs
+++ b/apps/app/src/api/worlds.rs
@@ -25,6 +25,7 @@ pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
             add_server_to_instance,
             edit_server_in_instance,
             remove_server_from_instance,
+            desync_server,
             get_instance_protocol_version,
             get_server_status,
             start_join_singleplayer_world,
@@ -193,6 +194,15 @@ pub async fn remove_server_from_instance(
     Ok(())
 }
 
+#[tauri::command]
+pub async fn desync_server(
+    instance_id: &str,
+    server_id: &str,
+    mode: theseus::instance::DesyncServerMode,
+) -> Result<()> {
+    Ok(theseus::instance::desync_server(instance_id, server_id, mode).await?)
+}
+
 #[tauri::command]
 pub async fn get_instance_protocol_version(
     instance_id: &str,
diff --git a/apps/app/src/macos/menu.rs b/apps/app/src/macos/menu.rs
new file mode 100644
index 0000000000..ef9f4a8170
--- /dev/null
+++ b/apps/app/src/macos/menu.rs
@@ -0,0 +1,88 @@
+use tauri::{
+    AppHandle, Emitter, Runtime,
+    menu::{
+        AboutMetadata, HELP_SUBMENU_ID, Menu, MenuBuilder, MenuEvent,
+        MenuItemBuilder, SubmenuBuilder, WINDOW_SUBMENU_ID,
+    },
+};
+
+// Default macos undo/redo doesn't get passed through into the webkit window
+const UNDO_MENU_ITEM_ID: &str = "edit-menu-undo";
+const REDO_MENU_ITEM_ID: &str = "edit-menu-redo";
+const UNDO_EVENT: &str = "edit-menu://undo";
+const REDO_EVENT: &str = "edit-menu://redo";
+
+pub fn create<R: Runtime>(app: &AppHandle<R>) -> tauri::Result<Menu<R>> {
+    let package_info = app.package_info();
+    let config = app.config();
+    let about_metadata = AboutMetadata {
+        name: Some(package_info.name.clone()),
+        version: Some(package_info.version.to_string()),
+        copyright: config.bundle.copyright.clone(),
+        authors: config
+            .bundle
+            .publisher
+            .clone()
+            .map(|publisher| vec![publisher]),
+        ..Default::default()
+    };
+
+    let app_menu = SubmenuBuilder::new(app, package_info.name.clone())
+        .about(Some(about_metadata))
+        .separator()
+        .services()
+        .separator()
+        .hide()
+        .hide_others()
+        .separator()
+        .quit()
+        .build()?;
+    let file_menu = SubmenuBuilder::new(app, "File").close_window().build()?;
+    let undo = MenuItemBuilder::with_id(UNDO_MENU_ITEM_ID, "Undo")
+        .accelerator("CmdOrCtrl+Z")
+        .build(app)?;
+    let redo = MenuItemBuilder::with_id(REDO_MENU_ITEM_ID, "Redo")
+        .accelerator("CmdOrCtrl+Shift+Z")
+        .build(app)?;
+    let edit_menu = SubmenuBuilder::new(app, "Edit")
+        .item(&undo)
+        .item(&redo)
+        .separator()
+        .cut()
+        .copy()
+        .paste()
+        .select_all()
+        .build()?;
+    let view_menu = SubmenuBuilder::new(app, "View").fullscreen().build()?;
+    let window_menu = SubmenuBuilder::with_id(app, WINDOW_SUBMENU_ID, "Window")
+        .minimize()
+        .maximize()
+        .separator()
+        .close_window()
+        .build()?;
+    let help_menu =
+        SubmenuBuilder::with_id(app, HELP_SUBMENU_ID, "Help").build()?;
+
+    MenuBuilder::new(app)
+        .items(&[
+            &app_menu,
+            &file_menu,
+            &edit_menu,
+            &view_menu,
+            &window_menu,
+            &help_menu,
+        ])
+        .build()
+}
+
+pub fn handle_event<R: Runtime>(app: &AppHandle<R>, event: MenuEvent) {
+    let event_name = match event.id().as_ref() {
+        UNDO_MENU_ITEM_ID => UNDO_EVENT,
+        REDO_MENU_ITEM_ID => REDO_EVENT,
+        _ => return,
+    };
+
+    if let Err(error) = app.emit_to("main", event_name, ()) {
+        tracing::warn!(?error, "Failed to emit edit menu event");
+    }
+}
diff --git a/apps/app/src/macos/mod.rs b/apps/app/src/macos/mod.rs
index af946b0008..1642b81c6f 100644
--- a/apps/app/src/macos/mod.rs
+++ b/apps/app/src/macos/mod.rs
@@ -1 +1,2 @@
 pub mod deep_link;
+pub mod menu;
diff --git a/apps/app/src/main.rs b/apps/app/src/main.rs
index 27c8e8ea83..0f89a9a6e9 100644
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -144,6 +144,13 @@ fn main() {
 
     let mut builder = tauri::Builder::default();
 
+    #[cfg(target_os = "macos")]
+    {
+        builder = builder
+            .menu(|app| macos::menu::create(app))
+            .on_menu_event(macos::menu::handle_event);
+    }
+
     #[cfg(feature = "updater")]
     {
         use tauri_plugin_http::reqwest::header::{HeaderValue, USER_AGENT};
diff --git a/apps/frontend/src/pages/[type]/[project]/gallery.vue b/apps/frontend/src/pages/[type]/[project]/gallery.vue
index a57dbdb0d6..9f392dcf7d 100644
--- a/apps/frontend/src/pages/[type]/[project]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/gallery.vue
@@ -118,74 +118,18 @@
 			proceed-label="Delete"
 			@proceed="deleteGalleryImage"
 		/>
-		<div
-			v-if="expandedGalleryItem != null"
-			class="expanded-image-modal"
-			@click="expandedGalleryItem = null"
-		>
-			<div class="content">
-				<img
-					class="image"
-					:class="{ 'zoomed-in': zoomedIn }"
-					:src="
-						expandedGalleryItem.raw_url
-							? expandedGalleryItem.raw_url
-							: 'https://cdn.modrinth.com/placeholder-banner.svg'
-					"
-					:alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-					@click.stop
-				/>
-
-				<div class="floating" @click.stop>
-					<div class="text">
-						<h2 v-if="expandedGalleryItem.title">
-							{{ expandedGalleryItem.title }}
-						</h2>
-						<p v-if="expandedGalleryItem.description">
-							{{ expandedGalleryItem.description }}
-						</p>
-					</div>
-					<div class="controls">
-						<div class="flex gap-2">
-							<IconButton label="Close" class="close" @click="expandedGalleryItem = null">
-								<XIcon aria-hidden="true" />
-							</IconButton>
-							<ButtonLink
-								class="open !w-9 !rounded-full !px-0"
-								target="_blank"
-								:href="
-									expandedGalleryItem?.raw_url
-										? expandedGalleryItem?.raw_url
-										: 'https://cdn.modrinth.com/placeholder-banner.svg'
-								"
-							>
-								<ExternalIcon aria-hidden="true" />
-							</ButtonLink>
-							<IconButton label="Toggle zoom" @click="zoomedIn = !zoomedIn">
-								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-								<ContractIcon v-else aria-hidden="true" />
-							</IconButton>
-							<IconButton
-								v-if="filteredGallery.length > 1"
-								label="Previous image"
-								class="previous"
-								@click="previousImage()"
-							>
-								<LeftArrowIcon aria-hidden="true" />
-							</IconButton>
-							<IconButton
-								v-if="filteredGallery.length > 1"
-								label="Next image"
-								class="next"
-								@click="nextImage()"
-							>
-								<RightArrowIcon aria-hidden="true" />
-							</IconButton>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		<ImageViewerEditor ref="galleryViewer" :items="galleryViewerItems" editor="disabled">
+			<template #actions="{ item }">
+				<Button
+					type="quiet"
+					class="!w-9 !rounded-full !p-0"
+					aria-label="Open image in new tab"
+					@click="openImageInNewTab(item.src)"
+				>
+					<ExternalIcon aria-hidden="true" />
+				</Button>
+			</template>
+		</ImageViewerEditor>
 
 		<div v-if="currentMember && filteredGallery.length" class="card header-buttons">
 			<FileButton
@@ -212,7 +156,7 @@
 		</div>
 		<div v-if="filteredGallery.length" class="items">
 			<div v-for="(item, index) in filteredGallery" :key="index" class="card gallery-item">
-				<a class="gallery-thumbnail" @click="expandImage(item as GalleryItem, index)">
+				<a class="gallery-thumbnail" @click="expandImage(index)">
 					<img
 						:src="item.url ? item.url : 'https://cdn.modrinth.com/placeholder-banner.svg'"
 						:alt="item.title ? item.title : 'gallery-image'"
@@ -281,15 +225,11 @@
 <script setup lang="ts">
 import {
 	CalendarIcon,
-	ContractIcon,
 	EditIcon,
-	ExpandIcon,
 	ExternalIcon,
 	ImageIcon,
 	InfoIcon,
-	LeftArrowIcon,
 	PlusIcon,
-	RightArrowIcon,
 	SaveIcon,
 	StarIcon,
 	TransferIcon,
@@ -299,11 +239,10 @@ import {
 } from '@modrinth/assets'
 import {
 	Button,
-	ButtonLink,
 	ConfirmModal,
 	DropArea,
 	FileButton,
-	IconButton,
+	ImageViewerEditor,
 	injectProjectPageContext,
 	Input,
 	NewModal as Modal,
@@ -311,7 +250,6 @@ import {
 	useFormatDateTime,
 	useFullImageContextMenu,
 } from '@modrinth/ui'
-import { useEventListener } from '@vueuse/core'
 
 import AiImageWarningModal from '~/components/ui/AiImageWarningModal.vue'
 import { fileDeclaresAi } from '~/helpers/c2pa'
@@ -337,6 +275,7 @@ const {
 const aiImageWarningModal = useTemplateRef('aiImageWarningModal')
 const modalEditItem = useTemplateRef('modal_edit_item')
 const modalConfirm = useTemplateRef('modal_confirm')
+const galleryViewer = useTemplateRef('galleryViewer')
 
 // SEO
 const title = computed(() => `${project.value.title} - Gallery`)
@@ -351,23 +290,6 @@ useSeoMeta({
 	ogDescription: description,
 })
 
-// Gallery item type matching actual v2 API response (LegacyGalleryItem in labrinth)
-// raw_url is optional in TS types but present in API response
-interface GalleryItem {
-	url: string
-	raw_url?: string
-	featured: boolean
-	title?: string
-	description?: string
-	created: string
-	ordering: number
-}
-
-// Expanded image modal state
-const expandedGalleryItem = ref<GalleryItem | null>(null)
-const expandedGalleryIndex = ref(0)
-const zoomedIn = ref(false)
-
 // Delete state
 const deleteIndex = ref(-1)
 
@@ -391,43 +313,22 @@ const filteredGallery = computed(
 	() => project.value.gallery?.filter((img) => img.title !== MC_SERVER_BANNER_NAME) ?? [],
 )
 
-// Keyboard navigation for expanded image modal
-useEventListener(document, 'keydown', (e) => {
-	if (expandedGalleryItem.value) {
-		e.preventDefault()
-		if (e.key === 'Escape') {
-			expandedGalleryItem.value = null
-		} else if (e.key === 'ArrowLeft') {
-			e.stopPropagation()
-			previousImage()
-		} else if (e.key === 'ArrowRight') {
-			e.stopPropagation()
-			nextImage()
-		}
-	}
-})
+const galleryViewerItems = computed(() =>
+	filteredGallery.value.map((image) => ({
+		id: image.url,
+		src: image.raw_url ?? 'https://cdn.modrinth.com/placeholder-banner.svg',
+		alt: image.title || 'Gallery image',
+		title: image.title,
+		description: image.description,
+	})),
+)
 
-// Navigation functions
-function nextImage() {
-	expandedGalleryIndex.value++
-	if (expandedGalleryIndex.value >= filteredGallery.value.length) {
-		expandedGalleryIndex.value = 0
-	}
-	expandedGalleryItem.value = filteredGallery.value[expandedGalleryIndex.value] as GalleryItem
+function expandImage(index: number) {
+	galleryViewer.value?.show(index)
 }
 
-function previousImage() {
-	expandedGalleryIndex.value--
-	if (expandedGalleryIndex.value < 0) {
-		expandedGalleryIndex.value = filteredGallery.value.length - 1
-	}
-	expandedGalleryItem.value = filteredGallery.value[expandedGalleryIndex.value] as GalleryItem
-}
-
-function expandImage(item: GalleryItem, index: number) {
-	expandedGalleryItem.value = item
-	expandedGalleryIndex.value = index
-	zoomedIn.value = false
+function openImageInNewTab(url: string) {
+	window.open(url, '_blank', 'noopener,noreferrer')
 }
 
 // Edit state management
@@ -546,100 +447,6 @@ async function deleteGalleryImage() {
 	}
 }
 
-.expanded-image-modal {
-	position: fixed;
-	z-index: 20;
-	overflow: auto;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #000000;
-	background-color: rgba(0, 0, 0, 0.7);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	.content {
-		position: relative;
-		width: calc(100vw - 2 * var(--spacing-card-lg));
-		height: calc(100vh - 2 * var(--spacing-card-lg));
-
-		.image {
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			max-width: calc(100vw - 2 * var(--spacing-card-lg));
-			max-height: calc(100vh - 2 * var(--spacing-card-lg));
-			border-radius: var(--size-rounded-card);
-
-			&.zoomed-in {
-				object-fit: cover;
-				width: auto;
-				height: calc(100vh - 2 * var(--spacing-card-lg));
-				max-width: calc(100vw - 2 * var(--spacing-card-lg));
-			}
-		}
-		.floating {
-			position: absolute;
-			left: 50%;
-			transform: translateX(-50%);
-			bottom: var(--spacing-card-md);
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: var(--spacing-card-sm);
-			transition: opacity 0.25s ease-in-out;
-			opacity: 1;
-			padding: 2rem 2rem 0 2rem;
-
-			&:not(&:hover) {
-				opacity: 0.4;
-				.text {
-					transform: translateY(2.5rem) scale(0.8);
-					opacity: 0;
-				}
-				.controls {
-					transform: translateY(0.25rem) scale(0.9);
-				}
-			}
-
-			.text {
-				display: flex;
-				flex-direction: column;
-				max-width: 40rem;
-				transition:
-					opacity 0.25s ease-in-out,
-					transform 0.25s ease-in-out;
-				text-shadow: 1px 1px 10px #000000d4;
-				margin-bottom: 0.25rem;
-				gap: 0.5rem;
-
-				h2 {
-					color: var(--dark-color-text-dark);
-					font-size: 1.25rem;
-					text-align: center;
-					margin: 0;
-				}
-
-				p {
-					color: var(--dark-color-text);
-					margin: 0;
-				}
-			}
-			.controls {
-				background-color: var(--color-raised-bg);
-				padding: var(--spacing-card-md);
-				border-radius: var(--size-rounded-card);
-				transition:
-					opacity 0.25s ease-in-out,
-					transform 0.25s ease-in-out;
-			}
-		}
-	}
-}
-
 .items {
 	display: grid;
 	grid-template-rows: 1fr;
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 2c6093242b..10ef710b71 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -621,7 +621,7 @@ const { isStuck: isInstallHeaderStuck } = useStickyObserver(
 		"
 	>
 		<section
-			class="mt-6 flex min-w-0 flex-col gap-3 sm:mt-0"
+			class="mt-6 flex min-w-0 flex-col gap-2 sm:mt-0"
 			:class="cosmetics.rightSearchLayout ? 'lg:order-1' : 'lg:order-2'"
 		>
 			<BrowsePageLayout>
diff --git a/packages/app-lib/.sqlx/query-0365707ab9d9b9eb4f189fa9f888fa2c60ebd20a6c10d62fbae546780863d7f7.json b/packages/app-lib/.sqlx/query-0365707ab9d9b9eb4f189fa9f888fa2c60ebd20a6c10d62fbae546780863d7f7.json
new file mode 100644
index 0000000000..30ada7d0b1
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-0365707ab9d9b9eb4f189fa9f888fa2c60ebd20a6c10d62fbae546780863d7f7.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT feature\n\t\tFROM instance_sync_preferences\n\t\tWHERE instance_id = ? AND enabled = 1\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "feature",
+        "ordinal": 0,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "0365707ab9d9b9eb4f189fa9f888fa2c60ebd20a6c10d62fbae546780863d7f7"
+}
diff --git a/packages/app-lib/.sqlx/query-0a9977b44045c6d0e974770deabc5cb51b41bf5fa94b8bd4b9676f360bf2de7e.json b/packages/app-lib/.sqlx/query-0a9977b44045c6d0e974770deabc5cb51b41bf5fa94b8bd4b9676f360bf2de7e.json
new file mode 100644
index 0000000000..70ed01f959
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-0a9977b44045c6d0e974770deabc5cb51b41bf5fa94b8bd4b9676f360bf2de7e.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM screenshot_groups WHERE id = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "0a9977b44045c6d0e974770deabc5cb51b41bf5fa94b8bd4b9676f360bf2de7e"
+}
diff --git a/packages/app-lib/.sqlx/query-0c2570758978e370bc2b3240874001e6e09eaf922553d5bbfefd6d12c01eb98f.json b/packages/app-lib/.sqlx/query-0c2570758978e370bc2b3240874001e6e09eaf922553d5bbfefd6d12c01eb98f.json
new file mode 100644
index 0000000000..4df688f8f3
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-0c2570758978e370bc2b3240874001e6e09eaf922553d5bbfefd6d12c01eb98f.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\tINSERT INTO synced_server_state (singleton, revision)\n\t\t\tVALUES (1, 0)\n\t\t\tON CONFLICT(singleton) DO NOTHING\n\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": []
+  },
+  "hash": "0c2570758978e370bc2b3240874001e6e09eaf922553d5bbfefd6d12c01eb98f"
+}
diff --git a/packages/app-lib/.sqlx/query-0f66133eae064cc4b6bc079302d5b56c11ddfa4e1512cbda761e10cba5d78e68.json b/packages/app-lib/.sqlx/query-0f66133eae064cc4b6bc079302d5b56c11ddfa4e1512cbda761e10cba5d78e68.json
new file mode 100644
index 0000000000..4ee5207285
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-0f66133eae064cc4b6bc079302d5b56c11ddfa4e1512cbda761e10cba5d78e68.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT DISTINCT instance_id FROM processes",
+  "describe": {
+    "columns": [
+      {
+        "name": "instance_id",
+        "ordinal": 0,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "0f66133eae064cc4b6bc079302d5b56c11ddfa4e1512cbda761e10cba5d78e68"
+}
diff --git a/packages/app-lib/.sqlx/query-10a2857ec0152359f562650711ec7a2b421a4350290ce3dd27075567e67c7ad2.json b/packages/app-lib/.sqlx/query-10a2857ec0152359f562650711ec7a2b421a4350290ce3dd27075567e67c7ad2.json
new file mode 100644
index 0000000000..1234c366cc
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-10a2857ec0152359f562650711ec7a2b421a4350290ce3dd27075567e67c7ad2.json
@@ -0,0 +1,26 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT instance_id, feature\n\t\tFROM instance_sync_preferences\n\t\tWHERE enabled = 1\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "instance_id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "feature",
+        "ordinal": 1,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false
+    ]
+  },
+  "hash": "10a2857ec0152359f562650711ec7a2b421a4350290ce3dd27075567e67c7ad2"
+}
diff --git a/packages/app-lib/.sqlx/query-14cb855184725b3e891d2365563f262f9d961d1a0bf170c890ce61bb1dea1dc5.json b/packages/app-lib/.sqlx/query-14cb855184725b3e891d2365563f262f9d961d1a0bf170c890ce61bb1dea1dc5.json
new file mode 100644
index 0000000000..bfb139d1f9
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-14cb855184725b3e891d2365563f262f9d961d1a0bf170c890ce61bb1dea1dc5.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\t\tUPDATE synced_server_state\n\t\t\t\tSET revision = revision + 1\n\t\t\t\tWHERE singleton = 1\n\t\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": []
+  },
+  "hash": "14cb855184725b3e891d2365563f262f9d961d1a0bf170c890ce61bb1dea1dc5"
+}
diff --git a/packages/app-lib/.sqlx/query-166c4f42eab67dfe1b83d6c29374ae6a27161b7bdd38ba8b4bbbb900d43fc3c8.json b/packages/app-lib/.sqlx/query-166c4f42eab67dfe1b83d6c29374ae6a27161b7bdd38ba8b4bbbb900d43fc3c8.json
new file mode 100644
index 0000000000..4601eb1b36
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-166c4f42eab67dfe1b83d6c29374ae6a27161b7bdd38ba8b4bbbb900d43fc3c8.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT EXISTS(\n\t\t\tSELECT 1 FROM instance_server_pack_state WHERE instance_id = ?\n\t\t) AS \"exists!: bool\"\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "exists!: bool",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "166c4f42eab67dfe1b83d6c29374ae6a27161b7bdd38ba8b4bbbb900d43fc3c8"
+}
diff --git a/packages/app-lib/.sqlx/query-16ff7e3f6efa13aeee64468c0d089ea4f165a4a2405a069dd95326cc1c1bda8e.json b/packages/app-lib/.sqlx/query-16ff7e3f6efa13aeee64468c0d089ea4f165a4a2405a069dd95326cc1c1bda8e.json
new file mode 100644
index 0000000000..0b0fab9438
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-16ff7e3f6efa13aeee64468c0d089ea4f165a4a2405a069dd95326cc1c1bda8e.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM instance_server_projection_entries WHERE instance_id = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "16ff7e3f6efa13aeee64468c0d089ea4f165a4a2405a069dd95326cc1c1bda8e"
+}
diff --git a/packages/app-lib/.sqlx/query-18050b91c80f2cc7d218aa334e6bdab9e29c3e8f8401225d8351348e51cbe314.json b/packages/app-lib/.sqlx/query-18050b91c80f2cc7d218aa334e6bdab9e29c3e8f8401225d8351348e51cbe314.json
new file mode 100644
index 0000000000..075570a7bf
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-18050b91c80f2cc7d218aa334e6bdab9e29c3e8f8401225d8351348e51cbe314.json
@@ -0,0 +1,26 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT id, nbt\n\t\tFROM synced_servers\n\t\tORDER BY position\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "nbt",
+        "ordinal": 1,
+        "type_info": "Blob"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false
+    ]
+  },
+  "hash": "18050b91c80f2cc7d218aa334e6bdab9e29c3e8f8401225d8351348e51cbe314"
+}
diff --git a/packages/app-lib/.sqlx/query-1fb66446c3ba0f52e682f8aae4b80a97310f308b3aa25c322d499b32d549f7b7.json b/packages/app-lib/.sqlx/query-1fb66446c3ba0f52e682f8aae4b80a97310f308b3aa25c322d499b32d549f7b7.json
new file mode 100644
index 0000000000..9d10b4b7be
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-1fb66446c3ba0f52e682f8aae4b80a97310f308b3aa25c322d499b32d549f7b7.json
@@ -0,0 +1,32 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT instances.id, instances.name, instances.path\n\t\tFROM instances\n\t\tINNER JOIN instance_sync_preferences preferences\n\t\t\tON preferences.instance_id = instances.id\n\t\tWHERE preferences.feature = 'screenshots'\n\t\t\tAND preferences.enabled = 1\n\t\t\tAND EXISTS (\n\t\t\t\tSELECT 1\n\t\t\t\tFROM sync_feature_settings\n\t\t\t\tWHERE feature = 'screenshots' AND globally_enabled = 1\n\t\t\t)\n\t\tORDER BY instances.name, instances.id\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "name",
+        "ordinal": 1,
+        "type_info": "Text"
+      },
+      {
+        "name": "path",
+        "ordinal": 2,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "1fb66446c3ba0f52e682f8aae4b80a97310f308b3aa25c322d499b32d549f7b7"
+}
diff --git a/packages/app-lib/.sqlx/query-209158894a8658b61fda164cb35bd807403238b5fd6891803a00464dbfa663fc.json b/packages/app-lib/.sqlx/query-209158894a8658b61fda164cb35bd807403238b5fd6891803a00464dbfa663fc.json
new file mode 100644
index 0000000000..a4f4a942d3
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-209158894a8658b61fda164cb35bd807403238b5fd6891803a00464dbfa663fc.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM processes WHERE pid = ? AND start_time = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "209158894a8658b61fda164cb35bd807403238b5fd6891803a00464dbfa663fc"
+}
diff --git a/packages/app-lib/.sqlx/query-247aa979f6f6fd116b832cc5a513bd43f0aaa4b554c2a3cac6fb1079e539bf27.json b/packages/app-lib/.sqlx/query-247aa979f6f6fd116b832cc5a513bd43f0aaa4b554c2a3cac6fb1079e539bf27.json
new file mode 100644
index 0000000000..3bafddf112
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-247aa979f6f6fd116b832cc5a513bd43f0aaa4b554c2a3cac6fb1079e539bf27.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT EXISTS(SELECT 1 FROM screenshot_groups WHERE id = ?) AS \"exists!: bool\"",
+  "describe": {
+    "columns": [
+      {
+        "name": "exists!: bool",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "247aa979f6f6fd116b832cc5a513bd43f0aaa4b554c2a3cac6fb1079e539bf27"
+}
diff --git a/packages/app-lib/.sqlx/query-2ede94b5eab73255500fbd4b6f7eb85abf6c98d4bdfcd93a9a6054e9d5235099.json b/packages/app-lib/.sqlx/query-2ede94b5eab73255500fbd4b6f7eb85abf6c98d4bdfcd93a9a6054e9d5235099.json
new file mode 100644
index 0000000000..2ff7afea59
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-2ede94b5eab73255500fbd4b6f7eb85abf6c98d4bdfcd93a9a6054e9d5235099.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM screenshots WHERE id = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "2ede94b5eab73255500fbd4b6f7eb85abf6c98d4bdfcd93a9a6054e9d5235099"
+}
diff --git a/packages/app-lib/.sqlx/query-3ad4711be00a29f9c84b1529f7cd8329d4bd301d4cfae600ff08564075e45989.json b/packages/app-lib/.sqlx/query-3ad4711be00a29f9c84b1529f7cd8329d4bd301d4cfae600ff08564075e45989.json
new file mode 100644
index 0000000000..4a4e9e7fc2
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-3ad4711be00a29f9c84b1529f7cd8329d4bd301d4cfae600ff08564075e45989.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tDELETE FROM instance_sync_checkpoints\n\t\tWHERE instance_id = ?\n\t\t\tAND feature = 'creative_hotbars'\n\t\t\tAND variant != ?\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "3ad4711be00a29f9c84b1529f7cd8329d4bd301d4cfae600ff08564075e45989"
+}
diff --git a/packages/app-lib/.sqlx/query-3b97f2c92fe42ade6a2981cc89750386782589c77c0517026489d8928149941b.json b/packages/app-lib/.sqlx/query-3b97f2c92fe42ade6a2981cc89750386782589c77c0517026489d8928149941b.json
new file mode 100644
index 0000000000..878aa47c1a
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-3b97f2c92fe42ade6a2981cc89750386782589c77c0517026489d8928149941b.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM synced_servers WHERE id = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "3b97f2c92fe42ade6a2981cc89750386782589c77c0517026489d8928149941b"
+}
diff --git a/packages/app-lib/.sqlx/query-48c53bc771b0c2af2ccef50cd121ab4de4ed309b54239bacb54b0d173c4e5acb.json b/packages/app-lib/.sqlx/query-48c53bc771b0c2af2ccef50cd121ab4de4ed309b54239bacb54b0d173c4e5acb.json
new file mode 100644
index 0000000000..c7cb7dbc2d
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-48c53bc771b0c2af2ccef50cd121ab4de4ed309b54239bacb54b0d173c4e5acb.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tUPDATE screenshots\n\t\tSET instance_id = ?, file_name = ?\n\t\tWHERE instance_id = ? AND file_name = ?\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 4
+    },
+    "nullable": []
+  },
+  "hash": "48c53bc771b0c2af2ccef50cd121ab4de4ed309b54239bacb54b0d173c4e5acb"
+}
diff --git a/packages/app-lib/.sqlx/query-4e75c5ee789d5a781967fc0845f12e9c53683afbe05ab5f441c5f5fb1bce0472.json b/packages/app-lib/.sqlx/query-4e75c5ee789d5a781967fc0845f12e9c53683afbe05ab5f441c5f5fb1bce0472.json
new file mode 100644
index 0000000000..61b546127f
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-4e75c5ee789d5a781967fc0845f12e9c53683afbe05ab5f441c5f5fb1bce0472.json
@@ -0,0 +1,26 @@
+{
+  "db_name": "SQLite",
+  "query": "\n        SELECT id, name\n\t\tFROM screenshot_groups\n\t\tORDER BY display_order, name, id\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "name",
+        "ordinal": 1,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false
+    ]
+  },
+  "hash": "4e75c5ee789d5a781967fc0845f12e9c53683afbe05ab5f441c5f5fb1bce0472"
+}
diff --git a/packages/app-lib/.sqlx/query-5616069c5dd7233ef7cf867ac8367fdc4ff254e929cafce9fd3ff38449e88b89.json b/packages/app-lib/.sqlx/query-5616069c5dd7233ef7cf867ac8367fdc4ff254e929cafce9fd3ff38449e88b89.json
new file mode 100644
index 0000000000..bb28873e4f
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-5616069c5dd7233ef7cf867ac8367fdc4ff254e929cafce9fd3ff38449e88b89.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO screenshot_group_memberships (screenshot_id, group_id)\n\t\tSELECT ?, group_id\n\t\tFROM screenshot_group_memberships\n\t\tWHERE screenshot_id = ?\n\t\tON CONFLICT (screenshot_id) DO UPDATE SET group_id = excluded.group_id\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "5616069c5dd7233ef7cf867ac8367fdc4ff254e929cafce9fd3ff38449e88b89"
+}
diff --git a/packages/app-lib/.sqlx/query-58c94159c024a407b7291a16ac5cd6b28eddf7e6366de078850788d2b3128d0b.json b/packages/app-lib/.sqlx/query-58c94159c024a407b7291a16ac5cd6b28eddf7e6366de078850788d2b3128d0b.json
new file mode 100644
index 0000000000..9f99749ef6
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-58c94159c024a407b7291a16ac5cd6b28eddf7e6366de078850788d2b3128d0b.json
@@ -0,0 +1,38 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT expected_sha1, merge_base,\n\t\t\tsource_revision AS \"source_revision!: i64\", status\n\t\tFROM instance_sync_checkpoints\n\t\tWHERE instance_id = ? AND feature = ? AND variant = ?\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "expected_sha1",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "merge_base",
+        "ordinal": 1,
+        "type_info": "Blob"
+      },
+      {
+        "name": "source_revision!: i64",
+        "ordinal": 2,
+        "type_info": "Integer"
+      },
+      {
+        "name": "status",
+        "ordinal": 3,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": [
+      false,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "58c94159c024a407b7291a16ac5cd6b28eddf7e6366de078850788d2b3128d0b"
+}
diff --git a/packages/app-lib/.sqlx/query-58d7b3809798f5476eaa56f23a37668cfd117f83baab840228dbd5f6c6e9fe89.json b/packages/app-lib/.sqlx/query-58d7b3809798f5476eaa56f23a37668cfd117f83baab840228dbd5f6c6e9fe89.json
new file mode 100644
index 0000000000..3208c80cc5
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-58d7b3809798f5476eaa56f23a37668cfd117f83baab840228dbd5f6c6e9fe89.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\tINSERT INTO instance_servers\n\t\t\t\t(instance_id, id, source, excluded_synced_server_id,\n\t\t\t\t nbt, position)\n\t\t\tVALUES (?, ?, ?,\n\t\t\t\t(SELECT id FROM synced_servers WHERE id = ?), ?, ?)\n\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 6
+    },
+    "nullable": []
+  },
+  "hash": "58d7b3809798f5476eaa56f23a37668cfd117f83baab840228dbd5f6c6e9fe89"
+}
diff --git a/packages/app-lib/.sqlx/query-5d509c2cce1728990fbf9ee4921eae357c1043ac65bc021fe093da5e72b2684a.json b/packages/app-lib/.sqlx/query-5d509c2cce1728990fbf9ee4921eae357c1043ac65bc021fe093da5e72b2684a.json
new file mode 100644
index 0000000000..f2a7293908
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-5d509c2cce1728990fbf9ee4921eae357c1043ac65bc021fe093da5e72b2684a.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO instance_server_pack_state (instance_id, version_id)\n\t\tVALUES (?, ?)\n\t\tON CONFLICT(instance_id) DO UPDATE SET\n\t\t\tversion_id = excluded.version_id\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "5d509c2cce1728990fbf9ee4921eae357c1043ac65bc021fe093da5e72b2684a"
+}
diff --git a/packages/app-lib/.sqlx/query-607eac5be3e2a29bb81cce3d0ff14690b61e08f5cb3316c4349c78dc0e4d81f7.json b/packages/app-lib/.sqlx/query-607eac5be3e2a29bb81cce3d0ff14690b61e08f5cb3316c4349c78dc0e4d81f7.json
new file mode 100644
index 0000000000..182b209b42
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-607eac5be3e2a29bb81cce3d0ff14690b61e08f5cb3316c4349c78dc0e4d81f7.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "UPDATE screenshot_groups SET name = ? WHERE id = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "607eac5be3e2a29bb81cce3d0ff14690b61e08f5cb3316c4349c78dc0e4d81f7"
+}
diff --git a/packages/app-lib/.sqlx/query-6787d19c235ae92fc05f08782173a59d340a3ba4a0543539fd37ead0f9813a37.json b/packages/app-lib/.sqlx/query-6787d19c235ae92fc05f08782173a59d340a3ba4a0543539fd37ead0f9813a37.json
new file mode 100644
index 0000000000..b93edb98c2
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-6787d19c235ae92fc05f08782173a59d340a3ba4a0543539fd37ead0f9813a37.json
@@ -0,0 +1,26 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT pid, start_time\n\t\tFROM processes\n\t\tWHERE instance_id = ?\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "pid",
+        "ordinal": 0,
+        "type_info": "Integer"
+      },
+      {
+        "name": "start_time",
+        "ordinal": 1,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false
+    ]
+  },
+  "hash": "6787d19c235ae92fc05f08782173a59d340a3ba4a0543539fd37ead0f9813a37"
+}
diff --git a/packages/app-lib/.sqlx/query-6c58c5daf14ed5198c14799f4a2dd02ebf24d7d61bb74b22abdf46e53b4efdfa.json b/packages/app-lib/.sqlx/query-6c58c5daf14ed5198c14799f4a2dd02ebf24d7d61bb74b22abdf46e53b4efdfa.json
new file mode 100644
index 0000000000..c53d1b9160
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-6c58c5daf14ed5198c14799f4a2dd02ebf24d7d61bb74b22abdf46e53b4efdfa.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM screenshot_group_memberships WHERE screenshot_id = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "6c58c5daf14ed5198c14799f4a2dd02ebf24d7d61bb74b22abdf46e53b4efdfa"
+}
diff --git a/packages/app-lib/.sqlx/query-6e8707551a6154d73d58ac54d35dc78ed283e6ce57c9a2332645df74b359b5f7.json b/packages/app-lib/.sqlx/query-6e8707551a6154d73d58ac54d35dc78ed283e6ce57c9a2332645df74b359b5f7.json
new file mode 100644
index 0000000000..14c048bfe9
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-6e8707551a6154d73d58ac54d35dc78ed283e6ce57c9a2332645df74b359b5f7.json
@@ -0,0 +1,32 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT schema_version AS \"schema_version!: i64\",\n\t\t\trevision AS \"revision!: i64\", nbt\n\t\tFROM synced_hotbar_state\n\t\tWHERE singleton = 1\n        ",
+  "describe": {
+    "columns": [
+      {
+        "name": "schema_version!: i64",
+        "ordinal": 0,
+        "type_info": "Integer"
+      },
+      {
+        "name": "revision!: i64",
+        "ordinal": 1,
+        "type_info": "Integer"
+      },
+      {
+        "name": "nbt",
+        "ordinal": 2,
+        "type_info": "Blob"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "6e8707551a6154d73d58ac54d35dc78ed283e6ce57c9a2332645df74b359b5f7"
+}
diff --git a/packages/app-lib/.sqlx/query-6f17b1880668e6efb235eaa3808bd64a1c6bb5fc5f3c0082500afdcfa7340efa.json b/packages/app-lib/.sqlx/query-6f17b1880668e6efb235eaa3808bd64a1c6bb5fc5f3c0082500afdcfa7340efa.json
new file mode 100644
index 0000000000..f702c75af1
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-6f17b1880668e6efb235eaa3808bd64a1c6bb5fc5f3c0082500afdcfa7340efa.json
@@ -0,0 +1,19 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT\n\t\t\tscreenshots.id,\n\t\t\tscreenshots.instance_id,\n\t\t\tscreenshots.file_name,\n\t\t\tscreenshots.content_hash,\n\t\t\tscreenshots.file_size,\n\t\t\tscreenshots.modified_at,\n\t\t\tscreenshots.created_at,\n\t\t\tmemberships.group_id AS \"group_id?\"\n\t\tFROM screenshots\n\t\tLEFT JOIN screenshot_group_memberships memberships\n\t\t\tON memberships.screenshot_id = screenshots.id\n\t\tWHERE screenshots.instance_id = ? AND screenshots.file_name = ?\n\t\t",
+  "describe": {
+    "columns": [
+      { "name": "id", "ordinal": 0, "type_info": "Text" },
+      { "name": "instance_id", "ordinal": 1, "type_info": "Text" },
+      { "name": "file_name", "ordinal": 2, "type_info": "Text" },
+      { "name": "content_hash", "ordinal": 3, "type_info": "Text" },
+      { "name": "file_size", "ordinal": 4, "type_info": "Integer" },
+      { "name": "modified_at", "ordinal": 5, "type_info": "Integer" },
+      { "name": "created_at", "ordinal": 6, "type_info": "Integer" },
+      { "name": "group_id?", "ordinal": 7, "type_info": "Text" }
+    ],
+    "parameters": { "Right": 2 },
+    "nullable": [false, false, false, false, false, false, false, false]
+  },
+  "hash": "6f17b1880668e6efb235eaa3808bd64a1c6bb5fc5f3c0082500afdcfa7340efa"
+}
diff --git a/packages/app-lib/.sqlx/query-743f351ba5f612262b98b0a12dc2a75e1c92cece3b2715f9a3392c058e9347a8.json b/packages/app-lib/.sqlx/query-743f351ba5f612262b98b0a12dc2a75e1c92cece3b2715f9a3392c058e9347a8.json
new file mode 100644
index 0000000000..a4ed6ce231
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-743f351ba5f612262b98b0a12dc2a75e1c92cece3b2715f9a3392c058e9347a8.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT DISTINCT screenshots.instance_id\n\t\tFROM screenshot_group_memberships memberships\n\t\tINNER JOIN screenshots ON screenshots.id = memberships.screenshot_id\n\t\tWHERE memberships.group_id = ?\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "instance_id",
+        "ordinal": 0,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "743f351ba5f612262b98b0a12dc2a75e1c92cece3b2715f9a3392c058e9347a8"
+}
diff --git a/packages/app-lib/.sqlx/query-7567783dcac147378086ed2bd7eab5a059f3d1b868a5c45dbb9de86dcd177085.json b/packages/app-lib/.sqlx/query-7567783dcac147378086ed2bd7eab5a059f3d1b868a5c45dbb9de86dcd177085.json
new file mode 100644
index 0000000000..4232998a92
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-7567783dcac147378086ed2bd7eab5a059f3d1b868a5c45dbb9de86dcd177085.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\tINSERT INTO screenshot_group_memberships (screenshot_id, group_id)\n\t\t\tVALUES (?, ?)\n\t\t\tON CONFLICT(screenshot_id) DO UPDATE SET group_id = excluded.group_id\n\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "7567783dcac147378086ed2bd7eab5a059f3d1b868a5c45dbb9de86dcd177085"
+}
diff --git a/packages/app-lib/.sqlx/query-778ef883e1e68bb549dd1b82761f674df6125b03954683a70431257cc8c923e9.json b/packages/app-lib/.sqlx/query-778ef883e1e68bb549dd1b82761f674df6125b03954683a70431257cc8c923e9.json
new file mode 100644
index 0000000000..c828e1998d
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-778ef883e1e68bb549dd1b82761f674df6125b03954683a70431257cc8c923e9.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "UPDATE screenshot_groups SET display_order = display_order + 1",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": []
+  },
+  "hash": "778ef883e1e68bb549dd1b82761f674df6125b03954683a70431257cc8c923e9"
+}
diff --git a/packages/app-lib/.sqlx/query-7ea54f8960b92b275b5f9d4190c44bedb489b84d81eba304af25523c8d38dcd2.json b/packages/app-lib/.sqlx/query-7ea54f8960b92b275b5f9d4190c44bedb489b84d81eba304af25523c8d38dcd2.json
new file mode 100644
index 0000000000..e97640f36b
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-7ea54f8960b92b275b5f9d4190c44bedb489b84d81eba304af25523c8d38dcd2.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO screenshots (\n\t\t\tid,\n\t\t\tinstance_id,\n\t\t\tfile_name,\n\t\t\tcontent_hash,\n\t\t\tfile_size,\n\t\t\tmodified_at,\n\t\t\tcreated_at\n\t\t)\n\t\tVALUES (?, ?, ?, ?, ?, ?, ?)\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 7
+    },
+    "nullable": []
+  },
+  "hash": "7ea54f8960b92b275b5f9d4190c44bedb489b84d81eba304af25523c8d38dcd2"
+}
diff --git a/packages/app-lib/.sqlx/query-8540ff309e2e5eaef1a3f76bdf877504cc79e5b200d5c260d86bb33e093112d9.json b/packages/app-lib/.sqlx/query-8540ff309e2e5eaef1a3f76bdf877504cc79e5b200d5c260d86bb33e093112d9.json
new file mode 100644
index 0000000000..1bdfb5581b
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-8540ff309e2e5eaef1a3f76bdf877504cc79e5b200d5c260d86bb33e093112d9.json
@@ -0,0 +1,26 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT feature, globally_enabled AS \"globally_enabled!: bool\"\n\t\tFROM sync_feature_settings\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "feature",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "globally_enabled!: bool",
+        "ordinal": 1,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false
+    ]
+  },
+  "hash": "8540ff309e2e5eaef1a3f76bdf877504cc79e5b200d5c260d86bb33e093112d9"
+}
diff --git a/packages/app-lib/.sqlx/query-8aa89bfd90dba93d7ae2274f0b1e591e1a305966ffaa84fbc2e15cccc98854aa.json b/packages/app-lib/.sqlx/query-8aa89bfd90dba93d7ae2274f0b1e591e1a305966ffaa84fbc2e15cccc98854aa.json
new file mode 100644
index 0000000000..52620432e0
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-8aa89bfd90dba93d7ae2274f0b1e591e1a305966ffaa84fbc2e15cccc98854aa.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\t\tINSERT INTO processes\n\t\t\t\t\t(pid, start_time, name, executable, instance_id,\n\t\t\t\t\t post_exit_command)\n\t\t\t\tVALUES (?, ?, ?, ?, ?, ?)\n\t\t\t\tON CONFLICT(pid) DO UPDATE SET\n\t\t\t\t\tstart_time = excluded.start_time,\n\t\t\t\t\tname = excluded.name,\n\t\t\t\t\texecutable = excluded.executable,\n\t\t\t\t\tinstance_id = excluded.instance_id,\n\t\t\t\t\tpost_exit_command = excluded.post_exit_command\n\t\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 6
+    },
+    "nullable": []
+  },
+  "hash": "8aa89bfd90dba93d7ae2274f0b1e591e1a305966ffaa84fbc2e15cccc98854aa"
+}
diff --git a/packages/app-lib/.sqlx/query-8aae262e7a2e6375164af3b296465d017d21a6c6476d0f2ae09c076d75f0dda3.json b/packages/app-lib/.sqlx/query-8aae262e7a2e6375164af3b296465d017d21a6c6476d0f2ae09c076d75f0dda3.json
new file mode 100644
index 0000000000..be54b69428
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-8aae262e7a2e6375164af3b296465d017d21a6c6476d0f2ae09c076d75f0dda3.json
@@ -0,0 +1,10 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tUPDATE screenshots\n\t\tSET\n\t\t\tinstance_id = ?,\n\t\t\tfile_name = ?,\n\t\t\tcontent_hash = ?,\n\t\t\tfile_size = ?,\n\t\t\tmodified_at = ?,\n\t\t\tcreated_at = ?\n\t\tWHERE id = ?\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": { "Right": 7 },
+    "nullable": []
+  },
+  "hash": "8aae262e7a2e6375164af3b296465d017d21a6c6476d0f2ae09c076d75f0dda3"
+}
diff --git a/packages/app-lib/.sqlx/query-8bff2deeaa56090262af4ce54c7f53b73af4d0715d7c15732416d7ecf6204019.json b/packages/app-lib/.sqlx/query-8bff2deeaa56090262af4ce54c7f53b73af4d0715d7c15732416d7ecf6204019.json
new file mode 100644
index 0000000000..98f4c3c028
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-8bff2deeaa56090262af4ce54c7f53b73af4d0715d7c15732416d7ecf6204019.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "UPDATE synced_servers SET position = position + ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "8bff2deeaa56090262af4ce54c7f53b73af4d0715d7c15732416d7ecf6204019"
+}
diff --git a/packages/app-lib/.sqlx/query-8cde9f140077c5b11ff4c5b174d75c1883beaecc71a81d50e6a67d0565782ba0.json b/packages/app-lib/.sqlx/query-8cde9f140077c5b11ff4c5b174d75c1883beaecc71a81d50e6a67d0565782ba0.json
new file mode 100644
index 0000000000..a2f33faeff
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-8cde9f140077c5b11ff4c5b174d75c1883beaecc71a81d50e6a67d0565782ba0.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO instance_sync_checkpoints\n\t\t\t(instance_id, feature, variant, expected_sha1, merge_base,\n\t\t\t source_revision, status, link_mode)\n\t\tVALUES (?, 'multiplayer_servers', 'default', ?, NULL, ?,\n\t\t\t'pending', NULL)\n\t\tON CONFLICT(instance_id, feature, variant) DO UPDATE SET\n\t\t\texpected_sha1 = excluded.expected_sha1,\n\t\t\tmerge_base = NULL,\n\t\t\tsource_revision = excluded.source_revision,\n\t\t\tstatus = 'pending',\n\t\t\tlink_mode = NULL\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "8cde9f140077c5b11ff4c5b174d75c1883beaecc71a81d50e6a67d0565782ba0"
+}
diff --git a/packages/app-lib/.sqlx/query-9182f6a8ea76fef826b442ff07ae8f44f71a1e3131d56e06aae05b26d4bbdebd.json b/packages/app-lib/.sqlx/query-9182f6a8ea76fef826b442ff07ae8f44f71a1e3131d56e06aae05b26d4bbdebd.json
new file mode 100644
index 0000000000..ab75ba11e1
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-9182f6a8ea76fef826b442ff07ae8f44f71a1e3131d56e06aae05b26d4bbdebd.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT version_id\n\t\tFROM instance_server_pack_state\n\t\tWHERE instance_id = ?\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "version_id",
+        "ordinal": 0,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      true
+    ]
+  },
+  "hash": "9182f6a8ea76fef826b442ff07ae8f44f71a1e3131d56e06aae05b26d4bbdebd"
+}
diff --git a/packages/app-lib/.sqlx/query-92fb9a65a4d741ffc64c62c65f94172cb6567c6c055399632d960548672ce343.json b/packages/app-lib/.sqlx/query-92fb9a65a4d741ffc64c62c65f94172cb6567c6c055399632d960548672ce343.json
new file mode 100644
index 0000000000..ae453fdeed
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-92fb9a65a4d741ffc64c62c65f94172cb6567c6c055399632d960548672ce343.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO instance_sync_checkpoints\n\t\t\t(instance_id, feature, variant, expected_sha1, merge_base,\n\t\t\t source_revision, status, link_mode)\n\t\tVALUES (?, ?, ?, ?, ?, ?, 'pending', NULL)\n\t\tON CONFLICT(instance_id, feature, variant) DO UPDATE SET\n\t\t\texpected_sha1 = excluded.expected_sha1,\n\t\t\tmerge_base = excluded.merge_base,\n\t\t\tsource_revision = excluded.source_revision,\n\t\t\tstatus = 'pending',\n\t\t\tlink_mode = NULL\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 6
+    },
+    "nullable": []
+  },
+  "hash": "92fb9a65a4d741ffc64c62c65f94172cb6567c6c055399632d960548672ce343"
+}
diff --git a/packages/app-lib/.sqlx/query-98fbd284e94d1c509ded25c1c17004b3283447e78920e762bcac2765fca6f3eb.json b/packages/app-lib/.sqlx/query-98fbd284e94d1c509ded25c1c17004b3283447e78920e762bcac2765fca6f3eb.json
new file mode 100644
index 0000000000..78605fb32b
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-98fbd284e94d1c509ded25c1c17004b3283447e78920e762bcac2765fca6f3eb.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT instance_id FROM screenshots WHERE id = ?",
+  "describe": {
+    "columns": [
+      {
+        "name": "instance_id",
+        "ordinal": 0,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "98fbd284e94d1c509ded25c1c17004b3283447e78920e762bcac2765fca6f3eb"
+}
diff --git a/packages/app-lib/.sqlx/query-9dbcad56f76eca4497e928a6367f9d3a54720cbdcdf957b985ec7bef43dbe978.json b/packages/app-lib/.sqlx/query-9dbcad56f76eca4497e928a6367f9d3a54720cbdcdf957b985ec7bef43dbe978.json
new file mode 100644
index 0000000000..d3f03a0531
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-9dbcad56f76eca4497e928a6367f9d3a54720cbdcdf957b985ec7bef43dbe978.json
@@ -0,0 +1,32 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT id, position, nbt\n\t\tFROM synced_servers\n\t\tORDER BY position\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "position",
+        "ordinal": 1,
+        "type_info": "Integer"
+      },
+      {
+        "name": "nbt",
+        "ordinal": 2,
+        "type_info": "Blob"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "9dbcad56f76eca4497e928a6367f9d3a54720cbdcdf957b985ec7bef43dbe978"
+}
diff --git a/packages/app-lib/.sqlx/query-a0705b02be354c37f7a1294eca7eba891c23cd79886a97d91bddb7019baab3ce.json b/packages/app-lib/.sqlx/query-a0705b02be354c37f7a1294eca7eba891c23cd79886a97d91bddb7019baab3ce.json
new file mode 100644
index 0000000000..0cb2b6b16f
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-a0705b02be354c37f7a1294eca7eba891c23cd79886a97d91bddb7019baab3ce.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM screenshots WHERE instance_id = ? AND file_name = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "a0705b02be354c37f7a1294eca7eba891c23cd79886a97d91bddb7019baab3ce"
+}
diff --git a/packages/app-lib/.sqlx/query-a1313b9534a5eec443721ad6ac904f808cff64f5341e2b82bc6b934fb99078b3.json b/packages/app-lib/.sqlx/query-a1313b9534a5eec443721ad6ac904f808cff64f5341e2b82bc6b934fb99078b3.json
new file mode 100644
index 0000000000..d9af0a67a6
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-a1313b9534a5eec443721ad6ac904f808cff64f5341e2b82bc6b934fb99078b3.json
@@ -0,0 +1,38 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT server_id, owner, nbt, position\n\t\tFROM instance_server_projection_entries\n\t\tWHERE instance_id = ?\n\t\tORDER BY position\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "server_id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "owner",
+        "ordinal": 1,
+        "type_info": "Text"
+      },
+      {
+        "name": "nbt",
+        "ordinal": 2,
+        "type_info": "Blob"
+      },
+      {
+        "name": "position",
+        "ordinal": 3,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "a1313b9534a5eec443721ad6ac904f808cff64f5341e2b82bc6b934fb99078b3"
+}
diff --git a/packages/app-lib/.sqlx/query-a27af45c646b3bea98974f0b2f63c6f3e5719319ce8469e0304fd2d93e046006.json b/packages/app-lib/.sqlx/query-a27af45c646b3bea98974f0b2f63c6f3e5719319ce8469e0304fd2d93e046006.json
new file mode 100644
index 0000000000..ebc4089c43
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-a27af45c646b3bea98974f0b2f63c6f3e5719319ce8469e0304fd2d93e046006.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT revision AS \"revision!: i64\"\n\t\tFROM synced_server_state\n\t\tWHERE singleton = 1\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "revision!: i64",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "a27af45c646b3bea98974f0b2f63c6f3e5719319ce8469e0304fd2d93e046006"
+}
diff --git a/packages/app-lib/.sqlx/query-a83e168791306f30ee6f03a274398455c6db66d485824f27ab198c3f00de1770.json b/packages/app-lib/.sqlx/query-a83e168791306f30ee6f03a274398455c6db66d485824f27ab198c3f00de1770.json
new file mode 100644
index 0000000000..96a168d698
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-a83e168791306f30ee6f03a274398455c6db66d485824f27ab198c3f00de1770.json
@@ -0,0 +1,19 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT\n\t\t\tscreenshots.id,\n\t\t\tscreenshots.instance_id,\n\t\t\tscreenshots.file_name,\n\t\t\tscreenshots.content_hash,\n\t\t\tscreenshots.file_size,\n\t\t\tscreenshots.modified_at,\n\t\t\tscreenshots.created_at,\n\t\t\tmemberships.group_id AS \"group_id?\"\n\t\tFROM screenshots\n\t\tLEFT JOIN screenshot_group_memberships memberships\n\t\t\tON memberships.screenshot_id = screenshots.id\n\t\tWHERE screenshots.instance_id = ?\n\t\tORDER BY screenshots.file_name, screenshots.id\n\t\t",
+  "describe": {
+    "columns": [
+      { "name": "id", "ordinal": 0, "type_info": "Text" },
+      { "name": "instance_id", "ordinal": 1, "type_info": "Text" },
+      { "name": "file_name", "ordinal": 2, "type_info": "Text" },
+      { "name": "content_hash", "ordinal": 3, "type_info": "Text" },
+      { "name": "file_size", "ordinal": 4, "type_info": "Integer" },
+      { "name": "modified_at", "ordinal": 5, "type_info": "Integer" },
+      { "name": "created_at", "ordinal": 6, "type_info": "Integer" },
+      { "name": "group_id?", "ordinal": 7, "type_info": "Text" }
+    ],
+    "parameters": { "Right": 1 },
+    "nullable": [false, false, false, false, false, false, false, false]
+  },
+  "hash": "a83e168791306f30ee6f03a274398455c6db66d485824f27ab198c3f00de1770"
+}
diff --git a/packages/app-lib/.sqlx/query-b012838123b5acd053412951b0044857cc3145d7936b79ab4cf6adcbeeec3095.json b/packages/app-lib/.sqlx/query-b012838123b5acd053412951b0044857cc3145d7936b79ab4cf6adcbeeec3095.json
new file mode 100644
index 0000000000..858f19fe9c
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-b012838123b5acd053412951b0044857cc3145d7936b79ab4cf6adcbeeec3095.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT EXISTS(\n\t\t\tSELECT 1 FROM synced_server_state WHERE singleton = 1\n\t\t) AS \"initialized!: bool\"\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "initialized!: bool",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "b012838123b5acd053412951b0044857cc3145d7936b79ab4cf6adcbeeec3095"
+}
diff --git a/packages/app-lib/.sqlx/query-c3448ac48772d99b4cfd296996a93230488492804bb4f1d5ccec4a90454438f7.json b/packages/app-lib/.sqlx/query-c3448ac48772d99b4cfd296996a93230488492804bb4f1d5ccec4a90454438f7.json
new file mode 100644
index 0000000000..46844e3cfb
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-c3448ac48772d99b4cfd296996a93230488492804bb4f1d5ccec4a90454438f7.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\tINSERT INTO screenshot_groups (id, name, display_order)\n\t\t\tVALUES (?, ?, ?)\n\t\t\tON CONFLICT(id) DO UPDATE SET name = excluded.name\n\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "c3448ac48772d99b4cfd296996a93230488492804bb4f1d5ccec4a90454438f7"
+}
diff --git a/packages/app-lib/.sqlx/query-c695093aadc64edd159fce723d1e053f5fb7e204e01e54892168c6c36873d60f.json b/packages/app-lib/.sqlx/query-c695093aadc64edd159fce723d1e053f5fb7e204e01e54892168c6c36873d60f.json
new file mode 100644
index 0000000000..bbb52a3c66
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-c695093aadc64edd159fce723d1e053f5fb7e204e01e54892168c6c36873d60f.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "INSERT INTO screenshot_groups (id, name, display_order) VALUES (?, ?, 0)",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "c695093aadc64edd159fce723d1e053f5fb7e204e01e54892168c6c36873d60f"
+}
diff --git a/packages/app-lib/.sqlx/query-cd9918f43f0f30b863ee48a7626782521100fac266da99102379ba01a89e9076.json b/packages/app-lib/.sqlx/query-cd9918f43f0f30b863ee48a7626782521100fac266da99102379ba01a89e9076.json
new file mode 100644
index 0000000000..71539ad7c2
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-cd9918f43f0f30b863ee48a7626782521100fac266da99102379ba01a89e9076.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "INSERT INTO screenshot_group_memberships (screenshot_id, group_id) VALUES (?, ?)",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "cd9918f43f0f30b863ee48a7626782521100fac266da99102379ba01a89e9076"
+}
diff --git a/packages/app-lib/.sqlx/query-d4879ae44bd13fb97606876e9c67e0ae6202cd391ce25a26642fcfffff05c688.json b/packages/app-lib/.sqlx/query-d4879ae44bd13fb97606876e9c67e0ae6202cd391ce25a26642fcfffff05c688.json
new file mode 100644
index 0000000000..afb1e18e66
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-d4879ae44bd13fb97606876e9c67e0ae6202cd391ce25a26642fcfffff05c688.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tUPDATE instance_sync_checkpoints\n\t\tSET status = 'ready', link_mode = ?\n\t\tWHERE instance_id = ? AND feature = ? AND variant = ?\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 4
+    },
+    "nullable": []
+  },
+  "hash": "d4879ae44bd13fb97606876e9c67e0ae6202cd391ce25a26642fcfffff05c688"
+}
diff --git a/packages/app-lib/.sqlx/query-d8f74c9d677ac6cc41503f1c88d3b360940b0419833a5679133fff5faaa81201.json b/packages/app-lib/.sqlx/query-d8f74c9d677ac6cc41503f1c88d3b360940b0419833a5679133fff5faaa81201.json
new file mode 100644
index 0000000000..e2f95e6813
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-d8f74c9d677ac6cc41503f1c88d3b360940b0419833a5679133fff5faaa81201.json
@@ -0,0 +1,44 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT id, source, excluded_synced_server_id, nbt, position\n\t\tFROM instance_servers\n\t\tWHERE instance_id = ?\n\t\tORDER BY position\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "source",
+        "ordinal": 1,
+        "type_info": "Text"
+      },
+      {
+        "name": "excluded_synced_server_id",
+        "ordinal": 2,
+        "type_info": "Text"
+      },
+      {
+        "name": "nbt",
+        "ordinal": 3,
+        "type_info": "Blob"
+      },
+      {
+        "name": "position",
+        "ordinal": 4,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "d8f74c9d677ac6cc41503f1c88d3b360940b0419833a5679133fff5faaa81201"
+}
diff --git a/packages/app-lib/.sqlx/query-db467f33a061ee2b39c3729596a49a24fd1debeeef6495fd49cc1da50e8f56b5.json b/packages/app-lib/.sqlx/query-db467f33a061ee2b39c3729596a49a24fd1debeeef6495fd49cc1da50e8f56b5.json
new file mode 100644
index 0000000000..66bfe04e4d
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-db467f33a061ee2b39c3729596a49a24fd1debeeef6495fd49cc1da50e8f56b5.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\tINSERT INTO instance_server_projection_entries\n\t\t\t\t(instance_id, owner, server_id, nbt, position)\n\t\t\tVALUES (?, ?, ?, ?, ?)\n\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 5
+    },
+    "nullable": []
+  },
+  "hash": "db467f33a061ee2b39c3729596a49a24fd1debeeef6495fd49cc1da50e8f56b5"
+}
diff --git a/packages/app-lib/.sqlx/query-df901b84d082e28c63b41db4a0de9c86aa6b24f126c30a02b50473d4a0b78086.json b/packages/app-lib/.sqlx/query-df901b84d082e28c63b41db4a0de9c86aa6b24f126c30a02b50473d4a0b78086.json
new file mode 100644
index 0000000000..6d0c79bf9b
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-df901b84d082e28c63b41db4a0de9c86aa6b24f126c30a02b50473d4a0b78086.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO synced_hotbar_state\n\t\t\t(singleton, schema_version, revision, nbt)\n\t\tVALUES (1, ?, ?, ?)\n\t\tON CONFLICT(singleton) DO UPDATE SET\n\t\t\tschema_version = excluded.schema_version,\n\t\t\trevision = excluded.revision,\n\t\t\tnbt = excluded.nbt\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "df901b84d082e28c63b41db4a0de9c86aa6b24f126c30a02b50473d4a0b78086"
+}
diff --git a/packages/app-lib/.sqlx/query-e6a85166a48a4350d3876e3902ad04834e26b15af36df178c16da30b5fdda090.json b/packages/app-lib/.sqlx/query-e6a85166a48a4350d3876e3902ad04834e26b15af36df178c16da30b5fdda090.json
new file mode 100644
index 0000000000..deb274d69c
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-e6a85166a48a4350d3876e3902ad04834e26b15af36df178c16da30b5fdda090.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT EXISTS(\n\t\t\tSELECT 1 FROM sync_feature_settings\n\t\t\tWHERE feature = 'multiplayer_servers' AND globally_enabled = 1\n\t\t) AS \"enabled!: bool\"\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "enabled!: bool",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "e6a85166a48a4350d3876e3902ad04834e26b15af36df178c16da30b5fdda090"
+}
diff --git a/packages/app-lib/.sqlx/query-e9ab62553f47a98c02b45655f589df2d66a0bb9f2aa766f2fe979cd82c0536a6.json b/packages/app-lib/.sqlx/query-e9ab62553f47a98c02b45655f589df2d66a0bb9f2aa766f2fe979cd82c0536a6.json
new file mode 100644
index 0000000000..dc37d06e40
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-e9ab62553f47a98c02b45655f589df2d66a0bb9f2aa766f2fe979cd82c0536a6.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO instance_sync_preferences (instance_id, feature, enabled)\n\t\tVALUES (?, ?, ?)\n\t\tON CONFLICT (instance_id, feature) DO UPDATE SET\n\t\t\tenabled = excluded.enabled\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "e9ab62553f47a98c02b45655f589df2d66a0bb9f2aa766f2fe979cd82c0536a6"
+}
diff --git a/packages/app-lib/.sqlx/query-ea6de6d2969a82372bceee3c886e521fa08921e146ae79ea4bd0990fa1cc11ba.json b/packages/app-lib/.sqlx/query-ea6de6d2969a82372bceee3c886e521fa08921e146ae79ea4bd0990fa1cc11ba.json
new file mode 100644
index 0000000000..2b06253a1b
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-ea6de6d2969a82372bceee3c886e521fa08921e146ae79ea4bd0990fa1cc11ba.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\t\tINSERT INTO synced_servers (id, position, nbt)\n\t\t\tVALUES (?, ?, ?)\n\t\t\tON CONFLICT(id) DO UPDATE SET\n\t\t\t\tposition = excluded.position,\n\t\t\t\tnbt = excluded.nbt\n\t\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "ea6de6d2969a82372bceee3c886e521fa08921e146ae79ea4bd0990fa1cc11ba"
+}
diff --git a/packages/app-lib/.sqlx/query-edaca667a0fcd5b429b1788e2b4693a973084f3c3ffe8d521daf8d553957f5ae.json b/packages/app-lib/.sqlx/query-edaca667a0fcd5b429b1788e2b4693a973084f3c3ffe8d521daf8d553957f5ae.json
new file mode 100644
index 0000000000..84c3b5de60
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-edaca667a0fcd5b429b1788e2b4693a973084f3c3ffe8d521daf8d553957f5ae.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "DELETE FROM instance_servers WHERE instance_id = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "edaca667a0fcd5b429b1788e2b4693a973084f3c3ffe8d521daf8d553957f5ae"
+}
diff --git a/packages/app-lib/.sqlx/query-efd07185aa3047caee3b3323aeb5414f0ab43a9c28c4ea2327cd0022876b925f.json b/packages/app-lib/.sqlx/query-efd07185aa3047caee3b3323aeb5414f0ab43a9c28c4ea2327cd0022876b925f.json
new file mode 100644
index 0000000000..40d5de38b4
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-efd07185aa3047caee3b3323aeb5414f0ab43a9c28c4ea2327cd0022876b925f.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO instance_sync_preferences (instance_id, feature, enabled)\n\t\tSELECT ?, feature, new_instance_default\n\t\tFROM sync_feature_settings\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "efd07185aa3047caee3b3323aeb5414f0ab43a9c28c4ea2327cd0022876b925f"
+}
diff --git a/packages/app-lib/.sqlx/query-f0b9a997d247d3b53604e96c075b5ef93185aab1e2722fd13bbdae287d988c2f.json b/packages/app-lib/.sqlx/query-f0b9a997d247d3b53604e96c075b5ef93185aab1e2722fd13bbdae287d988c2f.json
new file mode 100644
index 0000000000..5196e6ac82
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-f0b9a997d247d3b53604e96c075b5ef93185aab1e2722fd13bbdae287d988c2f.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT EXISTS(\n\t\t\tSELECT 1 FROM synced_hotbar_state WHERE singleton = 1\n\t\t) AS \"exists!: bool\"\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "exists!: bool",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "f0b9a997d247d3b53604e96c075b5ef93185aab1e2722fd13bbdae287d988c2f"
+}
diff --git a/packages/app-lib/.sqlx/query-fc91a68aaf7e6762d3bddbd4fe4e461b77671619a65fb809bd9b8ed9ab71baaa.json b/packages/app-lib/.sqlx/query-fc91a68aaf7e6762d3bddbd4fe4e461b77671619a65fb809bd9b8ed9ab71baaa.json
new file mode 100644
index 0000000000..5b2dcbb69b
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-fc91a68aaf7e6762d3bddbd4fe4e461b77671619a65fb809bd9b8ed9ab71baaa.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tSELECT EXISTS(SELECT 1 FROM instances WHERE id = ?)\n\t\t\tAS \"exists!: bool\"\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "name": "exists!: bool",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "fc91a68aaf7e6762d3bddbd4fe4e461b77671619a65fb809bd9b8ed9ab71baaa"
+}
diff --git a/packages/app-lib/.sqlx/query-fd2eb3ed33e2a0eaca507bbe156640acd542e91c99fa491b282542ec4c58032c.json b/packages/app-lib/.sqlx/query-fd2eb3ed33e2a0eaca507bbe156640acd542e91c99fa491b282542ec4c58032c.json
new file mode 100644
index 0000000000..5bdd62c433
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-fd2eb3ed33e2a0eaca507bbe156640acd542e91c99fa491b282542ec4c58032c.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT COALESCE(MAX(display_order) + 1, 0) AS 'display_order!: i64' FROM screenshot_groups",
+  "describe": {
+    "columns": [
+      {
+        "name": "display_order!: i64",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "fd2eb3ed33e2a0eaca507bbe156640acd542e91c99fa491b282542ec4c58032c"
+}
diff --git a/packages/app-lib/.sqlx/query-ffc9e28c260ab9f2f5f57b88fc6cda439b83265cc885d720104f61d8defcba66.json b/packages/app-lib/.sqlx/query-ffc9e28c260ab9f2f5f57b88fc6cda439b83265cc885d720104f61d8defcba66.json
new file mode 100644
index 0000000000..9a39fadf9b
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-ffc9e28c260ab9f2f5f57b88fc6cda439b83265cc885d720104f61d8defcba66.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n\t\tINSERT INTO sync_feature_settings\n\t\t\t(feature, globally_enabled, new_instance_default)\n\t\tVALUES (?, ?, 1)\n\t\tON CONFLICT(feature) DO UPDATE SET\n\t\t\tglobally_enabled = excluded.globally_enabled\n\t\t",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "ffc9e28c260ab9f2f5f57b88fc6cda439b83265cc885d720104f61d8defcba66"
+}
diff --git a/packages/app-lib/migrations/20260819120000_instance-synced-options.sql b/packages/app-lib/migrations/20260819120000_instance-synced-options.sql
new file mode 100644
index 0000000000..5398d14dc3
--- /dev/null
+++ b/packages/app-lib/migrations/20260819120000_instance-synced-options.sql
@@ -0,0 +1,123 @@
+-- Global switches and defaults for each sync feature.
+CREATE TABLE sync_feature_settings (
+	feature TEXT PRIMARY KEY NOT NULL,
+	globally_enabled INTEGER NOT NULL CHECK (globally_enabled IN (0, 1)),
+	new_instance_default INTEGER NOT NULL CHECK (new_instance_default IN (0, 1))
+);
+
+INSERT INTO sync_feature_settings
+	(feature, globally_enabled, new_instance_default)
+VALUES
+	('command_history', 1, 1),
+	('multiplayer_servers', 1, 1),
+	('creative_hotbars', 1, 1),
+	('screenshots', 1, 1);
+
+-- Each instance's switches for the sync features.
+CREATE TABLE instance_sync_preferences (
+	instance_id TEXT NOT NULL,
+	feature TEXT NOT NULL,
+	enabled INTEGER NOT NULL CHECK (enabled IN (0, 1)),
+	PRIMARY KEY (instance_id, feature),
+	FOREIGN KEY (instance_id) REFERENCES instances (id)
+		ON DELETE CASCADE,
+	FOREIGN KEY (feature) REFERENCES sync_feature_settings (feature)
+		ON DELETE CASCADE
+);
+
+CREATE INDEX instance_sync_preferences_feature_enabled ON instance_sync_preferences (
+	feature,
+	enabled
+);
+
+-- Existing instances pre-update will have screenshots on, everything else off.
+INSERT INTO instance_sync_preferences (instance_id, feature, enabled)
+SELECT instances.id, features.feature, features.enabled
+FROM
+	instances
+	CROSS JOIN (
+		SELECT 'command_history' AS feature, 0 AS enabled
+		UNION ALL
+		SELECT 'multiplayer_servers', 0
+		UNION ALL
+		SELECT 'creative_hotbars', 0
+		UNION ALL
+		SELECT 'screenshots', 1
+	) AS features;
+
+-- The file each instance should have, and whether writing it finished.
+-- For hotbars, merge_base is the last file we generated.
+CREATE TABLE instance_sync_checkpoints (
+	instance_id TEXT NOT NULL,
+	feature TEXT NOT NULL,
+	variant TEXT NOT NULL CHECK (variant IN ('default', 'legacy', 'components')),
+	expected_sha1 TEXT NOT NULL,
+	merge_base BLOB,
+	source_revision INTEGER NOT NULL CHECK (source_revision >= 0),
+	status TEXT NOT NULL CHECK (status IN ('pending', 'ready')),
+	link_mode TEXT CHECK (link_mode IS NULL OR link_mode IN ('copy', 'hard', 'symbolic')),
+	PRIMARY KEY (instance_id, feature, variant),
+	FOREIGN KEY (instance_id, feature) REFERENCES instance_sync_preferences (instance_id, feature)
+		ON DELETE CASCADE
+);
+
+-- The shared hotbars. No row means they have not been set up yet.
+CREATE TABLE synced_hotbar_state (
+	singleton INTEGER PRIMARY KEY NOT NULL CHECK (singleton = 1),
+	schema_version INTEGER NOT NULL CHECK (schema_version >= 1),
+	revision INTEGER NOT NULL CHECK (revision >= 0),
+	nbt BLOB NOT NULL
+);
+
+-- The shared server-list revision after server sync has been set up.
+-- This row still exists when the shared server list is empty.
+CREATE TABLE synced_server_state (
+	singleton INTEGER PRIMARY KEY NOT NULL CHECK (singleton = 1),
+	revision INTEGER NOT NULL CHECK (revision >= 0)
+);
+
+-- The shared multiplayer server list.
+CREATE TABLE synced_servers (
+	id TEXT PRIMARY KEY NOT NULL,
+	position INTEGER NOT NULL UNIQUE CHECK (position >= 0),
+	nbt BLOB NOT NULL
+);
+
+-- Servers that only belong to one instance.
+-- excluded_synced_server_id is the shared server replaced by a local copy.
+CREATE TABLE instance_servers (
+	instance_id TEXT NOT NULL,
+	id TEXT NOT NULL,
+	source TEXT NOT NULL CHECK (source IN ('modpack', 'local_desynced')),
+	excluded_synced_server_id TEXT,
+	nbt BLOB NOT NULL,
+	position INTEGER NOT NULL CHECK (position >= 0),
+	PRIMARY KEY (instance_id, id),
+	UNIQUE (instance_id, position),
+	FOREIGN KEY (instance_id) REFERENCES instances (id)
+		ON DELETE CASCADE,
+	FOREIGN KEY (excluded_synced_server_id) REFERENCES synced_servers (id)
+		ON DELETE SET NULL
+);
+
+-- The servers.dat we last wrote for each instance.
+-- Used to work out what changed the next time we read it.
+CREATE TABLE instance_server_projection_entries (
+	instance_id TEXT NOT NULL,
+	owner TEXT NOT NULL CHECK (owner IN ('synced', 'instance')),
+	server_id TEXT NOT NULL,
+	nbt BLOB NOT NULL,
+	position INTEGER NOT NULL CHECK (position >= 0),
+	PRIMARY KEY (instance_id, owner, server_id),
+	UNIQUE (instance_id, position),
+	FOREIGN KEY (instance_id) REFERENCES instances (id)
+		ON DELETE CASCADE
+);
+
+-- Tracks whether we have read the modpack's server list for this instance.
+CREATE TABLE instance_server_pack_state (
+	instance_id TEXT PRIMARY KEY NOT NULL,
+	version_id TEXT,
+	FOREIGN KEY (instance_id) REFERENCES instances (id)
+		ON DELETE CASCADE
+);
diff --git a/packages/app-lib/migrations/20260819130000_screenshot-groups.sql b/packages/app-lib/migrations/20260819130000_screenshot-groups.sql
new file mode 100644
index 0000000000..ec9827ab0e
--- /dev/null
+++ b/packages/app-lib/migrations/20260819130000_screenshot-groups.sql
@@ -0,0 +1,41 @@
+CREATE TABLE screenshots (
+	id TEXT NOT NULL,
+	instance_id TEXT NOT NULL,
+	file_name TEXT NOT NULL,
+	content_hash TEXT NOT NULL,
+	file_size INTEGER NOT NULL,
+	modified_at INTEGER NOT NULL,
+	created_at INTEGER NOT NULL,
+
+	PRIMARY KEY (id),
+	UNIQUE (instance_id, file_name),
+	FOREIGN KEY (instance_id) REFERENCES instances(id) ON DELETE CASCADE
+);
+
+CREATE INDEX screenshots_instance_id ON screenshots(instance_id);
+CREATE INDEX screenshots_instance_hash
+	ON screenshots(instance_id, content_hash, file_size);
+
+CREATE TABLE screenshot_groups (
+	id TEXT NOT NULL,
+	name TEXT NOT NULL,
+	display_order INTEGER NOT NULL DEFAULT 0,
+
+	PRIMARY KEY (id),
+	CHECK (length(trim(name)) > 0)
+);
+
+CREATE INDEX screenshot_groups_display_order
+	ON screenshot_groups(display_order);
+
+CREATE TABLE screenshot_group_memberships (
+	screenshot_id TEXT NOT NULL,
+	group_id TEXT NOT NULL,
+
+	PRIMARY KEY (screenshot_id),
+	FOREIGN KEY (screenshot_id) REFERENCES screenshots(id) ON DELETE CASCADE,
+	FOREIGN KEY (group_id) REFERENCES screenshot_groups(id) ON DELETE CASCADE
+);
+
+CREATE INDEX screenshot_group_memberships_group_id
+	ON screenshot_group_memberships(group_id);
diff --git a/packages/app-lib/migrations/20260824120000_screenshot-editor-state.sql b/packages/app-lib/migrations/20260824120000_screenshot-editor-state.sql
new file mode 100644
index 0000000000..317e71e1a2
--- /dev/null
+++ b/packages/app-lib/migrations/20260824120000_screenshot-editor-state.sql
@@ -0,0 +1 @@
+ALTER TABLE screenshots ADD COLUMN editor_state TEXT;
diff --git a/packages/app-lib/src/api/instance.rs b/packages/app-lib/src/api/instance.rs
index 54249b0e1e..1b5f1baf68 100644
--- a/packages/app-lib/src/api/instance.rs
+++ b/packages/app-lib/src/api/instance.rs
@@ -11,7 +11,11 @@ mod lifecycle;
 mod paths;
 mod projects;
 mod run;
+mod screenshot_groups;
+mod screenshots;
 mod shared;
+mod synced_options;
+pub(crate) mod synced_servers;
 
 pub use self::content::{
     get_content_items, get_dependencies_as_content_items,
@@ -38,7 +42,7 @@ pub(crate) use self::icon::{
 };
 pub use self::install::get_optimal_jre_key;
 pub(crate) use self::lifecycle::create;
-pub use self::lifecycle::{edit, remove};
+pub use self::lifecycle::{edit, remove, set_synced_option};
 pub use self::paths::{get_full_path, get_mod_full_path};
 pub use self::projects::{
     InstallProjectWithDependenciesRequest, add_project_from_path,
@@ -51,6 +55,19 @@ pub use self::projects::{
 pub use self::run::{
     QuickPlayType, kill, run, try_update_playtime_by_instance_id,
 };
+pub use self::screenshot_groups::{
+    ScreenshotGroup, ScreenshotGroupImport, ScreenshotGroupMembershipUpdate,
+    create_screenshot_group, delete_screenshot_group, import_screenshot_groups,
+    list_screenshot_groups, rename_screenshot_group,
+    set_screenshot_group_memberships,
+};
+pub(crate) use self::screenshots::reconcile_screenshots;
+pub use self::screenshots::{
+    InstanceScreenshot, ScreenshotEditSaveMode, ScreenshotKey,
+    delete_screenshots, export_screenshots, get_screenshot_path,
+    list_all_screenshots, list_screenshots, list_synced_screenshots,
+    move_screenshots, save_edited_screenshot,
+};
 pub(crate) use self::shared::{
     CONFIG_BUNDLE_FILE_TYPE, CONFIG_DIRECTORY, CONFIG_FILE_EXTENSIONS,
     CONFIG_SYNC_ENABLED, MAX_CONFIG_BUNDLE_ENTRIES,
@@ -74,3 +91,25 @@ pub use self::shared::{
     remove_shared_instance_users, revoke_shared_instance_invite,
     unlink_shared_instance, unpublish_shared_instance, update_shared_instance,
 };
+pub use self::synced_options::{
+    GlobalSyncedOptions, SyncedOptionCapability, SyncedOptionJoinAction,
+    SyncedOptionJoinPreview, SyncedOptionJoinResolution, SyncedOptionsOverview,
+    get_capabilities as get_synced_option_capabilities, get_command_history,
+    get_global_options as get_global_synced_options,
+    get_instance_option_join_preview as get_synced_option_join_preview,
+    get_overview as get_synced_options_overview, get_synced_options_folder,
+    set_command_history, set_global_option as set_global_synced_option,
+};
+pub(crate) use self::synced_options::{
+    monitor_persisted_processes, prepare_instance_update,
+    reconcile_changed_file as reconcile_synced_option_file,
+    remove_generated_instance_files,
+};
+pub use self::synced_options::{
+    reconcile_all as reconcile_all_synced_options,
+    reconcile_instance as reconcile_instance_synced_options,
+};
+pub use self::synced_servers::{
+    DesyncServerMode, ServerSource, SyncedServer, desync_server,
+    list_synced_servers, remove_synced_server, update_synced_server,
+};
diff --git a/packages/app-lib/src/api/instance/lifecycle.rs b/packages/app-lib/src/api/instance/lifecycle.rs
index cd5d7f6c26..dec48b7399 100644
--- a/packages/app-lib/src/api/instance/lifecycle.rs
+++ b/packages/app-lib/src/api/instance/lifecycle.rs
@@ -3,7 +3,7 @@ use crate::event::emit::emit_instance;
 use crate::state::instances::adapters::sqlite::instance_rows;
 use crate::state::{
     CreateInstance, EditInstance, InstanceIconConfig, InstanceLink,
-    InstanceMetadata, ModLoader, State,
+    InstanceMetadata, InstanceSyncedOption, ModLoader, State,
 };
 
 #[tracing::instrument]
@@ -77,6 +77,27 @@ pub async fn edit(
                 .as_error()
         })?;
 
+    super::reconcile_instance_synced_options(instance_id).await?;
+
+    emit_instance(&instance.instance.id, InstancePayloadType::Edited).await?;
+
+    Ok(instance)
+}
+
+pub async fn set_synced_option(
+    instance_id: &str,
+    option: InstanceSyncedOption,
+    enabled: bool,
+    resolution: Option<super::SyncedOptionJoinResolution>,
+) -> crate::Result<InstanceMetadata> {
+    let instance = super::synced_options::set_instance_option(
+        instance_id,
+        option,
+        enabled,
+        resolution,
+    )
+    .await?;
+
     emit_instance(&instance.instance.id, InstancePayloadType::Edited).await?;
 
     Ok(instance)
diff --git a/packages/app-lib/src/api/instance/screenshot_groups.rs b/packages/app-lib/src/api/instance/screenshot_groups.rs
new file mode 100644
index 0000000000..e4b92166d3
--- /dev/null
+++ b/packages/app-lib/src/api/instance/screenshot_groups.rs
@@ -0,0 +1,350 @@
+use crate::State;
+use crate::event::InstancePayloadType;
+use crate::event::emit::emit_instance;
+use crate::state::instances::adapters::sqlite::screenshot_rows;
+use serde::{Deserialize, Serialize};
+use sqlx::{Sqlite, Transaction};
+use std::collections::HashSet;
+use uuid::Uuid;
+
+const MAX_GROUP_NAME_LENGTH: usize = 256;
+
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct ScreenshotGroup {
+    pub id: String,
+    pub name: String,
+}
+
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct ScreenshotGroupMembershipUpdate {
+    pub screenshot_id: String,
+    pub group_id: Option<String>,
+}
+
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub struct ScreenshotGroupImport {
+    pub id: String,
+    pub name: String,
+    pub screenshot_ids: Vec<String>,
+}
+
+fn validate_group_name(name: &str) -> crate::Result<&str> {
+    let name = name.trim();
+    if name.is_empty() {
+        return Err(crate::ErrorKind::InputError(
+            "Group name cannot be empty".to_string(),
+        )
+        .into());
+    }
+    if name.chars().count() > MAX_GROUP_NAME_LENGTH {
+        return Err(crate::ErrorKind::InputError(format!(
+            "Group name cannot exceed {MAX_GROUP_NAME_LENGTH} characters"
+        ))
+        .into());
+    }
+    Ok(name)
+}
+
+pub async fn list_screenshot_groups() -> crate::Result<Vec<ScreenshotGroup>> {
+    let state = State::get().await?;
+    Ok(screenshot_rows::list_groups(&state.pool)
+        .await?
+        .into_iter()
+        .map(|group| ScreenshotGroup {
+            id: group.id,
+            name: group.name,
+        })
+        .collect())
+}
+
+pub async fn create_screenshot_group(
+    name: String,
+    screenshot_ids: Vec<String>,
+) -> crate::Result<ScreenshotGroup> {
+    let name = validate_group_name(&name)?;
+    let state = State::get().await?;
+    let id = Uuid::new_v4().to_string();
+    let mut tx = state.pool.begin().await?;
+
+    sqlx::query!(
+        "UPDATE screenshot_groups SET display_order = display_order + 1",
+    )
+    .execute(&mut *tx)
+    .await?;
+    sqlx::query!(
+        "INSERT INTO screenshot_groups (id, name, display_order) VALUES (?, ?, 0)",
+        id,
+        name,
+    )
+    .execute(&mut *tx)
+    .await?;
+
+    let instance_ids = set_group_members(
+        &id,
+        normalize_screenshot_ids(screenshot_ids)?,
+        &mut tx,
+    )
+    .await?;
+    tx.commit().await?;
+    emit_screenshot_updates(instance_ids).await;
+
+    Ok(ScreenshotGroup {
+        id,
+        name: name.to_string(),
+    })
+}
+
+pub async fn rename_screenshot_group(
+    id: String,
+    new_name: String,
+) -> crate::Result<ScreenshotGroup> {
+    let new_name = validate_group_name(&new_name)?;
+    let state = State::get().await?;
+    let result = sqlx::query!(
+        "UPDATE screenshot_groups SET name = ? WHERE id = ?",
+        new_name,
+        id,
+    )
+    .execute(&state.pool)
+    .await?;
+    if result.rows_affected() == 0 {
+        return Err(crate::ErrorKind::InputError(format!(
+            "Unknown screenshot group {id}"
+        ))
+        .into());
+    }
+
+    Ok(ScreenshotGroup {
+        id,
+        name: new_name.to_string(),
+    })
+}
+
+pub async fn delete_screenshot_group(id: String) -> crate::Result<()> {
+    let state = State::get().await?;
+    let instance_ids = sqlx::query_scalar!(
+        "
+		SELECT DISTINCT screenshots.instance_id
+		FROM screenshot_group_memberships memberships
+		INNER JOIN screenshots ON screenshots.id = memberships.screenshot_id
+		WHERE memberships.group_id = ?
+		",
+        id,
+    )
+    .fetch_all(&state.pool)
+    .await?;
+    let result =
+        sqlx::query!("DELETE FROM screenshot_groups WHERE id = ?", id,)
+            .execute(&state.pool)
+            .await?;
+    if result.rows_affected() == 0 {
+        return Err(crate::ErrorKind::InputError(format!(
+            "Unknown screenshot group {id}"
+        ))
+        .into());
+    }
+    emit_screenshot_updates(instance_ids).await;
+    Ok(())
+}
+
+pub async fn set_screenshot_group_memberships(
+    updates: Vec<ScreenshotGroupMembershipUpdate>,
+) -> crate::Result<()> {
+    let updates = normalize_membership_updates(updates)?;
+    if updates.is_empty() {
+        return Ok(());
+    }
+
+    let state = State::get().await?;
+    let mut tx = state.pool.begin().await?;
+    let group_ids = updates
+        .iter()
+        .filter_map(|update| update.group_id.as_deref())
+        .collect::<HashSet<_>>();
+    for group_id in group_ids {
+        ensure_group_exists(group_id, &mut tx).await?;
+    }
+
+    let mut instance_ids = HashSet::new();
+    for update in updates {
+        let instance_id =
+            screenshot_instance_id(&update.screenshot_id, &mut tx).await?;
+        instance_ids.insert(instance_id);
+        sqlx::query!(
+            "DELETE FROM screenshot_group_memberships WHERE screenshot_id = ?",
+            update.screenshot_id,
+        )
+        .execute(&mut *tx)
+        .await?;
+        if let Some(group_id) = update.group_id {
+            sqlx::query!(
+                "INSERT INTO screenshot_group_memberships (screenshot_id, group_id) VALUES (?, ?)",
+                update.screenshot_id,
+                group_id,
+            )
+            .execute(&mut *tx)
+            .await?;
+        }
+    }
+    tx.commit().await?;
+    emit_screenshot_updates(instance_ids).await;
+    Ok(())
+}
+
+pub async fn import_screenshot_groups(
+    groups: Vec<ScreenshotGroupImport>,
+) -> crate::Result<()> {
+    if groups.is_empty() {
+        return Ok(());
+    }
+
+    let state = State::get().await?;
+    let mut tx = state.pool.begin().await?;
+    let base_order = sqlx::query_scalar!(
+        "SELECT COALESCE(MAX(display_order) + 1, 0) AS 'display_order!: i64' FROM screenshot_groups",
+    )
+    .fetch_one(&mut *tx)
+    .await?;
+    let mut group_ids = HashSet::new();
+    let mut affected_instance_ids = HashSet::new();
+
+    for (index, group) in groups.into_iter().enumerate() {
+        if group.id.trim().is_empty() || !group_ids.insert(group.id.clone()) {
+            return Err(crate::ErrorKind::InputError(
+                "Screenshot group import contains an invalid group ID"
+                    .to_string(),
+            )
+            .into());
+        }
+        let name = validate_group_name(&group.name)?;
+        let display_order = base_order + index as i64;
+        sqlx::query!(
+            "
+			INSERT INTO screenshot_groups (id, name, display_order)
+			VALUES (?, ?, ?)
+			ON CONFLICT(id) DO UPDATE SET name = excluded.name
+			",
+            group.id,
+            name,
+            display_order,
+        )
+        .execute(&mut *tx)
+        .await?;
+        affected_instance_ids.extend(
+            set_group_members(
+                &group.id,
+                normalize_screenshot_ids(group.screenshot_ids)?,
+                &mut tx,
+            )
+            .await?,
+        );
+    }
+    tx.commit().await?;
+    emit_screenshot_updates(affected_instance_ids).await;
+    Ok(())
+}
+
+fn normalize_screenshot_ids(
+    screenshot_ids: Vec<String>,
+) -> crate::Result<Vec<String>> {
+    let mut unique = HashSet::new();
+    if screenshot_ids
+        .iter()
+        .all(|screenshot_id| unique.insert(screenshot_id.clone()))
+    {
+        return Ok(screenshot_ids);
+    }
+    Err(crate::ErrorKind::InputError(
+        "Screenshot group contains duplicate screenshots".to_string(),
+    )
+    .into())
+}
+
+fn normalize_membership_updates(
+    updates: Vec<ScreenshotGroupMembershipUpdate>,
+) -> crate::Result<Vec<ScreenshotGroupMembershipUpdate>> {
+    let mut screenshot_ids = HashSet::new();
+    if updates
+        .iter()
+        .all(|update| screenshot_ids.insert(update.screenshot_id.clone()))
+    {
+        return Ok(updates);
+    }
+    Err(crate::ErrorKind::InputError(
+        "Screenshot membership update contains duplicate screenshots"
+            .to_string(),
+    )
+    .into())
+}
+
+async fn set_group_members(
+    group_id: &str,
+    screenshot_ids: Vec<String>,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<HashSet<String>> {
+    let mut instance_ids = HashSet::new();
+    for screenshot_id in screenshot_ids {
+        instance_ids.insert(screenshot_instance_id(&screenshot_id, tx).await?);
+        sqlx::query!(
+            "
+			INSERT INTO screenshot_group_memberships (screenshot_id, group_id)
+			VALUES (?, ?)
+			ON CONFLICT(screenshot_id) DO UPDATE SET group_id = excluded.group_id
+			",
+            screenshot_id,
+            group_id,
+        )
+        .execute(&mut **tx)
+        .await?;
+    }
+    Ok(instance_ids)
+}
+
+async fn ensure_group_exists(
+    group_id: &str,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<()> {
+    let exists = sqlx::query_scalar!(
+        r#"SELECT EXISTS(SELECT 1 FROM screenshot_groups WHERE id = ?) AS "exists!: bool""#,
+        group_id,
+    )
+    .fetch_one(&mut **tx)
+    .await?;
+    if !exists {
+        return Err(crate::ErrorKind::InputError(format!(
+            "Unknown screenshot group {group_id}"
+        ))
+        .into());
+    }
+    Ok(())
+}
+
+async fn screenshot_instance_id(
+    screenshot_id: &str,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<String> {
+    sqlx::query_scalar!(
+        "SELECT instance_id FROM screenshots WHERE id = ?",
+        screenshot_id,
+    )
+    .fetch_optional(&mut **tx)
+    .await?
+    .ok_or_else(|| {
+        crate::ErrorKind::InputError(format!(
+            "Unknown screenshot {screenshot_id}"
+        ))
+    })
+    .map_err(Into::into)
+}
+
+async fn emit_screenshot_updates(
+    instance_ids: impl IntoIterator<Item = String>,
+) {
+    for instance_id in instance_ids {
+        let _ = emit_instance(
+            &instance_id,
+            InstancePayloadType::ScreenshotsUpdated,
+        )
+        .await;
+    }
+}
diff --git a/packages/app-lib/src/api/instance/screenshots/mod.rs b/packages/app-lib/src/api/instance/screenshots/mod.rs
new file mode 100644
index 0000000000..669a91afcf
--- /dev/null
+++ b/packages/app-lib/src/api/instance/screenshots/mod.rs
@@ -0,0 +1,10 @@
+mod operations;
+mod reconciliation;
+
+pub use self::operations::{
+    InstanceScreenshot, ScreenshotEditSaveMode, ScreenshotKey,
+    delete_screenshots, export_screenshots, get_screenshot_path,
+    list_all_screenshots, list_screenshots, list_synced_screenshots,
+    move_screenshots, save_edited_screenshot,
+};
+pub(crate) use self::reconciliation::reconcile_screenshots;
diff --git a/packages/app-lib/src/api/instance/screenshots/operations.rs b/packages/app-lib/src/api/instance/screenshots/operations.rs
new file mode 100644
index 0000000000..7c7c3cea47
--- /dev/null
+++ b/packages/app-lib/src/api/instance/screenshots/operations.rs
@@ -0,0 +1,655 @@
+use chrono::{DateTime, Utc};
+use futures::stream::{self, StreamExt, TryStreamExt};
+use serde::{Deserialize, Serialize};
+use std::collections::{HashMap, HashSet};
+use std::io::Cursor;
+use std::path::{Component, Path, PathBuf};
+use tokio::sync::OwnedMutexGuard;
+use zip::write::SimpleFileOptions;
+use zip::{CompressionMethod, ZipWriter};
+
+use super::reconciliation::{
+    list_source_screenshots, reconcile_source_screenshots,
+    scan_source_screenshots,
+};
+use crate::State;
+use crate::event::InstancePayloadType;
+use crate::event::emit::emit_instance;
+use crate::state::instances::adapters::sqlite::{
+    instance_rows::{self, InstanceScreenshotSource},
+    screenshot_rows,
+};
+use crate::util::fetch::sha1_file_async;
+use crate::util::io::{self, IOError};
+
+const SCREENSHOTS_DIRECTORY: &str = "screenshots";
+const SCREENSHOT_SCAN_CONCURRENCY: usize = 8;
+
+#[derive(Clone, Debug, Deserialize, Eq, Hash, PartialEq, Serialize)]
+pub struct ScreenshotKey {
+    pub instance_id: String,
+    pub file_name: String,
+}
+
+#[derive(Clone, Debug, Serialize)]
+pub struct InstanceScreenshot {
+    pub id: String,
+    pub instance_id: String,
+    pub instance_name: String,
+    pub file_name: String,
+    pub created_at: DateTime<Utc>,
+    pub modified_at: i64,
+    pub group_id: Option<String>,
+    #[serde(skip)]
+    pub path: PathBuf,
+}
+
+#[derive(Clone, Copy, Debug, Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum ScreenshotEditSaveMode {
+    CreateCopy,
+    ReplaceEdit,
+}
+
+pub async fn list_screenshots(
+    instance_id: &str,
+) -> crate::Result<Vec<InstanceScreenshot>> {
+    let state = State::get().await?;
+    let source =
+        instance_rows::get_instance_screenshot_source(instance_id, &state.pool)
+            .await?
+            .ok_or_else(|| {
+                crate::ErrorKind::InputError("Unknown instance".to_string())
+            })?;
+
+    list_source_screenshots(&state, source).await
+}
+
+pub async fn list_synced_screenshots() -> crate::Result<Vec<InstanceScreenshot>>
+{
+    let state = State::get().await?;
+    let sources =
+        instance_rows::list_synced_screenshot_sources(&state.pool).await?;
+    list_source_screenshot_sets(&state, sources).await
+}
+
+pub async fn list_all_screenshots() -> crate::Result<Vec<InstanceScreenshot>> {
+    let state = State::get().await?;
+    let sources = instance_rows::list_screenshot_sources(&state.pool).await?;
+    list_source_screenshot_sets(&state, sources).await
+}
+
+async fn list_source_screenshot_sets(
+    state: &State,
+    sources: Vec<InstanceScreenshotSource>,
+) -> crate::Result<Vec<InstanceScreenshot>> {
+    let mut screenshots =
+        stream::iter(sources.into_iter().map(|source| async move {
+            list_source_screenshots(state, source).await
+        }))
+        .buffer_unordered(SCREENSHOT_SCAN_CONCURRENCY)
+        .try_collect::<Vec<Vec<InstanceScreenshot>>>()
+        .await?
+        .into_iter()
+        .flatten()
+        .collect::<Vec<_>>();
+
+    sort_screenshots(&mut screenshots);
+    Ok(screenshots)
+}
+
+async fn lock_instance_screenshots<'a>(
+    state: &State,
+    instance_ids: impl IntoIterator<Item = &'a str>,
+) -> Vec<OwnedMutexGuard<()>> {
+    let mut locks = Vec::new();
+    for instance_id in instance_ids {
+        locks.push(state.lock_instance_screenshots(instance_id).await);
+    }
+    locks
+}
+
+pub async fn delete_screenshots(keys: &[ScreenshotKey]) -> crate::Result<()> {
+    ensure_unique_keys(keys)?;
+    let state = State::get().await?;
+    let mut instance_ids = keys
+        .iter()
+        .map(|key| key.instance_id.as_str())
+        .collect::<Vec<_>>();
+    instance_ids.sort_unstable();
+    instance_ids.dedup();
+    let _locks = lock_instance_screenshots(&state, instance_ids).await;
+
+    for key in keys {
+        io::remove_file(get_screenshot_path(key).await?).await?;
+        screenshot_rows::delete_screenshot_by_key(
+            &key.instance_id,
+            &key.file_name,
+            &state.pool,
+        )
+        .await?;
+    }
+
+    Ok(())
+}
+
+pub async fn export_screenshots(
+    keys: &[ScreenshotKey],
+    export_path: PathBuf,
+) -> crate::Result<()> {
+    ensure_unique_keys(keys)?;
+    if keys.is_empty() {
+        return Err(crate::ErrorKind::InputError(
+            "At least one screenshot must be selected".to_string(),
+        )
+        .into());
+    }
+
+    let state = State::get().await?;
+    let mut sources = HashMap::new();
+    let mut archive_folders = HashMap::<String, String>::new();
+    let mut used_archive_folders = HashSet::new();
+    let mut screenshots = Vec::with_capacity(keys.len());
+
+    for key in keys {
+        let source = match sources.get(&key.instance_id) {
+            Some(source) => source,
+            None => {
+                let source = instance_rows::get_instance_screenshot_source(
+                    &key.instance_id,
+                    &state.pool,
+                )
+                .await?
+                .ok_or_else(|| {
+                    crate::ErrorKind::InputError("Unknown instance".to_string())
+                })?;
+                sources.insert(key.instance_id.clone(), source);
+                &sources[&key.instance_id]
+            }
+        };
+        let archive_folder = match archive_folders.get(&key.instance_id) {
+            Some(folder) => folder.clone(),
+            None => {
+                let folder = unique_archive_folder(
+                    &sanitize_archive_component(&source.name),
+                    &mut used_archive_folders,
+                );
+                archive_folders.insert(key.instance_id.clone(), folder.clone());
+                folder
+            }
+        };
+        let archive_name = format!("{archive_folder}/{}", key.file_name);
+        screenshots.push((archive_name, get_screenshot_path(key).await?));
+    }
+
+    tokio::task::spawn_blocking(move || -> crate::Result<()> {
+        let file = std::fs::File::create(&export_path)
+            .map_err(|error| IOError::with_path(error, &export_path))?;
+        let mut writer = ZipWriter::new(file);
+        let options = SimpleFileOptions::default()
+            .compression_method(CompressionMethod::Stored);
+
+        for (archive_name, path) in screenshots {
+            writer
+                .start_file(archive_name, options)
+                .map_err(std::io::Error::from)?;
+            let mut source = std::fs::File::open(&path)
+                .map_err(|error| IOError::with_path(error, &path))?;
+            std::io::copy(&mut source, &mut writer).map_err(IOError::from)?;
+        }
+
+        writer.finish().map_err(std::io::Error::from)?;
+        Ok(())
+    })
+    .await??;
+
+    Ok(())
+}
+
+pub async fn move_screenshots(
+    keys: &[ScreenshotKey],
+    target_instance_id: &str,
+) -> crate::Result<Vec<ScreenshotKey>> {
+    ensure_unique_keys(keys)?;
+    if keys.is_empty() {
+        return Ok(Vec::new());
+    }
+
+    let state = State::get().await?;
+    let mut instance_ids = keys
+        .iter()
+        .map(|key| key.instance_id.as_str())
+        .chain(std::iter::once(target_instance_id))
+        .collect::<Vec<_>>();
+    instance_ids.sort_unstable();
+    instance_ids.dedup();
+    let _locks = lock_instance_screenshots(&state, instance_ids).await;
+    let target_source = instance_rows::get_instance_screenshot_source(
+        target_instance_id,
+        &state.pool,
+    )
+    .await?
+    .ok_or_else(|| {
+        crate::ErrorKind::InputError("Unknown target instance".to_string())
+    })?;
+    let target_dir = source_screenshots_dir(&state, &target_source).await?;
+    io::create_dir_all(&target_dir).await?;
+    ensure_directory_is_not_symlink(&target_dir).await?;
+
+    let mut moved_keys = Vec::with_capacity(keys.len());
+    for key in keys {
+        if key.instance_id == target_instance_id {
+            continue;
+        }
+
+        let source_path = get_screenshot_path(key).await?;
+        let target_path =
+            available_target_path(&target_dir, &key.file_name).await?;
+        io::rename_or_move(&source_path, &target_path)
+            .await
+            .map_err(|error| {
+                crate::ErrorKind::InputError(format!(
+                    "Could not move screenshot: {error}"
+                ))
+            })?;
+        let file_name = target_path
+            .file_name()
+            .and_then(|file_name| file_name.to_str())
+            .ok_or_else(|| {
+                crate::ErrorKind::InputError(
+                    "Could not determine moved screenshot file name"
+                        .to_string(),
+                )
+            })?
+            .to_string();
+        screenshot_rows::move_screenshot(
+            &key.instance_id,
+            &key.file_name,
+            target_instance_id,
+            &file_name,
+            &state.pool,
+        )
+        .await?;
+        moved_keys.push(ScreenshotKey {
+            instance_id: target_instance_id.to_string(),
+            file_name,
+        });
+    }
+
+    Ok(moved_keys)
+}
+
+pub async fn get_screenshot_path(
+    key: &ScreenshotKey,
+) -> crate::Result<PathBuf> {
+    validate_file_name(&key.file_name)?;
+
+    let state = State::get().await?;
+    let source = instance_rows::get_instance_screenshot_source(
+        &key.instance_id,
+        &state.pool,
+    )
+    .await?
+    .ok_or_else(|| {
+        crate::ErrorKind::InputError("Unknown instance".to_string())
+    })?;
+    let screenshots_dir = source_screenshots_dir(&state, &source).await?;
+    let canonical_dir = tokio::fs::canonicalize(&screenshots_dir)
+        .await
+        .map_err(|error| IOError::with_path(error, &screenshots_dir))?;
+    let requested_path = screenshots_dir.join(&key.file_name);
+    let metadata = tokio::fs::symlink_metadata(&requested_path)
+        .await
+        .map_err(|error| IOError::with_path(error, &requested_path))?;
+
+    if !metadata.is_file() || metadata.file_type().is_symlink() {
+        return Err(crate::ErrorKind::InputError(
+            "Screenshot must be a regular file".to_string(),
+        )
+        .into());
+    }
+
+    let canonical_path = tokio::fs::canonicalize(&requested_path)
+        .await
+        .map_err(|error| IOError::with_path(error, &requested_path))?;
+    if !canonical_path.starts_with(&canonical_dir) {
+        return Err(crate::ErrorKind::InputError(
+            "Screenshot path is outside the instance screenshots directory"
+                .to_string(),
+        )
+        .into());
+    }
+
+    Ok(canonical_path)
+}
+
+pub async fn save_edited_screenshot(
+    key: ScreenshotKey,
+    png_bytes: Vec<u8>,
+    mode: ScreenshotEditSaveMode,
+) -> crate::Result<InstanceScreenshot> {
+    validate_file_name(&key.file_name)?;
+
+    let state = State::get().await?;
+    let source = instance_rows::get_instance_screenshot_source(
+        &key.instance_id,
+        &state.pool,
+    )
+    .await?
+    .ok_or_else(|| {
+        crate::ErrorKind::InputError("Unknown instance".to_string())
+    })?;
+    let _lock = state.lock_instance_screenshots(&source.id).await;
+
+    let scanned = scan_source_screenshots(&state, &source).await?;
+    let current =
+        reconcile_source_screenshots(&state, &source, scanned).await?;
+    let source_screenshot = current
+        .iter()
+        .find(|screenshot| screenshot.file_name == key.file_name)
+        .ok_or_else(|| {
+            crate::ErrorKind::InputError("Unknown screenshot".to_string())
+        })?;
+    let source_row = screenshot_rows::get_screenshot_by_key(
+        &key.instance_id,
+        &key.file_name,
+        &state.pool,
+    )
+    .await?
+    .ok_or_else(|| {
+        crate::ErrorKind::InputError("Unknown screenshot".to_string())
+    })?;
+
+    let source_dimensions =
+        png_dimensions(io::read(&source_screenshot.path).await?).await?;
+    let edited_dimensions = png_dimensions(png_bytes.clone()).await?;
+    if edited_dimensions.0 > source_dimensions.0
+        || edited_dimensions.1 > source_dimensions.1
+    {
+        return Err(crate::ErrorKind::InputError(format!(
+            "Edited screenshot dimensions cannot exceed {}x{}",
+            source_dimensions.0, source_dimensions.1,
+        ))
+        .into());
+    }
+
+    let screenshots_dir = source_screenshots_dir(&state, &source).await?;
+    let (target_path, copy_group) = match mode {
+        ScreenshotEditSaveMode::CreateCopy => (
+            available_target_path(&screenshots_dir, &source_row.file_name)
+                .await?,
+            true,
+        ),
+        ScreenshotEditSaveMode::ReplaceEdit => {
+            (source_screenshot.path.clone(), false)
+        }
+    };
+    let target_file_name = target_path
+        .file_name()
+        .and_then(|file_name| file_name.to_str())
+        .ok_or_else(|| {
+            crate::ErrorKind::InputError(
+                "Could not determine edited screenshot file name".to_string(),
+            )
+        })?
+        .to_string();
+
+    io::write(&target_path, png_bytes).await?;
+    if !copy_group {
+        let (file_size, content_hash) = sha1_file_async(&target_path).await?;
+        let file_size = i64::try_from(file_size).map_err(|_| {
+            crate::ErrorKind::InputError(
+                "Screenshot is too large to index".to_string(),
+            )
+        })?;
+        let mut source_row = source_row.clone();
+        source_row.content_hash = content_hash;
+        source_row.file_size = file_size;
+        let mut tx = state.pool.begin().await?;
+        screenshot_rows::update_screenshot(&source_row, &mut tx).await?;
+        tx.commit().await?;
+    }
+    let scanned = scan_source_screenshots(&state, &source).await?;
+    let reconciled =
+        reconcile_source_screenshots(&state, &source, scanned).await?;
+    let mut saved = reconciled
+        .into_iter()
+        .find(|screenshot| screenshot.file_name == target_file_name)
+        .ok_or_else(|| {
+            crate::ErrorKind::InputError(
+                "Could not index edited screenshot".to_string(),
+            )
+        })?;
+
+    if copy_group {
+        let result: crate::Result<()> = async {
+            let mut tx = state.pool.begin().await?;
+            screenshot_rows::copy_group_membership(
+                &source_row.id,
+                &saved.id,
+                &mut tx,
+            )
+            .await?;
+            tx.commit().await?;
+            Ok(())
+        }
+        .await;
+        if let Err(error) = result {
+            let _ = io::remove_file(&target_path).await;
+            let _ = screenshot_rows::delete_screenshot_by_key(
+                &source.id,
+                &target_file_name,
+                &state.pool,
+            )
+            .await;
+            return Err(error);
+        }
+    }
+
+    let mut saved_row = screenshot_rows::get_screenshot_by_key(
+        &saved.instance_id,
+        &saved.file_name,
+        &state.pool,
+    )
+    .await?
+    .ok_or_else(|| {
+        crate::ErrorKind::InputError(
+            "Could not load edited screenshot".to_string(),
+        )
+    })?;
+    if !copy_group {
+        let mut tx = state.pool.begin().await?;
+        if saved_row.created_at != source_row.created_at {
+            saved_row.created_at = source_row.created_at;
+            screenshot_rows::update_screenshot(&saved_row, &mut tx).await?;
+            saved.created_at =
+                DateTime::from_timestamp_millis(source_row.created_at)
+                    .ok_or_else(|| {
+                        crate::ErrorKind::InputError(
+                            "Screenshot creation time is out of range"
+                                .to_string(),
+                        )
+                    })?;
+        }
+        tx.commit().await?;
+    }
+    saved.modified_at = saved_row.modified_at;
+    saved.group_id = saved_row.group_id;
+
+    let _ = emit_instance(
+        &saved.instance_id,
+        InstancePayloadType::ScreenshotsUpdated,
+    )
+    .await;
+
+    Ok(saved)
+}
+
+pub(super) async fn source_screenshots_dir(
+    state: &State,
+    source: &InstanceScreenshotSource,
+) -> crate::Result<PathBuf> {
+    let instance_dir = state.directories.instances_dir().join(&source.path);
+    let canonical_instance_dir =
+        tokio::fs::canonicalize(&instance_dir)
+            .await
+            .map_err(|error| IOError::with_path(error, &instance_dir))?;
+    let screenshots_dir = canonical_instance_dir.join(SCREENSHOTS_DIRECTORY);
+
+    ensure_directory_is_not_symlink(&screenshots_dir).await?;
+    Ok(screenshots_dir)
+}
+
+async fn ensure_directory_is_not_symlink(path: &Path) -> crate::Result<()> {
+    match tokio::fs::symlink_metadata(path).await {
+        Ok(metadata) if metadata.file_type().is_symlink() => {
+            Err(crate::ErrorKind::InputError(
+                "Instance screenshots directory cannot be a symbolic link"
+                    .to_string(),
+            )
+            .into())
+        }
+        Ok(metadata) if !metadata.is_dir() => {
+            Err(crate::ErrorKind::InputError(
+                "Instance screenshots path must be a directory".to_string(),
+            )
+            .into())
+        }
+        Ok(_) => Ok(()),
+        Err(error) if error.kind() == std::io::ErrorKind::NotFound => Ok(()),
+        Err(error) => Err(IOError::with_path(error, path).into()),
+    }
+}
+
+async fn available_target_path(
+    target_dir: &Path,
+    file_name: &str,
+) -> crate::Result<PathBuf> {
+    validate_file_name(file_name)?;
+    let original = target_dir.join(file_name);
+    if !tokio::fs::try_exists(&original)
+        .await
+        .map_err(|error| IOError::with_path(error, &original))?
+    {
+        return Ok(original);
+    }
+
+    let path = Path::new(file_name);
+    let stem = path.file_stem().and_then(|value| value.to_str()).unwrap();
+    let extension = path.extension().and_then(|value| value.to_str()).unwrap();
+
+    for suffix in 1_u32.. {
+        let candidate =
+            target_dir.join(format!("{stem} ({suffix}).{extension}"));
+        if !tokio::fs::try_exists(&candidate)
+            .await
+            .map_err(|error| IOError::with_path(error, &candidate))?
+        {
+            return Ok(candidate);
+        }
+    }
+
+    unreachable!()
+}
+
+async fn png_dimensions(bytes: Vec<u8>) -> crate::Result<(u32, u32)> {
+    tokio::task::spawn_blocking(move || {
+        image::ImageReader::with_format(
+            Cursor::new(bytes),
+            image::ImageFormat::Png,
+        )
+        .decode()
+        .map(|image| (image.width(), image.height()))
+        .map_err(|error| {
+            crate::ErrorKind::InputError(format!(
+                "Could not decode screenshot as PNG: {error}"
+            ))
+            .into()
+        })
+    })
+    .await
+    .map_err(|error| {
+        crate::ErrorKind::InputError(format!(
+            "Could not validate screenshot: {error}"
+        ))
+    })?
+}
+
+fn ensure_unique_keys(keys: &[ScreenshotKey]) -> crate::Result<()> {
+    let mut unique = HashSet::new();
+    if keys.iter().all(|key| unique.insert(key)) {
+        return Ok(());
+    }
+
+    Err(crate::ErrorKind::InputError(
+        "Screenshot selection contains duplicates".to_string(),
+    )
+    .into())
+}
+
+fn validate_file_name(file_name: &str) -> crate::Result<()> {
+    let path = Path::new(file_name);
+    let mut components = path.components();
+    let is_single_file =
+        matches!(components.next(), Some(Component::Normal(_)))
+            && components.next().is_none();
+
+    if !is_single_file || !has_png_extension(path) {
+        return Err(crate::ErrorKind::InputError(
+            "Invalid screenshot file name".to_string(),
+        )
+        .into());
+    }
+
+    Ok(())
+}
+
+pub(super) fn has_png_extension(path: &Path) -> bool {
+    path.extension()
+        .and_then(|extension| extension.to_str())
+        .is_some_and(|extension| extension.eq_ignore_ascii_case("png"))
+}
+
+pub(super) fn sort_screenshots(screenshots: &mut [InstanceScreenshot]) {
+    screenshots.sort_by(|left, right| {
+        right
+            .created_at
+            .cmp(&left.created_at)
+            .then_with(|| left.instance_name.cmp(&right.instance_name))
+            .then_with(|| left.file_name.cmp(&right.file_name))
+    });
+}
+
+fn sanitize_archive_component(value: &str) -> String {
+    let sanitized = value
+        .chars()
+        .map(|character| match character {
+            '/' | '\\' | ':' | '*' | '?' | '"' | '<' | '>' | '|' => '_',
+            _ => character,
+        })
+        .collect::<String>();
+
+    if sanitized.is_empty() || sanitized == "." || sanitized == ".." {
+        "Instance".to_string()
+    } else {
+        sanitized
+    }
+}
+
+fn unique_archive_folder(
+    base: &str,
+    used_folders: &mut HashSet<String>,
+) -> String {
+    if used_folders.insert(base.to_string()) {
+        return base.to_string();
+    }
+
+    for suffix in 2_u32.. {
+        let candidate = format!("{base} ({suffix})");
+        if used_folders.insert(candidate.clone()) {
+            return candidate;
+        }
+    }
+
+    unreachable!()
+}
diff --git a/packages/app-lib/src/api/instance/screenshots/reconciliation.rs b/packages/app-lib/src/api/instance/screenshots/reconciliation.rs
new file mode 100644
index 0000000000..67882d497f
--- /dev/null
+++ b/packages/app-lib/src/api/instance/screenshots/reconciliation.rs
@@ -0,0 +1,323 @@
+use super::operations::{
+    InstanceScreenshot, has_png_extension, sort_screenshots,
+    source_screenshots_dir,
+};
+use crate::State;
+use crate::state::instances::adapters::sqlite::{
+    instance_rows::{self, InstanceScreenshotSource},
+    screenshot_rows::{self, ScreenshotRow},
+};
+use crate::util::fetch::sha1_file_async;
+use crate::util::io::{self, IOError};
+use chrono::{DateTime, Utc};
+use std::collections::HashMap;
+use std::path::PathBuf;
+use uuid::Uuid;
+
+pub(super) struct ScannedScreenshot {
+    file_name: String,
+    created_at: DateTime<Utc>,
+    modified_at: i64,
+    file_size: i64,
+    path: PathBuf,
+}
+
+struct ResolvedScreenshot {
+    scanned: ScannedScreenshot,
+    row: ScreenshotRow,
+    is_new: bool,
+    changed: bool,
+}
+
+fn resolve_scanned_screenshot(
+    source: &InstanceScreenshotSource,
+    scanned: ScannedScreenshot,
+    content_hash: String,
+    matched: Option<ScreenshotRow>,
+) -> ResolvedScreenshot {
+    let (mut row, is_new) = match matched {
+        Some(row) => (row, false),
+        None => (
+            ScreenshotRow {
+                id: Uuid::new_v4().to_string(),
+                instance_id: source.id.clone(),
+                file_name: scanned.file_name.clone(),
+                content_hash: content_hash.clone(),
+                file_size: scanned.file_size,
+                modified_at: scanned.modified_at,
+                created_at: scanned.created_at.timestamp_millis(),
+                group_id: None,
+            },
+            true,
+        ),
+    };
+    let changed = !is_new
+        && (row.file_name != scanned.file_name
+            || row.content_hash != content_hash
+            || row.file_size != scanned.file_size
+            || row.modified_at != scanned.modified_at
+            || row.created_at != scanned.created_at.timestamp_millis());
+    row.instance_id.clone_from(&source.id);
+    row.file_name.clone_from(&scanned.file_name);
+    row.content_hash = content_hash;
+    row.file_size = scanned.file_size;
+    row.modified_at = scanned.modified_at;
+    row.created_at = scanned.created_at.timestamp_millis();
+
+    ResolvedScreenshot {
+        scanned,
+        row,
+        is_new,
+        changed,
+    }
+}
+
+pub(super) async fn list_source_screenshots(
+    state: &State,
+    source: InstanceScreenshotSource,
+) -> crate::Result<Vec<InstanceScreenshot>> {
+    let _lock = state.lock_instance_screenshots(&source.id).await;
+    let scanned = scan_source_screenshots(state, &source).await?;
+    reconcile_source_screenshots(state, &source, scanned).await
+}
+
+pub(crate) async fn reconcile_screenshots(
+    instance_id: &str,
+) -> crate::Result<()> {
+    let state = State::get().await?;
+    let Some(source) =
+        instance_rows::get_instance_screenshot_source(instance_id, &state.pool)
+            .await?
+    else {
+        return Ok(());
+    };
+
+    list_source_screenshots(&state, source).await?;
+    Ok(())
+}
+
+pub(super) async fn scan_source_screenshots(
+    state: &State,
+    source: &InstanceScreenshotSource,
+) -> crate::Result<Vec<ScannedScreenshot>> {
+    let instance_dir = state.directories.instances_dir().join(&source.path);
+    if !tokio::fs::try_exists(&instance_dir)
+        .await
+        .map_err(|error| IOError::with_path(error, &instance_dir))?
+    {
+        return Ok(Vec::new());
+    }
+
+    let screenshots_dir = source_screenshots_dir(state, source).await?;
+    let mut entries = match io::read_dir(&screenshots_dir).await {
+        Ok(entries) => entries,
+        Err(error) if error.kind() == std::io::ErrorKind::NotFound => {
+            return Ok(Vec::new());
+        }
+        Err(error) => return Err(error.into()),
+    };
+    let mut screenshots = Vec::new();
+
+    while let Some(entry) = entries
+        .next_entry()
+        .await
+        .map_err(|error| IOError::with_path(error, &screenshots_dir))?
+    {
+        let file_type = entry
+            .file_type()
+            .await
+            .map_err(|error| IOError::with_path(error, entry.path()))?;
+        if !file_type.is_file() {
+            continue;
+        }
+
+        let path = entry.path();
+        if !has_png_extension(&path) {
+            continue;
+        }
+
+        let Some(file_name) = entry.file_name().to_str().map(str::to_owned)
+        else {
+            continue;
+        };
+        let metadata = entry
+            .metadata()
+            .await
+            .map_err(|error| IOError::with_path(error, &path))?;
+        let created_at = metadata
+            .created()
+            .or_else(|_| metadata.modified())
+            .map(DateTime::<Utc>::from)
+            .map_err(|error| IOError::with_path(error, &path))?;
+        let modified_at = metadata
+            .modified()
+            .map(DateTime::<Utc>::from)
+            .map(|value| value.timestamp_millis())
+            .map_err(|error| IOError::with_path(error, &path))?;
+        let file_size = i64::try_from(metadata.len()).map_err(|_| {
+            crate::ErrorKind::InputError(
+                "Screenshot is too large to index".to_string(),
+            )
+        })?;
+
+        screenshots.push(ScannedScreenshot {
+            file_name,
+            created_at,
+            modified_at,
+            file_size,
+            path,
+        });
+    }
+
+    Ok(screenshots)
+}
+
+pub(super) async fn reconcile_source_screenshots(
+    state: &State,
+    source: &InstanceScreenshotSource,
+    scanned: Vec<ScannedScreenshot>,
+) -> crate::Result<Vec<InstanceScreenshot>> {
+    let existing =
+        screenshot_rows::list_screenshots(&source.id, &state.pool).await?;
+    let existing_by_name = existing
+        .iter()
+        .map(|row| (row.file_name.as_str(), row))
+        .collect::<HashMap<_, _>>();
+    let metadata_matches = existing.len() == scanned.len()
+        && scanned.iter().all(|scanned| {
+            existing_by_name
+                .get(scanned.file_name.as_str())
+                .is_some_and(|row| {
+                    row.file_size == scanned.file_size
+                        && row.modified_at == scanned.modified_at
+                        && row.created_at
+                            == scanned.created_at.timestamp_millis()
+                })
+        });
+    let mut unmatched_by_hash =
+        HashMap::<(String, i64), Vec<ScreenshotRow>>::new();
+    let mut resolved = Vec::with_capacity(scanned.len());
+
+    if metadata_matches {
+        let mut existing_by_name = existing
+            .into_iter()
+            .map(|row| (row.file_name.clone(), row))
+            .collect::<HashMap<_, _>>();
+        for scanned in scanned {
+            let row = existing_by_name.remove(&scanned.file_name).ok_or_else(
+                || {
+                    crate::ErrorKind::InputError(
+                        "Screenshot index changed during reconciliation"
+                            .to_string(),
+                    )
+                },
+            )?;
+            resolved.push(ResolvedScreenshot {
+                scanned,
+                row,
+                is_new: false,
+                changed: false,
+            });
+        }
+    } else {
+        let mut unmatched_by_name = existing
+            .into_iter()
+            .map(|row| (row.file_name.clone(), row))
+            .collect::<HashMap<_, _>>();
+        let mut hashed = Vec::with_capacity(scanned.len());
+        for mut scanned in scanned {
+            let (file_size, content_hash) =
+                sha1_file_async(&scanned.path).await?;
+            scanned.file_size = i64::try_from(file_size).map_err(|_| {
+                crate::ErrorKind::InputError(
+                    "Screenshot is too large to index".to_string(),
+                )
+            })?;
+            hashed.push((scanned, content_hash));
+        }
+
+        let mut renamed_or_new = Vec::new();
+        for (scanned, content_hash) in hashed {
+            if let Some(row) = unmatched_by_name.remove(&scanned.file_name) {
+                resolved.push(resolve_scanned_screenshot(
+                    source,
+                    scanned,
+                    content_hash,
+                    Some(row),
+                ));
+            } else {
+                renamed_or_new.push((scanned, content_hash));
+            }
+        }
+
+        for row in unmatched_by_name.into_values() {
+            unmatched_by_hash
+                .entry((row.content_hash.clone(), row.file_size))
+                .or_default()
+                .push(row);
+        }
+
+        for (scanned, content_hash) in renamed_or_new {
+            let hash_key = (content_hash.clone(), scanned.file_size);
+            let matched =
+                unmatched_by_hash.get_mut(&hash_key).and_then(|rows| {
+                    if rows.is_empty() {
+                        return None;
+                    }
+                    let created_at = scanned.created_at.timestamp_millis();
+                    let index = rows
+                        .iter()
+                        .position(|row| {
+                            row.modified_at == scanned.modified_at
+                                && row.created_at == created_at
+                        })
+                        .unwrap_or(rows.len() - 1);
+                    Some(rows.swap_remove(index))
+                });
+            resolved.push(resolve_scanned_screenshot(
+                source,
+                scanned,
+                content_hash,
+                matched,
+            ));
+        }
+    }
+
+    let mut tx = state.pool.begin().await?;
+    for row in unmatched_by_hash.into_values().flatten() {
+        screenshot_rows::delete_screenshot(&row.id, &mut tx).await?;
+    }
+    for screenshot in &resolved {
+        if !screenshot.is_new && screenshot.changed {
+            let mut row = screenshot.row.clone();
+            row.file_name = Uuid::new_v4().to_string();
+            screenshot_rows::update_screenshot(&row, &mut tx).await?;
+        }
+    }
+    for screenshot in &resolved {
+        if screenshot.is_new {
+            screenshot_rows::insert_screenshot(&screenshot.row, &mut tx)
+                .await?;
+        } else if screenshot.changed {
+            screenshot_rows::update_screenshot(&screenshot.row, &mut tx)
+                .await?;
+        }
+    }
+    tx.commit().await?;
+
+    let mut screenshots = resolved
+        .into_iter()
+        .map(|screenshot| InstanceScreenshot {
+            id: screenshot.row.id,
+            instance_id: source.id.clone(),
+            instance_name: source.name.clone(),
+            file_name: screenshot.scanned.file_name,
+            created_at: screenshot.scanned.created_at,
+            modified_at: screenshot.row.modified_at,
+            group_id: screenshot.row.group_id,
+            path: screenshot.scanned.path,
+        })
+        .collect::<Vec<_>>();
+    sort_screenshots(&mut screenshots);
+    Ok(screenshots)
+}
diff --git a/packages/app-lib/src/api/instance/synced_options/command_history.rs b/packages/app-lib/src/api/instance/synced_options/command_history.rs
new file mode 100644
index 0000000000..59d19237a3
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_options/command_history.rs
@@ -0,0 +1,185 @@
+use super::COMMAND_HISTORY_FILE;
+use super::files::{
+    CheckpointStatus, begin_checkpoint, checkpoint, ensure_link,
+    finish_checkpoint, instance_dir, sha1_bytes, sha1_file,
+};
+use super::orchestration::{
+    create_synced_directories, option_effective, synced_options_path,
+};
+use crate::State;
+use crate::state::{InstanceMetadata, SyncedOption};
+use crate::util::io;
+use std::path::PathBuf;
+
+const COMMAND_HISTORY_LIMIT: usize = 50;
+
+pub async fn get_command_history() -> crate::Result<String> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let path = command_history_path(&state);
+    if !path.exists() {
+        return Ok(String::new());
+    }
+    Ok(String::from_utf8_lossy(&io::read(path).await?).into_owned())
+}
+
+pub async fn set_command_history(contents: &str) -> crate::Result<String> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    create_synced_directories(&state).await?;
+    let normalized = normalize_command_history(contents);
+    io::write(command_history_path(&state), normalized.as_bytes()).await?;
+    refresh_command_history_links(&state).await?;
+    Ok(normalized)
+}
+
+pub(super) async fn ensure_command_history(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    create_synced_directories(state).await?;
+    let canonical = command_history_path(state);
+    if !canonical.exists() {
+        let local = instance_dir(metadata, state).join(COMMAND_HISTORY_FILE);
+        let contents = if local.exists() {
+            String::from_utf8_lossy(&io::read(&local).await?).into_owned()
+        } else {
+            String::new()
+        };
+        io::write(&canonical, normalize_command_history(&contents)).await?;
+    }
+    let target = instance_dir(metadata, state).join(COMMAND_HISTORY_FILE);
+    let canonical_bytes = io::read(&canonical).await?;
+    let expected = sha1_bytes(&canonical_bytes);
+    begin_checkpoint(
+        &metadata.instance.id,
+        SyncedOption::CommandHistory,
+        "default",
+        &expected,
+        None,
+        0,
+        state,
+    )
+    .await?;
+    let mode = ensure_link(&canonical, &target).await?;
+    finish_checkpoint(
+        &metadata.instance.id,
+        SyncedOption::CommandHistory,
+        "default",
+        mode,
+        state,
+    )
+    .await
+}
+
+pub(super) async fn reconcile_command_history(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    if !option_effective(metadata, SyncedOption::CommandHistory, state).await? {
+        return Ok(());
+    }
+    let local = instance_dir(metadata, state).join(COMMAND_HISTORY_FILE);
+    if !local.exists() {
+        return ensure_command_history(metadata, state).await;
+    }
+    let symlink = tokio::fs::symlink_metadata(&local)
+        .await
+        .map(|metadata| metadata.file_type().is_symlink())
+        .unwrap_or(false);
+    let current_checkpoint = checkpoint(
+        &metadata.instance.id,
+        SyncedOption::CommandHistory,
+        "default",
+        state,
+    )
+    .await?;
+    if current_checkpoint
+        .as_ref()
+        .is_some_and(|value| value.status == CheckpointStatus::Pending)
+    {
+        return ensure_command_history(metadata, state).await;
+    }
+    let actual = sha1_file(&local).await?;
+    let expected = current_checkpoint.map(|value| value.expected_sha1);
+    if !symlink && expected.as_deref() != Some(actual.as_str()) {
+        let contents =
+            String::from_utf8_lossy(&io::read(&local).await?).into_owned();
+        io::write(
+            command_history_path(state),
+            normalize_command_history(&contents),
+        )
+        .await?;
+        refresh_command_history_links(state).await?;
+    } else {
+        ensure_command_history(metadata, state).await?;
+    }
+    Ok(())
+}
+
+async fn refresh_command_history_links(state: &State) -> crate::Result<()> {
+    let instances = crate::state::list_instances(&state.pool).await?;
+    for metadata in instances {
+        if option_effective(&metadata, SyncedOption::CommandHistory, state)
+            .await?
+        {
+            ensure_command_history(&metadata, state).await?;
+        }
+    }
+    Ok(())
+}
+
+pub(super) fn normalize_command_history(contents: &str) -> String {
+    let lines = contents.lines().collect::<Vec<_>>();
+    let start = lines.len().saturating_sub(COMMAND_HISTORY_LIMIT);
+    let mut normalized = lines[start..].join("\n");
+    if !normalized.is_empty() {
+        normalized.push('\n');
+    }
+    normalized
+}
+
+pub(super) async fn merge_command_history_from_instance(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    let canonical_path = command_history_path(state);
+    let canonical = if canonical_path.exists() {
+        String::from_utf8_lossy(&io::read(&canonical_path).await?).into_owned()
+    } else {
+        String::new()
+    };
+    let local_path = instance_dir(metadata, state).join(COMMAND_HISTORY_FILE);
+    let local = if local_path.exists() {
+        String::from_utf8_lossy(&io::read(&local_path).await?).into_owned()
+    } else {
+        String::new()
+    };
+    let canonical_lines = canonical.lines().collect::<Vec<_>>();
+    let available = COMMAND_HISTORY_LIMIT.saturating_sub(canonical_lines.len());
+    let mut seen = canonical_lines
+        .iter()
+        .copied()
+        .collect::<std::collections::HashSet<_>>();
+    let mut imported = Vec::new();
+    for line in local.lines().rev() {
+        if imported.len() == available {
+            break;
+        }
+        if seen.insert(line) {
+            imported.push(line);
+        }
+    }
+    imported.reverse();
+    imported.extend(canonical_lines);
+    let merged = normalize_command_history(&imported.join("\n"));
+    if merged != normalize_command_history(&canonical) {
+        io::write(&canonical_path, merged).await?;
+        refresh_command_history_links(state).await?;
+    }
+    Ok(())
+}
+
+pub(super) fn command_history_path(state: &State) -> PathBuf {
+    synced_options_path(state).join(COMMAND_HISTORY_FILE)
+}
diff --git a/packages/app-lib/src/api/instance/synced_options/files.rs b/packages/app-lib/src/api/instance/synced_options/files.rs
new file mode 100644
index 0000000000..92c457894b
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_options/files.rs
@@ -0,0 +1,300 @@
+use crate::state::{InstanceInstallStage, InstanceMetadata, SyncedOption};
+use crate::util::io;
+use crate::{ErrorKind, State};
+use quartz_nbt::NbtCompound;
+use sha1_smol::Sha1;
+use std::io::Cursor;
+use std::path::{Path, PathBuf};
+
+pub(in crate::api::instance) struct SyncCheckpoint {
+    pub expected_sha1: String,
+    pub merge_base: Option<Vec<u8>>,
+    pub source_revision: i64,
+    pub status: CheckpointStatus,
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub(in crate::api::instance) enum CheckpointStatus {
+    Pending,
+    Ready,
+}
+
+impl CheckpointStatus {
+    fn from_str(value: &str) -> Option<Self> {
+        match value {
+            "pending" => Some(Self::Pending),
+            "ready" => Some(Self::Ready),
+            _ => None,
+        }
+    }
+}
+
+#[derive(Clone, Copy, Debug)]
+pub(in crate::api::instance) enum LinkMode {
+    Symbolic,
+    #[cfg(windows)]
+    Hard,
+    #[cfg(windows)]
+    Copy,
+}
+
+impl LinkMode {
+    fn as_str(self) -> &'static str {
+        match self {
+            Self::Symbolic => "symbolic",
+            #[cfg(windows)]
+            Self::Hard => "hard",
+            #[cfg(windows)]
+            Self::Copy => "copy",
+        }
+    }
+}
+
+pub(in crate::api::instance) fn safe_instance_id(instance_id: &str) -> String {
+    instance_id.replace([':', '/', '\\'], "_")
+}
+
+pub(in crate::api::instance) fn instance_dir(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> PathBuf {
+    state
+        .directories
+        .instances_dir()
+        .join(&metadata.instance.path)
+}
+
+pub(in crate::api::instance) fn sync_files_are_protected(
+    metadata: &InstanceMetadata,
+) -> bool {
+    matches!(
+        metadata.instance.install_stage,
+        InstanceInstallStage::MinecraftInstalling
+            | InstanceInstallStage::PackInstalling
+    )
+}
+
+pub(in crate::api::instance) async fn instance_is_running(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<bool> {
+    crate::state::instance_has_running_process(&metadata.instance.id, state)
+        .await
+}
+
+pub(in crate::api::instance) fn instance_option_enabled(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+) -> bool {
+    match option {
+        SyncedOption::CommandHistory => metadata.synced_options.command_history,
+        SyncedOption::MultiplayerServers => {
+            metadata.synced_options.multiplayer_servers
+        }
+        SyncedOption::CreativeHotbars => {
+            metadata.synced_options.creative_hotbars
+        }
+        SyncedOption::Screenshots => metadata.synced_options.screenshots,
+    }
+}
+
+pub(in crate::api::instance) async fn ensure_link(
+    source: &Path,
+    target: &Path,
+) -> crate::Result<LinkMode> {
+    if let Some(parent) = target.parent() {
+        io::create_dir_all(parent).await?;
+    }
+    if tokio::fs::symlink_metadata(target)
+        .await
+        .is_ok_and(|metadata| metadata.file_type().is_symlink())
+        && tokio::fs::read_link(target)
+            .await
+            .is_ok_and(|current| current == source)
+    {
+        return Ok(LinkMode::Symbolic);
+    }
+    if tokio::fs::symlink_metadata(target).await.is_ok() {
+        io::remove_file(target).await?;
+    }
+
+    #[cfg(unix)]
+    {
+        tokio::fs::symlink(source, target).await?;
+        Ok(LinkMode::Symbolic)
+    }
+    #[cfg(windows)]
+    {
+        if tokio::fs::symlink_file(source, target).await.is_ok() {
+            return Ok(LinkMode::Symbolic);
+        }
+        if tokio::fs::hard_link(source, target).await.is_ok() {
+            return Ok(LinkMode::Hard);
+        }
+        io::copy(source, target).await?;
+        Ok(LinkMode::Copy)
+    }
+}
+
+pub(in crate::api::instance) async fn detach_link(
+    source: &Path,
+    target: &Path,
+) -> crate::Result<()> {
+    let target_metadata = tokio::fs::symlink_metadata(target).await.ok();
+    let contents = if target_metadata.is_some() && target.exists() {
+        Some(io::read(target).await?)
+    } else if source.exists() {
+        Some(io::read(source).await?)
+    } else {
+        None
+    };
+    if target_metadata.is_some() {
+        io::remove_file(target).await?;
+    }
+    if let Some(contents) = contents {
+        io::write(target, contents).await?;
+    }
+    Ok(())
+}
+
+pub(in crate::api::instance) async fn begin_checkpoint(
+    instance_id: &str,
+    option: SyncedOption,
+    variant: &str,
+    expected_sha1: &str,
+    merge_base: Option<&[u8]>,
+    source_revision: i64,
+    state: &State,
+) -> crate::Result<()> {
+    let option_name = option.as_str();
+    sqlx::query!(
+        "
+		INSERT INTO instance_sync_checkpoints
+			(instance_id, feature, variant, expected_sha1, merge_base,
+			 source_revision, status, link_mode)
+		VALUES (?, ?, ?, ?, ?, ?, 'pending', NULL)
+		ON CONFLICT(instance_id, feature, variant) DO UPDATE SET
+			expected_sha1 = excluded.expected_sha1,
+			merge_base = excluded.merge_base,
+			source_revision = excluded.source_revision,
+			status = 'pending',
+			link_mode = NULL
+		",
+        instance_id,
+        option_name,
+        variant,
+        expected_sha1,
+        merge_base,
+        source_revision,
+    )
+    .execute(&state.pool)
+    .await?;
+    Ok(())
+}
+
+pub(in crate::api::instance) async fn finish_checkpoint(
+    instance_id: &str,
+    option: SyncedOption,
+    variant: &str,
+    mode: LinkMode,
+    state: &State,
+) -> crate::Result<()> {
+    let option_name = option.as_str();
+    let link_mode = mode.as_str();
+    sqlx::query!(
+        "
+		UPDATE instance_sync_checkpoints
+		SET status = 'ready', link_mode = ?
+		WHERE instance_id = ? AND feature = ? AND variant = ?
+		",
+        link_mode,
+        instance_id,
+        option_name,
+        variant,
+    )
+    .execute(&state.pool)
+    .await?;
+    Ok(())
+}
+
+pub(in crate::api::instance) async fn checkpoint(
+    instance_id: &str,
+    option: SyncedOption,
+    variant: &str,
+    state: &State,
+) -> crate::Result<Option<SyncCheckpoint>> {
+    let option_name = option.as_str();
+    let row = sqlx::query!(
+        r#"
+		SELECT expected_sha1, merge_base,
+			source_revision AS "source_revision!: i64", status
+		FROM instance_sync_checkpoints
+		WHERE instance_id = ? AND feature = ? AND variant = ?
+		"#,
+        instance_id,
+        option_name,
+        variant,
+    )
+    .fetch_optional(&state.pool)
+    .await?;
+    row.map(|row| {
+        Ok(SyncCheckpoint {
+            expected_sha1: row.expected_sha1,
+            merge_base: row.merge_base,
+            source_revision: row.source_revision,
+            status: CheckpointStatus::from_str(&row.status).ok_or_else(
+                || {
+                    ErrorKind::InputError(format!(
+                        "Unknown sync checkpoint status {}",
+                        row.status
+                    ))
+                },
+            )?,
+        })
+    })
+    .transpose()
+}
+
+pub(in crate::api::instance) async fn sha1_file(
+    path: &Path,
+) -> crate::Result<String> {
+    Ok(Sha1::from(io::read(path).await?).digest().to_string())
+}
+
+pub(in crate::api::instance) fn sha1_bytes(bytes: &[u8]) -> String {
+    Sha1::from(bytes).digest().to_string()
+}
+
+pub(in crate::api::instance) async fn read_nbt_file(
+    path: &Path,
+) -> crate::Result<NbtCompound> {
+    let bytes = io::read(path).await?;
+    let (root, _) = quartz_nbt::io::read_nbt(
+        &mut Cursor::new(bytes),
+        quartz_nbt::io::Flavor::Uncompressed,
+    )?;
+    Ok(root)
+}
+
+pub(in crate::api::instance) fn nbt_to_bytes(
+    root: &NbtCompound,
+) -> crate::Result<Vec<u8>> {
+    let mut bytes = Vec::new();
+    quartz_nbt::io::write_nbt(
+        &mut bytes,
+        None,
+        root,
+        quartz_nbt::io::Flavor::Uncompressed,
+    )?;
+    Ok(bytes)
+}
+
+pub(in crate::api::instance) fn nbt_from_bytes(
+    bytes: Vec<u8>,
+) -> crate::Result<NbtCompound> {
+    let (root, _) = quartz_nbt::io::read_nbt(
+        &mut Cursor::new(bytes),
+        quartz_nbt::io::Flavor::Uncompressed,
+    )?;
+    Ok(root)
+}
diff --git a/packages/app-lib/src/api/instance/synced_options/hotbars.rs b/packages/app-lib/src/api/instance/synced_options/hotbars.rs
new file mode 100644
index 0000000000..a0763007be
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_options/hotbars.rs
@@ -0,0 +1,607 @@
+use super::HOTBAR_FILE;
+use super::files::{
+    CheckpointStatus, begin_checkpoint, checkpoint, ensure_link,
+    finish_checkpoint, instance_dir, nbt_from_bytes, nbt_to_bytes,
+    read_nbt_file, safe_instance_id, sha1_bytes, sha1_file,
+};
+use super::orchestration::{
+    backup_bytes, create_synced_directories, option_effective,
+    seed_from_instance, synced_options_path,
+};
+use crate::state::{InstanceMetadata, SyncedOption};
+use crate::util::io;
+use crate::{ErrorKind, State};
+use quartz_nbt::{NbtCompound, NbtList, NbtTag};
+use std::path::PathBuf;
+
+const COMPONENTS_DATA_VERSION_FLOOR: i32 = 3837;
+pub(super) const HOTBAR_SCHEMA_VERSION: i64 = 2;
+
+pub(super) struct HotbarState {
+    pub schema_version: i64,
+    pub revision: i64,
+    pub nbt: NbtCompound,
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub(super) enum HotbarFamily {
+    Legacy,
+    Components,
+}
+
+impl HotbarFamily {
+    pub(super) fn as_str(self) -> &'static str {
+        match self {
+            Self::Legacy => "legacy",
+            Self::Components => "components",
+        }
+    }
+
+    fn other(self) -> Self {
+        match self {
+            Self::Legacy => Self::Components,
+            Self::Components => Self::Legacy,
+        }
+    }
+}
+
+pub(super) async fn hotbar_family(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<HotbarFamily> {
+    let (manifest, version_index) =
+        crate::launcher::resolve_minecraft_manifest(
+            &metadata.applied_content_set.game_version,
+            state,
+        )
+        .await?;
+    let cutoff = manifest
+        .versions
+        .iter()
+        .find(|item| item.id == "1.20.5")
+        .ok_or_else(|| {
+            ErrorKind::LauncherError(
+                "Minecraft 1.20.5 is missing from the version manifest"
+                    .to_string(),
+            )
+        })?;
+    Ok(
+        if manifest.versions[version_index].release_time >= cutoff.release_time
+        {
+            HotbarFamily::Components
+        } else {
+            HotbarFamily::Legacy
+        },
+    )
+}
+
+pub(super) async fn backup_shared_hotbars(state: &State) -> crate::Result<()> {
+    let sync_state = read_hotbar_state(state).await?;
+    let legacy = hotbar_family_root(&sync_state.nbt, HotbarFamily::Legacy);
+    let components =
+        hotbar_family_root(&sync_state.nbt, HotbarFamily::Components);
+    backup_bytes(
+        "shared",
+        "hotbar-legacy.nbt",
+        &nbt_to_bytes(&legacy)?,
+        state,
+    )
+    .await?;
+    backup_bytes(
+        "shared",
+        "hotbar-components.nbt",
+        &nbt_to_bytes(&components)?,
+        state,
+    )
+    .await?;
+    backup_bytes(
+        "shared",
+        "hotbars-state.nbt",
+        &nbt_to_bytes(&sync_state.nbt)?,
+        state,
+    )
+    .await
+}
+
+pub(super) async fn ensure_hotbar(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    create_synced_directories(state).await?;
+    if !hotbar_state_exists(state).await? {
+        seed_from_instance(metadata, SyncedOption::CreativeHotbars, state)
+            .await?;
+    }
+    write_hotbar_projection(metadata, state).await
+}
+
+pub(super) async fn reconcile_hotbar(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    if !option_effective(metadata, SyncedOption::CreativeHotbars, state).await?
+    {
+        return Ok(());
+    }
+    let local = instance_dir(metadata, state).join(HOTBAR_FILE);
+    if !local.exists() {
+        return ensure_hotbar(metadata, state).await;
+    }
+    let family = hotbar_family(metadata, state).await?;
+    let current_checkpoint = checkpoint(
+        &metadata.instance.id,
+        SyncedOption::CreativeHotbars,
+        family.as_str(),
+        state,
+    )
+    .await?;
+    if current_checkpoint
+        .as_ref()
+        .is_some_and(|value| value.status == CheckpointStatus::Pending)
+    {
+        return write_hotbar_projection(metadata, state).await;
+    }
+    let actual = sha1_file(&local).await?;
+    let mut sync_state = read_hotbar_state(state).await?;
+    if current_checkpoint
+        .as_ref()
+        .map(|value| value.expected_sha1.as_str())
+        == Some(actual.as_str())
+    {
+        if current_checkpoint
+            .as_ref()
+            .is_some_and(|value| value.source_revision == sync_state.revision)
+        {
+            return Ok(());
+        }
+        return write_hotbar_projection(metadata, state).await;
+    }
+
+    let (changed_family, checkpoint) = if current_checkpoint.is_none() {
+        let previous_family = family.other();
+        let previous_checkpoint = checkpoint(
+            &metadata.instance.id,
+            SyncedOption::CreativeHotbars,
+            previous_family.as_str(),
+            state,
+        )
+        .await?;
+        if let Some(previous_checkpoint) = previous_checkpoint {
+            if previous_checkpoint.status == CheckpointStatus::Pending
+                || previous_checkpoint.expected_sha1 == actual
+            {
+                return write_hotbar_projection(metadata, state).await;
+            }
+            (previous_family, Some(previous_checkpoint))
+        } else {
+            (family, None)
+        }
+    } else {
+        (family, current_checkpoint)
+    };
+
+    let changed = read_nbt_file(&local).await?;
+    let merge_base = checkpoint
+        .and_then(|value| value.merge_base)
+        .map(nbt_from_bytes)
+        .transpose()?
+        .unwrap_or_else(|| hotbar_family_root(&sync_state.nbt, changed_family));
+    if merge_hotbar_family(
+        &mut sync_state.nbt,
+        changed_family,
+        &merge_base,
+        &changed,
+    ) {
+        increment_hotbar_revision(&mut sync_state);
+        write_hotbar_state(state, &sync_state).await?;
+    }
+    regenerate_hotbars(state).await
+}
+
+pub(super) async fn instance_hotbars_differ_from_synced(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<bool> {
+    let local_path = instance_dir(metadata, state).join(HOTBAR_FILE);
+    if !local_path.exists() {
+        return Ok(false);
+    }
+    let local = read_nbt_file(&local_path).await?;
+    let family = hotbar_family(metadata, state).await?;
+    let synced =
+        hotbar_family_root(&read_hotbar_state(state).await?.nbt, family);
+    Ok((0..81)
+        .any(|slot| hotbar_slot(&local, slot) != hotbar_slot(&synced, slot)))
+}
+
+pub(super) fn merge_hotbar_family(
+    state: &mut NbtCompound,
+    family: HotbarFamily,
+    merge_base: &NbtCompound,
+    changed: &NbtCompound,
+) -> bool {
+    let family_key = family_state_key(family);
+    let mut current = state
+        .get::<_, &NbtCompound>(family_key)
+        .ok()
+        .cloned()
+        .unwrap_or_else(empty_hotbar_root);
+    let other_family = match family {
+        HotbarFamily::Legacy => HotbarFamily::Components,
+        HotbarFamily::Components => HotbarFamily::Legacy,
+    };
+    let other_key = family_state_key(other_family);
+    let other = state.get::<_, &NbtCompound>(other_key).ok().cloned();
+    let seed_components_with_legacy =
+        other.is_none() && family == HotbarFamily::Legacy;
+    let mut other_root = if seed_components_with_legacy {
+        (*changed).clone()
+    } else {
+        other.unwrap_or_else(empty_hotbar_root)
+    };
+    let mut revisions = state
+        .get::<_, &NbtCompound>("Revisions")
+        .ok()
+        .cloned()
+        .unwrap_or_default();
+    let family_versions_key = family_data_versions_key(family);
+    let other_versions_key = family_data_versions_key(other_family);
+    let mut family_versions = state
+        .get::<_, &NbtCompound>(family_versions_key)
+        .ok()
+        .cloned()
+        .unwrap_or_default();
+    let mut other_versions = state
+        .get::<_, &NbtCompound>(other_versions_key)
+        .ok()
+        .cloned()
+        .unwrap_or_default();
+    let writer_data_version = hotbar_data_version(changed).max(match family {
+        HotbarFamily::Legacy => 1,
+        HotbarFamily::Components => COMPONENTS_DATA_VERSION_FLOOR,
+    });
+    let current_data_version = hotbar_data_version(&current);
+    let other_data_version = hotbar_data_version(&other_root);
+    let mut changed_any = false;
+
+    for slot in 0..81 {
+        let old_slot = hotbar_slot(merge_base, slot);
+        let new_slot = hotbar_slot(changed, slot);
+        if old_slot == new_slot {
+            continue;
+        }
+        let current_origin = family_versions
+            .get::<_, i32>(&slot.to_string())
+            .unwrap_or(current_data_version);
+        if writer_data_version > 0
+            && current_origin > 0
+            && writer_data_version < current_origin
+        {
+            continue;
+        }
+        set_hotbar_slot_optional(&mut current, slot, new_slot.clone());
+        family_versions.insert(slot.to_string(), writer_data_version);
+        let revision = revisions
+            .get::<_, i64>(&slot.to_string())
+            .unwrap_or(0)
+            .saturating_add(1);
+        revisions.insert(slot.to_string(), revision);
+        if seed_components_with_legacy {
+            other_versions.insert(slot.to_string(), writer_data_version);
+        } else if let Some(slot_value) = new_slot
+            .and_then(|value| convert_hotbar_slot(value, family, other_family))
+        {
+            let other_origin = other_versions
+                .get::<_, i32>(&slot.to_string())
+                .unwrap_or(other_data_version);
+            if writer_data_version <= 0
+                || other_origin <= 0
+                || writer_data_version >= other_origin
+            {
+                set_hotbar_slot(&mut other_root, slot, slot_value);
+                other_versions.insert(slot.to_string(), writer_data_version);
+            }
+        }
+        changed_any = true;
+    }
+
+    if writer_data_version > current_data_version {
+        current.insert("DataVersion", writer_data_version);
+        changed_any = true;
+    }
+    if seed_components_with_legacy
+        && writer_data_version > hotbar_data_version(&other_root)
+    {
+        other_root.insert("DataVersion", writer_data_version);
+    }
+
+    state.insert(family_key, current);
+    state.insert(other_key, other_root);
+    state.insert("Revisions", revisions);
+    state.insert(family_versions_key, family_versions);
+    state.insert(other_versions_key, other_versions);
+    changed_any
+}
+
+fn convert_hotbar_slot(
+    value: NbtTag,
+    from: HotbarFamily,
+    to: HotbarFamily,
+) -> Option<NbtTag> {
+    if from == to {
+        return Some(value);
+    }
+    let NbtTag::Compound(item) = value else {
+        return None;
+    };
+    if item.is_empty() {
+        return Some(NbtCompound::new().into());
+    }
+    let id = item.get::<_, &str>("id").ok()?.to_string();
+
+    match (from, to) {
+        (HotbarFamily::Legacy, HotbarFamily::Components) => {
+            if item.contains_key("tag") {
+                return None;
+            }
+            let count = item
+                .get::<_, i8>("Count")
+                .map(i32::from)
+                .or_else(|_| item.get::<_, i32>("Count"))
+                .unwrap_or(1);
+            let mut converted = NbtCompound::new();
+            converted.insert("id", id);
+            converted.insert("count", count);
+            Some(converted.into())
+        }
+        (HotbarFamily::Components, HotbarFamily::Legacy) => {
+            if item
+                .get::<_, &NbtCompound>("components")
+                .is_ok_and(|components| !components.is_empty())
+            {
+                return None;
+            }
+            let count = item.get::<_, i32>("count").unwrap_or(1);
+            let count = i8::try_from(count).ok()?;
+            let mut converted = NbtCompound::new();
+            converted.insert("id", id);
+            converted.insert("Count", count);
+            Some(converted.into())
+        }
+        _ => Some(item.into()),
+    }
+}
+
+fn hotbar_slot(root: &NbtCompound, slot: usize) -> Option<NbtTag> {
+    let toolbar = (slot / 9).to_string();
+    let position = slot % 9;
+    root.get::<_, &NbtList>(&toolbar)
+        .ok()
+        .and_then(|list| list.as_ref().get(position).cloned())
+}
+
+fn set_hotbar_slot(root: &mut NbtCompound, slot: usize, value: NbtTag) {
+    let toolbar = (slot / 9).to_string();
+    let position = slot % 9;
+    let mut list = root
+        .get::<_, &NbtList>(&toolbar)
+        .ok()
+        .cloned()
+        .unwrap_or_default();
+    while list.len() < 9 {
+        list.push(NbtCompound::new());
+    }
+    list[position] = value;
+    root.insert(toolbar, list);
+}
+
+fn set_hotbar_slot_optional(
+    root: &mut NbtCompound,
+    slot: usize,
+    value: Option<NbtTag>,
+) {
+    set_hotbar_slot(
+        root,
+        slot,
+        value.unwrap_or_else(|| NbtCompound::new().into()),
+    );
+}
+
+fn hotbar_data_version(root: &NbtCompound) -> i32 {
+    root.get::<_, i32>("DataVersion").unwrap_or(0)
+}
+
+fn family_data_versions_key(family: HotbarFamily) -> &'static str {
+    match family {
+        HotbarFamily::Legacy => "LegacyDataVersions",
+        HotbarFamily::Components => "ComponentsDataVersions",
+    }
+}
+
+pub(super) async fn regenerate_hotbars(state: &State) -> crate::Result<()> {
+    let instances = crate::state::list_instances(&state.pool).await?;
+    for metadata in instances {
+        if option_effective(&metadata, SyncedOption::CreativeHotbars, state)
+            .await?
+        {
+            write_hotbar_projection(&metadata, state).await?;
+        }
+    }
+    Ok(())
+}
+
+async fn write_hotbar_projection(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    let sync_state = read_hotbar_state(state).await?;
+    let family = hotbar_family(metadata, state).await?;
+    let root = hotbar_family_root(&sync_state.nbt, family);
+    let bytes = nbt_to_bytes(&root)?;
+    let expected = sha1_bytes(&bytes);
+    let generated = generated_hotbar_path(state, family, &metadata.instance.id);
+    begin_checkpoint(
+        &metadata.instance.id,
+        SyncedOption::CreativeHotbars,
+        family.as_str(),
+        &expected,
+        Some(&bytes),
+        sync_state.revision,
+        state,
+    )
+    .await?;
+    if let Some(parent) = generated.parent() {
+        io::create_dir_all(parent).await?;
+    }
+    io::write(&generated, &bytes).await?;
+    let local = instance_dir(metadata, state).join(HOTBAR_FILE);
+    let mode = ensure_link(&generated, &local).await?;
+    finish_checkpoint(
+        &metadata.instance.id,
+        SyncedOption::CreativeHotbars,
+        family.as_str(),
+        mode,
+        state,
+    )
+    .await?;
+    remove_other_hotbar_checkpoint(&metadata.instance.id, family, state).await
+}
+
+async fn remove_other_hotbar_checkpoint(
+    instance_id: &str,
+    family: HotbarFamily,
+    state: &State,
+) -> crate::Result<()> {
+    let variant = family.as_str();
+    sqlx::query!(
+        "
+		DELETE FROM instance_sync_checkpoints
+		WHERE instance_id = ?
+			AND feature = 'creative_hotbars'
+			AND variant != ?
+		",
+        instance_id,
+        variant,
+    )
+    .execute(&state.pool)
+    .await?;
+    Ok(())
+}
+
+pub(super) fn empty_hotbar_root() -> NbtCompound {
+    let mut root = NbtCompound::new();
+    for toolbar in 0..9 {
+        let mut items = NbtList::new();
+        for _ in 0..9 {
+            items.push(NbtCompound::new());
+        }
+        root.insert(toolbar.to_string(), items);
+    }
+    root
+}
+
+pub(super) async fn read_hotbar_state(
+    state: &State,
+) -> crate::Result<HotbarState> {
+    let row = sqlx::query!(
+        r#"
+		SELECT schema_version AS "schema_version!: i64",
+			revision AS "revision!: i64", nbt
+		FROM synced_hotbar_state
+		WHERE singleton = 1
+        "#,
+    )
+    .fetch_optional(&state.pool)
+    .await?;
+    if let Some(row) = row {
+        return Ok(HotbarState {
+            schema_version: row.schema_version,
+            revision: row.revision,
+            nbt: nbt_from_bytes(row.nbt)?,
+        });
+    }
+    Ok(HotbarState {
+        schema_version: HOTBAR_SCHEMA_VERSION,
+        revision: 0,
+        nbt: NbtCompound::new(),
+    })
+}
+
+pub(super) async fn hotbar_state_exists(state: &State) -> crate::Result<bool> {
+    Ok(sqlx::query_scalar!(
+        r#"
+		SELECT EXISTS(
+			SELECT 1 FROM synced_hotbar_state WHERE singleton = 1
+		) AS "exists!: bool"
+		"#,
+    )
+    .fetch_one(&state.pool)
+    .await?)
+}
+
+pub(super) fn hotbar_family_root(
+    state: &NbtCompound,
+    family: HotbarFamily,
+) -> NbtCompound {
+    let legacy = state
+        .get::<_, &NbtCompound>("Legacy")
+        .ok()
+        .cloned()
+        .unwrap_or_else(empty_hotbar_root);
+    match family {
+        HotbarFamily::Legacy => legacy,
+        HotbarFamily::Components => state
+            .get::<_, &NbtCompound>("Components")
+            .ok()
+            .cloned()
+            .unwrap_or(legacy),
+    }
+}
+
+pub(super) fn increment_hotbar_revision(state: &mut HotbarState) {
+    state.schema_version = HOTBAR_SCHEMA_VERSION;
+    state.revision = state.revision.saturating_add(1);
+}
+
+pub(super) async fn write_hotbar_state(
+    state: &State,
+    hotbar_state: &HotbarState,
+) -> crate::Result<()> {
+    let bytes = nbt_to_bytes(&hotbar_state.nbt)?;
+    sqlx::query!(
+        "
+		INSERT INTO synced_hotbar_state
+			(singleton, schema_version, revision, nbt)
+		VALUES (1, ?, ?, ?)
+		ON CONFLICT(singleton) DO UPDATE SET
+			schema_version = excluded.schema_version,
+			revision = excluded.revision,
+			nbt = excluded.nbt
+		",
+        hotbar_state.schema_version,
+        hotbar_state.revision,
+        bytes,
+    )
+    .execute(&state.pool)
+    .await?;
+    Ok(())
+}
+
+fn family_state_key(family: HotbarFamily) -> &'static str {
+    match family {
+        HotbarFamily::Legacy => "Legacy",
+        HotbarFamily::Components => "Components",
+    }
+}
+
+pub(super) fn generated_hotbar_path(
+    state: &State,
+    family: HotbarFamily,
+    instance_id: &str,
+) -> PathBuf {
+    synced_options_path(state)
+        .join("hotbars/generated")
+        .join(family.as_str())
+        .join(safe_instance_id(instance_id))
+        .join(HOTBAR_FILE)
+}
diff --git a/packages/app-lib/src/api/instance/synced_options/mod.rs b/packages/app-lib/src/api/instance/synced_options/mod.rs
new file mode 100644
index 0000000000..c5862f0b55
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_options/mod.rs
@@ -0,0 +1,28 @@
+mod command_history;
+mod files;
+mod hotbars;
+mod orchestration;
+
+const COMMAND_HISTORY_FILE: &str = "command_history.txt";
+const HOTBAR_FILE: &str = "hotbar.nbt";
+
+pub use self::command_history::{get_command_history, set_command_history};
+pub(super) use self::files::{
+    CheckpointStatus, checkpoint, detach_link, ensure_link, finish_checkpoint,
+    instance_dir, instance_is_running, instance_option_enabled, nbt_from_bytes,
+    nbt_to_bytes, read_nbt_file, safe_instance_id, sha1_bytes, sha1_file,
+    sync_files_are_protected,
+};
+pub(super) use self::orchestration::instance_option_supported;
+pub use self::orchestration::{
+    GlobalSyncedOptions, SyncedOptionCapability, SyncedOptionJoinAction,
+    SyncedOptionJoinPreview, SyncedOptionJoinResolution, SyncedOptionsOverview,
+    get_capabilities, get_global_options, get_instance_option_join_preview,
+    get_overview, get_synced_options_folder, reconcile_all,
+    reconcile_changed_file, reconcile_instance, set_global_option,
+    set_instance_option, synced_options_path,
+};
+pub(crate) use self::orchestration::{
+    monitor_persisted_processes, prepare_instance_update,
+    remove_generated_instance_files,
+};
diff --git a/packages/app-lib/src/api/instance/synced_options/orchestration.rs b/packages/app-lib/src/api/instance/synced_options/orchestration.rs
new file mode 100644
index 0000000000..16eeb0c8e5
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_options/orchestration.rs
@@ -0,0 +1,919 @@
+use crate::state::instances::adapters::sqlite::instance_rows;
+use crate::state::{InstanceLink, InstanceMetadata, SyncedOption};
+use crate::util::io;
+use crate::{ErrorKind, State};
+use quartz_nbt::NbtCompound;
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+use std::time::{SystemTime, UNIX_EPOCH};
+
+use super::super::synced_servers;
+use super::command_history::{
+    command_history_path, ensure_command_history,
+    merge_command_history_from_instance, normalize_command_history,
+    reconcile_command_history,
+};
+use super::files::{
+    detach_link, instance_dir, instance_is_running, instance_option_enabled,
+    read_nbt_file, safe_instance_id, sync_files_are_protected,
+};
+use super::hotbars::{
+    HOTBAR_SCHEMA_VERSION, HotbarState, backup_shared_hotbars,
+    empty_hotbar_root, ensure_hotbar, generated_hotbar_path, hotbar_family,
+    hotbar_state_exists, increment_hotbar_revision,
+    instance_hotbars_differ_from_synced, merge_hotbar_family,
+    read_hotbar_state, reconcile_hotbar, regenerate_hotbars,
+    write_hotbar_state,
+};
+use super::{COMMAND_HISTORY_FILE, HOTBAR_FILE};
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq, Serialize)]
+#[serde(rename_all = "snake_case")]
+pub enum SyncedOptionJoinAction {
+    SeedShared,
+    Attach,
+    Merge,
+    RequiresResolution,
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq, Serialize)]
+pub struct SyncedOptionJoinPreview {
+    pub action: SyncedOptionJoinAction,
+}
+
+#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize)]
+#[serde(rename_all = "snake_case")]
+pub enum SyncedOptionJoinResolution {
+    UseSynced,
+    UseInstance,
+}
+
+#[derive(Clone, Copy, Debug, Default, Serialize, Deserialize)]
+pub struct GlobalSyncedOptions {
+    pub command_history: bool,
+    pub multiplayer_servers: bool,
+    pub creative_hotbars: bool,
+    pub screenshots: bool,
+}
+
+impl GlobalSyncedOptions {
+    pub fn get(self, option: SyncedOption) -> bool {
+        match option {
+            SyncedOption::CommandHistory => self.command_history,
+            SyncedOption::MultiplayerServers => self.multiplayer_servers,
+            SyncedOption::CreativeHotbars => self.creative_hotbars,
+            SyncedOption::Screenshots => self.screenshots,
+        }
+    }
+
+    fn set(&mut self, option: SyncedOption, enabled: bool) {
+        match option {
+            SyncedOption::CommandHistory => self.command_history = enabled,
+            SyncedOption::MultiplayerServers => {
+                self.multiplayer_servers = enabled
+            }
+            SyncedOption::CreativeHotbars => self.creative_hotbars = enabled,
+            SyncedOption::Screenshots => self.screenshots = enabled,
+        }
+    }
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct SyncedOptionCapability {
+    pub option: SyncedOption,
+    pub supported: bool,
+    pub disabled_reason: Option<String>,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct SyncedOptionsOverview {
+    pub global_options: GlobalSyncedOptions,
+    pub capabilities: Vec<SyncedOptionCapability>,
+}
+
+enum CapabilityStatus {
+    Supported,
+    Unsupported(String),
+    Indeterminate(String),
+}
+
+pub async fn get_global_options() -> crate::Result<GlobalSyncedOptions> {
+    let state = State::get().await?;
+    get_global_options_with_state(&state).await
+}
+
+pub async fn get_synced_options_folder() -> crate::Result<PathBuf> {
+    let state = State::get().await?;
+    create_synced_directories(&state).await?;
+    Ok(synced_options_path(&state))
+}
+
+async fn get_global_options_with_state(
+    state: &State,
+) -> crate::Result<GlobalSyncedOptions> {
+    let mut options = GlobalSyncedOptions::default();
+    let rows = sqlx::query!(
+        r#"
+		SELECT feature, globally_enabled AS "globally_enabled!: bool"
+		FROM sync_feature_settings
+		"#,
+    )
+    .fetch_all(&state.pool)
+    .await?;
+
+    for row in rows {
+        if let Some(option) = option_from_str(&row.feature) {
+            options.set(option, row.globally_enabled);
+        }
+    }
+
+    Ok(options)
+}
+
+pub async fn get_overview(
+    instance_id: &str,
+) -> crate::Result<SyncedOptionsOverview> {
+    let state = State::get().await?;
+    let global_options = get_global_options_with_state(&state).await?;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    let mut capabilities = Vec::with_capacity(SyncedOption::ALL.len());
+
+    for option in SyncedOption::ALL {
+        capabilities.push(
+            capability(&metadata, option, global_options.get(option), &state)
+                .await,
+        );
+    }
+
+    Ok(SyncedOptionsOverview {
+        global_options,
+        capabilities,
+    })
+}
+
+pub async fn get_capabilities(
+    instance_id: &str,
+) -> crate::Result<Vec<SyncedOptionCapability>> {
+    Ok(get_overview(instance_id).await?.capabilities)
+}
+
+async fn capability(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    global_enabled: bool,
+    state: &State,
+) -> SyncedOptionCapability {
+    let status =
+        capability_status(metadata, option, global_enabled, state).await;
+    let (supported, disabled_reason) = match status {
+        CapabilityStatus::Supported => (true, None),
+        CapabilityStatus::Unsupported(reason)
+        | CapabilityStatus::Indeterminate(reason) => (false, Some(reason)),
+    };
+
+    SyncedOptionCapability {
+        option,
+        supported,
+        disabled_reason,
+    }
+}
+
+async fn capability_status(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    global_enabled: bool,
+    state: &State,
+) -> CapabilityStatus {
+    if !global_enabled {
+        return CapabilityStatus::Unsupported(
+            "This option is disabled in the app's synced options settings."
+                .to_string(),
+        );
+    }
+    if option == SyncedOption::MultiplayerServers
+        && is_linked_server_project(&metadata.link)
+    {
+        return CapabilityStatus::Unsupported(
+			"Multiplayer server syncing is unavailable for linked server-project instances."
+				.to_string(),
+		);
+    }
+    match version_capability(metadata, option, state).await {
+        CapabilityStatus::Supported => CapabilityStatus::Supported,
+        status => status,
+    }
+}
+
+pub(in crate::api::instance) async fn instance_option_supported(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    global_enabled: bool,
+    state: &State,
+) -> bool {
+    matches!(
+        capability_status(metadata, option, global_enabled, state).await,
+        CapabilityStatus::Supported
+    )
+}
+
+async fn version_capability(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> CapabilityStatus {
+    if option == SyncedOption::Screenshots {
+        return CapabilityStatus::Supported;
+    }
+
+    let game_version = &metadata.applied_content_set.game_version;
+    let Ok((manifest, version_index)) =
+        crate::launcher::resolve_minecraft_manifest(game_version, state).await
+    else {
+        return CapabilityStatus::Indeterminate(
+			"This instance’s Minecraft version could not be verified, so syncing is unavailable."
+				.to_string(),
+		);
+    };
+    let cutoff_id = match option {
+        // Mojang's manifest does not include Beta 1.8 Pre-release as a
+        // separate entry, so b1.8 is the first resolvable version at that
+        // boundary.
+        SyncedOption::MultiplayerServers => "b1.8",
+        SyncedOption::CreativeHotbars => "1.12",
+        SyncedOption::CommandHistory => "1.20.2",
+        SyncedOption::Screenshots => return CapabilityStatus::Supported,
+    };
+    let Some(cutoff) =
+        manifest.versions.iter().find(|item| item.id == cutoff_id)
+    else {
+        return CapabilityStatus::Indeterminate(
+			"This instance’s Minecraft version could not be verified, so syncing is unavailable."
+				.to_string(),
+		);
+    };
+
+    let version = &manifest.versions[version_index];
+    let release_only_option = matches!(
+        option,
+        SyncedOption::CreativeHotbars | SyncedOption::CommandHistory
+    );
+    let is_supported_release =
+        matches!(&version.type_, daedalus::minecraft::VersionType::Release);
+
+    if version.release_time >= cutoff.release_time
+        && (!release_only_option || is_supported_release)
+    {
+        return CapabilityStatus::Supported;
+    }
+
+    CapabilityStatus::Unsupported(
+		match option {
+			SyncedOption::MultiplayerServers => {
+				"Multiplayer server syncing requires Minecraft Beta 1.8 Pre-release or newer."
+			}
+			SyncedOption::CreativeHotbars => {
+				"Saved creative hotbars require Minecraft 1.12 or newer."
+			}
+			SyncedOption::CommandHistory => {
+				"Command history syncing requires Minecraft 1.20.2 or newer."
+			}
+			SyncedOption::Screenshots => unreachable!(),
+		}
+		.to_string(),
+	)
+}
+
+pub async fn set_global_option(
+    option: SyncedOption,
+    enabled: bool,
+) -> crate::Result<GlobalSyncedOptions> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let reset_participation =
+        enabled && !canonical_exists(option, &state).await?;
+
+    let option_name = option.as_str();
+    sqlx::query!(
+        "
+		INSERT INTO sync_feature_settings
+			(feature, globally_enabled, new_instance_default)
+		VALUES (?, ?, 1)
+		ON CONFLICT(feature) DO UPDATE SET
+			globally_enabled = excluded.globally_enabled
+		",
+        option_name,
+        enabled,
+    )
+    .execute(&state.pool)
+    .await?;
+
+    let instances = crate::state::list_instances(&state.pool).await?;
+    if reset_participation {
+        for metadata in instances {
+            if instance_option_enabled(&metadata, option) {
+                instance_rows::set_instance_sync_preference(
+                    &metadata.instance.id,
+                    option,
+                    false,
+                    &state.pool,
+                )
+                .await?;
+            }
+            if !sync_files_are_protected(&metadata)
+                && !instance_is_running(&metadata, &state).await?
+            {
+                detach_option(&metadata, option, &state).await?;
+            }
+        }
+        return get_global_options_with_state(&state).await;
+    }
+    for metadata in instances {
+        if sync_files_are_protected(&metadata)
+            || instance_is_running(&metadata, &state).await?
+        {
+            continue;
+        }
+        if !instance_option_enabled(&metadata, option) {
+            detach_option(&metadata, option, &state).await?;
+            continue;
+        }
+        match capability_status(&metadata, option, enabled, &state).await {
+            CapabilityStatus::Supported => {
+                reconcile_option(&metadata, option, &state).await?
+            }
+            CapabilityStatus::Unsupported(_) => {
+                detach_option(&metadata, option, &state).await?
+            }
+            CapabilityStatus::Indeterminate(_) => {}
+        }
+    }
+
+    get_global_options_with_state(&state).await
+}
+
+pub async fn set_instance_option(
+    instance_id: &str,
+    option: SyncedOption,
+    enabled: bool,
+    resolution: Option<SyncedOptionJoinResolution>,
+) -> crate::Result<InstanceMetadata> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    if instance_option_enabled(&metadata, option) == enabled {
+        return Ok(metadata);
+    }
+    let global = get_global_options_with_state(&state).await?;
+    let can_reconcile = !sync_files_are_protected(&metadata)
+        && !instance_is_running(&metadata, &state).await?;
+    if enabled {
+        let eligibility =
+            capability(&metadata, option, global.get(option), &state).await;
+        if !eligibility.supported {
+            return Err(ErrorKind::InputError(
+                eligibility.disabled_reason.unwrap_or_default(),
+            )
+            .into());
+        }
+        if option != SyncedOption::Screenshots && !can_reconcile {
+            return Err(ErrorKind::InputError(
+                "Close the instance before including it in file syncing."
+                    .to_string(),
+            )
+            .into());
+        }
+
+        let action =
+            instance_option_join_action(&metadata, option, &state).await?;
+        if action == SyncedOptionJoinAction::RequiresResolution
+            && resolution.is_none()
+        {
+            return Err(ErrorKind::InputError(
+                "Choose whether to use the synced hotbars or this instance's hotbars."
+                    .to_string(),
+            )
+            .into());
+        }
+        if option != SyncedOption::Screenshots {
+            backup_instance_option_file(&metadata, option, &state).await?;
+        }
+        match action {
+            SyncedOptionJoinAction::SeedShared => {
+                seed_from_instance(&metadata, option, &state).await?;
+            }
+            SyncedOptionJoinAction::Attach => {}
+            SyncedOptionJoinAction::Merge => match option {
+                SyncedOption::CommandHistory => {
+                    merge_command_history_from_instance(&metadata, &state)
+                        .await?;
+                }
+                SyncedOption::MultiplayerServers => {
+                    synced_servers::merge_servers_from_instance(
+                        &metadata, &state,
+                    )
+                    .await?;
+                }
+                SyncedOption::CreativeHotbars | SyncedOption::Screenshots => {
+                    unreachable!()
+                }
+            },
+            SyncedOptionJoinAction::RequiresResolution => match resolution {
+                Some(SyncedOptionJoinResolution::UseSynced) => {}
+                Some(SyncedOptionJoinResolution::UseInstance) => {
+                    backup_shared_hotbars(&state).await?;
+                    seed_from_instance(&metadata, option, &state).await?;
+                }
+                None => unreachable!(),
+            },
+        }
+    }
+
+    instance_rows::set_instance_sync_preference(
+        instance_id,
+        option,
+        enabled,
+        &state.pool,
+    )
+    .await?;
+    if can_reconcile {
+        if enabled {
+            ensure_option(&metadata, option, &state).await?;
+        } else {
+            detach_option(&metadata, option, &state).await?;
+        }
+    }
+
+    crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| {
+            ErrorKind::InputError("Unknown instance".to_string()).into()
+        })
+}
+
+pub async fn get_instance_option_join_preview(
+    instance_id: &str,
+    option: SyncedOption,
+) -> crate::Result<SyncedOptionJoinPreview> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    let global = get_global_options_with_state(&state).await?;
+    let eligibility =
+        capability(&metadata, option, global.get(option), &state).await;
+    if !eligibility.supported {
+        return Err(ErrorKind::InputError(
+            eligibility.disabled_reason.unwrap_or_default(),
+        )
+        .into());
+    }
+    if option != SyncedOption::Screenshots
+        && (sync_files_are_protected(&metadata)
+            || instance_is_running(&metadata, &state).await?)
+    {
+        return Err(ErrorKind::InputError(
+            "Close the instance before including it in file syncing."
+                .to_string(),
+        )
+        .into());
+    }
+
+    Ok(SyncedOptionJoinPreview {
+        action: instance_option_join_action(&metadata, option, &state).await?,
+    })
+}
+
+async fn instance_option_join_action(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<SyncedOptionJoinAction> {
+    if !canonical_exists(option, state).await? {
+        return Ok(SyncedOptionJoinAction::SeedShared);
+    }
+    Ok(match option {
+        SyncedOption::CommandHistory | SyncedOption::MultiplayerServers => {
+            SyncedOptionJoinAction::Merge
+        }
+        SyncedOption::CreativeHotbars => {
+            if instance_hotbars_differ_from_synced(metadata, state).await? {
+                SyncedOptionJoinAction::RequiresResolution
+            } else {
+                SyncedOptionJoinAction::Attach
+            }
+        }
+        SyncedOption::Screenshots => SyncedOptionJoinAction::Attach,
+    })
+}
+
+pub async fn reconcile_all() -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    create_synced_directories(&state).await?;
+    let instances = crate::state::list_instances(&state.pool).await?;
+    for metadata in instances {
+        if let Err(error) =
+            reconcile_instance_with_state(&metadata, &state).await
+        {
+            tracing::warn!(
+                "Failed to reconcile synced options for {}: {error}",
+                metadata.instance.id
+            );
+        }
+    }
+    Ok(())
+}
+
+pub(crate) async fn monitor_persisted_processes() -> crate::Result<()> {
+    let state = State::get().await?;
+    let instance_ids =
+        sqlx::query_scalar!("SELECT DISTINCT instance_id FROM processes",)
+            .fetch_all(&state.pool)
+            .await?;
+    for instance_id in instance_ids {
+        tokio::spawn(async move {
+            loop {
+                let Ok(state) = State::get().await else {
+                    break;
+                };
+                let Ok(Some(metadata)) =
+                    crate::state::get_instance(&instance_id, &state.pool).await
+                else {
+                    break;
+                };
+                match instance_is_running(&metadata, &state).await {
+                    Ok(true) => {
+                        tokio::time::sleep(std::time::Duration::from_secs(5))
+                            .await;
+                    }
+                    Ok(false) => {
+                        if let Err(error) =
+                            reconcile_instance(&instance_id).await
+                        {
+                            tracing::warn!(
+                                "Failed to reconcile synced options after a persisted process exited for {instance_id}: {error}"
+                            );
+                        }
+                        break;
+                    }
+                    Err(error) => {
+                        tracing::warn!(
+                            "Failed to inspect the persisted process for {instance_id}: {error}"
+                        );
+                        tokio::time::sleep(std::time::Duration::from_secs(5))
+                            .await;
+                    }
+                }
+            }
+        });
+    }
+    Ok(())
+}
+
+pub async fn reconcile_instance(instance_id: &str) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    reconcile_instance_with_state(&metadata, &state).await
+}
+
+pub(crate) async fn prepare_instance_update(
+    instance_id: &str,
+) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    for option in [
+        SyncedOption::CommandHistory,
+        SyncedOption::CreativeHotbars,
+        SyncedOption::MultiplayerServers,
+    ] {
+        if instance_option_enabled(&metadata, option) {
+            detach_option(&metadata, option, &state).await?;
+        }
+    }
+    Ok(())
+}
+
+async fn reconcile_instance_with_state(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    if sync_files_are_protected(metadata)
+        || instance_is_running(metadata, state).await?
+    {
+        return Ok(());
+    }
+    let global = get_global_options_with_state(state).await?;
+    for option in SyncedOption::ALL {
+        if !instance_option_enabled(metadata, option) {
+            detach_option(metadata, option, state).await?;
+            continue;
+        }
+        match capability_status(metadata, option, global.get(option), state)
+            .await
+        {
+            CapabilityStatus::Supported => {
+                reconcile_option(metadata, option, state).await?
+            }
+            CapabilityStatus::Unsupported(_) => {
+                detach_option(metadata, option, state).await?
+            }
+            CapabilityStatus::Indeterminate(_) => {}
+        }
+    }
+    Ok(())
+}
+
+async fn reconcile_option(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<()> {
+    match option {
+        SyncedOption::CommandHistory => {
+            reconcile_command_history(metadata, state).await
+        }
+        SyncedOption::CreativeHotbars => {
+            reconcile_hotbar(metadata, state).await
+        }
+        SyncedOption::MultiplayerServers => {
+            synced_servers::reconcile_servers(metadata, state).await
+        }
+        SyncedOption::Screenshots => Ok(()),
+    }
+}
+
+pub async fn reconcile_changed_file(
+    instance_id: &str,
+    file_name: &str,
+) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    if sync_files_are_protected(&metadata) {
+        return Ok(());
+    }
+    match file_name {
+        COMMAND_HISTORY_FILE => {
+            reconcile_command_history(&metadata, &state).await
+        }
+        HOTBAR_FILE => reconcile_hotbar(&metadata, &state).await,
+        "servers.dat" => {
+            synced_servers::reconcile_servers(&metadata, &state).await
+        }
+        _ => Ok(()),
+    }
+}
+
+pub fn synced_options_path(state: &State) -> PathBuf {
+    state.directories.synced_options_dir()
+}
+
+pub(crate) async fn remove_generated_instance_files(
+    instance_id: &str,
+    state: &State,
+) -> crate::Result<()> {
+    let instance_id = safe_instance_id(instance_id);
+    for path in [
+        synced_options_path(state)
+            .join("hotbars/generated/legacy")
+            .join(&instance_id),
+        synced_options_path(state)
+            .join("hotbars/generated/components")
+            .join(&instance_id),
+        synced_options_path(state)
+            .join("servers/generated")
+            .join(&instance_id),
+    ] {
+        if path.exists() {
+            io::remove_dir_all(path).await?;
+        }
+    }
+    Ok(())
+}
+
+pub(super) async fn create_synced_directories(
+    state: &State,
+) -> crate::Result<()> {
+    for path in [
+        synced_options_path(state),
+        synced_options_path(state).join("hotbars/generated/legacy"),
+        synced_options_path(state).join("hotbars/generated/components"),
+        synced_options_path(state).join("servers/generated"),
+    ] {
+        io::create_dir_all(path).await?;
+    }
+    Ok(())
+}
+
+async fn backup_instance_option_file(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<()> {
+    let directory = instance_dir(metadata, state);
+    let path = match option {
+        SyncedOption::CommandHistory => directory.join(COMMAND_HISTORY_FILE),
+        SyncedOption::CreativeHotbars => directory.join(HOTBAR_FILE),
+        SyncedOption::MultiplayerServers => directory.join("servers.dat"),
+        SyncedOption::Screenshots => return Ok(()),
+    };
+    if !path.exists() {
+        return Ok(());
+    }
+    let Some(file_name) = path.file_name().and_then(|value| value.to_str())
+    else {
+        return Ok(());
+    };
+    backup_bytes(
+        &metadata.instance.id,
+        file_name,
+        &io::read(&path).await?,
+        state,
+    )
+    .await
+}
+
+pub(super) async fn backup_bytes(
+    owner: &str,
+    file_name: &str,
+    contents: &[u8],
+    state: &State,
+) -> crate::Result<()> {
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .unwrap_or_default()
+        .as_nanos();
+    let directory = synced_options_path(state)
+        .join("backups")
+        .join(safe_instance_id(owner))
+        .join(timestamp.to_string());
+    io::create_dir_all(&directory).await?;
+    io::write(directory.join(file_name), contents).await?;
+    Ok(())
+}
+
+pub(super) async fn seed_from_instance(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<()> {
+    create_synced_directories(state).await?;
+    let instance_dir = instance_dir(metadata, state);
+    match option {
+        SyncedOption::CommandHistory => {
+            let path = instance_dir.join(COMMAND_HISTORY_FILE);
+            let contents = if path.exists() {
+                String::from_utf8_lossy(&io::read(path).await?).into_owned()
+            } else {
+                String::new()
+            };
+            io::write(
+                command_history_path(state),
+                normalize_command_history(&contents),
+            )
+            .await?;
+        }
+        SyncedOption::CreativeHotbars => {
+            let path = instance_dir.join(HOTBAR_FILE);
+            let family = hotbar_family(metadata, state).await?;
+            let root = if path.exists() {
+                read_nbt_file(&path).await?
+            } else {
+                empty_hotbar_root()
+            };
+            let previous_state = read_hotbar_state(state).await?;
+            let mut sync_state = HotbarState {
+                schema_version: HOTBAR_SCHEMA_VERSION,
+                revision: previous_state.revision,
+                nbt: NbtCompound::new(),
+            };
+            let merge_base = empty_hotbar_root();
+            if merge_hotbar_family(
+                &mut sync_state.nbt,
+                family,
+                &merge_base,
+                &root,
+            ) {
+                increment_hotbar_revision(&mut sync_state);
+            }
+            write_hotbar_state(state, &sync_state).await?;
+            regenerate_hotbars(state).await?;
+        }
+        SyncedOption::MultiplayerServers => {
+            synced_servers::seed_servers(metadata, state).await?;
+        }
+        SyncedOption::Screenshots => {}
+    }
+    Ok(())
+}
+
+async fn ensure_option(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<()> {
+    match option {
+        SyncedOption::CommandHistory => {
+            ensure_command_history(metadata, state).await
+        }
+        SyncedOption::CreativeHotbars => ensure_hotbar(metadata, state).await,
+        SyncedOption::MultiplayerServers => {
+            synced_servers::ensure_servers(metadata, state).await
+        }
+        SyncedOption::Screenshots => Ok(()),
+    }
+}
+
+async fn detach_option(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<()> {
+    let instance_dir = instance_dir(metadata, state);
+    match option {
+        SyncedOption::CommandHistory => {
+            detach_link(
+                &command_history_path(state),
+                &instance_dir.join(COMMAND_HISTORY_FILE),
+            )
+            .await
+        }
+        SyncedOption::CreativeHotbars => {
+            let target = instance_dir.join(HOTBAR_FILE);
+            let family = hotbar_family(metadata, state).await.ok();
+            let source = family
+                .map(|family| {
+                    generated_hotbar_path(state, family, &metadata.instance.id)
+                })
+                .unwrap_or_else(|| target.clone());
+            detach_link(&source, &target).await
+        }
+        SyncedOption::MultiplayerServers => {
+            synced_servers::detach_servers(metadata, state).await
+        }
+        SyncedOption::Screenshots => Ok(()),
+    }
+}
+
+async fn canonical_exists(
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<bool> {
+    Ok(match option {
+        SyncedOption::CommandHistory => command_history_path(state).exists(),
+        SyncedOption::CreativeHotbars => hotbar_state_exists(state).await?,
+        SyncedOption::MultiplayerServers => {
+            synced_servers::canonical_exists(state).await?
+        }
+        SyncedOption::Screenshots => true,
+    })
+}
+
+pub(super) async fn option_effective(
+    metadata: &InstanceMetadata,
+    option: SyncedOption,
+    state: &State,
+) -> crate::Result<bool> {
+    if sync_files_are_protected(metadata)
+        || instance_is_running(metadata, state).await?
+    {
+        return Ok(false);
+    }
+    let global = get_global_options_with_state(state).await?;
+    Ok(instance_option_enabled(metadata, option)
+        && capability(metadata, option, global.get(option), state)
+            .await
+            .supported)
+}
+
+fn is_linked_server_project(link: &InstanceLink) -> bool {
+    matches!(
+        link,
+        InstanceLink::ServerProject { .. }
+            | InstanceLink::ServerProjectModpack { .. }
+            | InstanceLink::ModrinthHosting { .. }
+    )
+}
+
+fn option_from_str(value: &str) -> Option<SyncedOption> {
+    match value {
+        "command_history" => Some(SyncedOption::CommandHistory),
+        "multiplayer_servers" => Some(SyncedOption::MultiplayerServers),
+        "creative_hotbars" => Some(SyncedOption::CreativeHotbars),
+        "screenshots" => Some(SyncedOption::Screenshots),
+        _ => None,
+    }
+}
diff --git a/packages/app-lib/src/api/instance/synced_servers/codec.rs b/packages/app-lib/src/api/instance/synced_servers/codec.rs
new file mode 100644
index 0000000000..7c5496028a
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_servers/codec.rs
@@ -0,0 +1,112 @@
+use super::super::synced_options::{
+    nbt_from_bytes, nbt_to_bytes, read_nbt_file,
+};
+use crate::ErrorKind;
+use quartz_nbt::{NbtCompound, NbtList, NbtTag};
+use std::path::Path;
+
+pub(crate) async fn read_servers(
+    path: &Path,
+) -> crate::Result<Vec<NbtCompound>> {
+    if !path.exists() {
+        return Ok(Vec::new());
+    }
+    servers_from_root(read_nbt_file(path).await?)
+}
+
+pub(super) fn servers_from_bytes(
+    bytes: Vec<u8>,
+) -> crate::Result<Vec<NbtCompound>> {
+    servers_from_root(nbt_from_bytes(bytes)?)
+}
+
+fn servers_from_root(root: NbtCompound) -> crate::Result<Vec<NbtCompound>> {
+    let list = root.get::<_, &NbtList>("servers").map_err(|_| {
+        ErrorKind::InputError(
+            "servers.dat does not contain a valid servers list".to_string(),
+        )
+    })?;
+    list.iter()
+        .map(|tag| match tag {
+            NbtTag::Compound(compound) => Ok(compound.clone()),
+            _ => Err(ErrorKind::InputError(
+                "servers.dat contains an invalid server entry".to_string(),
+            )
+            .into()),
+        })
+        .collect()
+}
+
+pub(crate) async fn write_servers(
+    path: &Path,
+    servers: &[NbtCompound],
+) -> crate::Result<()> {
+    if let Some(parent) = path.parent() {
+        crate::util::io::create_dir_all(parent).await?;
+    }
+    crate::util::io::write(path, servers_to_bytes(servers)?).await?;
+    Ok(())
+}
+
+pub(super) fn servers_to_bytes(
+    servers: &[NbtCompound],
+) -> crate::Result<Vec<u8>> {
+    let mut list = NbtList::new();
+    for server in servers {
+        list.push(server.clone());
+    }
+    let mut root = NbtCompound::new();
+    root.insert("servers", list);
+    nbt_to_bytes(&root)
+}
+
+pub(crate) fn server_data(
+    name: String,
+    address: String,
+    accept_textures: Option<bool>,
+) -> NbtCompound {
+    let mut server = NbtCompound::new();
+    server.insert("name", name);
+    server.insert("ip", address);
+    if let Some(accept_textures) = accept_textures {
+        server.insert("acceptTextures", i8::from(accept_textures));
+    }
+    server.insert("hidden", 0_i8);
+    server
+}
+
+pub(super) fn update_server_data(
+    server: &mut NbtCompound,
+    name: String,
+    address: String,
+    accept_textures: Option<bool>,
+) {
+    server.insert("name", name);
+    server.insert("ip", address);
+    match accept_textures {
+        Some(value) => server.insert("acceptTextures", i8::from(value)),
+        None => {
+            server.inner_mut().remove("acceptTextures");
+        }
+    }
+}
+
+pub(super) fn server_hidden(server: &NbtCompound) -> bool {
+    server.get::<_, i8>("hidden").unwrap_or(0) != 0
+}
+
+pub(super) fn server_address(server: &NbtCompound) -> String {
+    server.get::<_, &str>("ip").unwrap_or_default().to_string()
+}
+
+pub(super) fn server_identity_address(server: &NbtCompound) -> String {
+    server_address(server).trim().to_ascii_lowercase()
+}
+
+pub(super) fn server_identity_name(server: &NbtCompound) -> String {
+    server
+        .get::<_, &str>("name")
+        .unwrap_or_default()
+        .trim()
+        .to_ascii_lowercase()
+}
diff --git a/packages/app-lib/src/api/instance/synced_servers/mod.rs b/packages/app-lib/src/api/instance/synced_servers/mod.rs
new file mode 100644
index 0000000000..60ddd2949a
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_servers/mod.rs
@@ -0,0 +1,24 @@
+mod codec;
+mod modpack;
+mod operations;
+mod storage;
+mod types;
+
+const SERVERS_FILE: &str = "servers.dat";
+
+pub(crate) use self::codec::server_data;
+pub use self::modpack::{capture_modpack_servers, clear_modpack_servers};
+pub(crate) use self::operations::{
+    add_user_server, list_server_records, remove_server_by_index,
+    update_server_by_index,
+};
+pub use self::operations::{
+    desync_server, list_synced_servers, remove_synced_server,
+    update_synced_server,
+};
+pub(super) use self::operations::{
+    detach_servers, ensure_servers, merge_servers_from_instance,
+    reconcile_servers, seed_servers,
+};
+pub(super) use self::storage::canonical_exists;
+pub use self::types::{DesyncServerMode, ServerSource, SyncedServer};
diff --git a/packages/app-lib/src/api/instance/synced_servers/modpack.rs b/packages/app-lib/src/api/instance/synced_servers/modpack.rs
new file mode 100644
index 0000000000..25d1373dc0
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_servers/modpack.rs
@@ -0,0 +1,225 @@
+use super::super::synced_options::instance_dir;
+use super::SERVERS_FILE;
+use super::codec::{read_servers, servers_from_bytes};
+use super::operations::{compose_instance, effective};
+use super::storage::{load_local, write_local_rows};
+use super::types::{LocalServer, ServerSource};
+use crate::state::{CachedEntry, InstanceLink, InstanceMetadata};
+use crate::util::fetch::{DownloadMeta, DownloadReason, fetch_mirrors};
+use crate::{ErrorKind, State};
+use async_zip::base::read::seek::ZipFileReader;
+use quartz_nbt::NbtCompound;
+use std::io::Cursor;
+use uuid::Uuid;
+
+pub async fn capture_modpack_servers(instance_id: &str) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    let path = instance_dir(&metadata, &state).join(SERVERS_FILE);
+    let servers = read_servers(&path).await?;
+    replace_modpack_servers(&metadata, servers, &state).await?;
+    if effective(&metadata, &state).await? {
+        compose_instance(&metadata, &state).await?;
+    }
+    Ok(())
+}
+
+pub async fn clear_modpack_servers(instance_id: &str) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    replace_modpack_servers(&metadata, Vec::new(), &state).await?;
+    if effective(&metadata, &state).await? {
+        compose_instance(&metadata, &state).await?;
+    }
+    Ok(())
+}
+
+async fn replace_modpack_servers(
+    metadata: &InstanceMetadata,
+    servers: Vec<NbtCompound>,
+    state: &State,
+) -> crate::Result<()> {
+    let mut local = servers
+        .into_iter()
+        .enumerate()
+        .map(|(position, data)| LocalServer {
+            id: Uuid::new_v4().to_string(),
+            source: ServerSource::Modpack,
+            excluded_synced_server_id: None,
+            data,
+            position: position as i64,
+        })
+        .collect::<Vec<_>>();
+    let mut retained = load_local(&metadata.instance.id, state)
+        .await?
+        .into_iter()
+        .filter(|server| server.source != ServerSource::Modpack)
+        .collect::<Vec<_>>();
+    for server in &mut retained {
+        server.position = local.len() as i64;
+        local.push(server.clone());
+    }
+    let mut tx = state.pool.begin().await?;
+    write_local_rows(&mut tx, &metadata.instance.id, &local).await?;
+    let version_id = modpack_version_id(&metadata.link);
+    sqlx::query!(
+        "
+		INSERT INTO instance_server_pack_state (instance_id, version_id)
+		VALUES (?, ?)
+		ON CONFLICT(instance_id) DO UPDATE SET
+			version_id = excluded.version_id
+		",
+        metadata.instance.id,
+        version_id,
+    )
+    .execute(&mut *tx)
+    .await?;
+    tx.commit().await?;
+    Ok(())
+}
+
+pub(super) async fn pack_state_matches_link(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<bool> {
+    let row = sqlx::query!(
+        "
+		SELECT version_id
+		FROM instance_server_pack_state
+		WHERE instance_id = ?
+		",
+        metadata.instance.id,
+    )
+    .fetch_optional(&state.pool)
+    .await?;
+    Ok(row.is_some_and(|row| {
+        row.version_id.as_deref() == modpack_version_id(&metadata.link)
+    }))
+}
+
+pub(super) async fn pack_state_exists(
+    instance_id: &str,
+    state: &State,
+) -> crate::Result<bool> {
+    Ok(sqlx::query_scalar!(
+        r#"
+		SELECT EXISTS(
+			SELECT 1 FROM instance_server_pack_state WHERE instance_id = ?
+		) AS "exists!: bool"
+		"#,
+        instance_id,
+    )
+    .fetch_one(&state.pool)
+    .await?)
+}
+
+pub(super) async fn reconstruct_modpack_servers(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    let version_id = modpack_version_id(&metadata.link).ok_or_else(|| {
+        ErrorKind::InputError(
+            "This modpack does not have a recoverable Modrinth version."
+                .to_string(),
+        )
+    })?;
+    let version = CachedEntry::get_version(
+        version_id,
+        None,
+        &state.pool,
+        &state.api_semaphore,
+    )
+    .await?
+    .ok_or_else(|| {
+        ErrorKind::InputError(format!(
+            "Modpack version {version_id} could not be found"
+        ))
+    })?;
+    let primary_file = version
+        .files
+        .iter()
+        .find(|file| file.primary)
+        .or_else(|| version.files.first())
+        .ok_or_else(|| {
+            ErrorKind::InputError(format!(
+                "Modpack version {version_id} has no downloadable file"
+            ))
+        })?;
+    let download_meta = DownloadMeta {
+        reason: DownloadReason::Modpack,
+        game_version: metadata.applied_content_set.game_version.clone(),
+        loader: metadata.applied_content_set.loader.as_str().to_string(),
+        dependent_on: Some(version_id.to_string()),
+    };
+    let mrpack = fetch_mirrors(
+        &[&primary_file.url],
+        primary_file.hashes.get("sha1").map(String::as_str),
+        Some(&download_meta),
+        None,
+        &state.api_semaphore,
+        &state.pool,
+    )
+    .await?;
+    let mut archive = ZipFileReader::with_tokio(Cursor::new(&mrpack)).await?;
+    let mut selected = None;
+    for (index, entry) in archive.file().entries().iter().enumerate() {
+        let Ok(filename) = entry.filename().as_str() else {
+            continue;
+        };
+        let priority = if filename == "client-overrides/servers.dat" {
+            2
+        } else if filename == "overrides/servers.dat" {
+            1
+        } else {
+            continue;
+        };
+        if selected
+            .is_none_or(|(selected_priority, _)| priority >= selected_priority)
+        {
+            selected = Some((priority, index));
+        }
+    }
+
+    let servers = if let Some((_, index)) = selected {
+        let mut bytes = Vec::new();
+        let mut reader = archive.reader_with_entry(index).await?;
+        reader.read_to_end_checked(&mut bytes).await?;
+        servers_from_bytes(bytes)?
+    } else {
+        Vec::new()
+    };
+    replace_modpack_servers(metadata, servers, state).await
+}
+
+pub(super) fn is_modpack_link(link: &InstanceLink) -> bool {
+    matches!(
+        link,
+        InstanceLink::ModrinthModpack { .. }
+            | InstanceLink::ImportedModpack { .. }
+            | InstanceLink::SharedInstance { .. }
+    )
+}
+
+fn modpack_version_id(link: &InstanceLink) -> Option<&str> {
+    match link {
+        InstanceLink::ModrinthModpack { version_id, .. } => Some(version_id),
+        InstanceLink::ServerProjectModpack {
+            content_version_id, ..
+        } => Some(content_version_id),
+        InstanceLink::ImportedModpack {
+            version_id: Some(version_id),
+            ..
+        } => Some(version_id),
+        InstanceLink::SharedInstance {
+            modpack_version_id: Some(version_id),
+            ..
+        } => Some(version_id),
+        _ => None,
+    }
+}
diff --git a/packages/app-lib/src/api/instance/synced_servers/operations.rs b/packages/app-lib/src/api/instance/synced_servers/operations.rs
new file mode 100644
index 0000000000..753391f9d4
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_servers/operations.rs
@@ -0,0 +1,824 @@
+use super::super::synced_options::{
+    CheckpointStatus, checkpoint, detach_link, ensure_link, finish_checkpoint,
+    instance_dir, instance_is_running, instance_option_enabled,
+    instance_option_supported, sha1_bytes, sha1_file, sync_files_are_protected,
+};
+use crate::state::{InstanceMetadata, SyncedOption};
+use crate::{ErrorKind, State};
+use quartz_nbt::NbtCompound;
+use uuid::Uuid;
+
+use super::SERVERS_FILE;
+use super::codec::{
+    read_servers, server_address, server_hidden, server_identity_address,
+    server_identity_name, servers_to_bytes, update_server_data, write_servers,
+};
+use super::modpack::{
+    is_modpack_link, pack_state_exists, pack_state_matches_link,
+    reconstruct_modpack_servers,
+};
+use super::storage::{
+    begin_server_checkpoint, canonical_exists, commit_server_state,
+    generated_path, load_local, load_projection_entries, read_canonical,
+    server_revision, write_local,
+};
+use super::types::{
+    CanonicalServer, DesyncServerMode, LocalServer, ProjectionEntry,
+    ProjectionOwner, ServerRecord, ServerSource, SyncedServer,
+};
+use std::collections::HashSet;
+
+pub(in crate::api::instance) async fn seed_servers(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    if is_modpack_link(&metadata.link)
+        && (!pack_state_matches_link(metadata, state).await?
+            || !pack_state_exists(&metadata.instance.id, state).await?)
+        && let Err(error) = reconstruct_modpack_servers(metadata, state).await
+    {
+        tracing::warn!(
+            "Failed to reconstruct the server pack state for {}: {error}",
+            metadata.instance.id
+        );
+    }
+    let local_entries = load_local(&metadata.instance.id, state).await?;
+    if is_modpack_link(&metadata.link)
+        && !pack_state_exists(&metadata.instance.id, state).await?
+    {
+        return Err(ErrorKind::InputError(
+			"This linked modpack cannot be used as the multiplayer base until its supplied server list has been reconstructed. Choose an unmanaged instance instead."
+				.to_string(),
+		)
+		.into());
+    }
+    let path = instance_dir(metadata, state).join(SERVERS_FILE);
+    let mut servers = read_servers(&path).await?;
+    for local in &local_entries {
+        let local_address = server_identity_address(&local.data);
+        if let Some(index) = servers.iter().position(|data| {
+            data == &local.data
+                || (!local_address.is_empty()
+                    && server_identity_address(data) == local_address)
+        }) {
+            servers.remove(index);
+        }
+    }
+    let canonical = servers
+        .into_iter()
+        .map(|data| CanonicalServer {
+            id: Uuid::new_v4().to_string(),
+            data,
+        })
+        .collect::<Vec<_>>();
+    commit_server_state(Some(&canonical), None, state).await?;
+    regenerate_servers(state).await
+}
+
+pub(in crate::api::instance) async fn merge_servers_from_instance(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    if is_modpack_link(&metadata.link)
+        && (!pack_state_matches_link(metadata, state).await?
+            || !pack_state_exists(&metadata.instance.id, state).await?)
+        && let Err(error) = reconstruct_modpack_servers(metadata, state).await
+    {
+        tracing::warn!(
+            "Failed to reconstruct the server pack state for {}: {error}",
+            metadata.instance.id
+        );
+    }
+    let local_entries = load_local(&metadata.instance.id, state).await?;
+    if is_modpack_link(&metadata.link)
+        && !pack_state_exists(&metadata.instance.id, state).await?
+    {
+        return Err(ErrorKind::InputError(
+            "This linked modpack cannot join multiplayer syncing until its supplied server list has been reconstructed."
+                .to_string(),
+        )
+        .into());
+    }
+    let path = instance_dir(metadata, state).join(SERVERS_FILE);
+    let mut candidates = read_servers(&path).await?;
+    for local in &local_entries {
+        let local_address = server_identity_address(&local.data);
+        if let Some(index) = candidates.iter().position(|data| {
+            data == &local.data
+                || (!local_address.is_empty()
+                    && server_identity_address(data) == local_address)
+        }) {
+            candidates.remove(index);
+        }
+    }
+
+    let mut canonical = read_canonical(state).await?;
+    for data in candidates {
+        let address = server_identity_address(&data);
+        let exists = canonical.iter().any(|server| {
+            server.data == data
+                || (!address.is_empty()
+                    && server_identity_address(&server.data) == address)
+        });
+        if !exists {
+            canonical.push(CanonicalServer {
+                id: Uuid::new_v4().to_string(),
+                data,
+            });
+        }
+    }
+    if commit_server_state(Some(&canonical), None, state).await? {
+        regenerate_servers(state).await?;
+    }
+    Ok(())
+}
+
+pub(in crate::api::instance) async fn ensure_servers(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    if is_modpack_link(&metadata.link)
+        && !pack_state_matches_link(metadata, state).await?
+        && let Err(error) = reconstruct_modpack_servers(metadata, state).await
+    {
+        tracing::warn!(
+            "Failed to reconstruct the server pack state for {}; retaining its last known per-instance server metadata: {error}",
+            metadata.instance.id
+        );
+    }
+    if !canonical_exists(state).await? {
+        if !is_modpack_link(&metadata.link) {
+            let servers =
+                read_servers(&instance_dir(metadata, state).join(SERVERS_FILE))
+                    .await?;
+            let canonical = servers
+                .into_iter()
+                .map(|data| CanonicalServer {
+                    id: Uuid::new_v4().to_string(),
+                    data,
+                })
+                .collect::<Vec<_>>();
+            commit_server_state(Some(&canonical), None, state).await?;
+        } else {
+            commit_server_state(Some(&[]), None, state).await?;
+        }
+    }
+    compose_instance(metadata, state).await
+}
+
+pub(in crate::api::instance) async fn detach_servers(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    let generated = generated_path(state, &metadata.instance.id);
+    let local = instance_dir(metadata, state).join(SERVERS_FILE);
+    detach_link(&generated, &local).await
+}
+
+pub(in crate::api::instance) async fn reconcile_servers(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    if !effective(metadata, state).await? {
+        return Ok(());
+    }
+    let local_path = instance_dir(metadata, state).join(SERVERS_FILE);
+    if !local_path.exists() {
+        return compose_instance(metadata, state).await;
+    }
+    let checkpoint = checkpoint(
+        &metadata.instance.id,
+        SyncedOption::MultiplayerServers,
+        "default",
+        state,
+    )
+    .await?;
+    if checkpoint
+        .as_ref()
+        .is_some_and(|value| value.status == CheckpointStatus::Pending)
+    {
+        return compose_instance(metadata, state).await;
+    }
+    let actual = sha1_file(&local_path).await?;
+    let revision = server_revision(state).await?;
+    if checkpoint
+        .as_ref()
+        .map(|value| value.expected_sha1.as_str())
+        == Some(actual.as_str())
+    {
+        if checkpoint
+            .as_ref()
+            .is_some_and(|value| value.source_revision == revision)
+        {
+            return Ok(());
+        }
+        return compose_instance(metadata, state).await;
+    }
+
+    let current = read_servers(&local_path).await?;
+    let projections =
+        load_projection_entries(&metadata.instance.id, state).await?;
+    let projection_matches = match_projection_entries(&current, &projections);
+    let mut matched = HashSet::new();
+    let mut canonical = read_canonical(state).await?;
+    let mut locals = load_local(&metadata.instance.id, state).await?;
+
+    let mut canonical_order = Vec::new();
+
+    for ((position, data), projection) in
+        current.into_iter().enumerate().zip(projection_matches)
+    {
+        if let Some(projection) = projection {
+            matched.insert(projection.id.clone());
+            match projection.owner {
+                ProjectionOwner::Synced => {
+                    canonical_order.push(projection.id.clone());
+                    if let Some(server) = canonical
+                        .iter_mut()
+                        .find(|server| server.id == projection.id)
+                        && data != projection.data
+                    {
+                        server.data = data;
+                    }
+                }
+                ProjectionOwner::Instance => {
+                    if let Some(server) = locals
+                        .iter_mut()
+                        .find(|server| server.id == projection.id)
+                    {
+                        if data != projection.data {
+                            server.data = data;
+                        }
+                        server.position = position as i64;
+                    }
+                }
+            }
+        } else {
+            let id = Uuid::new_v4().to_string();
+            canonical_order.push(id.clone());
+            canonical.push(CanonicalServer { id, data });
+        }
+    }
+
+    canonical.retain(|server| {
+        !projections.iter().any(|projection| {
+            projection.owner == ProjectionOwner::Synced
+                && projection.id == server.id
+                && !matched.contains(&projection.id)
+        })
+    });
+    locals.retain(|server| {
+        !projections.iter().any(|projection| {
+            projection.owner == ProjectionOwner::Instance
+                && projection.id == server.id
+                && !matched.contains(&projection.id)
+        })
+    });
+    let by_id = canonical
+        .iter()
+        .cloned()
+        .map(|server| (server.id.clone(), server))
+        .collect::<std::collections::HashMap<_, _>>();
+    let visible = canonical_order.iter().cloned().collect::<HashSet<_>>();
+    let mut ordered = canonical_order
+        .into_iter()
+        .filter_map(|id| by_id.get(&id).cloned());
+    for server in &mut canonical {
+        if visible.contains(&server.id)
+            && let Some(next) = ordered.next()
+        {
+            *server = next;
+        }
+    }
+    let canonical_changed = commit_server_state(
+        Some(&canonical),
+        Some((&metadata.instance.id, &locals)),
+        state,
+    )
+    .await?;
+    if canonical_changed {
+        regenerate_servers(state).await
+    } else {
+        compose_instance(metadata, state).await
+    }
+}
+
+fn match_projection_entries<'a>(
+    current: &[NbtCompound],
+    projections: &'a [ProjectionEntry],
+) -> Vec<Option<&'a ProjectionEntry>> {
+    let mut matches = vec![None; current.len()];
+    let mut matched_projections = HashSet::new();
+
+    for (position, data) in current.iter().enumerate() {
+        let candidate = projections
+            .iter()
+            .enumerate()
+            .filter(|(index, projection)| {
+                !matched_projections.contains(index) && projection.data == *data
+            })
+            .min_by_key(|(_, projection)| {
+                projection.position.abs_diff(position as i64)
+            })
+            .map(|(index, _)| index);
+        if let Some(index) = candidate {
+            matches[position] = Some(index);
+            matched_projections.insert(index);
+        }
+    }
+
+    for (position, data) in current.iter().enumerate() {
+        if matches[position].is_some() {
+            continue;
+        }
+        let address = server_identity_address(data);
+        if address.is_empty() {
+            continue;
+        }
+        let candidate = projections
+            .iter()
+            .enumerate()
+            .filter(|(index, projection)| {
+                !matched_projections.contains(index)
+                    && server_identity_address(&projection.data) == address
+            })
+            .min_by_key(|(_, projection)| {
+                projection.position.abs_diff(position as i64)
+            })
+            .map(|(index, _)| index);
+        if let Some(index) = candidate {
+            matches[position] = Some(index);
+            matched_projections.insert(index);
+        }
+    }
+
+    for (position, data) in current.iter().enumerate() {
+        if matches[position].is_some() {
+            continue;
+        }
+        let name = server_identity_name(data);
+        if name.is_empty() {
+            continue;
+        }
+        let candidate = projections
+            .iter()
+            .enumerate()
+            .filter(|(index, projection)| {
+                !matched_projections.contains(index)
+                    && server_identity_name(&projection.data) == name
+            })
+            .min_by_key(|(_, projection)| {
+                projection.position.abs_diff(position as i64)
+            })
+            .map(|(index, _)| index);
+        if let Some(index) = candidate {
+            matches[position] = Some(index);
+            matched_projections.insert(index);
+        }
+    }
+
+    matches
+        .into_iter()
+        .map(|projection| projection.map(|index| &projections[index]))
+        .collect()
+}
+
+pub(crate) async fn list_server_records(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<Vec<ServerRecord>> {
+    let _guard = state.lock_synced_options().await;
+    list_server_records_locked(metadata, state).await
+}
+
+async fn list_server_records_locked(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<Vec<ServerRecord>> {
+    if participating(metadata, state).await? {
+        return compose_records(metadata, state).await;
+    }
+    Ok(
+        read_servers(&instance_dir(metadata, state).join(SERVERS_FILE))
+            .await?
+            .into_iter()
+            .map(|data| ServerRecord {
+                id: Uuid::new_v4().to_string(),
+                source: ServerSource::LocalDesynced,
+                data,
+            })
+            .collect(),
+    )
+}
+
+pub(crate) async fn add_user_server(
+    metadata: &InstanceMetadata,
+    mut data: NbtCompound,
+    state: &State,
+) -> crate::Result<String> {
+    let _guard = state.lock_synced_options().await;
+    let id = Uuid::new_v4().to_string();
+    if participating(metadata, state).await? {
+        let mut canonical = read_canonical(state).await?;
+        canonical.push(CanonicalServer {
+            id: id.clone(),
+            data,
+        });
+        commit_server_state(Some(&canonical), None, state).await?;
+        regenerate_servers(state).await?;
+    } else {
+        let path = instance_dir(metadata, state).join(SERVERS_FILE);
+        let mut servers = read_servers(&path).await?;
+        let insert_index = servers
+            .iter()
+            .position(server_hidden)
+            .unwrap_or(servers.len());
+        servers.insert(insert_index, std::mem::take(&mut data));
+        write_servers(&path, &servers).await?;
+    }
+    Ok(id)
+}
+
+async fn update_server_locked(
+    metadata: &InstanceMetadata,
+    server_id: &str,
+    data: NbtCompound,
+    state: &State,
+) -> crate::Result<()> {
+    if participating(metadata, state).await? {
+        let records = compose_records(metadata, state).await?;
+        let record = records
+            .iter()
+            .find(|record| record.id == server_id)
+            .ok_or_else(|| {
+                ErrorKind::InputError("Unknown server".to_string())
+            })?;
+        if record.source == ServerSource::UserSynced {
+            let mut canonical = read_canonical(state).await?;
+            let server = canonical
+                .iter_mut()
+                .find(|server| server.id == server_id)
+                .ok_or_else(|| {
+                    ErrorKind::InputError("Unknown server".to_string())
+                })?;
+            server.data = data;
+            commit_server_state(Some(&canonical), None, state).await?;
+            regenerate_servers(state).await?;
+        } else {
+            let mut locals = load_local(&metadata.instance.id, state).await?;
+            let server = locals
+                .iter_mut()
+                .find(|server| server.id == server_id)
+                .ok_or_else(|| {
+                    ErrorKind::InputError("Unknown server".to_string())
+                })?;
+            server.data = data;
+            write_local(&metadata.instance.id, &locals, state).await?;
+            compose_instance(metadata, state).await?;
+        }
+        return Ok(());
+    }
+    Err(ErrorKind::InputError(
+        "Stable server editing requires multiplayer syncing for this instance."
+            .to_string(),
+    )
+    .into())
+}
+
+pub(crate) async fn update_server_by_index(
+    metadata: &InstanceMetadata,
+    index: usize,
+    name: String,
+    address: String,
+    accept_textures: Option<bool>,
+    state: &State,
+) -> crate::Result<()> {
+    let _guard = state.lock_synced_options().await;
+    if participating(metadata, state).await? {
+        let records = list_server_records_locked(metadata, state).await?;
+        let record = records
+            .get(index)
+            .filter(|record| !record.hidden())
+            .ok_or_else(|| {
+                ErrorKind::InputError(format!(
+                    "No editable server at index {index}"
+                ))
+            })?;
+        let mut data = record.data.clone();
+        update_server_data(&mut data, name, address, accept_textures);
+        return update_server_locked(metadata, &record.id, data, state).await;
+    }
+    let path = instance_dir(metadata, state).join(SERVERS_FILE);
+    let mut servers = read_servers(&path).await?;
+    let server = servers
+        .get_mut(index)
+        .filter(|server| !server_hidden(server))
+        .ok_or_else(|| {
+            ErrorKind::InputError(format!(
+                "No editable server at index {index}"
+            ))
+        })?;
+    update_server_data(server, name, address, accept_textures);
+    write_servers(&path, &servers).await
+}
+
+async fn remove_server_locked(
+    metadata: &InstanceMetadata,
+    server_id: &str,
+    state: &State,
+) -> crate::Result<()> {
+    if !participating(metadata, state).await? {
+        return Err(ErrorKind::InputError(
+			"Stable server removal requires multiplayer syncing for this instance."
+				.to_string(),
+		)
+		.into());
+    }
+    let records = compose_records(metadata, state).await?;
+    let record = records
+        .iter()
+        .find(|record| record.id == server_id)
+        .ok_or_else(|| ErrorKind::InputError("Unknown server".to_string()))?;
+    if record.source == ServerSource::UserSynced {
+        let mut canonical = read_canonical(state).await?;
+        canonical.retain(|server| server.id != server_id);
+        commit_server_state(Some(&canonical), None, state).await?;
+        regenerate_servers(state).await
+    } else {
+        let mut locals = load_local(&metadata.instance.id, state).await?;
+        locals.retain(|server| server.id != server_id);
+        write_local(&metadata.instance.id, &locals, state).await?;
+        compose_instance(metadata, state).await
+    }
+}
+
+pub(crate) async fn remove_server_by_index(
+    metadata: &InstanceMetadata,
+    index: usize,
+    state: &State,
+) -> crate::Result<()> {
+    let _guard = state.lock_synced_options().await;
+    if participating(metadata, state).await? {
+        let records = list_server_records_locked(metadata, state).await?;
+        let record = records
+            .get(index)
+            .filter(|record| !record.hidden())
+            .ok_or_else(|| {
+                ErrorKind::InputError(format!(
+                    "No removable server at index {index}"
+                ))
+            })?;
+        return remove_server_locked(metadata, &record.id, state).await;
+    }
+    let path = instance_dir(metadata, state).join(SERVERS_FILE);
+    let mut servers = read_servers(&path).await?;
+    if servers.get(index).is_none_or(server_hidden) {
+        return Err(ErrorKind::InputError(format!(
+            "No removable server at index {index}"
+        ))
+        .into());
+    }
+    servers.remove(index);
+    write_servers(&path, &servers).await
+}
+
+pub async fn desync_server(
+    instance_id: &str,
+    server_id: &str,
+    mode: DesyncServerMode,
+) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    if !participating(&metadata, &state).await? {
+        return Err(ErrorKind::InputError(
+            "This instance is not participating in multiplayer server syncing."
+                .to_string(),
+        )
+        .into());
+    }
+    let mut canonical = read_canonical(&state).await?;
+    let server = canonical
+        .iter()
+        .find(|server| server.id == server_id)
+        .cloned()
+        .ok_or_else(|| {
+            ErrorKind::InputError(
+                "Only a synced user server can be desynced.".to_string(),
+            )
+        })?;
+    let local_position = compose_records(&metadata, &state)
+        .await?
+        .iter()
+        .position(|record| record.id == server_id)
+        .unwrap_or_default() as i64;
+    let mut locals = load_local(instance_id, &state).await?;
+    locals.push(LocalServer {
+        id: Uuid::new_v4().to_string(),
+        source: ServerSource::LocalDesynced,
+        excluded_synced_server_id: (mode
+            == DesyncServerMode::KeepInOtherInstances)
+            .then(|| server.id.clone()),
+        data: server.data,
+        position: local_position,
+    });
+    if mode == DesyncServerMode::RemoveFromOtherInstances {
+        canonical.retain(|candidate| candidate.id != server_id);
+    }
+    let canonical_changed = commit_server_state(
+        Some(&canonical),
+        Some((instance_id, &locals)),
+        &state,
+    )
+    .await?;
+    if canonical_changed {
+        regenerate_servers(&state).await?;
+    } else {
+        compose_instance(&metadata, &state).await?;
+    }
+    Ok(())
+}
+
+pub async fn list_synced_servers() -> crate::Result<Vec<SyncedServer>> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    Ok(read_canonical(&state)
+        .await?
+        .into_iter()
+        .map(|server| {
+            let CanonicalServer { id, data } = server;
+            SyncedServer {
+                id,
+                name: data
+                    .get::<_, &str>("name")
+                    .unwrap_or_default()
+                    .to_string(),
+                address: server_address(&data),
+                accept_textures: data
+                    .get::<_, i8>("acceptTextures")
+                    .ok()
+                    .map(|value| value != 0),
+            }
+        })
+        .collect())
+}
+
+pub async fn update_synced_server(server: SyncedServer) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let mut canonical = read_canonical(&state).await?;
+    let target = canonical
+        .iter_mut()
+        .find(|candidate| candidate.id == server.id)
+        .ok_or_else(|| {
+            ErrorKind::InputError("Unknown synced server".to_string())
+        })?;
+    update_server_data(
+        &mut target.data,
+        server.name,
+        server.address,
+        server.accept_textures,
+    );
+    commit_server_state(Some(&canonical), None, &state).await?;
+    regenerate_servers(&state).await
+}
+
+pub async fn remove_synced_server(server_id: &str) -> crate::Result<()> {
+    let state = State::get().await?;
+    let _guard = state.lock_synced_options().await;
+    let mut canonical = read_canonical(&state).await?;
+    let previous_len = canonical.len();
+    canonical.retain(|server| server.id != server_id);
+    if canonical.len() == previous_len {
+        return Err(
+            ErrorKind::InputError("Unknown synced server".to_string()).into()
+        );
+    }
+    commit_server_state(Some(&canonical), None, &state).await?;
+    regenerate_servers(&state).await
+}
+
+pub(super) async fn compose_instance(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<()> {
+    let records = compose_records(metadata, state).await?;
+    let bytes = servers_to_bytes(
+        &records
+            .iter()
+            .map(|record| record.data.clone())
+            .collect::<Vec<_>>(),
+    )?;
+    let expected = sha1_bytes(&bytes);
+    let revision = server_revision(state).await?;
+    begin_server_checkpoint(
+        &metadata.instance.id,
+        &records,
+        &expected,
+        revision,
+        state,
+    )
+    .await?;
+    let generated = generated_path(state, &metadata.instance.id);
+    if let Some(parent) = generated.parent() {
+        crate::util::io::create_dir_all(parent).await?;
+    }
+    crate::util::io::write(&generated, &bytes).await?;
+    let target = instance_dir(metadata, state).join(SERVERS_FILE);
+    let mode = ensure_link(&generated, &target).await?;
+    finish_checkpoint(
+        &metadata.instance.id,
+        SyncedOption::MultiplayerServers,
+        "default",
+        mode,
+        state,
+    )
+    .await
+}
+
+async fn compose_records(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<Vec<ServerRecord>> {
+    let canonical = read_canonical(state).await?;
+    let locals = load_local(&metadata.instance.id, state).await?;
+    let exclusions = locals
+        .iter()
+        .filter_map(|server| server.excluded_synced_server_id.as_deref())
+        .collect::<HashSet<_>>();
+    let mut records = canonical
+        .into_iter()
+        .filter(|server| !exclusions.contains(server.id.as_str()))
+        .map(|server| ServerRecord {
+            id: server.id,
+            source: ServerSource::UserSynced,
+            data: server.data,
+        })
+        .collect::<Vec<_>>();
+    let mut locals = locals;
+    locals.sort_by_key(|server| server.position);
+    for server in locals {
+        let position = usize::try_from(server.position)
+            .unwrap_or(records.len())
+            .min(records.len());
+        records.insert(
+            position,
+            ServerRecord {
+                id: server.id,
+                source: server.source,
+                data: server.data,
+            },
+        );
+    }
+    Ok(records)
+}
+
+async fn regenerate_servers(state: &State) -> crate::Result<()> {
+    for metadata in crate::state::list_instances(&state.pool).await? {
+        if effective(&metadata, state).await? {
+            compose_instance(&metadata, state).await?;
+        }
+    }
+    Ok(())
+}
+
+pub(super) async fn effective(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<bool> {
+    if sync_files_are_protected(metadata)
+        || instance_is_running(metadata, state).await?
+    {
+        return Ok(false);
+    }
+    participating(metadata, state).await
+}
+
+async fn participating(
+    metadata: &InstanceMetadata,
+    state: &State,
+) -> crate::Result<bool> {
+    if !instance_option_enabled(metadata, SyncedOption::MultiplayerServers) {
+        return Ok(false);
+    }
+    let global_enabled = sqlx::query_scalar!(
+        r#"
+		SELECT EXISTS(
+			SELECT 1 FROM sync_feature_settings
+			WHERE feature = 'multiplayer_servers' AND globally_enabled = 1
+		) AS "enabled!: bool"
+		"#,
+    )
+    .fetch_one(&state.pool)
+    .await?;
+
+    Ok(instance_option_supported(
+        metadata,
+        SyncedOption::MultiplayerServers,
+        global_enabled,
+        state,
+    )
+    .await)
+}
diff --git a/packages/app-lib/src/api/instance/synced_servers/storage.rs b/packages/app-lib/src/api/instance/synced_servers/storage.rs
new file mode 100644
index 0000000000..9b1b5a067d
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_servers/storage.rs
@@ -0,0 +1,358 @@
+use super::super::synced_options::{
+    nbt_from_bytes, nbt_to_bytes, safe_instance_id, synced_options_path,
+};
+use super::SERVERS_FILE;
+use super::types::{
+    CanonicalServer, LocalServer, ProjectionEntry, ProjectionOwner,
+    ServerRecord, ServerSource,
+};
+use crate::{ErrorKind, State};
+use sqlx::{Sqlite, Transaction};
+use std::collections::HashSet;
+use std::path::PathBuf;
+
+pub(in crate::api::instance) async fn canonical_exists(
+    state: &State,
+) -> crate::Result<bool> {
+    canonical_initialized(state).await
+}
+
+async fn canonical_initialized(state: &State) -> crate::Result<bool> {
+    Ok(sqlx::query_scalar!(
+        r#"
+		SELECT EXISTS(
+			SELECT 1 FROM synced_server_state WHERE singleton = 1
+		) AS "initialized!: bool"
+		"#,
+    )
+    .fetch_one(&state.pool)
+    .await?)
+}
+
+pub(super) async fn read_canonical(
+    state: &State,
+) -> crate::Result<Vec<CanonicalServer>> {
+    let rows = sqlx::query!(
+        "
+		SELECT id, nbt
+		FROM synced_servers
+		ORDER BY position
+		",
+    )
+    .fetch_all(&state.pool)
+    .await?;
+    rows.into_iter()
+        .map(|row| {
+            Ok(CanonicalServer {
+                id: row.id,
+                data: nbt_from_bytes(row.nbt)?,
+            })
+        })
+        .collect()
+}
+
+pub(super) async fn commit_server_state(
+    canonical: Option<&[CanonicalServer]>,
+    local: Option<(&str, &[LocalServer])>,
+    state: &State,
+) -> crate::Result<bool> {
+    let mut tx = state.pool.begin().await?;
+    let mut canonical_changed = false;
+    if let Some(canonical) = canonical {
+        canonical_changed = write_canonical_rows(&mut tx, canonical).await?;
+        sqlx::query!(
+            "
+			INSERT INTO synced_server_state (singleton, revision)
+			VALUES (1, 0)
+			ON CONFLICT(singleton) DO NOTHING
+			",
+        )
+        .execute(&mut *tx)
+        .await?;
+        if canonical_changed {
+            sqlx::query!(
+                "
+				UPDATE synced_server_state
+				SET revision = revision + 1
+				WHERE singleton = 1
+				",
+            )
+            .execute(&mut *tx)
+            .await?;
+        }
+    }
+    if let Some((instance_id, local)) = local {
+        write_local_rows(&mut tx, instance_id, local).await?;
+    }
+    tx.commit().await?;
+    Ok(canonical_changed)
+}
+
+async fn write_canonical_rows(
+    tx: &mut Transaction<'_, Sqlite>,
+    servers: &[CanonicalServer],
+) -> crate::Result<bool> {
+    let current = sqlx::query!(
+        "
+		SELECT id, position, nbt
+		FROM synced_servers
+		ORDER BY position
+		",
+    )
+    .fetch_all(&mut **tx)
+    .await?;
+    let mut desired = Vec::with_capacity(servers.len());
+    for (position, server) in servers.iter().enumerate() {
+        desired.push((
+            server.id.as_str(),
+            position as i64,
+            nbt_to_bytes(&server.data)?,
+        ));
+    }
+    if current.len() == desired.len()
+        && current.iter().zip(&desired).all(|(current, desired)| {
+            current.id == desired.0
+                && current.position == desired.1
+                && current.nbt == desired.2
+        })
+    {
+        return Ok(false);
+    }
+
+    let desired_ids =
+        desired.iter().map(|(id, _, _)| *id).collect::<HashSet<_>>();
+    for row in &current {
+        if !desired_ids.contains(row.id.as_str()) {
+            sqlx::query!("DELETE FROM synced_servers WHERE id = ?", row.id)
+                .execute(&mut **tx)
+                .await?;
+        }
+    }
+
+    let position_offset = current
+        .iter()
+        .map(|row| row.position)
+        .max()
+        .unwrap_or(0)
+        .max(servers.len() as i64)
+        .saturating_add(1);
+    sqlx::query!(
+        "UPDATE synced_servers SET position = position + ?",
+        position_offset,
+    )
+    .execute(&mut **tx)
+    .await?;
+
+    for (id, position, nbt) in desired {
+        sqlx::query!(
+            "
+			INSERT INTO synced_servers (id, position, nbt)
+			VALUES (?, ?, ?)
+			ON CONFLICT(id) DO UPDATE SET
+				position = excluded.position,
+				nbt = excluded.nbt
+			",
+            id,
+            position,
+            nbt,
+        )
+        .execute(&mut **tx)
+        .await?;
+    }
+    Ok(true)
+}
+
+pub(super) async fn server_revision(state: &State) -> crate::Result<i64> {
+    Ok(sqlx::query_scalar!(
+        r#"
+		SELECT revision AS "revision!: i64"
+		FROM synced_server_state
+		WHERE singleton = 1
+		"#,
+    )
+    .fetch_optional(&state.pool)
+    .await?
+    .unwrap_or(0))
+}
+
+pub(super) async fn load_local(
+    instance_id: &str,
+    state: &State,
+) -> crate::Result<Vec<LocalServer>> {
+    let rows = sqlx::query!(
+        "
+		SELECT id, source, excluded_synced_server_id, nbt, position
+		FROM instance_servers
+		WHERE instance_id = ?
+		ORDER BY position
+		",
+        instance_id,
+    )
+    .fetch_all(&state.pool)
+    .await?;
+    rows.into_iter()
+        .map(|row| {
+            Ok(LocalServer {
+                id: row.id,
+                source: ServerSource::from_str(&row.source).ok_or_else(
+                    || {
+                        ErrorKind::InputError(format!(
+                            "Unknown server source {}",
+                            row.source
+                        ))
+                    },
+                )?,
+                excluded_synced_server_id: row.excluded_synced_server_id,
+                data: nbt_from_bytes(row.nbt)?,
+                position: row.position,
+            })
+        })
+        .collect()
+}
+
+pub(super) async fn write_local(
+    instance_id: &str,
+    servers: &[LocalServer],
+    state: &State,
+) -> crate::Result<()> {
+    commit_server_state(None, Some((instance_id, servers)), state).await?;
+    Ok(())
+}
+
+pub(super) async fn write_local_rows(
+    tx: &mut Transaction<'_, Sqlite>,
+    instance_id: &str,
+    servers: &[LocalServer],
+) -> crate::Result<()> {
+    sqlx::query!(
+        "DELETE FROM instance_servers WHERE instance_id = ?",
+        instance_id,
+    )
+    .execute(&mut **tx)
+    .await?;
+    for server in servers {
+        let source = server.source.as_str();
+        let nbt = nbt_to_bytes(&server.data)?;
+        sqlx::query!(
+            "
+			INSERT INTO instance_servers
+				(instance_id, id, source, excluded_synced_server_id,
+				 nbt, position)
+			VALUES (?, ?, ?,
+				(SELECT id FROM synced_servers WHERE id = ?), ?, ?)
+			",
+            instance_id,
+            server.id,
+            source,
+            server.excluded_synced_server_id,
+            nbt,
+            server.position,
+        )
+        .execute(&mut **tx)
+        .await?;
+    }
+    Ok(())
+}
+
+pub(super) async fn load_projection_entries(
+    instance_id: &str,
+    state: &State,
+) -> crate::Result<Vec<ProjectionEntry>> {
+    let rows = sqlx::query!(
+        "
+		SELECT server_id, owner, nbt, position
+		FROM instance_server_projection_entries
+		WHERE instance_id = ?
+		ORDER BY position
+		",
+        instance_id,
+    )
+    .fetch_all(&state.pool)
+    .await?;
+    rows.into_iter()
+        .map(|row| {
+            Ok(ProjectionEntry {
+                id: row.server_id,
+                owner: ProjectionOwner::from_str(&row.owner).ok_or_else(
+                    || {
+                        ErrorKind::InputError(format!(
+                            "Unknown server projection owner {}",
+                            row.owner
+                        ))
+                    },
+                )?,
+                data: nbt_from_bytes(row.nbt)?,
+                position: row.position,
+            })
+        })
+        .collect()
+}
+
+pub(super) async fn begin_server_checkpoint(
+    instance_id: &str,
+    servers: &[ServerRecord],
+    expected_sha1: &str,
+    source_revision: i64,
+    state: &State,
+) -> crate::Result<()> {
+    let mut tx = state.pool.begin().await?;
+    sqlx::query!(
+        "DELETE FROM instance_server_projection_entries WHERE instance_id = ?",
+        instance_id,
+    )
+    .execute(&mut *tx)
+    .await?;
+    for (position, server) in servers.iter().enumerate() {
+        let owner = if server.source == ServerSource::UserSynced {
+            ProjectionOwner::Synced
+        } else {
+            ProjectionOwner::Instance
+        }
+        .as_str();
+        let nbt = nbt_to_bytes(&server.data)?;
+        let position = position as i64;
+        sqlx::query!(
+            "
+			INSERT INTO instance_server_projection_entries
+				(instance_id, owner, server_id, nbt, position)
+			VALUES (?, ?, ?, ?, ?)
+			",
+            instance_id,
+            owner,
+            server.id,
+            nbt,
+            position,
+        )
+        .execute(&mut *tx)
+        .await?;
+    }
+    sqlx::query!(
+        "
+		INSERT INTO instance_sync_checkpoints
+			(instance_id, feature, variant, expected_sha1, merge_base,
+			 source_revision, status, link_mode)
+		VALUES (?, 'multiplayer_servers', 'default', ?, NULL, ?,
+			'pending', NULL)
+		ON CONFLICT(instance_id, feature, variant) DO UPDATE SET
+			expected_sha1 = excluded.expected_sha1,
+			merge_base = NULL,
+			source_revision = excluded.source_revision,
+			status = 'pending',
+			link_mode = NULL
+		",
+        instance_id,
+        expected_sha1,
+        source_revision,
+    )
+    .execute(&mut *tx)
+    .await?;
+    tx.commit().await?;
+    Ok(())
+}
+
+pub(super) fn generated_path(state: &State, instance_id: &str) -> PathBuf {
+    synced_options_path(state)
+        .join("servers/generated")
+        .join(safe_instance_id(instance_id))
+        .join(SERVERS_FILE)
+}
diff --git a/packages/app-lib/src/api/instance/synced_servers/types.rs b/packages/app-lib/src/api/instance/synced_servers/types.rs
new file mode 100644
index 0000000000..97b78d61a4
--- /dev/null
+++ b/packages/app-lib/src/api/instance/synced_servers/types.rs
@@ -0,0 +1,131 @@
+use quartz_nbt::NbtCompound;
+use serde::{Deserialize, Serialize};
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum ServerSource {
+    UserSynced,
+    Modpack,
+    LinkedServerProject,
+    LocalDesynced,
+}
+
+impl ServerSource {
+    pub(super) fn as_str(self) -> &'static str {
+        match self {
+            Self::UserSynced => "user_synced",
+            Self::Modpack => "modpack",
+            Self::LinkedServerProject => "linked_server_project",
+            Self::LocalDesynced => "local_desynced",
+        }
+    }
+
+    pub(super) fn from_str(value: &str) -> Option<Self> {
+        match value {
+            "user_synced" => Some(Self::UserSynced),
+            "modpack" => Some(Self::Modpack),
+            "linked_server_project" => Some(Self::LinkedServerProject),
+            "local_desynced" => Some(Self::LocalDesynced),
+            _ => None,
+        }
+    }
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum DesyncServerMode {
+    KeepInOtherInstances,
+    RemoveFromOtherInstances,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct SyncedServer {
+    pub id: String,
+    pub name: String,
+    pub address: String,
+    pub accept_textures: Option<bool>,
+}
+
+#[derive(Clone, Debug)]
+pub(crate) struct ServerRecord {
+    pub id: String,
+    pub source: ServerSource,
+    pub data: NbtCompound,
+}
+
+impl ServerRecord {
+    pub fn name(&self) -> String {
+        self.data
+            .get::<_, &str>("name")
+            .unwrap_or_default()
+            .to_string()
+    }
+
+    pub fn address(&self) -> String {
+        self.data
+            .get::<_, &str>("ip")
+            .unwrap_or_default()
+            .to_string()
+    }
+
+    pub fn icon(&self) -> Option<String> {
+        self.data.get::<_, &str>("icon").ok().map(ToOwned::to_owned)
+    }
+
+    pub fn hidden(&self) -> bool {
+        self.data.get::<_, i8>("hidden").unwrap_or(0) != 0
+    }
+
+    pub fn accept_textures(&self) -> Option<bool> {
+        self.data
+            .get::<_, i8>("acceptTextures")
+            .ok()
+            .map(|value| value != 0)
+    }
+}
+
+#[derive(Clone)]
+pub(super) struct CanonicalServer {
+    pub id: String,
+    pub data: NbtCompound,
+}
+
+#[derive(Clone)]
+pub(super) struct LocalServer {
+    pub id: String,
+    pub source: ServerSource,
+    pub excluded_synced_server_id: Option<String>,
+    pub data: NbtCompound,
+    pub position: i64,
+}
+
+#[derive(Clone)]
+pub(super) struct ProjectionEntry {
+    pub id: String,
+    pub owner: ProjectionOwner,
+    pub data: NbtCompound,
+    pub position: i64,
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub(super) enum ProjectionOwner {
+    Synced,
+    Instance,
+}
+
+impl ProjectionOwner {
+    pub(super) fn as_str(self) -> &'static str {
+        match self {
+            Self::Synced => "synced",
+            Self::Instance => "instance",
+        }
+    }
+
+    pub(super) fn from_str(value: &str) -> Option<Self> {
+        match value {
+            "synced" => Some(Self::Synced),
+            "instance" => Some(Self::Instance),
+            _ => None,
+        }
+    }
+}
diff --git a/packages/app-lib/src/api/mod.rs b/packages/app-lib/src/api/mod.rs
index 3251429049..992b7d3883 100644
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -27,12 +27,12 @@ pub mod data {
         Hooks, InstanceIconBackground, InstanceIconConfig,
         InstanceInstallCandidate, InstanceInstallTarget,
         InstanceLaunchOverridesPatch, InstanceLink, InstanceMetadata,
-        JavaVersion, LinkedModpackInfo, MemorySettings, ModLoader,
-        ModrinthCredentials, OnboardingChecklist, Organization, OwnerType,
-        ProcessMetadata, Project, ProjectType, ProjectV3, SearchResult,
-        SearchResults, SearchResultsV3, Settings, SharedInstanceAttachment,
-        SharedInstanceRole, TeamMember, Theme, User, UserFriend, Version,
-        WindowSize,
+        InstanceSyncedOption, InstanceSyncedOptions, JavaVersion,
+        LinkedModpackInfo, MemorySettings, ModLoader, ModrinthCredentials,
+        OnboardingChecklist, Organization, OwnerType, ProcessMetadata, Project,
+        ProjectType, ProjectV3, SearchResult, SearchResults, SearchResultsV3,
+        Settings, SharedInstanceAttachment, SharedInstanceRole, TeamMember,
+        Theme, User, UserFriend, Version, WindowSize,
     };
     pub use ariadne::users::UserStatus;
     pub use modrinth_content_management::{
diff --git a/packages/app-lib/src/api/pack/install_mrpack.rs b/packages/app-lib/src/api/pack/install_mrpack.rs
index b1a44c5130..c70b472113 100644
--- a/packages/app-lib/src/api/pack/install_mrpack.rs
+++ b/packages/app-lib/src/api/pack/install_mrpack.rs
@@ -630,6 +630,8 @@ pub(crate) async fn install_zipped_mrpack_files_with_reporter(
         );
     }
 
+    crate::api::instance::prepare_instance_update(&instance_id).await?;
+
     set_instance_information(
         instance_id.clone(),
         &description,
@@ -972,6 +974,11 @@ pub(crate) async fn install_zipped_mrpack_files_with_reporter(
         .iter()
         .map(|(_, file)| file.uncompressed_size())
         .sum::<u64>();
+    let has_servers_override = override_file_entries.iter().any(|(_, file)| {
+        let filename = file.filename().as_str().unwrap_or_default();
+        filename == "overrides/servers.dat"
+            || filename == "client-overrides/servers.dat"
+    });
     let progress = (override_total_bytes > 0).then_some(InstallProgress {
         current: 0,
         total: override_total_bytes,
@@ -1123,6 +1130,20 @@ pub(crate) async fn install_zipped_mrpack_files_with_reporter(
         }
     }
 
+    if has_servers_override {
+        crate::api::instance::synced_servers::capture_modpack_servers(
+            &instance_id,
+        )
+        .await?;
+    } else {
+        crate::api::instance::synced_servers::clear_modpack_servers(
+            &instance_id,
+        )
+        .await?;
+    }
+    crate::api::instance::reconcile_instance_synced_options(&instance_id)
+        .await?;
+
     // If the icon doesn't exist, we expect icon.png to be a potential icon.
     // If it doesn't exist, and an override to icon.png exists, cache and use that
     let potential_icon = instance_full_path.join("icon.png");
diff --git a/packages/app-lib/src/api/worlds.rs b/packages/app-lib/src/api/worlds.rs
index 03efec7036..a4d7e77df7 100644
--- a/packages/app-lib/src/api/worlds.rs
+++ b/packages/app-lib/src/api/worlds.rs
@@ -140,6 +140,8 @@ pub enum WorldDetails {
     },
     Server {
         index: usize,
+        server_id: String,
+        source: crate::api::instance::ServerSource,
         address: String,
         pack_status: ServerPackStatus,
         #[serde(skip_serializing_if = "Option::is_none")]
@@ -448,35 +450,43 @@ fn read_hardcore(data: &NbtCompound) -> bool {
 
 async fn get_server_worlds_in_instance(
     instance_id: &str,
-    instance_dir: &Path,
+    _instance_dir: &Path,
     worlds: &mut Vec<World>,
 ) -> Result<()> {
-    let servers = servers_data::read(instance_dir).await?;
+    let state = State::get().await?;
+    let metadata = crate::state::get_instance(instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    let servers = crate::api::instance::synced_servers::list_server_records(
+        &metadata, &state,
+    )
+    .await?;
     if servers.is_empty() {
         return Ok(());
     }
 
-    let state = State::get().await?;
     let join_log = server_join_log::get_joins(instance_id, &state.pool)
         .await
         .ok();
 
     for (index, server) in servers.into_iter().enumerate() {
-        if server.hidden {
+        if server.hidden() {
             // TODO: Figure out whether we want to hide or show direct connect servers
             continue;
         }
+        let address = server.address();
+        let server_id = server.id.clone();
         let world = World {
-            name: server.name,
+            name: server.name(),
             last_played: join_log
                 .as_ref()
                 .and_then(|log| {
-                    let (host, port) = parse_server_address(&server.ip).ok()?;
+                    let (host, port) = parse_server_address(&address).ok()?;
                     log.get(&(host.to_owned(), port))
                 })
                 .copied(),
             icon: server
-                .icon
+                .icon()
                 .and_then(|icon| {
                     Url::parse(&format!("data:image/png;base64,{icon}")).ok()
                 })
@@ -484,8 +494,10 @@ async fn get_server_worlds_in_instance(
             display_status: DisplayStatus::Normal,
             details: WorldDetails::Server {
                 index,
-                address: server.ip,
-                pack_status: server.accept_textures.into(),
+                server_id,
+                source: server.source,
+                address,
+                pack_status: server.accept_textures().into(),
                 project_id: None,
                 content_kind: None,
             },
@@ -766,25 +778,28 @@ pub async fn add_server_to_instance(
     content_kind: Option<String>,
 ) -> Result<usize> {
     let state = State::get().await?;
-    let (instance_id, instance_path) =
+    let (instance_id, _) =
         resolve_instance_identity(instance_id, &state).await?;
-    let instance_dir = state.directories.instances_dir().join(instance_path);
-    let mut servers = servers_data::read(&instance_dir).await?;
-    let insert_index = servers
-        .iter()
-        .position(|x| x.hidden)
-        .unwrap_or(servers.len());
-    servers.insert(
-        insert_index,
-        servers_data::ServerData {
-            name,
-            ip: address.clone(),
-            accept_textures: pack_status.into(),
-            hidden: false,
-            icon: None,
-        },
+    let metadata = crate::state::get_instance(&instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    let data = crate::api::instance::synced_servers::server_data(
+        name,
+        address.clone(),
+        pack_status.into(),
     );
-    servers_data::write(&instance_dir, &servers).await?;
+    let server_id = crate::api::instance::synced_servers::add_user_server(
+        &metadata, data, &state,
+    )
+    .await?;
+    let insert_index =
+        crate::api::instance::synced_servers::list_server_records(
+            &metadata, &state,
+        )
+        .await?
+        .iter()
+        .position(|server| server.id == server_id)
+        .unwrap_or(0);
 
     if project_id.is_some() || content_kind.is_some() {
         if let Some(project_id) = &project_id {
@@ -820,25 +835,20 @@ pub async fn edit_server_in_instance(
     pack_status: ServerPackStatus,
 ) -> Result<()> {
     let state = State::get().await?;
-    let (_, instance_path) =
+    let (instance_id, _) =
         resolve_instance_identity(instance_id, &state).await?;
-    let instance_dir = state.directories.instances_dir().join(instance_path);
-    let mut servers = servers_data::read(&instance_dir).await?;
-    let server =
-        servers
-            .get_mut(index)
-            .filter(|x| !x.hidden)
-            .ok_or_else(|| {
-                ErrorKind::InputError(format!(
-                    "No editable server at index {index}"
-                ))
-                .as_error()
-            })?;
-    server.name = name;
-    server.ip = address;
-    server.accept_textures = pack_status.into();
-    servers_data::write(&instance_dir, &servers).await?;
-    Ok(())
+    let metadata = crate::state::get_instance(&instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    crate::api::instance::synced_servers::update_server_by_index(
+        &metadata,
+        index,
+        name,
+        address,
+        pack_status.into(),
+        &state,
+    )
+    .await
 }
 
 pub async fn remove_server_from_instance(
@@ -846,80 +856,15 @@ pub async fn remove_server_from_instance(
     index: usize,
 ) -> Result<()> {
     let state = State::get().await?;
-    let (_, instance_path) =
+    let (instance_id, _) =
         resolve_instance_identity(instance_id, &state).await?;
-    let instance_dir = state.directories.instances_dir().join(instance_path);
-    let mut servers = servers_data::read(&instance_dir).await?;
-    if servers.get(index).as_ref().is_none_or(|x| x.hidden) {
-        return Err(ErrorKind::InputError(format!(
-            "No removable server at index {index}"
-        ))
-        .into());
-    }
-    servers.remove(index);
-    servers_data::write(&instance_dir, &servers).await?;
-    Ok(())
-}
-
-mod servers_data {
-    use crate::Result;
-    use crate::util::io;
-    use serde::{Deserialize, Serialize};
-    use std::path::Path;
-
-    #[derive(Serialize, Deserialize, Debug, Clone)]
-    #[serde(rename_all = "camelCase")]
-    pub struct ServerData {
-        #[serde(default)]
-        pub hidden: bool,
-        #[serde(skip_serializing_if = "Option::is_none")]
-        pub icon: Option<String>,
-        #[serde(default)]
-        pub ip: String,
-        #[serde(default)]
-        pub name: String,
-        #[serde(skip_serializing_if = "Option::is_none")]
-        pub accept_textures: Option<bool>,
-    }
-
-    pub async fn read(instance_dir: &Path) -> Result<Vec<ServerData>> {
-        #[derive(Deserialize, Debug)]
-        struct ServersData {
-            #[serde(default)]
-            servers: Vec<ServerData>,
-        }
-
-        let servers_dat_path = instance_dir.join("servers.dat");
-        if !servers_dat_path.exists() {
-            return Ok(vec![]);
-        }
-        let servers_data = io::read(servers_dat_path).await?;
-        let servers_data: ServersData = quartz_nbt::serde::deserialize(
-            &servers_data,
-            quartz_nbt::io::Flavor::Uncompressed,
-        )?
-        .0;
-        Ok(servers_data.servers)
-    }
-
-    pub async fn write(
-        instance_dir: &Path,
-        servers: &[ServerData],
-    ) -> Result<()> {
-        #[derive(Serialize, Debug)]
-        struct ServersData<'a> {
-            servers: &'a [ServerData],
-        }
-
-        let servers_dat_path = instance_dir.join("servers.dat");
-        let data = quartz_nbt::serde::serialize(
-            &ServersData { servers },
-            None,
-            quartz_nbt::io::Flavor::Uncompressed,
-        )?;
-        io::write(servers_dat_path, data).await?;
-        Ok(())
-    }
+    let metadata = crate::state::get_instance(&instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| ErrorKind::InputError("Unknown instance".to_string()))?;
+    crate::api::instance::synced_servers::remove_server_by_index(
+        &metadata, index, &state,
+    )
+    .await
 }
 
 pub async fn get_instance_protocol_version(
diff --git a/packages/app-lib/src/event/mod.rs b/packages/app-lib/src/event/mod.rs
index 2fd5d72b71..059bfbfa00 100644
--- a/packages/app-lib/src/event/mod.rs
+++ b/packages/app-lib/src/event/mod.rs
@@ -472,6 +472,7 @@ pub enum InstancePayloadType {
     Created,
     Synced,
     ServersUpdated,
+    ScreenshotsUpdated,
     WorldUpdated {
         world: String,
     },
diff --git a/packages/app-lib/src/launcher/mod.rs b/packages/app-lib/src/launcher/mod.rs
index 6575e8fe5f..009edc06c3 100644
--- a/packages/app-lib/src/launcher/mod.rs
+++ b/packages/app-lib/src/launcher/mod.rs
@@ -924,6 +924,9 @@ pub async fn launch_minecraft(
 
     let env_args = Vec::from(env_args);
 
+    let _instance_content_lock =
+        state.lock_instance_content(&instance.id).await;
+
     // Check if instance has a running process, and reject running the command if it does
     // Done late so a quick double call doesn't launch two instances
     let existing_processes = process::get_by_instance_id(&instance.id).await?;
@@ -934,6 +937,13 @@ pub async fn launch_minecraft(
         ))
         .as_error());
     }
+    if crate::state::instance_has_running_process(&instance.id, &state).await? {
+        return Err(crate::ErrorKind::LauncherError(format!(
+            "Instance {} is already running",
+            instance.id
+        ))
+        .as_error());
+    }
 
     let natives_dir = state.directories.version_natives_dir(&version_jar);
     if !natives_dir.exists() {
diff --git a/packages/app-lib/src/state/dirs.rs b/packages/app-lib/src/state/dirs.rs
index e3fb378608..f3416bbc9c 100644
--- a/packages/app-lib/src/state/dirs.rs
+++ b/packages/app-lib/src/state/dirs.rs
@@ -13,6 +13,7 @@ pub const CACHES_FOLDER_NAME: &str = "caches";
 pub const LAUNCHER_LOGS_FOLDER_NAME: &str = "launcher_logs";
 pub const INSTANCES_FOLDER_NAME: &str = "profiles";
 pub const METADATA_FOLDER_NAME: &str = "meta";
+pub const SYNCED_OPTIONS_FOLDER_NAME: &str = "synced-options";
 
 #[derive(Debug)]
 pub struct DirectoryInfo {
@@ -154,6 +155,11 @@ impl DirectoryInfo {
         self.config_dir.join(INSTANCES_FOLDER_NAME)
     }
 
+    #[inline]
+    pub fn synced_options_dir(&self) -> PathBuf {
+        self.config_dir.join(SYNCED_OPTIONS_FOLDER_NAME)
+    }
+
     /// Gets the logs dir for a given instance path
     #[inline]
     pub fn instance_logs_dir(&self, instance_path: &str) -> PathBuf {
@@ -269,6 +275,7 @@ impl DirectoryInfo {
                     CACHES_FOLDER_NAME,
                     INSTANCES_FOLDER_NAME,
                     METADATA_FOLDER_NAME,
+                    SYNCED_OPTIONS_FOLDER_NAME,
                 ];
 
                 struct MovePath {
diff --git a/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs b/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
index 1c829d7308..25ce58a714 100644
--- a/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
+++ b/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
@@ -4,8 +4,9 @@ use crate::state::instances::{
     ContentSet, ContentSetStatus, ContentSetSyncStatus, ContentSourceKind,
     Instance, InstanceIconBackground, InstanceIconConfig,
     InstanceLaunchContext, InstanceLaunchOverrides,
-    InstanceLaunchOverridesData, InstanceLink, SharedInstanceAttachment,
-    SharedInstanceRole, playtime_to_storage,
+    InstanceLaunchOverridesData, InstanceLink, InstanceSyncedOption,
+    InstanceSyncedOptions, SharedInstanceAttachment, SharedInstanceRole,
+    playtime_to_storage,
 };
 use crate::state::{
     InstanceInstallStage, LauncherFeatureVersion, ModLoader, ReleaseChannel,
@@ -168,6 +169,7 @@ pub(crate) struct InstanceMetadataRecord {
     pub link: InstanceLink,
     pub shared_instance: Option<SharedInstanceAttachment>,
     pub group_ids: Vec<String>,
+    pub synced_options: InstanceSyncedOptions,
     pub launch_overrides: InstanceLaunchOverrides,
 }
 
@@ -177,6 +179,13 @@ pub(crate) struct InstanceDisplayInfo {
     pub name: String,
 }
 
+#[derive(Clone, Debug, sqlx::FromRow)]
+pub(crate) struct InstanceScreenshotSource {
+    pub id: String,
+    pub name: String,
+    pub path: String,
+}
+
 #[derive(Debug, sqlx::FromRow)]
 struct InstanceMetadataRow {
     id: String,
@@ -363,6 +372,7 @@ impl InstanceMetadataRow {
             link,
             shared_instance,
             group_ids,
+            synced_options: InstanceSyncedOptions::default(),
             launch_overrides,
         })
     }
@@ -466,6 +476,129 @@ where
     Ok(row)
 }
 
+pub(crate) async fn get_instance_screenshot_source(
+    instance_id: &str,
+    pool: &SqlitePool,
+) -> crate::Result<Option<InstanceScreenshotSource>> {
+    let source = sqlx::query_as::<_, InstanceScreenshotSource>(
+        "
+		SELECT id, name, path
+		FROM instances
+		WHERE id = ?
+		",
+    )
+    .bind(instance_id)
+    .fetch_optional(pool)
+    .await?;
+
+    Ok(source)
+}
+
+pub(crate) async fn list_synced_screenshot_sources(
+    pool: &SqlitePool,
+) -> crate::Result<Vec<InstanceScreenshotSource>> {
+    let sources = sqlx::query_as!(
+        InstanceScreenshotSource,
+        "
+		SELECT instances.id, instances.name, instances.path
+		FROM instances
+		INNER JOIN instance_sync_preferences preferences
+			ON preferences.instance_id = instances.id
+		WHERE preferences.feature = 'screenshots'
+			AND preferences.enabled = 1
+			AND EXISTS (
+				SELECT 1
+				FROM sync_feature_settings
+				WHERE feature = 'screenshots' AND globally_enabled = 1
+			)
+		ORDER BY instances.name, instances.id
+		",
+    )
+    .fetch_all(pool)
+    .await?;
+
+    Ok(sources)
+}
+
+pub(crate) async fn list_screenshot_sources(
+    pool: &SqlitePool,
+) -> crate::Result<Vec<InstanceScreenshotSource>> {
+    let sources = sqlx::query_as::<_, InstanceScreenshotSource>(
+        "
+		SELECT id, name, path
+		FROM instances
+		ORDER BY name, id
+		",
+    )
+    .fetch_all(pool)
+    .await?;
+
+    Ok(sources)
+}
+
+pub(crate) async fn get_instance_sync_preferences(
+    instance_id: &str,
+    pool: &SqlitePool,
+) -> crate::Result<InstanceSyncedOptions> {
+    let enabled_features = sqlx::query_scalar!(
+        "
+		SELECT feature
+		FROM instance_sync_preferences
+		WHERE instance_id = ? AND enabled = 1
+		",
+        instance_id,
+    )
+    .fetch_all(pool)
+    .await?
+    .into_iter()
+    .collect::<HashSet<_>>();
+
+    Ok(InstanceSyncedOptions {
+        command_history: enabled_features.contains("command_history"),
+        multiplayer_servers: enabled_features.contains("multiplayer_servers"),
+        creative_hotbars: enabled_features.contains("creative_hotbars"),
+        screenshots: enabled_features.contains("screenshots"),
+    })
+}
+
+async fn attach_sync_preferences(
+    records: &mut [InstanceMetadataRecord],
+    pool: &SqlitePool,
+) -> crate::Result<()> {
+    let enabled_preferences = sqlx::query!(
+        "
+		SELECT instance_id, feature
+		FROM instance_sync_preferences
+		WHERE enabled = 1
+		",
+    )
+    .fetch_all(pool)
+    .await?;
+
+    for record in records {
+        for row in enabled_preferences
+            .iter()
+            .filter(|row| row.instance_id == record.instance.id)
+        {
+            match row.feature.as_str() {
+                "command_history" => {
+                    record.synced_options.command_history = true
+                }
+                "multiplayer_servers" => {
+                    record.synced_options.multiplayer_servers = true
+                }
+                "creative_hotbars" => {
+                    record.synced_options.creative_hotbars = true
+                }
+                "screenshots" => record.synced_options.screenshots = true,
+                _ => {}
+            }
+        }
+    }
+
+    Ok(())
+}
+
 pub(crate) async fn is_instance_quarantined<'e, E>(
     instance_id: &str,
     exec: E,
@@ -791,7 +924,13 @@ pub(crate) async fn get_instance_metadata_by_id(
             .fetch_optional(pool)
             .await?;
 
-    row.map(InstanceMetadataRow::into_record).transpose()
+    let mut record = row.map(InstanceMetadataRow::into_record).transpose()?;
+    if let Some(record) = record.as_mut() {
+        record.synced_options =
+            get_instance_sync_preferences(&record.instance.id, pool).await?;
+    }
+
+    Ok(record)
 }
 
 pub(crate) async fn get_instance_metadata_many(
@@ -821,9 +960,12 @@ pub(crate) async fn get_instance_metadata_many(
     .fetch_all(pool)
     .await?;
 
-    rows.into_iter()
+    let mut records = rows
+        .into_iter()
         .map(InstanceMetadataRow::into_record)
-        .collect()
+        .collect::<crate::Result<Vec<_>>>()?;
+    attach_sync_preferences(&mut records, pool).await?;
+    Ok(records)
 }
 
 pub(crate) async fn list_instance_metadata(
@@ -834,9 +976,12 @@ pub(crate) async fn list_instance_metadata(
             .fetch_all(pool)
             .await?;
 
-    rows.into_iter()
+    let mut records = rows
+        .into_iter()
         .map(InstanceMetadataRow::into_record)
-        .collect()
+        .collect::<crate::Result<Vec<_>>>()?;
+    attach_sync_preferences(&mut records, pool).await?;
+    Ok(records)
 }
 
 pub(crate) async fn get_instance_launch_context(
@@ -1139,6 +1284,65 @@ pub(crate) async fn insert_instance(
     Ok(())
 }
 
+pub(crate) async fn set_instance_sync_preference(
+    instance_id: &str,
+    option: InstanceSyncedOption,
+    enabled: bool,
+    pool: &SqlitePool,
+) -> crate::Result<()> {
+    let instance_exists = sqlx::query_scalar!(
+        r#"
+		SELECT EXISTS(SELECT 1 FROM instances WHERE id = ?)
+			AS "exists!: bool"
+		"#,
+        instance_id,
+    )
+    .fetch_one(pool)
+    .await?;
+
+    if !instance_exists {
+        return Err(crate::ErrorKind::InputError(
+            "Unknown instance".to_string(),
+        )
+        .into());
+    }
+
+    let option_name = option.as_str();
+    sqlx::query!(
+        "
+		INSERT INTO instance_sync_preferences (instance_id, feature, enabled)
+		VALUES (?, ?, ?)
+		ON CONFLICT (instance_id, feature) DO UPDATE SET
+			enabled = excluded.enabled
+		",
+        instance_id,
+        option_name,
+        enabled,
+    )
+    .execute(pool)
+    .await?;
+
+    Ok(())
+}
+
+pub(crate) async fn insert_default_instance_sync_preferences(
+    instance_id: &str,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<()> {
+    sqlx::query!(
+        "
+		INSERT INTO instance_sync_preferences (instance_id, feature, enabled)
+		SELECT ?, feature, new_instance_default
+		FROM sync_feature_settings
+		",
+        instance_id,
+    )
+    .execute(&mut **tx)
+    .await?;
+
+    Ok(())
+}
+
 pub(crate) async fn update_instance(
     instance: &Instance,
     tx: &mut Transaction<'_, Sqlite>,
diff --git a/packages/app-lib/src/state/instances/adapters/sqlite/mod.rs b/packages/app-lib/src/state/instances/adapters/sqlite/mod.rs
index d8b478f4da..80ac7f3716 100644
--- a/packages/app-lib/src/state/instances/adapters/sqlite/mod.rs
+++ b/packages/app-lib/src/state/instances/adapters/sqlite/mod.rs
@@ -1,2 +1,3 @@
 pub(crate) mod content_rows;
 pub(crate) mod instance_rows;
+pub(crate) mod screenshot_rows;
diff --git a/packages/app-lib/src/state/instances/adapters/sqlite/screenshot_rows.rs b/packages/app-lib/src/state/instances/adapters/sqlite/screenshot_rows.rs
new file mode 100644
index 0000000000..dad3684382
--- /dev/null
+++ b/packages/app-lib/src/state/instances/adapters/sqlite/screenshot_rows.rs
@@ -0,0 +1,236 @@
+use sqlx::{Sqlite, SqlitePool, Transaction};
+
+#[derive(Clone, Debug, sqlx::FromRow)]
+pub(crate) struct ScreenshotRow {
+    pub id: String,
+    pub instance_id: String,
+    pub file_name: String,
+    pub content_hash: String,
+    pub file_size: i64,
+    pub modified_at: i64,
+    pub created_at: i64,
+    pub group_id: Option<String>,
+}
+
+#[derive(Clone, Debug, sqlx::FromRow)]
+pub(crate) struct ScreenshotGroupRow {
+    pub id: String,
+    pub name: String,
+}
+
+pub(crate) async fn list_screenshots(
+    instance_id: &str,
+    pool: &SqlitePool,
+) -> crate::Result<Vec<ScreenshotRow>> {
+    Ok(sqlx::query_as!(
+        ScreenshotRow,
+        r#"
+		SELECT
+			screenshots.id,
+			screenshots.instance_id,
+			screenshots.file_name,
+			screenshots.content_hash,
+			screenshots.file_size,
+			screenshots.modified_at,
+			screenshots.created_at,
+			memberships.group_id AS "group_id?"
+		FROM screenshots
+		LEFT JOIN screenshot_group_memberships memberships
+			ON memberships.screenshot_id = screenshots.id
+		WHERE screenshots.instance_id = ?
+		ORDER BY screenshots.file_name, screenshots.id
+		"#,
+        instance_id,
+    )
+    .fetch_all(pool)
+    .await?)
+}
+
+pub(crate) async fn get_screenshot_by_key(
+    instance_id: &str,
+    file_name: &str,
+    pool: &SqlitePool,
+) -> crate::Result<Option<ScreenshotRow>> {
+    Ok(sqlx::query_as!(
+        ScreenshotRow,
+        r#"
+		SELECT
+			screenshots.id,
+			screenshots.instance_id,
+			screenshots.file_name,
+			screenshots.content_hash,
+			screenshots.file_size,
+			screenshots.modified_at,
+			screenshots.created_at,
+			memberships.group_id AS "group_id?"
+		FROM screenshots
+		LEFT JOIN screenshot_group_memberships memberships
+			ON memberships.screenshot_id = screenshots.id
+		WHERE screenshots.instance_id = ? AND screenshots.file_name = ?
+		"#,
+        instance_id,
+        file_name,
+    )
+    .fetch_optional(pool)
+    .await?)
+}
+
+pub(crate) async fn copy_group_membership(
+    source_id: &str,
+    edited_id: &str,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<()> {
+    sqlx::query!(
+        r#"
+		INSERT INTO screenshot_group_memberships (screenshot_id, group_id)
+		SELECT ?, group_id
+		FROM screenshot_group_memberships
+		WHERE screenshot_id = ?
+		ON CONFLICT (screenshot_id) DO UPDATE SET group_id = excluded.group_id
+		"#,
+        edited_id,
+        source_id,
+    )
+    .execute(&mut **tx)
+    .await?;
+
+    Ok(())
+}
+
+pub(crate) async fn insert_screenshot(
+    row: &ScreenshotRow,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<()> {
+    sqlx::query!(
+        "
+		INSERT INTO screenshots (
+			id,
+			instance_id,
+			file_name,
+			content_hash,
+			file_size,
+			modified_at,
+			created_at
+		)
+		VALUES (?, ?, ?, ?, ?, ?, ?)
+		",
+        row.id,
+        row.instance_id,
+        row.file_name,
+        row.content_hash,
+        row.file_size,
+        row.modified_at,
+        row.created_at,
+    )
+    .execute(&mut **tx)
+    .await?;
+
+    Ok(())
+}
+
+pub(crate) async fn update_screenshot(
+    row: &ScreenshotRow,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<()> {
+    sqlx::query!(
+        "
+		UPDATE screenshots
+		SET
+			instance_id = ?,
+			file_name = ?,
+			content_hash = ?,
+			file_size = ?,
+			modified_at = ?,
+			created_at = ?
+		WHERE id = ?
+		",
+        row.instance_id,
+        row.file_name,
+        row.content_hash,
+        row.file_size,
+        row.modified_at,
+        row.created_at,
+        row.id,
+    )
+    .execute(&mut **tx)
+    .await?;
+
+    Ok(())
+}
+
+pub(crate) async fn delete_screenshot(
+    id: &str,
+    tx: &mut Transaction<'_, Sqlite>,
+) -> crate::Result<()> {
+    sqlx::query!("DELETE FROM screenshots WHERE id = ?", id)
+        .execute(&mut **tx)
+        .await?;
+
+    Ok(())
+}
+
+pub(crate) async fn move_screenshot(
+    source_instance_id: &str,
+    source_file_name: &str,
+    target_instance_id: &str,
+    target_file_name: &str,
+    pool: &SqlitePool,
+) -> crate::Result<()> {
+    let mut tx = pool.begin().await?;
+    sqlx::query!(
+        "DELETE FROM screenshots WHERE instance_id = ? AND file_name = ?",
+        target_instance_id,
+        target_file_name,
+    )
+    .execute(&mut *tx)
+    .await?;
+
+    sqlx::query!(
+        "
+		UPDATE screenshots
+		SET instance_id = ?, file_name = ?
+		WHERE instance_id = ? AND file_name = ?
+		",
+        target_instance_id,
+        target_file_name,
+        source_instance_id,
+        source_file_name,
+    )
+    .execute(&mut *tx)
+    .await?;
+
+    tx.commit().await?;
+
+    Ok(())
+}
+
+pub(crate) async fn delete_screenshot_by_key(
+    instance_id: &str,
+    file_name: &str,
+    pool: &SqlitePool,
+) -> crate::Result<()> {
+    sqlx::query!(
+        "DELETE FROM screenshots WHERE instance_id = ? AND file_name = ?",
+        instance_id,
+        file_name,
+    )
+    .execute(pool)
+    .await?;
+
+    Ok(())
+}
+
+pub(crate) async fn list_groups(
+    pool: &SqlitePool,
+) -> crate::Result<Vec<ScreenshotGroupRow>> {
+    Ok(sqlx::query_as!(
+        ScreenshotGroupRow,
+        "
+        SELECT id, name
+		FROM screenshot_groups
+		ORDER BY display_order, name, id
+		",
+    )
+    .fetch_all(pool)
+    .await?)
+}
diff --git a/packages/app-lib/src/state/instances/commands/create_instance.rs b/packages/app-lib/src/state/instances/commands/create_instance.rs
index c84da4e16d..3ea871bded 100644
--- a/packages/app-lib/src/state/instances/commands/create_instance.rs
+++ b/packages/app-lib/src/state/instances/commands/create_instance.rs
@@ -98,6 +98,11 @@ pub(crate) async fn create_instance(
 
         let mut tx = state.pool.begin().await?;
         instance_rows::insert_instance(&instance, &mut tx).await?;
+        instance_rows::insert_default_instance_sync_preferences(
+            &instance_id,
+            &mut tx,
+        )
+        .await?;
         if let Some(icon_config) = &input.icon_config {
             instance_rows::update_instance_icon_config(
                 &instance_id,
@@ -125,6 +130,17 @@ pub(crate) async fn create_instance(
             &state.directories,
         )
         .await;
+        if let Err(error) =
+            crate::api::instance::reconcile_instance_synced_options(
+                &instance.id,
+            )
+            .await
+        {
+            tracing::warn!(
+                "Failed to reconcile synced options for newly created instance {}: {error}",
+                instance.id
+            );
+        }
 
         Ok(instance)
     }
diff --git a/packages/app-lib/src/state/instances/commands/get_instance.rs b/packages/app-lib/src/state/instances/commands/get_instance.rs
index 4794351740..f3cc90fc50 100644
--- a/packages/app-lib/src/state/instances/commands/get_instance.rs
+++ b/packages/app-lib/src/state/instances/commands/get_instance.rs
@@ -1,6 +1,7 @@
 use crate::state::instances::{
     ContentSet, Instance, InstanceIconConfig, InstanceLaunchOverrides,
-    InstanceLink, SharedInstanceAttachment, adapters::sqlite::instance_rows,
+    InstanceLink, InstanceSyncedOptions, SharedInstanceAttachment,
+    adapters::sqlite::instance_rows,
 };
 use serde::{Deserialize, Serialize};
 use sqlx::SqlitePool;
@@ -16,6 +17,7 @@ pub struct InstanceMetadata {
     #[serde(default)]
     pub quarantined: bool,
     pub group_ids: Vec<String>,
+    pub synced_options: InstanceSyncedOptions,
     pub launch_overrides: InstanceLaunchOverrides,
 }
 
@@ -87,6 +89,7 @@ fn instance_metadata(
         shared_instance: record.shared_instance,
         quarantined,
         group_ids: record.group_ids,
+        synced_options: record.synced_options,
         launch_overrides: record.launch_overrides,
     }
 }
diff --git a/packages/app-lib/src/state/instances/commands/remove_instance.rs b/packages/app-lib/src/state/instances/commands/remove_instance.rs
index 9049dd77b0..c39f28bcca 100644
--- a/packages/app-lib/src/state/instances/commands/remove_instance.rs
+++ b/packages/app-lib/src/state/instances/commands/remove_instance.rs
@@ -12,6 +12,9 @@ pub(crate) async fn remove_instance(
             crate::ErrorKind::InputError("Unknown instance".to_string())
         })?;
     let _content_lock = state.lock_instance_content(instance_id).await;
+    let _synced_options_lock = state.lock_synced_options().await;
+    crate::api::instance::remove_generated_instance_files(instance_id, state)
+        .await?;
 
     delete_instance_row_and_locks(&instance.id, state).await?;
 
diff --git a/packages/app-lib/src/state/instances/model/instance.rs b/packages/app-lib/src/state/instances/model/instance.rs
index 7e2ed9c9a5..8c2f157e6c 100644
--- a/packages/app-lib/src/state/instances/model/instance.rs
+++ b/packages/app-lib/src/state/instances/model/instance.rs
@@ -23,6 +23,45 @@ pub struct InstanceIconConfig {
     pub symbol: String,
 }
 
+#[derive(
+    Clone, Copy, Debug, Default, Eq, PartialEq, Serialize, Deserialize,
+)]
+pub struct InstanceSyncedOptions {
+    pub command_history: bool,
+    pub multiplayer_servers: bool,
+    pub creative_hotbars: bool,
+    pub screenshots: bool,
+}
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum SyncedOption {
+    CommandHistory,
+    MultiplayerServers,
+    CreativeHotbars,
+    Screenshots,
+}
+
+impl SyncedOption {
+    pub fn as_str(self) -> &'static str {
+        match self {
+            Self::CommandHistory => "command_history",
+            Self::MultiplayerServers => "multiplayer_servers",
+            Self::CreativeHotbars => "creative_hotbars",
+            Self::Screenshots => "screenshots",
+        }
+    }
+
+    pub const ALL: [Self; 4] = [
+        Self::CommandHistory,
+        Self::MultiplayerServers,
+        Self::CreativeHotbars,
+        Self::Screenshots,
+    ];
+}
+
+pub type InstanceSyncedOption = SyncedOption;
+
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct Instance {
     pub id: String,
diff --git a/packages/app-lib/src/state/instances/watcher.rs b/packages/app-lib/src/state/instances/watcher.rs
index acd0e5524d..02112f1ac0 100644
--- a/packages/app-lib/src/state/instances/watcher.rs
+++ b/packages/app-lib/src/state/instances/watcher.rs
@@ -40,6 +40,7 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                 Ok(events) => {
                     let instance_ids = event_instance_ids.read().await;
                     let mut visited_instances = Vec::new();
+                    let mut visited_screenshot_instances = Vec::new();
 
                     for e in &events {
                         let mut instance_path = None;
@@ -72,6 +73,9 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                 .skip_while(|x| x.as_os_str() != instance_path)
                                 .nth(1)
                                 .map(|x| x.as_os_str());
+                            let is_screenshot_event = first_file_name
+                                .as_ref()
+                                .is_some_and(|name| *name == "screenshots");
                             if first_file_name
                                 .as_ref()
                                 .is_some_and(|x| *x == "crash-reports")
@@ -81,13 +85,25 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                     .is_some_and(|x| *x == "txt")
                             {
                                 crash_task(instance_id);
-                            } else if !visited_instances.contains(&instance_id)
+                            } else if (is_screenshot_event
+                                && !visited_screenshot_instances
+                                    .contains(&instance_id))
+                                || (!is_screenshot_event
+                                    && !visited_instances
+                                        .contains(&instance_id))
                             {
                                 let event = if first_file_name
                                     .as_ref()
                                     .is_some_and(|x| *x == "servers.dat")
                                 {
                                     Some(InstancePayloadType::ServersUpdated)
+                                } else if first_file_name
+                                    .as_ref()
+                                    .is_some_and(|x| *x == "screenshots")
+                                {
+                                    Some(
+                                        InstancePayloadType::ScreenshotsUpdated,
+                                    )
                                 } else if first_file_name.as_ref().is_some_and(
                                     |x| {
                                         *x == "saves"
@@ -138,6 +154,10 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                 };
                                 if let Some(event) = event {
                                     let emit_instance_id = instance_id.clone();
+                                    let reconcile_screenshots = matches!(
+                                        &event,
+                                        InstancePayloadType::ScreenshotsUpdated
+                                    );
                                     let sync_content = first_file_name
                                         .as_ref()
                                         .is_some_and(|name| {
@@ -149,6 +169,18 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                                 },
                                             )
                                         });
+                                    let synced_option_file = first_file_name
+                                        .as_ref()
+                                        .and_then(|name| name.to_str())
+                                        .filter(|name| {
+                                            matches!(
+                                                *name,
+                                                "command_history.txt"
+                                                    | "hotbar.nbt"
+                                                    | "servers.dat"
+                                            )
+                                        })
+                                        .map(ToOwned::to_owned);
                                     tokio::spawn(async move {
                                         if sync_content
                                             && let Ok(state) =
@@ -159,9 +191,32 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                                     &state,
                                                 )
                                                 .await
-                                        {
+										{
                                             tracing::error!(
                                                 "Failed to sync instance content after filesystem change: {error}"
+                                            );
+										}
+                                        if let Some(file_name) = synced_option_file
+											&& let Err(error) =
+												crate::api::instance::reconcile_synced_option_file(
+													&emit_instance_id,
+													&file_name,
+												)
+												.await
+										{
+											tracing::error!(
+												"Failed to reconcile {file_name} after filesystem change: {error}"
+											);
+										}
+                                        if reconcile_screenshots
+                                            && let Err(error) =
+                                                crate::api::instance::reconcile_screenshots(
+                                                    &emit_instance_id,
+                                                )
+                                                .await
+                                        {
+                                            tracing::error!(
+                                                "Failed to reconcile screenshots after filesystem change: {error}"
                                             );
                                         }
                                         let _ = emit_instance(
@@ -170,7 +225,12 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                         )
                                         .await;
                                     });
-                                    visited_instances.push(instance_id);
+                                    if is_screenshot_event {
+                                        visited_screenshot_instances
+                                            .push(instance_id);
+                                    } else {
+                                        visited_instances.push(instance_id);
+                                    }
                                 }
                             }
                         }
@@ -199,6 +259,14 @@ pub(crate) async fn watch_instances_init(
     for instance in instances {
         watch_instance_folder(&instance.id, &instance.path, watcher, dirs)
             .await;
+        if let Err(error) =
+            crate::api::instance::reconcile_screenshots(&instance.id).await
+        {
+            tracing::warn!(
+                "Failed to reconcile screenshots for {} during watcher initialization: {error}",
+                instance.id
+            );
+        }
     }
 }
 
@@ -222,6 +290,7 @@ pub(crate) async fn watch_instance_folder(
     for sub_path in ProjectType::iterator().map(|x| x.get_folder()).chain([
         "crash-reports",
         "saves",
+        "screenshots",
         CONFIG_DIRECTORY,
     ]) {
         let full_path = full_instance_path.join(sub_path);
diff --git a/packages/app-lib/src/state/mod.rs b/packages/app-lib/src/state/mod.rs
index 9b1098abeb..f0a186a2ca 100644
--- a/packages/app-lib/src/state/mod.rs
+++ b/packages/app-lib/src/state/mod.rs
@@ -3,7 +3,7 @@ use crate::util::fetch::{FetchSemaphore, IoSemaphore};
 use dashmap::DashMap;
 use std::sync::Arc;
 use std::sync::atomic::AtomicBool;
-use tokio::sync::{Mutex, OnceCell, OwnedMutexGuard, Semaphore};
+use tokio::sync::{Mutex, MutexGuard, OnceCell, OwnedMutexGuard, Semaphore};
 
 use crate::state::instances::watcher::FileWatcher;
 use sqlx::SqlitePool;
@@ -77,8 +77,12 @@ pub struct State {
     pub(crate) install_db_semaphore: Semaphore,
     /// Serializes filesystem reconciliation and content mutations per instance.
     instance_content_locks: DashMap<String, Arc<Mutex<()>>>,
+    /// Serializes screenshot filesystem reconciliation per instance.
+    instance_screenshot_locks: DashMap<String, Arc<Mutex<()>>>,
     /// Serializes shared instance attachment and recipient mutations per instance.
     shared_instance_locks: DashMap<String, Arc<Mutex<()>>>,
+    /// Serializes canonical synced-option mutations and checkpoint updates.
+    synced_options_lock: Mutex<()>,
 
     /// Discord RPC
     pub discord_rpc: DiscordGuard,
@@ -103,6 +107,10 @@ pub struct State {
 }
 
 impl State {
+    pub(crate) async fn lock_synced_options(&self) -> MutexGuard<'_, ()> {
+        self.synced_options_lock.lock().await
+    }
+
     pub(crate) async fn lock_instance_content(
         &self,
         instance_id: &str,
@@ -129,8 +137,22 @@ impl State {
         lock.lock_owned().await
     }
 
+    pub(crate) async fn lock_instance_screenshots(
+        &self,
+        instance_id: &str,
+    ) -> OwnedMutexGuard<()> {
+        let lock = self
+            .instance_screenshot_locks
+            .entry(instance_id.to_string())
+            .or_insert_with(|| Arc::new(Mutex::new(())))
+            .clone();
+
+        lock.lock_owned().await
+    }
+
     pub(crate) fn remove_instance_locks(&self, instance_id: &str) {
         let _ = self.instance_content_locks.remove(instance_id);
+        let _ = self.instance_screenshot_locks.remove(instance_id);
         let _ = self.shared_instance_locks.remove(instance_id);
     }
 
@@ -153,6 +175,22 @@ impl State {
             )
             .await;
 
+            if let Err(error) =
+                crate::api::instance::monitor_persisted_processes().await
+            {
+                tracing::error!(
+                    "Failed to monitor persisted Minecraft processes: {error}"
+                );
+            }
+
+            if let Err(error) =
+                crate::api::instance::reconcile_all_synced_options().await
+            {
+                tracing::error!(
+                    "Failed to reconcile instance synced options during startup: {error}"
+                );
+            }
+
             if let Err(e) = crate::api::instance::migrate_legacy_icons().await {
                 tracing::error!("Error migrating legacy instance icons: {e}");
             }
@@ -254,7 +292,9 @@ impl State {
             install_job_semaphore: Semaphore::new(MAX_CONCURRENT_INSTALL_JOBS),
             install_db_semaphore: Semaphore::new(1),
             instance_content_locks: DashMap::new(),
+            instance_screenshot_locks: DashMap::new(),
             shared_instance_locks: DashMap::new(),
+            synced_options_lock: Mutex::new(()),
             discord_rpc,
             process_manager,
             friends_socket,
diff --git a/packages/app-lib/src/state/process.rs b/packages/app-lib/src/state/process.rs
index 87aa50f972..3b80a78bda 100644
--- a/packages/app-lib/src/state/process.rs
+++ b/packages/app-lib/src/state/process.rs
@@ -80,6 +80,74 @@ pub fn remove_log_buffer(instance_id: &str) {
     LOG_BUFFERS.remove(instance_id);
 }
 
+async fn clear_persisted_process(
+    state: &crate::State,
+    process: Option<(i64, i64)>,
+) {
+    let Some((pid, start_time)) = process else {
+        return;
+    };
+    if let Err(error) = sqlx::query!(
+        "DELETE FROM processes WHERE pid = ? AND start_time = ?",
+        pid,
+        start_time,
+    )
+    .execute(&state.pool)
+    .await
+    {
+        tracing::warn!("Failed to clear persisted process {pid}: {error}");
+    }
+}
+
+pub(crate) async fn instance_has_running_process(
+    instance_id: &str,
+    state: &crate::State,
+) -> crate::Result<bool> {
+    if state
+        .process_manager
+        .get_all()
+        .iter()
+        .any(|process| process.instance_id == instance_id)
+    {
+        return Ok(true);
+    }
+
+    let processes = sqlx::query!(
+        "
+		SELECT pid, start_time
+		FROM processes
+		WHERE instance_id = ?
+		",
+        instance_id,
+    )
+    .fetch_all(&state.pool)
+    .await?;
+    if processes.is_empty() {
+        return Ok(false);
+    }
+    let system = sysinfo::System::new_all();
+    let mut running = false;
+    for process in processes {
+        let process_is_running = u32::try_from(process.pid)
+            .ok()
+            .and_then(|pid| system.process(sysinfo::Pid::from_u32(pid)))
+            .is_some_and(|system_process| {
+                let started_at = system_process.start_time() as i64;
+                started_at.abs_diff(process.start_time) <= 2
+            });
+        if process_is_running {
+            running = true;
+        } else {
+            clear_persisted_process(
+                state,
+                Some((process.pid, process.start_time)),
+            )
+            .await;
+        }
+    }
+    Ok(running)
+}
+
 pub struct ProcessManager {
     processes: DashMap<Uuid, Process>,
 }
@@ -118,34 +186,11 @@ impl ProcessManager {
         mc_command.stdout(std::process::Stdio::piped());
         mc_command.stderr(std::process::Stdio::piped());
         mc_command.stdin(std::process::Stdio::piped());
-
-        let mut mc_proc = mc_command.spawn().map_err(IOError::from)?;
-
-        let stdout = mc_proc.stdout.take();
-        let stderr = mc_proc.stderr.take();
-
-        let mut process = Process {
-            metadata: ProcessMetadata {
-                uuid: Uuid::new_v4(),
-                start_time: Utc::now(),
-                instance_id: instance_id.to_string(),
-                instance_path: instance_path.to_string(),
-                instance_name: instance_name.to_string(),
-            },
-            child: mc_proc,
-            rpc_server,
-            _main_class_keep_alive: main_class_keep_alive,
-        };
-
-        if let Err(e) =
-            post_process_init(&process.metadata, &process.rpc_server).await
-        {
-            tracing::error!("Failed to run post-process init: {e}");
-            let _ = process.child.kill().await;
-            return Err(e);
-        }
-
-        let metadata = process.metadata.clone();
+        let executable = mc_command
+            .as_std()
+            .get_program()
+            .to_string_lossy()
+            .into_owned();
 
         if !logs_folder.exists() {
             tokio::fs::create_dir_all(&logs_folder)
@@ -165,7 +210,6 @@ impl ProcessManager {
                 .open(&log_path)
                 .map_err(|e| IOError::with_path(e, &log_path))?;
 
-            // Initialize with timestamp header
             let now = chrono::Local::now();
             writeln!(
                 log_file,
@@ -178,6 +222,76 @@ impl ProcessManager {
             writeln!(log_file).map_err(|e| IOError::with_path(e, &log_path))?;
         }
 
+        let mut mc_proc = mc_command.spawn().map_err(IOError::from)?;
+        let child_pid = mc_proc.id();
+
+        let stdout = mc_proc.stdout.take();
+        let stderr = mc_proc.stderr.take();
+
+        let mut process = Process {
+            metadata: ProcessMetadata {
+                uuid: Uuid::new_v4(),
+                start_time: Utc::now(),
+                instance_id: instance_id.to_string(),
+                instance_path: instance_path.to_string(),
+                instance_name: instance_name.to_string(),
+            },
+            child: mc_proc,
+            rpc_server,
+            _main_class_keep_alive: main_class_keep_alive,
+        };
+
+        let state = match crate::State::get().await {
+            Ok(state) => state,
+            Err(error) => {
+                let _ = process.child.kill().await;
+                return Err(error);
+            }
+        };
+        let persisted_process = child_pid.map(|pid| {
+            (i64::from(pid), process.metadata.start_time.timestamp())
+        });
+        if let Some((pid, start_time)) = persisted_process {
+            let post_exit_command = post_exit_command.as_deref();
+            if let Err(error) = sqlx::query!(
+                "
+				INSERT INTO processes
+					(pid, start_time, name, executable, instance_id,
+					 post_exit_command)
+				VALUES (?, ?, ?, ?, ?, ?)
+				ON CONFLICT(pid) DO UPDATE SET
+					start_time = excluded.start_time,
+					name = excluded.name,
+					executable = excluded.executable,
+					instance_id = excluded.instance_id,
+					post_exit_command = excluded.post_exit_command
+				",
+                pid,
+                start_time,
+                instance_name,
+                executable,
+                instance_id,
+                post_exit_command,
+            )
+            .execute(&state.pool)
+            .await
+            {
+                let _ = process.child.kill().await;
+                return Err(error.into());
+            }
+        }
+
+        if let Err(e) =
+            post_process_init(&process.metadata, &process.rpc_server).await
+        {
+            tracing::error!("Failed to run post-process init: {e}");
+            clear_persisted_process(&state, persisted_process).await;
+            let _ = process.child.kill().await;
+            return Err(e);
+        }
+
+        let metadata = process.metadata.clone();
+
         if let Some(stdout) = stdout {
             let log_path_clone = log_path.clone();
 
@@ -212,16 +326,17 @@ impl ProcessManager {
             });
         }
 
+        self.processes.insert(process.metadata.uuid, process);
+
         tokio::spawn(Process::sequential_process_manager(
             instance_id.to_string(),
             instance_path.to_string(),
             post_exit_command,
             post_exit_env_vars,
             metadata.uuid,
+            persisted_process,
         ));
 
-        self.processes.insert(process.metadata.uuid, process);
-
         emit_process(
             instance_id,
             metadata.uuid,
@@ -748,6 +863,7 @@ impl Process {
         post_exit_command: Option<String>,
         post_exit_env_vars: Vec<(String, String)>,
         uuid: Uuid,
+        persisted_process: Option<(i64, i64)>,
     ) -> crate::Result<()> {
         async fn update_playtime(
             last_updated_playtime: &mut Instant,
@@ -812,6 +928,7 @@ impl Process {
         }
 
         state.process_manager.remove(uuid);
+        clear_persisted_process(&state, persisted_process).await;
         emit_process(
             &instance_id,
             uuid,
@@ -823,6 +940,20 @@ impl Process {
         // Now fully complete- update playtime one last time
         update_playtime(&mut last_updated_playtime, &instance_id, true).await;
 
+        let reconcile_instance_id = instance_id.clone();
+        tokio::spawn(async move {
+            if let Err(error) =
+                crate::api::instance::reconcile_instance_synced_options(
+                    &reconcile_instance_id,
+                )
+                .await
+            {
+                tracing::warn!(
+                    "Failed to reconcile synced options after Minecraft exited for {reconcile_instance_id}: {error}"
+                );
+            }
+        });
+
         // Publish play time update
         // Allow failure, it will be stored locally and sent next time
         // Sent in another thread as first call may take a couple seconds and hold up process ending
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 5f0204fb04..ee048eccab 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -78,6 +78,7 @@ import _ChevronDownIcon from './icons/chevron-down.svg?component'
 import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _ChevronUpIcon from './icons/chevron-up.svg?component'
+import _CircleIcon from './icons/circle.svg?component'
 import _CircleAlertIcon from './icons/circle-alert.svg?component'
 import _CircleArrowRightIcon from './icons/circle-arrow-right.svg?component'
 import _CircleDashedIcon from './icons/circle-dashed.svg?component'
@@ -105,6 +106,7 @@ import _ContractIcon from './icons/contract.svg?component'
 import _CopyIcon from './icons/copy.svg?component'
 import _CopyrightIcon from './icons/copyright.svg?component'
 import _CpuIcon from './icons/cpu.svg?component'
+import _CropIcon from './icons/crop.svg?component'
 import _CrownIcon from './icons/crown.svg?component'
 import _CubeIcon from './icons/cube.svg?component'
 import _CurrencyIcon from './icons/currency.svg?component'
@@ -115,6 +117,7 @@ import _DownloadIcon from './icons/download.svg?component'
 import _DropdownIcon from './icons/dropdown.svg?component'
 import _EditIcon from './icons/edit.svg?component'
 import _EllipsisVerticalIcon from './icons/ellipsis-vertical.svg?component'
+import _EraserIcon from './icons/eraser.svg?component'
 import _ExpandIcon from './icons/expand.svg?component'
 import _ExternalIcon from './icons/external.svg?component'
 import _EyeIcon from './icons/eye.svg?component'
@@ -157,6 +160,7 @@ import _Heading3Icon from './icons/heading-3.svg?component'
 import _HeartIcon from './icons/heart.svg?component'
 import _HeartHandshakeIcon from './icons/heart-handshake.svg?component'
 import _HeartMinusIcon from './icons/heart-minus.svg?component'
+import _HighlighterIcon from './icons/highlighter.svg?component'
 import _HistoryIcon from './icons/history.svg?component'
 import _HomeIcon from './icons/home.svg?component'
 import _ImageIcon from './icons/image.svg?component'
@@ -205,7 +209,9 @@ import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
 import _MoonIcon from './icons/moon.svg?component'
 import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
 import _MoreVerticalIcon from './icons/more-vertical.svg?component'
+import _MousePointer2Icon from './icons/mouse-pointer-2.svg?component'
 import _MoveIcon from './icons/move.svg?component'
+import _MoveUpRightIcon from './icons/move-up-right.svg?component'
 import _NewspaperIcon from './icons/newspaper.svg?component'
 import _NoSignalIcon from './icons/no-signal.svg?component'
 import _NotepadTextIcon from './icons/notepad-text.svg?component'
@@ -269,6 +275,7 @@ import _SortDescIcon from './icons/sort-desc.svg?component'
 import _SparklesIcon from './icons/sparkles.svg?component'
 import _SpinnerIcon from './icons/spinner.svg?component'
 import _SplitIcon from './icons/split.svg?component'
+import _SquareIcon from './icons/square.svg?component'
 import _SquarePlusIcon from './icons/square-plus.svg?component'
 import _StarIcon from './icons/star.svg?component'
 import _StopCircleIcon from './icons/stop-circle.svg?component'
@@ -424,6 +431,7 @@ import _TrashExclamationIcon from './icons/trash-exclamation.svg?component'
 import _TrendingDownIcon from './icons/trending-down.svg?component'
 import _TrendingUpIcon from './icons/trending-up.svg?component'
 import _TriangleAlertIcon from './icons/triangle-alert.svg?component'
+import _TypeIcon from './icons/type.svg?component'
 import _UnderlineIcon from './icons/underline.svg?component'
 import _UndoIcon from './icons/undo.svg?component'
 import _UnfoldHorizontalIcon from './icons/unfold-horizontal.svg?component'
@@ -527,6 +535,7 @@ export const ChevronDownIcon = _ChevronDownIcon
 export const ChevronLeftIcon = _ChevronLeftIcon
 export const ChevronRightIcon = _ChevronRightIcon
 export const ChevronUpIcon = _ChevronUpIcon
+export const CircleIcon = _CircleIcon
 export const CircleAlertIcon = _CircleAlertIcon
 export const CircleArrowRightIcon = _CircleArrowRightIcon
 export const CircleDashedIcon = _CircleDashedIcon
@@ -554,6 +563,7 @@ export const ContractIcon = _ContractIcon
 export const CopyIcon = _CopyIcon
 export const CopyrightIcon = _CopyrightIcon
 export const CpuIcon = _CpuIcon
+export const CropIcon = _CropIcon
 export const CrownIcon = _CrownIcon
 export const CubeIcon = _CubeIcon
 export const CurrencyIcon = _CurrencyIcon
@@ -564,6 +574,7 @@ export const DownloadIcon = _DownloadIcon
 export const DropdownIcon = _DropdownIcon
 export const EditIcon = _EditIcon
 export const EllipsisVerticalIcon = _EllipsisVerticalIcon
+export const EraserIcon = _EraserIcon
 export const ExpandIcon = _ExpandIcon
 export const ExternalIcon = _ExternalIcon
 export const EyeIcon = _EyeIcon
@@ -606,6 +617,7 @@ export const Heading3Icon = _Heading3Icon
 export const HeartIcon = _HeartIcon
 export const HeartHandshakeIcon = _HeartHandshakeIcon
 export const HeartMinusIcon = _HeartMinusIcon
+export const HighlighterIcon = _HighlighterIcon
 export const HistoryIcon = _HistoryIcon
 export const HomeIcon = _HomeIcon
 export const ImageIcon = _ImageIcon
@@ -654,7 +666,9 @@ export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
 export const MoonIcon = _MoonIcon
 export const MoreHorizontalIcon = _MoreHorizontalIcon
 export const MoreVerticalIcon = _MoreVerticalIcon
+export const MousePointer2Icon = _MousePointer2Icon
 export const MoveIcon = _MoveIcon
+export const MoveUpRightIcon = _MoveUpRightIcon
 export const NewspaperIcon = _NewspaperIcon
 export const NoSignalIcon = _NoSignalIcon
 export const NotepadTextIcon = _NotepadTextIcon
@@ -718,6 +732,7 @@ export const SortDescIcon = _SortDescIcon
 export const SparklesIcon = _SparklesIcon
 export const SpinnerIcon = _SpinnerIcon
 export const SplitIcon = _SplitIcon
+export const SquareIcon = _SquareIcon
 export const SquarePlusIcon = _SquarePlusIcon
 export const StarIcon = _StarIcon
 export const StopCircleIcon = _StopCircleIcon
@@ -873,6 +888,7 @@ export const TrashExclamationIcon = _TrashExclamationIcon
 export const TrendingDownIcon = _TrendingDownIcon
 export const TrendingUpIcon = _TrendingUpIcon
 export const TriangleAlertIcon = _TriangleAlertIcon
+export const TypeIcon = _TypeIcon
 export const UnderlineIcon = _UnderlineIcon
 export const UndoIcon = _UndoIcon
 export const UnfoldHorizontalIcon = _UnfoldHorizontalIcon
diff --git a/packages/assets/icons/circle.svg b/packages/assets/icons/circle.svg
new file mode 100644
index 0000000000..8e915fa827
--- /dev/null
+++ b/packages/assets/icons/circle.svg
@@ -0,0 +1,15 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-circle"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+</svg>
diff --git a/packages/assets/icons/crop.svg b/packages/assets/icons/crop.svg
new file mode 100644
index 0000000000..6f96e5b48c
--- /dev/null
+++ b/packages/assets/icons/crop.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-crop"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 2v14a2 2 0 0 0 2 2h14" />
+  <path d="M18 22V8a2 2 0 0 0-2-2H2" />
+</svg>
diff --git a/packages/assets/icons/eraser.svg b/packages/assets/icons/eraser.svg
new file mode 100644
index 0000000000..6e204344aa
--- /dev/null
+++ b/packages/assets/icons/eraser.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-eraser"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21" />
+  <path d="m5.082 11.09 8.828 8.828" />
+</svg>
diff --git a/packages/assets/icons/highlighter.svg b/packages/assets/icons/highlighter.svg
new file mode 100644
index 0000000000..9479811d2d
--- /dev/null
+++ b/packages/assets/icons/highlighter.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-highlighter"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m9 11-6 6v3h9l3-3" />
+  <path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" />
+</svg>
diff --git a/packages/assets/icons/mouse-pointer-2.svg b/packages/assets/icons/mouse-pointer-2.svg
new file mode 100644
index 0000000000..845d8fa43f
--- /dev/null
+++ b/packages/assets/icons/mouse-pointer-2.svg
@@ -0,0 +1,15 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-mouse-pointer-2"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
+</svg>
diff --git a/packages/assets/icons/move-up-right.svg b/packages/assets/icons/move-up-right.svg
new file mode 100644
index 0000000000..3be744cde8
--- /dev/null
+++ b/packages/assets/icons/move-up-right.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-move-up-right"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M13 5H19V11" />
+  <path d="M19 5L5 19" />
+</svg>
diff --git a/packages/assets/icons/square.svg b/packages/assets/icons/square.svg
new file mode 100644
index 0000000000..e9d10fde59
--- /dev/null
+++ b/packages/assets/icons/square.svg
@@ -0,0 +1,15 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-square"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+</svg>
diff --git a/packages/assets/icons/type.svg b/packages/assets/icons/type.svg
new file mode 100644
index 0000000000..80d24e78ec
--- /dev/null
+++ b/packages/assets/icons/type.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-type"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 4v16" />
+  <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" />
+  <path d="M9 20h6" />
+</svg>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 99d7a35c46..2ab8cc1f71 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -78,6 +78,7 @@
 		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
 		"flatpickr": "^4.6.13",
+		"fabric": "^7.4.0",
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",
diff --git a/packages/ui/src/components/base/buttons/CheckCircleButton.vue b/packages/ui/src/components/base/buttons/CheckCircleButton.vue
new file mode 100644
index 0000000000..ae5e0d85c2
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/CheckCircleButton.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { CheckIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import ButtonFrame from './ButtonFrame.vue'
+import type { ButtonNativeType } from './types'
+
+withDefaults(
+	defineProps<{
+		checked: boolean
+		disabled?: boolean
+		nativeType?: ButtonNativeType
+	}>(),
+	{
+		disabled: false,
+		nativeType: 'button',
+	},
+)
+
+const frame = ref<InstanceType<typeof ButtonFrame> | null>(null)
+const element = computed(() => frame.value?.element ?? null)
+
+defineExpose({ element })
+</script>
+
+<template>
+	<ButtonFrame
+		ref="frame"
+		as="button"
+		type="quiet"
+		size="lg"
+		interaction="none"
+		:disabled="disabled"
+		:native-type="nativeType"
+		role="radio"
+		:aria-checked="checked"
+		class="w-full !justify-between !gap-4 !whitespace-normal !border !border-solid !px-2 !text-left !transition-colors"
+		:class="
+			checked
+				? '!border-brand !bg-brand-highlight !text-contrast'
+				: '!border-transparent !bg-transparent !text-contrast enabled:hover:!bg-surface-3'
+		"
+	>
+		<span class="flex min-w-0 flex-1 items-center gap-2">
+			<slot />
+		</span>
+		<span
+			v-if="checked"
+			class="flex size-6 shrink-0 items-center justify-center rounded-full bg-brand text-brand-inverted"
+		>
+			<CheckIcon class="size-4" aria-hidden="true" />
+		</span>
+		<span v-else class="size-6 shrink-0 rounded-full border border-solid border-surface-5" />
+	</ButtonFrame>
+</template>
diff --git a/packages/ui/src/components/base/buttons/index.ts b/packages/ui/src/components/base/buttons/index.ts
index 89e774e749..de96110228 100644
--- a/packages/ui/src/components/base/buttons/index.ts
+++ b/packages/ui/src/components/base/buttons/index.ts
@@ -1,6 +1,7 @@
 export { default as Button } from './Button.vue'
 export { default as ButtonGroup } from './ButtonGroup.vue'
 export { default as ButtonLink } from './ButtonLink.vue'
+export { default as CheckCircleButton } from './CheckCircleButton.vue'
 export { default as ContextMenu } from './ContextMenu.vue'
 export { default as FileButton } from './FileButton.vue'
 export { default as IconButton } from './IconButton.vue'
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index ff2d5616e0..c789f4e7d8 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -13,6 +13,7 @@ export { default as BulletDivider } from './BulletDivider.vue'
 export { default as Button } from './buttons/Button.vue'
 export { default as ButtonGroup } from './buttons/ButtonGroup.vue'
 export { default as ButtonLink } from './buttons/ButtonLink.vue'
+export { default as CheckCircleButton } from './buttons/CheckCircleButton.vue'
 export { default as ContextMenu } from './buttons/ContextMenu.vue'
 export { default as FileButton } from './buttons/FileButton.vue'
 export { default as IconButton } from './buttons/IconButton.vue'
diff --git a/packages/ui/src/components/image-viewer-editor/controls.vue b/packages/ui/src/components/image-viewer-editor/controls.vue
new file mode 100644
index 0000000000..96527033a5
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/controls.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import {
+	RedoIcon,
+	SaveIcon,
+	TrashIcon,
+	UndoIcon,
+	XIcon,
+	ZoomInIcon,
+	ZoomOutIcon,
+} from '@modrinth/assets'
+import { computed } from 'vue'
+
+import Button from '#ui/components/base/buttons/Button.vue'
+import IconButton from '#ui/components/base/buttons/IconButton.vue'
+import SplitButton from '#ui/components/base/buttons/SplitButton.vue'
+import type { OverflowMenuOption } from '#ui/components/base/buttons/types'
+import Chips from '#ui/components/base/Chips.vue'
+import { useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { imageViewerEditorMessages as messages } from './image-viewer-editor-messages'
+import type { ScreenshotCensorMode, ScreenshotEraserMode } from './image-viewer-editor-types'
+import type { useImageEditor } from './use-image-editor'
+
+const props = defineProps<{
+	editor: ReturnType<typeof useImageEditor>
+	busy: boolean
+}>()
+
+const emit = defineEmits<{
+	cancel: []
+	save: [mode: 'create_copy' | 'replace_edit']
+}>()
+
+const { formatMessage } = useVIntl()
+const {
+	color,
+	strokeWidth,
+	fontSize,
+	censorMode,
+	eraserMode,
+	zoom,
+	isFit,
+	canUndo,
+	canRedo,
+	canDelete,
+	canZoomOut,
+	canZoomIn,
+	hasColorProperty,
+	propertyValueKind,
+	showCensorMode,
+	showEraserMode,
+	showCropControls,
+	cropWidth,
+	cropHeight,
+	canResetCrop,
+	updateColor,
+	updateStrokeWidth,
+	updateFontSize,
+	beginPropertyEdit,
+	commitPropertyEdit,
+	deleteSelection,
+	resetCrop,
+	undo,
+	redo,
+	setZoom,
+	setFit,
+} = props.editor
+
+const propertyValue = computed(() =>
+	propertyValueKind.value === 'size' ? fontSize.value : strokeWidth.value,
+)
+const propertyMin = computed(() => (propertyValueKind.value === 'size' ? 12 : 1))
+const propertyMax = computed(() => (propertyValueKind.value === 'size' ? 120 : 40))
+const propertyProgress = computed(
+	() => ((propertyValue.value - propertyMin.value) / (propertyMax.value - propertyMin.value)) * 100,
+)
+const hasPropertyControls = computed(
+	() =>
+		showCropControls.value ||
+		showEraserMode.value ||
+		showCensorMode.value ||
+		hasColorProperty.value ||
+		Boolean(propertyValueKind.value),
+)
+const censorModes: ScreenshotCensorMode[] = ['blur', 'solid']
+const eraserModes: ScreenshotEraserMode[] = ['element', 'area']
+const saveOptions = computed<OverflowMenuOption[]>(() => [
+	{
+		id: 'overwrite',
+		label: formatMessage(messages.overwrite),
+		icon: SaveIcon,
+		action: () => emit('save', 'replace_edit'),
+	},
+])
+
+function updatePropertyValue(nextValue: number) {
+	if (!Number.isFinite(nextValue)) return
+	const normalizedValue = Math.min(
+		propertyMax.value,
+		Math.max(propertyMin.value, Math.round(nextValue)),
+	)
+	if (propertyValueKind.value === 'size') updateFontSize(normalizedValue)
+	else updateStrokeWidth(normalizedValue)
+}
+
+function handlePropertyInput(event: Event) {
+	updatePropertyValue(Number((event.target as HTMLInputElement).value))
+}
+
+function handleColorInput(event: Event) {
+	updateColor((event.target as HTMLInputElement).value)
+}
+
+function formatCensorMode(value: ScreenshotCensorMode) {
+	return formatMessage(value === 'blur' ? messages.blur : messages.solid)
+}
+
+function formatEraserMode(value: ScreenshotEraserMode) {
+	return formatMessage(value === 'element' ? messages.element : messages.area)
+}
+</script>
+
+<template>
+	<div
+		class="absolute bottom-6 left-1/2 z-10 flex w-max max-w-[calc(100%_-_3rem)] -translate-x-1/2 items-center gap-2 rounded-[20px] border border-solid border-white/10 bg-surface-3 p-2 shadow-[0_1rem_3rem_rgb(0_0_0_/_32%)] max-[900px]:flex-wrap max-[900px]:justify-center"
+		@click.stop
+	>
+		<div v-if="hasPropertyControls" class="flex min-w-0 items-center gap-2">
+			<div v-if="showCropControls" class="flex items-center gap-2">
+				<span class="shrink-0 text-base font-semibold leading-5 tabular-nums text-white/60">
+					{{ formatMessage(messages.cropDimensions, { width: cropWidth, height: cropHeight }) }}
+				</span>
+				<Button type="quiet" :disabled="!canResetCrop" @click="resetCrop">
+					{{ formatMessage(messages.resetCrop) }}
+				</Button>
+			</div>
+			<Chips
+				v-if="showEraserMode"
+				v-model="eraserMode"
+				:items="eraserModes"
+				:format-label="formatEraserMode"
+				:aria-label="formatMessage(messages.eraserMode)"
+				size="small"
+				hide-checkmark-icon
+			/>
+			<Chips
+				v-if="showCensorMode"
+				v-model="censorMode"
+				:items="censorModes"
+				:format-label="formatCensorMode"
+				:aria-label="formatMessage(messages.censorMode)"
+				size="small"
+				hide-checkmark-icon
+			/>
+			<label
+				v-if="hasColorProperty"
+				v-tooltip="formatMessage(messages.colour)"
+				class="relative flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-xl transition-[filter,box-shadow] hover:brightness-125 focus-within:ring-4 focus-within:ring-brand-shadow"
+			>
+				<span
+					class="size-full rounded-xl border border-solid border-surface-5"
+					:style="{ backgroundColor: color }"
+				/>
+				<input
+					:value="color"
+					type="color"
+					:aria-label="formatMessage(messages.colour)"
+					class="absolute inset-0 cursor-pointer opacity-0"
+					@focus="beginPropertyEdit"
+					@pointerdown="beginPropertyEdit"
+					@input="handleColorInput"
+					@change="commitPropertyEdit"
+					@blur="commitPropertyEdit"
+				/>
+			</label>
+			<div
+				v-if="propertyValueKind"
+				class="flex w-52 min-w-0 items-center gap-2"
+				@focusin="beginPropertyEdit"
+				@pointerdown.capture="beginPropertyEdit"
+				@change.capture="commitPropertyEdit"
+				@focusout="commitPropertyEdit"
+			>
+				<span class="shrink-0 text-base font-semibold leading-5 text-white/60">
+					{{ formatMessage(propertyValueKind === 'size' ? messages.size : messages.width) }}
+				</span>
+				<input
+					type="range"
+					:value="propertyValue"
+					:min="propertyMin"
+					:max="propertyMax"
+					step="1"
+					:aria-label="formatMessage(propertyValueKind === 'size' ? messages.size : messages.width)"
+					class="editor-property-range min-w-0 flex-1"
+					:style="{ '--property-progress': `${propertyProgress}%` }"
+					@input="handlePropertyInput"
+				/>
+				<input
+					type="number"
+					:value="propertyValue"
+					:min="propertyMin"
+					:max="propertyMax"
+					step="1"
+					:aria-label="formatMessage(propertyValueKind === 'size' ? messages.size : messages.width)"
+					class="editor-property-value h-9 w-12 shrink-0 rounded-xl border border-solid border-surface-5 bg-surface-4 px-1 text-center text-base font-semibold leading-5 tabular-nums text-white outline-none focus:ring-4 focus:ring-brand-shadow"
+					@input="handlePropertyInput"
+				/>
+			</div>
+		</div>
+
+		<div v-if="hasPropertyControls" class="h-6 w-px bg-white/10" />
+		<div class="flex items-center gap-2">
+			<IconButton
+				v-if="canDelete"
+				v-tooltip="formatMessage(messages.deleteSelection)"
+				:label="formatMessage(messages.deleteSelection)"
+				type="quiet"
+				@click="deleteSelection"
+			>
+				<TrashIcon />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(messages.undo)"
+				:label="formatMessage(messages.undo)"
+				type="quiet"
+				:disabled="!canUndo"
+				@click="undo"
+			>
+				<UndoIcon />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(messages.redo)"
+				:label="formatMessage(messages.redo)"
+				type="quiet"
+				:disabled="!canRedo"
+				@click="redo"
+			>
+				<RedoIcon />
+			</IconButton>
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomOut)"
+				:label="formatMessage(messages.zoomOut)"
+				type="quiet"
+				:disabled="!canZoomOut"
+				@click="setZoom(zoom - 0.1)"
+			>
+				<ZoomOutIcon />
+			</IconButton>
+			<Button
+				v-tooltip="formatMessage(messages.fitToWorkspace)"
+				type="quiet"
+				class="w-16 px-2 tabular-nums text-white/60"
+				@click="setFit"
+			>
+				{{ isFit ? formatMessage(messages.fit) : `${Math.round(zoom * 100)}%` }}
+			</Button>
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomIn)"
+				:label="formatMessage(messages.zoomIn)"
+				type="quiet"
+				:disabled="!canZoomIn"
+				@click="setZoom(zoom + 0.1)"
+			>
+				<ZoomInIcon />
+			</IconButton>
+		</div>
+
+		<div class="h-6 w-px bg-white/10" />
+		<Button type="quiet" :disabled="busy" @click="emit('cancel')">
+			<XIcon aria-hidden="true" />
+			{{ formatMessage(commonMessages.cancelButton) }}
+		</Button>
+		<SplitButton
+			type="colored"
+			color="green"
+			:disabled="busy"
+			:options="saveOptions"
+			:menu-label="formatMessage(messages.moreSaveOptions)"
+			:group-label="formatMessage(messages.saveImage)"
+			@click="emit('save', 'create_copy')"
+		>
+			<SaveIcon aria-hidden="true" />
+			{{ formatMessage(messages.saveAsCopy) }}
+		</SplitButton>
+	</div>
+</template>
+
+<style scoped>
+.editor-property-range {
+	height: 1rem;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	background: transparent;
+	outline: none;
+	appearance: none;
+
+	&::-webkit-slider-runnable-track {
+		height: 0.25rem;
+		border-radius: 999px;
+		background: linear-gradient(
+			to right,
+			var(--color-brand) 0%,
+			var(--color-brand) var(--property-progress),
+			var(--surface-5) var(--property-progress),
+			var(--surface-5) 100%
+		);
+	}
+
+	&::-webkit-slider-thumb {
+		width: 0.875rem;
+		height: 0.875rem;
+		margin-top: -0.3125rem;
+		border: 2px solid var(--surface-1);
+		border-radius: 999px;
+		background: var(--color-brand);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
+		appearance: none;
+	}
+
+	&:focus-visible::-webkit-slider-thumb {
+		box-shadow: 0 0 0 0.25rem var(--color-brand-shadow);
+	}
+
+	&::-moz-range-track {
+		height: 0.25rem;
+		border-radius: 999px;
+		background: var(--surface-5);
+	}
+
+	&::-moz-range-progress {
+		height: 0.25rem;
+		border-radius: 999px;
+		background: var(--color-brand);
+	}
+
+	&::-moz-range-thumb {
+		width: 0.75rem;
+		height: 0.75rem;
+		border: 2px solid var(--surface-1);
+		border-radius: 999px;
+		background: var(--color-brand);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
+	}
+}
+
+.editor-property-value {
+	appearance: textfield;
+
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button {
+		margin: 0;
+		appearance: none;
+	}
+}
+</style>
diff --git a/packages/ui/src/components/image-viewer-editor/editor.vue b/packages/ui/src/components/image-viewer-editor/editor.vue
new file mode 100644
index 0000000000..19e793b016
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/editor.vue
@@ -0,0 +1,597 @@
+<script setup lang="ts">
+import {
+	EditIcon,
+	LeftArrowIcon,
+	RightArrowIcon,
+	XIcon,
+	ZoomInIcon,
+	ZoomOutIcon,
+} from '@modrinth/assets'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import Button from '#ui/components/base/buttons/Button.vue'
+import IconButton from '#ui/components/base/buttons/IconButton.vue'
+import { useVIntl } from '#ui/composables/i18n'
+import { injectNotificationManager } from '#ui/providers'
+
+import Controls from './controls.vue'
+import { imageViewerEditorMessages as messages } from './image-viewer-editor-messages'
+import type { ImageViewerEditorMode } from './image-viewer-editor-types'
+import Toolbar from './toolbar.vue'
+import type {
+	ImageViewerEditorData,
+	ImageViewerEditorItem,
+	ImageViewerEditorSavePayload,
+} from './types'
+import { useImageEditor } from './use-image-editor'
+
+const CLICK_ZOOM = 2
+const MAX_VIEW_ZOOM = 5
+const ZOOM_STEP = 1.25
+
+const props = defineProps<{
+	item: ImageViewerEditorItem
+	mode: ImageViewerEditorMode
+	index: number
+	count: number
+	canEdit: boolean
+	saving: boolean
+	loadData: (item: ImageViewerEditorItem) => Promise<ImageViewerEditorData>
+}>()
+
+const emit = defineEmits<{
+	cancel: []
+	close: []
+	edit: []
+	imageReady: []
+	next: []
+	previous: []
+	save: [payload: ImageViewerEditorSavePayload]
+}>()
+
+const canvasElement = ref<HTMLCanvasElement>()
+const viewport = ref<HTMLElement>()
+const fitBounds = ref<HTMLElement>()
+const exporting = ref(false)
+const discarding = ref(false)
+const loadingEditorData = ref(true)
+const spacePressed = ref(false)
+const panning = ref<{
+	x: number
+	y: number
+	scrollLeft: number
+	scrollTop: number
+	moved: boolean
+}>()
+const brushPointer = ref({ x: 0, y: 0, visible: false })
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const editor = useImageEditor()
+const {
+	loading,
+	tool,
+	color,
+	strokeWidth,
+	eraserMode,
+	zoom,
+	fitScale,
+	isFit,
+	canZoomIn,
+	initialize,
+	dispose,
+	setTool,
+	setInteractionEnabled,
+	discardChanges,
+	fitToViewport,
+	setZoom,
+	setFit,
+	exportPng,
+	handleKeyboardShortcut,
+	isTextEditing,
+	resetHistory,
+} = editor
+
+const busy = computed(
+	() =>
+		props.saving || exporting.value || discarding.value || loadingEditorData.value || loading.value,
+)
+const hasBrushPointer = computed(
+	() =>
+		props.mode === 'edit' &&
+		(tool.value === 'pen' ||
+			tool.value === 'highlight' ||
+			(tool.value === 'eraser' && eraserMode.value === 'area')),
+)
+const brushPointerSize = computed(() => Math.max(2, strokeWidth.value * zoom.value))
+const brushPointerColor = computed(() => (tool.value === 'eraser' ? '#ffffff' : color.value))
+const viewZoom = computed(() => zoom.value / Math.max(fitScale.value, Number.EPSILON))
+const viewZoomPercent = computed(() => Math.round(viewZoom.value * 100))
+const viewZoomed = computed(() => viewZoom.value > 1.001)
+const canViewZoomIn = computed(() => canZoomIn.value && viewZoom.value < MAX_VIEW_ZOOM)
+
+let resizeObserver: ResizeObserver | undefined
+let initializationGeneration = 0
+let initializationChain = Promise.resolve()
+let imageReadyFrame: number | undefined
+
+function queueInitialization() {
+	const generation = ++initializationGeneration
+	loadingEditorData.value = true
+	const editorDataPromise = props.loadData(props.item)
+	initializationChain = initializationChain.then(async () => {
+		if (generation !== initializationGeneration) return
+		let initialized = false
+		try {
+			const editorData = await editorDataPromise
+			if (generation !== initializationGeneration || !canvasElement.value) return
+			await initialize(canvasElement.value, editorData, getViewportSize())
+			if (generation !== initializationGeneration) return
+			setInteractionEnabled(props.mode === 'edit')
+			observeViewport()
+			initialized = true
+		} catch (error) {
+			if (generation !== initializationGeneration) return
+			handleError(error)
+			emit('close')
+		} finally {
+			if (generation === initializationGeneration) {
+				loadingEditorData.value = false
+				if (initialized) notifyImageReady()
+			}
+		}
+	})
+}
+
+function notifyImageReady() {
+	if (imageReadyFrame !== undefined) cancelAnimationFrame(imageReadyFrame)
+	imageReadyFrame = requestAnimationFrame(() => {
+		imageReadyFrame = undefined
+		emit('imageReady')
+	})
+}
+
+function observeViewport() {
+	resizeObserver?.disconnect()
+	if (!viewport.value || !fitBounds.value) return
+	resizeObserver = new ResizeObserver(fitEditorToViewport)
+	resizeObserver.observe(viewport.value)
+	resizeObserver.observe(fitBounds.value)
+	fitEditorToViewport()
+}
+
+function fitEditorToViewport() {
+	const viewportSize = getViewportSize()
+	if (!viewportSize) return
+	fitToViewport(viewportSize.width, viewportSize.height)
+	if (isFit.value) centerViewport()
+	else notifyImageReady()
+}
+
+function getViewportSize() {
+	if (!fitBounds.value) return undefined
+	return {
+		width: fitBounds.value.clientWidth,
+		height: fitBounds.value.clientHeight,
+	}
+}
+
+function centerViewport() {
+	requestAnimationFrame(() => {
+		if (!viewport.value) return
+		viewport.value.scrollLeft = Math.max(
+			0,
+			(viewport.value.scrollWidth - viewport.value.clientWidth) / 2,
+		)
+		viewport.value.scrollTop = Math.max(
+			0,
+			(viewport.value.scrollHeight - viewport.value.clientHeight) / 2,
+		)
+		notifyImageReady()
+	})
+}
+
+function getTextContrast(target: HTMLElement): 'dark' | 'light' {
+	const renderedCanvas = viewport.value?.querySelector<HTMLCanvasElement>('canvas.lower-canvas')
+	const context = renderedCanvas?.getContext('2d', { willReadFrequently: true })
+	if (!renderedCanvas || !context) return 'light'
+
+	const targetBounds = target.getBoundingClientRect()
+	const canvasBounds = renderedCanvas.getBoundingClientRect()
+	const intersection = {
+		left: Math.max(targetBounds.left, canvasBounds.left),
+		top: Math.max(targetBounds.top, canvasBounds.top),
+		right: Math.min(targetBounds.right, canvasBounds.right),
+		bottom: Math.min(targetBounds.bottom, canvasBounds.bottom),
+	}
+	if (intersection.right <= intersection.left || intersection.bottom <= intersection.top)
+		return 'light'
+
+	const scaleX = renderedCanvas.width / canvasBounds.width
+	const scaleY = renderedCanvas.height / canvasBounds.height
+	const sourceX = Math.max(0, Math.floor((intersection.left - canvasBounds.left) * scaleX))
+	const sourceY = Math.max(0, Math.floor((intersection.top - canvasBounds.top) * scaleY))
+	const sourceWidth = Math.min(
+		renderedCanvas.width - sourceX,
+		Math.max(1, Math.ceil((intersection.right - intersection.left) * scaleX)),
+	)
+	const sourceHeight = Math.min(
+		renderedCanvas.height - sourceY,
+		Math.max(1, Math.ceil((intersection.bottom - intersection.top) * scaleY)),
+	)
+
+	try {
+		const pixels = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight).data
+		const sampleStride = Math.max(1, Math.floor(Math.sqrt((sourceWidth * sourceHeight) / 4096)))
+		let luminanceTotal = 0
+		let sampleCount = 0
+		for (let y = 0; y < sourceHeight; y += sampleStride) {
+			for (let x = 0; x < sourceWidth; x += sampleStride) {
+				const offset = (y * sourceWidth + x) * 4
+				const red = srgbToLinear(pixels[offset] / 255)
+				const green = srgbToLinear(pixels[offset + 1] / 255)
+				const blue = srgbToLinear(pixels[offset + 2] / 255)
+				const alpha = pixels[offset + 3] / 255
+				luminanceTotal += (0.2126 * red + 0.7152 * green + 0.0722 * blue) * alpha
+				sampleCount++
+			}
+		}
+
+		const targetArea = targetBounds.width * targetBounds.height
+		const intersectionArea =
+			(intersection.right - intersection.left) * (intersection.bottom - intersection.top)
+		const coverage = targetArea > 0 ? intersectionArea / targetArea : 0
+		if (coverage < 0.9) return 'light'
+		const averageLuminance = sampleCount > 0 ? luminanceTotal / sampleCount : 0
+		return averageLuminance > 0.179 ? 'dark' : 'light'
+	} catch {
+		return 'light'
+	}
+}
+
+function srgbToLinear(value: number) {
+	return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
+}
+
+function resetView() {
+	setFit()
+	centerViewport()
+}
+
+function setViewZoom(nextZoom: number) {
+	if (nextZoom <= 1.001) {
+		resetView()
+		return
+	}
+	setZoom(fitScale.value * Math.min(MAX_VIEW_ZOOM, nextZoom))
+	centerViewport()
+}
+
+async function requestSave(mode: 'create_copy' | 'replace_edit') {
+	if (busy.value) return
+	exporting.value = true
+	try {
+		emit('save', {
+			item: props.item,
+			pngBytes: await exportPng(),
+			mode,
+		})
+	} catch (error) {
+		handleError(error)
+	} finally {
+		exporting.value = false
+	}
+}
+
+async function cancel() {
+	if (busy.value) return
+	discarding.value = true
+	try {
+		await discardChanges()
+		emit('cancel')
+	} catch (error) {
+		handleError(error)
+	} finally {
+		discarding.value = false
+	}
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (props.mode !== 'edit' || document.querySelector('.modal-root')) return
+	if (handleKeyboardShortcut(event)) return
+	if (event.code === 'Space' && !isTextEditing() && !isTypingTarget(event.target)) {
+		spacePressed.value = true
+	}
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		void cancel()
+	}
+}
+
+function handleKeyup(event: KeyboardEvent) {
+	if (event.code === 'Space') spacePressed.value = false
+}
+
+function handleEditMenuUndo(event: Event) {
+	if (props.mode !== 'edit' || isTextEditing() || isTypingTarget(document.activeElement)) return
+	event.preventDefault()
+	void editor.undo()
+}
+
+function handleEditMenuRedo(event: Event) {
+	if (props.mode !== 'edit' || isTextEditing() || isTypingTarget(document.activeElement)) return
+	event.preventDefault()
+	void editor.redo()
+}
+
+function handlePointerDown(event: PointerEvent) {
+	if (!viewport.value) return
+	const target = event.target
+	if (props.mode === 'view' && event.button === 0 && target === event.currentTarget) {
+		emit('close')
+		return
+	}
+	const isCanvasTarget = target instanceof Element && Boolean(target.closest('.editor-canvas'))
+	const isViewPan = props.mode === 'view' && event.button === 0 && isCanvasTarget
+	const isEditPan =
+		props.mode === 'edit' && (event.button === 1 || (event.button === 0 && spacePressed.value))
+	if (!isViewPan && !isEditPan) return
+	event.preventDefault()
+	event.stopPropagation()
+	panning.value = {
+		x: event.clientX,
+		y: event.clientY,
+		scrollLeft: viewport.value.scrollLeft,
+		scrollTop: viewport.value.scrollTop,
+		moved: false,
+	}
+	viewport.value.setPointerCapture(event.pointerId)
+}
+
+function movePan(event: PointerEvent) {
+	if (!viewport.value || !panning.value) return
+	const deltaX = event.clientX - panning.value.x
+	const deltaY = event.clientY - panning.value.y
+	if (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2) panning.value.moved = true
+	viewport.value.scrollLeft = panning.value.scrollLeft - deltaX
+	viewport.value.scrollTop = panning.value.scrollTop - deltaY
+}
+
+function stopPan() {
+	const pan = panning.value
+	panning.value = undefined
+	if (!pan || props.mode !== 'view') return
+	if (pan.moved) {
+		notifyImageReady()
+		return
+	}
+	if (viewZoomed.value) resetView()
+	else setViewZoom(CLICK_ZOOM)
+}
+
+function updateBrushPointer(event: PointerEvent) {
+	if (!hasBrushPointer.value || panning.value) {
+		brushPointer.value.visible = false
+		return
+	}
+	const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect()
+	brushPointer.value = {
+		x: event.clientX - bounds.left,
+		y: event.clientY - bounds.top,
+		visible: true,
+	}
+}
+
+function handleWheel(event: WheelEvent) {
+	if (props.mode === 'view') {
+		event.preventDefault()
+		setViewZoom(viewZoom.value * (event.deltaY < 0 ? 1.1 : 1 / 1.1))
+		return
+	}
+	if (!event.ctrlKey && !event.metaKey) return
+	event.preventDefault()
+	setZoom(zoom.value + (event.deltaY < 0 ? 0.1 : -0.1))
+}
+
+function isTypingTarget(target: EventTarget | null) {
+	return (
+		target instanceof HTMLInputElement ||
+		target instanceof HTMLTextAreaElement ||
+		target instanceof HTMLSelectElement ||
+		(target instanceof HTMLElement && target.isContentEditable)
+	)
+}
+
+function markSaved() {
+	resetHistory()
+}
+
+watch(() => [props.item.id, props.item.src], queueInitialization)
+watch(
+	() => props.mode,
+	(mode) => {
+		spacePressed.value = false
+		panning.value = undefined
+		brushPointer.value.visible = false
+		setInteractionEnabled(mode === 'edit')
+	},
+)
+
+onMounted(async () => {
+	document.addEventListener('keydown', handleKeydown)
+	document.addEventListener('keyup', handleKeyup)
+	document.addEventListener('edit-menu:undo', handleEditMenuUndo)
+	document.addEventListener('edit-menu:redo', handleEditMenuRedo)
+	await nextTick()
+	queueInitialization()
+})
+
+onBeforeUnmount(() => {
+	initializationGeneration++
+	if (imageReadyFrame !== undefined) cancelAnimationFrame(imageReadyFrame)
+	document.removeEventListener('keydown', handleKeydown)
+	document.removeEventListener('keyup', handleKeyup)
+	document.removeEventListener('edit-menu:undo', handleEditMenuUndo)
+	document.removeEventListener('edit-menu:redo', handleEditMenuRedo)
+	resizeObserver?.disconnect()
+	void dispose()
+})
+
+defineExpose({ getTextContrast, markSaved })
+</script>
+
+<template>
+	<div
+		ref="viewport"
+		class="editor-viewport absolute inset-0 flex min-h-0 min-w-0 select-none overflow-auto px-6 pb-[5.75rem] pt-[4.75rem] max-[900px]:px-4 max-[900px]:pb-[8.5rem] max-[900px]:pt-[4.5rem]"
+		:class="{
+			'is-view': mode === 'view',
+			'is-view-zoomed': mode === 'view' && viewZoomed,
+			'is-panning': panning,
+			'is-pan-ready': mode === 'edit' && spacePressed && !panning,
+		}"
+		@pointerdown.capture="handlePointerDown"
+		@pointermove="movePan"
+		@pointerup="stopPan"
+		@pointercancel="panning = undefined"
+		@wheel="handleWheel"
+	>
+		<img
+			v-if="mode === 'view' && loadingEditorData"
+			:src="item.src"
+			:alt="item.alt"
+			class="pointer-events-none relative z-[2] m-auto block max-h-full max-w-full shrink-0 object-contain"
+			draggable="false"
+		/>
+		<div
+			v-show="!loadingEditorData"
+			class="editor-canvas relative z-[2] m-auto shrink-0"
+			@pointerenter="updateBrushPointer"
+			@pointermove="updateBrushPointer"
+			@pointerleave="brushPointer.visible = false"
+		>
+			<canvas ref="canvasElement" :aria-label="item.alt" role="img" />
+			<div
+				v-if="hasBrushPointer && brushPointer.visible"
+				class="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border border-solid shadow-[0_0_0_1px_rgb(0_0_0_/_80%),inset_0_0_0_1px_rgb(255_255_255_/_35%)]"
+				:style="{
+					left: `${brushPointer.x}px`,
+					top: `${brushPointer.y}px`,
+					width: `${brushPointerSize}px`,
+					height: `${brushPointerSize}px`,
+					borderColor: brushPointerColor,
+				}"
+			>
+				<div
+					v-if="tool !== 'eraser'"
+					class="absolute inset-0 rounded-full opacity-[0.15]"
+					:style="{ backgroundColor: color }"
+				/>
+			</div>
+		</div>
+	</div>
+	<div
+		ref="fitBounds"
+		class="pointer-events-none absolute inset-x-6 bottom-[5.75rem] top-[4.75rem] z-[3] flex items-center justify-center max-[900px]:inset-x-4 max-[900px]:bottom-[8.5rem] max-[900px]:top-[4.5rem]"
+		aria-hidden="true"
+	/>
+
+	<template v-if="mode === 'edit'">
+		<Toolbar :tool="tool" @select="setTool" />
+		<Controls :editor="editor" :busy="busy" @cancel="cancel" @save="requestSave" />
+	</template>
+	<div
+		v-else
+		class="absolute bottom-6 left-1/2 z-10 flex max-w-[calc(100%_-_3rem)] -translate-x-1/2 items-center gap-2 rounded-[20px] border border-solid border-white/10 bg-surface-3 p-2 shadow-[0_1rem_3rem_rgb(0_0_0_/_32%)]"
+		@click.stop
+	>
+		<div v-if="count > 1" class="flex items-center gap-2">
+			<IconButton :label="formatMessage(messages.previous)" type="quiet" @click="emit('previous')">
+				<LeftArrowIcon aria-hidden="true" />
+			</IconButton>
+			<span
+				class="flex min-w-14 justify-center gap-1 text-base font-semibold leading-5 tabular-nums text-white/50"
+				aria-live="polite"
+			>
+				<strong class="font-semibold text-white">{{ index + 1 }}</strong>
+				<span>/ {{ count }}</span>
+			</span>
+			<IconButton :label="formatMessage(messages.next)" type="quiet" @click="emit('next')">
+				<RightArrowIcon aria-hidden="true" />
+			</IconButton>
+		</div>
+		<div v-if="count > 1" class="h-6 w-px bg-white/10" />
+		<div class="flex items-center gap-2">
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomOut)"
+				:label="formatMessage(messages.zoomOut)"
+				type="quiet"
+				:disabled="!viewZoomed"
+				@click="setViewZoom(viewZoom / ZOOM_STEP)"
+			>
+				<ZoomOutIcon aria-hidden="true" />
+			</IconButton>
+			<Button
+				v-tooltip="formatMessage(messages.fitToWorkspace)"
+				type="quiet"
+				class="w-16 px-2 tabular-nums text-white/60"
+				@click="resetView"
+			>
+				{{ viewZoomPercent }}%
+			</Button>
+			<IconButton
+				v-tooltip="formatMessage(messages.zoomIn)"
+				:label="formatMessage(messages.zoomIn)"
+				type="quiet"
+				:disabled="!canViewZoomIn"
+				@click="setViewZoom(viewZoom * ZOOM_STEP)"
+			>
+				<ZoomInIcon aria-hidden="true" />
+			</IconButton>
+		</div>
+		<div class="h-6 w-px bg-white/10" />
+		<IconButton
+			v-if="canEdit"
+			v-tooltip="formatMessage(messages.edit)"
+			:label="formatMessage(messages.edit)"
+			type="quiet"
+			@click="emit('edit')"
+		>
+			<EditIcon aria-hidden="true" />
+		</IconButton>
+		<div class="flex items-center gap-2">
+			<slot name="actions" />
+		</div>
+		<div class="h-6 w-px bg-white/10" />
+		<IconButton :label="formatMessage(messages.close)" type="quiet" @click="emit('close')">
+			<XIcon aria-hidden="true" />
+		</IconButton>
+	</div>
+</template>
+
+<style scoped>
+.editor-viewport {
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.editor-canvas :deep(.canvas-container) {
+	flex: none;
+	box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
+}
+
+.editor-viewport.is-view :deep(.upper-canvas) {
+	cursor: zoom-in !important;
+}
+
+.editor-viewport.is-view-zoomed :deep(.upper-canvas),
+.editor-viewport.is-pan-ready :deep(.upper-canvas) {
+	cursor: grab !important;
+}
+
+.editor-viewport.is-panning :deep(.upper-canvas) {
+	cursor: grabbing !important;
+}
+</style>
diff --git a/packages/ui/src/components/image-viewer-editor/image-viewer-editor-censor-object.ts b/packages/ui/src/components/image-viewer-editor/image-viewer-editor-censor-object.ts
new file mode 100644
index 0000000000..b97008f61e
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/image-viewer-editor-censor-object.ts
@@ -0,0 +1,136 @@
+import type { ScreenshotCensorMode, ScreenshotEditorSourceRect } from './image-viewer-editor-types'
+
+const BLUR_DOWNSAMPLE = 0.25
+const BLUR_SIGMA = 12
+const BLUR_RADIUS = Math.ceil(BLUR_SIGMA * 3)
+const BLUR_KERNEL = createGaussianKernel()
+
+type CensorTransform = readonly [number, number, number, number, number, number]
+
+export function renderCensorRegion(
+	source: CanvasImageSource,
+	sourceRect: ScreenshotEditorSourceRect,
+	mode: ScreenshotCensorMode,
+	solidColor: string,
+	transform?: CensorTransform,
+) {
+	const width = Math.max(1, Math.round(sourceRect.width))
+	const height = Math.max(1, Math.round(sourceRect.height))
+	const output = document.createElement('canvas')
+	output.width = width
+	output.height = height
+	const outputContext = output.getContext('2d')
+	if (!outputContext) throw new Error('Could not create censor canvas')
+
+	if (mode === 'solid') {
+		outputContext.fillStyle = solidColor
+		outputContext.fillRect(0, 0, width, height)
+		return output
+	}
+
+	const sampleWidth = Math.max(1, Math.round(width * BLUR_DOWNSAMPLE))
+	const sampleHeight = Math.max(1, Math.round(height * BLUR_DOWNSAMPLE))
+	const sample = document.createElement('canvas')
+	sample.width = sampleWidth
+	sample.height = sampleHeight
+	const sampleContext = sample.getContext('2d')
+	if (!sampleContext) throw new Error('Could not create blur canvas')
+
+	if (transform) {
+		const inverse = invertTransform(transform)
+		const scaleX = sampleWidth / width
+		const scaleY = sampleHeight / height
+		sampleContext.setTransform(
+			inverse[0] * scaleX,
+			inverse[1] * scaleY,
+			inverse[2] * scaleX,
+			inverse[3] * scaleY,
+			(inverse[4] + width / 2) * scaleX,
+			(inverse[5] + height / 2) * scaleY,
+		)
+		sampleContext.drawImage(source, 0, 0)
+		sampleContext.resetTransform()
+	} else {
+		sampleContext.drawImage(
+			source,
+			sourceRect.left,
+			sourceRect.top,
+			sourceRect.width,
+			sourceRect.height,
+			0,
+			0,
+			sampleWidth,
+			sampleHeight,
+		)
+	}
+	const blurredPixels = gaussianBlur(
+		sampleContext.getImageData(0, 0, sampleWidth, sampleHeight),
+		sampleWidth,
+		sampleHeight,
+	)
+	sampleContext.putImageData(blurredPixels, 0, 0)
+	outputContext.imageSmoothingEnabled = true
+	outputContext.imageSmoothingQuality = 'high'
+	outputContext.drawImage(sample, 0, 0, sampleWidth, sampleHeight, 0, 0, width, height)
+	return output
+}
+
+function invertTransform(transform: CensorTransform): CensorTransform {
+	const [a, b, c, d, e, f] = transform
+	const determinant = a * d - b * c
+	if (Math.abs(determinant) < Number.EPSILON) return [1, 0, 0, 1, 0, 0]
+	return [
+		d / determinant,
+		-b / determinant,
+		-c / determinant,
+		a / determinant,
+		(c * f - d * e) / determinant,
+		(b * e - a * f) / determinant,
+	]
+}
+
+function createGaussianKernel() {
+	const kernel = new Float32Array(BLUR_RADIUS * 2 + 1)
+	let total = 0
+	for (let index = -BLUR_RADIUS; index <= BLUR_RADIUS; index++) {
+		const weight = Math.exp(-(index * index) / (2 * BLUR_SIGMA * BLUR_SIGMA))
+		kernel[index + BLUR_RADIUS] = weight
+		total += weight
+	}
+	for (let index = 0; index < kernel.length; index++) kernel[index] /= total
+	return kernel
+}
+
+function gaussianBlur(imageData: ImageData, width: number, height: number) {
+	const horizontal = new Float32Array(imageData.data.length)
+	const output = new ImageData(width, height)
+
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			for (let offset = -BLUR_RADIUS; offset <= BLUR_RADIUS; offset++) {
+				const sampleX = Math.max(0, Math.min(width - 1, x + offset))
+				const sourceIndex = (y * width + sampleX) * 4
+				const weight = BLUR_KERNEL[offset + BLUR_RADIUS]!
+				for (let channel = 0; channel < 4; channel++) {
+					horizontal[(y * width + x) * 4 + channel] +=
+						imageData.data[sourceIndex + channel]! * weight
+				}
+			}
+		}
+	}
+
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			for (let offset = -BLUR_RADIUS; offset <= BLUR_RADIUS; offset++) {
+				const sampleY = Math.max(0, Math.min(height - 1, y + offset))
+				const sourceIndex = (sampleY * width + x) * 4
+				const weight = BLUR_KERNEL[offset + BLUR_RADIUS]!
+				for (let channel = 0; channel < 4; channel++) {
+					output.data[(y * width + x) * 4 + channel] += horizontal[sourceIndex + channel]! * weight
+				}
+			}
+		}
+	}
+
+	return output
+}
diff --git a/packages/ui/src/components/image-viewer-editor/image-viewer-editor-messages.ts b/packages/ui/src/components/image-viewer-editor/image-viewer-editor-messages.ts
new file mode 100644
index 0000000000..711476b37d
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/image-viewer-editor-messages.ts
@@ -0,0 +1,56 @@
+import { defineMessages } from '#ui/composables/i18n'
+
+export const imageViewerEditorMessages = defineMessages({
+	close: { id: 'image-viewer.close', defaultMessage: 'Close' },
+	previous: { id: 'image-viewer.previous', defaultMessage: 'Previous image' },
+	next: { id: 'image-viewer.next', defaultMessage: 'Next image' },
+	edit: { id: 'image-viewer.edit', defaultMessage: 'Edit' },
+	saveAsCopy: { id: 'image-viewer.editor.save-as-new', defaultMessage: 'Save copy' },
+	overwrite: { id: 'image-viewer.editor.overwrite', defaultMessage: 'Overwrite' },
+	moreSaveOptions: {
+		id: 'image-viewer.editor.more-save-options',
+		defaultMessage: 'More save options',
+	},
+	saveImage: { id: 'image-viewer.editor.save-image', defaultMessage: 'Save image' },
+	select: { id: 'image-viewer.editor.tool.select', defaultMessage: 'Select' },
+	pen: { id: 'image-viewer.editor.tool.pen', defaultMessage: 'Pen' },
+	highlight: { id: 'image-viewer.editor.tool.highlight', defaultMessage: 'Highlight' },
+	eraser: { id: 'image-viewer.editor.tool.eraser', defaultMessage: 'Eraser' },
+	crop: { id: 'image-viewer.editor.tool.crop', defaultMessage: 'Crop' },
+	text: { id: 'image-viewer.editor.tool.text', defaultMessage: 'Text' },
+	arrow: { id: 'image-viewer.editor.tool.arrow', defaultMessage: 'Arrow' },
+	rectangle: { id: 'image-viewer.editor.tool.rectangle', defaultMessage: 'Rectangle' },
+	ellipse: { id: 'image-viewer.editor.tool.ellipse', defaultMessage: 'Ellipse' },
+	censor: { id: 'image-viewer.editor.tool.censor', defaultMessage: 'Censor' },
+	blur: { id: 'image-viewer.editor.censor.blur', defaultMessage: 'Blur' },
+	solid: { id: 'image-viewer.editor.censor.solid', defaultMessage: 'Solid' },
+	censorMode: { id: 'image-viewer.editor.censor.mode', defaultMessage: 'Censor type' },
+	eraserMode: { id: 'image-viewer.editor.eraser.mode', defaultMessage: 'Eraser mode' },
+	element: { id: 'image-viewer.editor.eraser.element', defaultMessage: 'Element' },
+	area: { id: 'image-viewer.editor.eraser.area', defaultMessage: 'Area' },
+	cropDimensions: {
+		id: 'image-viewer.editor.crop.dimensions',
+		defaultMessage: '{width} × {height} px',
+	},
+	resetCrop: { id: 'image-viewer.editor.crop.reset', defaultMessage: 'Reset crop' },
+	colour: { id: 'image-viewer.editor.colour', defaultMessage: 'Colour' },
+	width: { id: 'image-viewer.editor.width', defaultMessage: 'Width' },
+	size: { id: 'image-viewer.editor.size', defaultMessage: 'Size' },
+	undo: { id: 'image-viewer.editor.undo', defaultMessage: 'Undo' },
+	redo: { id: 'image-viewer.editor.redo', defaultMessage: 'Redo' },
+	deleteSelection: {
+		id: 'image-viewer.editor.delete-selection',
+		defaultMessage: 'Delete selected annotation',
+	},
+	zoomIn: { id: 'image-viewer.editor.zoom-in', defaultMessage: 'Zoom in' },
+	zoomOut: { id: 'image-viewer.editor.zoom-out', defaultMessage: 'Zoom out' },
+	fit: { id: 'image-viewer.editor.zoom-fit', defaultMessage: 'Fit' },
+	fitToWorkspace: {
+		id: 'image-viewer.editor.zoom-fit-workspace',
+		defaultMessage: 'Fit to workspace',
+	},
+	annotationTools: {
+		id: 'image-viewer.editor.image-editing-tools',
+		defaultMessage: 'Image editing tools',
+	},
+})
diff --git a/packages/ui/src/components/image-viewer-editor/image-viewer-editor-types.ts b/packages/ui/src/components/image-viewer-editor/image-viewer-editor-types.ts
new file mode 100644
index 0000000000..b5b4fcbb0b
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/image-viewer-editor-types.ts
@@ -0,0 +1,52 @@
+export type ImageViewerEditorMode = 'view' | 'edit'
+
+export type ScreenshotEditorTool =
+	| 'select'
+	| 'pen'
+	| 'highlight'
+	| 'eraser'
+	| 'crop'
+	| 'text'
+	| 'arrow'
+	| 'rectangle'
+	| 'ellipse'
+	| 'censor'
+
+export type ScreenshotCensorMode = 'blur' | 'solid'
+
+export type ScreenshotEraserMode = 'element' | 'area'
+
+export type ScreenshotEditorObjectKind =
+	| 'annotation'
+	| 'arrow'
+	| 'background'
+	| 'censor'
+	| 'ellipse'
+	| 'highlight'
+	| 'pen'
+	| 'rectangle'
+	| 'text'
+
+export type ScreenshotEditorPropertyKind = Exclude<
+	ScreenshotEditorObjectKind,
+	'annotation' | 'background'
+>
+
+export type ScreenshotEditorSourceRect = {
+	left: number
+	top: number
+	width: number
+	height: number
+}
+
+export type ScreenshotEditorObjectState = Record<string, unknown> & {
+	editorKind?: ScreenshotEditorObjectKind
+	sourceRect?: ScreenshotEditorSourceRect
+	censorMode?: ScreenshotCensorMode
+	censorColor?: string
+}
+
+export type EditorHistoryEntry = {
+	objects: ScreenshotEditorObjectState[]
+	crop: ScreenshotEditorSourceRect
+}
diff --git a/packages/ui/src/components/image-viewer-editor/index.vue b/packages/ui/src/components/image-viewer-editor/index.vue
new file mode 100644
index 0000000000..9e257ac1b0
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/index.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { injectImageViewerEditor } from '#ui/providers/image-viewer-editor'
+
+import Editor from './editor.vue'
+import type { ImageViewerEditorMode } from './image-viewer-editor-types'
+import type {
+	ImageViewerEditorData,
+	ImageViewerEditorItem,
+	ImageViewerEditorSavePayload,
+} from './types'
+
+const MAX_CACHED_ITEMS = 5
+
+const props = withDefaults(
+	defineProps<{
+		items: ImageViewerEditorItem[]
+		editor?: 'enabled' | 'disabled'
+		saving?: boolean
+	}>(),
+	{
+		editor: 'disabled',
+		saving: false,
+	},
+)
+
+const emit = defineEmits<{
+	show: [item: ImageViewerEditorItem, index: number]
+	hide: []
+	navigate: [item: ImageViewerEditorItem, index: number, direction: 'next' | 'previous']
+	save: [payload: ImageViewerEditorSavePayload]
+}>()
+
+const activeId = ref<string | null>(null)
+const mode = ref<ImageViewerEditorMode>('view')
+const titleContrast = ref<'dark' | 'light'>('light')
+const descriptionContrast = ref<'dark' | 'light'>('light')
+const closeAfterEditing = ref(false)
+const editorComponent = ref<InstanceType<typeof Editor>>()
+const titleElement = ref<HTMLElement>()
+const descriptionElement = ref<HTMLElement>()
+const context = injectImageViewerEditor(null)
+const itemDataCache = new Map<string, Promise<ImageViewerEditorData>>()
+const itemImageCache = new Map<string, HTMLImageElement>()
+let headingContrastTimer: ReturnType<typeof setTimeout> | undefined
+
+const activeIndex = computed(() => props.items.findIndex((item) => item.id === activeId.value))
+const activeItem = computed(() => props.items[activeIndex.value] ?? null)
+const canEdit = computed(
+	() =>
+		props.editor === 'enabled' &&
+		Boolean(context?.loadEditorData) &&
+		Boolean(activeItem.value?.editorSource),
+)
+
+watch(activeItem, (item) => {
+	if (!item && activeId.value !== null) hide()
+})
+
+function getItemCacheKey(item: ImageViewerEditorItem) {
+	return [item.id, item.src, item.editorSource?.id, item.editorSource?.path].join('\0')
+}
+
+function loadItemData(item: ImageViewerEditorItem): Promise<ImageViewerEditorData> {
+	const key = getItemCacheKey(item)
+	const cached = itemDataCache.get(key)
+	if (cached) {
+		itemDataCache.delete(key)
+		itemDataCache.set(key, cached)
+		return cached
+	}
+
+	const promise = (async () => {
+		if (item.editorSource && context) return await context.loadEditorData(item.editorSource)
+		const response = await fetch(item.src)
+		if (!response.ok) throw new Error(`Could not load image: ${response.statusText}`)
+		return { source: await response.blob() }
+	})()
+
+	itemDataCache.set(key, promise)
+	while (itemDataCache.size > MAX_CACHED_ITEMS) {
+		const oldestKey = itemDataCache.keys().next().value
+		if (oldestKey === undefined) break
+		itemDataCache.delete(oldestKey)
+	}
+	void promise.catch(() => {
+		if (itemDataCache.get(key) === promise) itemDataCache.delete(key)
+	})
+	return promise
+}
+
+function preloadItemImage(item: ImageViewerEditorItem) {
+	const key = getItemCacheKey(item)
+	const cached = itemImageCache.get(key)
+	if (cached) {
+		itemImageCache.delete(key)
+		itemImageCache.set(key, cached)
+		return
+	}
+
+	const image = new Image()
+	image.src = item.src
+	itemImageCache.set(key, image)
+	while (itemImageCache.size > MAX_CACHED_ITEMS) {
+		const oldestKey = itemImageCache.keys().next().value
+		if (oldestKey === undefined) break
+		itemImageCache.delete(oldestKey)
+	}
+	void image.decode().catch(() => undefined)
+}
+
+function preloadItemsAround(index: number) {
+	if (!props.items.length) return
+	const indexes = new Set([
+		index,
+		(index - 1 + props.items.length) % props.items.length,
+		(index + 1) % props.items.length,
+	])
+	for (const itemIndex of indexes) {
+		const item = props.items[itemIndex]
+		if (item) {
+			preloadItemImage(item)
+			void loadItemData(item).catch(() => undefined)
+		}
+	}
+}
+
+function show(index: number) {
+	const item = props.items[index]
+	if (!item) return
+	cancelHeadingContrastUpdate()
+	preloadItemsAround(index)
+	if (activeId.value === null) {
+		titleContrast.value = 'light'
+		descriptionContrast.value = 'light'
+		context?.onShow?.()
+	}
+	activeId.value = item.id
+	mode.value = 'view'
+	closeAfterEditing.value = false
+	emit('show', item, index)
+}
+
+async function edit(index: number) {
+	show(index)
+	await beginEditing(true)
+}
+
+async function beginEditing(closeOnCancel = false) {
+	if (!canEdit.value || props.saving) return
+	closeAfterEditing.value = closeOnCancel
+	mode.value = 'edit'
+	await nextTick()
+}
+
+function finishEditing() {
+	if (props.saving) return
+	if (closeAfterEditing.value) {
+		hide()
+	} else {
+		mode.value = 'view'
+	}
+}
+
+function hide() {
+	if (activeId.value === null || props.saving) return
+	cancelHeadingContrastUpdate()
+	activeId.value = null
+	mode.value = 'view'
+	closeAfterEditing.value = false
+	itemDataCache.clear()
+	itemImageCache.clear()
+	context?.onHide?.()
+	emit('hide')
+}
+
+function navigate(offset: number, direction: 'next' | 'previous') {
+	if (mode.value !== 'view' || props.items.length < 2) return
+	cancelHeadingContrastUpdate()
+	const index = (activeIndex.value + offset + props.items.length) % props.items.length
+	preloadItemsAround(index)
+	activeId.value = props.items[index].id
+	emit('navigate', props.items[index], index, direction)
+}
+
+function updateHeadingContrast() {
+	cancelHeadingContrastUpdate()
+	headingContrastTimer = setTimeout(() => {
+		headingContrastTimer = undefined
+		if (titleElement.value) {
+			titleContrast.value = editorComponent.value?.getTextContrast(titleElement.value) ?? 'light'
+		}
+		if (descriptionElement.value) {
+			descriptionContrast.value =
+				editorComponent.value?.getTextContrast(descriptionElement.value) ?? 'light'
+		}
+	}, 120)
+}
+
+function cancelHeadingContrastUpdate() {
+	if (headingContrastTimer === undefined) return
+	clearTimeout(headingContrastTimer)
+	headingContrastTimer = undefined
+}
+
+function next() {
+	navigate(1, 'next')
+}
+
+function previous() {
+	navigate(-1, 'previous')
+}
+
+async function markSavedAndView(itemId?: string) {
+	editorComponent.value?.markSaved()
+	mode.value = 'view'
+	closeAfterEditing.value = false
+	await nextTick()
+	if (itemId && props.items.some((item) => item.id === itemId)) activeId.value = itemId
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (!activeItem.value || mode.value === 'edit' || document.querySelector('.modal-root')) return
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		hide()
+	} else if (event.key === 'ArrowLeft') {
+		event.preventDefault()
+		previous()
+	} else if (event.key === 'ArrowRight') {
+		event.preventDefault()
+		next()
+	}
+}
+
+onMounted(() => document.addEventListener('keydown', handleKeydown))
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', handleKeydown)
+	cancelHeadingContrastUpdate()
+	itemDataCache.clear()
+	itemImageCache.clear()
+	if (activeId.value !== null) context?.onHide?.()
+})
+
+defineExpose({ show, edit, hide, next, previous, markSavedAndView })
+</script>
+
+<template>
+	<Teleport to="body">
+		<div
+			v-if="activeItem"
+			class="fixed inset-0 z-[110] overflow-hidden bg-black/95 text-white"
+			role="dialog"
+			aria-modal="true"
+			:aria-label="activeItem.title || activeItem.alt"
+			@click.self="mode === 'view' && hide()"
+		>
+			<header
+				v-if="activeItem.title || activeItem.description"
+				class="absolute inset-x-6 top-[calc(var(--top-bar-height,3rem)_+_1.5rem)] z-10 min-w-0"
+				@click.stop
+			>
+				<div class="w-fit min-w-0 max-w-full">
+					<h2
+						v-if="activeItem.title"
+						ref="titleElement"
+						class="m-0 max-w-[min(42rem,70vw)] truncate text-base font-semibold leading-snug transition-colors duration-200 ease-out"
+						:class="titleContrast === 'dark' ? 'text-gray-950' : 'text-white'"
+					>
+						{{ activeItem.title }}
+					</h2>
+					<p
+						v-if="activeItem.description"
+						ref="descriptionElement"
+						class="mb-0 mt-1 max-w-[min(42rem,70vw)] truncate text-xs leading-snug opacity-70 transition-colors duration-200 ease-out"
+						:class="descriptionContrast === 'dark' ? 'text-gray-950' : 'text-white'"
+					>
+						{{ activeItem.description }}
+					</p>
+				</div>
+			</header>
+
+			<Editor
+				ref="editorComponent"
+				:item="activeItem"
+				:mode="mode"
+				:index="activeIndex"
+				:count="items.length"
+				:can-edit="canEdit"
+				:saving="saving"
+				:load-data="loadItemData"
+				@close="hide"
+				@edit="beginEditing"
+				@next="next"
+				@previous="previous"
+				@cancel="finishEditing"
+				@save="emit('save', $event)"
+				@image-ready="updateHeadingContrast"
+			>
+				<template #actions>
+					<slot name="actions" :item="activeItem" :index="activeIndex" :hide="hide" />
+				</template>
+			</Editor>
+		</div>
+	</Teleport>
+</template>
diff --git a/packages/ui/src/components/image-viewer-editor/toolbar.vue b/packages/ui/src/components/image-viewer-editor/toolbar.vue
new file mode 100644
index 0000000000..8c131de491
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/toolbar.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+	CircleIcon,
+	CropIcon,
+	EraserIcon,
+	EyeOffIcon,
+	HighlighterIcon,
+	MousePointer2Icon,
+	MoveUpRightIcon,
+	PencilIcon,
+	SquareIcon,
+	TypeIcon,
+} from '@modrinth/assets'
+
+import IconButton from '#ui/components/base/buttons/IconButton.vue'
+import { useVIntl } from '#ui/composables/i18n'
+
+import { imageViewerEditorMessages as messages } from './image-viewer-editor-messages'
+import type { ScreenshotEditorTool } from './image-viewer-editor-types'
+
+const props = defineProps<{
+	tool: ScreenshotEditorTool
+}>()
+
+const emit = defineEmits<{
+	select: [tool: ScreenshotEditorTool]
+}>()
+
+const { formatMessage } = useVIntl()
+
+const toolGroups = [
+	[
+		{ id: 'select', message: messages.select, icon: MousePointer2Icon, shortcut: 'V' },
+		{ id: 'crop', message: messages.crop, icon: CropIcon, shortcut: 'K' },
+	],
+	[
+		{ id: 'pen', message: messages.pen, icon: PencilIcon, shortcut: 'P' },
+		{ id: 'highlight', message: messages.highlight, icon: HighlighterIcon, shortcut: 'H' },
+		{ id: 'eraser', message: messages.eraser, icon: EraserIcon, shortcut: 'E' },
+	],
+	[
+		{ id: 'arrow', message: messages.arrow, icon: MoveUpRightIcon, shortcut: 'A' },
+		{ id: 'rectangle', message: messages.rectangle, icon: SquareIcon, shortcut: 'R' },
+		{ id: 'ellipse', message: messages.ellipse, icon: CircleIcon, shortcut: 'O' },
+	],
+	[
+		{ id: 'text', message: messages.text, icon: TypeIcon, shortcut: 'T' },
+		{ id: 'censor', message: messages.censor, icon: EyeOffIcon, shortcut: 'C' },
+	],
+] satisfies Array<
+	Array<{
+		id: ScreenshotEditorTool
+		message: (typeof messages)[keyof typeof messages]
+		icon: typeof MousePointer2Icon
+		shortcut: string
+	}>
+>
+
+function tooltip(groupIndex: number, toolIndex: number) {
+	const option = toolGroups[groupIndex]?.[toolIndex]
+	return option ? `${formatMessage(option.message)} (${option.shortcut})` : ''
+}
+</script>
+
+<template>
+	<div
+		class="absolute left-6 top-1/2 z-10 flex -translate-y-1/2 flex-col items-center gap-2 rounded-[20px] border border-solid border-white/10 bg-surface-3 px-3 py-2.5 shadow-[0_1rem_3rem_rgb(0_0_0_/_32%)] max-[900px]:bottom-[5.25rem] max-[900px]:left-1/2 max-[900px]:top-auto max-[900px]:-translate-x-1/2 max-[900px]:translate-y-0 max-[900px]:flex-row"
+		role="toolbar"
+		:aria-label="formatMessage(messages.annotationTools)"
+		@click.stop
+	>
+		<template v-for="(group, groupIndex) in toolGroups" :key="group[0]?.id">
+			<div v-if="groupIndex > 0" class="h-px w-6 bg-white/10 max-[900px]:h-6 max-[900px]:w-px" />
+			<IconButton
+				v-for="(option, toolIndex) in group"
+				:key="option.id"
+				v-tooltip="tooltip(groupIndex, toolIndex)"
+				:label="formatMessage(option.message)"
+				type="quiet"
+				:color="props.tool === option.id ? 'green' : undefined"
+				:class="{
+					'!bg-highlight-green shadow-[inset_0_0_0_1px_var(--color-green)]':
+						props.tool === option.id,
+				}"
+				:aria-pressed="props.tool === option.id"
+				@click="emit('select', option.id)"
+			>
+				<component :is="option.icon" />
+			</IconButton>
+		</template>
+	</div>
+</template>
diff --git a/packages/ui/src/components/image-viewer-editor/types.ts b/packages/ui/src/components/image-viewer-editor/types.ts
new file mode 100644
index 0000000000..3613857908
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/types.ts
@@ -0,0 +1,23 @@
+export type ImageViewerEditorSource = {
+	id: string
+	path: string
+}
+
+export type ImageViewerEditorItem = {
+	id: string
+	src: string
+	alt: string
+	title?: string
+	description?: string
+	editorSource?: ImageViewerEditorSource
+}
+
+export type ImageViewerEditorData = {
+	source: Blob
+}
+
+export type ImageViewerEditorSavePayload = {
+	item: ImageViewerEditorItem
+	pngBytes: Uint8Array
+	mode: 'create_copy' | 'replace_edit'
+}
diff --git a/packages/ui/src/components/image-viewer-editor/use-image-editor.ts b/packages/ui/src/components/image-viewer-editor/use-image-editor.ts
new file mode 100644
index 0000000000..a3ca1bcad9
--- /dev/null
+++ b/packages/ui/src/components/image-viewer-editor/use-image-editor.ts
@@ -0,0 +1,1741 @@
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import { useDebugLogger } from '#ui/composables/debug-logger'
+
+import { renderCensorRegion } from './image-viewer-editor-censor-object'
+import type {
+	EditorHistoryEntry,
+	ScreenshotCensorMode,
+	ScreenshotEditorObjectKind,
+	ScreenshotEditorObjectState,
+	ScreenshotEditorPropertyKind,
+	ScreenshotEditorSourceRect,
+	ScreenshotEditorTool,
+	ScreenshotEraserMode,
+} from './image-viewer-editor-types'
+import type { ImageViewerEditorData } from './types'
+
+type FabricModule = typeof import('fabric')
+type FabricCanvas = import('fabric').Canvas
+type FabricObject = import('fabric').FabricObject
+type FabricPoint = import('fabric').Point
+type FabricPath = import('fabric').Path
+type FabricPathData = Exclude<ConstructorParameters<FabricModule['Path']>[0], string>
+type FabricImage = import('fabric').FabricImage
+type FabricGroup = import('fabric').Group
+type FabricRect = import('fabric').Rect
+type FabricImageOptions = ConstructorParameters<FabricModule['FabricImage']>[1]
+type EditorFabricObject = FabricObject & {
+	editorKind?: ScreenshotEditorObjectKind
+	fontSize?: number
+	sourceRect?: ScreenshotEditorSourceRect
+	censorMode?: ScreenshotCensorMode
+	censorColor?: string
+}
+
+type FabricPointerEvent = {
+	e: MouseEvent | TouchEvent | PointerEvent
+	target?: FabricObject
+	transform?: { corner?: string }
+}
+
+const MIN_ZOOM = 0.25
+const MAX_ZOOM = 4
+const CONTROL_SIZE = 14
+const CONTROL_TOUCH_SIZE = 24
+const MAX_RENDERED_CANVAS_PIXELS = 16_777_216
+const MIN_CROP_SIZE = 1
+const SELECTION_COLOR = '#1bd96a'
+const CENSOR_REGENERATED_PROPERTIES = new Set([
+	'type',
+	'version',
+	'src',
+	'filters',
+	'resizeFilter',
+	'clipPath',
+	'editorKind',
+	'sourceRect',
+	'censorMode',
+	'censorColor',
+])
+const TOOL_SHORTCUTS: Partial<Record<string, ScreenshotEditorTool>> = {
+	a: 'arrow',
+	c: 'censor',
+	e: 'eraser',
+	h: 'highlight',
+	k: 'crop',
+	o: 'ellipse',
+	p: 'pen',
+	r: 'rectangle',
+	t: 'text',
+	v: 'select',
+}
+
+type PropertyValueKind = 'size' | 'width'
+
+export function useImageEditor() {
+	const debugEraser = useDebugLogger('ImageEditor:Eraser')
+	const canvas = shallowRef<FabricCanvas>()
+	const loading = ref(false)
+	const tool = ref<ScreenshotEditorTool>('select')
+	const color = ref('#ffffff')
+	const strokeWidth = ref(6)
+	const fontSize = ref(30)
+	const censorMode = ref<ScreenshotCensorMode>('blur')
+	const eraserMode = ref<ScreenshotEraserMode>('element')
+	const zoom = ref(1)
+	const fitScale = ref(1)
+	const isFit = ref(true)
+	const originalWidth = ref(0)
+	const originalHeight = ref(0)
+	const cropRect = ref<ScreenshotEditorSourceRect>({ left: 0, top: 0, width: 0, height: 0 })
+	const history = ref<EditorHistoryEntry[]>([])
+	const historyIndex = ref(-1)
+	const selectedPropertyKind = ref<ScreenshotEditorPropertyKind>()
+	const selectionCount = ref(0)
+	const canUndo = computed(() => historyIndex.value > 0)
+	const canRedo = computed(() => historyIndex.value < history.value.length - 1)
+	const canDelete = computed(() => selectionCount.value > 0)
+	const propertyValueKind = computed<PropertyValueKind | undefined>(() => {
+		const kind = selectedPropertyKind.value ?? (selectionCount.value === 0 ? tool.value : undefined)
+		if (kind === 'text') return 'size'
+		if (kind === 'eraser' && eraserMode.value === 'area') return 'width'
+		if (
+			kind === 'pen' ||
+			kind === 'highlight' ||
+			kind === 'arrow' ||
+			kind === 'rectangle' ||
+			kind === 'ellipse'
+		) {
+			return 'width'
+		}
+		return undefined
+	})
+	const hasColorProperty = computed(() => {
+		const kind = selectedPropertyKind.value ?? (selectionCount.value === 0 ? tool.value : undefined)
+		return (
+			kind === 'pen' ||
+			kind === 'highlight' ||
+			kind === 'arrow' ||
+			kind === 'rectangle' ||
+			kind === 'ellipse' ||
+			kind === 'text' ||
+			(kind === 'censor' && selectionCount.value === 0 && censorMode.value === 'solid')
+		)
+	})
+	const showCensorMode = computed(() => selectionCount.value === 0 && tool.value === 'censor')
+	const showEraserMode = computed(() => selectionCount.value === 0 && tool.value === 'eraser')
+	const canZoomOut = computed(() => zoom.value > MIN_ZOOM)
+	const canZoomIn = computed(() => zoom.value < MAX_ZOOM)
+	const showCropControls = computed(() => selectionCount.value === 0 && tool.value === 'crop')
+	const cropWidth = computed(() => cropRect.value.width)
+	const cropHeight = computed(() => cropRect.value.height)
+	const canResetCrop = computed(() => !isFullCrop())
+
+	const defaultWidths: Record<'width' | 'highlight' | 'eraser', number> = {
+		width: 6,
+		highlight: 24,
+		eraser: 24,
+	}
+	let defaultColor = '#ffffff'
+	let defaultFontSize = 30
+
+	let fabric: FabricModule | undefined
+	let background: FabricImage | undefined
+	let cropSelection: FabricRect | undefined
+	let cropShade: FabricRect[] = []
+	let sourceImage: HTMLImageElement | undefined
+	let sourceUrl: string | undefined
+	let drawingStart: { x: number; y: number } | undefined
+	let drawingObject: EditorFabricObject | undefined
+	let cropDrawingStart: FabricPoint | undefined
+	let cropDrawingPrevious: ScreenshotEditorSourceRect | undefined
+	let restoringHistory = false
+	let constructingObject = false
+	let propertyEditStart: string | undefined
+	let erasing = false
+	let erasedDuringGesture = false
+	let interactionEnabled = true
+
+	watch(eraserMode, () => {
+		finishErasing()
+		if (tool.value === 'eraser') setTool('eraser')
+	})
+
+	async function initialize(
+		element: HTMLCanvasElement,
+		editorData: ImageViewerEditorData,
+		viewportSize?: { width: number; height: number },
+	) {
+		await dispose()
+		loading.value = true
+		try {
+			fabric = await import('fabric')
+			sourceUrl = URL.createObjectURL(editorData.source)
+			sourceImage = await loadImage(sourceUrl)
+			originalWidth.value = sourceImage.naturalWidth
+			originalHeight.value = sourceImage.naturalHeight
+
+			const nextCanvas = new fabric.Canvas(element, {
+				width: originalWidth.value,
+				height: originalHeight.value,
+				enableRetinaScaling: false,
+				backgroundColor: '#111827',
+				preserveObjectStacking: true,
+				selection: true,
+			})
+			canvas.value = nextCanvas
+			if (viewportSize) fitToViewport(viewportSize.width, viewportSize.height)
+			background = new fabric.FabricImage(sourceImage, {
+				left: 0,
+				top: 0,
+				originX: 'left',
+				originY: 'top',
+				width: originalWidth.value,
+				height: originalHeight.value,
+				selectable: false,
+				evented: false,
+				excludeFromExport: false,
+			})
+			setEditorMetadata(background, 'background')
+			nextCanvas.add(background)
+			nextCanvas.sendObjectToBack(background)
+			createCropUi(nextCanvas)
+			bindCanvasEvents(nextCanvas)
+			resetHistory()
+			setTool('select')
+		} finally {
+			loading.value = false
+		}
+	}
+
+	function bindCanvasEvents(editorCanvas: FabricCanvas) {
+		editorCanvas.on('mouse:down', handleMouseDown)
+		editorCanvas.on('mouse:move', handleMouseMove)
+		editorCanvas.on('mouse:up', handleMouseUp)
+		editorCanvas.on('object:added', () => {
+			if (!constructingObject && !restoringHistory && !editorCanvas.isDrawingMode) {
+				recordHistory()
+			}
+			keepCropUiOnTop()
+		})
+		editorCanvas.on('path:created', ({ path }) => {
+			if (tool.value === 'eraser' && eraserMode.value === 'area') {
+				void eraseAreaWithPath(path).catch((error) => {
+					debugEraser('area:error', error)
+				})
+				return
+			}
+			setEditorMetadata(path, tool.value === 'highlight' ? 'highlight' : 'pen')
+			styleObjectControls(path)
+			recordHistory()
+			syncSelectionProperties()
+		})
+		editorCanvas.on('object:moving', ({ target }) => {
+			if (target === cropSelection) {
+				constrainCropMove()
+				syncCropFromSelection()
+			}
+		})
+		editorCanvas.on('object:scaling', ({ target }) => {
+			if (target === cropSelection) syncCropFromSelection()
+		})
+		editorCanvas.on('object:modified', ({ target }) => {
+			if (target === cropSelection) {
+				normalizeCropSelection()
+				recordHistory()
+				return
+			}
+			if (target) {
+				refreshModifiedCensors(target as EditorFabricObject)
+				editorCanvas.requestRenderAll()
+			}
+			recordHistory()
+			syncSelectionProperties()
+		})
+		editorCanvas.on('object:removed', () => {
+			if (!constructingObject && !restoringHistory) recordHistory()
+		})
+		editorCanvas.on('selection:created', syncSelectionProperties)
+		editorCanvas.on('selection:updated', syncSelectionProperties)
+		editorCanvas.on('selection:cleared', syncSelectionProperties)
+		editorCanvas.on('text:editing:exited', () => {
+			recordHistory()
+			syncSelectionProperties()
+		})
+	}
+
+	function createCropUi(editorCanvas: FabricCanvas) {
+		const fabricModule = fabric
+		if (!fabricModule) return
+		cropRect.value = fullCropRect()
+		cropShade = Array.from(
+			{ length: 4 },
+			() =>
+				new fabricModule.Rect({
+					left: 0,
+					top: 0,
+					originX: 'left',
+					originY: 'top',
+					width: 0,
+					height: 0,
+					fill: 'rgba(0, 0, 0, 0.55)',
+					strokeWidth: 0,
+					selectable: false,
+					evented: false,
+					excludeFromExport: true,
+					visible: false,
+				}),
+		)
+		cropSelection = new fabricModule.Rect({
+			...cropRect.value,
+			originX: 'left',
+			originY: 'top',
+			fill: 'transparent',
+			stroke: SELECTION_COLOR,
+			strokeUniform: true,
+			strokeWidth: 2,
+			lockRotation: true,
+			lockScalingFlip: true,
+			selectable: false,
+			evented: false,
+			excludeFromExport: true,
+			perPixelTargetFind: true,
+			visible: false,
+		})
+		styleCropControls()
+		editorCanvas.add(...cropShade, cropSelection)
+		updateCropUi()
+	}
+
+	function fullCropRect(): ScreenshotEditorSourceRect {
+		return {
+			left: 0,
+			top: 0,
+			width: originalWidth.value,
+			height: originalHeight.value,
+		}
+	}
+
+	function isFullCrop() {
+		const rect = cropRect.value
+		return (
+			rect.left === 0 &&
+			rect.top === 0 &&
+			rect.width === originalWidth.value &&
+			rect.height === originalHeight.value
+		)
+	}
+
+	function updateCropUi() {
+		if (!cropSelection || cropShade.length !== 4) return
+		const rect = cropRect.value
+		const right = rect.left + rect.width
+		const bottom = rect.top + rect.height
+		cropSelection.set({
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height: rect.height,
+			scaleX: 1,
+			scaleY: 1,
+		})
+		cropShade[0].set({ left: 0, top: 0, width: originalWidth.value, height: rect.top })
+		cropShade[1].set({ left: 0, top: rect.top, width: rect.left, height: rect.height })
+		cropShade[2].set({
+			left: right,
+			top: rect.top,
+			width: originalWidth.value - right,
+			height: rect.height,
+		})
+		cropShade[3].set({
+			left: 0,
+			top: bottom,
+			width: originalWidth.value,
+			height: originalHeight.value - bottom,
+		})
+		const cropToolActive = interactionEnabled && tool.value === 'crop'
+		const hasCropBounds = !isFullCrop()
+		const shadeVisible = interactionEnabled && hasCropBounds
+		for (const shade of cropShade) {
+			shade.visible = shadeVisible
+			shade.setCoords()
+		}
+		cropSelection.set({
+			visible: cropToolActive && hasCropBounds,
+			selectable: cropToolActive && hasCropBounds,
+			evented: cropToolActive && hasCropBounds,
+		})
+		cropSelection.setCoords()
+		keepCropUiOnTop()
+		canvas.value?.requestRenderAll()
+	}
+
+	function keepCropUiOnTop() {
+		const editorCanvas = canvas.value
+		if (!editorCanvas || !cropSelection) return
+		for (const shade of cropShade) editorCanvas.bringObjectToFront(shade)
+		editorCanvas.bringObjectToFront(cropSelection)
+	}
+
+	function cropSelectionRect(): ScreenshotEditorSourceRect | undefined {
+		if (!cropSelection) return undefined
+		return {
+			left: cropSelection.left,
+			top: cropSelection.top,
+			width: cropSelection.width * cropSelection.scaleX,
+			height: cropSelection.height * cropSelection.scaleY,
+		}
+	}
+
+	function sanitizeCropRect(rect: ScreenshotEditorSourceRect): ScreenshotEditorSourceRect {
+		const left = Math.min(originalWidth.value - MIN_CROP_SIZE, Math.max(0, Math.round(rect.left)))
+		const top = Math.min(originalHeight.value - MIN_CROP_SIZE, Math.max(0, Math.round(rect.top)))
+		const right = Math.min(
+			originalWidth.value,
+			Math.max(left + MIN_CROP_SIZE, Math.round(rect.left + rect.width)),
+		)
+		const bottom = Math.min(
+			originalHeight.value,
+			Math.max(top + MIN_CROP_SIZE, Math.round(rect.top + rect.height)),
+		)
+		return { left, top, width: right - left, height: bottom - top }
+	}
+
+	function syncCropFromSelection() {
+		const rect = cropSelectionRect()
+		if (!rect) return
+		cropRect.value = sanitizeCropRect(rect)
+		const nextRect = cropRect.value
+		const right = nextRect.left + nextRect.width
+		const bottom = nextRect.top + nextRect.height
+		cropShade[0]?.set({ height: nextRect.top })
+		cropShade[1]?.set({ top: nextRect.top, width: nextRect.left, height: nextRect.height })
+		cropShade[2]?.set({
+			left: right,
+			top: nextRect.top,
+			width: originalWidth.value - right,
+			height: nextRect.height,
+		})
+		cropShade[3]?.set({
+			top: bottom,
+			height: originalHeight.value - bottom,
+		})
+		canvas.value?.requestRenderAll()
+	}
+
+	function normalizeCropSelection() {
+		const rect = cropSelectionRect()
+		if (!rect) return
+		cropRect.value = sanitizeCropRect(rect)
+		updateCropUi()
+		updateActiveCropSelection()
+	}
+
+	function constrainCropMove() {
+		if (!cropSelection) return
+		const width = cropSelection.width * cropSelection.scaleX
+		const height = cropSelection.height * cropSelection.scaleY
+		cropSelection.set({
+			left: Math.min(originalWidth.value - width, Math.max(0, cropSelection.left)),
+			top: Math.min(originalHeight.value - height, Math.max(0, cropSelection.top)),
+		})
+	}
+
+	function setCropRect(nextRect: ScreenshotEditorSourceRect) {
+		cropRect.value = sanitizeCropRect(nextRect)
+		updateCropUi()
+	}
+
+	function resetCrop() {
+		if (isFullCrop()) return
+		setCropRect(fullCropRect())
+		updateActiveCropSelection()
+		recordHistory()
+	}
+
+	function updateActiveCropSelection() {
+		const editorCanvas = canvas.value
+		if (!editorCanvas || !cropSelection) return
+		if (tool.value !== 'crop' || isFullCrop()) {
+			if (editorCanvas.getActiveObject() === cropSelection) editorCanvas.discardActiveObject()
+			return
+		}
+		editorCanvas.setActiveObject(cropSelection)
+	}
+
+	function styleCropControls() {
+		if (!cropSelection) return
+		styleObjectControls(cropSelection)
+		cropSelection.set({
+			lockRotation: true,
+			strokeWidth: 2 / Math.max(zoom.value, 0.01),
+		})
+		cropSelection.setControlsVisibility({ mtr: false })
+		cropSelection.setCoords()
+	}
+
+	function setTool(nextTool: ScreenshotEditorTool) {
+		if (nextTool !== 'eraser') finishErasing()
+		if (nextTool !== 'crop') cancelCropDrawing()
+		tool.value = nextTool
+		const editorCanvas = canvas.value
+		if (!editorCanvas || !fabric) return
+		const activeObject = editorCanvas.getActiveObject() as
+			| (EditorFabricObject & { isEditing?: boolean; exitEditing?: () => void })
+			| undefined
+		if (activeObject?.isEditing && nextTool !== 'text') activeObject.exitEditing?.()
+
+		editorCanvas.isDrawingMode =
+			nextTool === 'pen' ||
+			nextTool === 'highlight' ||
+			(nextTool === 'eraser' && eraserMode.value === 'area')
+		editorCanvas.selection = nextTool === 'select'
+		for (const object of annotationObjects()) {
+			object.selectable = nextTool === 'select'
+			object.evented =
+				nextTool === 'select' || (nextTool === 'eraser' && eraserMode.value === 'element')
+			styleObjectControls(object)
+		}
+		if (nextTool !== 'select') editorCanvas.discardActiveObject()
+		updateCropUi()
+		updateActiveCropSelection()
+		syncSelectionProperties()
+		configureCursor(editorCanvas, nextTool)
+		configureBrush(editorCanvas)
+		editorCanvas.requestRenderAll()
+	}
+
+	function refreshToolSettings() {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return
+		configureBrush(editorCanvas)
+		editorCanvas.requestRenderAll()
+	}
+
+	function configureBrush(editorCanvas: FabricCanvas) {
+		if (!fabric || !editorCanvas.isDrawingMode) return
+		const brush =
+			tool.value === 'eraser'
+				? createAreaEraserBrush(editorCanvas, fabric)
+				: new fabric.PencilBrush(editorCanvas)
+		brush.color =
+			tool.value === 'eraser'
+				? 'rgba(255, 255, 255, 0.45)'
+				: tool.value === 'highlight'
+					? hexToRgba(color.value, 0.35)
+					: color.value
+		brush.width = strokeWidth.value
+		editorCanvas.freeDrawingBrush = brush
+	}
+
+	function createAreaEraserBrush(editorCanvas: FabricCanvas, fabricModule: FabricModule) {
+		const editorSourceImage = sourceImage
+		return new (class extends fabricModule.PencilBrush {
+			override _setBrushStyles(context: CanvasRenderingContext2D) {
+				super._setBrushStyles(context)
+				const backgroundPattern = editorSourceImage
+					? context.createPattern(editorSourceImage, 'no-repeat')
+					: null
+				if (backgroundPattern) context.strokeStyle = backgroundPattern
+			}
+		})(editorCanvas)
+	}
+
+	function configureCursor(editorCanvas: FabricCanvas, nextTool: ScreenshotEditorTool) {
+		const hasBrushCursor =
+			nextTool === 'pen' ||
+			nextTool === 'highlight' ||
+			(nextTool === 'eraser' && eraserMode.value === 'area')
+		const cursor = hasBrushCursor
+			? 'none'
+			: nextTool === 'select'
+				? 'default'
+				: nextTool === 'text'
+					? 'text'
+					: 'crosshair'
+		editorCanvas.defaultCursor = cursor
+		editorCanvas.freeDrawingCursor = cursor
+		editorCanvas.hoverCursor = nextTool === 'select' ? 'move' : cursor
+		editorCanvas.moveCursor = nextTool === 'select' ? 'move' : cursor
+		if (cropSelection) cropSelection.hoverCursor = nextTool === 'crop' ? 'move' : cursor
+	}
+
+	function syncSelectionProperties() {
+		commitPropertyEdit()
+		const activeObjects = (canvas.value?.getActiveObjects() ?? []).filter(
+			isAnnotationObject,
+		) as EditorFabricObject[]
+		selectionCount.value = activeObjects.length
+		const selected = activeObjects.length === 1 ? activeObjects[0] : undefined
+		selectedPropertyKind.value = isPropertyKind(selected?.editorKind)
+			? selected.editorKind
+			: undefined
+
+		if (selected && selectedPropertyKind.value) {
+			const selectedColor = getObjectColor(selected, selectedPropertyKind.value)
+			if (selectedColor) color.value = selectedColor
+			if (selectedPropertyKind.value === 'text') {
+				fontSize.value = Math.round(selected.fontSize ?? defaultFontSize)
+			} else {
+				const selectedWidth = getObjectStrokeWidth(selected, selectedPropertyKind.value)
+				if (selectedWidth) strokeWidth.value = Math.round(selectedWidth)
+			}
+			return
+		}
+
+		if (activeObjects.length > 0) return
+		color.value = defaultColor
+		if (tool.value === 'text') {
+			fontSize.value = defaultFontSize
+		} else if (tool.value === 'highlight') {
+			strokeWidth.value = defaultWidths.highlight
+		} else if (tool.value === 'eraser') {
+			strokeWidth.value = defaultWidths.eraser
+		} else {
+			strokeWidth.value = defaultWidths.width
+		}
+	}
+
+	function updateColor(nextColor: string) {
+		if (selectionCount.value === 1) beginPropertyEdit()
+		color.value = nextColor
+		const selected = singleSelectedObject()
+		const kind = selected && isPropertyKind(selected.editorKind) ? selected.editorKind : undefined
+		if (selected && kind && kind !== 'censor') {
+			setObjectColor(selected, kind, nextColor)
+		} else if (selectionCount.value === 0) {
+			defaultColor = nextColor
+			refreshToolSettings()
+		}
+	}
+
+	function updateStrokeWidth(nextWidth: number) {
+		if (selectionCount.value === 1) beginPropertyEdit()
+		strokeWidth.value = nextWidth
+		const selected = singleSelectedObject()
+		const kind = selected && isPropertyKind(selected.editorKind) ? selected.editorKind : undefined
+		if (selected && kind && kind !== 'censor' && kind !== 'text') {
+			setObjectStrokeWidth(selected, kind, nextWidth)
+		} else if (selectionCount.value === 0) {
+			if (tool.value === 'highlight') defaultWidths.highlight = nextWidth
+			else if (tool.value === 'eraser') defaultWidths.eraser = nextWidth
+			else defaultWidths.width = nextWidth
+			refreshToolSettings()
+		}
+	}
+
+	function updateFontSize(nextSize: number) {
+		if (selectionCount.value === 1) beginPropertyEdit()
+		fontSize.value = nextSize
+		const selected = singleSelectedObject()
+		if (selected?.editorKind === 'text') {
+			selected.set({ fontSize: nextSize })
+			selected.setCoords()
+			selected.dirty = true
+			canvas.value?.requestRenderAll()
+		} else if (selectionCount.value === 0) {
+			defaultFontSize = nextSize
+		}
+	}
+
+	function singleSelectedObject() {
+		const activeObjects = (canvas.value?.getActiveObjects() ?? []).filter(
+			isAnnotationObject,
+		) as EditorFabricObject[]
+		return activeObjects.length === 1 ? activeObjects[0] : undefined
+	}
+
+	function getObjectColor(object: EditorFabricObject, kind: ScreenshotEditorPropertyKind) {
+		if (kind === 'arrow') {
+			const [line] = (object as FabricGroup).getObjects()
+			return colorToHex(line?.stroke)
+		}
+		return colorToHex(kind === 'text' ? object.fill : object.stroke)
+	}
+
+	function getObjectStrokeWidth(object: EditorFabricObject, kind: ScreenshotEditorPropertyKind) {
+		if (kind === 'arrow') {
+			const [line] = (object as FabricGroup).getObjects()
+			return line?.strokeWidth
+		}
+		return object.strokeWidth
+	}
+
+	function setObjectColor(
+		object: EditorFabricObject,
+		kind: ScreenshotEditorPropertyKind,
+		nextColor: string,
+	) {
+		if (kind === 'arrow') {
+			const [line, head] = (object as FabricGroup).getObjects()
+			line?.set({ stroke: nextColor })
+			head?.set({ fill: nextColor })
+		} else if (kind === 'text') {
+			object.set({ fill: nextColor })
+		} else {
+			object.set({ stroke: kind === 'highlight' ? hexToRgba(nextColor, 0.35) : nextColor })
+		}
+		object.dirty = true
+		object.setCoords()
+		canvas.value?.requestRenderAll()
+	}
+
+	function setObjectStrokeWidth(
+		object: EditorFabricObject,
+		kind: ScreenshotEditorPropertyKind,
+		nextWidth: number,
+	) {
+		if (kind === 'arrow') {
+			const group = object as FabricGroup
+			const [line, head] = group.getObjects()
+			const linePosition = line?.getXY()
+			line?.set({ strokeWidth: nextWidth })
+			head?.set({ width: nextWidth * 4, height: nextWidth * 5 })
+			group.triggerLayout({ deep: true })
+			if (line && linePosition) {
+				const nextLinePosition = line.getXY()
+				group.set({
+					left: group.left + linePosition.x - nextLinePosition.x,
+					top: group.top + linePosition.y - nextLinePosition.y,
+				})
+			}
+		} else {
+			object.set({ strokeWidth: nextWidth })
+		}
+		object.dirty = true
+		object.setCoords()
+		canvas.value?.requestRenderAll()
+	}
+
+	function beginErasing(point: FabricPoint) {
+		erasing = true
+		erasedDuringGesture = false
+		constructingObject = true
+		eraseAtPoint(point)
+	}
+
+	function eraseAtPoint(point: FabricPoint) {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return
+		const { target } = editorCanvas.searchPossibleTargets(annotationObjects(), point)
+		if (!target || target === background) return
+		editorCanvas.remove(target)
+		erasedDuringGesture = true
+		editorCanvas.requestRenderAll()
+	}
+
+	function finishErasing() {
+		if (!erasing) return
+		erasing = false
+		constructingObject = false
+		if (erasedDuringGesture) recordHistory()
+		erasedDuringGesture = false
+		syncSelectionProperties()
+		canvas.value?.requestRenderAll()
+	}
+
+	async function eraseAreaWithPath(eraserPath: FabricPath) {
+		const editorCanvas = canvas.value
+		const fabricModule = fabric
+		if (!editorCanvas || !fabricModule) return
+
+		constructingObject = true
+		const eraserBounds = eraserPath.getBoundingRect()
+		const eraserMask = createAreaEraserMask(eraserPath, fabricModule)
+		editorCanvas.remove(eraserPath)
+		const targets = annotationObjects().filter((object) =>
+			boundingRectsOverlap(eraserBounds, object.getBoundingRect()),
+		)
+
+		try {
+			await Promise.all(
+				targets.map(async (object) => {
+					const clipPath = await eraserMask.clone()
+					fabricModule.util.sendObjectToPlane(clipPath, undefined, object.calcTransformMatrix())
+					const nextClipPath = object.clipPath
+						? fabricModule.util.mergeClipPaths(object.clipPath, clipPath)
+						: clipPath
+					object.set('clipPath', nextClipPath)
+				}),
+			)
+		} finally {
+			constructingObject = false
+		}
+
+		if (targets.length > 0) recordHistory()
+		editorCanvas.requestRenderAll()
+	}
+
+	function createAreaEraserMask(eraserPath: FabricPath, fabricModule: FabricModule) {
+		const points = samplePathPoints(eraserPath, fabricModule)
+		const width = Math.max(1, eraserPath.strokeWidth)
+		const radius = width / 2
+		const maskPath: FabricPathData = []
+
+		if (points.length === 1) {
+			const point = points[0]
+			maskPath.push(
+				['M', point.x + radius, point.y],
+				['A', radius, radius, 0, 1, 0, point.x - radius, point.y],
+				['A', radius, radius, 0, 1, 0, point.x + radius, point.y],
+				['Z'],
+			)
+		} else {
+			for (let index = 1; index < points.length; index++) {
+				const start = points[index - 1]
+				const end = points[index]
+				const deltaX = end.x - start.x
+				const deltaY = end.y - start.y
+				const length = Math.hypot(deltaX, deltaY)
+				if (length === 0) continue
+				const normalX = (-deltaY / length) * radius
+				const normalY = (deltaX / length) * radius
+				maskPath.push(
+					['M', start.x + normalX, start.y + normalY],
+					['L', end.x + normalX, end.y + normalY],
+					['A', radius, radius, 0, 0, 1, end.x - normalX, end.y - normalY],
+					['L', start.x - normalX, start.y - normalY],
+					['A', radius, radius, 0, 0, 1, start.x + normalX, start.y + normalY],
+					['Z'],
+				)
+			}
+		}
+
+		const brushMask = new fabricModule.Path(maskPath, {
+			absolutePositioned: false,
+			fill: '#000000',
+			inverted: true,
+			opacity: 1,
+			strokeWidth: 0,
+		})
+		const outerMask = new fabricModule.Rect({
+			left: 0,
+			top: 0,
+			originX: 'left',
+			originY: 'top',
+			width: originalWidth.value,
+			height: originalHeight.value,
+			fill: '#000000',
+			strokeWidth: 0,
+		})
+		fabricModule.util.sendObjectToPlane(brushMask, undefined, outerMask.calcTransformMatrix())
+		outerMask.set('clipPath', brushMask)
+		return outerMask
+	}
+
+	function samplePathPoints(eraserPath: FabricPath, fabricModule: FabricModule) {
+		const sampled: FabricPoint[] = []
+		const transform = eraserPath.calcTransformMatrix()
+		const pathOffset = eraserPath.pathOffset
+		const spacing = Math.max(2, eraserPath.strokeWidth / 3)
+		let current = { x: 0, y: 0 }
+
+		const addPoint = (x: number, y: number) => {
+			const point = new fabricModule.Point(x - pathOffset.x, y - pathOffset.y).transform(transform)
+			const previous = sampled.at(-1)
+			if (!previous || !previous.eq(point)) sampled.push(point)
+		}
+		const addLine = (end: { x: number; y: number }) => {
+			const steps = Math.max(
+				1,
+				Math.ceil(Math.hypot(end.x - current.x, end.y - current.y) / spacing),
+			)
+			for (let step = 1; step <= steps; step++) {
+				const progress = step / steps
+				addPoint(
+					current.x + (end.x - current.x) * progress,
+					current.y + (end.y - current.y) * progress,
+				)
+			}
+			current = end
+		}
+
+		for (const pathCommand of eraserPath.path) {
+			const command = pathCommand[0]
+			if (command === 'M') {
+				current = { x: Number(pathCommand[1]), y: Number(pathCommand[2]) }
+				addPoint(current.x, current.y)
+			} else if (command === 'L') {
+				addLine({ x: Number(pathCommand[1]), y: Number(pathCommand[2]) })
+			} else if (command === 'Q') {
+				const start = current
+				const control = { x: Number(pathCommand[1]), y: Number(pathCommand[2]) }
+				const end = { x: Number(pathCommand[3]), y: Number(pathCommand[4]) }
+				const estimatedLength =
+					Math.hypot(control.x - start.x, control.y - start.y) +
+					Math.hypot(end.x - control.x, end.y - control.y)
+				const steps = Math.max(2, Math.ceil(estimatedLength / spacing))
+				for (let step = 1; step <= steps; step++) {
+					const progress = step / steps
+					const inverse = 1 - progress
+					addPoint(
+						inverse * inverse * start.x +
+							2 * inverse * progress * control.x +
+							progress * progress * end.x,
+						inverse * inverse * start.y +
+							2 * inverse * progress * control.y +
+							progress * progress * end.y,
+					)
+				}
+				current = end
+			}
+		}
+
+		if (sampled.length === 0) addPoint(0, 0)
+		return sampled
+	}
+
+	function handleMouseDown(event: FabricPointerEvent) {
+		const editorCanvas = canvas.value
+		if (!editorCanvas || !fabric || editorCanvas.isDrawingMode || tool.value === 'select') return
+		const point = editorCanvas.getScenePoint(event.e)
+		if (tool.value === 'crop') {
+			if (
+				event.target === cropSelection &&
+				(event.transform?.corner || isPointNearCropBorder(point))
+			) {
+				return
+			}
+			editorCanvas._currentTransform = null
+			cropDrawingStart = point
+			cropDrawingPrevious = { ...cropRect.value }
+			constructingObject = true
+			setCropRect({ left: point.x, top: point.y, width: 1, height: 1 })
+			return
+		}
+		if (tool.value === 'eraser' && eraserMode.value === 'element') {
+			beginErasing(point)
+			return
+		}
+
+		if (tool.value === 'text') {
+			constructingObject = true
+			const text = new fabric.IText('Text', {
+				left: point.x,
+				top: point.y,
+				originX: 'left',
+				originY: 'top',
+				fill: color.value,
+				fontFamily: 'Inter, sans-serif',
+				fontSize: fontSize.value,
+			})
+			setEditorMetadata(text, 'text')
+			styleObjectControls(text)
+			editorCanvas.add(text)
+			editorCanvas.setActiveObject(text)
+			constructingObject = false
+			text.enterEditing()
+			text.selectAll()
+			editorCanvas.requestRenderAll()
+			return
+		}
+
+		drawingStart = point
+		constructingObject = true
+		if (tool.value === 'rectangle' || tool.value === 'censor') {
+			drawingObject = new fabric.Rect({
+				left: point.x,
+				top: point.y,
+				originX: 'left',
+				originY: 'top',
+				width: 1,
+				height: 1,
+				fill: 'transparent',
+				stroke: tool.value === 'censor' ? '#ffffff' : color.value,
+				strokeDashArray: tool.value === 'censor' ? [10, 8] : undefined,
+				strokeWidth: tool.value === 'censor' ? 2 : strokeWidth.value,
+				selectable: false,
+				evented: false,
+			})
+		} else if (tool.value === 'ellipse') {
+			drawingObject = new fabric.Ellipse({
+				left: point.x,
+				top: point.y,
+				originX: 'left',
+				originY: 'top',
+				rx: 1,
+				ry: 1,
+				fill: 'transparent',
+				stroke: color.value,
+				strokeWidth: strokeWidth.value,
+				selectable: false,
+				evented: false,
+			})
+		} else if (tool.value === 'arrow') {
+			drawingObject = new fabric.Line([point.x, point.y, point.x, point.y], {
+				stroke: color.value,
+				strokeWidth: strokeWidth.value,
+				selectable: false,
+				evented: false,
+			})
+		}
+		if (drawingObject) {
+			styleObjectControls(drawingObject)
+			editorCanvas.add(drawingObject)
+		}
+	}
+
+	function isPointNearCropBorder(point: FabricPoint) {
+		const rect = cropRect.value
+		const tolerance = 10 / Math.max(zoom.value, 0.01)
+		return (
+			Math.abs(point.x - rect.left) <= tolerance ||
+			Math.abs(point.x - (rect.left + rect.width)) <= tolerance ||
+			Math.abs(point.y - rect.top) <= tolerance ||
+			Math.abs(point.y - (rect.top + rect.height)) <= tolerance
+		)
+	}
+
+	function handleMouseMove(event: FabricPointerEvent) {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return
+		if (cropDrawingStart) {
+			const rect = normalizedRect(cropDrawingStart, editorCanvas.getScenePoint(event.e))
+			setCropRect(rect)
+			return
+		}
+		if (tool.value === 'eraser' && eraserMode.value === 'element') {
+			if (erasing) eraseAtPoint(editorCanvas.getScenePoint(event.e))
+			return
+		}
+		if (!drawingStart || !drawingObject) return
+		const point = editorCanvas.getScenePoint(event.e)
+		const rect = normalizedRect(drawingStart, point)
+
+		if (tool.value === 'ellipse') {
+			drawingObject.set({
+				left: rect.left,
+				top: rect.top,
+				rx: rect.width / 2,
+				ry: rect.height / 2,
+			})
+		} else if (tool.value === 'arrow') {
+			drawingObject.set({ x2: point.x, y2: point.y })
+		} else {
+			drawingObject.set(rect)
+		}
+		drawingObject.setCoords()
+		editorCanvas.requestRenderAll()
+	}
+
+	function handleMouseUp(event: FabricPointerEvent) {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return
+		if (cropDrawingStart) {
+			const rect = normalizedRect(cropDrawingStart, editorCanvas.getScenePoint(event.e))
+			const previous = cropDrawingPrevious
+			cropDrawingStart = undefined
+			cropDrawingPrevious = undefined
+			constructingObject = false
+			if (rect.width < 2 || rect.height < 2) {
+				if (previous) setCropRect(previous)
+			} else {
+				setCropRect(rect)
+				recordHistory()
+			}
+			updateActiveCropSelection()
+			editorCanvas.requestRenderAll()
+			return
+		}
+		if (erasing) {
+			eraseAtPoint(editorCanvas.getScenePoint(event.e))
+			finishErasing()
+			return
+		}
+		if (!fabric || !drawingStart || !drawingObject) return
+		const start = drawingStart
+		const point = editorCanvas.getScenePoint(event.e)
+		const rect = normalizedRect(start, point)
+		const preview = drawingObject
+		drawingStart = undefined
+		drawingObject = undefined
+
+		const isTooSmall =
+			tool.value === 'arrow'
+				? Math.hypot(point.x - start.x, point.y - start.y) < 2
+				: rect.width < 2 || rect.height < 2
+		if (isTooSmall) {
+			editorCanvas.remove(preview)
+			constructingObject = false
+			editorCanvas.requestRenderAll()
+			return
+		}
+
+		if (tool.value === 'censor') {
+			editorCanvas.remove(preview)
+			const censorCanvas = renderCensorRegion(sourceImage!, rect, censorMode.value, color.value)
+			const censor = new fabric.FabricImage(censorCanvas, {
+				left: rect.left,
+				top: rect.top,
+				originX: 'left',
+				originY: 'top',
+				selectable: false,
+				evented: false,
+			})
+			setEditorMetadata(censor, 'censor', rect)
+			const editorCensor = censor as EditorFabricObject
+			editorCensor.censorMode = censorMode.value
+			editorCensor.censorColor = color.value
+			styleObjectControls(censor)
+			const censorCount = annotationObjects().filter(
+				(object) => object.editorKind === 'censor',
+			).length
+			editorCanvas.insertAt(1 + censorCount, censor)
+		} else if (tool.value === 'arrow') {
+			editorCanvas.remove(preview)
+			const line = new fabric.Line([start.x, start.y, point.x, point.y], {
+				stroke: color.value,
+				strokeWidth: strokeWidth.value,
+			})
+			const angle = (Math.atan2(point.y - start.y, point.x - start.x) * 180) / Math.PI + 90
+			const head = new fabric.Triangle({
+				left: point.x,
+				top: point.y,
+				originX: 'center',
+				originY: 'center',
+				width: strokeWidth.value * 4,
+				height: strokeWidth.value * 5,
+				fill: color.value,
+				angle,
+			})
+			const arrow = new fabric.Group([line, head])
+			setEditorMetadata(arrow, 'arrow')
+			styleObjectControls(arrow)
+			editorCanvas.add(arrow)
+		} else {
+			setEditorMetadata(preview, tool.value === 'ellipse' ? 'ellipse' : 'rectangle')
+			styleObjectControls(preview)
+		}
+
+		constructingObject = false
+		setTool(tool.value)
+		recordHistory()
+		editorCanvas.requestRenderAll()
+	}
+
+	function cancelCropDrawing() {
+		if (!cropDrawingStart) return
+		if (cropDrawingPrevious) setCropRect(cropDrawingPrevious)
+		cropDrawingStart = undefined
+		cropDrawingPrevious = undefined
+		constructingObject = false
+	}
+
+	function refreshModifiedCensors(target: EditorFabricObject) {
+		const targets =
+			'getObjects' in target && typeof target.getObjects === 'function'
+				? (target.getObjects() as EditorFabricObject[])
+				: [target]
+		for (const object of targets) refreshCensor(object)
+	}
+
+	function refreshCensor(object: EditorFabricObject) {
+		if (
+			object.editorKind !== 'censor' ||
+			object.censorMode !== 'blur' ||
+			!sourceImage ||
+			object.width <= 0 ||
+			object.height <= 0
+		) {
+			return
+		}
+		const censorCanvas = renderCensorRegion(
+			sourceImage,
+			{ left: 0, top: 0, width: object.width, height: object.height },
+			'blur',
+			object.censorColor ?? '#000000',
+			object.calcTransformMatrix(),
+		)
+		;(object as FabricImage).setElement(censorCanvas, {
+			width: object.width,
+			height: object.height,
+		})
+		object.dirty = true
+		object.setCoords()
+	}
+
+	function deleteSelection() {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return false
+		const active = editorCanvas.getActiveObjects().filter(isAnnotationObject)
+		if (active.length === 0) return false
+		editorCanvas.discardActiveObject()
+		constructingObject = true
+		for (const object of active) editorCanvas.remove(object)
+		constructingObject = false
+		recordHistory()
+		syncSelectionProperties()
+		editorCanvas.requestRenderAll()
+		return true
+	}
+
+	function recordHistory() {
+		if (restoringHistory || constructingObject || !canvas.value) return
+		const entry = snapshot()
+		const nextHistory = history.value.slice(0, historyIndex.value + 1)
+		const currentEntry = nextHistory.at(-1)
+		if (currentEntry && serializeSnapshot(currentEntry) === serializeSnapshot(entry)) return
+		nextHistory.push(entry)
+		history.value = nextHistory
+		historyIndex.value = nextHistory.length - 1
+	}
+
+	function beginPropertyEdit() {
+		propertyEditStart ??= serializeSnapshot(snapshot())
+	}
+
+	function commitPropertyEdit() {
+		if (!propertyEditStart) return
+		const hasChanged = propertyEditStart !== serializeSnapshot(snapshot())
+		propertyEditStart = undefined
+		if (hasChanged) recordHistory()
+	}
+
+	function resetHistory() {
+		history.value = [snapshot()]
+		historyIndex.value = 0
+	}
+
+	function snapshot(): EditorHistoryEntry {
+		return {
+			crop: { ...cropRect.value },
+			objects: annotationObjects().map((object) => {
+				const state = object.toObject([
+					'editorKind',
+					'sourceRect',
+					'censorMode',
+					'censorColor',
+				]) as ScreenshotEditorObjectState
+				if (object.editorKind === 'censor') delete state.src
+				return state
+			}),
+		}
+	}
+
+	async function enlivenEditorObjects(states: ScreenshotEditorObjectState[]) {
+		const fabricModule = fabric
+		const editorSourceImage = sourceImage
+		if (!fabricModule || !editorSourceImage) return []
+		const enlivenObjects = fabricModule.util.enlivenObjects as unknown as (
+			objects: ScreenshotEditorObjectState[],
+		) => Promise<EditorFabricObject[]>
+
+		return await Promise.all(
+			states.map(async (state) => {
+				if (state.editorKind !== 'censor') {
+					const [object] = await enlivenObjects([state])
+					if (!object) throw new Error('Could not restore screenshot annotation')
+					return object
+				}
+
+				if (!isSourceRect(state.sourceRect)) {
+					throw new Error('Could not restore screenshot censor region')
+				}
+				const restoredMode: ScreenshotCensorMode = state.censorMode === 'solid' ? 'solid' : 'blur'
+				const restoredColor = typeof state.censorColor === 'string' ? state.censorColor : '#000000'
+				const serializedClipPath =
+					state.clipPath && typeof state.clipPath === 'object'
+						? (state.clipPath as ScreenshotEditorObjectState)
+						: undefined
+				const censorCanvas = renderCensorRegion(
+					editorSourceImage,
+					state.sourceRect,
+					restoredMode,
+					restoredColor,
+				)
+				const objectOptions = Object.fromEntries(
+					Object.entries(state).filter(
+						([property]) => !CENSOR_REGENERATED_PROPERTIES.has(property),
+					),
+				) as ScreenshotEditorObjectState
+				const censor = new fabricModule.FabricImage(
+					censorCanvas,
+					objectOptions as unknown as FabricImageOptions,
+				) as EditorFabricObject
+				setEditorMetadata(censor, 'censor', state.sourceRect)
+				censor.censorMode = restoredMode
+				censor.censorColor = restoredColor
+				refreshCensor(censor)
+				if (serializedClipPath) {
+					const [clipPath] = await enlivenObjects([serializedClipPath])
+					if (clipPath) censor.clipPath = clipPath
+				}
+				return censor
+			}),
+		)
+	}
+
+	async function restoreHistory(index: number) {
+		const editorCanvas = canvas.value
+		const entry = history.value[index]
+		if (!editorCanvas || !entry || !fabric) return
+		restoringHistory = true
+		try {
+			editorCanvas.discardActiveObject()
+			editorCanvas.remove(...annotationObjects())
+			setCropRect(entry.crop)
+			const restored = await enlivenEditorObjects(entry.objects)
+			for (const object of restored) {
+				styleObjectControls(object)
+				editorCanvas.add(object)
+			}
+			historyIndex.value = index
+			setTool(tool.value)
+			syncSelectionProperties()
+			editorCanvas.requestRenderAll()
+		} finally {
+			restoringHistory = false
+		}
+	}
+
+	async function undo() {
+		if (canUndo.value) await restoreHistory(historyIndex.value - 1)
+	}
+
+	async function redo() {
+		if (canRedo.value) await restoreHistory(historyIndex.value + 1)
+	}
+
+	async function discardChanges() {
+		if (history.value[0]) await restoreHistory(0)
+		resetHistory()
+	}
+
+	function setInteractionEnabled(enabled: boolean) {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return
+		interactionEnabled = enabled
+		if (enabled) {
+			editorCanvas.skipTargetFind = false
+			setTool(tool.value)
+			return
+		}
+
+		setTool('select')
+		editorCanvas.discardActiveObject()
+		editorCanvas.isDrawingMode = false
+		editorCanvas.selection = false
+		editorCanvas.skipTargetFind = true
+		for (const object of annotationObjects()) {
+			object.selectable = false
+			object.evented = false
+		}
+		updateCropUi()
+		editorCanvas.defaultCursor = 'default'
+		editorCanvas.hoverCursor = 'default'
+		editorCanvas.moveCursor = 'default'
+		syncSelectionProperties()
+		editorCanvas.requestRenderAll()
+	}
+
+	function fitToViewport(width: number, height: number) {
+		if (!canvas.value || !originalWidth.value || !originalHeight.value) return
+		fitScale.value = Math.min(
+			Math.max(1, width) / originalWidth.value,
+			Math.max(1, height) / originalHeight.value,
+		)
+		if (isFit.value) {
+			zoom.value = fitScale.value
+			applyDisplayScale()
+		}
+	}
+
+	function setZoom(nextZoom: number) {
+		isFit.value = false
+		zoom.value = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, nextZoom))
+		applyDisplayScale()
+	}
+
+	function setFit() {
+		isFit.value = true
+		zoom.value = fitScale.value
+		applyDisplayScale()
+	}
+
+	function applyDisplayScale() {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return
+		const displayScale = zoom.value
+		const maximumRenderScale = Math.sqrt(
+			MAX_RENDERED_CANVAS_PIXELS / (originalWidth.value * originalHeight.value),
+		)
+		const renderScale = Math.min(displayScale, maximumRenderScale)
+		editorCanvas.setDimensions(
+			{
+				width: Math.max(1, Math.round(originalWidth.value * renderScale)),
+				height: Math.max(1, Math.round(originalHeight.value * renderScale)),
+			},
+			{ backstoreOnly: true },
+		)
+		editorCanvas.setDimensions(
+			{
+				width: Math.max(1, Math.round(originalWidth.value * displayScale)),
+				height: Math.max(1, Math.round(originalHeight.value * displayScale)),
+			},
+			{ cssOnly: true },
+		)
+		editorCanvas.setViewportTransform([renderScale, 0, 0, renderScale, 0, 0])
+		for (const object of annotationObjects()) styleObjectControls(object)
+		styleCropControls()
+		editorCanvas.calcOffset()
+		editorCanvas.requestRenderAll()
+	}
+
+	function styleObjectControls(object: FabricObject) {
+		const displayScale = Math.max(zoom.value, 0.01)
+		const renderScale = Math.max(canvas.value?.getZoom() ?? 1, 0.01)
+		const controlScale = renderScale / displayScale
+		object.set({
+			borderColor: SELECTION_COLOR,
+			borderScaleFactor: 2 * controlScale,
+			cornerColor: SELECTION_COLOR,
+			cornerSize: CONTROL_SIZE * controlScale,
+			cornerStrokeColor: '#ffffff',
+			cornerStyle: 'circle',
+			padding: 3 * controlScale,
+			touchCornerSize: CONTROL_TOUCH_SIZE * controlScale,
+			transparentCorners: false,
+		})
+		object.setControlsVisibility({
+			mb: true,
+			ml: true,
+			mr: true,
+			mt: true,
+			mtr: true,
+		})
+		if (fabric) {
+			for (const key of ['ml', 'mr'] as const) {
+				object.controls[key].actionHandler = fabric.controlsUtils.scalingX
+				object.controls[key].cursorStyleHandler = fabric.controlsUtils.scaleCursorStyleHandler
+				object.controls[key].getActionName = () => 'scaleX'
+			}
+			for (const key of ['mt', 'mb'] as const) {
+				object.controls[key].actionHandler = fabric.controlsUtils.scalingY
+				object.controls[key].cursorStyleHandler = fabric.controlsUtils.scaleCursorStyleHandler
+				object.controls[key].getActionName = () => 'scaleY'
+			}
+		}
+		if (object.controls.mtr) {
+			object.controls.mtr.offsetY = -28 * controlScale
+			object.controls.mtr.sizeX = 10 * controlScale
+			object.controls.mtr.sizeY = 10 * controlScale
+		}
+		object.setCoords()
+	}
+
+	async function exportPng() {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) throw new Error('Screenshot editor is not ready')
+		const activeObject = editorCanvas.getActiveObject()
+		editorCanvas.discardActiveObject()
+		for (const shade of cropShade) shade.visible = false
+		if (cropSelection) cropSelection.visible = false
+		editorCanvas.requestRenderAll()
+		const crop = cropRect.value
+		let blob: Blob | null = null
+		try {
+			const displayViewportTransform = editorCanvas.viewportTransform
+			const blobPromise = (() => {
+				editorCanvas.setViewportTransform([1, 0, 0, 1, 0, 0])
+				try {
+					return editorCanvas.toBlob({
+						format: 'png',
+						multiplier: 1,
+						left: crop.left,
+						top: crop.top,
+						width: crop.width,
+						height: crop.height,
+					})
+				} finally {
+					editorCanvas.setViewportTransform(displayViewportTransform)
+				}
+			})()
+			blob = await blobPromise
+		} finally {
+			updateCropUi()
+			if (activeObject && activeObject !== cropSelection) {
+				editorCanvas.setActiveObject(activeObject)
+			} else {
+				updateActiveCropSelection()
+			}
+			editorCanvas.requestRenderAll()
+		}
+		if (!blob) throw new Error('Could not export edited screenshot')
+		return new Uint8Array(await blob.arrayBuffer())
+	}
+
+	function handleKeyboardShortcut(event: KeyboardEvent) {
+		const activeObject = canvas.value?.getActiveObject() as
+			| (EditorFabricObject & { isEditing?: boolean; exitEditing?: () => void })
+			| undefined
+		if (activeObject?.isEditing && event.key === 'Escape') {
+			event.preventDefault()
+			activeObject.exitEditing?.()
+			canvas.value?.discardActiveObject()
+			canvas.value?.requestRenderAll()
+			return true
+		}
+		if (event.key === 'Escape') {
+			event.preventDefault()
+			if (cropDrawingStart) {
+				cancelCropDrawing()
+				canvas.value?.requestRenderAll()
+				return true
+			}
+			if (erasing) {
+				finishErasing()
+				return true
+			}
+			if (drawingObject) {
+				canvas.value?.remove(drawingObject)
+				drawingObject = undefined
+				drawingStart = undefined
+				constructingObject = false
+				canvas.value?.requestRenderAll()
+				return true
+			}
+			if (canvas.value?.getActiveObjects().length) {
+				canvas.value.discardActiveObject()
+				canvas.value.requestRenderAll()
+				return true
+			}
+			if (tool.value !== 'select') {
+				setTool('select')
+				return true
+			}
+			return false
+		}
+		if (activeObject?.isEditing) return false
+		if (isTypingTarget(event.target)) return false
+
+		const modifier = event.metaKey || event.ctrlKey
+		const key = event.key.toLowerCase()
+		if (modifier && key === 'z') {
+			event.preventDefault()
+			void (event.shiftKey ? redo() : undo())
+			return true
+		}
+		if (event.ctrlKey && key === 'y') {
+			event.preventDefault()
+			void redo()
+			return true
+		}
+		if (event.key === 'Delete' || event.key === 'Backspace') {
+			event.preventDefault()
+			deleteSelection()
+			return true
+		}
+		if (!modifier && !event.altKey) {
+			const shortcutTool = TOOL_SHORTCUTS[key]
+			if (shortcutTool) {
+				event.preventDefault()
+				setTool(shortcutTool)
+				return true
+			}
+		}
+		return false
+	}
+
+	function isTextEditing() {
+		return Boolean(
+			(canvas.value?.getActiveObject() as { isEditing?: boolean } | undefined)?.isEditing,
+		)
+	}
+
+	function annotationObjects() {
+		return (canvas.value?.getObjects() ?? []).filter(isAnnotationObject) as EditorFabricObject[]
+	}
+
+	function isAnnotationObject(object: FabricObject) {
+		return (
+			object !== background && object !== cropSelection && !cropShade.includes(object as FabricRect)
+		)
+	}
+
+	async function dispose() {
+		await canvas.value?.dispose()
+		canvas.value = undefined
+		background = undefined
+		cropSelection = undefined
+		cropShade = []
+		sourceImage = undefined
+		if (sourceUrl) URL.revokeObjectURL(sourceUrl)
+		sourceUrl = undefined
+		history.value = []
+		historyIndex.value = -1
+		zoom.value = 1
+		fitScale.value = 1
+		isFit.value = true
+		originalWidth.value = 0
+		originalHeight.value = 0
+		cropRect.value = { left: 0, top: 0, width: 0, height: 0 }
+		selectedPropertyKind.value = undefined
+		selectionCount.value = 0
+		propertyEditStart = undefined
+		erasing = false
+		erasedDuringGesture = false
+		cropDrawingStart = undefined
+		cropDrawingPrevious = undefined
+		interactionEnabled = true
+	}
+
+	return {
+		loading,
+		tool,
+		color,
+		strokeWidth,
+		fontSize,
+		censorMode,
+		eraserMode,
+		zoom,
+		fitScale,
+		isFit,
+		canUndo,
+		canRedo,
+		canDelete,
+		canZoomOut,
+		canZoomIn,
+		hasColorProperty,
+		propertyValueKind,
+		showCensorMode,
+		showEraserMode,
+		showCropControls,
+		cropWidth,
+		cropHeight,
+		canResetCrop,
+		initialize,
+		dispose,
+		setTool,
+		updateColor,
+		updateStrokeWidth,
+		updateFontSize,
+		beginPropertyEdit,
+		commitPropertyEdit,
+		deleteSelection,
+		resetCrop,
+		undo,
+		redo,
+		discardChanges,
+		setInteractionEnabled,
+		fitToViewport,
+		setZoom,
+		setFit,
+		exportPng,
+		handleKeyboardShortcut,
+		isTextEditing,
+		resetHistory,
+	}
+}
+
+function isSourceRect(value: unknown): value is ScreenshotEditorSourceRect {
+	if (!value || typeof value !== 'object') return false
+	const rect = value as Partial<ScreenshotEditorSourceRect>
+	return (
+		typeof rect.left === 'number' &&
+		Number.isFinite(rect.left) &&
+		typeof rect.top === 'number' &&
+		Number.isFinite(rect.top) &&
+		typeof rect.width === 'number' &&
+		Number.isFinite(rect.width) &&
+		rect.width > 0 &&
+		typeof rect.height === 'number' &&
+		Number.isFinite(rect.height) &&
+		rect.height > 0
+	)
+}
+
+function setEditorMetadata(
+	object: FabricObject,
+	kind: ScreenshotEditorObjectKind,
+	sourceRect?: ScreenshotEditorSourceRect,
+) {
+	const editorObject = object as EditorFabricObject
+	editorObject.editorKind = kind
+	editorObject.sourceRect = sourceRect
+}
+
+function boundingRectsOverlap(
+	left: { left: number; top: number; width: number; height: number },
+	right: { left: number; top: number; width: number; height: number },
+) {
+	return (
+		left.left <= right.left + right.width &&
+		left.left + left.width >= right.left &&
+		left.top <= right.top + right.height &&
+		left.top + left.height >= right.top
+	)
+}
+
+function normalizedRect(start: { x: number; y: number }, end: { x: number; y: number }) {
+	return {
+		left: Math.min(start.x, end.x),
+		top: Math.min(start.y, end.y),
+		width: Math.abs(end.x - start.x),
+		height: Math.abs(end.y - start.y),
+	}
+}
+
+function loadImage(url: string) {
+	return new Promise<HTMLImageElement>((resolve, reject) => {
+		const image = new Image()
+		image.onload = () => resolve(image)
+		image.onerror = () => reject(new Error('Could not load screenshot image'))
+		image.src = url
+	})
+}
+
+function hexToRgba(hex: string, alpha: number) {
+	const normalized = hex.replace('#', '')
+	const red = Number.parseInt(normalized.slice(0, 2), 16)
+	const green = Number.parseInt(normalized.slice(2, 4), 16)
+	const blue = Number.parseInt(normalized.slice(4, 6), 16)
+	return `rgba(${red}, ${green}, ${blue}, ${alpha})`
+}
+
+function colorToHex(color: unknown) {
+	if (typeof color !== 'string') return undefined
+	if (/^#[\da-f]{6}$/i.test(color)) return color
+	if (/^#[\da-f]{3}$/i.test(color)) {
+		return `#${color
+			.slice(1)
+			.split('')
+			.map((character) => character.repeat(2))
+			.join('')}`
+	}
+	const components = color
+		.match(/[\d.]+/g)
+		?.slice(0, 3)
+		.map(Number)
+	if (!components || components.length !== 3) return undefined
+	return `#${components
+		.map((component) => Math.round(component).toString(16).padStart(2, '0'))
+		.join('')}`
+}
+
+function isPropertyKind(
+	kind: ScreenshotEditorObjectKind | undefined,
+): kind is ScreenshotEditorPropertyKind {
+	return (
+		kind === 'arrow' ||
+		kind === 'censor' ||
+		kind === 'ellipse' ||
+		kind === 'highlight' ||
+		kind === 'pen' ||
+		kind === 'rectangle' ||
+		kind === 'text'
+	)
+}
+
+function isTypingTarget(target: EventTarget | null) {
+	return (
+		target instanceof HTMLInputElement ||
+		target instanceof HTMLTextAreaElement ||
+		target instanceof HTMLSelectElement ||
+		(target instanceof HTMLElement && target.isContentEditable)
+	)
+}
+
+function serializeSnapshot(entry: EditorHistoryEntry) {
+	return JSON.stringify(entry)
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 4b2ddfcd39..dd0bc4cddc 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -6,6 +6,13 @@ export * from './changelog'
 export * from './chart'
 export * from './content'
 export * from './external_files'
+export { default as ImageViewerEditor } from './image-viewer-editor/index.vue'
+export type {
+	ImageViewerEditorData,
+	ImageViewerEditorItem,
+	ImageViewerEditorSavePayload,
+	ImageViewerEditorSource,
+} from './image-viewer-editor/types'
 export * from './modal'
 export * from './nav'
 export * from './notifications'
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index c5cb846bcd..80be8dfcfa 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -1,6 +1,6 @@
 <template>
 	<Teleport to="body">
-		<div v-if="open" class="modal-root">
+		<div v-if="open" class="modal-root" data-modal-root :data-modal-id="modalId">
 			<div
 				:class="{ shown: visible }"
 				class="tauri-overlay"
@@ -267,6 +267,12 @@ function getFocusableElements(): HTMLElement[] {
 	return Array.from(modalBodyRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
 }
 
+function renderedModalDepth(): number {
+	return Array.from(document.querySelectorAll<HTMLElement>('[data-modal-root]')).filter(
+		(root) => root.dataset.modalId !== modalId,
+	).length
+}
+
 function show(event?: MouseEvent) {
 	if (hideTimeout) {
 		clearTimeout(hideTimeout)
@@ -274,7 +280,7 @@ function show(event?: MouseEvent) {
 	}
 	props.onShow?.()
 	const wasEmpty = modalStackSize() === 0
-	stackDepth.value = modalStackSize()
+	stackDepth.value = Math.max(modalStackSize(), renderedModalDepth())
 	open.value = true
 	previousFocusEl = document.activeElement
 	pushModal()
diff --git a/packages/ui/src/composables/modal-stack.ts b/packages/ui/src/composables/modal-stack.ts
index edf1ae3276..9321ebf968 100644
--- a/packages/ui/src/composables/modal-stack.ts
+++ b/packages/ui/src/composables/modal-stack.ts
@@ -1,8 +1,23 @@
 import { computed, type Ref, ref } from 'vue'
 
 const isClient = typeof window !== 'undefined'
-const stack: symbol[] = []
-const stackSizeRef = ref(0)
+
+type ModalStackState = {
+	stack: symbol[]
+	stackSizeRef: Ref<number>
+}
+
+const MODAL_STACK_STATE_KEY = '__modrinth_ui_modal_stack_state__' as const
+const globalScope = globalThis as typeof globalThis & {
+	[MODAL_STACK_STATE_KEY]?: ModalStackState
+}
+const modalStackState: ModalStackState = globalScope[MODAL_STACK_STATE_KEY] ?? {
+	stack: [],
+	stackSizeRef: ref(0),
+}
+globalScope[MODAL_STACK_STATE_KEY] = modalStackState
+
+const { stack, stackSizeRef } = modalStackState
 
 export function useModalStack() {
 	const id = Symbol()
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index 5f0cb145df..a2c46a1c2f 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -255,7 +255,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		:provided-message="lockedMessages?.providedBy"
 	/>
 
-	<div class="search [overflow-anchor:none]">
+	<div class="search mt-1 [overflow-anchor:none]">
 		<section v-if="ctx.loading.value" class="offline">
 			<component :is="ctx.loadingComponent ?? LoadingIndicator" />
 		</section>
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 687b410000..36d248529c 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -14,49 +14,51 @@
 			@dismiss="ctx.onDismissCrash?.()"
 		/>
 
-		<div class="flex items-center gap-2">
-			<Input
-				v-model="searchQuery"
-				:icon="SearchIcon"
-				placeholder="Search logs"
-				wrapper-class="flex-1"
-				size="medium"
-				clearable
-			/>
-			<div v-if="ctx.logSources?.value && ctx.activeLogSourceIndex" class="w-[220px]">
-				<Combobox
-					:model-value="ctx.activeLogSourceIndex.value"
-					:options="logSourceOptions"
-					trigger-size="lg"
-					@update:model-value="(v) => (ctx.activeLogSourceIndex!.value = v)"
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2">
+				<Input
+					v-model="searchQuery"
+					:icon="SearchIcon"
+					placeholder="Search logs"
+					wrapper-class="flex-1"
+					size="medium"
+					clearable
+				/>
+				<div v-if="ctx.logSources?.value && ctx.activeLogSourceIndex" class="w-[220px]">
+					<Combobox
+						:model-value="ctx.activeLogSourceIndex.value"
+						:options="logSourceOptions"
+						trigger-size="lg"
+						@update:model-value="(v) => (ctx.activeLogSourceIndex!.value = v)"
+					/>
+				</div>
+			</div>
+
+			<div class="flex items-center justify-between">
+				<ConsoleFilterPills
+					v-model="activeFilters"
+					:present-levels="presentLevels"
+					@toggle="handleFilterToggle"
+				/>
+				<ConsoleActionButtons
+					:show-clear="isLiveSource"
+					:has-logs="hasLogs"
+					:share-disabled="resolvedShareDisabled"
+					:sharing="isSharing"
+					:fullscreen="isFullscreen"
+					:clear-disabled="resolvedClearDisabled"
+					:clear-disabled-tooltip="resolvedClearDisabledTooltip"
+					:show-delete="showDelete"
+					:delete-disabled="resolvedDeleteDisabled"
+					:delete-disabled-tooltip="ctx.deleteDisabledTooltip"
+					@clear="handleClear"
+					@share="handleShare"
+					@toggle-fullscreen="toggleFullscreen"
+					@delete="handleDelete"
 				/>
 			</div>
 		</div>
 
-		<div class="flex items-center justify-between">
-			<ConsoleFilterPills
-				v-model="activeFilters"
-				:present-levels="presentLevels"
-				@toggle="handleFilterToggle"
-			/>
-			<ConsoleActionButtons
-				:show-clear="isLiveSource"
-				:has-logs="hasLogs"
-				:share-disabled="resolvedShareDisabled"
-				:sharing="isSharing"
-				:fullscreen="isFullscreen"
-				:clear-disabled="resolvedClearDisabled"
-				:clear-disabled-tooltip="resolvedClearDisabledTooltip"
-				:show-delete="showDelete"
-				:delete-disabled="resolvedDeleteDisabled"
-				:delete-disabled-tooltip="ctx.deleteDisabledTooltip"
-				@clear="handleClear"
-				@share="handleShare"
-				@toggle-fullscreen="toggleFullscreen"
-				@delete="handleDelete"
-			/>
-		</div>
-
 		<BaseTerminal
 			ref="terminalRef"
 			class="min-h-0 flex-1"
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index fb47d43da8..dc674e51ae 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -936,8 +936,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 				/>
 
 				<template v-if="ctx.items.value.length > 0">
-					<div class="flex flex-col gap-4">
-						<span v-if="ctx.managedContent.value" class="text-xl font-semibold text-contrast">
+					<div class="flex flex-col gap-2">
+						<span v-if="ctx.managedContent.value" class="mb-2 text-xl font-semibold text-contrast">
 							{{ formatMessage(messages.additionalContent) }}
 						</span>
 
@@ -1217,6 +1217,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 
 						<ContentCardTable
 							v-model:selected-ids="selectedIds"
+							class="mt-2"
 							:items="tableItems"
 							:show-selection="true"
 							@update:enabled="handleToggleEnabledById"
diff --git a/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
index 0aaae57c2c..52666242d8 100644
--- a/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
+++ b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { SearchIcon } from '@modrinth/assets'
 import Fuse from 'fuse.js/dist/fuse.basic'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
-import Button from '#ui/components/base/buttons/Button.vue'
+import CheckCircleButton from '#ui/components/base/buttons/CheckCircleButton.vue'
 import Input from '#ui/components/base/inputs/Input.vue'
 import {
 	buildLocaleMessages,
@@ -71,7 +71,7 @@ type LocaleInfo = {
 	category: Category
 	tag: string
 	displayName: string
-	browserDisplayName: string
+	translatedName: string
 	flagUrl?: string
 	searchTerms?: string[]
 	coverage?: LanguageCoverageStats
@@ -82,34 +82,6 @@ const localeFlagRegions: Record<string, string> = {
 	'sr-CS': 'rs',
 }
 
-const $browserLocales = ref([props.currentLocale])
-
-onMounted(() => {
-	$browserLocales.value = navigator.languages.length
-		? [...navigator.languages]
-		: [navigator.language]
-})
-
-const $browserDisplayNames = computed(() => {
-	try {
-		return new Intl.DisplayNames($browserLocales.value, { type: 'language' })
-	} catch {
-		return undefined
-	}
-})
-
-function getBrowserDisplayName(tag: string, fallback: string): string {
-	try {
-		return $browserDisplayNames.value?.of(tag) ?? fallback
-	} catch {
-		try {
-			return $browserDisplayNames.value?.of(tag.split('-')[0]) ?? fallback
-		} catch {
-			return fallback
-		}
-	}
-}
-
 function getFlagUrl(tag: string): string | undefined {
 	const region = localeFlagRegions[tag] ?? tag.split('-').at(-1)
 	if (!region || !/^[a-z]{2}$/i.test(region)) return undefined
@@ -125,14 +97,13 @@ const $locales = computed(() => {
 		const meta = localeMetas[tag] ?? null
 		const displayName = meta?.displayName ?? loc.name
 		const translatedName = formatMessage(loc.translatedName)
-		const browserDisplayName = getBrowserDisplayName(tag, translatedName)
 		const searchTerms = meta?.searchTerms === '-' ? undefined : meta?.searchTerms?.split('\n')
 
 		result.push({
 			tag,
 			category: 'default',
 			displayName,
-			browserDisplayName,
+			translatedName,
 			flagUrl: getFlagUrl(tag),
 			searchTerms,
 			coverage: props.coverageByLocale?.[tag],
@@ -149,7 +120,7 @@ const isQueryEmpty = () => $query.value.trim().length === 0
 const fuse = computed(
 	() =>
 		new Fuse<LocaleInfo>($locales.value, {
-			keys: ['tag', 'displayName', 'browserDisplayName', 'searchTerms'],
+			keys: ['tag', 'displayName', 'translatedName', 'searchTerms'],
 			threshold: 0.4,
 			distance: 100,
 		}),
@@ -215,18 +186,16 @@ function onItemClick(e: MouseEvent, loc: LocaleInfo) {
 	changeLocale(loc.tag)
 }
 
-function showBrowserDisplayName(loc: LocaleInfo): boolean {
-	return (
-		loc.browserDisplayName.localeCompare(loc.displayName, undefined, { sensitivity: 'base' }) !== 0
-	)
+function showTranslatedName(loc: LocaleInfo): boolean {
+	return loc.translatedName.localeCompare(loc.displayName, undefined, { sensitivity: 'base' }) !== 0
 }
 
 function getItemLabel(loc: LocaleInfo) {
 	const coverageLabel = loc.coverage
 		? `. ${formatMessage(messages.coverageLabel, { percentage: loc.coverage.percentage })}`
 		: ''
-	const browserDisplayName = showBrowserDisplayName(loc) ? `. ${loc.browserDisplayName}` : ''
-	return `${loc.displayName}${browserDisplayName}${coverageLabel}`
+	const translatedName = showTranslatedName(loc) ? `. ${loc.translatedName}` : ''
+	return `${loc.displayName}${translatedName}${coverageLabel}`
 }
 
 function getCoverageTooltip(coverage: LanguageCoverageStats): string {
@@ -272,7 +241,12 @@ function getCategoryName(category: Category): string {
 			</div>
 		</div>
 
-		<div ref="$languagesList" class="flex flex-col gap-2.5">
+		<div
+			ref="$languagesList"
+			role="radiogroup"
+			:aria-label="getCategoryName(isQueryEmpty() ? 'default' : 'searchResult')"
+			class="flex flex-col gap-1"
+		>
 			<template v-for="[category, categoryLocales] in $displayCategories" :key="category">
 				<strong class="mt-4 font-semibold text-contrast">
 					{{ getCategoryName(category) }}
@@ -287,18 +261,10 @@ function getCategoryName(category: Category): string {
 				</div>
 
 				<template v-for="loc in categoryLocales" :key="loc.tag">
-					<Button
-						:type="$activeLocale === loc.tag ? 'colored' : 'base'"
-						:color="$activeLocale === loc.tag ? 'green' : undefined"
-						:aria-pressed="$activeLocale === loc.tag"
+					<CheckCircleButton
+						:checked="$activeLocale === loc.tag"
 						:disabled="isChangingLocale() && $changingTo !== loc.tag"
 						:aria-label="getItemLabel(loc)"
-						class="w-full !justify-start !gap-2 !text-left sm:!h-10"
-						:class="
-							$activeLocale === loc.tag
-								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)]'
-								: ''
-						"
 						@click="(e) => onItemClick(e, loc)"
 					>
 						<img
@@ -313,10 +279,10 @@ function getCategoryName(category: Category): string {
 						<span class="flex min-w-0 flex-1 items-baseline gap-2 overflow-hidden">
 							<span class="truncate text-sm sm:text-base">{{ loc.displayName }}</span>
 							<span
-								v-if="showBrowserDisplayName(loc)"
+								v-if="showTranslatedName(loc)"
 								class="truncate text-xs font-normal text-secondary sm:text-sm"
 							>
-								{{ loc.browserDisplayName }}
+								{{ loc.translatedName }}
 							</span>
 						</span>
 
@@ -327,7 +293,7 @@ function getCategoryName(category: Category): string {
 						>
 							{{ loc.coverage.percentage }}%
 						</span>
-					</Button>
+					</CheckCircleButton>
 				</template>
 			</template>
 		</div>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 8575859fa8..243ba8e9b0 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2018,6 +2018,117 @@
   "icon-select.select": {
     "defaultMessage": "Select icon"
   },
+  "image-viewer.close": {
+    "defaultMessage": "Close"
+  },
+  "image-viewer.edit": {
+    "defaultMessage": "Edit"
+  },
+  "image-viewer.editor.censor.blur": {
+    "defaultMessage": "Blur"
+  },
+  "image-viewer.editor.censor.mode": {
+    "defaultMessage": "Censor type"
+  },
+  "image-viewer.editor.censor.solid": {
+    "defaultMessage": "Solid"
+  },
+  "image-viewer.editor.colour": {
+    "defaultMessage": "Colour"
+  },
+  "image-viewer.editor.crop.dimensions": {
+    "defaultMessage": "{width} × {height} px"
+  },
+  "image-viewer.editor.crop.reset": {
+    "defaultMessage": "Reset crop"
+  },
+  "image-viewer.editor.delete-selection": {
+    "defaultMessage": "Delete selected annotation"
+  },
+  "image-viewer.editor.eraser.area": {
+    "defaultMessage": "Area"
+  },
+  "image-viewer.editor.eraser.element": {
+    "defaultMessage": "Element"
+  },
+  "image-viewer.editor.eraser.mode": {
+    "defaultMessage": "Eraser mode"
+  },
+  "image-viewer.editor.image-editing-tools": {
+    "defaultMessage": "Image editing tools"
+  },
+  "image-viewer.editor.more-save-options": {
+    "defaultMessage": "More save options"
+  },
+  "image-viewer.editor.overwrite": {
+    "defaultMessage": "Overwrite"
+  },
+  "image-viewer.editor.redo": {
+    "defaultMessage": "Redo"
+  },
+  "image-viewer.editor.save-as-new": {
+    "defaultMessage": "Save copy"
+  },
+  "image-viewer.editor.save-image": {
+    "defaultMessage": "Save image"
+  },
+  "image-viewer.editor.size": {
+    "defaultMessage": "Size"
+  },
+  "image-viewer.editor.tool.arrow": {
+    "defaultMessage": "Arrow"
+  },
+  "image-viewer.editor.tool.censor": {
+    "defaultMessage": "Censor"
+  },
+  "image-viewer.editor.tool.crop": {
+    "defaultMessage": "Crop"
+  },
+  "image-viewer.editor.tool.ellipse": {
+    "defaultMessage": "Ellipse"
+  },
+  "image-viewer.editor.tool.eraser": {
+    "defaultMessage": "Eraser"
+  },
+  "image-viewer.editor.tool.highlight": {
+    "defaultMessage": "Highlight"
+  },
+  "image-viewer.editor.tool.pen": {
+    "defaultMessage": "Pen"
+  },
+  "image-viewer.editor.tool.rectangle": {
+    "defaultMessage": "Rectangle"
+  },
+  "image-viewer.editor.tool.select": {
+    "defaultMessage": "Select"
+  },
+  "image-viewer.editor.tool.text": {
+    "defaultMessage": "Text"
+  },
+  "image-viewer.editor.undo": {
+    "defaultMessage": "Undo"
+  },
+  "image-viewer.editor.width": {
+    "defaultMessage": "Width"
+  },
+  "image-viewer.editor.zoom-fit": {
+    "defaultMessage": "Fit"
+  },
+  "image-viewer.editor.zoom-fit-workspace": {
+    "defaultMessage": "Fit to workspace"
+  },
+  "image-viewer.editor.zoom-in": {
+    "defaultMessage": "Zoom in"
+  },
+  "image-viewer.editor.zoom-out": {
+    "defaultMessage": "Zoom out"
+  },
+  "image-viewer.next": {
+    "defaultMessage": "Next image"
+  },
+  "image-viewer.previous": {
+    "defaultMessage": "Previous image"
+  },
   "input.search-version.placeholder": {
     "defaultMessage": "Search version..."
   },
diff --git a/packages/ui/src/providers/image-viewer-editor.ts b/packages/ui/src/providers/image-viewer-editor.ts
new file mode 100644
index 0000000000..37e2f443f5
--- /dev/null
+++ b/packages/ui/src/providers/image-viewer-editor.ts
@@ -0,0 +1,15 @@
+import type {
+	ImageViewerEditorData,
+	ImageViewerEditorSource,
+} from '#ui/components/image-viewer-editor/types'
+
+import { createContext } from '.'
+
+export interface ImageViewerEditorContext {
+	loadEditorData: (source: ImageViewerEditorSource) => Promise<ImageViewerEditorData>
+	onShow?: () => void
+	onHide?: () => void
+}
+
+export const [injectImageViewerEditor, provideImageViewerEditor] =
+	createContext<ImageViewerEditorContext>('ImageViewerEditor')
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index 058648865c..58ea8b7e53 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -8,6 +8,7 @@ export * from './file-drop'
 export * from './file-picker'
 export * from './hosting-purchase-intent'
 export * from './i18n'
+export * from './image-viewer-editor'
 export * from './instance-import'
 export * from './loading-state'
 export * from './modal-behavior'
diff --git a/packages/ui/src/stories/base/ImageViewerEditor.stories.ts b/packages/ui/src/stories/base/ImageViewerEditor.stories.ts
new file mode 100644
index 0000000000..ad8b1260b8
--- /dev/null
+++ b/packages/ui/src/stories/base/ImageViewerEditor.stories.ts
@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import { Button } from '../../components/base/buttons'
+import ImageViewerEditor from '../../components/image-viewer-editor/index.vue'
+import type { ImageViewerEditorItem } from '../../components/image-viewer-editor/types'
+import { provideImageViewerEditor } from '../../providers'
+
+const IMAGE_SVG = `
+	<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+		<defs>
+			<linearGradient id="sky" x1="0" y1="0" x2="1" y2="1">
+				<stop stop-color="#172554" />
+				<stop offset="1" stop-color="#14532d" />
+			</linearGradient>
+		</defs>
+		<rect width="1600" height="900" fill="url(#sky)" />
+		<circle cx="1260" cy="210" r="110" fill="#fde68a" opacity="0.9" />
+		<path d="M0 720 360 390 680 690 1040 330 1600 760V900H0Z" fill="#0f172a" />
+		<path d="M0 790 390 560 720 780 1110 510 1600 800V900H0Z" fill="#166534" />
+	</svg>
+`
+const IMAGE_URL = `data:image/svg+xml,${encodeURIComponent(IMAGE_SVG)}`
+const items: ImageViewerEditorItem[] = [
+	{
+		id: 'mountains',
+		src: IMAGE_URL,
+		alt: 'Stylised mountain landscape',
+		title: 'Mountain base at sunset',
+		description: 'Survival world · August 24 at 4:12 PM',
+		editorSource: { id: 'mountains', path: 'mountains.svg' },
+	},
+	{
+		id: 'valley',
+		src: IMAGE_URL,
+		alt: 'Stylised valley landscape',
+		title: 'View from the valley',
+		description: 'Survival world · August 24 at 4:18 PM',
+		editorSource: { id: 'valley', path: 'valley.svg' },
+	},
+]
+
+const meta = {
+	title: 'Base/ImageViewerEditor',
+	component: ImageViewerEditor,
+} satisfies Meta<typeof ImageViewerEditor>
+
+export default meta
+type Story = StoryObj<typeof ImageViewerEditor>
+
+function render(editor: 'enabled' | 'disabled') {
+	return () => ({
+		components: { Button, ImageViewerEditor },
+		setup() {
+			const viewer = ref<InstanceType<typeof ImageViewerEditor>>()
+			provideImageViewerEditor({
+				loadEditorData: async () => ({
+					source: new Blob([IMAGE_SVG], { type: 'image/svg+xml' }),
+				}),
+			})
+			return {
+				editor,
+				items,
+				open: () => viewer.value?.show(0),
+				openEditor: () => viewer.value?.edit(0),
+				viewer,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex gap-2">
+				<Button type="colored" color="brand" @click="open">Open image viewer</Button>
+				<Button v-if="editor === 'enabled'" type="outlined" @click="openEditor">
+					Open image editor
+				</Button>
+			</div>
+			<ImageViewerEditor ref="viewer" :items="items" :editor="editor" />
+		`,
+	})
+}
+
+export const ViewerOnly: Story = {
+	render: render('disabled'),
+}
+
+export const Editable: Story = {
+	render: render('enabled'),
+}
diff --git a/packages/ui/src/stories/buttons/CheckCircleButton.stories.ts b/packages/ui/src/stories/buttons/CheckCircleButton.stories.ts
new file mode 100644
index 0000000000..4996eb8965
--- /dev/null
+++ b/packages/ui/src/stories/buttons/CheckCircleButton.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CheckCircleButton from '../../components/base/buttons/CheckCircleButton.vue'
+
+const meta = {
+	title: 'Buttons/CheckCircleButton',
+	component: CheckCircleButton,
+	args: {
+		checked: false,
+		disabled: false,
+	},
+	render: (args) => ({
+		components: { CheckCircleButton },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<div class="w-96">
+				<CheckCircleButton v-bind="args">Fabric 26.2</CheckCircleButton>
+			</div>
+		`,
+	}),
+} satisfies Meta<typeof CheckCircleButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const States: Story = {
+	render: () => ({
+		components: { CheckCircleButton },
+		template: /*html*/ `
+			<div class="flex w-96 flex-col gap-1" role="radiogroup" aria-label="Example choices">
+				<CheckCircleButton :checked="true">Selected choice</CheckCircleButton>
+				<CheckCircleButton :checked="false">Unselected choice</CheckCircleButton>
+				<CheckCircleButton :checked="false" disabled>Disabled choice</CheckCircleButton>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/modal/NewModal.stories.ts b/packages/ui/src/stories/modal/NewModal.stories.ts
index 4eb09d7491..f2931cceae 100644
--- a/packages/ui/src/stories/modal/NewModal.stories.ts
+++ b/packages/ui/src/stories/modal/NewModal.stories.ts
@@ -57,6 +57,31 @@ export const WithActions: Story = {
 	}),
 }
 
+export const Stacked: Story = {
+	render: () => ({
+		components: { NewModal, Button },
+		setup() {
+			const parentModalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const childModalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const openParentModal = () => parentModalRef.value?.show()
+			const openChildModal = () => childModalRef.value?.show()
+			return { parentModalRef, childModalRef, openParentModal, openChildModal }
+		},
+		template: `
+			<div>
+				<Button type="colored" color="brand" @click="openParentModal">Open Parent Modal</Button>
+				<NewModal ref="parentModalRef" header="Parent Modal">
+					<p>The child modal should appear above this surface and backdrop.</p>
+					<Button type="colored" color="brand" @click="openChildModal">Open Child Modal</Button>
+				</NewModal>
+				<NewModal ref="childModalRef" header="Child Modal" max-width="500px">
+					<p>This modal is the topmost layer.</p>
+				</NewModal>
+			</div>
+		`,
+	}),
+}
+
 export const DangerFade: Story = {
 	render: () => ({
 		components: { NewModal, Button },
diff --git a/packages/ui/src/utils/ace-mode-mcfunction.ts b/packages/ui/src/utils/ace-mode-mcfunction.ts
new file mode 100644
index 0000000000..62d209fda1
--- /dev/null
+++ b/packages/ui/src/utils/ace-mode-mcfunction.ts
@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ace from 'ace-builds'
+
+ace['define'](
+	'ace/mode/mcfunction_highlight_rules',
+	['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
+	function (require: any, exports: any) {
+		const oop = require('ace/lib/oop')
+		const TextHighlightRules = require('ace/mode/text_highlight_rules').TextHighlightRules
+
+		const McfunctionHighlightRules = function (this: any) {
+			this.$rules = {
+				start: [
+					{
+						token: 'comment.doc',
+						regex: /^\s*#>.*$/.source,
+					},
+					{
+						token: 'comment',
+						regex: /^\s*#!.*$/.source,
+					},
+					{
+						token: 'comment',
+						regex: /^\s*##.*$/.source,
+					},
+					{
+						token: 'comment',
+						regex: /^\s*#(?![a-z0-9_.]+:).*$/i.source,
+					},
+					{
+						token: 'string',
+						regex: /"(?:\\.|[^"\\])*"/.source,
+					},
+					{
+						token: 'string',
+						regex: /'(?:\\.|[^'\\])*'/.source,
+					},
+					{
+						token: 'variable',
+						regex: /\$\([a-zA-Z0-9_]+\)/.source,
+					},
+					{
+						token: 'constant.language',
+						regex: /@[apers]\b/i.source,
+					},
+					{
+						token: 'constant.language',
+						regex: /\b[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\b/i.source,
+					},
+					{
+						token: 'support.constant',
+						regex: /#?[a-z0-9_.]+:[a-z0-9_./-]+/i.source,
+					},
+					{
+						token: 'keyword',
+						regex: /\brun\s+\/?[a-z][a-z0-9_]*/i.source,
+					},
+					{
+						token: 'constant.numeric',
+						regex: /[~^]-?(?:\d*\.)?\d+/.source,
+					},
+					{
+						token: 'keyword.operator',
+						regex: /[~^]/.source,
+					},
+					{
+						token: 'constant.numeric',
+						regex: /-?(?:\d*\.)?\d+[bdfils]?\b/i.source,
+					},
+					{
+						token: 'constant.language',
+						regex: /\.\.|\b(?:true|false)\b/i.source,
+					},
+					{
+						token: 'keyword',
+						regex: /^\s*\/?[a-z][a-z0-9_]*/i.source,
+					},
+				],
+			}
+			this.normalizeRules()
+		}
+
+		oop.inherits(McfunctionHighlightRules, TextHighlightRules)
+		exports.McfunctionHighlightRules = McfunctionHighlightRules
+	},
+)
+
+ace['define'](
+	'ace/mode/mcfunction',
+	['require', 'exports', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/mcfunction_highlight_rules'],
+	function (require: any, exports: any) {
+		const oop = require('ace/lib/oop')
+		const TextMode = require('ace/mode/text').Mode
+		const McfunctionHighlightRules =
+			require('ace/mode/mcfunction_highlight_rules').McfunctionHighlightRules
+
+		const Mode = function (this: any) {
+			this.HighlightRules = McfunctionHighlightRules
+			this.$id = 'ace/mode/mcfunction'
+		}
+
+		oop.inherits(Mode, TextMode)
+		exports.Mode = Mode
+	},
+)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bbb9f3068b..c58967540c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,6 +134,9 @@ importers:
       '@vueuse/core':
         specifier: ^11.1.0
         version: 11.3.0(vue@3.5.27(typescript@5.9.3))
+      ace-builds:
+        specifier: ^1.43.5
+        version: 1.43.6
       dayjs:
         specifier: ^1.11.10
         version: 1.11.19
@@ -173,6 +176,9 @@ importers:
       vue-virtual-scroller:
         specifier: v2.0.0-beta.8
         version: 2.0.0-beta.8(vue@3.5.27(typescript@5.9.3))
+      vue3-ace-editor:
+        specifier: ^2.2.4
+        version: 2.2.4(ace-builds@1.43.6)(vue@3.5.27(typescript@5.9.3))
       vuedraggable:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.27(typescript@5.9.3))
@@ -718,6 +724,9 @@ importers:
       flatpickr:
         specifier: ^4.6.13
         version: 4.6.13
+      fabric:
+        specifier: ^7.4.0
+        version: 7.4.0
       floating-vue:
         specifier: ^5.2.2
         version: 5.2.2(@nuxt/kit@3.21.0(magicast@0.5.1))(vue@3.5.27(typescript@5.9.3))
@@ -907,6 +916,9 @@ packages:
   '@apm-js-collab/tracing-hooks@0.3.1':
     resolution: {integrity: sha512-Vu1CbmPURlN5fTboVuKMoJjbO5qcq9fA5YXpskx3dXe/zTBvjODFoerw+69rVBlRLrJpwPqSDqEuJDEKIrTldw==}
 
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
   '@astrojs/check@0.9.6':
     resolution: {integrity: sha512-jlaEu5SxvSgmfGIFfNgcn5/f+29H61NJzEMfAZ82Xopr4XBchXB1GVlcJsE+elUlsYSbXlptZLX+JMG3b/wZEA==}
     hasBin: true
@@ -1244,6 +1256,34 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
   '@ctrl/tinycolor@4.2.0':
     resolution: {integrity: sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==}
     engines: {node: '>=14'}
@@ -5515,6 +5555,9 @@ packages:
   birpc@2.9.0:
     resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
 
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
   blake3-wasm@2.1.5:
     resolution: {integrity: sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==}
 
@@ -5551,6 +5594,9 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
@@ -5611,6 +5657,10 @@ packages:
   caniuse-lite@1.0.30001767:
     resolution: {integrity: sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==}
 
+  canvas@3.2.3:
+    resolution: {integrity: sha512-PzE5nJZPz72YUAfo8oTp0u3fqqY7IzlTubneAihqDYAUcBk7ryeCmBbdJBEdaH0bptSOe2VT2Zwcb3UaFyaSWw==}
+    engines: {node: ^18.12.0 || >= 20.9.0}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -5664,6 +5714,9 @@ packages:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
 
+  chownr@1.1.4:
+    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
+
   chownr@3.0.0:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
@@ -5918,9 +5971,17 @@ packages:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
@@ -5968,10 +6029,18 @@ packages:
   decode-named-character-reference@1.3.0:
     resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
 
+  decompress-response@6.0.0:
+    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
+    engines: {node: '>=10'}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
 
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -6463,6 +6532,10 @@ packages:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
 
+  expand-template@2.0.3:
+    resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
+    engines: {node: '>=6'}
+
   expressive-code@0.40.2:
     resolution: {integrity: sha512-1zIda2rB0qiDZACawzw2rbdBQiWHBT56uBctS+ezFe5XMAaFaHLnnSYND/Kd+dVzO9HfCXRDpzH3d+3fvOWRcw==}
 
@@ -6479,6 +6552,10 @@ packages:
   externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
 
+  fabric@7.4.0:
+    resolution: {integrity: sha512-NalYDc3eifTl1C33zryQwpH6+XA/2ClxQrH9vkASkZw3tbkRmorpikhYMmxhUTmi7O3e9ODz0vOT8qfaCh9IVA==}
+    engines: {node: '>=20.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -6619,6 +6696,9 @@ packages:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
 
+  fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+
   fs-extra@11.3.6:
     resolution: {integrity: sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==}
     engines: {node: '>=14.14'}
@@ -6683,6 +6763,9 @@ packages:
   git-url-parse@16.1.0:
     resolution: {integrity: sha512-cPLz4HuK86wClEW7iDdeAKcCVlWXmrLpb2L+G9goW0Z1dtpNS6BXXSOckUTlJT/LDQViE1QZKstNORzHsLnobw==}
 
+  github-from-package@0.0.0:
+    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
+
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -6860,6 +6943,10 @@ packages:
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
@@ -6888,6 +6975,10 @@ packages:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
 
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
   http-shutdown@1.2.2:
     resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -6914,6 +7005,10 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -7081,6 +7176,9 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-promise@2.2.2:
     resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
 
@@ -7189,6 +7287,15 @@ packages:
     resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
     engines: {node: '>=12.0.0'}
 
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -7779,6 +7886,10 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  mimic-response@3.1.0:
+    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
+    engines: {node: '>=10'}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -7816,6 +7927,9 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -7830,6 +7944,9 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
+  mkdirp-classic@0.5.3:
+    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
+
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
@@ -7877,6 +7994,9 @@ packages:
   nanotar@0.2.0:
     resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
 
+  napi-build-utils@2.0.0:
+    resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
+
   napi-postinstall@0.3.4:
     resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -7908,6 +8028,10 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
+  node-abi@3.94.0:
+    resolution: {integrity: sha512-W5ZNO5KRPB5TkYmGVD9F6YqhsglXJzE6etpbmT+f6EQElhiX/UTG551cnsRGvLG3fyZEg9HwaDmNmj5nwJ4z9g==}
+    engines: {node: '>=10'}
+
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
@@ -7982,6 +8106,9 @@ packages:
       '@types/node':
         optional: true
 
+  nwsapi@2.2.24:
+    resolution: {integrity: sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==}
+
   nypm@0.6.4:
     resolution: {integrity: sha512-1TvCKjZyyklN+JJj2TS3P4uSQEInrM/HkkuSXsEzm1ApPgBffOn8gFguNnZf07r/1X6vlryfIqMUkJKQMzlZiw==}
     engines: {node: '>=18'}
@@ -8502,6 +8629,12 @@ packages:
   preact@10.28.3:
     resolution: {integrity: sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==}
 
+  prebuild-install@7.1.3:
+    resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==}
+    engines: {node: '>=10'}
+    deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available.
+    hasBin: true
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -8713,6 +8846,10 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
   react-dom@19.2.8:
     resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
     peerDependencies:
@@ -8742,6 +8879,10 @@ packages:
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
   readable-stream@4.7.0:
     resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -8954,6 +9095,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
   rss@1.2.2:
     resolution: {integrity: sha512-xUhRTgslHeCBeHAqaWSbOYTydN2f0tAzNXvzh3stjz7QDhQMzdgHf3pfgNIngeytQflrFPfy6axHilTETr6gDg==}
 
@@ -8982,6 +9126,10 @@ packages:
     resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
     engines: {node: '>=11.0.0'}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -9107,6 +9255,12 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-concat@1.0.1:
+    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
+
+  simple-get@4.0.1:
+    resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
+
   simple-git@3.30.0:
     resolution: {integrity: sha512-q6lxyDsCmEal/MEGhP1aVyQ3oxnagGlBDOVSIB4XUVLl1iZh0Pah6ebC9V4xBap/RfgP2WlI8EKs0WS0rMEJHg==}
 
@@ -9285,6 +9439,10 @@ packages:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -9354,6 +9512,9 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   synckit@0.11.12:
     resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -9378,6 +9539,13 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  tar-fs@2.1.5:
+    resolution: {integrity: sha512-OboTd8mmMhZDNPV+UjQcK9yKAatXu2aJ+r1w4im1Otd4M4fl2hwvdoXUxIYHFTHWK/3y3FarBP70v3vwmGlOxw==}
+
+  tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
@@ -9446,6 +9614,13 @@ packages:
     resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -9461,9 +9636,17 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -9510,6 +9693,9 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tunnel-agent@0.6.0:
+    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
+
   turbo-darwin-64@2.8.2:
     resolution: {integrity: sha512-sumREbxABHxrWIwlK67sZEaDRE7+BFSU8gZj8OK+X7dLpgW1vTjsHzTECB5m2qzWlXHRdueAk8sKv7wyHqv9jw==}
     cpu: [x64]
@@ -10195,8 +10381,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-component-type-helpers@3.3.9:
-    resolution: {integrity: sha512-3c/UfMe0SqyEfcGTyH7mfshHagJ9QTCbppCb0/uGpHZpFug7+If3GeGZN7I0YheKEExemx3xldQPoO7PQSOLQg==}
+  vue-component-type-helpers@3.3.10:
+    resolution: {integrity: sha512-t7IQivQ3oD4D01b7s7a9AWzHAcr3DGBIa/1jZREsFQJcFgSL92gqUkqNiHTYgzTt7QDuJa0I9wCeDwEtZICoBQ==}
 
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
@@ -10311,6 +10497,10 @@ packages:
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
@@ -10320,6 +10510,10 @@ packages:
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
   webpack-sources@3.3.3:
     resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
     engines: {node: '>=10.13.0'}
@@ -10330,6 +10524,19 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -10452,6 +10659,10 @@ packages:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
   xml2js@0.6.2:
     resolution: {integrity: sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==}
     engines: {node: '>=4.0.0'}
@@ -10463,6 +10674,9 @@ packages:
     resolution: {integrity: sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==}
     engines: {node: '>=4.0'}
 
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   xss@1.0.15:
     resolution: {integrity: sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==}
     engines: {node: '>= 0.10.0'}
@@ -10574,6 +10788,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+    optional: true
+
   '@astrojs/check@0.9.6(prettier@3.8.1)(typescript@5.9.3)':
     dependencies:
       '@astrojs/language-server': 2.16.3(prettier@3.8.1)(typescript@5.9.3)
@@ -11062,6 +11285,31 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  '@csstools/color-helpers@5.1.0':
+    optional: true
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+    optional: true
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+    optional: true
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+    optional: true
+
+  '@csstools/css-tokenizer@3.0.4':
+    optional: true
+
   '@ctrl/tinycolor@4.2.0': {}
 
   '@dnd-kit/abstract@0.5.0':
@@ -13880,7 +14128,7 @@ snapshots:
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       type-fest: 2.19.0
       vue: 3.5.27(typescript@5.9.3)
-      vue-component-type-helpers: 3.3.9
+      vue-component-type-helpers: 3.3.10
 
   '@stripe/stripe-js@7.9.0': {}
 
@@ -15394,6 +15642,13 @@ snapshots:
 
   birpc@2.9.0: {}
 
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    optional: true
+
   blake3-wasm@2.1.5: {}
 
   boolbase@1.0.0: {}
@@ -15438,6 +15693,12 @@ snapshots:
 
   buffer-from@1.1.2: {}
 
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    optional: true
+
   buffer@6.0.3:
     dependencies:
       base64-js: 1.5.1
@@ -15504,6 +15765,12 @@ snapshots:
 
   caniuse-lite@1.0.30001767: {}
 
+  canvas@3.2.3:
+    dependencies:
+      node-addon-api: 7.1.1
+      prebuild-install: 7.1.3
+    optional: true
+
   ccount@2.0.1: {}
 
   chai@5.3.3:
@@ -15563,6 +15830,9 @@ snapshots:
     dependencies:
       readdirp: 5.0.0
 
+  chownr@1.1.4:
+    optional: true
+
   chownr@3.0.0: {}
 
   ci-info@2.0.0: {}
@@ -15815,8 +16085,20 @@ snapshots:
     dependencies:
       css-tree: 2.2.1
 
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+    optional: true
+
   csstype@3.2.3: {}
 
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+    optional: true
+
   dayjs@1.11.19: {}
 
   db0@0.3.4: {}
@@ -15835,8 +16117,16 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
+  decompress-response@6.0.0:
+    dependencies:
+      mimic-response: 3.1.0
+    optional: true
+
   deep-eql@5.0.2: {}
 
+  deep-extend@0.6.0:
+    optional: true
+
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -16609,6 +16899,9 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
+  expand-template@2.0.3:
+    optional: true
+
   expressive-code@0.40.2:
     dependencies:
       '@expressive-code/core': 0.40.2
@@ -16631,6 +16924,15 @@ snapshots:
       pathe: 1.1.2
       ufo: 1.6.3
 
+  fabric@7.4.0:
+    optionalDependencies:
+      canvas: 3.2.3
+      jsdom: 26.1.0(canvas@3.2.3)
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
@@ -16750,6 +17052,9 @@ snapshots:
 
   fresh@2.0.0: {}
 
+  fs-constants@1.0.0:
+    optional: true
+
   fs-extra@11.3.6:
     dependencies:
       graceful-fs: 4.2.11
@@ -16819,6 +17124,9 @@ snapshots:
     dependencies:
       git-up: 8.1.1
 
+  github-from-package@0.0.0:
+    optional: true
+
   github-slugger@2.0.0: {}
 
   glob-parent@5.1.2:
@@ -17121,6 +17429,11 @@ snapshots:
 
   hosted-git-info@2.8.9: {}
 
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+    optional: true
+
   html-escaper@3.0.3: {}
 
   html-minifier-terser@7.2.0:
@@ -17162,6 +17475,14 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   http-shutdown@1.2.2: {}
 
   https-proxy-agent@5.0.1:
@@ -17190,6 +17511,11 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
   ieee754@1.2.1: {}
 
   if-ci@3.0.0:
@@ -17342,6 +17668,9 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
+  is-potential-custom-element-name@1.0.1:
+    optional: true
+
   is-promise@2.2.2: {}
 
   is-reference@1.2.1:
@@ -17432,6 +17761,36 @@ snapshots:
 
   jsdoc-type-pratt-parser@4.8.0: {}
 
+  jsdom@26.1.0(canvas@3.2.3):
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.24
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.21.0
+      xml-name-validator: 5.0.0
+    optionalDependencies:
+      canvas: 3.2.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    optional: true
+
   jsesc@0.5.0: {}
 
   jsesc@3.1.0: {}
@@ -18250,6 +18609,9 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
+  mimic-response@3.1.0:
+    optional: true
+
   min-indent@1.0.1: {}
 
   miniflare@4.20260212.0:
@@ -18300,6 +18662,9 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimist@1.2.8:
+    optional: true
+
   minipass@7.1.2: {}
 
   minizlib@3.1.0:
@@ -18310,6 +18675,9 @@ snapshots:
 
   mitt@3.0.1: {}
 
+  mkdirp-classic@0.5.3:
+    optional: true
+
   mlly@1.8.0:
     dependencies:
       acorn: 8.15.0
@@ -18358,6 +18726,9 @@ snapshots:
 
   nanotar@0.2.0: {}
 
+  napi-build-utils@2.0.0:
+    optional: true
+
   napi-postinstall@0.3.4: {}
 
   natural-compare@1.4.0: {}
@@ -18479,6 +18850,11 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
+  node-abi@3.94.0:
+    dependencies:
+      semver: 7.8.5
+    optional: true
+
   node-addon-api@7.1.1: {}
 
   node-fetch-native@1.6.7: {}
@@ -18652,6 +19028,9 @@ snapshots:
       - xml2js
       - yaml
 
+  nwsapi@2.2.24:
+    optional: true
+
   nypm@0.6.4:
     dependencies:
       citty: 0.2.0
@@ -19212,6 +19591,22 @@ snapshots:
 
   preact@10.28.3: {}
 
+  prebuild-install@7.1.3:
+    dependencies:
+      detect-libc: 2.1.2
+      expand-template: 2.0.3
+      github-from-package: 0.0.0
+      minimist: 1.2.8
+      mkdirp-classic: 0.5.3
+      napi-build-utils: 2.0.0
+      node-abi: 3.94.0
+      pump: 3.0.3
+      rc: 1.2.8
+      simple-get: 4.0.1
+      tar-fs: 2.1.5
+      tunnel-agent: 0.6.0
+    optional: true
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.1:
@@ -19387,6 +19782,14 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.5
 
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+    optional: true
+
   react-dom@19.2.8(react@19.2.8):
     dependencies:
       react: 19.2.8
@@ -19430,6 +19833,13 @@ snapshots:
       string_decoder: 1.1.1
       util-deprecate: 1.0.2
 
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    optional: true
+
   readable-stream@4.7.0:
     dependencies:
       abort-controller: 3.0.0
@@ -19757,6 +20167,9 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.57.1
       fsevents: 2.3.3
 
+  rrweb-cssom@0.8.0:
+    optional: true
+
   rss@1.2.2:
     dependencies:
       mime-types: 2.1.13
@@ -19784,6 +20197,11 @@ snapshots:
 
   sax@1.4.4: {}
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+    optional: true
+
   scheduler@0.27.0: {}
 
   scslre@0.3.0:
@@ -20009,6 +20427,16 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-concat@1.0.1:
+    optional: true
+
+  simple-get@4.0.1:
+    dependencies:
+      decompress-response: 6.0.0
+      once: 1.4.0
+      simple-concat: 1.0.1
+    optional: true
+
   simple-git@3.30.0:
     dependencies:
       '@kwsites/file-exists': 1.1.1
@@ -20197,6 +20625,9 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
+  strip-json-comments@2.0.1:
+    optional: true
+
   strip-json-comments@3.1.1: {}
 
   strip-literal@3.1.0:
@@ -20273,6 +20704,9 @@ snapshots:
       picocolors: 1.1.1
       sax: 1.4.4
 
+  symbol-tree@3.2.4:
+    optional: true
+
   synckit@0.11.12:
     dependencies:
       '@pkgr/core': 0.2.9
@@ -20313,6 +20747,23 @@ snapshots:
 
   tapable@2.3.0: {}
 
+  tar-fs@2.1.5:
+    dependencies:
+      chownr: 1.1.4
+      mkdirp-classic: 0.5.3
+      pump: 3.0.3
+      tar-stream: 2.2.0
+    optional: true
+
+  tar-stream@2.2.0:
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.5
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    optional: true
+
   tar-stream@3.1.7:
     dependencies:
       b4a: 1.7.3
@@ -20393,6 +20844,14 @@ snapshots:
 
   tinyspy@4.0.4: {}
 
+  tldts-core@6.1.86:
+    optional: true
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+    optional: true
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -20403,8 +20862,18 @@ snapshots:
 
   totalist@3.0.1: {}
 
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+    optional: true
+
   tr46@0.0.3: {}
 
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+    optional: true
+
   trim-lines@3.0.1: {}
 
   trough@2.2.0: {}
@@ -20431,6 +20900,11 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tunnel-agent@0.6.0:
+    dependencies:
+      safe-buffer: 5.2.1
+    optional: true
+
   turbo-darwin-64@2.8.2:
     optional: true
 
@@ -21077,7 +21551,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-component-type-helpers@3.3.9: {}
+  vue-component-type-helpers@3.3.10: {}
 
   vue-confetti-explosion@1.0.2(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -21220,18 +21694,40 @@ snapshots:
 
   w3c-keyname@2.2.8: {}
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+    optional: true
+
   web-namespaces@2.0.1: {}
 
   web-vitals@5.1.0: {}
 
   webidl-conversions@3.0.1: {}
 
+  webidl-conversions@7.0.0:
+    optional: true
+
   webpack-sources@3.3.3: {}
 
   webpack-virtual-modules@0.5.0: {}
 
   webpack-virtual-modules@0.6.2: {}
 
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+    optional: true
+
+  whatwg-mimetype@4.0.0:
+    optional: true
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+    optional: true
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -21344,6 +21840,9 @@ snapshots:
 
   xml-name-validator@4.0.0: {}
 
+  xml-name-validator@5.0.0:
+    optional: true
+
   xml2js@0.6.2:
     dependencies:
       sax: 1.4.4
@@ -21353,6 +21852,9 @@ snapshots:
 
   xmlbuilder@11.0.1: {}
 
+  xmlchars@2.2.0:
+    optional: true
+
   xss@1.0.15:
     dependencies:
       commander: 2.20.3