diff --git a/.github/workflows/frontend-docker.yml b/.github/workflows/frontend-docker.yml
index cd63875f11..48c5f0c76b 100644
--- a/.github/workflows/frontend-docker.yml
+++ b/.github/workflows/frontend-docker.yml
@@ -73,7 +73,7 @@ jobs:
       - name: Build frontend
         run: pnpm web:build
         env:
-          NITRO_PRESET: node-server
+          NITRO_PRESET: node_cluster
           BUILD_ENV: ${{ steps.meta.outputs.env }}
           CF_PAGES_BRANCH: ${{ github.ref_name }}
           CF_PAGES_COMMIT_SHA: ${{ github.sha }}
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 c3718b10c4..7934489370 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -10,9 +10,11 @@ import {
 } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
+	ArrowLeftRightIcon,
 	ChevronLeftIcon,
 	ChevronRightIcon,
 	CompassIcon,
+	ImagesIcon,
 	LogInIcon,
 	LogOutIcon,
 	NewspaperIcon,
@@ -23,20 +25,25 @@ import {
 	ServerStackIcon,
 	SettingsIcon,
 	ShirtIcon,
+	SpinnerIcon,
+	ToggleRightIcon,
 	UserIcon,
+	UserPlusIcon,
+	XIcon,
 } from '@modrinth/assets'
 import {
+	AccountSwitchOverlay,
 	Admonition,
 	Avatar,
 	ButtonLink,
 	commonMessages,
+	commonSettingsMessages,
 	ContentInstallModal,
 	ContentUpdaterModal,
 	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
 	IconButton,
-	IntlFormatted,
 	LoadingBar,
 	MarkdownBody,
 	NewsArticleCard,
@@ -52,17 +59,19 @@ import {
 	useDebugLogger,
 	useFormatBytes,
 	useHostingIntercom,
+	UserRoleIcon,
 	useVIntl,
 } from '@modrinth/ui'
 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'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
 import AccountsCard from '@/components/ui/AccountsCard.vue'
@@ -96,8 +105,9 @@ import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { useAppEvent } from '@/composables/use-app-event'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { useError } from '@/composables/use-error.js'
-import { useTheme } from '@/composables/use-theme.ts'
+import { isDarkTheme, useTheme } from '@/composables/use-theme.ts'
 import { config } from '@/config'
+import { getAccountAppearance, rememberAccountAppearance } from '@/helpers/account-appearance.ts'
 import {
 	hide_ads_window,
 	init_ads_window,
@@ -108,14 +118,27 @@ import {
 } from '@/helpers/ads.js'
 import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
-import { get_user, get_version } from '@/helpers/cache.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 { get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
+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,
+	login,
+	logout,
+	removeUser,
+	setActive,
+} from '@/helpers/mr_auth.ts'
 import { mergeUrlQuery, parseModrinthLink } from '@/helpers/project-links.ts'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
 import { hasActivePride26Midas, hasMidasBadge } from '@/helpers/user-campaigns.ts'
+import { get_user_preferences } from '@/helpers/user-preferences.ts'
 import { parse_modrinth_user_link } from '@/helpers/users'
 import {
 	areUpdatesEnabled,
@@ -157,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()
@@ -201,6 +227,7 @@ const APP_SIDEBAR_WIDTH = 300
 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
 const PRIDE_FUNDRAISER_END_DATE = new Date('2026-07-01T00:00:00Z').getTime()
 const credentials = ref()
+const storedModrinthAccounts = ref([])
 let credentialsRefreshId = 0
 const sidebarToggled = ref(true)
 watch(
@@ -421,10 +448,20 @@ 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()
 
 const isMaximized = ref(false)
+const isFullscreen = ref(false)
+
+watch([os, isFullscreen], ([osName, fullscreen]) => {
+	document.documentElement.classList.toggle('mac-traffic-lights', osName === 'MacOS' && !fullscreen)
+})
 
 const authUnreachableDebug = useDebugLogger('AuthReachableChecker')
 const authServerQuery = useQuery({
@@ -447,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())
@@ -457,6 +511,7 @@ onMounted(async () => {
 
 	document.querySelector('body').addEventListener('click', handleClick)
 	document.querySelector('body').addEventListener('auxclick', handleAuxClick)
+	document.querySelector('body').addEventListener('contextmenu', handleContextMenu)
 	document.addEventListener('fullscreenchange', handleFullscreenChange)
 
 	checkUpdates()
@@ -465,7 +520,9 @@ onMounted(async () => {
 onUnmounted(async () => {
 	document.querySelector('body').removeEventListener('click', handleClick)
 	document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
+	document.querySelector('body').removeEventListener('contextmenu', handleContextMenu)
 	document.removeEventListener('fullscreenchange', handleFullscreenChange)
+	unlistenEditMenu?.()
 	clearDelayedUpdatePopup()
 
 	if (fullscreenAdsWindowHold) {
@@ -480,7 +537,6 @@ const formatBytes = useFormatBytes()
 
 const messages = defineMessages({
 	warning: { id: 'app.notification.warning', defaultMessage: 'Warning' },
-	moreOptions: { id: 'app.navigation.more-options', defaultMessage: 'More options' },
 	goBack: { id: 'app.navigation.go-back', defaultMessage: 'Go back' },
 	goForward: { id: 'app.navigation.go-forward', defaultMessage: 'Go forward' },
 	nextImage: { id: 'app.navigation.next-image', defaultMessage: 'Next image' },
@@ -534,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',
@@ -542,13 +602,33 @@ const messages = defineMessages({
 		id: 'app.nav.modrinth-account',
 		defaultMessage: 'Modrinth account',
 	},
-	signedInAs: {
-		id: 'app.nav.signed-in-as',
-		defaultMessage: 'Signed in as <user>{username}</user>',
+	viewProfile: {
+		id: 'app.nav.view-profile',
+		defaultMessage: 'View profile',
+	},
+	addFriend: {
+		id: 'friends.action.add-friend',
+		defaultMessage: 'Add a friend',
 	},
 	signInToModrinthAccount: {
 		id: 'app.nav.sign-in-to-modrinth-account',
-		defaultMessage: 'Sign in to a Modrinth account',
+		defaultMessage: 'Sign into Modrinth',
+	},
+	loadingProfile: {
+		id: 'app.nav.loading-profile',
+		defaultMessage: 'Loading profile...',
+	},
+	switchAccount: {
+		id: 'app.nav.switch-account',
+		defaultMessage: 'Switch account',
+	},
+	addAccount: {
+		id: 'app.nav.add-account',
+		defaultMessage: 'Add account',
+	},
+	removeAccount: {
+		id: 'app.nav.remove-account',
+		defaultMessage: 'Remove account',
 	},
 	restarting: {
 		id: 'app.restarting',
@@ -652,6 +732,9 @@ async function setupApp() {
 		i18n.global.locale.value = locale
 	}
 
+	Object.assign(appSettings.featureFlags, feature_flags)
+	isMaximized.value = await getCurrentWindow().isMaximized()
+	isFullscreen.value = await getCurrentWindow().isFullscreen()
 	os.value = await getOS()
 	const dev = await isDev()
 	isDevEnvironment.value = dev
@@ -666,13 +749,11 @@ async function setupApp() {
 	appSettings.hideNametagSkinsPage = hide_nametag_skins_page
 	appSettings.toggleSidebar = toggle_sidebar
 	appSettings.devMode = developer_mode
-	Object.assign(appSettings.featureFlags, feature_flags)
 	stateInitialized.value = true
 
-	isMaximized.value = await getCurrentWindow().isMaximized()
-
 	await getCurrentWindow().onResized(async () => {
 		isMaximized.value = await getCurrentWindow().isMaximized()
+		isFullscreen.value = await getCurrentWindow().isFullscreen()
 	})
 
 	if (telemetry) {
@@ -681,8 +762,6 @@ async function setupApp() {
 		trackEvent('Launched', { version, dev })
 	}
 
-	if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
-
 	const osType = await type()
 	if (osType === 'macos') {
 		document.getElementsByTagName('html')[0].classList.add('mac')
@@ -957,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) {
@@ -984,6 +1064,13 @@ watch(
 			.then(async () => {
 				const settings = await getSettings()
 				const selectedTheme = preferences.appearance.auto ? 'system' : preferences.appearance.theme
+				const userId = credentials.value?.user_id ?? credentials.value?.user?.id
+				if (userId) {
+					rememberAccountAppearance(userId, preferences.appearance)
+				}
+				if (appTheme.syncAcrossDevices && isDarkTheme(preferences.appearance.theme)) {
+					appTheme.preferredDark = preferences.appearance.theme
+				}
 				const locale = preferences.localization.locale
 				const behavior = preferences.behavior
 				let settingsChanged = false
@@ -1073,10 +1160,12 @@ async function fetchCredentials() {
 			if (refreshId !== credentialsRefreshId) return
 
 			clearLiveNotifications()
-			await logout().catch(handleError)
+			await removeUser(creds.user_id).catch(handleError)
 			if (refreshId !== credentialsRefreshId) return
 
 			credentials.value = null
+			liveNotificationsEnabled = false
+			await fetchStoredModrinthAccounts()
 			return
 		}
 		creds.user = await get_user(creds.user_id, 'bypass').catch(handleError)
@@ -1084,11 +1173,12 @@ async function fetchCredentials() {
 	}
 	credentials.value = creds ?? null
 	liveNotificationsEnabled = !!creds?.session
+	await fetchStoredModrinthAccounts()
 }
 
-async function signIn(flow = 'sign-in') {
+async function signIn(flow = 'sign-in', addAccount = false) {
 	try {
-		await login(flow)
+		await login(flow, addAccount)
 		await fetchCredentials()
 	} catch (error) {
 		if (
@@ -1096,35 +1186,190 @@ async function signIn(flow = 'sign-in') {
 			typeof error['message'] === 'string' &&
 			error.message.includes('Login canceled')
 		) {
-			// Not really an error due to being a result of user interaction, show nothing
+			// user closed the login window
 		} else {
 			handleError(error)
 		}
 	}
 }
 
-async function requestSignIn(flow = 'sign-in') {
-	await modrinthLoginModal.value?.showSigningIn(flow)
+async function requestSignIn(flow = 'sign-in', addAccount = false) {
+	await modrinthLoginModal.value?.showSigningIn(flow, addAccount)
 }
 
-async function requestModrinthAuth(flow = 'sign-in') {
-	await signIn(flow)
+async function requestModrinthAuth(flow = 'sign-in', addAccount = false) {
+	await signIn(flow, addAccount)
 	return !!credentials.value?.session
 }
 
 async function logOut() {
-	await performLogOut()
+	if (!credentials.value?.user) return
+	await completeAccountSwitch(() => logout())
 }
 
-async function performLogOut() {
-	credentialsRefreshId++
-	credentials.value = undefined
-	clearLiveNotifications()
+async function fetchStoredModrinthAccounts() {
+	const all = (await getAllCreds().catch(handleError)) ?? []
+	const ids = all.map((account) => account.user_id)
+	const users = ids.length ? ((await get_user_many(ids).catch(handleError)) ?? []) : []
+	const usersById = new Map(users.map((user) => [user.id, user]))
 
-	await logout().catch(handleError)
-	await fetchCredentials()
+	storedModrinthAccounts.value = all.map((account) => ({
+		...account,
+		user: usersById.get(account.user_id) ?? {
+			id: account.user_id,
+			username: account.user_id,
+			avatar_url: null,
+			role: 'developer',
+		},
+	}))
 }
 
+const accountSwitcherAccounts = computed(() => {
+	const currentId = credentials.value?.session ? credentials.value.user_id : null
+
+	return storedModrinthAccounts.value.map((account) => ({
+		...account,
+		optionId: `account-${account.user_id}`,
+		current: account.user_id === currentId,
+	}))
+})
+
+const profileButtonTooltip = computed(() => {
+	if (credentials.value === undefined) return formatMessage(messages.loadingProfile)
+	if (credentials.value?.user) return formatMessage(messages.modrinthAccount)
+	return formatMessage(messages.signInToModrinthAccount)
+})
+
+const accountSwitcherOptions = computed(() => [
+	...accountSwitcherAccounts.value.map((account) => ({
+		id: account.optionId,
+		label: account.user.username,
+		selected: account.current,
+		action: () => switchModrinthAccount(account),
+		trailingAction: {
+			label: formatMessage(messages.removeAccount),
+			icon: XIcon,
+			color: 'red',
+			action: () => forgetModrinthAccount(account.user_id),
+		},
+	})),
+	{
+		type: 'divider',
+	},
+	{
+		id: 'add-account',
+		label: formatMessage(messages.addAccount),
+		icon: PlusIcon,
+		action: () => requestSignIn('sign-in', true),
+	},
+])
+
+const isSwitchingAccount = ref(false)
+
+async function persistAppearanceTheme(appearance) {
+	const selectedTheme = appearance.auto ? 'system' : appearance.theme
+	appTheme.applyAccountAppearance(appearance)
+	const settings = await getSettings()
+	if (settings.theme !== selectedTheme) {
+		settings.theme = selectedTheme
+		await setSettings(settings)
+	}
+}
+
+async function completeAccountSwitch(task) {
+	isSwitchingAccount.value = true
+	await nextTick()
+	try {
+		await task()
+		window.location.reload()
+	} catch (error) {
+		isSwitchingAccount.value = false
+		handleError(error)
+	}
+}
+
+async function switchModrinthAccount(account) {
+	if (account.current) return
+
+	const cached = getAccountAppearance(account.user_id)
+	if (cached) await persistAppearanceTheme(cached)
+	await nextTick()
+
+	await completeAccountSwitch(async () => {
+		await setActive(account.user_id)
+		if (cached) return
+
+		try {
+			const preferences = await get_user_preferences(account.user_id)
+			rememberAccountAppearance(account.user_id, preferences.appearance)
+			await persistAppearanceTheme(preferences.appearance)
+			await nextTick()
+		} catch {
+			// no saved appearance for this account
+		}
+	})
+}
+
+async function forgetModrinthAccount(userId) {
+	const isCurrent = credentials.value?.user_id === userId && !!credentials.value?.session
+	if (isCurrent) {
+		await completeAccountSwitch(() => removeUser(userId))
+		return
+	}
+
+	await removeUser(userId).catch(handleError)
+	await fetchStoredModrinthAccounts()
+}
+
+const modrinthAccountMenuOptions = computed(() => [
+	{
+		id: 'view-profile',
+		label: formatMessage(messages.viewProfile),
+		icon: UserIcon,
+		action: () => router.push(`/user/${encodeURIComponent(credentials.value.user.username)}`),
+	},
+	{
+		id: 'plus',
+		label: formatMessage(messages.upgradeToModrinthPlus),
+		icon: ArrowBigUpDashIcon,
+		type: 'link',
+		href: 'https://modrinth.plus?app',
+		target: '_blank',
+		tone: 'purple',
+		shown: !hasPlus.value,
+	},
+	{
+		id: 'add-friend',
+		label: formatMessage(messages.addFriend),
+		icon: UserPlusIcon,
+		action: () => friendsList.value?.showAddFriendModal(),
+	},
+	{
+		id: 'flags',
+		label: formatMessage(commonSettingsMessages.featureFlags),
+		icon: ToggleRightIcon,
+		shown: appSettings.devMode,
+		action: () => appSettingsModal.value?.showFeatureFlags(),
+	},
+	{
+		type: 'divider',
+	},
+	{
+		id: 'switch-account',
+		label: formatMessage(messages.switchAccount),
+		icon: ArrowLeftRightIcon,
+		type: 'submenu',
+		options: accountSwitcherOptions.value,
+	},
+	{
+		id: 'sign-out',
+		label: formatMessage(commonMessages.signOutButton),
+		icon: LogOutIcon,
+		tone: 'red',
+		action: () => logOut(),
+	},
+])
+
 async function fetchIntercomToken() {
 	const creds = await getCreds()
 	if (!creds?.session) {
@@ -1184,6 +1429,7 @@ onMounted(() => {
 })
 
 const accounts = ref(null)
+const friendsList = ref(null)
 provide('accountsCard', accounts)
 
 useAppEvent('command', handleCommand, appEvents)
@@ -1711,12 +1957,39 @@ function handleAuxClick(e) {
 	}
 }
 
+function handleContextMenu(event) {
+	const target = event.target
+	if (target instanceof Element) {
+		if (target.closest('img, textarea, [contenteditable="true"]')) return
+		const input = target.closest('input')
+		if (
+			input &&
+			!['button', 'checkbox', 'radio', 'submit', 'reset', 'file', 'range'].includes(input.type)
+		) {
+			return
+		}
+	}
+
+	const selection = window.getSelection()
+	if (
+		target instanceof Node &&
+		selection &&
+		!selection.isCollapsed &&
+		selection.containsNode(target, true)
+	) {
+		return
+	}
+
+	event.preventDefault()
+}
+
 provideAppUpdateDownloadProgress(appUpdateDownload)
 </script>
 
 <template>
 	<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
 	<div id="teleports"></div>
+	<AccountSwitchOverlay :show="isSwitchingAccount" />
 	<div
 		v-if="stateInitialized"
 		class="app-grid-layout relative"
@@ -1775,7 +2048,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 						(route.path.startsWith('/browse') || route.path.startsWith('/project')) && route.query.i
 				"
 			>
-				<PlayIcon />
+				<PlayIcon class="ml-0.5" />
 			</NavButton>
 			<NavButton
 				v-tooltip.right="formatMessage(commonMessages.discoverContentLabel)"
@@ -1790,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"
@@ -1819,59 +2099,69 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<SettingsIcon />
 			</NavButton>
-			<TeleportOverflowMenu
-				v-if="credentials?.user"
-				v-tooltip.right="formatMessage(messages.modrinthAccount)"
-				type="quiet"
-				size="xl"
-				:label="formatMessage(messages.moreOptions)"
-				:options="[
-					{
-						id: 'view-profile',
-						label: formatMessage(messages.signedInAs, {
-							username: credentials.user.username,
-						}),
-						action: () => router.push(`/user/${encodeURIComponent(credentials.user.username)}`),
-					},
-					{
-						id: 'sign-out',
-						label: formatMessage(commonMessages.signOutButton),
-						tone: 'red',
-						action: () => logOut(),
-					},
-				]"
-				placement="right-end"
-				:distance="4"
-			>
-				<Avatar :src="credentials?.user?.avatar_url" alt="" size="32px" circle />
-				<template #view-profile>
-					<UserIcon />
-					<span class="inline-flex items-center gap-1">
-						<IntlFormatted
-							:message-id="messages.signedInAs"
-							:values="{ username: credentials?.user?.username }"
-						>
-							<template #user="{ children }">
-								<span class="inline-flex items-center gap-1 text-contrast font-semibold">
-									<Avatar :src="credentials?.user?.avatar_url" alt="" size="20px" circle />
-									<component :is="() => children" />
-								</span>
-							</template>
-						</IntlFormatted>
-					</span>
-				</template>
-				<template #sign-out>
-					<LogOutIcon />
-					{{ formatMessage(commonMessages.signOutButton) }}
-				</template>
-			</TeleportOverflowMenu>
-			<NavButton
-				v-else
-				v-tooltip.right="formatMessage(messages.signInToModrinthAccount)"
-				:to="() => requestSignIn()"
-			>
-				<LogInIcon class="text-brand" />
-			</NavButton>
+			<span v-tooltip.right="profileButtonTooltip" class="inline-flex">
+				<IconButton
+					v-if="credentials === undefined"
+					type="quiet"
+					size="xl"
+					disabled
+					class="pointer-events-none"
+					:label="formatMessage(messages.loadingProfile)"
+				>
+					<SpinnerIcon class="animate-spin" />
+				</IconButton>
+				<TeleportOverflowMenu
+					v-else-if="credentials?.user"
+					type="quiet"
+					size="xl"
+					:label="formatMessage(messages.modrinthAccount)"
+					:options="modrinthAccountMenuOptions"
+					placement="right-end"
+					:distance="4"
+					class="brightness-100 hover:!brightness-100 focus-visible:!brightness-100"
+				>
+					<Avatar
+						:src="credentials?.user?.avatar_url"
+						alt=""
+						size="32px"
+						circle
+						no-shadow
+						class="pointer-events-none !size-8"
+					/>
+					<template
+						v-for="account in accountSwitcherAccounts"
+						:key="account.user_id"
+						#[account.optionId]
+					>
+						<Avatar :src="account.user.avatar_url" size="1.25rem" aria-hidden="true" circle />
+						{{ account.user.username }}
+						<UserRoleIcon :role="account.user.role" />
+					</template>
+				</TeleportOverflowMenu>
+				<TeleportOverflowMenu
+					v-else-if="accountSwitcherAccounts.length > 0"
+					type="quiet"
+					size="xl"
+					:label="formatMessage(messages.signInToModrinthAccount)"
+					:options="accountSwitcherOptions"
+					placement="right-end"
+					:distance="4"
+				>
+					<LogInIcon class="!text-brand" />
+					<template
+						v-for="account in accountSwitcherAccounts"
+						:key="account.user_id"
+						#[account.optionId]
+					>
+						<Avatar :src="account.user.avatar_url" size="1.25rem" aria-hidden="true" circle />
+						{{ account.user.username }}
+						<UserRoleIcon :role="account.user.role" />
+					</template>
+				</TeleportOverflowMenu>
+				<NavButton v-else :to="() => requestSignIn()">
+					<LogInIcon class="text-brand" />
+				</NavButton>
+			</span>
 		</div>
 		<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
 			<div data-tauri-drag-region class="flex min-w-0 flex-1 items-center overflow-hidden p-2">
@@ -2017,7 +2307,11 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
 					>
 						<suspense>
-							<FriendsList :credentials="credentials" :sign-in="() => requestSignIn()" />
+							<FriendsList
+								ref="friendsList"
+								:credentials="credentials"
+								:sign-in="() => requestSignIn()"
+							/>
 						</suspense>
 					</div>
 					<PrideFundraiserBanner
@@ -2187,7 +2481,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	background: var(--brand-gradient-bg);
 
 	--color-button-bg: var(--brand-gradient-button);
+	--surface-4: var(--brand-gradient-button);
 	--color-button-bg-hover: var(--brand-gradient-border);
+	--surface-5: var(--brand-gradient-border);
 	--color-divider: var(--brand-gradient-border);
 	--color-divider-dark: var(--brand-gradient-border);
 }
@@ -2333,7 +2629,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	--os-handle-bg-active: var(--color-scrollbar) !important;
 }
 
-.mac {
+.mac-traffic-lights {
 	.app-grid-statusbar {
 		padding-left: 5rem;
 	}
diff --git a/apps/app-frontend/src/assets/loading/cube-light.webp b/apps/app-frontend/src/assets/loading/cube-light.webp
new file mode 100644
index 0000000000..cca71155f4
Binary files /dev/null and b/apps/app-frontend/src/assets/loading/cube-light.webp differ
diff --git a/apps/app-frontend/src/assets/stylesheets/global.scss b/apps/app-frontend/src/assets/stylesheets/global.scss
index a503a966ed..6cfb726fc0 100644
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -55,6 +55,10 @@
 	);
 }
 
+html.light-mode {
+	color-scheme: light;
+}
+
 body {
 	position: fixed;
 	width: 100%;
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index 6dacd0f6a2..865d142a8a 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -20,7 +20,6 @@
 			<div class="flex gap-2 w-full min-w-0">
 				<Avatar
 					size="36px"
-					disable-conditional-icon-padding
 					:src="
 						selectedAccount
 							? avatarUrl
@@ -35,7 +34,7 @@
 				</div>
 			</div>
 		</template>
-		<div class="bg-button-bg pt-1 pb-2 border border-solid border-surface-5">
+		<div class="bg-button-bg pt-1 pb-2 border-0 border-t border-solid border-surface-5">
 			<template v-if="accounts.length > 0">
 				<div v-for="account in accounts" :key="account.profile.id" class="flex gap-1 items-center">
 					<button
@@ -47,11 +46,7 @@
 							class="w-5 h-5 text-brand shrink-0"
 						/>
 						<RadioButtonIcon v-else class="w-5 h-5 text-secondary shrink-0" />
-						<Avatar
-							:src="getAccountAvatarUrl(account)"
-							size="24px"
-							disable-conditional-icon-padding
-						/>
+						<Avatar :src="getAccountAvatarUrl(account)" size="24px" />
 						<p
 							class="m-0 truncate min-w-0"
 							:class="
diff --git a/apps/app-frontend/src/components/ui/ErrorModal.vue b/apps/app-frontend/src/components/ui/ErrorModal.vue
index efac61720c..d2232d1f36 100644
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -3,6 +3,7 @@ import {
 	CheckIcon,
 	CopyIcon,
 	DropdownIcon,
+	FolderOpenIcon,
 	HammerIcon,
 	LogInIcon,
 	UpdatedIcon,
@@ -13,8 +14,10 @@ import {
 	Button,
 	ButtonLink,
 	Collapsible,
+	defineMessages,
 	IconButton,
 	injectNotificationManager,
+	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
@@ -25,8 +28,17 @@ import { trackEvent } from '@/helpers/analytics'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { install_existing_instance } from '@/helpers/install'
 import { cancel_directory_change } from '@/helpers/settings.ts'
+import { showAppDbBackupsFolder } from '@/helpers/utils.js'
 
 const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	openBackupsFolder: {
+		id: 'app.error.state-init.open-backups-folder',
+		defaultMessage: 'Open backups folder',
+	},
+})
 
 const errorModal = ref()
 const error = ref()
@@ -123,6 +135,10 @@ function retryDirectoryChange() {
 	window.location.reload()
 }
 
+async function openDbBackupsFolder() {
+	await showAppDbBackupsFolder().catch(handleError)
+}
+
 const loadingRepair = ref(false)
 async function repairInstance() {
 	loadingRepair.value = true
@@ -310,6 +326,10 @@ async function copyToClipboard(text) {
 									class="m-0 p-0 rounded-none bg-transparent text-sm font-mono break-words overflow-auto"
 								>
 									{{ debugInfo }}
+									<button class="btn" @click="openDbBackupsFolder">
+										<FolderOpenIcon aria-hidden="true" />
+										{{ formatMessage(messages.openBackupsFolder) }}
+									</button>
 								</div>
 								<IconButton
 									v-tooltip="'Copy debug info'"
diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue
index 9f8338df6d..d964f3b206 100644
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -179,6 +179,7 @@ onMounted(() => {
 				:src="getInstanceIconUrl(instance.icon_path)"
 				:tint-by="instance.id"
 				:alt="formatMessage(messages.instanceIcon)"
+				pad-transparent-corners
 			/>
 			<div class="h-full flex items-center font-bold text-contrast leading-normal">
 				<span class="line-clamp-2">{{ instance.name }}</span>
@@ -244,6 +245,7 @@ onMounted(() => {
 					:tint-by="instance.id"
 					:alt="formatMessage(messages.instanceIcon)"
 					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+					pad-transparent-corners
 				/>
 				<div class="absolute inset-0 flex items-center justify-center">
 					<IconButton
diff --git a/apps/app-frontend/src/components/ui/InstanceIndicator.vue b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
index 045e20e965..6f45ea1c47 100644
--- a/apps/app-frontend/src/components/ui/InstanceIndicator.vue
+++ b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
@@ -40,7 +40,12 @@ const instanceLink = computed(() => {
 	<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
 		<router-link :to="instanceLink" tabindex="-1" class="flex flex-col gap-4 text-primary">
 			<span class="flex items-center gap-2">
-				<Avatar :src="getInstanceIconUrl(instance.icon_path)" :alt="instance.name" size="48px" />
+				<Avatar
+					:src="getInstanceIconUrl(instance.icon_path)"
+					:alt="instance.name"
+					size="48px"
+					pad-transparent-corners
+				/>
 				<span class="flex flex-col gap-2">
 					<span class="font-extrabold bold text-contrast">
 						{{ instance.name }}
diff --git a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
index 8dc9a0e44b..d926b34069 100644
--- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
+++ b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
@@ -1,13 +1,25 @@
 <script setup>
-import { SpinnerIcon } from '@modrinth/assets'
-import { Avatar, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { EyeIcon, FolderOpenIcon, PlayIcon, SpinnerIcon, StopCircleIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	commonMessages,
+	ContextMenu,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 import NavButton from '@/components/ui/NavButton.vue'
 import { useAppEvent } from '@/composables/use-app-event'
-import { getInstanceIconUrl, list } from '@/helpers/instance'
+import { handleSevereError } from '@/composables/use-error.js'
+import { trackEvent } from '@/helpers/analytics'
+import { getInstanceIconUrl, kill, list, run } from '@/helpers/instance'
+import { get_all } from '@/helpers/process'
+import { showInstanceInFolder } from '@/helpers/utils'
 import { instanceKeys } from '@/pages/instance/query-options'
 
 const ITEM_SIZE = 52
@@ -16,6 +28,9 @@ const STORAGE_KEY = 'modrinth-quick-instance-count'
 
 const { handleError } = injectNotificationManager()
 const queryClient = useQueryClient()
+const router = useRouter()
+const instanceOptions = ref()
+const runningInstances = ref([])
 
 const { formatMessage } = useVIntl()
 
@@ -153,8 +168,11 @@ useAppEvent('instance', async (event) => {
 	}
 })
 
+useAppEvent('process', checkProcesses)
+
 onMounted(() => {
 	window.addEventListener('resize', updateMaxAuto)
+	checkProcesses()
 })
 
 onUnmounted(() => {
@@ -172,6 +190,18 @@ const messages = defineMessages({
 		id: 'app.quick-instance-switcher.drag-show-tooltip',
 		defaultMessage: 'Drag to show recent instances',
 	},
+	viewInstance: {
+		id: 'app.quick-instance-switcher.view-instance',
+		defaultMessage: 'View instance',
+	},
+	instanceActions: {
+		id: 'app.quick-instance-switcher.actions.label',
+		defaultMessage: 'Instance actions',
+	},
+	instanceLocked: {
+		id: 'app.quick-instance-switcher.instance-locked',
+		defaultMessage: 'This instance has been locked',
+	},
 })
 
 const dividerTooltip = computed(() => {
@@ -180,6 +210,69 @@ const dividerTooltip = computed(() => {
 	}
 	return formatMessage(visibleCount.value === 0 ? messages.dragShowTooltip : messages.dragTooltip)
 })
+
+async function checkProcesses() {
+	const processes = (await get_all().catch(handleError)) ?? []
+	runningInstances.value = processes.map((process) => process.instance_id)
+}
+
+async function playInstance(instance) {
+	if (instance.quarantined || instance.install_stage !== 'installed') return
+	await run(instance.id)
+		.catch((err) => handleSevereError(err, { instanceId: instance.id }))
+		.finally(() => {
+			trackEvent('InstanceStart', {
+				loader: instance.loader,
+				game_version: instance.game_version,
+				source: 'QuickInstanceSwitcher',
+			})
+		})
+}
+
+async function stopInstance(instance) {
+	await kill(instance.id).catch(handleError)
+	trackEvent('InstanceStop', {
+		loader: instance.loader,
+		game_version: instance.game_version,
+		source: 'QuickInstanceSwitcher',
+	})
+}
+
+function openContextMenu(event, instance) {
+	const playing = runningInstances.value.includes(instance.id)
+	instanceOptions.value?.open(event, [
+		playing
+			? {
+					id: 'stop',
+					label: formatMessage(commonMessages.stopButton),
+					icon: StopCircleIcon,
+					tone: 'red',
+					action: () => stopInstance(instance),
+				}
+			: {
+					id: 'play',
+					label: formatMessage(commonMessages.playButton),
+					icon: PlayIcon,
+					tone: 'brand',
+					disabled: instance.quarantined || instance.install_stage !== 'installed',
+					tooltip: instance.quarantined ? formatMessage(messages.instanceLocked) : undefined,
+					action: () => playInstance(instance),
+				},
+		{ type: 'divider' },
+		{
+			id: 'open-instance',
+			label: formatMessage(messages.viewInstance),
+			icon: EyeIcon,
+			action: () => router.push(`/instance/${encodeURIComponent(instance.id)}`),
+		},
+		{
+			id: 'open-folder',
+			label: formatMessage(commonMessages.openFolderButton),
+			icon: FolderOpenIcon,
+			action: () => showInstanceInFolder(instance.id),
+		},
+	])
+}
 </script>
 
 <template>
@@ -197,6 +290,7 @@ const dividerTooltip = computed(() => {
 			:key="instance.id"
 			v-tooltip.right="instance.name"
 			class="quick-instance-item"
+			@contextmenu.prevent.stop="(event) => openContextMenu(event, instance)"
 		>
 			<NavButton :to="`/instance/${encodeURIComponent(instance.id)}`" class="relative">
 				<Avatar
@@ -204,6 +298,7 @@ const dividerTooltip = computed(() => {
 					size="28px"
 					:tint-by="instance.id"
 					:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+					pad-transparent-corners
 				/>
 				<div
 					v-if="instance.install_stage !== 'installed'"
@@ -214,6 +309,7 @@ const dividerTooltip = computed(() => {
 			</NavButton>
 		</div>
 	</TransitionGroup>
+	<ContextMenu ref="instanceOptions" :label="formatMessage(messages.instanceActions)" />
 	<div
 		v-tooltip.right="dividerTooltip"
 		class="flex items-center justify-center py-2 select-none"
diff --git a/apps/app-frontend/src/components/ui/SplashScreen.vue b/apps/app-frontend/src/components/ui/SplashScreen.vue
index c720bbe274..fd271334e8 100644
--- a/apps/app-frontend/src/components/ui/SplashScreen.vue
+++ b/apps/app-frontend/src/components/ui/SplashScreen.vue
@@ -1,6 +1,6 @@
 <template>
 	<Transition name="splash-fade" @after-leave="onAfterLeave">
-		<div v-if="!doneLoading" class="splash-screen dark">
+		<div v-if="!doneLoading" class="splash-screen" :class="`${theme.active}-mode`">
 			<div class="app-logo-wrapper" data-tauri-drag-region>
 				<svg
 					class="app-logo"
@@ -83,6 +83,9 @@ import { ref, watch } from 'vue'
 
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useTheme } from '@/composables/use-theme.ts'
+
+const theme = useTheme()
 
 const doneLoading = ref(false)
 const loadingProgress = ref(0)
@@ -145,6 +148,12 @@ useAppEvent('loading', (e) => {
 	position: fixed;
 	inset: 0;
 	z-index: 10000;
+
+	--splash-cube-image: url('@/assets/loading/cube.png');
+
+	&.light-mode {
+		--splash-cube-image: url('@/assets/loading/cube-light.webp');
+	}
 }
 
 .splash-fade-leave-active {
@@ -166,6 +175,7 @@ useAppEvent('loading', (e) => {
 	align-items: center;
 
 	gap: 1rem;
+	color: var(--color-contrast);
 
 	z-index: 9998;
 }
@@ -184,8 +194,8 @@ useAppEvent('loading', (e) => {
 	height: 100vh;
 	width: 100vw;
 	background:
-		linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
-		linear-gradient(0deg, rgba(22, 24, 28, 0.64), rgba(22, 24, 28, 0.64));
+		linear-gradient(180deg, var(--splash-tint-top) 0%, var(--splash-tint-bottom) 97.29%),
+		linear-gradient(0deg, var(--splash-overlay), var(--splash-overlay));
 	z-index: 9997;
 }
 
@@ -198,11 +208,19 @@ useAppEvent('loading', (e) => {
 
 	width: 180vw;
 	height: 180vh;
-	opacity: 0.8;
-	background: #16181c url('@/assets/loading/cube.png') center no-repeat;
-	background-size: contain;
+	background-color: var(--color-bg);
 
 	z-index: 9996;
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: var(--splash-cube-image) center no-repeat;
+		background-size: contain;
+		opacity: var(--splash-cube-opacity);
+		mix-blend-mode: var(--splash-cube-blend);
+	}
 }
 
 .base-bg {
diff --git a/apps/app-frontend/src/components/ui/WindowControls.vue b/apps/app-frontend/src/components/ui/WindowControls.vue
index a10ccffff5..e6f5e1e9ec 100644
--- a/apps/app-frontend/src/components/ui/WindowControls.vue
+++ b/apps/app-frontend/src/components/ui/WindowControls.vue
@@ -1,35 +1,38 @@
 <template>
-	<section
-		v-if="showControls"
-		class="flex items-center gap-2 mr-1.5"
-		data-tauri-drag-region-exclude
-	>
-		<IconButton
-			type="quiet"
-			label="Minimize window"
-			class="relative expanded-button"
-			@click="() => getCurrentWindow().minimize()"
+	<Teleport to="body">
+		<section
+			v-if="showControls"
+			ref="controlsEl"
+			class="pointer-events-auto fixed top-0 right-0 z-[10001] flex h-12 items-center gap-2 bg-bg-raised rounded-bl-2xl px-1.5"
+			data-tauri-drag-region-exclude
 		>
-			<MinimizeIcon />
-		</IconButton>
-		<IconButton
-			type="quiet"
-			label="Toggle maximize window"
-			class="relative expanded-button"
-			@click="() => getCurrentWindow().toggleMaximize()"
-		>
-			<RestoreIcon v-if="isMaximized" />
-			<MaximizeIcon v-else />
-		</IconButton>
-		<IconButton
-			type="quiet"
-			label="Close window"
-			class="relative expanded-button close-button"
-			@click="handleClose"
-		>
-			<XIcon />
-		</IconButton>
-	</section>
+			<IconButton
+				type="quiet"
+				label="Minimize window"
+				class="relative expanded-button"
+				@click="getCurrentWindow().minimize()"
+			>
+				<MinimizeIcon />
+			</IconButton>
+			<IconButton
+				type="quiet"
+				label="Toggle maximize window"
+				class="relative expanded-button"
+				@click="getCurrentWindow().toggleMaximize()"
+			>
+				<RestoreIcon v-if="isMaximized" />
+				<MaximizeIcon v-else />
+			</IconButton>
+			<IconButton
+				type="quiet"
+				label="Close window"
+				class="relative expanded-button close-button"
+				@click="handleClose"
+			>
+				<XIcon />
+			</IconButton>
+		</section>
+	</Teleport>
 </template>
 
 <script setup>
@@ -37,7 +40,7 @@ import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets
 import { IconButton } from '@modrinth/ui'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { get as getSettings } from '@/helpers/settings.ts'
@@ -48,6 +51,7 @@ const appSettings = useAppSettings()
 const nativeDecorations = ref(true)
 const isMaximized = ref(false)
 const os = ref('')
+const controlsEl = ref(null)
 
 const alwaysShowAppControls = computed(() => appSettings.getFeatureFlag('always_show_app_controls'))
 
@@ -57,6 +61,26 @@ const showControls = computed(
 		(!nativeDecorations.value && (os.value === 'Windows' || os.value === 'Linux')),
 )
 
+function setWindowControlsWidth(width) {
+	document.documentElement.style.setProperty('--window-controls-width', `${width}px`)
+}
+
+let resizeObserver
+watch(controlsEl, (el) => {
+	resizeObserver?.disconnect()
+	resizeObserver = undefined
+	if (!el) {
+		setWindowControlsWidth(0)
+		return
+	}
+
+	resizeObserver = new ResizeObserver(() => {
+		setWindowControlsWidth(el.getBoundingClientRect().width)
+	})
+	resizeObserver.observe(el)
+	setWindowControlsWidth(el.getBoundingClientRect().width)
+})
+
 onMounted(async () => {
 	os.value = await getOS()
 
@@ -78,6 +102,11 @@ onMounted(async () => {
 	})
 })
 
+onUnmounted(() => {
+	resizeObserver?.disconnect()
+	document.documentElement.style.removeProperty('--window-controls-width')
+})
+
 const handleClose = async () => {
 	await saveWindowState(StateFlags.ALL)
 	await getCurrentWindow().close()
diff --git a/apps/app-frontend/src/components/ui/context-menu/index.vue b/apps/app-frontend/src/components/ui/context-menu/index.vue
deleted file mode 100644
index 93732168bb..0000000000
--- a/apps/app-frontend/src/components/ui/context-menu/index.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-	<Teleport to="#teleports">
-		<transition name="fade">
-			<div
-				v-show="shown && !isMobileActiveSubmenu"
-				ref="contextMenu"
-				class="context-menu"
-				:style="menuStyle"
-				role="menu"
-				@keydown="handleMenuKeydown"
-				@mousemove="(event) => handleMenuMouseMove(event, 'menu')"
-			>
-				<template v-for="(option, index) in options" :key="index">
-					<hr v-if="isDivider(option)" class="divider" />
-					<button
-						v-else-if="isOptionVisible(option)"
-						:ref="(element) => setOptionButtonRef(index, element)"
-						type="button"
-						class="item clickable"
-						:class="[
-							option.color ?? 'base',
-							{
-								active: index === activeOptionIndex,
-								'safe-triangle-hover': index === pendingOptionIndex,
-							},
-						]"
-						role="menuitem"
-						:aria-haspopup="hasChildren(option) ? 'menu' : undefined"
-						:aria-expanded="hasChildren(option) ? index === activeOptionIndex : undefined"
-						@click.stop="handleOptionClick(option, index)"
-						@focus="handleOptionFocus(option, index)"
-						@mouseenter="handleOptionMouseEnter(option, index)"
-					>
-						<span class="item-content"><slot :name="option.name" /></span>
-						<ChevronRightIcon v-if="hasChildren(option)" class="submenu-chevron" />
-					</button>
-				</template>
-			</div>
-		</transition>
-	</Teleport>
-
-	<Teleport to="#teleports">
-		<transition name="fade">
-			<div
-				v-if="shown && activeOption && hasSubmenuPosition"
-				ref="submenu"
-				class="context-menu submenu"
-				:style="submenuStyle"
-				role="menu"
-				@keydown="handleSubmenuKeydown"
-				@mouseenter="handleSubmenuMouseEnter"
-				@mouseleave="isCursorInsideSubmenu = false"
-				@mousemove="(event) => handleMenuMouseMove(event, 'submenu')"
-			>
-				<button
-					v-if="isMobileSubmenuLayout"
-					type="button"
-					class="item clickable base mobile-back"
-					@click.stop="returnToMenu"
-				>
-					<ChevronLeftIcon class="submenu-chevron" />
-					<span class="item-content"><slot :name="activeOption.name" /></span>
-				</button>
-				<template v-for="(option, index) in activeOption.children" :key="index">
-					<hr v-if="isDivider(option)" class="divider" />
-					<button
-						v-else-if="isOptionVisible(option)"
-						:ref="(element) => setSubmenuButtonRef(index, element)"
-						type="button"
-						class="item clickable"
-						:class="option.color ?? 'base'"
-						role="menuitem"
-						@click.stop="optionClicked(option.name)"
-					>
-						<span class="item-content"><slot :name="option.name" /></span>
-					</button>
-				</template>
-			</div>
-		</transition>
-	</Teleport>
-</template>
-
-<script setup lang="ts">
-import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
-
-import type { ContextMenuEmit } from './types'
-import { useContextMenu } from './use-context-menu'
-import { hasChildren, isDivider } from './utils'
-
-const emit = defineEmits<ContextMenuEmit>()
-
-const {
-	shown,
-	contextMenu,
-	submenu,
-	options,
-	menuStyle,
-	submenuStyle,
-	activeOption,
-	activeOptionIndex,
-	pendingOptionIndex,
-	hasSubmenuPosition,
-	isMobileSubmenuLayout,
-	isMobileActiveSubmenu,
-	isCursorInsideSubmenu,
-	isOptionVisible,
-	setOptionButtonRef,
-	setSubmenuButtonRef,
-	showMenu,
-	hideMenu,
-	handleOptionClick,
-	optionClicked,
-	handleOptionFocus,
-	handleOptionMouseEnter,
-	returnToMenu,
-	handleSubmenuMouseEnter,
-	handleMenuMouseMove,
-	handleMenuKeydown,
-	handleSubmenuKeydown,
-} = useContextMenu(emit)
-
-defineExpose({ showMenu, hideMenu })
-</script>
-
-<style lang="scss" scoped>
-.context-menu {
-	background-color: var(--color-raised-bg);
-	border-radius: var(--radius-md);
-	box-shadow: var(--shadow-floating);
-	border: 1px solid var(--color-divider);
-	margin: 0;
-	position: fixed;
-	z-index: 1000000;
-	overflow: hidden;
-	padding: var(--gap-sm);
-	min-width: 12rem;
-	max-width: calc(100vw - 1.25rem);
-
-	&.submenu {
-		z-index: 1000001;
-	}
-
-	.item {
-		align-items: center;
-		background: transparent;
-		border: 0;
-		box-shadow: none;
-		color: var(--color-text-primary);
-		cursor: pointer;
-		display: flex;
-		font-family: inherit;
-		font-size: inherit;
-		font-weight: 500;
-		gap: var(--gap-sm);
-		justify-content: space-between;
-		padding: var(--gap-sm);
-		border-radius: var(--radius-sm);
-		text-align: left;
-		width: 100%;
-
-		.item-content {
-			align-items: center;
-			display: flex;
-			gap: var(--gap-sm);
-			min-width: 0;
-		}
-
-		.submenu-chevron {
-			color: var(--color-text-secondary);
-			flex-shrink: 0;
-			height: 1.25rem;
-			width: 1.25rem;
-			margin-right: -0.25rem;
-		}
-
-		:deep(svg) {
-			color: var(--color-base);
-		}
-
-		&:hover:not(.safe-triangle-hover),
-		&:active,
-		&:focus-visible,
-		&.active {
-			:deep(svg) {
-				color: inherit;
-			}
-
-			&.base {
-				background-color: var(--color-button-bg);
-				color: var(--color-contrast);
-			}
-
-			&.primary {
-				background-color: var(--color-brand);
-				color: var(--color-accent-contrast);
-				font-weight: 500;
-			}
-
-			&.danger {
-				background-color: var(--color-red);
-				color: var(--color-accent-contrast);
-				font-weight: 500;
-			}
-
-			&.contrast {
-				background-color: var(--color-orange);
-				color: var(--color-accent-contrast);
-				font-weight: 500;
-			}
-		}
-	}
-
-	.mobile-back {
-		border-bottom: 1px solid var(--color-divider);
-		border-radius: 0;
-		margin: calc(var(--gap-sm) * -1) calc(var(--gap-sm) * -1) var(--gap-sm);
-		width: calc(100% + var(--gap-sm) * 2);
-	}
-
-	.divider {
-		border: 1px solid var(--color-divider);
-		margin: var(--gap-sm);
-		pointer-events: none;
-	}
-}
-
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.2s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-</style>
diff --git a/apps/app-frontend/src/components/ui/context-menu/types.ts b/apps/app-frontend/src/components/ui/context-menu/types.ts
deleted file mode 100644
index fe45d2b6ff..0000000000
--- a/apps/app-frontend/src/components/ui/context-menu/types.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ComponentPublicInstance } from 'vue'
-
-export type ContextMenuDivider = {
-	type: string
-}
-
-export type ContextMenuAction = {
-	name: string
-	color?: string
-	children?: ContextMenuOption[]
-}
-
-export type ContextMenuParentAction = ContextMenuAction & {
-	children: ContextMenuOption[]
-}
-
-export type ContextMenuOption = ContextMenuDivider | ContextMenuAction
-
-export type ContextMenuSelection = {
-	item: unknown
-	option: string
-}
-
-export type ContextMenuEmit = {
-	(event: 'menu-closed'): void
-	(event: 'option-clicked', selection: ContextMenuSelection): void
-}
-
-export type Point = {
-	x: number
-	y: number
-}
-
-export type ViewportRect = {
-	width: number
-	height: number
-	offsetTop: number
-	offsetLeft: number
-}
-
-export type ButtonRefElement = Element | ComponentPublicInstance | null
diff --git a/apps/app-frontend/src/components/ui/context-menu/use-context-menu-position.ts b/apps/app-frontend/src/components/ui/context-menu/use-context-menu-position.ts
deleted file mode 100644
index 7ffa4fef4f..0000000000
--- a/apps/app-frontend/src/components/ui/context-menu/use-context-menu-position.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import type { CSSProperties, Ref } from 'vue'
-import { computed, nextTick, ref } from 'vue'
-
-import type { ContextMenuParentAction, Point, ViewportRect } from './types'
-
-const MENU_GAP = 8
-const VIEWPORT_MARGIN = 10
-
-type ContextMenuPositionOptions = {
-	shown: Ref<boolean>
-	activeOption: Ref<ContextMenuParentAction | null>
-	activeOptionIndex: Ref<number | null>
-	isMobileSubmenuLayout: Ref<boolean>
-	contextMenu: Ref<HTMLElement | null>
-	submenu: Ref<HTMLElement | null>
-	optionButtonRefs: Map<number, HTMLElement>
-}
-
-export function useContextMenuPosition({
-	shown,
-	activeOption,
-	activeOptionIndex,
-	isMobileSubmenuLayout,
-	contextMenu,
-	submenu,
-	optionButtonRefs,
-}: ContextMenuPositionOptions) {
-	const menuStyle = ref<CSSProperties>({ left: '0px', top: '0px' })
-	const menuAnchor = ref<Point>({ x: 0, y: 0 })
-	const submenuPosition = ref<Point>({ x: 0, y: 0 })
-	const hasSubmenuPosition = ref(false)
-	let positionRafId: number | null = null
-
-	const submenuStyle = computed<CSSProperties>(() => {
-		if (isMobileSubmenuLayout.value) return menuStyle.value
-
-		return {
-			left: `${submenuPosition.value.x}px`,
-			top: `${submenuPosition.value.y}px`,
-		}
-	})
-
-	function updateMenuPosition(x: number, y: number) {
-		if (!contextMenu.value) return
-
-		const viewport = getViewportRect()
-		const menuRect = contextMenu.value.getBoundingClientRect()
-		const viewportLeft = viewport.offsetLeft
-		const viewportTop = viewport.offsetTop
-		const viewportRight = viewport.offsetLeft + viewport.width
-		const viewportBottom = viewport.offsetTop + viewport.height
-		const anchorX = x + viewport.offsetLeft
-		const anchorY = y + viewport.offsetTop
-		const left = Math.min(
-			Math.max(viewportLeft + VIEWPORT_MARGIN, anchorX + MENU_GAP),
-			Math.max(viewportLeft + VIEWPORT_MARGIN, viewportRight - menuRect.width - VIEWPORT_MARGIN),
-		)
-		const top = Math.min(
-			Math.max(viewportTop + VIEWPORT_MARGIN, anchorY + MENU_GAP),
-			Math.max(viewportTop + VIEWPORT_MARGIN, viewportBottom - menuRect.height - VIEWPORT_MARGIN),
-		)
-
-		menuStyle.value = { left: `${left}px`, top: `${top}px` }
-		if (activeOption.value) scheduleSubmenuPositionUpdate()
-	}
-
-	function updateSubmenuPosition() {
-		if (!activeOption.value || activeOptionIndex.value === null) return false
-
-		if (isMobileSubmenuLayout.value) {
-			hasSubmenuPosition.value = true
-			return true
-		}
-
-		const optionButton = optionButtonRefs.get(activeOptionIndex.value)
-		if (!optionButton || !contextMenu.value) return false
-
-		const viewport = getViewportRect()
-		const buttonRect = optionButton.getBoundingClientRect()
-		const menuRect = contextMenu.value.getBoundingClientRect()
-		const submenuRect = submenu.value?.getBoundingClientRect()
-		const submenuWidth = submenuRect?.width ?? menuRect.width
-		const submenuHeight = submenuRect?.height ?? 100
-		const direction = getSubmenuOpenDirection(menuRect, submenuWidth, viewport)
-		const preferredLeft =
-			direction === 'right'
-				? buttonRect.right + MENU_GAP
-				: buttonRect.left - submenuWidth - MENU_GAP
-		const minLeft = viewport.offsetLeft + VIEWPORT_MARGIN
-		const maxLeft = Math.max(
-			minLeft,
-			viewport.offsetLeft + viewport.width - submenuWidth - VIEWPORT_MARGIN,
-		)
-		const minTop = viewport.offsetTop + VIEWPORT_MARGIN
-		const maxTop = Math.max(
-			minTop,
-			viewport.offsetTop + viewport.height - submenuHeight - VIEWPORT_MARGIN,
-		)
-
-		submenuPosition.value = {
-			x: Math.min(Math.max(minLeft, preferredLeft), maxLeft),
-			y: Math.min(Math.max(minTop, buttonRect.top), maxTop),
-		}
-		hasSubmenuPosition.value = true
-		return true
-	}
-
-	function scheduleSubmenuPositionUpdate(retries = 8) {
-		nextTick(() => {
-			if (!shown.value || !activeOption.value) return
-
-			const hasRenderedSubmenu = submenu.value !== null
-			if (updateSubmenuPosition()) {
-				if (!hasRenderedSubmenu) nextTick(updateSubmenuPosition)
-				return
-			}
-
-			if (retries > 0) setTimeout(() => scheduleSubmenuPositionUpdate(retries - 1), 0)
-		})
-	}
-
-	function schedulePositionUpdate() {
-		if (!shown.value || positionRafId !== null) return
-
-		positionRafId = window.requestAnimationFrame(() => {
-			positionRafId = null
-			updateMenuPosition(menuAnchor.value.x, menuAnchor.value.y)
-		})
-	}
-
-	function cancelPositionUpdate() {
-		if (positionRafId !== null) window.cancelAnimationFrame(positionRafId)
-	}
-
-	return {
-		menuStyle,
-		menuAnchor,
-		submenuStyle,
-		hasSubmenuPosition,
-		updateMenuPosition,
-		scheduleSubmenuPositionUpdate,
-		schedulePositionUpdate,
-		cancelPositionUpdate,
-	}
-}
-
-function getViewportRect(): ViewportRect {
-	const visualViewport = window.visualViewport
-	return {
-		width: visualViewport?.width ?? window.innerWidth,
-		height: visualViewport?.height ?? window.innerHeight,
-		offsetTop: visualViewport?.offsetTop ?? 0,
-		offsetLeft: visualViewport?.offsetLeft ?? 0,
-	}
-}
-
-function getSubmenuOpenDirection(
-	menuRect: DOMRect,
-	submenuWidth: number,
-	viewport: ViewportRect,
-): 'left' | 'right' {
-	const viewportLeft = viewport.offsetLeft
-	const viewportRight = viewport.offsetLeft + viewport.width
-	const rightSpace = viewportRight - menuRect.right - MENU_GAP - VIEWPORT_MARGIN
-	const leftSpace = menuRect.left - viewportLeft - MENU_GAP - VIEWPORT_MARGIN
-
-	if (rightSpace >= submenuWidth) return 'right'
-	if (leftSpace >= submenuWidth) return 'left'
-	return rightSpace >= leftSpace ? 'right' : 'left'
-}
diff --git a/apps/app-frontend/src/components/ui/context-menu/use-context-menu.ts b/apps/app-frontend/src/components/ui/context-menu/use-context-menu.ts
deleted file mode 100644
index a74b5012e0..0000000000
--- a/apps/app-frontend/src/components/ui/context-menu/use-context-menu.ts
+++ /dev/null
@@ -1,357 +0,0 @@
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-
-import type {
-	ButtonRefElement,
-	ContextMenuAction,
-	ContextMenuEmit,
-	ContextMenuOption,
-	ContextMenuParentAction,
-	Point,
-} from './types'
-import { useContextMenuPosition } from './use-context-menu-position'
-import {
-	focusRelativeButton,
-	getFocusableButtons,
-	hasChildren,
-	isAction,
-	isInstanceLink,
-	isPointInTriangle,
-} from './utils'
-
-const MOBILE_SUBMENU_LAYOUT_QUERY = '(pointer: coarse), (max-width: 800px)'
-const CONTEXT_MENU_OPEN_EVENT = 'modrinth-context-menu-open'
-
-export function useContextMenu(emit: ContextMenuEmit) {
-	const item = ref<unknown>(null)
-	const contextMenu = ref<HTMLElement | null>(null)
-	const submenu = ref<HTMLElement | null>(null)
-	const options = ref<ContextMenuOption[]>([])
-	const shown = ref(false)
-	const activeOptionIndex = ref<number | null>(null)
-	const pendingOptionIndex = ref<number | null>(null)
-	const isCursorInsideSubmenu = ref(false)
-	const isMobileSubmenuLayout = ref(false)
-	const lastMousePosition = ref<Point | null>(null)
-	const contextMenuId = Symbol()
-	const optionButtonRefs = new Map<number, HTMLElement>()
-	const submenuButtonRefs = new Map<number, HTMLElement>()
-	let previousMousePosition: Point | null = null
-	let pendingOptionTimeout: ReturnType<typeof setTimeout> | null = null
-	let mobileSubmenuMediaQuery: MediaQueryList | null = null
-
-	const activeOption = computed<ContextMenuParentAction | null>(() => {
-		if (activeOptionIndex.value === null) return null
-		const option = options.value[activeOptionIndex.value]
-		return option && isAction(option) && hasChildren(option) ? option : null
-	})
-
-	const {
-		menuStyle,
-		menuAnchor,
-		submenuStyle,
-		hasSubmenuPosition,
-		updateMenuPosition,
-		scheduleSubmenuPositionUpdate,
-		schedulePositionUpdate,
-		cancelPositionUpdate,
-	} = useContextMenuPosition({
-		shown,
-		activeOption,
-		activeOptionIndex,
-		isMobileSubmenuLayout,
-		contextMenu,
-		submenu,
-		optionButtonRefs,
-	})
-
-	const isMobileActiveSubmenu = computed(
-		() => isMobileSubmenuLayout.value && activeOption.value !== null && hasSubmenuPosition.value,
-	)
-
-	function isOptionVisible(option: ContextMenuOption): option is ContextMenuAction {
-		return isAction(option) && !(isInstanceLink(item.value) && option.name === 'add_content')
-	}
-
-	function setOptionButtonRef(index: number, element: ButtonRefElement) {
-		setButtonRef(optionButtonRefs, index, element)
-	}
-
-	function setSubmenuButtonRef(index: number, element: ButtonRefElement) {
-		setButtonRef(submenuButtonRefs, index, element)
-	}
-
-	function hideMenu() {
-		if (!shown.value) return
-
-		shown.value = false
-		deactivateSubmenu()
-		emit('menu-closed')
-	}
-
-	function showMenu(event: MouseEvent, passedItem: unknown, passedOptions: ContextMenuOption[]) {
-		window.dispatchEvent(new CustomEvent(CONTEXT_MENU_OPEN_EVENT, { detail: contextMenuId }))
-
-		item.value = passedItem
-		options.value = passedOptions
-		menuAnchor.value = { x: event.clientX, y: event.clientY }
-		shown.value = true
-		deactivateSubmenu()
-		syncMobileSubmenuLayout()
-		nextTick(() => updateMenuPosition(event.clientX, event.clientY))
-	}
-
-	function handleOptionClick(option: ContextMenuAction, index: number) {
-		if (hasChildren(option)) {
-			activateSubmenu(index)
-			return
-		}
-
-		optionClicked(option.name)
-	}
-
-	function optionClicked(option: string) {
-		emit('option-clicked', { item: item.value, option })
-		hideMenu()
-	}
-
-	function handleOptionFocus(option: ContextMenuAction, index: number) {
-		if (hasChildren(option) && !isMobileSubmenuLayout.value) {
-			activateSubmenu(index)
-		} else if (!hasChildren(option)) {
-			deactivateSubmenu()
-		}
-	}
-
-	function handleOptionMouseEnter(option: ContextMenuAction, index: number) {
-		if (isMobileSubmenuLayout.value) return
-
-		if (activeOptionIndex.value === null) {
-			if (hasChildren(option)) activateSubmenu(index)
-			return
-		}
-
-		if (activeOptionIndex.value === index) return
-
-		if (!isCursorAimingAtSubmenu(lastMousePosition.value, previousMousePosition)) {
-			commitHoveredOption(index)
-			return
-		}
-
-		pendingOptionIndex.value = index
-		clearPendingOptionTimeout()
-		pendingOptionTimeout = setTimeout(() => {
-			if (pendingOptionIndex.value !== index) return
-			if (isCursorInsideSubmenu.value) {
-				pendingOptionIndex.value = null
-				return
-			}
-
-			commitHoveredOption(index)
-		}, 180)
-	}
-
-	function commitHoveredOption(index: number) {
-		const option = options.value[index]
-		if (option && hasChildren(option)) {
-			activateSubmenu(index)
-		} else {
-			deactivateSubmenu()
-		}
-	}
-
-	function activateSubmenu(index: number) {
-		clearPendingOptionTimeout()
-		pendingOptionIndex.value = null
-		activeOptionIndex.value = index
-		hasSubmenuPosition.value = false
-		scheduleSubmenuPositionUpdate()
-	}
-
-	function deactivateSubmenu() {
-		clearPendingOptionTimeout()
-		activeOptionIndex.value = null
-		pendingOptionIndex.value = null
-		hasSubmenuPosition.value = false
-		isCursorInsideSubmenu.value = false
-		lastMousePosition.value = null
-		previousMousePosition = null
-	}
-
-	function returnToMenu() {
-		const previousIndex = activeOptionIndex.value
-		deactivateSubmenu()
-		nextTick(() => {
-			if (previousIndex !== null) optionButtonRefs.get(previousIndex)?.focus()
-		})
-	}
-
-	function handleSubmenuMouseEnter() {
-		isCursorInsideSubmenu.value = true
-		clearPendingOptionTimeout()
-		pendingOptionIndex.value = null
-	}
-
-	function handleMenuMouseMove(event: MouseEvent, source: 'menu' | 'submenu') {
-		previousMousePosition = lastMousePosition.value
-		lastMousePosition.value = { x: event.clientX, y: event.clientY }
-
-		if (
-			source === 'menu' &&
-			pendingOptionIndex.value !== null &&
-			!isCursorAimingAtSubmenu(lastMousePosition.value, previousMousePosition)
-		) {
-			commitHoveredOption(pendingOptionIndex.value)
-		}
-	}
-
-	function isCursorAimingAtSubmenu(cursor: Point | null, origin: Point | null) {
-		const submenuRect = submenu.value?.getBoundingClientRect()
-		if (!submenuRect || !cursor || !origin) return false
-
-		const submenuTargetX =
-			origin.x <= submenuRect.left
-				? submenuRect.left
-				: origin.x >= submenuRect.right
-					? submenuRect.right
-					: cursor.x <= submenuRect.left
-						? submenuRect.left
-						: submenuRect.right
-		const upperTarget = { x: submenuTargetX, y: submenuRect.top - 20 }
-		const lowerTarget = { x: submenuTargetX, y: submenuRect.bottom + 20 }
-
-		return isPointInTriangle(cursor, origin, upperTarget, lowerTarget)
-	}
-
-	function handleMenuKeydown(event: KeyboardEvent) {
-		const buttons = getFocusableButtons(optionButtonRefs)
-		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-			event.preventDefault()
-			focusRelativeButton(buttons, event.key === 'ArrowDown' ? 1 : -1)
-		} else if (event.key === 'Home' || event.key === 'End') {
-			event.preventDefault()
-			buttons[event.key === 'Home' ? 0 : buttons.length - 1]?.focus()
-		} else if (event.key === 'ArrowRight') {
-			const focusedIndex = [...optionButtonRefs.entries()].find(
-				([, button]) => button === document.activeElement,
-			)?.[0]
-			const focusedOption = focusedIndex === undefined ? undefined : options.value[focusedIndex]
-			if (focusedIndex !== undefined && focusedOption && hasChildren(focusedOption)) {
-				event.preventDefault()
-				activateSubmenu(focusedIndex)
-				nextTick(() => getFocusableButtons(submenuButtonRefs)[0]?.focus())
-			}
-		} else if (event.key === 'Escape') {
-			event.preventDefault()
-			hideMenu()
-		}
-	}
-
-	function handleSubmenuKeydown(event: KeyboardEvent) {
-		const buttons = getFocusableButtons(submenuButtonRefs)
-		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-			event.preventDefault()
-			focusRelativeButton(buttons, event.key === 'ArrowDown' ? 1 : -1)
-		} else if (event.key === 'Home' || event.key === 'End') {
-			event.preventDefault()
-			buttons[event.key === 'Home' ? 0 : buttons.length - 1]?.focus()
-		} else if (event.key === 'ArrowLeft') {
-			event.preventDefault()
-			returnToMenu()
-		} else if (event.key === 'Escape') {
-			event.preventDefault()
-			hideMenu()
-		}
-	}
-
-	function syncMobileSubmenuLayout(event?: MediaQueryListEvent) {
-		isMobileSubmenuLayout.value = event?.matches ?? mobileSubmenuMediaQuery?.matches ?? false
-	}
-
-	function handleDocumentKeydown(event: KeyboardEvent) {
-		if (shown.value && event.key === 'Escape') hideMenu()
-	}
-
-	function handleContextMenuOpen(event: Event) {
-		if (shown.value && event instanceof CustomEvent && event.detail !== contextMenuId) hideMenu()
-	}
-
-	function handleClickOutside(event: MouseEvent) {
-		const target = event.target
-		if (!(target instanceof Node)) return
-		if (!contextMenu.value?.contains(target) && !submenu.value?.contains(target)) hideMenu()
-	}
-
-	onMounted(() => {
-		mobileSubmenuMediaQuery = window.matchMedia(MOBILE_SUBMENU_LAYOUT_QUERY)
-		syncMobileSubmenuLayout()
-		mobileSubmenuMediaQuery.addEventListener('change', syncMobileSubmenuLayout)
-		window.addEventListener('click', handleClickOutside)
-		window.addEventListener('resize', schedulePositionUpdate)
-		window.addEventListener('scroll', schedulePositionUpdate, true)
-		window.visualViewport?.addEventListener('scroll', schedulePositionUpdate)
-		window.visualViewport?.addEventListener('resize', schedulePositionUpdate)
-		window.addEventListener(CONTEXT_MENU_OPEN_EVENT, handleContextMenuOpen)
-		document.addEventListener('keydown', handleDocumentKeydown)
-	})
-
-	onBeforeUnmount(() => {
-		clearPendingOptionTimeout()
-		cancelPositionUpdate()
-		mobileSubmenuMediaQuery?.removeEventListener('change', syncMobileSubmenuLayout)
-		window.removeEventListener('click', handleClickOutside)
-		window.removeEventListener('resize', schedulePositionUpdate)
-		window.removeEventListener('scroll', schedulePositionUpdate, true)
-		window.visualViewport?.removeEventListener('scroll', schedulePositionUpdate)
-		window.visualViewport?.removeEventListener('resize', schedulePositionUpdate)
-		window.removeEventListener(CONTEXT_MENU_OPEN_EVENT, handleContextMenuOpen)
-		document.removeEventListener('keydown', handleDocumentKeydown)
-	})
-
-	function clearPendingOptionTimeout() {
-		if (!pendingOptionTimeout) return
-		clearTimeout(pendingOptionTimeout)
-		pendingOptionTimeout = null
-	}
-
-	return {
-		shown,
-		contextMenu,
-		submenu,
-		options,
-		menuStyle,
-		submenuStyle,
-		activeOption,
-		activeOptionIndex,
-		pendingOptionIndex,
-		hasSubmenuPosition,
-		isMobileSubmenuLayout,
-		isMobileActiveSubmenu,
-		isCursorInsideSubmenu,
-		isOptionVisible,
-		setOptionButtonRef,
-		setSubmenuButtonRef,
-		showMenu,
-		hideMenu,
-		handleOptionClick,
-		optionClicked,
-		handleOptionFocus,
-		handleOptionMouseEnter,
-		returnToMenu,
-		handleSubmenuMouseEnter,
-		handleMenuMouseMove,
-		handleMenuKeydown,
-		handleSubmenuKeydown,
-	}
-}
-
-function setButtonRef(
-	buttonRefs: Map<number, HTMLElement>,
-	index: number,
-	element: ButtonRefElement,
-) {
-	if (element instanceof HTMLElement) {
-		buttonRefs.set(index, element)
-	} else {
-		buttonRefs.delete(index)
-	}
-}
diff --git a/apps/app-frontend/src/components/ui/context-menu/utils.ts b/apps/app-frontend/src/components/ui/context-menu/utils.ts
deleted file mode 100644
index e7bd7c79d2..0000000000
--- a/apps/app-frontend/src/components/ui/context-menu/utils.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type {
-	ContextMenuAction,
-	ContextMenuDivider,
-	ContextMenuOption,
-	ContextMenuParentAction,
-	Point,
-} from './types'
-
-export function isAction(option: ContextMenuOption): option is ContextMenuAction {
-	return 'name' in option
-}
-
-export function isDivider(option: ContextMenuOption): option is ContextMenuDivider {
-	return 'type' in option && option.type === 'divider'
-}
-
-export function hasChildren(option: ContextMenuOption): option is ContextMenuParentAction {
-	return isAction(option) && Boolean(option.children?.length)
-}
-
-export function isInstanceLink(value: unknown) {
-	if (!value || typeof value !== 'object') return false
-
-	if ('instance' in value) {
-		const instance = value.instance
-		return Boolean(instance && typeof instance === 'object' && 'link' in instance && instance.link)
-	}
-
-	return 'link' in value && Boolean(value.link)
-}
-
-export function getFocusableButtons(buttonRefs: Map<number, HTMLElement>) {
-	return [...buttonRefs.entries()]
-		.sort(([left], [right]) => left - right)
-		.map(([, button]) => button)
-		.filter((button) => button.offsetParent !== null)
-}
-
-export function focusRelativeButton(buttons: HTMLElement[], direction: 1 | -1) {
-	if (!buttons.length) return
-
-	const currentIndex = buttons.indexOf(document.activeElement as HTMLElement)
-	const nextIndex =
-		currentIndex === -1 ? (direction === 1 ? 0 : buttons.length - 1) : currentIndex + direction
-	buttons[(nextIndex + buttons.length) % buttons.length]?.focus()
-}
-
-export function isPointInTriangle(point: Point, a: Point, b: Point, c: Point) {
-	const area = triangleArea(a, b, c)
-	const area1 = triangleArea(point, b, c)
-	const area2 = triangleArea(a, point, c)
-	const area3 = triangleArea(a, b, point)
-
-	return Math.abs(area - (area1 + area2 + area3)) < 0.5
-}
-
-function triangleArea(a: Point, b: Point, c: Point) {
-	return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y)) / 2)
-}
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index b5c281e81a..8db35f4cf8 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -122,6 +122,11 @@ function addFriendFromModal() {
 	username.value = ''
 }
 
+function showAddFriendModal() {
+	username.value = ''
+	addFriendModal.value?.show()
+}
+
 function addFriend(friend: FriendWithUserData) {
 	acceptFriend(friend)
 }
@@ -130,6 +135,8 @@ function removeFriend(friend: FriendWithUserData) {
 	removeFriendRecord(friend)
 }
 
+defineExpose({ showAddFriendModal })
+
 const messages = defineMessages({
 	addFriend: {
 		id: 'friends.action.add-friend',
@@ -284,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/friends/FriendsSection.vue b/apps/app-frontend/src/components/ui/friends/FriendsSection.vue
index e9678ec7b7..fe08538662 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsSection.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsSection.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
+import type { ButtonMenuOption } from '@modrinth/ui'
 import {
 	Accordion,
-	Avatar,
+	ContextMenu,
 	defineMessages,
 	IconButton,
 	TeleportOverflowMenu,
+	UserAvatar,
 	useVIntl,
 } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 
 const { formatMessage } = useVIntl()
@@ -36,27 +37,30 @@ const emit = defineEmits<{
 	onClose: []
 }>()
 
-function createContextMenuOptions(friend: FriendWithUserData) {
-	if (friend.accepted) {
-		return [
-			{
-				name: 'view-profile',
-			},
-			{
-				name: 'remove-friend',
-				color: 'danger',
-			},
-		]
-	} else {
-		return [
-			{
-				name: 'view-profile',
-			},
-			{
-				name: 'cancel-request',
-			},
-		]
-	}
+function createContextMenuOptions(friend: FriendWithUserData): ButtonMenuOption[] {
+	return [
+		{
+			id: 'view-profile',
+			label: formatMessage(messages.viewProfile),
+			icon: UserIcon,
+			action: () => openProfile(friend.username),
+		},
+		friend.accepted
+			? {
+					id: 'remove-friend',
+					label: formatMessage(messages.removeFriend),
+					icon: TrashIcon,
+					tone: 'red',
+					hoverFilledOnly: true,
+					action: () => void props.removeFriend(friend),
+				}
+			: {
+					id: 'cancel-request',
+					label: formatMessage(messages.cancelRequest),
+					icon: XIcon,
+					action: () => void props.removeFriend(friend),
+				},
+	]
 }
 
 function openProfile(username: string) {
@@ -64,16 +68,6 @@ function openProfile(username: string) {
 }
 
 const friendOptions = useTemplateRef('friendOptions')
-async function handleFriendOptions(args: { item: FriendWithUserData; option: string }) {
-	switch (args.option) {
-		case 'remove-friend':
-		case 'cancel-request':
-			await props.removeFriend(args.item)
-			break
-		case 'view-profile':
-			openProfile(args.item.username)
-	}
-}
 
 const messages = defineMessages({
 	removeFriend: {
@@ -96,18 +90,15 @@ const messages = defineMessages({
 		id: 'friends.friend.view-profile',
 		defaultMessage: 'View profile',
 	},
+	friendActionsLabel: {
+		id: 'friends.friend.actions.label',
+		defaultMessage: 'Friend actions',
+	},
 })
 </script>
 
 <template>
-	<ContextMenu ref="friendOptions" @option-clicked="handleFriendOptions">
-		<template #view-profile>
-			<UserIcon />
-			{{ formatMessage(messages.viewProfile) }}
-		</template>
-		<template #remove-friend> <TrashIcon /> {{ formatMessage(messages.removeFriend) }} </template>
-		<template #cancel-request> <XIcon /> {{ formatMessage(messages.cancelRequest) }} </template>
-	</ContextMenu>
+	<ContextMenu ref="friendOptions" :label="formatMessage(messages.friendActionsLabel)" />
 	<Accordion
 		:open-by-default="openByDefault"
 		:force-open="isSearching"
@@ -130,32 +121,24 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
+					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1 select-none"
 					@contextmenu.prevent.stop="
-						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
+						(event) => friendOptions?.open(event, createContextMenuOptions(friend))
 					"
 				>
 					<RouterLink
 						:to="`/user/${encodeURIComponent(friend.username)}`"
-						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline"
+						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline group no-click-animation"
 					>
-						<div class="relative">
-							<Avatar
-								:src="friend.avatar"
-								:class="{ grayscale: !friend.online && friend.accepted }"
-								class="w-12 h-12 rounded-full"
-								size="32px"
-								circle
-							/>
-							<span
-								v-if="friend.online"
-								aria-hidden="true"
-								class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-							/>
-						</div>
+						<UserAvatar
+							:src="friend.avatar"
+							size="32px"
+							:badge="friend.online"
+							:grayscale="!friend.online && friend.accepted"
+						/>
 						<div class="flex flex-col">
 							<span
-								class="text-sm m-0"
+								class="text-sm m-0 group-hover:underline"
 								:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
 							>
 								{{ friend.username }}
diff --git a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
index e9992f331a..ed6e45cfce 100644
--- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
@@ -121,7 +121,11 @@ async function addServer(instance) {
 						:to="`/instance/${encodeURIComponent(instance.id)}`"
 						@click="modal.hide()"
 					>
-						<Avatar :src="getInstanceIconUrl(instance.icon_path)" class="mr-2 [--size:2rem]" />
+						<Avatar
+							:src="getInstanceIconUrl(instance.icon_path)"
+							class="mr-2 [--size:2rem]"
+							pad-transparent-corners
+						/>
 						{{ instance.name }}
 					</router-link>
 					<Button :disabled="instance.added || instance.adding" @click="addServer(instance)">
diff --git a/apps/app-frontend/src/components/ui/library/group-instances-modal.vue b/apps/app-frontend/src/components/ui/library/group-instances-modal.vue
index d5d3f86df6..22f5dd02c6 100644
--- a/apps/app-frontend/src/components/ui/library/group-instances-modal.vue
+++ b/apps/app-frontend/src/components/ui/library/group-instances-modal.vue
@@ -51,6 +51,7 @@
 							:alt="instance.name"
 							size="2rem"
 							rounded="md"
+							pad-transparent-corners
 						/>
 						<span class="truncate font-semibold text-contrast">{{ instance.name }}</span>
 					</div>
diff --git a/apps/app-frontend/src/components/ui/library/index.vue b/apps/app-frontend/src/components/ui/library/index.vue
index 088ff3ba1f..843d420268 100644
--- a/apps/app-frontend/src/components/ui/library/index.vue
+++ b/apps/app-frontend/src/components/ui/library/index.vue
@@ -1,23 +1,9 @@
 <script setup lang="ts">
-import {
-	ClipboardCopyIcon,
-	EditIcon,
-	EyeIcon,
-	FolderOpenIcon,
-	MinusIcon,
-	PaletteIcon,
-	PlayIcon,
-	PlusIcon,
-	StarIcon,
-	StopCircleIcon,
-	TrashIcon,
-	UploadIcon,
-} from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@modrinth/ui'
+import { StarIcon } from '@modrinth/assets'
+import { ContextMenu, defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, nextTick, onDeactivated, onUnmounted, ref, toRef, watch } from 'vue'
 import Draggable from 'vuedraggable'
 
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue'
 import GroupInstancesModal from '@/components/ui/library/group-instances-modal.vue'
 import InstanceGroup from '@/components/ui/library/instance-group/index.vue'
@@ -44,55 +30,9 @@ const messages = defineMessages({
 		id: 'app.library.search.no-results.title',
 		defaultMessage: 'No instances match your search.',
 	},
-	play: { id: 'app.library.instance.action.play', defaultMessage: 'Play' },
-	stop: { id: 'app.library.instance.action.stop', defaultMessage: 'Stop' },
-	addToFavorites: {
-		id: 'app.library.instance.action.add-to-favorites',
-		defaultMessage: 'Add to favorites',
-	},
-	removeFromFavorites: {
-		id: 'app.library.instance.action.remove-from-favorites',
-		defaultMessage: 'Remove from favorites',
-	},
-	addContent: { id: 'app.library.instance.action.add-content', defaultMessage: 'Add content' },
-	viewInstance: {
-		id: 'app.library.instance.action.view-instance',
-		defaultMessage: 'View instance',
-	},
-	editIcon: {
-		id: 'instance.settings.tabs.general.edit-icon',
-		defaultMessage: 'Edit icon',
-	},
-	selectIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.select',
-		defaultMessage: 'Select icon',
-	},
-	replaceIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.replace',
-		defaultMessage: 'Replace icon',
-	},
-	createIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.create',
-		defaultMessage: 'Create an icon',
-	},
-	editCreatedIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.edit-created',
-		defaultMessage: 'Edit icon',
-	},
-	removeIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.remove',
-		defaultMessage: 'Remove icon',
-	},
-	duplicateInstance: {
-		id: 'app.library.instance.action.duplicate',
-		defaultMessage: 'Duplicate instance',
-	},
-	delete: { id: 'app.library.instance.action.delete', defaultMessage: 'Delete' },
-	openFolder: { id: 'app.library.instance.action.open-folder', defaultMessage: 'Open folder' },
-	copyPath: { id: 'app.library.instance.action.copy-path', defaultMessage: 'Copy path' },
-	removeFromGroup: {
-		id: 'app.library.instance.action.remove-from-group',
-		defaultMessage: 'Remove from group',
+	instanceActionsLabel: {
+		id: 'app.library.instance.actions.label',
+		defaultMessage: 'Instance actions',
 	},
 })
 
@@ -111,7 +51,6 @@ const {
 	currentDeleteInstances,
 	clearLibraryInstanceSelection,
 	deleteInstance,
-	handleInstanceOption,
 	handleInstanceIconSaved,
 	selectedLibraryInstances,
 	setSelectedLibraryInstances,
@@ -432,34 +371,10 @@ watch(selectedLibraryInstances, (selectedInstances) => {
 		:config="currentIconEditorInstance?.icon_config"
 		@saved="handleInstanceIconSaved"
 	/>
-	<ContextMenu :ref="setInstanceOptions" @option-clicked="handleInstanceOption">
-		<template #play> <PlayIcon /> {{ formatMessage(messages.play) }} </template>
-		<template #stop> <StopCircleIcon /> {{ formatMessage(messages.stop) }} </template>
-		<template #add_to_favorites>
-			<StarIcon /> {{ formatMessage(messages.addToFavorites) }}
-		</template>
-		<template #remove_from_favorites>
+	<ContextMenu :ref="setInstanceOptions" :label="formatMessage(messages.instanceActionsLabel)">
+		<template #remove_from_favorites="{ option }">
 			<StarIcon style="color: var(--color-text-default); fill: var(--color-text-default)" />
-			{{ formatMessage(messages.removeFromFavorites) }}
-		</template>
-		<template #add_content> <PlusIcon /> {{ formatMessage(messages.addContent) }} </template>
-		<template #edit> <EyeIcon /> {{ formatMessage(messages.viewInstance) }} </template>
-		<template #edit_icon> <EditIcon /> {{ formatMessage(messages.editIcon) }} </template>
-		<template #select_icon> <UploadIcon /> {{ formatMessage(messages.selectIcon) }} </template>
-		<template #replace_icon> <UploadIcon /> {{ formatMessage(messages.replaceIcon) }} </template>
-		<template #create_icon> <PaletteIcon /> {{ formatMessage(messages.createIcon) }} </template>
-		<template #edit_created_icon>
-			<PaletteIcon /> {{ formatMessage(messages.editCreatedIcon) }}
-		</template>
-		<template #remove_icon> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-		<template #duplicate>
-			<ClipboardCopyIcon /> {{ formatMessage(messages.duplicateInstance) }}
-		</template>
-		<template #delete> <TrashIcon /> {{ formatMessage(messages.delete) }} </template>
-		<template #open> <FolderOpenIcon /> {{ formatMessage(messages.openFolder) }} </template>
-		<template #copy> <ClipboardCopyIcon /> {{ formatMessage(messages.copyPath) }} </template>
-		<template #remove_from_group>
-			<MinusIcon /> {{ formatMessage(messages.removeFromGroup) }}
+			{{ option.label }}
 		</template>
 	</ContextMenu>
 </template>
diff --git a/apps/app-frontend/src/components/ui/library/instance-group/index.vue b/apps/app-frontend/src/components/ui/library/instance-group/index.vue
index fd8ac1d075..7b0b879332 100644
--- a/apps/app-frontend/src/components/ui/library/instance-group/index.vue
+++ b/apps/app-frontend/src/components/ui/library/instance-group/index.vue
@@ -12,6 +12,7 @@ import {
 	Accordion,
 	Button,
 	commonMessages,
+	ContextMenu,
 	defineMessages,
 	injectNotificationManager,
 	InlineEditableText,
@@ -21,7 +22,6 @@ import {
 } from '@modrinth/ui'
 import { computed, inject, nextTick, onActivated, onDeactivated, onMounted, ref, watch } from 'vue'
 
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import GroupActionButtons from '@/components/ui/library/instance-group/group-action-buttons.vue'
 import InstanceCard from '@/components/ui/library/instance-group/instance-card.vue'
 import type {
@@ -163,6 +163,10 @@ const messages = defineMessages({
 		id: 'app.library.group.empty',
 		defaultMessage: 'Drag and drop to add instances.',
 	},
+	groupActionsLabel: {
+		id: 'app.library.group.actions.label',
+		defaultMessage: 'Group actions',
+	},
 })
 
 function openInstanceContextMenu(event: MouseEvent, instanceId: string, instanceGroupId: string) {
@@ -204,49 +208,45 @@ function requestGroupDeletion() {
 
 function openGroupContextMenu(event: MouseEvent) {
 	groupContextMenuOpen.value = true
-	groupOptions.value?.showMenu(
-		event,
-		props.instanceGroup,
-		isFavorites.value
-			? [{ name: 'new_instance' }]
-			: isCustomGroup.value
-				? [
-						{ name: 'new_instance' },
-						{ name: 'add_instances' },
-						{ name: 'edit_name' },
-						{ type: 'divider' },
-						{ name: 'delete_group', color: 'danger' },
-					]
-				: [{ name: 'new_instance' }],
-	)
-}
-
-function handleGroupOption({ option }: { option: string }) {
-	if (option === 'new_instance') {
-		showCreationModal?.()
-		return
-	}
-
-	if (option === 'add_instances') {
-		openGroupInstancesModal(props.instanceGroup.id)
-		return
-	}
-
-	if (option === 'edit_name') {
-		void groupNameInput.value?.startEditing()
-		return
-	}
-
-	if (option === 'delete_group') {
-		requestGroupDeletion()
-	}
+	groupOptions.value?.open(event, [
+		{
+			id: 'new_instance',
+			label: formatMessage(messages.newInstance),
+			icon: PlusIcon,
+			action: () => showCreationModal?.(),
+		},
+		{
+			id: 'add_instances',
+			label: formatMessage(messages.addToGroup),
+			icon: SquarePlusIcon,
+			shown: isCustomGroup.value,
+			action: () => openGroupInstancesModal(props.instanceGroup.id),
+		},
+		{
+			id: 'edit_name',
+			label: formatMessage(messages.editGroupName),
+			icon: EditIcon,
+			shown: isCustomGroup.value,
+			action: () => void groupNameInput.value?.startEditing(),
+		},
+		{ type: 'divider', shown: isCustomGroup.value },
+		{
+			id: 'delete_group',
+			label: formatMessage(messages.deleteGroup),
+			icon: TrashIcon,
+			shown: isCustomGroup.value,
+			tone: 'red',
+			hoverFilledOnly: true,
+			action: requestGroupDeletion,
+		},
+	])
 }
 
 function prepareGroupToggle(event: PointerEvent) {
 	const editor = groupNameInput.value
 	const contextMenuWasOpen = groupContextMenuOpen.value
 	if (contextMenuWasOpen) {
-		groupOptions.value?.hideMenu()
+		groupOptions.value?.close()
 	}
 
 	shouldSkipGroupToggle = Boolean(
@@ -523,16 +523,9 @@ onMounted(startInstanceGridResizeObserver)
 
 	<ContextMenu
 		ref="groupOptions"
-		@menu-closed="groupContextMenuOpen = false"
-		@option-clicked="handleGroupOption"
-	>
-		<template #new_instance> <PlusIcon /> {{ formatMessage(messages.newInstance) }} </template>
-		<template #add_instances>
-			<SquarePlusIcon /> {{ formatMessage(messages.addToGroup) }}
-		</template>
-		<template #edit_name> <EditIcon /> {{ formatMessage(messages.editGroupName) }} </template>
-		<template #delete_group> <TrashIcon /> {{ formatMessage(messages.deleteGroup) }} </template>
-	</ContextMenu>
+		:label="formatMessage(messages.groupActionsLabel)"
+		@close="groupContextMenuOpen = false"
+	/>
 
 	<NewModal
 		ref="confirmDeleteGroupModal"
diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue
index e062f193a6..a5bcf247d2 100644
--- a/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue
+++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue
@@ -47,6 +47,7 @@ const versionRef = ref<HTMLElement | null>(null)
 				:tint-by="instance.id"
 				alt=""
 				no-shadow
+				pad-transparent-corners
 			/>
 			<slot name="loading" :compact="compactMode" />
 			<div
diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
index e8499b9bfb..af77229c68 100644
--- a/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
+++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
@@ -242,6 +242,9 @@ defineExpose({
 	openFolder,
 	addContent,
 	instance: props.instance,
+	get playing() {
+		return playing.value
+	},
 })
 
 useAppEvent('process', (event) => {
diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue
index 41c4eff743..f015bf6fd4 100644
--- a/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue
+++ b/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue
@@ -60,6 +60,7 @@
 							:alt="instance.name"
 							size="2rem"
 							rounded="md"
+							pad-transparent-corners
 						/>
 						<div class="flex min-w-0 items-center gap-2">
 							<span class="truncate font-semibold text-contrast">{{ instance.name }}</span>
diff --git a/apps/app-frontend/src/components/ui/library/use-library.ts b/apps/app-frontend/src/components/ui/library/use-library.ts
index 0fb47e0fe4..b449645c43 100644
--- a/apps/app-frontend/src/components/ui/library/use-library.ts
+++ b/apps/app-frontend/src/components/ui/library/use-library.ts
@@ -1,5 +1,20 @@
 import type { Labrinth } from '@modrinth/api-client'
-import { formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import {
+	ClipboardCopyIcon,
+	EditIcon,
+	EyeIcon,
+	FolderOpenIcon,
+	MinusIcon,
+	PaletteIcon,
+	PlayIcon,
+	PlusIcon,
+	StarIcon,
+	StopCircleIcon,
+	TrashIcon,
+	UploadIcon,
+} from '@modrinth/assets'
+import type { ButtonMenuLeafOption, ButtonMenuOption } from '@modrinth/ui'
+import { defineMessages, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { open as openDialog } from '@tauri-apps/plugin-dialog'
 import { useEventListener, useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
@@ -98,7 +113,7 @@ export type InstanceCard = {
 }
 
 type InstanceContextMenu = {
-	showMenu: (event: MouseEvent, item: InstanceCard, options: unknown[]) => void
+	open: (event: MouseEvent, options: ButtonMenuOption[]) => void
 }
 
 type ConfirmDeleteModal = {
@@ -109,10 +124,58 @@ type IconEditorModal = {
 	show: () => void
 }
 
-type ContextMenuSelection = {
-	option: string
-	item: InstanceCard
-}
+const instanceActionMessages = defineMessages({
+	play: { id: 'app.library.instance.action.play', defaultMessage: 'Play' },
+	stop: { id: 'app.library.instance.action.stop', defaultMessage: 'Stop' },
+	addToFavorites: {
+		id: 'app.library.instance.action.add-to-favorites',
+		defaultMessage: 'Add to favorites',
+	},
+	removeFromFavorites: {
+		id: 'app.library.instance.action.remove-from-favorites',
+		defaultMessage: 'Remove from favorites',
+	},
+	addContent: { id: 'app.library.instance.action.add-content', defaultMessage: 'Add content' },
+	viewInstance: {
+		id: 'app.library.instance.action.view-instance',
+		defaultMessage: 'View instance',
+	},
+	editIcon: {
+		id: 'instance.settings.tabs.general.edit-icon',
+		defaultMessage: 'Edit icon',
+	},
+	selectIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.select',
+		defaultMessage: 'Select icon',
+	},
+	replaceIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.replace',
+		defaultMessage: 'Replace icon',
+	},
+	createIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.create',
+		defaultMessage: 'Create an icon',
+	},
+	editCreatedIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.edit-created',
+		defaultMessage: 'Edit icon',
+	},
+	removeIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.remove',
+		defaultMessage: 'Remove icon',
+	},
+	duplicateInstance: {
+		id: 'app.library.instance.action.duplicate',
+		defaultMessage: 'Duplicate instance',
+	},
+	delete: { id: 'app.library.instance.action.delete', defaultMessage: 'Delete' },
+	openFolder: { id: 'app.library.instance.action.open-folder', defaultMessage: 'Open folder' },
+	copyPath: { id: 'app.library.instance.action.copy-path', defaultMessage: 'Copy path' },
+	removeFromGroup: {
+		id: 'app.library.instance.action.remove-from-group',
+		defaultMessage: 'Remove from group',
+	},
+})
 
 function createLibraryState(instances: Ref<GameInstance[]>) {
 	const { handleError } = injectNotificationManager()
@@ -160,7 +223,6 @@ function createLibraryState(instances: Ref<GameInstance[]>) {
 	const currentDeleteInstances = computed(() =>
 		instances.value.filter((instance) => instance.id === currentDeleteInstanceId.value),
 	)
-	const currentContextGroupId = ref<string | null>(null)
 	const confirmDeleteModal = ref<ConfirmDeleteModal | null>(null)
 	const iconEditorModal = ref<IconEditorModal | null>(null)
 	const currentIconEditorInstanceId = ref<string | null>(null)
@@ -1156,121 +1218,153 @@ function createLibraryState(instances: Ref<GameInstance[]>) {
 		trackEvent('InstanceSaveCreatedIcon')
 	}
 
+	const setInstanceGroups = async (item: InstanceCard, groupIds: string[]) =>
+		await edit(item.instance.id, { group_ids: groupIds }).catch((error) =>
+			handleError(toError(error)),
+		)
+
+	const buildInstanceIconOptions = (item: InstanceCard): ButtonMenuLeafOption[] => [
+		{
+			id: item.instance.icon_path ? 'replace_icon' : 'select_icon',
+			label: formatMessage(
+				item.instance.icon_path
+					? instanceActionMessages.replaceIcon
+					: instanceActionMessages.selectIcon,
+			),
+			icon: UploadIcon,
+			action: () => void selectInstanceIcon(item),
+		},
+		{
+			id: item.instance.icon_config ? 'edit_created_icon' : 'create_icon',
+			label: formatMessage(
+				item.instance.icon_config
+					? instanceActionMessages.editCreatedIcon
+					: instanceActionMessages.createIcon,
+			),
+			icon: PaletteIcon,
+			action: () => void openInstanceIconEditor(item),
+		},
+		{
+			id: 'remove_icon',
+			label: formatMessage(instanceActionMessages.removeIcon),
+			icon: TrashIcon,
+			shown: !!item.instance.icon_path,
+			action: () => void removeInstanceIcon(item),
+		},
+	]
+
 	const handleInstanceContextMenu = (
 		event: MouseEvent,
 		item: InstanceCard,
 		instanceGroupId: string,
 	) => {
-		currentContextGroupId.value =
+		const removableGroupId =
 			displayState.value.group === 'Group' &&
 			instanceGroupId !== 'group:none' &&
 			instanceGroupId !== FAVORITES_GROUP_ID
 				? instanceGroupId
 				: null
+		const isFavorite = item.instance.group_ids.includes(FAVORITES_GROUP_ID)
+		const canAddContent = !item.instance.quarantined && !item.instance.link
 
-		const baseOptions = [
+		instanceOptions.value?.open(event, [
 			{
-				name: item.instance.group_ids.includes(FAVORITES_GROUP_ID)
-					? 'remove_from_favorites'
-					: 'add_to_favorites',
+				id: 'stop',
+				label: formatMessage(instanceActionMessages.stop),
+				icon: StopCircleIcon,
+				shown: item.playing,
+				tone: 'red',
+				action: () => void item.stop(null, 'InstanceGridContextMenu'),
+			},
+			{
+				id: 'play',
+				label: formatMessage(instanceActionMessages.play),
+				icon: PlayIcon,
+				shown: !item.playing && !item.instance.quarantined,
+				tone: 'brand',
+				action: () => void item.play(null, 'InstanceGridContextMenu'),
+			},
+			{
+				id: isFavorite ? 'remove_from_favorites' : 'add_to_favorites',
+				label: formatMessage(
+					isFavorite
+						? instanceActionMessages.removeFromFavorites
+						: instanceActionMessages.addToFavorites,
+				),
+				icon: StarIcon,
+				action: () =>
+					void setInstanceGroups(
+						item,
+						isFavorite
+							? item.instance.group_ids.filter((groupId) => groupId !== FAVORITES_GROUP_ID)
+							: [...new Set([...item.instance.group_ids, FAVORITES_GROUP_ID])],
+					),
 			},
 			{ type: 'divider' },
-			...(!item.instance.quarantined && !item.instance.link
-				? [{ name: 'add_content' }, { type: 'divider' }]
-				: []),
-			{ name: 'edit' },
-			{ name: 'duplicate' },
-			{ name: 'open' },
-			{ name: 'copy' },
 			{
-				name: 'edit_icon',
-				children: [
-					{ name: item.instance.icon_path ? 'replace_icon' : 'select_icon' },
-					{ name: item.instance.icon_config ? 'edit_created_icon' : 'create_icon' },
-					...(item.instance.icon_path ? [{ name: 'remove_icon' }] : []),
-				],
+				id: 'add_content',
+				label: formatMessage(instanceActionMessages.addContent),
+				icon: PlusIcon,
+				shown: canAddContent,
+				action: () => void item.addContent(),
 			},
-			...(currentContextGroupId.value
-				? [{ name: 'remove_from_group' }, { type: 'divider' }]
-				: [{ type: 'divider' }]),
-			{ name: 'delete', color: 'danger' },
-		]
-
-		instanceOptions.value?.showMenu(
-			event,
-			item,
-			item.playing
-				? [{ name: 'stop', color: 'danger' }, ...baseOptions]
-				: [
-						...(item.instance.quarantined ? [] : [{ name: 'play', color: 'primary' }]),
-						...baseOptions,
-					],
-		)
-	}
-
-	const handleInstanceOption = async ({ option, item }: ContextMenuSelection) => {
-		switch (option) {
-			case 'play':
-				await item.play(null, 'InstanceGridContextMenu')
-				break
-			case 'stop':
-				await item.stop(null, 'InstanceGridContextMenu')
-				break
-			case 'add_content':
-				await item.addContent()
-				break
-			case 'add_to_favorites':
-				await edit(item.instance.id, {
-					group_ids: [...new Set([...item.instance.group_ids, FAVORITES_GROUP_ID])],
-				}).catch((error) => handleError(toError(error)))
-				break
-			case 'remove_from_favorites':
-				await edit(item.instance.id, {
-					group_ids: item.instance.group_ids.filter(
-						(instanceGroupId) => instanceGroupId !== FAVORITES_GROUP_ID,
+			{ type: 'divider', shown: canAddContent },
+			{
+				id: 'edit',
+				label: formatMessage(instanceActionMessages.viewInstance),
+				icon: EyeIcon,
+				action: () => void item.seeInstance(),
+			},
+			{
+				id: 'duplicate',
+				label: formatMessage(instanceActionMessages.duplicateInstance),
+				icon: ClipboardCopyIcon,
+				disabled: item.instance.install_stage !== 'installed',
+				action: () => void duplicateInstance(item.instance.id),
+			},
+			{
+				id: 'open',
+				label: formatMessage(instanceActionMessages.openFolder),
+				icon: FolderOpenIcon,
+				action: () => void item.openFolder(),
+			},
+			{
+				id: 'copy',
+				label: formatMessage(instanceActionMessages.copyPath),
+				icon: ClipboardCopyIcon,
+				action: () => void navigator.clipboard.writeText(item.instance.id),
+			},
+			{
+				type: 'submenu',
+				id: 'edit_icon',
+				label: formatMessage(instanceActionMessages.editIcon),
+				icon: EditIcon,
+				options: buildInstanceIconOptions(item),
+			},
+			{
+				id: 'remove_from_group',
+				label: formatMessage(instanceActionMessages.removeFromGroup),
+				icon: MinusIcon,
+				shown: !!removableGroupId,
+				action: () =>
+					void setInstanceGroups(
+						item,
+						item.instance.group_ids.filter((groupId) => groupId !== removableGroupId),
 					),
-				}).catch((error) => handleError(toError(error)))
-				break
-			case 'edit':
-				await item.seeInstance()
-				break
-			case 'select_icon':
-			case 'replace_icon':
-				await selectInstanceIcon(item)
-				break
-			case 'create_icon':
-			case 'edit_created_icon':
-				await openInstanceIconEditor(item)
-				break
-			case 'remove_icon':
-				await removeInstanceIcon(item)
-				break
-			case 'duplicate':
-				if (item.instance.install_stage === 'installed') {
-					await duplicateInstance(item.instance.id)
-				}
-				break
-			case 'open':
-				await item.openFolder()
-				break
-			case 'copy':
-				await navigator.clipboard.writeText(item.instance.id)
-				break
-			case 'remove_from_group':
-				if (currentContextGroupId.value) {
-					const groupId = currentContextGroupId.value
-					await edit(item.instance.id, {
-						group_ids: item.instance.group_ids.filter(
-							(instanceGroupId) => instanceGroupId !== groupId,
-						),
-					}).catch((error) => handleError(toError(error)))
-				}
-				break
-			case 'delete':
-				currentDeleteInstanceId.value = item.instance.id
-				confirmDeleteModal.value?.show()
-				break
-		}
+			},
+			{ type: 'divider' },
+			{
+				id: 'delete',
+				label: formatMessage(instanceActionMessages.delete),
+				icon: TrashIcon,
+				tone: 'red',
+				hoverFilledOnly: true,
+				action: () => {
+					currentDeleteInstanceId.value = item.instance.id
+					confirmDeleteModal.value?.show()
+				},
+			},
+		])
 	}
 
 	return {
@@ -1339,7 +1433,6 @@ function createLibraryState(instances: Ref<GameInstance[]>) {
 		moveGroup,
 		deleteInstance,
 		handleInstanceContextMenu,
-		handleInstanceOption,
 		handleInstanceIconSaved,
 	}
 }
diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
index 97258665d3..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({
@@ -222,7 +222,27 @@ function showProfile(): void {
 	modal.value?.show()
 }
 
-defineExpose({ show, showProfile })
+function showFeatureFlags(): void {
+	const featureFlagsTabIndex = availableTabs.value.findIndex(
+		(tab) => tab.content === FeatureFlagSettings,
+	)
+	if (featureFlagsTabIndex >= 0) {
+		modal.value?.setTab(featureFlagsTabIndex)
+	}
+	modal.value?.show()
+}
+
+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/modal/ConfirmDeleteInstanceModal.vue b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
index 560f117a25..e2af57163a 100644
--- a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
@@ -39,6 +39,7 @@
 								size="40px"
 								class="!rounded-xl"
 								no-shadow
+								pad-transparent-corners
 							/>
 							<div class="flex min-w-0 flex-col gap-1.5">
 								<span class="min-w-0 truncate font-semibold text-contrast">
diff --git a/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue b/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
index ad413f1ab8..9641ecb9e2 100644
--- a/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
@@ -120,7 +120,7 @@ import { ref } from 'vue'
 import { cancelLogin, type ModrinthAuthFlow } from '@/helpers/mr_auth'
 
 const props = defineProps<{
-	requestAuth: (flow: ModrinthAuthFlow) => Promise<boolean>
+	requestAuth: (flow: ModrinthAuthFlow, addAccount?: boolean) => Promise<boolean>
 }>()
 
 const { formatMessage } = useVIntl()
@@ -130,6 +130,7 @@ const reopeningBrowser = ref(false)
 let resolveShow: ((signedIn: boolean) => void) | undefined
 let authenticationId = 0
 let activeAuthentication: Promise<void> | undefined
+let addingAccount = false
 
 function show(event?: MouseEvent) {
 	resetAuthentication(true)
@@ -143,9 +144,9 @@ function show(event?: MouseEvent) {
 	})
 }
 
-function showSigningIn(flow: ModrinthAuthFlow = 'sign-in', event?: MouseEvent) {
+function showSigningIn(flow: ModrinthAuthFlow = 'sign-in', addAccount = false, event?: MouseEvent) {
 	const result = show(event)
-	authenticate(flow)
+	authenticate(flow, addAccount)
 	return result
 }
 
@@ -154,13 +155,14 @@ function finish(signedIn: boolean) {
 	resolveShow = undefined
 }
 
-function authenticate(flow: ModrinthAuthFlow) {
+function authenticate(flow: ModrinthAuthFlow, addAccount = false) {
 	const id = ++authenticationId
 	authenticating.value = flow
+	addingAccount = addAccount
 
 	const authentication = (async () => {
 		try {
-			if ((await props.requestAuth(flow)) && authenticationId === id) {
+			if ((await props.requestAuth(flow, addAccount)) && authenticationId === id) {
 				authenticating.value = null
 				activeAuthentication = undefined
 				finish(true)
@@ -188,7 +190,7 @@ async function reopenBrowser() {
 	try {
 		await cancelLogin()
 		await previousAuthentication?.catch(() => undefined)
-		if (authenticating.value === flow) authenticate(flow)
+		if (authenticating.value === flow) authenticate(flow, addingAccount)
 	} finally {
 		reopeningBrowser.value = false
 	}
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..2a5c1c2997
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/group.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { useDroppable } from '@dnd-kit/vue'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { computed, onBeforeUnmount, ref, watch } 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[]
+	renderedScreenshots?: InstanceScreenshot[]
+	virtualGridHeight?: number
+	virtualGridTop?: number
+	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 shouldShowGrid = computed(() =>
+	Boolean(props.hideHeader || props.forceOpen || !collapsed.value),
+)
+const visibleScreenshots = ref<InstanceScreenshot[]>(props.renderedScreenshots ?? props.screenshots)
+const renderGrid = ref(shouldShowGrid.value)
+const virtualGridStyle = computed(() =>
+	props.virtualGridHeight === undefined ? undefined : { height: `${props.virtualGridHeight}px` },
+)
+const visibleGridStyle = computed(() =>
+	props.virtualGridTop === undefined
+		? undefined
+		: { transform: `translateY(${props.virtualGridTop}px)` },
+)
+let unmountGridTimeout: ReturnType<typeof setTimeout> | undefined
+
+watch(
+	() => props.renderedScreenshots ?? props.screenshots,
+	(screenshots) => {
+		if (shouldShowGrid.value) visibleScreenshots.value = screenshots
+	},
+)
+
+watch(
+	shouldShowGrid,
+	(showGrid, previouslyShown) => {
+		if (unmountGridTimeout) clearTimeout(unmountGridTimeout)
+		if (showGrid) {
+			visibleScreenshots.value = props.renderedScreenshots ?? props.screenshots
+			renderGrid.value = true
+			return
+		}
+		if (!previouslyShown) {
+			renderGrid.value = false
+			return
+		}
+		unmountGridTimeout = setTimeout(() => {
+			renderGrid.value = false
+			unmountGridTimeout = undefined
+		}, 300)
+	},
+	{ flush: 'post' },
+)
+
+onBeforeUnmount(() => {
+	if (unmountGridTimeout) clearTimeout(unmountGridTimeout)
+})
+
+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>
+			<div v-if="renderGrid" class="relative min-h-[45px] w-full" :style="virtualGridStyle">
+				<TransitionGroup
+					tag="div"
+					class="grid min-h-[45px] w-full grid-cols-1 gap-3 sm:grid-cols-2 2xl:grid-cols-4"
+					:class="{ 'absolute inset-x-0 top-0': virtualGridHeight !== undefined }"
+					:style="visibleGridStyle"
+					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 visibleScreenshots"
+						: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>
+			</div>
+		</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..5a85ed6918
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
@@ -0,0 +1,1654 @@
+<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,
+	useScrollViewport,
+	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 { useElementSize, useStorage, useWindowSize } 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
+}
+
+type ScreenshotGroupLayout = {
+	group: ScreenshotGroupData
+	top: number
+	height: number
+	isOpen: boolean
+	gridHeight: number
+	gridTop: number
+}
+
+type VisibleScreenshotGroupLayout = ScreenshotGroupLayout & {
+	renderedScreenshots: InstanceScreenshot[]
+	virtualGridTop: number
+}
+
+const SCREENSHOT_GRID_GAP = 12
+const SCREENSHOT_GROUP_SPACING = 12
+const SCREENSHOT_GROUP_HEADER_HEIGHT = 40
+const SCREENSHOT_GROUP_CONTENT_SPACING = 10
+const SCREENSHOT_GROUP_OVERSCAN = 900
+const SCREENSHOT_GRID_MIN_HEIGHT = 45
+const FALLBACK_SCREENSHOT_CARD_WIDTH = 320
+
+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 screenshotsScrolling = 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()
+let screenshotsScrollIdleTimeout: ReturnType<typeof setTimeout> | undefined
+const {
+	listContainer: screenshotListContainer,
+	containerOffset: screenshotListOffset,
+	relativeScrollTop: screenshotListScrollTop,
+	scrollContainer: screenshotScrollContainer,
+	viewportHeight: screenshotViewportHeight,
+} = useScrollViewport({
+	onScroll: () => {
+		screenshotsScrolling.value = true
+		if (screenshotsScrollIdleTimeout) clearTimeout(screenshotsScrollIdleTimeout)
+		screenshotsScrollIdleTimeout = setTimeout(() => {
+			screenshotsScrolling.value = false
+			screenshotsScrollIdleTimeout = undefined
+		}, 120)
+	},
+})
+const { width: screenshotListWidth } = useElementSize(screenshotListContainer)
+const { width: windowWidth } = useWindowSize()
+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 screenshotColumnCount = computed(() => {
+	if (windowWidth.value >= 1536) return 4
+	if (windowWidth.value >= 640) return 2
+	return 1
+})
+
+const screenshotCardWidth = computed(() => {
+	if (screenshotListWidth.value <= 0) return FALLBACK_SCREENSHOT_CARD_WIDTH
+	const gapsWidth = (screenshotColumnCount.value - 1) * SCREENSHOT_GRID_GAP
+	return Math.max(0, (screenshotListWidth.value - gapsWidth) / screenshotColumnCount.value)
+})
+
+const screenshotCardHeight = computed(() => (screenshotCardWidth.value * 9) / 16)
+const screenshotRowHeight = computed(() => screenshotCardHeight.value + SCREENSHOT_GRID_GAP)
+
+const screenshotGroupLayouts = computed<ScreenshotGroupLayout[]>(() => {
+	const layouts: ScreenshotGroupLayout[] = []
+	let top = 0
+
+	for (const group of groupedScreenshots.value) {
+		const isHeaderHidden = groupBy.value === 'none'
+		const isOpen = isHeaderHidden || search.value.length > 0 || !collapsedGroups.value[group.id]
+		const rowCount = Math.ceil(group.screenshots.length / screenshotColumnCount.value)
+		const gridHeight =
+			rowCount === 0
+				? SCREENSHOT_GRID_MIN_HEIGHT
+				: rowCount * screenshotCardHeight.value + Math.max(0, rowCount - 1) * SCREENSHOT_GRID_GAP
+		const headerHeight = isHeaderHidden ? 0 : SCREENSHOT_GROUP_HEADER_HEIGHT
+		const gridTop = top + headerHeight + SCREENSHOT_GROUP_CONTENT_SPACING
+		const height =
+			headerHeight +
+			(isOpen ? SCREENSHOT_GROUP_CONTENT_SPACING + gridHeight : 0) +
+			SCREENSHOT_GROUP_SPACING
+
+		layouts.push({ group, top, height, isOpen, gridHeight, gridTop })
+		top += height
+	}
+
+	return layouts
+})
+
+const screenshotListHeight = computed(() => {
+	const lastGroup = screenshotGroupLayouts.value[screenshotGroupLayouts.value.length - 1]
+	return lastGroup ? lastGroup.top + lastGroup.height : 0
+})
+
+const visibleScreenshotGroups = computed<VisibleScreenshotGroupLayout[]>(() => {
+	const hasViewport = Boolean(screenshotListContainer.value && screenshotScrollContainer.value)
+	const viewportStart = hasViewport
+		? Math.max(0, screenshotListScrollTop.value - SCREENSHOT_GROUP_OVERSCAN)
+		: 0
+	const viewportEnd = hasViewport
+		? screenshotListScrollTop.value + screenshotViewportHeight.value + SCREENSHOT_GROUP_OVERSCAN
+		: SCREENSHOT_GROUP_OVERSCAN
+
+	return screenshotGroupLayouts.value
+		.filter((layout) => layout.top + layout.height >= viewportStart && layout.top <= viewportEnd)
+		.map((layout) => {
+			if (!layout.isOpen || layout.group.screenshots.length === 0) {
+				return { ...layout, renderedScreenshots: [], virtualGridTop: 0 }
+			}
+
+			const rowCount = Math.ceil(layout.group.screenshots.length / screenshotColumnCount.value)
+			const firstRow = Math.min(
+				rowCount,
+				Math.max(0, Math.floor((viewportStart - layout.gridTop) / screenshotRowHeight.value)),
+			)
+			const lastRow = Math.min(
+				rowCount,
+				Math.max(
+					firstRow,
+					Math.ceil(
+						(viewportEnd - layout.gridTop + SCREENSHOT_GRID_GAP) / screenshotRowHeight.value,
+					),
+				),
+			)
+			const firstScreenshot = firstRow * screenshotColumnCount.value
+			const lastScreenshot = lastRow * screenshotColumnCount.value
+
+			return {
+				...layout,
+				renderedScreenshots: layout.group.screenshots.slice(firstScreenshot, lastScreenshot),
+				virtualGridTop: firstRow * screenshotRowHeight.value,
+			}
+		})
+})
+
+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()
+	await waitForScreenshotViewport()
+	highlightedScreenshotId.value = id
+
+	const layout = screenshotGroupLayouts.value.find((candidate) => candidate.group.id === group?.id)
+	const screenshotIndex = layout?.group.screenshots.findIndex((screenshot) => screenshot.id === id)
+	const scrollTarget = screenshotScrollContainer.value
+	if (layout && screenshotIndex !== undefined && screenshotIndex >= 0 && scrollTarget) {
+		const row = Math.floor(screenshotIndex / screenshotColumnCount.value)
+		const top = Math.max(
+			0,
+			screenshotListOffset.value +
+				layout.gridTop +
+				row * screenshotRowHeight.value +
+				screenshotCardHeight.value / 2 -
+				screenshotViewportHeight.value / 2,
+		)
+		scrollTarget.scrollTo({ top, behavior: 'smooth' })
+	}
+
+	const card = await waitForScreenshotCard(id)
+	card?.focus({ preventScroll: true })
+	revealTimeout = setTimeout(() => {
+		if (highlightedScreenshotId.value === id) highlightedScreenshotId.value = undefined
+		if (revealedScreenshotId.value === id) revealedScreenshotId.value = undefined
+		revealTimeout = undefined
+	}, 2400)
+}
+
+async function waitForScreenshotViewport() {
+	for (let frame = 0; frame < 10; frame++) {
+		if (screenshotListContainer.value && screenshotScrollContainer.value) return
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+	}
+}
+
+async function waitForScreenshotCard(id: string) {
+	const selector = `[data-screenshot-id="${CSS.escape(id)}"]`
+	for (let frame = 0; frame < 60; frame++) {
+		const card = screenshotListContainer.value?.querySelector<HTMLElement>(selector)
+		if (card) return card
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+	}
+	return undefined
+}
+
+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)
+	if (screenshotsScrollIdleTimeout) clearTimeout(screenshotsScrollIdleTimeout)
+	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
+					ref="screenshotListContainer"
+					class="relative w-full"
+					:style="{ height: `${screenshotListHeight}px`, overflowAnchor: 'none' }"
+				>
+					<div
+						v-for="{
+							group,
+							top,
+							gridHeight,
+							renderedScreenshots,
+							virtualGridTop,
+						} in visibleScreenshotGroups"
+						:key="group.id"
+						class="absolute inset-x-0 transition-transform duration-300 ease-in-out will-change-transform motion-reduce:transition-none"
+						:style="{ transform: `translateY(${top}px)` }"
+					>
+						<ScreenshotGroupSection
+							:id="group.id"
+							:title="group.title"
+							:screenshots="group.screenshots"
+							:rendered-screenshots="renderedScreenshots"
+							:virtual-grid-height="gridHeight"
+							:virtual-grid-top="virtualGridTop"
+							: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 && !screenshotsScrolling"
+							: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>
+				</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/account/PrivacySettings.vue b/apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue
index 2a309d8fa7..8773f8f6c8 100644
--- a/apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue
@@ -88,7 +88,7 @@ watch(
 		</div>
 	</div>
 
-	<div class="mt-8 flex items-center justify-between gap-4">
+	<div class="mt-8 first:mt-0 flex items-center justify-between gap-4">
 		<div>
 			<h2 class="m-0 text-lg font-semibold text-contrast">
 				{{ formatMessage(messages.telemetryTitle) }}
diff --git a/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue b/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue
index 28fe08d0af..040cd599db 100644
--- a/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue
@@ -8,7 +8,7 @@ import {
 } from '@modrinth/ui'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import { type ColorTheme, useTheme } from '@/composables/use-theme.ts'
+import { type ColorTheme, isDarkTheme, useTheme } from '@/composables/use-theme.ts'
 import { type AppSettings, get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
 import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
@@ -60,6 +60,9 @@ const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
 
 		await set(nextSettings)
 		settings.value = nextSettings
+		if (isDarkTheme(value.theme)) {
+			theme.preferredDark = value.theme
+		}
 		theme.preferred = value.theme
 		theme.syncAcrossDevices = value.syncAcrossDevices
 		theme.advancedRendering = value.advancedRendering
@@ -73,6 +76,10 @@ const themeOptions = computed(() =>
 	),
 )
 
+const preferredDarkTheme = computed(() =>
+	isDarkTheme(current.value.theme) ? current.value.theme : theme.preferredDark,
+)
+
 function setTheme(value: ColorTheme): void {
 	current.value.theme = value
 }
@@ -126,7 +133,8 @@ provideAppearanceSettings({
 	theme: {
 		current: computed(() => current.value.theme),
 		options: themeOptions,
-		system: computed(() => theme.native),
+		system: computed(() => (theme.native === 'light' ? 'light' : preferredDarkTheme.value)),
+		preferredDark: preferredDarkTheme,
 		set: setTheme,
 		syncAcrossDevices: {
 			value: computed(() => current.value.syncAcrossDevices),
diff --git a/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue b/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
index aa6f0448f8..ad34c7c597 100644
--- a/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { Button, Toggle } from '@modrinth/ui'
-import { ref, watch } from 'vue'
+import { SearchIcon } from '@modrinth/assets'
+import { Button, Input, Toggle } from '@modrinth/ui'
+import Fuse from 'fuse.js'
+import { computed, ref, watch } from 'vue'
 
 import {
 	DEFAULT_FEATURE_FLAGS,
@@ -12,7 +14,22 @@ import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 const appSettings = useAppSettings()
 
 const settings = ref(await getSettings())
-const options = ref(Object.keys(DEFAULT_FEATURE_FLAGS) as FeatureFlag[])
+const searchQuery = ref('')
+const allFlags = computed(() => Object.keys(DEFAULT_FEATURE_FLAGS) as FeatureFlag[])
+
+const fuse = computed(
+	() =>
+		new Fuse(allFlags.value, {
+			threshold: 0.4,
+		}),
+)
+
+const filteredFlags = computed(() => {
+	if (!searchQuery.value.trim()) {
+		return allFlags.value
+	}
+	return fuse.value.search(searchQuery.value).map((result) => result.item)
+})
 
 function setFeatureFlag(key: FeatureFlag, value: boolean) {
 	appSettings.featureFlags[key] = value
@@ -29,7 +46,14 @@ watch(
 </script>
 <template>
 	<div class="flex flex-col gap-2.5">
-		<div v-for="option in options" :key="option" class="flex items-center justify-between">
+		<Input
+			v-model="searchQuery"
+			type="search"
+			:icon="SearchIcon"
+			placeholder="Search flags..."
+			wrapper-class="w-full"
+		/>
+		<div v-for="option in filteredFlags" :key="option" class="flex items-center justify-between">
 			<div>
 				<h2 class="m-0 text-lg font-semibold text-contrast capitalize">
 					{{ option.replaceAll('_', ' ') }}
@@ -50,5 +74,8 @@ watch(
 				/>
 			</div>
 		</div>
+		<p v-if="filteredFlags.length === 0" class="text-center text-secondary">
+			No flags found matching "{{ searchQuery }}"
+		</p>
 	</div>
 </template>
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/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue
index 7733b6f6ce..664443ce23 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue
@@ -16,6 +16,7 @@
 				size="56px"
 				no-shadow
 				class="!rounded-2xl"
+				pad-transparent-corners
 			/>
 			<div class="flex min-w-0 flex-col gap-0.5">
 				<span class="truncate font-semibold text-contrast">{{ preview.name }}</span>
diff --git a/apps/app-frontend/src/components/ui/world/InstanceItem.vue b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
index f922cc7809..cc1a117de4 100644
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -12,7 +12,9 @@ import {
 	Avatar,
 	BulletDivider,
 	Button,
+	type ButtonMenuOption,
 	commonMessages,
+	ContextMenu,
 	defineMessages,
 	injectNotificationManager,
 	SmartClickable,
@@ -24,7 +26,7 @@ import {
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import type { Dayjs } from 'dayjs'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useAppEvent } from '@/composables/use-app-event'
@@ -80,6 +82,10 @@ const messages = defineMessages({
 		id: 'app.home.jump-back-in.view-instance',
 		defaultMessage: 'View instance',
 	},
+	instanceActions: {
+		id: 'app.home.jump-back-in.actions.label',
+		defaultMessage: 'Instance actions',
+	},
 })
 
 const instanceIcon = computed(() => props.instance.icon_path)
@@ -144,115 +150,149 @@ const checkProcess = async () => {
 onMounted(() => {
 	checkProcess()
 })
+
+const cardOptions = useTemplateRef('cardOptions')
+const showStop = computed(() => playing.value && !loading.value)
+const playDisabled = computed(() => props.instance.quarantined || playing.value || loading.value)
+
+const overflowOptions = computed((): ButtonMenuOption[] => [
+	{
+		id: 'open-instance',
+		label: formatMessage(messages.viewInstance),
+		icon: EyeIcon,
+		shown: !!props.instance.id,
+		action: () => router.push(encodeURI(`/instance/${props.instance.id}`)),
+	},
+	{
+		id: 'open-folder',
+		label: formatMessage(commonMessages.openFolderButton),
+		icon: FolderOpenIcon,
+		action: () => showInstanceInFolder(props.instance.id),
+	},
+])
+
+const contextMenuOptions = computed((): ButtonMenuOption[] => [
+	showStop.value
+		? {
+				id: 'stop',
+				label: formatMessage(commonMessages.stopButton),
+				icon: StopCircleIcon,
+				tone: 'red',
+				action: (event) => stop(event),
+			}
+		: {
+				id: 'play',
+				label: formatMessage(commonMessages.playButton),
+				icon: PlayIcon,
+				tone: 'brand',
+				disabled: playDisabled.value,
+				tooltip: props.instance.quarantined
+					? formatMessage(messages.lockedTooltip)
+					: playing.value
+						? formatMessage(messages.alreadyOpenTooltip)
+						: undefined,
+				action: (event) => play(event),
+			},
+	{ type: 'divider' },
+	...overflowOptions.value,
+])
+
+function openContextMenu(event: MouseEvent) {
+	cardOptions.value?.open(event, contextMenuOptions.value)
+}
 </script>
 <template>
-	<SmartClickable class="[--active-scale:0.99]">
-		<template #clickable>
-			<router-link
-				class="no-click-animation"
-				:to="`/instance/${encodeURIComponent(instance.id)}`"
-			/>
-		</template>
-		<div
-			class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 border border-surface-4 rounded-[20px] smart-clickable:highlight-on-hover transition-[filter] ease-out [--hover-brightness:1.1] min-h-20 p-3"
-			:class="newlyAdded ? 'border-dashed bg-surface-2' : 'bg-bg-raised border-solid'"
-		>
-			<Avatar
-				:src="getInstanceIconUrl(instanceIcon)"
-				:tint-by="instance.id"
-				no-shadow
-				class="!rounded-[14px]"
-				size="48px"
-			/>
-			<div class="flex flex-col col-span-2 justify-center gap-1 h-full">
-				<div class="flex items-center gap-1.5">
-					<div class="text-contrast truncate text-base font-semibold">
-						{{ instance.name }}
+	<div @contextmenu.prevent.stop="openContextMenu">
+		<SmartClickable class="[--active-scale:0.99]">
+			<template #clickable>
+				<router-link
+					class="no-click-animation"
+					:to="`/instance/${encodeURIComponent(instance.id)}`"
+				/>
+			</template>
+			<div
+				class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 border border-surface-4 rounded-[20px] smart-clickable:highlight-on-hover transition-[filter] ease-out [--hover-brightness:1.1] min-h-20 p-3"
+				:class="newlyAdded ? 'border-dashed bg-surface-2' : 'bg-bg-raised border-solid'"
+			>
+				<Avatar
+					:src="getInstanceIconUrl(instanceIcon)"
+					:tint-by="instance.id"
+					no-shadow
+					class="!rounded-[14px]"
+					size="48px"
+					pad-transparent-corners
+				/>
+				<div class="flex flex-col col-span-2 justify-center gap-1 h-full">
+					<div class="flex items-center gap-1.5">
+						<div class="text-contrast truncate text-base font-semibold">
+							{{ instance.name }}
+						</div>
+						<TagItem
+							v-if="newlyAdded"
+							class="!border-green !bg-bg-green !px-2 !font-medium !text-green"
+						>
+							<SparklesIcon aria-hidden="true" />
+							{{ formatMessage(messages.newInstance) }}
+						</TagItem>
 					</div>
-					<TagItem
-						v-if="newlyAdded"
-						class="!border-green !bg-bg-green !px-2 !font-medium !text-green"
-					>
-						<SparklesIcon aria-hidden="true" />
-						{{ formatMessage(messages.newInstance) }}
-					</TagItem>
-				</div>
-				<div class="flex items-center gap-1.5 text-sm text-secondary">
-					<span class="flex items-center gap-1 truncate text-secondary">
-						{{ loader }}
-						{{ instance.game_version }}
-					</span>
-					<BulletDivider class="shrink-0" />
-					<div
-						v-tooltip="!newlyAdded ? formatDateTime(last_played.toDate()) : null"
-						class="w-fit shrink-0"
-						:class="{
-							'cursor-help smart-clickable:allow-pointer-events': !newlyAdded,
-						}"
-					>
-						<template v-if="newlyAdded">
-							{{ formatMessage(messages.neverPlayed) }}
-						</template>
-						<template v-else-if="last_played">
-							{{ formatRelativeTime(last_played.toISOString?.()) }}
-						</template>
-						<template v-else>{{ formatMessage(messages.neverPlayed) }}</template>
+					<div class="flex items-center gap-1.5 text-sm text-secondary">
+						<span class="flex items-center gap-1 truncate text-secondary">
+							{{ loader }}
+							{{ instance.game_version }}
+						</span>
+						<BulletDivider class="shrink-0" />
+						<div
+							v-tooltip="!newlyAdded ? formatDateTime(last_played.toDate()) : null"
+							class="w-fit shrink-0"
+							:class="{
+								'cursor-help smart-clickable:allow-pointer-events': !newlyAdded,
+							}"
+						>
+							<template v-if="newlyAdded">
+								{{ formatMessage(messages.neverPlayed) }}
+							</template>
+							<template v-else-if="last_played">
+								{{ formatRelativeTime(last_played.toISOString?.()) }}
+							</template>
+							<template v-else>{{ formatMessage(messages.neverPlayed) }}</template>
+						</div>
 					</div>
 				</div>
+				<div data-no-card-click class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+					<Button v-if="showStop" type="colored" color="red" @click="stop">
+						<StopCircleIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.stopButton) }}
+					</Button>
+					<Button
+						v-else
+						v-tooltip="
+							instance.quarantined
+								? formatMessage(messages.lockedTooltip)
+								: playing
+									? formatMessage(messages.alreadyOpenTooltip)
+									: null
+						"
+						:disabled="playDisabled"
+						type="colored"
+						color="green"
+						@click="play"
+					>
+						<SpinnerIcon v-if="loading" class="animate-spin" />
+						<PlayIcon v-else aria-hidden="true" />
+						{{ formatMessage(commonMessages.playButton) }}
+					</Button>
+					<TeleportOverflowMenu
+						type="quiet"
+						:label="formatMessage(messages.moreOptions)"
+						:options="overflowOptions"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+					</TeleportOverflowMenu>
+				</div>
 			</div>
-			<div data-no-card-click class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<Button v-if="playing && !loading" type="colored" color="red" @click="stop">
-					<StopCircleIcon aria-hidden="true" />
-					{{ formatMessage(commonMessages.stopButton) }}
-				</Button>
-				<Button
-					v-else
-					v-tooltip="
-						instance.quarantined
-							? formatMessage(messages.lockedTooltip)
-							: playing
-								? formatMessage(messages.alreadyOpenTooltip)
-								: null
-					"
-					:disabled="instance.quarantined || playing || loading"
-					type="colored"
-					color="green"
-					@click="play"
-				>
-					<SpinnerIcon v-if="loading" class="animate-spin" />
-					<PlayIcon v-else aria-hidden="true" />
-					{{ formatMessage(commonMessages.playButton) }}
-				</Button>
-				<TeleportOverflowMenu
-					type="quiet"
-					:label="formatMessage(messages.moreOptions)"
-					:options="[
-						{
-							id: 'open-instance',
-							label: formatMessage(messages.viewInstance),
-							shown: !!instance.id,
-							action: () => router.push(encodeURI(`/instance/${instance.id}`)),
-						},
-						{
-							id: 'open-folder',
-							label: formatMessage(commonMessages.openFolderButton),
-							action: () => showInstanceInFolder(instance.id),
-						},
-					]"
-				>
-					<MoreVerticalIcon aria-hidden="true" />
-					<template #open-instance>
-						<EyeIcon aria-hidden="true" />
-						{{ formatMessage(messages.viewInstance) }}
-					</template>
-					<template #open-folder>
-						<FolderOpenIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.openFolderButton) }}
-					</template>
-				</TeleportOverflowMenu>
-			</div>
-		</div>
-	</SmartClickable>
+		</SmartClickable>
+		<ContextMenu ref="cardOptions" :label="formatMessage(messages.instanceActions)" />
+	</div>
 </template>
 <style scoped>
 .clickable-card:has([data-no-card-click]:hover) {
diff --git a/apps/app-frontend/src/components/ui/world/WorldItem.vue b/apps/app-frontend/src/components/ui/world/WorldItem.vue
index 8147d0bce0..c226d7be0d 100644
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -18,12 +18,13 @@ import {
 	UserIcon,
 	XIcon,
 } from '@modrinth/assets'
-import type { MessageDescriptor } from '@modrinth/ui'
+import type { ButtonMenuOption, MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
 	BulletDivider,
 	Button,
 	commonMessages,
+	ContextMenu,
 	defineMessages,
 	injectNotificationManager,
 	SmartClickable,
@@ -38,7 +39,7 @@ import { getPingLevel } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 import type { Component } from 'vue'
-import { computed } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { getInstanceIconUrl } from '@/helpers/instance'
@@ -66,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
 }>()
 
@@ -94,6 +95,8 @@ const props = withDefaults(
 		}
 
 		managed?: boolean
+		showPlayButton?: boolean
+		cardBackground?: 'raised' | 'surface-2'
 
 		// Instance
 		instanceId?: string
@@ -116,6 +119,8 @@ const props = withDefaults(
 
 		gameMode: undefined,
 		managed: false,
+		showPlayButton: true,
+		cardBackground: 'raised',
 
 		instanceId: undefined,
 		instanceName: undefined,
@@ -217,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',
@@ -225,6 +234,10 @@ const messages = defineMessages({
 		id: 'instance.worlds.play_instance',
 		defaultMessage: 'Play instance',
 	},
+	playWorld: {
+		id: 'instance.worlds.play_world',
+		defaultMessage: 'Play world',
+	},
 	worldInUse: {
 		id: 'instance.worlds.world_in_use',
 		defaultMessage: 'World is in use',
@@ -257,358 +270,387 @@ const messages = defineMessages({
 		id: 'app.world.world-item.not-played-yet',
 		defaultMessage: 'Not played yet',
 	},
+	worldActions: {
+		id: 'instance.worlds.actions.label',
+		defaultMessage: 'World actions',
+	},
 })
+
+const cardOptions = useTemplateRef('cardOptions')
+const showStop = computed(
+	() =>
+		props.showPlayButton &&
+		(props.playingWorld || (locked.value && props.playingInstance)) &&
+		!props.startingInstance,
+)
+const playDisabled = computed(
+	() =>
+		props.quarantined ||
+		playingOtherWorld.value ||
+		props.startingInstance ||
+		(props.world.type === 'server' && !props.supportsServerQuickPlay) ||
+		(props.world.type === 'singleplayer' && !props.supportsWorldQuickPlay),
+)
+const playTooltip = computed(() => {
+	if (props.quarantined) return formatMessage(messages.instanceLocked)
+	if (props.world.type === 'server') {
+		if (!props.supportsServerQuickPlay) return formatMessage(messages.noServerQuickPlay)
+		if (playingOtherWorld.value) return formatMessage(messages.gameAlreadyOpen)
+		if (!props.serverStatus) return formatMessage(messages.noContact)
+		if (serverIncompatible.value) return formatMessage(messages.incompatibleServer)
+		return null
+	}
+	if (!props.supportsWorldQuickPlay) return formatMessage(messages.noSingleplayerQuickPlay)
+	if (playingOtherWorld.value || locked.value) return formatMessage(messages.gameAlreadyOpen)
+	return null
+})
+
+const overflowOptions = computed((): ButtonMenuOption[] => [
+	{
+		id: 'play-instance',
+		label: formatMessage(messages.playInstance),
+		icon: PlayIcon,
+		shown: !!props.instanceId,
+		disabled: props.playingInstance || props.quarantined,
+		action: () => emit('play-instance'),
+	},
+	{
+		id: 'open-instance',
+		label: formatMessage(messages.viewInstance),
+		icon: EyeIcon,
+		shown: !!props.instanceId,
+		action: () => {
+			if (!props.instanceId) return
+			void router.push(`/instance/${encodeURIComponent(props.instanceId)}`)
+		},
+	},
+	{
+		id: 'refresh',
+		label: formatMessage(commonMessages.refreshButton),
+		icon: UpdatedIcon,
+		shown: props.world.type === 'server',
+		action: () => emit('refresh'),
+	},
+	{
+		id: 'copy-address',
+		label: formatMessage(messages.copyAddress),
+		icon: ClipboardCopyIcon,
+		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),
+		icon: EditIcon,
+		action: () => emit('edit'),
+		shown: !props.instanceId,
+		disabled: locked.value || managed.value,
+		tooltip: locked.value
+			? formatMessage(messages.worldInUse)
+			: managed.value
+				? formatMessage(messages.linkedServer)
+				: undefined,
+	},
+	{
+		id: 'open-folder',
+		label: formatMessage(commonMessages.openFolderButton),
+		icon: FolderOpenIcon,
+		shown: props.world.type === 'singleplayer',
+		action: () => (props.world.type === 'singleplayer' ? emit('open-folder', props.world) : {}),
+	},
+	{
+		type: 'divider',
+		shown: !!props.instanceId,
+	},
+	{
+		id: 'dont-show-on-home',
+		label: formatMessage(messages.dontShowOnHome),
+		icon: XIcon,
+		shown: !!props.instanceId,
+		action: () => {
+			if (!props.instanceId) return
+			set_world_display_status(
+				props.instanceId,
+				props.world.type,
+				getWorldIdentifier(props.world),
+				'hidden',
+			).then(() => {
+				emit('update')
+			})
+		},
+	},
+	{
+		id: 'create-shortcut',
+		label: formatMessage(messages.createShortcut),
+		icon: ExternalIcon,
+		shown: !!shortcutInstanceId.value && !props.quarantined,
+		action: () => createShortcut(),
+	},
+	{
+		type: 'divider',
+		shown: !props.instanceId,
+	},
+	{
+		id: 'delete',
+		label: formatMessage(
+			props.world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
+		),
+		icon: TrashIcon,
+		tone: 'red',
+		action: () => emit('delete'),
+		shown: !props.instanceId,
+		disabled: locked.value || managed.value,
+		tooltip: locked.value
+			? formatMessage(messages.worldInUse)
+			: managed.value
+				? formatMessage(messages.linkedServer)
+				: undefined,
+	},
+])
+
+const contextMenuOptions = computed((): ButtonMenuOption[] => [
+	showStop.value
+		? {
+				id: 'stop',
+				label: formatMessage(commonMessages.stopButton),
+				icon: StopCircleIcon,
+				tone: 'red',
+				shown: props.showPlayButton,
+				action: () => emit('stop'),
+			}
+		: {
+				id: 'play',
+				label: formatMessage(messages.playWorld),
+				icon: PlayIcon,
+				tone: 'brand',
+				shown: props.showPlayButton,
+				disabled: playDisabled.value,
+				tooltip: playTooltip.value ?? undefined,
+				action: () => emit('play'),
+			},
+	{ type: 'divider', shown: props.showPlayButton },
+	...overflowOptions.value,
+])
+
+function openContextMenu(event: MouseEvent) {
+	cardOptions.value?.open(event, contextMenuOptions.value)
+}
 </script>
 <template>
-	<SmartClickable class="[--active-scale:0.985]">
-		<template v-if="instanceId" #clickable>
-			<router-link
-				class="no-click-animation"
-				:to="`/instance/${encodeURIComponent(instanceId)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
-			/>
-		</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="{
-				'world-item-highlighted': highlighted,
-			}"
-		>
-			<Avatar
-				:src="
-					world.type === 'server' && serverStatus
-						? (serverStatus.favicon ?? world.icon)
-						: world.icon
-				"
-				size="48px"
-				no-shadow
-				class="!rounded-[14px]"
-			/>
-			<div class="flex flex-col justify-center gap-0.5 h-full">
-				<div class="flex items-center gap-1.5">
-					<div class="text-base text-contrast font-semibold truncate">
-						{{ world.name }}
-					</div>
-					<TagItem
-						v-if="managed"
-						v-tooltip="formatMessage(messages.linkedServer)"
-						class="border !border-solid border-blue bg-highlight-blue text-xs"
-						:style="`--_color: var(--color-blue)`"
-					>
-						<LockIcon aria-hidden="true" class="h-5 w-5" />
-					</TagItem>
-					<div
-						v-if="world.type === 'singleplayer'"
-						class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
-					>
-						<UserIcon
-							aria-hidden="true"
-							class="h-4 w-4 text-secondary shrink-0"
-							stroke-width="3px"
-						/>
-						{{ formatMessage(commonMessages.singleplayerLabel) }}
-					</div>
-					<div
-						v-else-if="world.type === 'server'"
-						class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
-					>
-						<template v-if="refreshing">
-							<SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
-							{{ formatMessage(commonMessages.loadingLabel) }}
-						</template>
-						<template v-else-if="serverStatus">
-							<template v-if="serverIncompatible">
-								<IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
-								<span class="text-orange">
-									{{
-										formatMessage(messages.incompatibleVersion, {
-											version: serverStatus.version?.name,
-										})
-									}}
-								</span>
+	<div @contextmenu.prevent.stop="openContextMenu">
+		<SmartClickable class="[--active-scale:0.985]">
+			<template v-if="instanceId" #clickable>
+				<router-link
+					class="no-click-animation"
+					:to="`/instance/${encodeURIComponent(instanceId)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
+				/>
+			</template>
+			<div
+				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
+					:src="
+						world.type === 'server' && serverStatus
+							? (serverStatus.favicon ?? world.icon)
+							: world.icon
+					"
+					size="48px"
+					no-shadow
+					class="!rounded-[14px]"
+				/>
+				<div class="flex flex-col justify-center gap-0.5 h-full">
+					<div class="flex items-center gap-1.5">
+						<div class="text-base text-contrast font-semibold truncate">
+							{{ world.name }}
+						</div>
+						<TagItem
+							v-if="managed"
+							v-tooltip="formatMessage(messages.linkedServer)"
+							class="border !border-solid border-blue bg-highlight-blue text-xs"
+							:style="`--_color: var(--color-blue)`"
+						>
+							<LockIcon aria-hidden="true" class="h-5 w-5" />
+						</TagItem>
+						<div
+							v-if="world.type === 'singleplayer'"
+							class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
+						>
+							<UserIcon
+								aria-hidden="true"
+								class="h-4 w-4 text-secondary shrink-0"
+								stroke-width="3px"
+							/>
+							{{ formatMessage(commonMessages.singleplayerLabel) }}
+						</div>
+						<div
+							v-else-if="world.type === 'server'"
+							class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
+						>
+							<template v-if="refreshing">
+								<SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
+								{{ formatMessage(commonMessages.loadingLabel) }}
 							</template>
-							<template v-else>
-								<SignalIcon
-									v-tooltip="`${serverStatus.ping}ms`"
-									aria-hidden="true"
-									:style="`--_signal-${getPingLevel(serverStatus.ping ?? 0)}: var(--color-green)`"
-									stroke-width="3px"
-									class="shrink-0 smart-clickable:allow-pointer-events"
-								/>
-								<Tooltip :disabled="!hasPlayersTooltip">
-									<span
-										class="smart-clickable:allow-pointer-events"
-										:class="{ 'cursor-help': hasPlayersTooltip }"
-									>
+							<template v-else-if="serverStatus">
+								<template v-if="serverIncompatible">
+									<IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
+									<span class="text-orange">
 										{{
-											formatMessage(messages.playersOnline, {
-												count: formatNumber(serverStatus.players?.online ?? 0),
+											formatMessage(messages.incompatibleVersion, {
+												version: serverStatus.version?.name,
 											})
 										}}
 									</span>
-									<template #popper>
-										<div class="flex flex-col gap-1">
-											<span v-for="player in serverStatus.players?.sample" :key="player.id">
-												{{ player.name }}
-											</span>
-										</div>
-									</template>
-								</Tooltip>
+								</template>
+								<template v-else>
+									<SignalIcon
+										v-tooltip="`${serverStatus.ping}ms`"
+										aria-hidden="true"
+										:style="`--_signal-${getPingLevel(serverStatus.ping ?? 0)}: var(--color-green)`"
+										stroke-width="3px"
+										class="shrink-0 smart-clickable:allow-pointer-events"
+									/>
+									<Tooltip :disabled="!hasPlayersTooltip">
+										<span
+											class="smart-clickable:allow-pointer-events"
+											:class="{ 'cursor-help': hasPlayersTooltip }"
+										>
+											{{
+												formatMessage(messages.playersOnline, {
+													count: formatNumber(serverStatus.players?.online ?? 0),
+												})
+											}}
+										</span>
+										<template #popper>
+											<div class="flex flex-col gap-1">
+												<span v-for="player in serverStatus.players?.sample" :key="player.id">
+													{{ player.name }}
+												</span>
+											</div>
+										</template>
+									</Tooltip>
+								</template>
 							</template>
+							<template v-else>
+								<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
+								{{ formatMessage(messages.offline) }}
+							</template>
+						</div>
+					</div>
+					<div class="flex items-center gap-1.5 text-sm text-secondary">
+						<template v-if="instanceId">
+							<router-link
+								data-no-card-click
+								class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
+								:to="`/instance/${instanceId}`"
+							>
+								<Avatar
+									:src="getInstanceIconUrl(instanceIcon)"
+									size="16px"
+									:tint-by="instanceId"
+									class="shrink-0"
+									no-shadow
+									pad-transparent-corners
+								/>
+								<span class="truncate">{{ instanceName }}</span>
+							</router-link>
+							<BulletDivider class="shrink-0" />
+						</template>
+						<div
+							v-tooltip="world.last_played ? formatDateTime(world.last_played) : null"
+							class="w-fit shrink-0"
+							:class="{
+								'cursor-help smart-clickable:allow-pointer-events': world.last_played,
+							}"
+						>
+							<template v-if="world.last_played">
+								{{ formatRelativeTime(dayjs(world.last_played).toISOString()) }}
+							</template>
+							<template v-else> {{ formatMessage(messages.notPlayedYet) }} </template>
+						</div>
+					</div>
+				</div>
+				<div
+					class="font-semibold flex items-center gap-1 justify-center text-center"
+					:class="world.type === 'singleplayer' && world.hardcore ? `text-red` : 'text-secondary'"
+				>
+					<template v-if="world.type === 'server'">
+						<template v-if="refreshing">
+							<SpinnerIcon aria-hidden="true" class="animate-spin" />
+							{{ formatMessage(commonMessages.loadingLabel) }}
+						</template>
+						<div
+							v-else-if="renderedMotd"
+							class="motd-renderer font-normal font-minecraft line-clamp-2 text-secondary leading-5"
+							v-html="renderedMotd"
+						/>
+						<div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5">
+							{{ formatMessage(messages.cantConnect) }}
+						</div>
+						<div v-else class="font-normal font-minecraft text-secondary leading-5">
+							{{ formatMessage(messages.aMinecraftServer) }}
+						</div>
+					</template>
+					<template v-else-if="world.type === 'singleplayer' && gameMode">
+						<template v-if="world.hardcore">
+							<SkullIcon aria-hidden="true" class="h-4 w-4 shrink-0" />
+							{{ formatMessage(messages.hardcore) }}
 						</template>
 						<template v-else>
-							<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
-							{{ formatMessage(messages.offline) }}
+							<component :is="gameMode.icon" aria-hidden="true" class="h-4 w-4 shrink-0" />
+							{{ formatMessage(gameMode.message) }}
 						</template>
-					</div>
-				</div>
-				<div class="flex items-center gap-1.5 text-sm text-secondary">
-					<template v-if="instanceId">
-						<router-link
-							data-no-card-click
-							class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
-							:to="`/instance/${instanceId}`"
-						>
-							<Avatar
-								:src="getInstanceIconUrl(instanceIcon)"
-								size="16px"
-								:tint-by="instanceId"
-								class="shrink-0"
-								no-shadow
-							/>
-							<span class="truncate">{{ instanceName }}</span>
-						</router-link>
-						<BulletDivider class="shrink-0" />
 					</template>
-					<div
-						v-tooltip="world.last_played ? formatDateTime(world.last_played) : null"
-						class="w-fit shrink-0"
-						:class="{
-							'cursor-help smart-clickable:allow-pointer-events': world.last_played,
-						}"
+				</div>
+				<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+					<Button
+						v-if="showPlayButton && showStop"
+						type="colored"
+						color="red"
+						@click="emit('stop')"
 					>
-						<template v-if="world.last_played">
-							{{ formatRelativeTime(dayjs(world.last_played).toISOString()) }}
-						</template>
-						<template v-else> {{ formatMessage(messages.notPlayedYet) }} </template>
-					</div>
+						<StopCircleIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.stopButton) }}
+					</Button>
+					<Button
+						v-else-if="showPlayButton"
+						v-tooltip="playTooltip"
+						:disabled="playDisabled"
+						type="colored"
+						color="brand"
+						@click="emit('play')"
+					>
+						<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+						<PlayIcon v-else aria-hidden="true" />
+						{{ formatMessage(commonMessages.playButton) }}
+					</Button>
+					<TeleportOverflowMenu
+						type="quiet"
+						:label="formatMessage(messages.moreOptions)"
+						:options="overflowOptions"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+					</TeleportOverflowMenu>
 				</div>
 			</div>
-			<div
-				class="font-semibold flex items-center gap-1 justify-center text-center"
-				:class="world.type === 'singleplayer' && world.hardcore ? `text-red` : 'text-secondary'"
-			>
-				<template v-if="world.type === 'server'">
-					<template v-if="refreshing">
-						<SpinnerIcon aria-hidden="true" class="animate-spin" />
-						{{ formatMessage(commonMessages.loadingLabel) }}
-					</template>
-					<div
-						v-else-if="renderedMotd"
-						class="motd-renderer font-normal font-minecraft line-clamp-2 text-secondary leading-5"
-						v-html="renderedMotd"
-					/>
-					<div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5">
-						{{ formatMessage(messages.cantConnect) }}
-					</div>
-					<div v-else class="font-normal font-minecraft text-secondary leading-5">
-						{{ formatMessage(messages.aMinecraftServer) }}
-					</div>
-				</template>
-				<template v-else-if="world.type === 'singleplayer' && gameMode">
-					<template v-if="world.hardcore">
-						<SkullIcon aria-hidden="true" class="h-4 w-4 shrink-0" />
-						{{ formatMessage(messages.hardcore) }}
-					</template>
-					<template v-else>
-						<component :is="gameMode.icon" aria-hidden="true" class="h-4 w-4 shrink-0" />
-						{{ formatMessage(gameMode.message) }}
-					</template>
-				</template>
-			</div>
-			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<Button
-					v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-					type="colored"
-					color="red"
-					@click="emit('stop')"
-				>
-					<StopCircleIcon aria-hidden="true" />
-					{{ formatMessage(commonMessages.stopButton) }}
-				</Button>
-				<Button
-					v-else
-					v-tooltip="
-						quarantined
-							? formatMessage(messages.instanceLocked)
-							: world.type === 'server'
-								? !supportsServerQuickPlay
-									? formatMessage(messages.noServerQuickPlay)
-									: playingOtherWorld
-										? formatMessage(messages.gameAlreadyOpen)
-										: !serverStatus
-											? formatMessage(messages.noContact)
-											: serverIncompatible
-												? formatMessage(messages.incompatibleServer)
-												: null
-								: !supportsWorldQuickPlay
-									? formatMessage(messages.noSingleplayerQuickPlay)
-									: playingOtherWorld || locked
-										? formatMessage(messages.gameAlreadyOpen)
-										: null
-					"
-					:disabled="
-						quarantined ||
-						playingOtherWorld ||
-						startingInstance ||
-						(world.type == 'server' && !supportsServerQuickPlay) ||
-						(world.type == 'singleplayer' && !supportsWorldQuickPlay)
-					"
-					type="colored"
-					color="brand"
-					@click="emit('play')"
-				>
-					<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-					<PlayIcon v-else aria-hidden="true" />
-					{{ formatMessage(commonMessages.playButton) }}
-				</Button>
-				<TeleportOverflowMenu
-					type="quiet"
-					:label="formatMessage(messages.moreOptions)"
-					:options="[
-						{
-							id: 'play-instance',
-							label: formatMessage(messages.playInstance),
-							shown: !!instanceId,
-							disabled: playingInstance || quarantined,
-							action: () => emit('play-instance'),
-						},
-						{
-							id: 'open-instance',
-							label: formatMessage(messages.viewInstance),
-							shown: !!instanceId,
-							action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
-						},
-						{
-							id: 'refresh',
-							label: formatMessage(commonMessages.refreshButton),
-							shown: world.type === 'server',
-							action: () => emit('refresh'),
-						},
-						{
-							id: 'copy-address',
-							label: formatMessage(messages.copyAddress),
-							shown: world.type === 'server',
-							action: () => copyToClipboard((world as ServerWorld).address),
-						},
-						{
-							id: 'edit',
-							label: formatMessage(commonMessages.editButton),
-							action: () => emit('edit'),
-							shown: !instanceId,
-							disabled: locked || managed,
-							tooltip: locked
-								? formatMessage(messages.worldInUse)
-								: managed
-									? formatMessage(messages.linkedServer)
-									: undefined,
-						},
-						{
-							id: 'open-folder',
-							label: formatMessage(commonMessages.openFolderButton),
-							shown: world.type === 'singleplayer',
-							action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
-						},
-						{
-							type: 'divider',
-							shown: !!instanceId,
-						},
-						{
-							id: 'dont-show-on-home',
-							label: formatMessage(messages.dontShowOnHome),
-							shown: !!instanceId,
-							action: () => {
-								set_world_display_status(
-									instanceId,
-									world.type,
-									getWorldIdentifier(world),
-									'hidden',
-								).then(() => {
-									emit('update')
-								})
-							},
-						},
-						{
-							id: 'create-shortcut',
-							label: formatMessage(messages.createShortcut),
-							shown: !!shortcutInstanceId && !quarantined,
-							action: () => createShortcut(),
-						},
-						{
-							type: 'divider',
-							shown: !instanceId,
-						},
-						{
-							id: 'delete',
-							label: formatMessage(
-								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
-							),
-							tone: 'red',
-							action: () => emit('delete'),
-							shown: !instanceId,
-							disabled: locked || managed,
-							tooltip: locked
-								? formatMessage(messages.worldInUse)
-								: managed
-									? formatMessage(messages.linkedServer)
-									: undefined,
-						},
-					]"
-				>
-					<MoreVerticalIcon aria-hidden="true" />
-					<template #play-instance>
-						<PlayIcon aria-hidden="true" />
-						{{ formatMessage(messages.playInstance) }}
-					</template>
-					<template #open-instance>
-						<EyeIcon aria-hidden="true" />
-						{{ formatMessage(messages.viewInstance) }}
-					</template>
-					<template #edit>
-						<EditIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.editButton) }}
-					</template>
-					<template #open-folder>
-						<FolderOpenIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.openFolderButton) }}
-					</template>
-					<template #copy-address>
-						<ClipboardCopyIcon aria-hidden="true" />
-						{{ formatMessage(messages.copyAddress) }}
-					</template>
-					<template #refresh>
-						<UpdatedIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.refreshButton) }}
-					</template>
-					<template #create-shortcut>
-						<ExternalIcon aria-hidden="true" />
-						{{ formatMessage(messages.createShortcut) }}
-					</template>
-					<template #dont-show-on-home>
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(messages.dontShowOnHome) }}
-					</template>
-					<template #delete>
-						<TrashIcon aria-hidden="true" />
-						{{
-							formatMessage(
-								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
-							)
-						}}
-					</template>
-				</TeleportOverflowMenu>
-			</div>
-		</div>
-	</SmartClickable>
+		</SmartClickable>
+		<ContextMenu ref="cardOptions" :label="formatMessage(messages.worldActions)" />
+	</div>
 </template>
 <style scoped lang="scss">
 .clickable-card:has([data-no-card-click]:hover) {
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/composables/browse/use-app-server-browse.ts b/apps/app-frontend/src/composables/browse/use-app-server-browse.ts
index 14bdfecf05..62ca24490f 100644
--- a/apps/app-frontend/src/composables/browse/use-app-server-browse.ts
+++ b/apps/app-frontend/src/composables/browse/use-app-server-browse.ts
@@ -1,6 +1,14 @@
 import type { Labrinth } from '@modrinth/api-client'
-import { CheckIcon, PlayIcon, PlusIcon, SpinnerIcon, StopCircleIcon } from '@modrinth/assets'
-import type { CardAction } from '@modrinth/ui'
+import {
+	CheckIcon,
+	ClipboardCopyIcon,
+	GlobeIcon,
+	PlayIcon,
+	PlusIcon,
+	SpinnerIcon,
+	StopCircleIcon,
+} from '@modrinth/assets'
+import type { ButtonMenuOption, CardAction } from '@modrinth/ui'
 import { commonMessages, defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { openUrl } from '@tauri-apps/plugin-opener'
@@ -26,16 +34,7 @@ interface BrowseServerInstance {
 }
 
 interface ContextMenuHandle {
-	showMenu: (
-		event: MouseEvent,
-		result: Labrinth.Search.v3.ResultSearchProject,
-		options: { name: string }[],
-	) => void
-}
-
-interface ContextMenuOptionClick {
-	option: 'open_link' | 'copy_link'
-	item: Labrinth.Search.v3.ResultSearchProject
+	open: (event: MouseEvent, options: ButtonMenuOption[]) => void
 }
 
 export interface UseAppServerBrowseOptions {
@@ -275,19 +274,21 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 	}
 
 	function handleRightClick(event: MouseEvent, result: Labrinth.Search.v3.ResultSearchProject) {
-		contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
-	}
-
-	function handleOptionsClick(args: ContextMenuOptionClick) {
-		const url = getProjectUrl(args.item)
-		switch (args.option) {
-			case 'open_link':
-				openUrl(url)
-				break
-			case 'copy_link':
-				navigator.clipboard.writeText(url)
-				break
-		}
+		const url = getProjectUrl(result)
+		contextMenuRef.value?.open(event, [
+			{
+				id: 'open_link',
+				label: formatMessage(commonMessages.openInModrinthButton),
+				icon: GlobeIcon,
+				action: () => void openUrl(url),
+			},
+			{
+				id: 'copy_link',
+				label: formatMessage(commonMessages.copyLinkButton),
+				icon: ClipboardCopyIcon,
+				action: () => void navigator.clipboard.writeText(url),
+			},
+		])
 	}
 
 	useAppEvent('process', (event) => {
@@ -314,7 +315,6 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 		getServerModpackContent,
 		getServerCardActions,
 		handleRightClick,
-		handleOptionsClick,
 	}
 }
 
diff --git a/apps/app-frontend/src/composables/use-app-settings.ts b/apps/app-frontend/src/composables/use-app-settings.ts
index d5e9ca22b0..df46e24f6b 100644
--- a/apps/app-frontend/src/composables/use-app-settings.ts
+++ b/apps/app-frontend/src/composables/use-app-settings.ts
@@ -22,6 +22,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	friends_offline_collapsed: true,
 	friends_pending_collapsed: true,
 	dismissed_photosensitivity_filter_warning: false,
+	localhost_sign_in: false,
 }
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
diff --git a/apps/app-frontend/src/composables/use-theme.ts b/apps/app-frontend/src/composables/use-theme.ts
index 8a5aff4263..f536ad414c 100644
--- a/apps/app-frontend/src/composables/use-theme.ts
+++ b/apps/app-frontend/src/composables/use-theme.ts
@@ -1,28 +1,107 @@
+import { prepareThemeColorTransition } from '@modrinth/ui'
 import { computed, reactive, ref, watch } from 'vue'
 
 export const THEME_OPTIONS = ['dark', 'light', 'oled', 'retro', 'system'] as const
+export const DARK_THEMES = ['dark', 'oled', 'retro'] as const
 
 export type ColorTheme = (typeof THEME_OPTIONS)[number]
+export type DarkTheme = (typeof DARK_THEMES)[number]
 type Theme = Exclude<ColorTheme, 'system'>
+type NativeTheme = 'light' | 'dark'
 
-const preferred = ref<ColorTheme>('dark')
+const PREFERRED_THEME_KEY = 'modrinth-theme'
+const PREFERRED_DARK_THEME_KEY = 'modrinth-preferred-dark-theme'
+
+export function isDarkTheme(theme: string): theme is DarkTheme {
+	return (DARK_THEMES as readonly string[]).includes(theme)
+}
+
+function loadPreferredTheme(): ColorTheme {
+	try {
+		const stored = window.localStorage.getItem(PREFERRED_THEME_KEY)
+		if (stored && (THEME_OPTIONS as readonly string[]).includes(stored)) {
+			return stored as ColorTheme
+		}
+	} catch {
+		// storage blocked or full
+	}
+
+	for (const option of THEME_OPTIONS) {
+		if (option !== 'system' && document.documentElement.classList.contains(`${option}-mode`)) {
+			return option
+		}
+	}
+
+	return 'dark'
+}
+
+function loadPreferredDarkTheme(): DarkTheme {
+	try {
+		const stored = window.localStorage.getItem(PREFERRED_DARK_THEME_KEY)
+		if (stored && isDarkTheme(stored)) {
+			return stored
+		}
+	} catch {
+		// storage blocked or full
+	}
+
+	return 'dark'
+}
+
+const preferred = ref<ColorTheme>(loadPreferredTheme())
 const preview = ref<ColorTheme | null>(null)
+const preferredDark = ref<DarkTheme>(loadPreferredDarkTheme())
 const advancedRendering = ref(true)
 const syncAcrossDevices = ref(false)
 const nativeThemeQuery = window.matchMedia('(prefers-color-scheme: dark)')
-const native = ref<Theme>(nativeThemeQuery.matches ? 'dark' : 'light')
+const native = ref<NativeTheme>(nativeThemeQuery.matches ? 'dark' : 'light')
 const active = computed<Theme>(() => {
 	const selectedTheme = preview.value ?? preferred.value
-	return selectedTheme === 'system' ? native.value : selectedTheme
+	if (selectedTheme !== 'system') {
+		return selectedTheme
+	}
+
+	return native.value === 'light' ? 'light' : preferredDark.value
 })
 
 nativeThemeQuery.addEventListener('change', (event) => {
 	native.value = event.matches ? 'dark' : 'light'
 })
 
+watch([preferred, preview], ([selectedPreferred, selectedPreview]) => {
+	const selectedTheme = selectedPreview ?? selectedPreferred
+	if (isDarkTheme(selectedTheme)) {
+		preferredDark.value = selectedTheme
+	}
+})
+
+watch(
+	preferred,
+	(theme) => {
+		try {
+			window.localStorage.setItem(PREFERRED_THEME_KEY, theme)
+		} catch {
+			// storage blocked or full
+		}
+	},
+	{ immediate: true },
+)
+
+watch(preferredDark, (theme) => {
+	try {
+		window.localStorage.setItem(PREFERRED_DARK_THEME_KEY, theme)
+	} catch {
+		// storage blocked or full
+	}
+})
+
 watch(
 	active,
-	(theme) => {
+	(theme, previousTheme) => {
+		if (previousTheme && previousTheme !== theme) {
+			prepareThemeColorTransition()
+		}
+
 		const html = document.documentElement
 		for (const option of THEME_OPTIONS) {
 			html.classList.remove(`${option}-mode`)
@@ -32,14 +111,31 @@ watch(
 	{ immediate: true },
 )
 
+function applyAccountAppearance(appearance: { auto: boolean; theme: string }): void {
+	if (isDarkTheme(appearance.theme)) {
+		preferredDark.value = appearance.theme
+	}
+
+	if (appearance.auto) {
+		preferred.value = 'system'
+		return
+	}
+
+	if ((THEME_OPTIONS as readonly string[]).includes(appearance.theme)) {
+		preferred.value = appearance.theme as ColorTheme
+	}
+}
+
 const theme = reactive({
 	preferred,
 	preview,
+	preferredDark,
 	active,
 	native,
 	syncAcrossDevices,
 	advancedRendering,
 	options: THEME_OPTIONS,
+	applyAccountAppearance,
 })
 
 export function useTheme() {
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/account-appearance.ts b/apps/app-frontend/src/helpers/account-appearance.ts
new file mode 100644
index 0000000000..e7c05a7c87
--- /dev/null
+++ b/apps/app-frontend/src/helpers/account-appearance.ts
@@ -0,0 +1,29 @@
+const STORAGE_KEY = 'modrinth-account-appearances'
+
+function readCache(): Record<string, { auto: boolean; theme: string }> {
+	try {
+		const parsed = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? '')
+		if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
+		return parsed
+	} catch {
+		return {}
+	}
+}
+
+export function rememberAccountAppearance(
+	userId: string,
+	appearance: { auto: boolean; theme: string },
+) {
+	try {
+		window.localStorage.setItem(
+			STORAGE_KEY,
+			JSON.stringify({ ...readCache(), [userId]: appearance }),
+		)
+	} catch {
+		// storage blocked or full
+	}
+}
+
+export function getAccountAppearance(userId: string) {
+	return readCache()[userId]
+}
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/mr_auth.ts b/apps/app-frontend/src/helpers/mr_auth.ts
index 111b1f088c..11a5040521 100644
--- a/apps/app-frontend/src/helpers/mr_auth.ts
+++ b/apps/app-frontend/src/helpers/mr_auth.ts
@@ -14,8 +14,11 @@ export type ModrinthCredentials = {
 
 export type ModrinthAuthFlow = 'sign-in' | 'sign-up'
 
-export async function login(flow: ModrinthAuthFlow = 'sign-in'): Promise<ModrinthCredentials> {
-	return await invoke('plugin:mr-auth|modrinth_login', { flow })
+export async function login(
+	flow: ModrinthAuthFlow = 'sign-in',
+	addAccount = false,
+): Promise<ModrinthCredentials> {
+	return await invoke('plugin:mr-auth|modrinth_login', { flow, addAccount })
 }
 
 export async function logout(): Promise<void> {
@@ -26,6 +29,18 @@ export async function get(): Promise<ModrinthCredentials | null> {
 	return await invoke('plugin:mr-auth|get')
 }
 
+export async function getAll(): Promise<ModrinthCredentials[]> {
+	return await invoke('plugin:mr-auth|get_all')
+}
+
+export async function setActive(userId: string): Promise<void> {
+	return await invoke('plugin:mr-auth|set_active', { userId })
+}
+
+export async function removeUser(userId: string): Promise<void> {
+	return await invoke('plugin:mr-auth|remove_account', { userId })
+}
+
 export async function cancelLogin(): Promise<void> {
 	return await invoke('plugin:mr-auth|cancel_modrinth_login')
 }
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 81929b073c..4f777d659f 100644
--- a/apps/app-frontend/src/locales/ar-SA/index.json
+++ b/apps/app-frontend/src/locales/ar-SA/index.json
@@ -1154,9 +1154,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "تسجيل الدخول إلى حساب Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "تسجيل الدخول ك <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "الترقية إلى Modrinth+"
   },
@@ -1169,9 +1166,6 @@
   "app.navigation.home": {
     "message": "الصفحة الرئيسية"
   },
-  "app.navigation.more-options": {
-    "message": "المزيد من الخيارات"
-  },
   "app.navigation.next-image": {
     "message": "الصورة التالية"
   },
@@ -1406,9 +1400,6 @@
   "app.settings.tabs.behavior": {
     "message": "السلوك"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "خيارات اللعبة الافتراضية"
-  },
   "app.settings.tabs.java-installations": {
     "message": "تثبيتات جافا"
   },
@@ -2216,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": "إجراءات التشغيل المضافة تسمح للمستخدمين المتقدمين بإنشاء أوامر نظامية محددة قبل و عند تشغيل اللعبة."
   },
@@ -2285,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 44e3a1988f..3b0d9b55fd 100644
--- a/apps/app-frontend/src/locales/cs-CZ/index.json
+++ b/apps/app-frontend/src/locales/cs-CZ/index.json
@@ -1151,9 +1151,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Přihlásit se do Modrinth účtu"
   },
-  "app.nav.signed-in-as": {
-    "message": "Přihlášen jako <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Upgradovat na Modrinth+"
   },
@@ -1166,9 +1163,6 @@
   "app.navigation.home": {
     "message": "Domov"
   },
-  "app.navigation.more-options": {
-    "message": "Více možností"
-  },
   "app.navigation.next-image": {
     "message": "Další obrázek"
   },
@@ -1697,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."
   },
@@ -1742,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 a0ae9c3c38..ccee306aa0 100644
--- a/apps/app-frontend/src/locales/de-CH/index.json
+++ b/apps/app-frontend/src/locales/de-CH/index.json
@@ -1232,9 +1232,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Bei einem Modrinth-Konto anmelden"
   },
-  "app.nav.signed-in-as": {
-    "message": "Angemeldet als <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Auf Modrinth+ upgraden"
   },
@@ -1247,9 +1244,6 @@
   "app.navigation.home": {
     "message": "Start"
   },
-  "app.navigation.more-options": {
-    "message": "Weitere Optionen"
-  },
   "app.navigation.next-image": {
     "message": "Nächstes Bild"
   },
@@ -1484,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"
   },
@@ -2309,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."
   },
@@ -2378,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 aa47fad67a..775bd649c3 100644
--- a/apps/app-frontend/src/locales/de-DE/index.json
+++ b/apps/app-frontend/src/locales/de-DE/index.json
@@ -1232,9 +1232,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Bei einem Modrinth-Konto anmelden"
   },
-  "app.nav.signed-in-as": {
-    "message": "Angemeldet als <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Auf Modrinth+ upgraden"
   },
@@ -1247,9 +1244,6 @@
   "app.navigation.home": {
     "message": "Start"
   },
-  "app.navigation.more-options": {
-    "message": "Weitere Optionen"
-  },
   "app.navigation.next-image": {
     "message": "Nächstes Bild"
   },
@@ -1484,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"
   },
@@ -2309,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."
   },
@@ -2378,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 b68c532493..0f06178e09 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -260,6 +260,9 @@
   "app.browse.hide-installed-modpacks": {
     "message": "Hide already installed"
   },
+  "app.browse.project-actions.label": {
+    "message": "Project actions"
+  },
   "app.browse.project-type.data-packs": {
     "message": "Data Packs"
   },
@@ -287,6 +290,9 @@
   "app.content-install.no-compatible-versions": {
     "message": "No available versions match {compatibilityLabel}. Select a version to install anyway. Dependencies will not be installed automatically."
   },
+  "app.error.state-init.open-backups-folder": {
+    "message": "Open backups folder"
+  },
   "app.export-modal.description-placeholder": {
     "message": "Enter modpack description..."
   },
@@ -314,6 +320,9 @@
   "app.export-modal.version-number-placeholder": {
     "message": "1.0.0"
   },
+  "app.home.jump-back-in.actions.label": {
+    "message": "Instance actions"
+  },
   "app.home.jump-back-in.instance-locked": {
     "message": "This instance has been locked"
   },
@@ -464,6 +473,9 @@
   "app.instance.action.stop": {
     "message": "Stop"
   },
+  "app.instance.actions.label": {
+    "message": "Instance actions"
+  },
   "app.instance.add-server.add": {
     "message": "Add"
   },
@@ -746,6 +758,9 @@
   "app.instance.tab.logs": {
     "message": "Logs"
   },
+  "app.instance.tab.screenshots": {
+    "message": "Screenshots"
+  },
   "app.instance.tab.share": {
     "message": "Share"
   },
@@ -794,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"
   },
@@ -851,6 +869,9 @@
   "app.java-selector.test-installation": {
     "message": "Test Java installation"
   },
+  "app.library.actions.label": {
+    "message": "Library actions"
+  },
   "app.library.context-menu.create-instance": {
     "message": "New instance"
   },
@@ -899,6 +920,9 @@
   "app.library.group-by.none": {
     "message": "No grouping"
   },
+  "app.library.group.actions.label": {
+    "message": "Group actions"
+  },
   "app.library.group.collapse": {
     "message": "Collapse group"
   },
@@ -1022,6 +1046,9 @@
   "app.library.instance.action.view-instance": {
     "message": "View instance"
   },
+  "app.library.instance.actions.label": {
+    "message": "Instance actions"
+  },
   "app.library.instance.deselect": {
     "message": "Deselect instance"
   },
@@ -1217,27 +1244,42 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "An update is required to play {name}. Please update to latest version to launch the game."
   },
+  "app.nav.add-account": {
+    "message": "Add account"
+  },
   "app.nav.create-new-instance": {
     "message": "Create new instance"
   },
   "app.nav.home": {
     "message": "Home"
   },
+  "app.nav.loading-profile": {
+    "message": "Loading profile..."
+  },
   "app.nav.modrinth-account": {
     "message": "Modrinth account"
   },
   "app.nav.modrinth-hosting": {
     "message": "Modrinth Hosting"
   },
-  "app.nav.sign-in-to-modrinth-account": {
-    "message": "Sign in to a Modrinth account"
+  "app.nav.remove-account": {
+    "message": "Remove account"
   },
-  "app.nav.signed-in-as": {
-    "message": "Signed in as <user>{username}</user>"
+  "app.nav.screenshots": {
+    "message": "Screenshots"
+  },
+  "app.nav.sign-in-to-modrinth-account": {
+    "message": "Sign into Modrinth"
+  },
+  "app.nav.switch-account": {
+    "message": "Switch account"
   },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Upgrade to Modrinth+"
   },
+  "app.nav.view-profile": {
+    "message": "View profile"
+  },
   "app.navigation.go-back": {
     "message": "Go back"
   },
@@ -1247,9 +1289,6 @@
   "app.navigation.home": {
     "message": "Home"
   },
-  "app.navigation.more-options": {
-    "message": "More options"
-  },
   "app.navigation.next-image": {
     "message": "Next image"
   },
@@ -1262,6 +1301,9 @@
   "app.notification.warning": {
     "message": "Warning"
   },
+  "app.project.actions.label": {
+    "message": "Project actions"
+  },
   "app.project.coming-soon": {
     "message": "Coming soon"
   },
@@ -1304,15 +1346,177 @@
   "app.project.versions.already-installed": {
     "message": "Already installed"
   },
+  "app.quick-instance-switcher.actions.label": {
+    "message": "Instance actions"
+  },
   "app.quick-instance-switcher.drag-show-tooltip": {
     "message": "Drag to show recent instances"
   },
   "app.quick-instance-switcher.drag-tooltip": {
     "message": "Drag to resize"
   },
+  "app.quick-instance-switcher.instance-locked": {
+    "message": "This instance has been locked"
+  },
+  "app.quick-instance-switcher.view-instance": {
+    "message": "View instance"
+  },
   "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}"
   },
@@ -1340,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."
   },
@@ -1349,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."
   },
@@ -1382,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."
   },
@@ -1478,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"
   },
@@ -1499,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"
   },
@@ -1808,6 +2063,9 @@
   "friends.add-friends-to-share": {
     "message": "<link>Add friends</link> to see what they're playing!"
   },
+  "friends.friend.actions.label": {
+    "message": "Friend actions"
+  },
   "friends.friend.cancel-request": {
     "message": "Cancel request"
   },
@@ -2309,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."
   },
@@ -2378,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..."
@@ -2417,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"
@@ -2510,6 +2819,9 @@
   "instance.worlds.a_minecraft_server": {
     "message": "A Minecraft Server"
   },
+  "instance.worlds.actions.label": {
+    "message": "World actions"
+  },
   "instance.worlds.cant_connect": {
     "message": "Can't connect to server"
   },
@@ -2519,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"
   },
@@ -2552,6 +2879,9 @@
   "instance.worlds.play_instance": {
     "message": "Play instance"
   },
+  "instance.worlds.play_world": {
+    "message": "Play world"
+  },
   "instance.worlds.shortcut-created": {
     "message": "Shortcut created"
   },
diff --git a/apps/app-frontend/src/locales/es-419/index.json b/apps/app-frontend/src/locales/es-419/index.json
index 65ae4337ad..68f4eae890 100644
--- a/apps/app-frontend/src/locales/es-419/index.json
+++ b/apps/app-frontend/src/locales/es-419/index.json
@@ -1232,9 +1232,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Inicia sesión con una cuenta Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Sesión iniciada como <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Mejorar a Modrinth+"
   },
@@ -1247,9 +1244,6 @@
   "app.navigation.home": {
     "message": "Inicio"
   },
-  "app.navigation.more-options": {
-    "message": "Más opciones"
-  },
   "app.navigation.next-image": {
     "message": "Siguiente imágen"
   },
@@ -1484,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"
   },
@@ -2309,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."
   },
@@ -2378,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 99eb6b55a6..ac0c6d6e80 100644
--- a/apps/app-frontend/src/locales/es-ES/index.json
+++ b/apps/app-frontend/src/locales/es-ES/index.json
@@ -1202,9 +1202,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Iniciar sesión en una cuenta de Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Sesión iniciada como <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Actualizar a Modrinth+"
   },
@@ -1217,9 +1214,6 @@
   "app.navigation.home": {
     "message": "Inicio"
   },
-  "app.navigation.more-options": {
-    "message": "Más opciones"
-  },
   "app.navigation.next-image": {
     "message": "Siguiente imagen"
   },
@@ -1418,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"
   },
@@ -2237,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."
   },
@@ -2300,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 59f6fa43fa..55fe8b13dd 100644
--- a/apps/app-frontend/src/locales/fr-FR/index.json
+++ b/apps/app-frontend/src/locales/fr-FR/index.json
@@ -1196,9 +1196,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Se connecter à un compte Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Connecté en tant que <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Passer à Modrinth+"
   },
@@ -1211,9 +1208,6 @@
   "app.navigation.home": {
     "message": "Accueil"
   },
-  "app.navigation.more-options": {
-    "message": "Plus d'options"
-  },
   "app.navigation.next-image": {
     "message": "Prochaine image"
   },
@@ -1445,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"
   },
@@ -2165,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."
   },
@@ -2234,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 0bba14ae2d..8c54633968 100644
--- a/apps/app-frontend/src/locales/hu-HU/index.json
+++ b/apps/app-frontend/src/locales/hu-HU/index.json
@@ -983,9 +983,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Bejelentkezés egy Modrinth-fiókba"
   },
-  "app.nav.signed-in-as": {
-    "message": "Bejelentkezve mint <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Frissíts a Modrinth+-ra"
   },
@@ -1217,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"
   },
@@ -1820,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."
   },
@@ -1880,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 0aec5b5474..88398232a4 100644
--- a/apps/app-frontend/src/locales/it-IT/index.json
+++ b/apps/app-frontend/src/locales/it-IT/index.json
@@ -1226,9 +1226,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Accedi a un account Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Accesso effettuato come <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Abbonati a Modrinth+"
   },
@@ -1241,9 +1238,6 @@
   "app.navigation.home": {
     "message": "Home"
   },
-  "app.navigation.more-options": {
-    "message": "Altre opzioni"
-  },
   "app.navigation.next-image": {
     "message": "Immagine successiva"
   },
@@ -1478,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"
   },
@@ -2303,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."
   },
@@ -2372,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 3311ccf012..80108b0183 100644
--- a/apps/app-frontend/src/locales/ja-JP/index.json
+++ b/apps/app-frontend/src/locales/ja-JP/index.json
@@ -776,9 +776,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Modrinthアカウントにサインイン"
   },
-  "app.nav.signed-in-as": {
-    "message": "<user>{username}</user>としてサインイン中"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Modrinth+にアップグレード"
   },
@@ -992,9 +989,6 @@
   "app.settings.tabs.behavior": {
     "message": "動作"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "デフォルトのゲーム設定"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Javaのインストール設定"
   },
@@ -1685,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": "フックを使用して、ゲームの起動前後にシステムコマンドを実行するようにできます。"
   },
@@ -1754,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 27599c952a..3ddcf6104a 100644
--- a/apps/app-frontend/src/locales/ko-KR/index.json
+++ b/apps/app-frontend/src/locales/ko-KR/index.json
@@ -1175,9 +1175,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Modrinth 계정으로 로그인"
   },
-  "app.nav.signed-in-as": {
-    "message": "<user>{username}</user> 으로 로그인됨"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Modrinth+ 로 업그레이드"
   },
@@ -1400,9 +1397,6 @@
   "app.settings.tabs.behavior": {
     "message": "동작"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "기본 게임 옵션"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java 설치"
   },
@@ -1961,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": "후크 기능을 사용하면 고급 사용자가 게임 실행 전후에 특정 시스템 명령을 실행할 수 있습니다."
   },
@@ -2009,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 80a3605b0d..1ea41836ef 100644
--- a/apps/app-frontend/src/locales/nl-NL/index.json
+++ b/apps/app-frontend/src/locales/nl-NL/index.json
@@ -758,9 +758,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Meld je aan bij een Modrinth-account"
   },
-  "app.nav.signed-in-as": {
-    "message": "Aangemeld als <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Upgrade naar Modrinth+"
   },
@@ -974,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"
   },
@@ -1535,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."
   },
@@ -1604,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 3e490e7386..2ffdc1b41b 100644
--- a/apps/app-frontend/src/locales/pl-PL/index.json
+++ b/apps/app-frontend/src/locales/pl-PL/index.json
@@ -1082,18 +1082,12 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Zaloguj się na konto Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Zalogowano jako <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Ulepsz do Modrinth+"
   },
   "app.navigation.home": {
     "message": "Strona główna"
   },
-  "app.navigation.more-options": {
-    "message": "Więcej opcji"
-  },
   "app.news.title": {
     "message": "Aktualności"
   },
@@ -1286,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"
   },
@@ -2024,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."
   },
@@ -2075,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 6b4ee7402e..bf1178833a 100644
--- a/apps/app-frontend/src/locales/pt-BR/index.json
+++ b/apps/app-frontend/src/locales/pt-BR/index.json
@@ -851,9 +851,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Iniciar sessão em uma conta Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Conectado como <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Assinar o Modrinth+"
   },
@@ -1067,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"
   },
@@ -1631,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."
   },
@@ -1700,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 35aeedbd62..162095fa72 100644
--- a/apps/app-frontend/src/locales/ru-RU/index.json
+++ b/apps/app-frontend/src/locales/ru-RU/index.json
@@ -1211,9 +1211,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Войти в аккаунт Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Текущий аккаунт: <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Перейти на Modrinth+"
   },
@@ -1226,9 +1223,6 @@
   "app.navigation.home": {
     "message": "Главная"
   },
-  "app.navigation.more-options": {
-    "message": "Дополнительно"
-  },
   "app.navigation.next-image": {
     "message": "Следующее изображение"
   },
@@ -1463,9 +1457,6 @@
   "app.settings.tabs.behavior": {
     "message": "Поведение"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Предустановки игры"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Расположение Java"
   },
@@ -2285,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": "Позволяет опытным пользователям задать системные команды, выполняемые до и после запуска игры."
   },
@@ -2354,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 984ac58016..d800d8ce32 100644
--- a/apps/app-frontend/src/locales/sv-SE/index.json
+++ b/apps/app-frontend/src/locales/sv-SE/index.json
@@ -1178,9 +1178,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Logga in till ett Modrinth-konto"
   },
-  "app.nav.signed-in-as": {
-    "message": "Inloggad som <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Uppgradera till Modrinth+"
   },
@@ -1193,9 +1190,6 @@
   "app.navigation.home": {
     "message": "Hem"
   },
-  "app.navigation.more-options": {
-    "message": "Mer alternativ"
-  },
   "app.navigation.next-image": {
     "message": "Nästa bild"
   },
@@ -1379,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"
   },
@@ -2144,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."
   },
@@ -2204,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 1503d3671a..576b032063 100644
--- a/apps/app-frontend/src/locales/tr-TR/index.json
+++ b/apps/app-frontend/src/locales/tr-TR/index.json
@@ -1232,9 +1232,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Bir Modrinth hesabıyla oturum açın"
   },
-  "app.nav.signed-in-as": {
-    "message": "<user>{username}</user> olarak oturum açıldı"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Modrinth+'a yükselt"
   },
@@ -1247,9 +1244,6 @@
   "app.navigation.home": {
     "message": "Ana Sayfa"
   },
-  "app.navigation.more-options": {
-    "message": "Diğer ayarlar"
-  },
   "app.navigation.next-image": {
     "message": "Sonraki görsel"
   },
@@ -1484,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ı"
   },
@@ -2309,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."
   },
@@ -2378,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 af8616fb5e..cb5d6e3811 100644
--- a/apps/app-frontend/src/locales/uk-UA/index.json
+++ b/apps/app-frontend/src/locales/uk-UA/index.json
@@ -1022,18 +1022,12 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "Увійти в обліковий запис Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Вхід виконано як <user>{username}</user>"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "Оновити до Modrinth+"
   },
   "app.navigation.home": {
     "message": "Головна"
   },
-  "app.navigation.more-options": {
-    "message": "Більше налаштувань"
-  },
   "app.navigation.next-image": {
     "message": "Наступне зображення"
   },
@@ -1259,9 +1253,6 @@
   "app.settings.tabs.behavior": {
     "message": "Поведінка"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Стандартні параметри гри"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Інсталяції Java"
   },
@@ -2009,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": "Дають змогу досвідченим користувачам застосовувати певні системні команди до та після запуску гри."
   },
@@ -2078,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 721f1d1b77..f347fea4d2 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -1232,9 +1232,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "登录Modrinth账户"
   },
-  "app.nav.signed-in-as": {
-    "message": "以<user>{username}</user>身份登录"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "升级至Modrinth+"
   },
@@ -1247,9 +1244,6 @@
   "app.navigation.home": {
     "message": "主页"
   },
-  "app.navigation.more-options": {
-    "message": "更多选项"
-  },
   "app.navigation.next-image": {
     "message": "下一张图片"
   },
@@ -1484,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "行为"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "默认游戏选项"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java 管理"
   },
@@ -2309,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": "钩子供高级用户使用，可设置游戏启动前后运行的特定系统命令。"
   },
@@ -2378,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 16b4c0d584..5dcd5c2d9c 100644
--- a/apps/app-frontend/src/locales/zh-TW/index.json
+++ b/apps/app-frontend/src/locales/zh-TW/index.json
@@ -1232,9 +1232,6 @@
   "app.nav.sign-in-to-modrinth-account": {
     "message": "登入 Modrinth 帳號"
   },
-  "app.nav.signed-in-as": {
-    "message": "以 <user>{username}</user> 登入"
-  },
   "app.nav.upgrade-to-modrinth-plus": {
     "message": "升級至 Modrinth+"
   },
@@ -1247,9 +1244,6 @@
   "app.navigation.home": {
     "message": "首頁"
   },
-  "app.navigation.more-options": {
-    "message": "更多選項"
-  },
   "app.navigation.next-image": {
     "message": "下一張圖片"
   },
@@ -1484,9 +1478,6 @@
   "app.settings.tabs.behavior": {
     "message": "行為"
   },
-  "app.settings.tabs.default-instance-options": {
-    "message": "預設遊戲選項"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java 安裝"
   },
@@ -2309,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": "掛勾讓進階使用者能在遊戲啟動前和啟動後執行特定的系統指令。"
   },
@@ -2378,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 dc586a74e9..c088dfb550 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -2,7 +2,6 @@
 import type { Labrinth } from '@modrinth/api-client'
 import {
 	CheckIcon,
-	ClipboardCopyIcon,
 	CompassIcon,
 	ExternalIcon,
 	GlobeIcon,
@@ -15,6 +14,7 @@ import {
 	BrowsePageLayout,
 	BrowseSidebar,
 	commonMessages,
+	ContextMenu,
 	CreationFlowModal,
 	defineMessages,
 	formatProjectTypeSentence,
@@ -38,7 +38,6 @@ import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import { useAppServerBrowse } from '@/composables/browse/use-app-server-browse'
 import { useAppEvent } from '@/composables/use-app-event'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
@@ -516,7 +515,6 @@ const {
 	getServerModpackContent,
 	getServerCardActions,
 	handleRightClick,
-	handleOptionsClick,
 } = useAppServerBrowse({
 	instance,
 	isFromWorlds,
@@ -551,6 +549,10 @@ const messages = defineMessages({
 		id: 'app.browse.add-servers-to-instance',
 		defaultMessage: 'Adding server to instance',
 	},
+	projectActionsLabel: {
+		id: 'app.browse.project-actions.label',
+		defaultMessage: 'Project actions',
+	},
 	addToAnInstance: {
 		id: 'app.browse.add-to-an-instance',
 		defaultMessage: 'Add to an instance',
@@ -1328,15 +1330,12 @@ 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" @option-clicked="handleOptionsClick">
-					<template #open_link>
-						<GlobeIcon /> {{ formatMessage(commonMessages.openInModrinthButton) }} <ExternalIcon />
-					</template>
-					<template #copy_link>
-						<ClipboardCopyIcon /> {{ formatMessage(commonMessages.copyLinkButton) }}
+				<ContextMenu ref="contextMenuRef" :label="formatMessage(messages.projectActionsLabel)">
+					<template #open_link="{ option }">
+						<GlobeIcon /> {{ option.label }} <ExternalIcon />
 					</template>
 				</ContextMenu>
 			</template>
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index c6157960d5..62003cf6cb 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { PlayIcon, PlusIcon } from '@modrinth/assets'
-import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { ContextMenu, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import { computed, inject, onActivated, ref } from 'vue'
 
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import LibrarySection from '@/components/ui/library/index.vue'
 import WelcomeScreen from '@/components/ui/WelcomeScreen.vue'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
@@ -36,6 +35,10 @@ const messages = defineMessages({
 		id: 'app.library.context-menu.create-instance',
 		defaultMessage: 'New instance',
 	},
+	libraryActionsLabel: {
+		id: 'app.library.actions.label',
+		defaultMessage: 'Library actions',
+	},
 })
 
 const homeBreadcrumb = useRootBreadcrumb({
@@ -87,13 +90,14 @@ function openPageContextMenu(event: MouseEvent) {
 
 	event.preventDefault()
 	event.stopPropagation()
-	pageOptions.value?.showMenu(event, {}, [{ name: 'new_instance' }])
-}
-
-function handlePageOption({ option }: { option: string }) {
-	if (option === 'new_instance') {
-		showCreationModal?.()
-	}
+	pageOptions.value?.open(event, [
+		{
+			id: 'new_instance',
+			label: formatMessage(messages.newInstance),
+			icon: PlusIcon,
+			action: () => showCreationModal?.(),
+		},
+	])
 }
 </script>
 
@@ -110,8 +114,6 @@ function handlePageOption({ option }: { option: string }) {
 			:recent-instances="recentInstances"
 		/>
 		<LibrarySection :instances="instances" />
-		<ContextMenu ref="pageOptions" @option-clicked="handlePageOption">
-			<template #new_instance> <PlusIcon /> {{ formatMessage(messages.newInstance) }} </template>
-		</ContextMenu>
+		<ContextMenu ref="pageOptions" :label="formatMessage(messages.libraryActionsLabel)" />
 	</div>
 </template>
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/page-header/index.vue b/apps/app-frontend/src/pages/instance/components/page-header/index.vue
index 3cfd2832db..ce4b436dac 100644
--- a/apps/app-frontend/src/pages/instance/components/page-header/index.vue
+++ b/apps/app-frontend/src/pages/instance/components/page-header/index.vue
@@ -1,7 +1,13 @@
 <template>
 	<PageHeader :title="instance.name">
 		<template #leading>
-			<Avatar :src="iconSrc" :alt="instance.name" size="64px" :tint-by="instance.id" />
+			<Avatar
+				:src="iconSrc"
+				:alt="instance.name"
+				size="64px"
+				:tint-by="instance.id"
+				pad-transparent-corners
+			/>
 		</template>
 
 		<template v-if="instance.shared_instance || instance.quarantined" #badges>
@@ -181,10 +187,10 @@ import {
 import { Button, IconButton, SplitButton, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
+	type ButtonMenuOption,
 	commonMessages,
 	defineMessages,
 	formatLoaderLabel,
-	type OverflowMenuOption,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
@@ -344,7 +350,7 @@ const playtimeLabel = computed(() => {
 
 	return `${seconds} second${seconds === 1 ? '' : 's'}`
 })
-const serverPlayOptions = computed<OverflowMenuOption[]>(() => [
+const serverPlayOptions = computed<ButtonMenuOption[]>(() => [
 	{
 		id: 'launch_instance',
 		label: formatMessage(messages.launchInstance),
@@ -352,8 +358,8 @@ const serverPlayOptions = computed<OverflowMenuOption[]>(() => [
 		action: () => emit('play'),
 	},
 ])
-const moreActions = computed<OverflowMenuOption[]>(() => {
-	const actions: OverflowMenuOption[] = [
+const moreActions = computed<ButtonMenuOption[]>(() => {
+	const actions: ButtonMenuOption[] = [
 		{
 			id: 'open-folder',
 			label: formatMessage(messages.openFolder),
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
index d281118b0a..1524d2a8ed 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
@@ -344,6 +344,7 @@ const messages = defineMessages({
 							class="transition-[filter] group-hover:brightness-75"
 							:tint-by="instance.id"
 							no-shadow
+							pad-transparent-corners
 						/>
 						<div
 							class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
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 4aadcbd485..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() {
@@ -200,6 +174,7 @@ defineExpose({ show, hide })
 					:src="getInstanceIconUrl(instance.icon_path)"
 					size="24px"
 					:tint-by="props.instance.id"
+					pad-transparent-corners
 				/>
 				{{ instance.name }} <ChevronRightIcon />
 				<span class="font-extrabold text-contrast">{{
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/content/index.vue b/apps/app-frontend/src/pages/instance/content/index.vue
index 490ae5ca0f..5aca64d7eb 100644
--- a/apps/app-frontend/src/pages/instance/content/index.vue
+++ b/apps/app-frontend/src/pages/instance/content/index.vue
@@ -92,6 +92,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { ClipboardCopyIcon, FolderOpenIcon, LockIcon, LockOpenIcon } from '@modrinth/assets'
 import {
 	type BulkOperationStatus,
+	type ButtonMenuOption,
 	commonMessages,
 	ConfirmDisableModal,
 	ConfirmModpackUpdateModal,
@@ -107,7 +108,6 @@ import {
 	type ManagedContentModalState,
 	type ManagedContentProject,
 	type ManagedContentVersion,
-	type OverflowMenuOption,
 	provideContentManager,
 	ReadyTransition,
 	summarizeManagedContent,
@@ -1473,8 +1473,8 @@ async function handleShareItems(
 	await shareModal.value?.show(text)
 }
 
-function getOverflowOptions(item: ContentItem): OverflowMenuOption[] {
-	const options: OverflowMenuOption[] = []
+function getOverflowOptions(item: ContentItem): ButtonMenuOption[] {
+	const options: ButtonMenuOption[] = []
 
 	options.push({
 		id: 'show-file',
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 eec9e3b13f..6ece98f1f7 100644
--- a/apps/app-frontend/src/pages/instance/layout.vue
+++ b/apps/app-frontend/src/pages/instance/layout.vue
@@ -82,16 +82,7 @@
 				</template>
 			</RouterView>
 		</div>
-		<ContextMenu ref="options" @option-clicked="handleOptionsClick">
-			<template #play> <PlayIcon /> {{ formatMessage(messages.play) }} </template>
-			<template #stop> <StopCircleIcon /> {{ formatMessage(messages.stop) }} </template>
-			<template #add_content> <PlusIcon /> {{ formatMessage(messages.addContent) }} </template>
-			<template #edit> <EditIcon /> {{ formatMessage(messages.edit) }} </template>
-			<template #copy_path> <ClipboardCopyIcon /> {{ formatMessage(messages.copyPath) }} </template>
-			<template #open_folder>
-				<FolderOpenIcon /> {{ formatMessage(messages.openFolder) }}
-			</template>
-		</ContextMenu>
+		<ContextMenu ref="options" :label="formatMessage(messages.instanceActionsLabel)" />
 	</div>
 </template>
 <script setup lang="ts">
@@ -101,6 +92,7 @@ import {
 	EditIcon,
 	FolderOpenIcon,
 	GlobeIcon,
+	ImagesIcon,
 	PlayIcon,
 	PlusIcon,
 	StopCircleIcon,
@@ -109,6 +101,7 @@ import {
 } from '@modrinth/assets'
 import {
 	commonMessages,
+	ContextMenu,
 	defineMessages,
 	injectNotificationManager,
 	NavTabs,
@@ -122,7 +115,6 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, type ComputedRef, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
@@ -148,6 +140,7 @@ import {
 } from '@/helpers/install'
 import {
 	get_full_path,
+	get_global_synced_options,
 	getInstanceIconUrl,
 	kill,
 	refresh_content_updates,
@@ -190,8 +183,13 @@ const messages = defineMessages({
 	edit: { id: 'app.instance.action.edit', defaultMessage: 'Edit' },
 	copyPath: { id: 'app.instance.action.copy-path', defaultMessage: 'Copy path' },
 	openFolder: { id: 'app.instance.action.open-folder', defaultMessage: 'Open folder' },
+	instanceActionsLabel: {
+		id: 'app.instance.actions.label',
+		defaultMessage: 'Instance actions',
+	},
 	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' },
@@ -235,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),
@@ -500,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),
@@ -765,63 +778,60 @@ async function deleteSelectedInstance() {
 }
 
 const handleRightClick = (event: MouseEvent) => {
-	const baseOptions = [
-		...(instance.value?.quarantined ? [] : [{ name: 'add_content' }, { type: 'divider' }]),
-		{ name: 'edit' },
-		{ name: 'open_folder' },
-		{ name: 'copy_path' },
-	]
+	const canAddContent = !instance.value?.quarantined
 
-	options.value?.showMenu(
-		event,
-		instance.value,
-		playing.value
-			? [
-					{
-						name: 'stop',
-						color: 'danger',
-					},
-					...baseOptions,
-				]
-			: [
-					...(instance.value?.quarantined
-						? []
-						: [
-								{
-									name: 'play',
-									color: 'primary',
-								},
-							]),
-					...baseOptions,
-				],
-	)
+	options.value?.open(event, [
+		{
+			id: 'stop',
+			label: formatMessage(messages.stop),
+			icon: StopCircleIcon,
+			shown: playing.value,
+			tone: 'red',
+			action: () => void stopInstance('InstancePageContextMenu'),
+		},
+		{
+			id: 'play',
+			label: formatMessage(messages.play),
+			icon: PlayIcon,
+			shown: !playing.value && canAddContent,
+			tone: 'brand',
+			action: () => void startInstance('InstancePageContextMenu'),
+		},
+		{
+			id: 'add_content',
+			label: formatMessage(messages.addContent),
+			icon: PlusIcon,
+			shown: canAddContent,
+			action: () => void browseContent(instance.value?.loader === 'vanilla' ? 'datapack' : 'mod'),
+		},
+		{ type: 'divider', shown: canAddContent },
+		{
+			id: 'edit',
+			label: formatMessage(messages.edit),
+			icon: EditIcon,
+			action: openSettings,
+		},
+		{
+			id: 'open_folder',
+			label: formatMessage(messages.openFolder),
+			icon: FolderOpenIcon,
+			action: () => {
+				if (instance.value) void showInstanceInFolder(instance.value.id)
+			},
+		},
+		{
+			id: 'copy_path',
+			label: formatMessage(messages.copyPath),
+			icon: ClipboardCopyIcon,
+			action: () => void copyInstancePath(),
+		},
+	])
 }
 
-const handleOptionsClick = async (args: { option: string; item: unknown }) => {
-	switch (args.option) {
-		case 'play':
-			await startInstance('InstancePageContextMenu')
-			break
-		case 'stop':
-			await stopInstance('InstancePageContextMenu')
-			break
-		case 'add_content':
-			await browseContent(instance.value?.loader === 'vanilla' ? 'datapack' : 'mod')
-			break
-		case 'edit':
-			openSettings()
-			break
-		case 'open_folder':
-			if (instance.value) await showInstanceInFolder(instance.value.id)
-			break
-		case 'copy_path': {
-			if (instance.value) {
-				const fullPath = await get_full_path(instance.value.id)
-				await navigator.clipboard.writeText(fullPath)
-			}
-			break
-		}
-	}
+const copyInstancePath = async () => {
+	if (!instance.value) return
+	const fullPath = await get_full_path(instance.value.id)
+	await navigator.clipboard.writeText(fullPath)
 }
 
 provideInstancePage({
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/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index b53e5acc01..410a9a52bc 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -208,15 +208,9 @@
 			v-if="projectInstallContext"
 			:install-context="projectInstallContext"
 		/>
-		<ContextMenu ref="options" @option-clicked="handleOptionsClick">
-			<template #install>
-				<DownloadIcon /> {{ formatMessage(commonMessages.installButton) }}
-			</template>
-			<template #open_link>
-				<GlobeIcon /> {{ formatMessage(commonMessages.openInModrinthButton) }} <ExternalIcon />
-			</template>
-			<template #copy_link>
-				<ClipboardCopyIcon /> {{ formatMessage(commonMessages.copyLinkButton) }}
+		<ContextMenu ref="options" :label="formatMessage(messages.projectActionsLabel)">
+			<template #open_link="{ option }">
+				<GlobeIcon /> {{ option.label }} <ExternalIcon />
 			</template>
 		</ContextMenu>
 		<CreationFlowModal
@@ -260,6 +254,7 @@ import {
 	BrowseInstallHeader,
 	Button,
 	commonMessages,
+	ContextMenu,
 	CreationFlowModal,
 	defineMessages,
 	getTargetInstallPreferences,
@@ -287,7 +282,6 @@ import { computed, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { SwapIcon } from '@/assets/icons/index.js'
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import {
 	fetchCachedServerStatus,
@@ -353,6 +347,7 @@ const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
 	moreOptions: { id: 'app.project.more-options', defaultMessage: 'More options' },
+	projectActionsLabel: { id: 'app.project.actions.label', defaultMessage: 'Project actions' },
 	descriptionTab: { id: 'app.project.tab.description', defaultMessage: 'Description' },
 	versionsTab: { id: 'app.project.tab.versions', defaultMessage: 'Versions' },
 	galleryTab: { id: 'app.project.tab.gallery', defaultMessage: 'Gallery' },
@@ -926,36 +921,32 @@ async function install(version) {
 
 const options = ref(null)
 const handleRightClick = (event) => {
-	options.value.showMenu(event, data.value, [
+	const project = data.value
+	options.value.open(event, [
 		{
-			name: 'install',
+			id: 'install',
+			label: formatMessage(commonMessages.installButton),
+			icon: DownloadIcon,
+			action: () => install(null),
+		},
+		{ type: 'divider' },
+		{
+			id: 'open_link',
+			label: formatMessage(commonMessages.openInModrinthButton),
+			icon: GlobeIcon,
+			action: () => openProjectLink(project),
 		},
 		{
-			type: 'divider',
-		},
-		{
-			name: 'open_link',
-		},
-		{
-			name: 'copy_link',
+			id: 'copy_link',
+			label: formatMessage(commonMessages.copyLinkButton),
+			icon: ClipboardCopyIcon,
+			action: () => copyProjectLink(project),
 		},
 	])
 }
-const handleOptionsClick = (args) => {
-	switch (args.option) {
-		case 'install':
-			install(null)
-			break
-		case 'open_link':
-			openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
-			break
-		case 'copy_link':
-			navigator.clipboard.writeText(
-				`https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
-			)
-			break
-	}
-}
+const getProjectLink = (project) => `https://modrinth.com/${project.project_type}/${project.slug}`
+const openProjectLink = (project) => openUrl(getProjectLink(project))
+const copyProjectLink = (project) => navigator.clipboard.writeText(getProjectLink(project))
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 83390cabb4..635adc7dd6 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -1,11 +1,8 @@
 <template>
 	<div class="flex flex-col">
-		<router-link
-			class="mb-4 flex w-fit items-center gap-2 rounded-lg px-2 py-0.5 pl-0 text-link"
-			:to="buildProjectHref(`/project/${route.params.id}/versions`)"
-		>
-			<ChevronLeftIcon class="shrink-0" /> {{ formatMessage(messages.allVersions) }}
-		</router-link>
+		<BackToParentLink :to="buildProjectHref(`/project/${route.params.id}/versions`)">
+			{{ formatMessage(messages.allVersions) }}
+		</BackToParentLink>
 		<VersionPage
 			v-if="version"
 			:version="version"
@@ -85,14 +82,13 @@
 import type { Labrinth } from '@modrinth/api-client'
 import {
 	CheckIcon,
-	ChevronLeftIcon,
 	DownloadIcon,
 	ExternalIcon,
 	MoreVerticalIcon,
 	ReportIcon,
 	VersionIcon,
 } from '@modrinth/assets'
-import { Button, ButtonLink, TeleportOverflowMenu } from '@modrinth/ui'
+import { BackToParentLink, Button, ButtonLink, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	commonMessages,
 	defineMessages,
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 f1347fe3e6..41f80995c5 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -134,6 +134,9 @@ fn main() {
                         "modrinth_login",
                         "logout",
                         "get",
+                        "get_all",
+                        "set_active",
+                        "remove_account",
                         "cancel_modrinth_login",
                     ])
                     .default_permission(
@@ -215,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",
@@ -395,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/mr_auth.rs b/apps/app/src/api/mr_auth.rs
index 5aba3132a6..4a2efe514e 100644
--- a/apps/app/src/api/mr_auth.rs
+++ b/apps/app/src/api/mr_auth.rs
@@ -14,6 +14,9 @@ pub fn init<R: tauri::Runtime>() -> TauriPlugin<R> {
             modrinth_login,
             logout,
             get,
+            get_all,
+            set_active,
+            remove_account,
             cancel_modrinth_login,
         ])
         .build()
@@ -23,6 +26,7 @@ pub fn init<R: tauri::Runtime>() -> TauriPlugin<R> {
 pub async fn modrinth_login<R: Runtime>(
     app: tauri::AppHandle<R>,
     flow: mr_auth::ModrinthAuthFlow,
+    add_account: Option<bool>,
 ) -> Result<ModrinthCredentials> {
     let (auth_code_recv_socket_tx, auth_code_recv_socket) = oneshot::channel();
     let auth_code = tokio::spawn(oauth_utils::auth_code_reply::listen(
@@ -31,9 +35,9 @@ pub async fn modrinth_login<R: Runtime>(
 
     let auth_code_recv_socket = auth_code_recv_socket.await.unwrap()?;
 
-    let auth_request_uri = format!(
+    let mut auth_request_uri = format!(
         "{}?launcher=true&ipver={}&port={}",
-        mr_auth::authenticate_begin_flow(flow),
+        mr_auth::authenticate_begin_flow(flow).await?,
         if auth_code_recv_socket.is_ipv4() {
             "4"
         } else {
@@ -42,6 +46,10 @@ pub async fn modrinth_login<R: Runtime>(
         auth_code_recv_socket.port()
     );
 
+    if add_account.unwrap_or(false) {
+        auth_request_uri.push_str("&add_account=true");
+    }
+
     app.opener()
         .open_url(auth_request_uri, None::<&str>)
         .map_err(|e| {
@@ -78,6 +86,21 @@ pub async fn get() -> Result<Option<ModrinthCredentials>> {
     Ok(theseus::mr_auth::get_credentials().await?)
 }
 
+#[tauri::command]
+pub async fn get_all() -> Result<Vec<ModrinthCredentials>> {
+    Ok(theseus::mr_auth::get_all().await?)
+}
+
+#[tauri::command]
+pub async fn set_active(user_id: String) -> Result<()> {
+    Ok(theseus::mr_auth::set_active(&user_id).await?)
+}
+
+#[tauri::command]
+pub async fn remove_account(user_id: String) -> Result<()> {
+    Ok(theseus::mr_auth::remove_user(&user_id).await?)
+}
+
 #[tauri::command]
 pub fn cancel_modrinth_login() {
     oauth_utils::auth_code_reply::stop_listeners();
diff --git a/apps/app/src/api/utils.rs b/apps/app/src/api/utils.rs
index 6085f3a3db..5eb52b713e 100644
--- a/apps/app/src/api/utils.rs
+++ b/apps/app/src/api/utils.rs
@@ -23,7 +23,7 @@ pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
             show_launcher_logs_folder,
             show_app_db_backups_folder,
             progress_bars_list,
-            get_opening_command
+            get_opening_command,
         ])
         .build()
 }
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/app.vue b/apps/frontend/src/app.vue
index 4208db0280..3741d3f102 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -5,25 +5,52 @@
 			<LoadingBar />
 		</ClientOnly>
 		<NotificationPanel />
+		<AccountSwitchOverlay :show="isSwitchingAccount" />
 		<AdsConsentNotification />
 		<I18nDebugPanel />
 		<NuxtPage />
+		<div id="teleports"></div>
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
-import { I18nDebugPanel, injectI18n, LoadingBar, NotificationPanel } from '@modrinth/ui'
+import {
+	AccountSwitchOverlay,
+	I18nDebugPanel,
+	injectI18n,
+	LoadingBar,
+	NotificationPanel,
+} from '@modrinth/ui'
 
 import AdsConsentNotification from '~/components/ui/AdsConsentNotification.vue'
-import { isDarkTheme } from '~/plugins/theme/index.ts'
 import { setupProviders } from '~/providers/setup.ts'
 
+import {
+	hydrateStoredAccounts,
+	rememberStoredAccount,
+	rememberStoredAccountAppearance,
+	useIsSwitchingAccount,
+} from './composables/accounts'
 import { useAuth } from './composables/auth'
 
 const auth = await useAuth()
-const userPreferences = setupProviders(auth)
+const { userPreferences } = setupProviders(auth)
 const cosmetics = useCosmetics()
 const theme = useTheme()
 const { locale, setLocale } = injectI18n()
+const isSwitchingAccount = useIsSwitchingAccount()
+
+// initAuth doesn't run again after SSR, so stash the current account for switching
+watch(
+	auth,
+	({ user, token }) => {
+		if (user && token) {
+			rememberStoredAccount(user, token)
+		}
+	},
+	{ immediate: true },
+)
+
+onMounted(hydrateStoredAccounts)
 
 watch(
 	userPreferences.preferences,
@@ -31,12 +58,12 @@ watch(
 		if (!preferences) return
 
 		if (theme.syncAcrossDevices) {
-			if (isDarkTheme(preferences.appearance.theme)) {
-				theme.preferences.dark = preferences.appearance.theme
-			} else {
-				theme.preferences.light = preferences.appearance.theme
-			}
-			theme.preferred = preferences.appearance.auto ? 'system' : preferences.appearance.theme
+			theme.applyAccountAppearance(preferences.appearance)
+		}
+
+		const userId = auth.value.user?.id
+		if (userId) {
+			rememberStoredAccountAppearance(userId, preferences.appearance)
 		}
 
 		if (locale.value !== preferences.localization.locale) {
diff --git a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
index 2beb4b684c..51e08beccb 100644
--- a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
@@ -192,8 +192,8 @@
 import { DownloadIcon, DropdownIcon, SearchIcon, UserIcon } from '@modrinth/assets'
 import { TeleportOverflowMenu } from '@modrinth/ui'
 import {
+	type ButtonMenuOption,
 	Input,
-	type OverflowMenuOption,
 	Pagination,
 	Table,
 	useFormatNumber,
@@ -363,7 +363,7 @@ const displayedIncludeDateColumn = computed(() =>
 const groupByLabel = computed(() =>
 	getAnalyticsTableGroupByLabel(selectedGroupBy.value, formatMessage),
 )
-const csvExportOptions = computed<OverflowMenuOption[]>(() => {
+const csvExportOptions = computed<ButtonMenuOption[]>(() => {
 	if (showGraphDatasetSelection.value) {
 		return [
 			{
diff --git a/apps/frontend/src/components/ui/OrganizationPageHeader.vue b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
index 9ebabc4957..b2a56bc091 100644
--- a/apps/frontend/src/components/ui/OrganizationPageHeader.vue
+++ b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
@@ -70,9 +70,9 @@ import {
 import { ButtonLink, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
+	type ButtonMenuOption,
 	commonMessages,
 	defineMessages,
-	type OverflowMenuOption,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
@@ -133,7 +133,7 @@ const emit = defineEmits<{
 const { formatMessage } = useVIntl()
 const formatNumber = useFormatNumber()
 
-const moreActions = computed<OverflowMenuOption[]>(() => [
+const moreActions = computed<ButtonMenuOption[]>(() => [
 	{
 		id: 'manage-projects',
 		label: formatMessage(messages.manageProjects),
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
index c0c5f6d5ef..8eefd9624a 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
@@ -104,12 +104,12 @@ import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	Button,
+	type ButtonMenuOption,
 	type CdnDownloadReason,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
-	type OverflowMenuOption,
 	ServersPromo,
 	SplitButton,
 	truncatedTooltip,
@@ -350,7 +350,7 @@ const showDependencyDownloadActions = computed(
 			hasRecommendedDownloadFiles.value),
 )
 
-const downloadWithRecommendedOptions = computed<OverflowMenuOption[]>(() => [
+const downloadWithRecommendedOptions = computed<ButtonMenuOption[]>(() => [
 	{
 		id: 'download-with-recommended',
 		label: formatMessage(messages.downloadWithRecommended),
diff --git a/apps/frontend/src/components/ui/ShareArticleButtons.vue b/apps/frontend/src/components/ui/ShareArticleButtons.vue
index 57b47fc331..507b03a447 100644
--- a/apps/frontend/src/components/ui/ShareArticleButtons.vue
+++ b/apps/frontend/src/components/ui/ShareArticleButtons.vue
@@ -32,50 +32,19 @@
 		>
 			<MailIcon />
 		</ButtonLink>
-		<IconButton
-			v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
-			:label="copied ? `Copied to clipboard` : `Copy link`"
-			:disabled="copied"
-			class="relative grid place-items-center overflow-hidden"
-			@click="copyToClipboard(url)"
-		>
-			<CheckIcon
-				class="absolute transition-all ease-in-out"
-				:class="copied ? 'translate-y-0' : 'translate-y-7'"
-			/>
-			<LinkIcon
-				class="absolute transition-all ease-in-out"
-				:class="copied ? '-translate-y-7' : 'translate-y-0'"
-			/>
-		</IconButton>
+		<CopyLinkButton :url="url" />
 	</div>
 </template>
 
 <script setup lang="ts">
-import {
-	BlueskyIcon,
-	CheckIcon,
-	LinkIcon,
-	MailIcon,
-	MastodonIcon,
-	TwitterIcon,
-} from '@modrinth/assets'
-import { ButtonLink, IconButton } from '@modrinth/ui'
+import { BlueskyIcon, MailIcon, MastodonIcon, TwitterIcon } from '@modrinth/assets'
+import { ButtonLink, CopyLinkButton } from '@modrinth/ui'
 
 const props = defineProps<{
 	title?: string
 	url: string
 }>()
 
-const copied = ref(false)
 const encodedUrl = computed(() => encodeURIComponent(props.url))
 const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined))
-
-async function copyToClipboard(text: string) {
-	await navigator.clipboard.writeText(text)
-	copied.value = true
-	setTimeout(() => {
-		copied.value = false
-	}, 3000)
-}
 </script>
diff --git a/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue b/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue
index 0a5f4b5aa6..0a23322f2e 100644
--- a/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue
+++ b/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue
@@ -47,7 +47,12 @@
 						class="flex flex-col items-center gap-4 rounded-3xl border border-solid border-surface-5 bg-surface-3 p-6"
 					>
 						<div class="flex w-full items-center gap-3 rounded-xl bg-surface-2 p-3">
-							<Avatar :src="instance.icon" :alt="instance.name" size="48px" />
+							<Avatar
+								:src="instance.icon"
+								:alt="instance.name"
+								size="48px"
+								pad-transparent-corners
+							/>
 							<div class="flex min-w-0 flex-col gap-1">
 								<span class="truncate font-semibold text-contrast">{{ instance.name }}</span>
 								<span class="flex items-center gap-1.5 text-sm font-medium leading-4 text-primary">
diff --git a/apps/frontend/src/components/ui/auth/SignIn.vue b/apps/frontend/src/components/ui/auth/SignIn.vue
index ed5d8434ed..e1387789d4 100644
--- a/apps/frontend/src/components/ui/auth/SignIn.vue
+++ b/apps/frontend/src/components/ui/auth/SignIn.vue
@@ -10,10 +10,20 @@
 					If the app doesn’t open, use the button below to finish signing in.
 				</p>
 			</div>
-			<Button type="colored" color="brand" class="" @click="sendLauncherCallback">
-				{{ formatMessage(messages.returnToLauncherButton) }}
-				<RightArrowIcon />
-			</Button>
+			<div class="flex flex-col gap-2">
+				<Button
+					type="colored"
+					color="brand"
+					class="!w-full !justify-center"
+					@click="sendLauncherCallback"
+				>
+					{{ formatMessage(messages.returnToLauncherButton) }}
+					<RightArrowIcon />
+				</Button>
+				<ButtonLink to="/" class="!w-full !justify-center">
+					{{ formatMessage(messages.goToWebsiteButton) }}
+				</ButtonLink>
+			</div>
 		</div>
 	</div>
 	<div
@@ -46,111 +56,133 @@
 		</template>
 		<template v-else>
 			<div class="flex flex-col gap-5">
-				<div class="text-center text-2xl font-semibold text-contrast">
-					{{ formatMessage(messages.signInWithLabel) }}
-				</div>
-
-				<section class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
-					<ButtonLink
-						v-for="provider in oauthProviders"
-						:key="provider.id"
-						class="relative w-full !justify-center overflow-visible"
-						:class="{
-							'!border !border-[var(--color-green)]': lastSignInProvider === provider.id,
-						}"
-						:href="getAuthUrl(provider.id, redirectTarget)"
-						:aria-label="formatMessage(messages.continueWithProvider, { provider: provider.name })"
-						@click="onOAuthProviderClick(provider.id)"
-					>
-						<component :is="provider.icon" />
-						<span>{{ provider.name }}</span>
-						<span
-							v-if="lastSignInProvider === provider.id"
-							class="oauth-provider-last-sign-in-badge"
-						>
-							{{ formatMessage(messages.lastSignInLabel) }}
-						</span>
-					</ButtonLink>
-					<Button
-						class="relative !w-full !justify-center overflow-visible sm:col-span-2"
-						:class="{ '!border !border-[var(--color-green)]': lastSignInProvider === 'passkey' }"
-						role="button"
-						tabindex="0"
-						@click="onPasskeySignIn"
-						@keydown.enter="onPasskeySignIn"
-					>
-						<UserKeyIcon />
-						<span class="ml-1">{{ formatMessage(messages.continueWithPasskey) }}</span>
-						<span v-if="lastSignInProvider === 'passkey'" class="oauth-provider-last-sign-in-badge">
-							{{ formatMessage(messages.lastSignInLabel) }}
-						</span>
-					</Button>
-				</section>
-
-				<div class="h-px w-full bg-surface-5"></div>
-
-				<section class="mx-auto flex w-full flex-col gap-2.5">
-					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
-					<Input
-						id="email"
-						v-model="emailModel"
-						:icon="MailIcon"
-						type="text"
-						inputmode="email"
-						autocomplete="username"
-						:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
-						wrapper-class="w-full"
-					/>
-
-					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-					<Input
-						id="password"
-						v-model="passwordModel"
-						:icon="KeyIcon"
-						type="password"
-						autocomplete="current-password"
-						:placeholder="formatMessage(commonMessages.passwordLabel)"
-						wrapper-class="w-full"
-					/>
-
-					<HCaptcha
-						v-if="globals?.captcha_enabled && emailModel && passwordModel"
-						:ref="onSetCaptchaRef"
-						v-model="tokenModel"
-					/>
-
-					<Button
-						type="colored"
-						color="brand"
-						class="!w-full"
-						:disabled="globals?.captcha_enabled ? !tokenModel : false"
-						@click="onPasswordSignIn()"
-					>
-						{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
-					</Button>
-
-					<div class="flex flex-wrap items-center justify-center gap-2.5 !text-base">
-						<NuxtLink
-							class="text-link"
-							:to="{
-								path: '/auth/reset-password',
-								query: routeQuery,
-							}"
-						>
-							{{ formatMessage(messages.forgotPasswordLabel) }}
-						</NuxtLink>
-						<div class="h-1.5 w-1.5 rounded-full bg-surface-5" />
-						<NuxtLink
-							class="inline text-link"
-							:to="{
-								path: '/auth/sign-up',
-								query: routeQuery,
-							}"
-						>
-							{{ formatMessage(messages.createAccountLabel) }}
-						</NuxtLink>
+				<template v-if="accounts.length && !addingAccount">
+					<div class="flex w-full flex-col gap-4">
+						<div class="text-center text-2xl font-semibold text-contrast">
+							{{ formatMessage(messages.chooseAccountLabel) }}
+						</div>
+						<AccountChoiceList
+							:accounts="accounts"
+							:add-account-label="formatMessage(messages.addAccountLabel)"
+							@select="emit('select', $event)"
+							@add="addingAccount = true"
+						/>
 					</div>
-				</section>
+				</template>
+				<template v-else>
+					<div class="text-center text-2xl font-semibold text-contrast">
+						{{ formatMessage(messages.signInWithLabel) }}
+					</div>
+
+					<section class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
+						<ButtonLink
+							v-for="provider in oauthProviders"
+							:key="provider.id"
+							class="relative w-full !justify-center overflow-visible"
+							:class="{
+								'!border !border-[var(--color-green)]': lastSignInOAuthProvider === provider.id,
+							}"
+							:href="getAuthUrl(provider.id, redirectTarget)"
+							:aria-label="
+								formatMessage(messages.continueWithProvider, { provider: provider.name })
+							"
+							@click="onOAuthProviderClick(provider.id)"
+						>
+							<component :is="provider.icon" />
+							<span>{{ provider.name }}</span>
+							<span
+								v-if="lastSignInOAuthProvider === provider.id"
+								class="oauth-provider-last-sign-in-badge"
+							>
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</ButtonLink>
+						<Button
+							class="relative !w-full !justify-center overflow-visible sm:col-span-2"
+							:class="{
+								'!border !border-[var(--color-green)]': lastSignInOAuthProvider === 'passkey',
+							}"
+							role="button"
+							tabindex="0"
+							@click="onPasskeySignIn"
+							@keydown.enter="onPasskeySignIn"
+						>
+							<UserKeyIcon />
+							<span class="ml-1">{{ formatMessage(messages.continueWithPasskey) }}</span>
+							<span
+								v-if="lastSignInOAuthProvider === 'passkey'"
+								class="oauth-provider-last-sign-in-badge"
+							>
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</Button>
+					</section>
+
+					<div class="h-px w-full bg-surface-5"></div>
+
+					<section class="mx-auto flex w-full flex-col gap-2.5">
+						<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
+						<Input
+							id="email"
+							v-model="emailModel"
+							:icon="MailIcon"
+							type="text"
+							inputmode="email"
+							autocomplete="username"
+							:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
+							wrapper-class="w-full"
+						/>
+
+						<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+						<Input
+							id="password"
+							v-model="passwordModel"
+							:icon="KeyIcon"
+							type="password"
+							autocomplete="current-password"
+							:placeholder="formatMessage(commonMessages.passwordLabel)"
+							wrapper-class="w-full"
+						/>
+
+						<HCaptcha
+							v-if="globals?.captcha_enabled && emailModel && passwordModel"
+							:ref="onSetCaptchaRef"
+							v-model="tokenModel"
+						/>
+
+						<Button
+							type="colored"
+							color="brand"
+							class="!w-full"
+							:disabled="globals?.captcha_enabled ? !tokenModel : false"
+							@click="onPasswordSignIn()"
+						>
+							{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
+						</Button>
+
+						<div class="flex flex-wrap items-center justify-center gap-2.5 !text-base">
+							<NuxtLink
+								class="text-link"
+								:to="{
+									path: '/auth/reset-password',
+									query: routeQuery,
+								}"
+							>
+								{{ formatMessage(messages.forgotPasswordLabel) }}
+							</NuxtLink>
+							<div class="h-1.5 w-1.5 rounded-full bg-surface-5" />
+							<NuxtLink
+								class="inline text-link"
+								:to="{
+									path: '/auth/sign-up',
+									query: routeQuery,
+								}"
+							>
+								{{ formatMessage(messages.createAccountLabel) }}
+							</NuxtLink>
+						</div>
+					</section>
+				</template>
 			</div>
 		</template>
 	</div>
@@ -169,17 +201,26 @@ import {
 	SteamColorIcon,
 	UserKeyIcon,
 } from '@modrinth/assets'
-import { Button, ButtonLink, commonMessages, defineMessages, Input, useVIntl } from '@modrinth/ui'
+import {
+	type AccountChoice,
+	AccountChoiceList,
+	Button,
+	ButtonLink,
+	commonMessages,
+	defineMessages,
+	Input,
+	useVIntl,
+} from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
-import { computed } from 'vue'
+import { ref } from 'vue'
 import type { LocationQuery } from 'vue-router'
 
 import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
 import {
-	getAuthUrl,
 	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
 	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
-} from '@/composables/auth.ts'
+} from '@/composables/accounts.ts'
+import { getAuthUrl } from '@/composables/auth.ts'
 
 const oauthProviders = [
 	{ id: 'discord', name: 'Discord', icon: DiscordColorIcon },
@@ -207,6 +248,7 @@ interface Props {
 	onTwoFactorSignIn?: () => void
 	onPasskeySignIn?: () => void
 	onSetCaptchaRef?: ((captchaRef: unknown) => void) | undefined
+	accounts?: AccountChoice[]
 }
 
 const {
@@ -219,8 +261,15 @@ const {
 	onTwoFactorSignIn = () => {},
 	onPasskeySignIn = () => {},
 	onSetCaptchaRef = undefined,
+	accounts = [],
 } = defineProps<Props>()
 
+const addingAccount = ref(false)
+
+const emit = defineEmits<{
+	select: [account: AccountChoice]
+}>()
+
 const emailModel = defineModel<string>('email', { default: '' })
 const passwordModel = defineModel<string>('password', { default: '' })
 const tokenModel = defineModel<string>('token', { default: '' })
@@ -238,7 +287,6 @@ const pendingSignInOAuthProvider = useStorage<AuthProvider | null>(
 	undefined,
 	{ initOnMounted: true },
 )
-const lastSignInProvider = computed(() => lastSignInOAuthProvider.value)
 const onOAuthProviderClick = (provider: AuthProvider) => {
 	pendingSignInOAuthProvider.value = provider
 }
@@ -266,6 +314,14 @@ const messages = defineMessages({
 		id: 'auth.sign-in.sign-in-with',
 		defaultMessage: 'Sign into Modrinth',
 	},
+	chooseAccountLabel: {
+		id: 'auth.sign-in.choose-account',
+		defaultMessage: 'Choose an account to use in Modrinth App',
+	},
+	addAccountLabel: {
+		id: 'auth.sign-in.add-account',
+		defaultMessage: 'Add account',
+	},
 	twoFactorCodeInputPlaceholder: {
 		id: 'auth.sign-in.2fa.placeholder',
 		defaultMessage: 'Enter code...',
@@ -308,6 +364,10 @@ const messages = defineMessages({
 		id: 'auth.sign-in.launcher.complete.return-button',
 		defaultMessage: 'Open Modrinth App',
 	},
+	goToWebsiteButton: {
+		id: 'auth.sign-in.launcher.complete.go-to-website',
+		defaultMessage: 'Go to Modrinth.com',
+	},
 })
 </script>
 
diff --git a/apps/frontend/src/components/ui/auth/SignUp.vue b/apps/frontend/src/components/ui/auth/SignUp.vue
index 0c5d2dc147..6cf0b60890 100644
--- a/apps/frontend/src/components/ui/auth/SignUp.vue
+++ b/apps/frontend/src/components/ui/auth/SignUp.vue
@@ -152,7 +152,8 @@ import {
 import { useStorage } from '@vueuse/core'
 import type { LocationQuery } from 'vue-router'
 
-import { getAuthUrl, PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY } from '@/composables/auth.ts'
+import { PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY } from '@/composables/accounts.ts'
+import { getAuthUrl } from '@/composables/auth.ts'
 
 type AuthProvider = 'discord' | 'google' | 'github' | 'gitlab' | 'steam' | 'microsoft'
 
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 42878864bb..fafd656cdb 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -143,6 +143,7 @@ import {
 	Input,
 	NewModal,
 	Textarea,
+	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, defineAsyncComponent, h } from 'vue'
@@ -163,6 +164,7 @@ interface ShowOptions {
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
+const debug = useDebugLogger('ProjectCreateModal')
 
 defineExpose({
 	show,
@@ -453,7 +455,7 @@ async function createProject() {
 				},
 			})) as Labrinth.Projects.v3.Project
 			createdProjectId = result.id
-			console.log(createdProjectId)
+			debug(createdProjectId)
 		}
 
 		modal.value?.hide()
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
index d5d5c5e1ee..58f906c3b9 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
@@ -516,7 +516,7 @@ const selectedRewardOption = computed(() => {
 })
 
 const selectedMethodDetails = computed(() => {
-	console.log(rewardOptions.value, selectedGiftCardId.value)
+	debug(rewardOptions.value, selectedGiftCardId.value)
 	if (!selectedGiftCardId.value) return null
 	const option = rewardOptions.value.find((opt) => opt.value === selectedGiftCardId.value)
 	debug('Selected method details:', option?.methodDetails)
diff --git a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
index 32230d2d45..1803ee2b73 100644
--- a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
+++ b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<form class="flex flex-col gap-2 sm:flex-row" @submit.prevent="executeSearch">
+		<form class="flex flex-col gap-2 sm:flex-row sm:items-center" @submit.prevent="executeSearch">
 			<Input
 				v-model="query"
 				:icon="SearchIcon"
@@ -8,9 +8,10 @@
 				autocomplete="off"
 				placeholder="Search global trace keys..."
 				clearable
-				wrapper-class="flex-1 w-full"
+				size="medium"
+				wrapper-class="min-w-0 flex-1"
 			/>
-			<Button type="colored" color="brand" native-type="submit" :disabled="isLoading">
+			<Button type="colored" color="brand" size="lg" native-type="submit" :disabled="isLoading">
 				<SearchIcon aria-hidden="true" />
 				Search
 			</Button>
@@ -20,7 +21,7 @@
 			v-if="!isLoading && !loadError && total > 0"
 			class="mt-4 flex flex-wrap items-center justify-between gap-3"
 		>
-			<p class="m-0 text-sm text-secondary">Showing {{ pageStart }}-{{ pageEnd }} of {{ total }}</p>
+			<p class="m-0">Showing {{ pageStart }}-{{ pageEnd }} of {{ total }}</p>
 			<Pagination :page="currentPage" :count="pageCount" @switch-page="switchPage" />
 		</div>
 
diff --git a/apps/frontend/src/components/ui/moderation/ModerationFilterCount.vue b/apps/frontend/src/components/ui/moderation/ModerationFilterCount.vue
new file mode 100644
index 0000000000..d0cd2e2a01
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/ModerationFilterCount.vue
@@ -0,0 +1,20 @@
+<template>
+	<span class="flex min-w-0 items-center gap-1.5 text-contrast">
+		<span class="truncate">{{ label }}</span>
+		<SpinnerIcon v-if="loading" class="size-4 shrink-0 animate-spin" aria-hidden="true" />
+		<span v-else class="shrink-0">({{ formatNumber(count) }})</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { useFormatNumber } from '@modrinth/ui'
+
+defineProps<{
+	label: string
+	count: number
+	loading?: boolean
+}>()
+
+const formatNumber = useFormatNumber()
+</script>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueSkeleton.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueSkeleton.vue
new file mode 100644
index 0000000000..6bdf092fc7
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueSkeleton.vue
@@ -0,0 +1,9 @@
+<template>
+	<div class="flex flex-col gap-3">
+		<div
+			v-for="i in 3"
+			:key="`loading-skeleton-${i}`"
+			class="flex h-[98px] w-full animate-pulse rounded-2xl bg-surface-3"
+		></div>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueToolbar.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueToolbar.vue
new file mode 100644
index 0000000000..80151d115c
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueToolbar.vue
@@ -0,0 +1,56 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col justify-between gap-2 lg:flex-row">
+			<Input
+				v-model="query"
+				:icon="SearchIcon"
+				type="text"
+				autocomplete="off"
+				:placeholder="formatMessage(commonMessages.searchPlaceholder)"
+				clearable
+				size="medium"
+				wrapper-class="min-w-0 flex-1"
+				@input="$emit('search')"
+			/>
+			<div
+				class="flex flex-col items-stretch justify-end gap-2 sm:flex-row sm:items-center lg:flex-shrink-0"
+			>
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+			<div class="flex min-w-0 flex-wrap items-center gap-3">
+				<slot name="meta" />
+			</div>
+			<div class="flex shrink-0 items-center justify-end gap-2 sm:ml-auto">
+				<slot name="pagination-extra" />
+				<Pagination
+					v-if="totalPages > 1"
+					:page="page"
+					:count="totalPages"
+					@switch-page="$emit('switch-page', $event)"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import { commonMessages, Input, Pagination, useVIntl } from '@modrinth/ui'
+
+const query = defineModel<string>({ required: true })
+
+defineProps<{
+	page: number
+	totalPages: number
+}>()
+
+defineEmits<{
+	search: []
+	'switch-page': [page: number]
+}>()
+
+const { formatMessage } = useVIntl()
+</script>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 3c793278c0..adcfcd69e1 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -1,6 +1,9 @@
 <template>
-	<div class="overflow-hidden rounded-2xl">
-		<div class="bg-bg-raised p-4">
+	<div
+		class="relative overflow-hidden rounded-2xl border border-solid border-surface-4 transition-[transform,opacity] duration-[400ms] ease-in"
+		:class="{ 'pointer-events-none translate-x-[120%] opacity-0': isSwipingAway }"
+	>
+		<div class="border-0 border-b border-solid border-surface-4 bg-bg-raised p-4">
 			<div
 				class="flex w-full flex-col items-start justify-between gap-3 sm:flex-row sm:items-center sm:gap-0"
 			>
@@ -61,6 +64,7 @@
 						:src="reportItemAvatarUrl"
 						:circle="report.item_type === 'user'"
 						size="4rem"
+						:pad-transparent-corners="report.item_type === 'shared-instance'"
 						:class="[
 							'flex-shrink-0 border border-surface-5 bg-surface-4 !shadow-none',
 							report.item_type !== 'user' && 'rounded-2xl',
@@ -179,6 +183,7 @@
 			v-model:collapsed="isThreadCollapsed"
 			:expand-text="expandText"
 			collapse-text="Collapse thread"
+			:disabled="disableCollapsing"
 		>
 			<div class="bg-surface-2 pt-2">
 				<ThreadView
@@ -230,7 +235,7 @@
 							@click="reopenReport()"
 						>
 							<CheckCircleIcon class="size-4" />
-							Reopen Thread
+							Reopen report
 						</Button>
 					</template>
 					<template #additionalActions="{ hasReply }">
@@ -260,6 +265,17 @@
 				</ThreadView>
 			</div>
 		</CollapsibleRegion>
+		<div
+			v-if="pendingDismiss"
+			:key="dismissAnimationId"
+			class="pointer-events-none absolute inset-x-0 bottom-0 h-1.5 overflow-hidden bg-highlight-red"
+			aria-hidden="true"
+		>
+			<div
+				class="report-dismiss-progress h-full w-full bg-red"
+				:style="{ animationDuration: `${DISMISS_DELAY_MS}ms` }"
+			/>
+		</div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -287,7 +303,8 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
-import { computed, ref, watch } from 'vue'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed, onUnmounted, ref, watch } from 'vue'
 
 import { isStaff } from '~/helpers/users.js'
 
@@ -301,16 +318,22 @@ import SharedInstanceReportContext, {
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
-const auth = await useAuth()
+const queryClient = useQueryClient()
+const auth = useAuthState()
 
 type SharedInstanceVersionDependency = Labrinth.Versions.v2.Dependency & {
 	project_id?: string
 	version_id?: string
 }
 
+const DISMISS_DELAY_MS = 3000
+const SWIPE_DURATION_MS = 400
+
 const props = defineProps<{
 	report: ExtendedReport
 	collapsed: boolean
+	disableCollapsing?: boolean
+	dismissAfterClose?: boolean
 	sharedInstanceDetailsLoader?: () => Promise<SharedInstanceReportDetails>
 	sharedInstanceVersionContentLoader?: (
 		instanceId: string,
@@ -318,6 +341,10 @@ const props = defineProps<{
 	) => Promise<ContentItem[]>
 }>()
 
+const emit = defineEmits<{
+	dismiss: []
+}>()
+
 const reportThread = ref<{
 	setReplyContent: (content: string) => void
 	sendReply: (privateMessage?: boolean) => Promise<void>
@@ -338,17 +365,38 @@ watch(
 	{ immediate: true },
 )
 
-const didCloseReport = ref(false)
-const reportClosed = computed(() => {
-	return didCloseReport.value || props.report.closed
-})
+const closedOverride = ref<boolean | null>(null)
+const pendingDismiss = ref(false)
+const isSwipingAway = ref(false)
+const dismissAnimationId = ref(0)
+const thread = ref(props.report.thread)
+let dismissTimeout: ReturnType<typeof setTimeout> | null = null
+let swipeTimeout: ReturnType<typeof setTimeout> | null = null
+
+const reportClosed = computed(() => closedOverride.value ?? props.report.closed)
+
+watch(
+	() => props.report.thread,
+	(value) => {
+		thread.value = value
+	},
+)
+
+watch(
+	() => props.report.closed,
+	(closed) => {
+		if (closedOverride.value === closed) {
+			closedOverride.value = null
+		}
+	},
+)
 const sharedInstanceQuarantined = computed(
 	() =>
 		sharedInstanceDetails.value?.quarantine ?? props.report.shared_instance?.quarantine ?? false,
 )
 
 const threadWithReportBody = computed(() => {
-	if (!props.report.thread) return null
+	if (!thread.value) return null
 
 	const reportBodyMessage = {
 		id: `report-body-${props.report.id}`,
@@ -365,16 +413,15 @@ const threadWithReportBody = computed(() => {
 	}
 
 	return {
-		...props.report.thread,
-		messages: [reportBodyMessage, ...props.report.thread.messages],
-		members: [props.report.reporter_user, ...props.report.thread.members],
+		...thread.value,
+		messages: [reportBodyMessage, ...thread.value.messages],
+		members: [props.report.reporter_user, ...thread.value.members],
 	}
 })
 
 const remainingMessageCount = computed(() => {
-	if (!props.report.thread?.messages) return 0
-	// Thread messages count (report body is injected separately)
-	return props.report.thread.messages.length
+	if (!thread.value?.messages) return 0
+	return thread.value.messages.length
 })
 
 const expandText = computed(() => {
@@ -395,8 +442,10 @@ async function closeReport(reply = false) {
 				closed: true,
 			},
 		})
-		await refreshReportCaches()
-		didCloseReport.value = true
+		await refreshThread()
+		closedOverride.value = true
+		startDismissCountdown()
+		void refreshReportQuery()
 	} catch (err: any) {
 		addNotification({
 			title: 'Error closing report',
@@ -407,6 +456,8 @@ async function closeReport(reply = false) {
 }
 
 async function reopenReport() {
+	cancelDismissCountdown()
+
 	try {
 		await useBaseFetch(`report/${props.report.id}`, {
 			method: 'PATCH',
@@ -414,41 +465,84 @@ async function reopenReport() {
 				closed: false,
 			},
 		})
-		await refreshReportCaches()
-		didCloseReport.value = false
+		await refreshThread()
+		closedOverride.value = false
+		void refreshReportQuery()
 	} catch (err: any) {
 		addNotification({
 			title: 'Error reopening report',
 			text: err.data ? err.data.description : err,
 			type: 'error',
 		})
+		if (reportClosed.value) {
+			startDismissCountdown()
+		}
 	}
 }
 
+function cancelDismissCountdown() {
+	pendingDismiss.value = false
+	if (dismissTimeout !== null) {
+		clearTimeout(dismissTimeout)
+		dismissTimeout = null
+	}
+}
+
+function startDismissCountdown() {
+	if (!props.dismissAfterClose || isSwipingAway.value) return
+
+	cancelDismissCountdown()
+	dismissAnimationId.value += 1
+	pendingDismiss.value = true
+	dismissTimeout = setTimeout(() => {
+		dismissTimeout = null
+		swipeAway()
+	}, DISMISS_DELAY_MS)
+}
+
+function swipeAway() {
+	if (isSwipingAway.value) return
+
+	isSwipingAway.value = true
+	swipeTimeout = setTimeout(() => {
+		swipeTimeout = null
+		emit('dismiss')
+	}, SWIPE_DURATION_MS)
+}
+
+onUnmounted(() => {
+	cancelDismissCountdown()
+	if (swipeTimeout !== null) {
+		clearTimeout(swipeTimeout)
+		swipeTimeout = null
+	}
+})
+
 const formatRelativeTime = useRelativeTime()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
 
-async function refreshReportCaches() {
-	await Promise.allSettled([refreshThread(), refreshNuxtData('new-moderation-reports')])
-}
-
 async function refreshThread() {
-	const threadId = props.report.thread?.id ?? props.report.thread_id
+	const threadId = thread.value?.id ?? props.report.thread?.id ?? props.report.thread_id
 	if (!threadId) return
 
-	const thread = await useBaseFetch(`thread/${threadId}`)
-	updateThread(thread)
+	const nextThread = await useBaseFetch(`thread/${threadId}`)
+	updateThread(nextThread)
 }
 
 function updateThread(newThread: any) {
+	thread.value = newThread
 	if (props.report.thread) {
 		Object.assign(props.report.thread, newThread)
 	}
 }
 
+function refreshReportQuery() {
+	return queryClient.invalidateQueries({ queryKey: ['report', props.report.id] })
+}
+
 async function getSharedInstanceVersion(
 	instanceId: string,
 	versionNumber: number,
@@ -844,3 +938,21 @@ async function banSharedInstanceOwner(owner: SharedInstanceReportUser) {
 	}
 }
 </script>
+
+<style scoped>
+.report-dismiss-progress {
+	transform-origin: left center;
+	animation-name: report-dismiss-fill;
+	animation-timing-function: linear;
+	animation-fill-mode: forwards;
+}
+
+@keyframes report-dismiss-fill {
+	from {
+		transform: scaleX(0);
+	}
+	to {
+		transform: scaleX(1);
+	}
+}
+</style>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index e6f5b3f9a4..0979893211 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -1,87 +1,41 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import {
-	BanIcon,
-	BugIcon,
-	CheckCheckIcon,
 	CheckIcon,
-	ChevronDownIcon,
-	ChevronRightIcon,
-	ClipboardCopyIcon,
 	CodeIcon,
-	CopyIcon,
 	DownloadIcon,
 	ExternalIcon,
-	EyeOffIcon,
-	LoaderCircleIcon,
-	ScaleIcon,
-	ShieldAlertIcon,
-	ShieldCheckIcon,
-	SpinnerIcon,
 	TimerIcon,
-	XIcon,
+	VersionIcon,
 } from '@modrinth/assets'
-import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/moderation'
-import { Button, ButtonLink, IconButton, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
-	Collapsible,
-	CollapsibleRegion,
-	commonMessages,
+	ButtonLink,
+	CopyCode,
+	CopyLinkButton,
 	getProjectTypeIcon,
-	injectModrinthClient,
-	injectNotificationManager,
 	NavTabs,
-	type OverflowMenuOption,
-	Toggle,
 	useFormatBytes,
-	useFormatDateTime,
-	useVIntl,
 } from '@modrinth/ui'
-import {
-	capitalizeString,
-	formatProjectType,
-	highlightCodeLines,
-	type ThreadMessage,
-	type User,
-} from '@modrinth/utils'
-import dayjs from 'dayjs'
-import { computed, nextTick, reactive, ref, watch } from 'vue'
+import { capitalizeString, formatProjectType } from '@modrinth/utils'
+import { computed, provide, ref, watch } from 'vue'
 
 import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
-import ThreadView from '~/components/ui/thread/ThreadView.vue'
-
-const auth = await useAuth()
-const featureFlags = useFeatureFlags()
-const { formatMessage } = useVIntl()
-
-const formatDateTimeUtc = useFormatDateTime({
-	year: 'numeric',
-	month: 'long',
-	day: 'numeric',
-	hour: 'numeric',
-	minute: '2-digit',
-	timeZoneName: 'short',
-	timeZone: 'UTC',
-})
-const formatBytes = useFormatBytes()
-
-type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
-	id: string
-	version_id: string
-}
-
-interface FileDecisions {
-	fileName: string
-	fileSize: number
-	decisions: Array<{
-		filePath: string
-		issueType: string
-		severity: string
-		decision: 'safe' | 'malware'
-	}>
-	maxSeverity: string
-}
+import {
+	getFileHighestSeverity,
+	getSeverityBadgeColor,
+	getVersionLabel,
+	getVersionPageHref,
+	severityOrder,
+} from '~/components/ui/moderation/tech-review/helpers'
+import TechRevFileDetailTab from '~/components/ui/moderation/tech-review/TechRevFileDetailTab.vue'
+import TechRevFilesTab from '~/components/ui/moderation/tech-review/TechRevFilesTab.vue'
+import TechRevThreadTab from '~/components/ui/moderation/tech-review/TechRevThreadTab.vue'
+import type { FlattenedFileReport } from '~/components/ui/moderation/tech-review/types'
+import {
+	TECH_REVIEW_DECISIONS_KEY,
+	useTechReviewDecisions,
+} from '~/components/ui/moderation/tech-review/use-tech-review-decisions'
 
 const props = defineProps<{
 	item: {
@@ -94,9 +48,10 @@ const props = defineProps<{
 	loadingIssues: Set<string>
 	decompiledSources: Map<string, string>
 	collapsed: boolean
+	disableCollapsing?: boolean
 }>()
 
-const { addNotification } = injectNotificationManager()
+const formatBytes = useFormatBytes()
 
 const emit = defineEmits<{
 	refetch: []
@@ -105,6 +60,9 @@ const emit = defineEmits<{
 	showMaliciousSummary: [unsafeFiles: UnsafeFile[]]
 }>()
 
+const decisions = useTechReviewDecisions(() => props.item.reports)
+provide(TECH_REVIEW_DECISIONS_KEY, decisions)
+
 const projectStatus = ref<Labrinth.Projects.v2.ProjectStatus>(props.item.project.status)
 const isProjectApproved = computed(() => {
 	return (
@@ -115,80 +73,10 @@ const isProjectApproved = computed(() => {
 	)
 })
 
-const isLoadingStatusAction = ref(false)
-const projectStatusActions = computed<OverflowMenuOption[]>(() => [
-	{
-		id: 'approve',
-		label: 'Approve',
-		tone: 'green',
-		hoverFilled: true,
-		action: () => setStatus('approved'),
-		disabled: isStatusActionDisabled('approved'),
-	},
-	{
-		id: 'withhold',
-		label: 'Withhold',
-		tone: 'orange',
-		hoverFilled: true,
-		action: () => setStatus('withheld'),
-		disabled: isStatusActionDisabled('withheld'),
-	},
-	{
-		id: 'send-to-review',
-		label: 'Send to review',
-		action: () => setStatus('processing'),
-		disabled: isStatusActionDisabled('processing'),
-	},
-	{
-		id: 'reject',
-		label: 'Reject',
-		tone: 'red',
-		hoverFilled: true,
-		action: () => setStatus('rejected'),
-		disabled: isStatusActionDisabled('rejected'),
-	},
-])
-
-function isStatusActionDisabled(status: Labrinth.Projects.v2.ProjectStatus): boolean {
-	const currentStatus = projectStatus.value
-	const isLoading = isLoadingStatusAction.value
-	return currentStatus === status || isLoading
-}
-
-async function setStatus(status: Labrinth.Projects.v2.ProjectStatus) {
-	isLoadingStatusAction.value = true
-	try {
-		await client.labrinth.projects_v2.edit(props.item.project.id, { status })
-		emit('refetch')
-
-		projectStatus.value = status
-	} catch (err) {
-		addNotification({
-			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: (err as any)?.data?.description ? (err as any).data.description : String(err),
-			type: 'error',
-		})
-	}
-	isLoadingStatusAction.value = false
-}
-
-type Tab = 'Thread' | 'Files' | 'File'
-const tabs: readonly ('Thread' | 'Files')[] = ['Thread', 'Files']
-const currentTab = ref<Tab>('Thread')
-
+const currentTab = ref<'Thread' | 'Files' | 'File'>('Thread')
+const tabs = ['Thread', 'Files'] as const
 const isThreadCollapsed = ref(props.collapsed)
 
-const remainingMessageCount = computed(() => {
-	if (!props.item.thread?.messages) return 0
-	return Math.max(0, props.item.thread.messages.length - 1)
-})
-
-const threadExpandText = computed(() => {
-	if (remainingMessageCount.value === 0) return 'Expand'
-	if (remainingMessageCount.value === 1) return 'Show 1 more message'
-	return `Show ${remainingMessageCount.value} more messages`
-})
-
 const selectedFileId = ref<string | null>(null)
 
 const selectedFile = computed(() => {
@@ -202,253 +90,13 @@ watch(selectedFile, (newFile) => {
 	}
 })
 
-const client = injectModrinthClient()
-
-async function updateIssueDetails(
-	data: {
-		detail_id: string
-		verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-	}[],
-) {
-	await client.request('/moderation/tech-review/issue-detail', {
-		api: 'labrinth',
-		version: 'internal',
-		method: 'PATCH',
-		body: data,
-	})
-}
-
-async function updateGlobalIssueDetail(
-	detailKey: string,
-	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
-) {
-	await client.labrinth.tech_review_internal.updateGlobalIssueDetails([
-		{ detail_key: detailKey, verdict },
-	])
-}
-
-const severityOrder = { severe: 3, high: 2, medium: 1, low: 0 } as Record<string, number>
-
-type DetailDecision = 'safe' | 'malware' | 'pending'
-type DetailDecisionScope = 'local' | 'global'
-
-const detailDecisions = reactive<Map<string, DetailDecision>>(new Map())
-const detailDecisionScopes = reactive<Map<string, DetailDecisionScope>>(new Map())
-const updatingDetails = reactive<Set<string>>(new Set())
-const updatingGlobalDetailKeys = reactive<Set<string>>(new Set())
-
-function verdictToDecision(
-	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
-): DetailDecision {
-	if (verdict === 'safe') return 'safe'
-	if (verdict === 'unsafe') return 'malware'
-	return 'pending'
-}
-
-function getAllDetails(): Labrinth.TechReview.Internal.ReportIssueDetail[] {
-	return props.item.reports.flatMap((report) => report.issues.flatMap((issue) => issue.details))
-}
-
-const hideGloballyPassed = ref(true)
-
-function isDetailGloballyPassed(detail: Labrinth.TechReview.Internal.ReportIssueDetail): boolean {
-	if (detailDecisionScopes.get(detail.id) === 'global') {
-		return detailDecisions.get(detail.id) === 'safe'
-	}
-
-	return detail.global_status === 'safe'
-}
-
-function isDetailGloballyResolved(detail: Labrinth.TechReview.Internal.ReportIssueDetail): boolean {
-	if (detailDecisionScopes.get(detail.id) === 'global') {
-		return detailDecisions.get(detail.id) !== 'pending'
-	}
-
-	return detail.global_status === 'safe' || detail.global_status === 'unsafe'
-}
-
-const globallyPassedSelectedFileCount = computed(() => {
-	if (!selectedFile.value) return 0
-
-	return selectedFile.value.issues.reduce(
-		(count, issue) => count + issue.details.filter(isDetailGloballyPassed).length,
-		0,
-	)
-})
-
-const globallyResolvedSelectedFileCount = computed(() => {
-	if (!selectedFile.value) return 0
-
-	return selectedFile.value.issues.reduce(
-		(count, issue) => count + issue.details.filter(isDetailGloballyResolved).length,
-		0,
-	)
-})
-
-function applyDecisionToRelatedDetails(
-	detailIds: string[],
-	decision: DetailDecision,
-	scope: DetailDecisionScope,
-): { otherMatchedCount: number } {
-	const allDetails = getAllDetails()
-	const selectedDetailIds = new Set(detailIds)
-	const updatedDetailIds = new Set<string>()
-
-	for (const detailId of detailIds) {
-		const detail = allDetails.find((candidate) => candidate.id === detailId)
-		let matchingDetails: Labrinth.TechReview.Internal.ReportIssueDetail[] = []
-
-		if (detail?.key) {
-			matchingDetails = allDetails.filter((candidate) => candidate.key === detail.key)
-		} else if (detail) {
-			matchingDetails = [detail]
-		}
-
-		if (matchingDetails.length === 0) {
-			detailDecisions.set(detailId, decision)
-			detailDecisionScopes.set(detailId, scope)
-			updatedDetailIds.add(detailId)
-			continue
-		}
-
-		for (const matchingDetail of matchingDetails) {
-			detailDecisions.set(matchingDetail.id, decision)
-			detailDecisionScopes.set(matchingDetail.id, scope)
-			updatedDetailIds.add(matchingDetail.id)
-		}
-	}
-
-	return {
-		otherMatchedCount: [...updatedDetailIds].filter((detailId) => !selectedDetailIds.has(detailId))
-			.length,
-	}
-}
-
-function statusMatchesDecision(
-	status: Labrinth.TechReview.Internal.DelphiReportIssueStatus | null,
-	decision: DetailDecision,
-): boolean {
-	if (status === 'safe') return decision === 'safe'
-	if (status === 'unsafe') return decision === 'malware'
-	return false
-}
-
-function isDetailActionSelected(
-	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
-	decision: DetailDecision,
-	scope: DetailDecisionScope,
-): boolean {
-	const localDecision = detailDecisions.get(detail.id)
-	const localScope = detailDecisionScopes.get(detail.id)
-	if (localDecision && localScope) {
-		if (localDecision === 'pending') {
-			if (localScope === 'local') {
-				if (scope === 'local') return false
-				return statusMatchesDecision(detail.global_status, decision)
-			}
-
-			if (scope === 'global') return false
-			return statusMatchesDecision(detail.local_status, decision)
-		}
-
-		return localDecision === decision && localScope === scope
-	}
-
-	if (scope === 'global') {
-		return statusMatchesDecision(detail.global_status, decision)
-	}
-
-	if (detail.global_status) {
-		return false
-	}
-
-	return statusMatchesDecision(detail.local_status, decision)
-}
-
-function decisionToVerdict(
-	decision: Exclude<DetailDecision, 'pending'>,
-): Labrinth.TechReview.Internal.DelphiReportIssueStatus {
-	return decision === 'safe' ? 'safe' : 'unsafe'
-}
-
-function getToggledDetailVerdict(
-	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
-	decision: Exclude<DetailDecision, 'pending'>,
-	scope: DetailDecisionScope,
-): Labrinth.TechReview.Internal.DelphiReportIssueStatus {
-	return isDetailActionSelected(detail, decision, scope) ? 'pending' : decisionToVerdict(decision)
-}
-
-function getDetailActionTooltip(
-	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
-	decision: Exclude<DetailDecision, 'pending'>,
-	scope: DetailDecisionScope,
-): string {
-	const action = decision === 'safe' ? 'pass' : 'fail'
-	const scopeLabel = scope === 'global' ? 'Global' : 'Local'
-
-	if (scope === 'global' && !canUpdateGlobalDetail(detail)) {
-		return 'Global verdict unavailable for generated trace keys'
-	}
-
-	if (isDetailActionSelected(detail, decision, scope)) {
-		return `Unset ${scopeLabel.toLowerCase()} ${action}`
-	}
-
-	return `${scopeLabel} ${action}`
-}
-
-function updateLocalDetailAction(
-	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
-	decision: Exclude<DetailDecision, 'pending'>,
-) {
-	return updateDetailStatus(detail.id, getToggledDetailVerdict(detail, decision, 'local'))
-}
-
-function updateGlobalDetailAction(
-	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
-	decision: Exclude<DetailDecision, 'pending'>,
-) {
-	return updateGlobalDetailStatus(detail, getToggledDetailVerdict(detail, decision, 'global'))
-}
-
-function canUpdateGlobalDetail(detail: Labrinth.TechReview.Internal.ReportIssueDetail): boolean {
-	return detail.key.length > 0 && !detail.key.startsWith('<no-key-')
-}
-
-function getFileHighestSeverity(
-	file: FlattenedFileReport,
-): Labrinth.TechReview.Internal.DelphiSeverity {
-	const severities = file.issues
-		.flatMap((i) => i.details ?? [])
-		.map((d) => d.severity)
-		.filter((s): s is Labrinth.TechReview.Internal.DelphiSeverity => !!s)
-
-	return severities.sort((a, b) => (severityOrder[b] ?? 0) - (severityOrder[a] ?? 0))[0] || 'low'
-}
-
-const allFiles = ref<FlattenedFileReport[]>([])
-
-watch(
-	() => props.item.reports,
-	(reports) => {
-		allFiles.value = [...reports].sort((a, b) => {
-			const aComplete = getFileMarkedCount(a) === getFileDetailCount(a)
-			const bComplete = getFileMarkedCount(b) === getFileDetailCount(b)
-			return aComplete === bComplete ? 0 : aComplete ? 1 : -1
-		})
-	},
-	{ immediate: true },
-)
-
 const highestSeverity = computed(() => {
-	const severities = props.item.reports
-		.flatMap((r) => r.issues ?? [])
-		.flatMap((i) => i.details ?? [])
-		.map((d) => d.severity)
-		.filter((s): s is Labrinth.TechReview.Internal.DelphiSeverity => !!s)
-
-	return severities.sort((a, b) => (severityOrder[b] ?? 0) - (severityOrder[a] ?? 0))[0] || 'low'
+	let highest: Labrinth.TechReview.Internal.DelphiSeverity = 'low'
+	for (const report of props.item.reports) {
+		const severity = getFileHighestSeverity(report)
+		if (severityOrder[severity] > severityOrder[highest]) highest = severity
+	}
+	return highest
 })
 
 const navTabsLinks = computed(() => {
@@ -471,7 +119,7 @@ const activeTabIndex = computed(() => {
 	if (currentTab.value === 'File' && selectedFile.value) {
 		return navTabsLinks.value.length - 1
 	}
-	const idx = tabs.indexOf(currentTab.value as 'Thread' | 'Files')
+	const idx = tabs.indexOf(currentTab.value as (typeof tabs)[number])
 	return idx >= 0 ? idx : 0
 })
 
@@ -484,48 +132,11 @@ function handleTabClick(index: number) {
 			isThreadCollapsed.value = false
 		}
 	} else if (index === tabs.length && selectedFile.value) {
-		// Clicked the file tab
-		currentTab.value = 'File' as Tab
+		currentTab.value = 'File'
 	}
 }
 
-function getSeverityBadgeColor(severity: Labrinth.TechReview.Internal.DelphiSeverity): string {
-	switch (severity) {
-		case 'severe':
-			return 'border-red/60 border bg-highlight-red text-red'
-		case 'high':
-			return 'border-orange/60 border bg-highlight-orange text-orange'
-		case 'medium':
-			return 'border-green/60 border bg-highlight-green text-green'
-		case 'low':
-		default:
-			return 'border-blue/60 border bg-highlight-blue text-blue'
-	}
-}
-
-function truncateMiddle(str: string, maxLength: number = 120): string {
-	if (str.length <= maxLength) return str
-	const separator = '...'
-	const sepLen = separator.length
-	const charsToShow = maxLength - sepLen
-	const frontChars = Math.ceil(charsToShow / 3)
-	const backChars = Math.floor((charsToShow * 2) / 3)
-	return str.slice(0, frontChars) + separator + str.slice(-backChars)
-}
-
-const severityColor = computed(() => {
-	switch (highestSeverity.value) {
-		case 'severe':
-			return 'text-red bg-highlight-red border-solid border-[1px] border-red'
-		case 'high':
-			return 'text-orange bg-highlight-orange border-solid border-[1px] border-orange'
-		case 'medium':
-			return 'text-green bg-highlight-green border-solid border-[1px] border-green'
-		case 'low':
-		default:
-			return 'text-blue bg-highlight-blue border-solid border-[1px] border-blue'
-	}
-})
+const severityColor = computed(() => getSeverityBadgeColor(highestSeverity.value))
 
 const formattedDate = computed(() => {
 	const dates = props.item.reports.map((r) => new Date(r.created))
@@ -542,10 +153,6 @@ function viewFileFlags(file: FlattenedFileReport) {
 	currentTab.value = 'File'
 }
 
-function getDetailElementId(detailId: string) {
-	return `tech-review-detail-${detailId}`
-}
-
 function findFileForDetail(detailId: string): FlattenedFileReport | null {
 	for (const report of props.item.reports) {
 		for (const issue of report.issues) {
@@ -558,33 +165,6 @@ function findFileForDetail(detailId: string): FlattenedFileReport | null {
 	return null
 }
 
-async function focusDetail(detailId: string) {
-	const file = findFileForDetail(detailId)
-	if (!file) return
-
-	viewFileFlags(file)
-	await nextTick()
-
-	const classItem = groupedByClass.value.find((group) =>
-		group.flags.some((flag) => flag.detail.id === detailId),
-	)
-
-	if (classItem) {
-		expandClass(classItem)
-	}
-
-	await nextTick()
-
-	if (!import.meta.client) return
-
-	window.requestAnimationFrame(() => {
-		document.getElementById(getDetailElementId(detailId))?.scrollIntoView({
-			behavior: 'smooth',
-			block: 'center',
-		})
-	})
-}
-
 function backToFileList() {
 	selectedFileId.value = null
 	if (currentTab.value === 'File') {
@@ -592,854 +172,45 @@ function backToFileList() {
 	}
 }
 
-async function copyToClipboard(code: string, detailId: string) {
-	try {
-		await navigator.clipboard.writeText(code)
-		showCopyFeedback.set(detailId, true)
-		setTimeout(() => {
-			showCopyFeedback.delete(detailId)
-		}, 2000)
-	} catch (error) {
-		console.error('Failed to copy code:', error)
-	}
-}
-
-function getDetailDecision(
-	detailId: string,
-	backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
-): 'safe' | 'malware' | 'pending' {
-	const localDecision = detailDecisions.get(detailId)
-	if (localDecision) return localDecision
-	if (backendStatus === 'safe') return 'safe'
-	if (backendStatus === 'unsafe') return 'malware'
-	return 'pending'
-}
-
-function isPreReviewed(
-	detailId: string,
-	backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
-): boolean {
-	return (backendStatus === 'safe' || backendStatus === 'unsafe') && !detailDecisions.has(detailId)
-}
-
-function getMarkedFlagsCount(flags: ClassGroup['flags']): number {
-	return flags.filter((f) => getDetailDecision(f.detail.id, f.detail.status) !== 'pending').length
-}
-
-function getFileDetailCount(file: FlattenedFileReport): number {
-	return file.issues.reduce((sum, issue) => sum + issue.details.length, 0)
-}
-
-function getFileMarkedCount(file: FlattenedFileReport): number {
-	let count = 0
-	for (const issue of file.issues) {
-		for (const detail of issue.details) {
-			const detailWithStatus = detail as typeof detail & {
-				status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-			}
-			if (getDetailDecision(detailWithStatus.id, detailWithStatus.status) !== 'pending') {
-				count++
-			}
-		}
-	}
-	return count
-}
-
-const remainingUnmarkedCount = computed(() => {
-	if (!selectedFile.value) return 0
-	return getFileDetailCount(selectedFile.value) - getFileMarkedCount(selectedFile.value)
-})
-
-function getSelectedFileFlags(): ClassGroup['flags'] {
-	if (!selectedFile.value) return []
-
-	return selectedFile.value.issues.flatMap((issue) =>
-		issue.details.map((detail) => ({
-			issueId: issue.id,
-			issueType: issue.issue_type,
-			detail,
-		})),
-	)
-}
-
-function getJarFlags(jarGroup: JarGroup): ClassGroup['flags'] {
-	return jarGroup.classes.flatMap((classItem) => classItem.flags)
-}
-
-function getJarMarkedCount(jarGroup: JarGroup): number {
-	return getMarkedFlagsCount(getJarFlags(jarGroup))
-}
-
-function getJarRemainingUnmarkedCount(jarGroup: JarGroup): number {
-	return getJarFlags(jarGroup).length - getJarMarkedCount(jarGroup)
-}
-
-const isBatchUpdating = ref(false)
-
-function getRemainingGlobalDetailCount(flags: ClassGroup['flags']): number {
-	return new Set(
-		flags
-			.filter(
-				(flag) =>
-					getDetailDecision(flag.detail.id, flag.detail.status) === 'pending' &&
-					canUpdateGlobalDetail(flag.detail),
-			)
-			.map((flag) => flag.detail.key),
-	).size
-}
-
-async function batchMarkRemainingGlobally(flags: ClassGroup['flags'], verdict: 'safe' | 'unsafe') {
-	if (isBatchUpdating.value) return
-
-	const detailsByKey = new Map(
-		flags
-			.filter(
-				(flag) =>
-					getDetailDecision(flag.detail.id, flag.detail.status) === 'pending' &&
-					canUpdateGlobalDetail(flag.detail),
-			)
-			.map((flag) => [flag.detail.key, flag.detail]),
-	)
-	const details = [...detailsByKey.values()]
-
-	if (details.length === 0) return
-
-	isBatchUpdating.value = true
-	try {
-		await client.labrinth.tech_review_internal.updateGlobalIssueDetails(
-			details.map((detail) => ({ detail_key: detail.key, verdict })),
-		)
-
-		applyDecisionToRelatedDetails(
-			details.map((detail) => detail.id),
-			verdictToDecision(verdict),
-			'global',
-		)
-
-		addNotification({
-			type: 'success',
-			title: `Globally marked ${details.length} trace keys as ${verdict}`,
-			text: `All remaining eligible traces have been globally marked as ${
-				verdict === 'safe' ? 'false positives' : 'malicious'
-			}.`,
-		})
-
-		if (
-			selectedFile.value &&
-			getFileMarkedCount(selectedFile.value) === getFileDetailCount(selectedFile.value)
-		) {
-			backToFileList()
-		}
-
-		emit('refetch')
-	} catch (error) {
-		console.error('Failed to batch update global traces:', error)
-		addNotification({
-			type: 'error',
-			title: 'Global batch update failed',
-			text: 'An error occurred while globally updating traces.',
-		})
-	} finally {
-		isBatchUpdating.value = false
-	}
-}
-
-async function batchMarkRemaining(verdict: 'safe' | 'unsafe') {
-	if (!selectedFile.value || isBatchUpdating.value) return
-
-	const detailIds: string[] = []
-	for (const issue of selectedFile.value.issues) {
-		for (const detail of issue.details) {
-			const detailWithStatus = detail as typeof detail & {
-				status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-			}
-			if (getDetailDecision(detailWithStatus.id, detailWithStatus.status) === 'pending') {
-				detailIds.push(detail.id)
-			}
-		}
-	}
-
-	if (detailIds.length === 0) return
-
-	isBatchUpdating.value = true
-	try {
-		await updateIssueDetails(detailIds.map((detailId) => ({ detail_id: detailId, verdict })))
-
-		applyDecisionToRelatedDetails(detailIds, verdictToDecision(verdict), 'local')
-
-		addNotification({
-			type: 'success',
-			title: `Marked ${detailIds.length} traces as ${verdict}`,
-			text: `All remaining traces have been marked as ${verdict === 'safe' ? 'false positives' : 'malicious'}.`,
-		})
-
-		// Jump back to Files tab when all flags in the current file are marked
-		if (selectedFile.value) {
-			const markedCount = getFileMarkedCount(selectedFile.value)
-			const totalCount = getFileDetailCount(selectedFile.value)
-			if (markedCount === totalCount) {
-				backToFileList()
-			}
-		}
-
-		emit('refetch')
-	} catch (error) {
-		console.error('Failed to batch update:', error)
-		addNotification({
-			type: 'error',
-			title: 'Batch update failed',
-			text: 'An error occurred while updating traces.',
-		})
-	} finally {
-		isBatchUpdating.value = false
-	}
-}
-
-async function batchMarkRemainingInJar(jarGroup: JarGroup, verdict: 'safe' | 'unsafe') {
-	if (isBatchUpdating.value) return
-
-	const detailIds = getJarFlags(jarGroup)
-		.filter((flag) => getDetailDecision(flag.detail.id, flag.detail.status) === 'pending')
-		.map((flag) => flag.detail.id)
-
-	if (detailIds.length === 0) return
-
-	isBatchUpdating.value = true
-	try {
-		await updateIssueDetails(detailIds.map((detailId) => ({ detail_id: detailId, verdict })))
-
-		applyDecisionToRelatedDetails(detailIds, verdictToDecision(verdict), 'local')
-
-		addNotification({
-			type: 'success',
-			title: `Marked ${detailIds.length} traces as ${verdict}`,
-			text: `All remaining traces in this JAR have been marked as ${
-				verdict === 'safe' ? 'false positives' : 'malicious'
-			}.`,
-		})
-
-		if (selectedFile.value) {
-			const markedCount = getFileMarkedCount(selectedFile.value)
-			const totalCount = getFileDetailCount(selectedFile.value)
-			if (markedCount === totalCount) {
-				backToFileList()
-			}
-		}
-
-		emit('refetch')
-	} catch (error) {
-		console.error('Failed to batch update JAR traces:', error)
-		addNotification({
-			type: 'error',
-			title: 'Batch update failed',
-			text: 'An error occurred while updating JAR traces.',
-		})
-	} finally {
-		isBatchUpdating.value = false
-	}
-}
-
-async function updateDetailStatus(
-	detailId: string,
-	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
-) {
-	let priorDecision: 'safe' | 'malware' | 'pending' = 'pending'
-	outer: for (const report of props.item.reports) {
-		for (const issue of report.issues) {
-			const detail = issue.details.find((d) => d.id === detailId)
-			if (detail) {
-				priorDecision = getDetailDecision(detail.id, detail.status)
-				break outer
-			}
-		}
-	}
-
-	updatingDetails.add(detailId)
-
-	const previousMarkedCount = selectedFile.value
-		? getFileMarkedCount(selectedFile.value)
-		: undefined
-
-	try {
-		await updateIssueDetails([{ detail_id: detailId, verdict }])
-
-		const { otherMatchedCount } = applyDecisionToRelatedDetails(
-			[detailId],
-			verdictToDecision(verdict),
-			'local',
-		)
-
-		// Only collapse if the prior state was 'pending' (new decision, not updating existing)
-		if (verdict !== 'pending' && priorDecision === 'pending') {
-			for (const classGroup of groupedByClass.value) {
-				const hasThisDetail = classGroup.flags.some((f) => f.detail.id === detailId)
-				if (hasThisDetail && getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
-					expandedClasses.delete(classGroup.key)
-					break
-				}
-			}
-		}
-
-		// Jump back to Files tab when all flags in the current file are marked
-		if (verdict !== 'pending' && selectedFile.value) {
-			const markedCount = getFileMarkedCount(selectedFile.value)
-			const totalCount = getFileDetailCount(selectedFile.value)
-			if (previousMarkedCount != markedCount && markedCount === totalCount) {
-				backToFileList()
-			}
-		}
-
-		const otherText =
-			otherMatchedCount > 0
-				? ` (${otherMatchedCount} other trace${otherMatchedCount === 1 ? '' : 's'} also marked)`
-				: ''
-
-		if (verdict === 'pending') {
-			addNotification({
-				type: 'success',
-				title: 'Local trace verdict unset',
-				text: `The project-local verdict has been removed.${otherText}`,
-			})
-		} else if (verdict === 'safe') {
-			addNotification({
-				type: 'success',
-				title: 'Issue marked as pass',
-				text: `This issue has been marked as a false positive.${otherText}`,
-			})
-		} else {
-			addNotification({
-				type: 'success',
-				title: 'Issue marked as fail',
-				text: `This issue has been flagged as malicious.${otherText}`,
-			})
-		}
-
-		emit('refetch')
-	} catch (error) {
-		console.error('Failed to update detail status:', error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to update issue',
-			text: 'An error occurred while updating the issue status.',
-		})
-	} finally {
-		updatingDetails.delete(detailId)
-	}
-}
-
-async function updateGlobalDetailStatus(
-	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
-	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
-) {
-	if (!canUpdateGlobalDetail(detail)) {
-		addNotification({
-			type: 'error',
-			title: 'Global update unavailable',
-			text: 'Generated trace keys cannot be marked globally.',
-		})
-		return
-	}
-
-	updatingGlobalDetailKeys.add(detail.key)
-
-	const previousMarkedCount = selectedFile.value
-		? getFileMarkedCount(selectedFile.value)
-		: undefined
-
-	try {
-		await updateGlobalIssueDetail(detail.key, verdict)
-
-		const { otherMatchedCount } = applyDecisionToRelatedDetails(
-			[detail.id],
-			verdictToDecision(verdict),
-			'global',
-		)
-
-		if (verdict !== 'pending') {
-			for (const classGroup of groupedByClass.value) {
-				if (getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
-					expandedClasses.delete(classGroup.key)
-				}
-			}
-		}
-
-		if (verdict !== 'pending' && selectedFile.value) {
-			const markedCount = getFileMarkedCount(selectedFile.value)
-			const totalCount = getFileDetailCount(selectedFile.value)
-			if (previousMarkedCount != markedCount && markedCount === totalCount) {
-				backToFileList()
-			}
-		}
-
-		const otherText =
-			otherMatchedCount > 0
-				? ` (${otherMatchedCount} other trace${otherMatchedCount === 1 ? '' : 's'} also marked in this project)`
-				: ''
-
-		if (verdict === 'pending') {
-			addNotification({
-				type: 'success',
-				title: 'Global trace verdict unset',
-				text: `The global verdict for this trace key has been removed.${otherText}`,
-			})
-		} else {
-			addNotification({
-				type: 'success',
-				title:
-					verdict === 'safe' ? 'Trace globally marked as pass' : 'Trace globally marked as fail',
-				text:
-					verdict === 'safe'
-						? `This trace key has been marked as a global false positive.${otherText}`
-						: `This trace key has been globally flagged as malicious.${otherText}`,
-			})
-		}
-
-		emit('refetch')
-	} catch (error) {
-		console.error('Failed to update global detail status:', error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to update global trace',
-			text: 'An error occurred while updating the global trace status.',
-		})
-	} finally {
-		updatingGlobalDetailKeys.delete(detail.key)
-	}
-}
-
-const expandedClasses = reactive<Set<string>>(new Set())
-const autoExpandedFileIds = reactive<Set<string>>(new Set())
-const showCopyFeedback = reactive<Map<string, boolean>>(new Map())
-const highlightedSourceCache = reactive<Map<string, { source: string; lines: string[] }>>(new Map())
-const LAZY_LOAD_CLASS_SOURCE_MINIMUM = 2
-
-interface ClassGroup {
-	key: string
-	jar: string | null
-	filePath: string
-	flags: Array<{
-		issueId: string
-		issueType: string
-		detail: Labrinth.TechReview.Internal.ReportIssueDetail & {
-			status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-		}
-	}>
-}
-
-interface JarGroup {
-	key: string
-	jar: string | null
-	segments: string[]
-	classes: ClassGroup[]
-}
-
-function splitJarSegments(jar: string | null, currentFileName: string | null): string[] {
-	if (!jar) return []
-	const segments = jar
-		.split(/[/#]/)
-		.map((s) => decodeURIComponent(s.trim()))
-		.filter((s) => s.length > 0)
-	// Skip the first segment if it matches the current file tab (it's already shown in the file list)
-	if (segments.length > 0 && currentFileName && segments[0] === currentFileName) {
-		return segments.slice(1)
-	}
-	return segments
-}
-
-function isRootJarGroup(jarGroup: JarGroup): boolean {
-	return jarGroup.segments.length === 0
-}
-
-const groupedByClass = computed<ClassGroup[]>(() => {
-	if (!selectedFile.value) return []
-
-	const classMap = new Map<string, ClassGroup>()
-
-	for (const issue of selectedFile.value.issues) {
-		for (const detail of issue.details) {
-			if (hideGloballyPassed.value && isDetailGloballyPassed(detail)) {
-				continue
-			}
-
-			const classKey = `${detail.jar ?? ''}::${detail.file_path}`
-			if (!classMap.has(classKey)) {
-				classMap.set(classKey, {
-					key: classKey,
-					jar: detail.jar ?? null,
-					filePath: detail.file_path,
-					flags: [],
-				})
-			}
-			// Cast detail to include status (backend will provide this field)
-			const detailWithStatus = detail as Labrinth.TechReview.Internal.ReportIssueDetail & {
-				status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-			}
-			classMap.get(classKey)!.flags.push({
-				issueId: issue.id,
-				issueType: issue.issue_type,
-				detail: detailWithStatus,
-			})
-		}
-	}
-
-	for (const classGroup of classMap.values()) {
-		classGroup.flags.sort((a, b) => {
-			const aPreReviewed = isPreReviewed(a.detail.id, a.detail.status)
-			const bPreReviewed = isPreReviewed(b.detail.id, b.detail.status)
-			return aPreReviewed === bPreReviewed ? 0 : aPreReviewed ? 1 : -1
-		})
-	}
-
-	return Array.from(classMap.values())
-})
-
-const groupedByJar = computed<JarGroup[]>(() => {
-	const jarMap = new Map<string, JarGroup>()
-
-	for (const classItem of groupedByClass.value) {
-		const jarKey = classItem.jar ?? ''
-		if (!jarMap.has(jarKey)) {
-			jarMap.set(jarKey, {
-				key: jarKey,
-				jar: classItem.jar,
-				segments: splitJarSegments(classItem.jar, selectedFile.value?.file_name ?? null),
-				classes: [],
-			})
-		}
-		jarMap.get(jarKey)!.classes.push(classItem)
-	}
-
-	return Array.from(jarMap.values()).sort((a, b) => {
-		const aRoot = isRootJarGroup(a)
-		const bRoot = isRootJarGroup(b)
-		return aRoot === bRoot ? 0 : aRoot ? -1 : 1
-	})
-})
-
 watch(
 	() => props.focusedDetailId,
 	(detailId) => {
 		if (detailId) {
-			focusDetail(detailId)
+			const file = findFileForDetail(detailId)
+			if (file) viewFileFlags(file)
 		}
 	},
 	{ immediate: true },
 )
-
-// Auto-expand/load source for small files; keep larger files lazy.
-watch(
-	[selectedFileId, groupedByClass],
-	([fileId, classes]) => {
-		if (!fileId || classes.length === 0 || autoExpandedFileIds.has(fileId)) return
-
-		autoExpandedFileIds.add(fileId)
-
-		if (classes.length < LAZY_LOAD_CLASS_SOURCE_MINIMUM) {
-			for (const classItem of classes) {
-				expandClass(classItem)
-			}
-		}
-	},
-	{ immediate: true },
-)
-
-function getHighestSeverityInClass(
-	flags: ClassGroup['flags'],
-): Labrinth.TechReview.Internal.DelphiSeverity {
-	return flags.reduce(
-		(highest, flag) =>
-			(severityOrder[flag.detail.severity] ?? 0) > (severityOrder[highest] ?? 0)
-				? flag.detail.severity
-				: highest,
-		'low' as Labrinth.TechReview.Internal.DelphiSeverity,
-	)
-}
-
-function getClassDecompiledSource(classItem: ClassGroup): string | undefined {
-	for (const flag of classItem.flags) {
-		const source = props.decompiledSources.get(flag.detail.id)
-		if (source) return source
-	}
-	return undefined
-}
-
-function getHighlightedClassSource(classItem: ClassGroup): string[] {
-	const source = getClassDecompiledSource(classItem)
-	if (!source) return []
-
-	const cached = highlightedSourceCache.get(classItem.key)
-	if (cached?.source === source) return cached.lines
-
-	const lines = highlightCodeLines(source, 'java')
-	highlightedSourceCache.set(classItem.key, { source, lines })
-	return lines
-}
-
-function isClassLoadingSource(classItem: ClassGroup): boolean {
-	return classItem.flags.some((flag) => props.loadingIssues.has(flag.issueId))
-}
-
-function loadClassSources(classItem: ClassGroup) {
-	const issueIds = [...new Set(classItem.flags.map((flag) => flag.issueId))]
-	if (issueIds.length > 0) {
-		emit('loadIssueSources', issueIds)
-	}
-}
-
-function expandClass(classItem: ClassGroup) {
-	if (expandedClasses.has(classItem.key)) return
-	expandedClasses.add(classItem.key)
-	loadClassSources(classItem)
-}
-
-function toggleClass(classItem: ClassGroup) {
-	if (expandedClasses.has(classItem.key)) {
-		expandedClasses.delete(classItem.key)
-	} else {
-		expandClass(classItem)
-	}
-}
-
-function handleThreadUpdate() {
-	emit('refetch')
-}
-
-const techReviewContext = computed<TechReviewContext>(() => ({
-	project: props.item.project,
-	project_owner: props.item.project_owner,
-	reports: props.item.reports,
-}))
-
-const threadViewRef = ref<{
-	setReplyContent: (content: string) => void
-	getReplyContent: () => string
-} | null>(null)
-
-const unsafeFiles = computed<UnsafeFile[]>(() => {
-	return props.item.reports
-		.filter((report) =>
-			report.issues.some((issue) =>
-				issue.details.some((detail) => {
-					const detailWithStatus = detail as typeof detail & {
-						status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-					}
-					const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
-					return decision === 'malware'
-				}),
-			),
-		)
-		.map((report) => ({
-			file: report,
-			projectName: props.item.project.name,
-			projectId: props.item.project.id,
-			userId: props.item.project_owner.id,
-			username: props.item.project_owner.name,
-		}))
-})
-
-const reviewSummaryPreview = computed(() => {
-	const fileDecisions = new Map<string, FileDecisions>()
-	let totalSafe = 0
-	let totalUnsafe = 0
-
-	for (const report of props.item.reports) {
-		if (!fileDecisions.has(report.id)) {
-			fileDecisions.set(report.id, {
-				fileName: report.file_name,
-				fileSize: report.file_size,
-				decisions: [],
-				maxSeverity: 'low',
-			})
-		}
-		const fileData = fileDecisions.get(report.id)!
-
-		for (const issue of report.issues) {
-			for (const detail of issue.details) {
-				// TODO: proper types when backend pushes
-				const detailWithStatus = detail as typeof detail & {
-					status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-				}
-				const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
-				if (decision === 'pending') continue
-
-				fileData.decisions.push({
-					filePath: detail.file_path,
-					issueType: issue.issue_type.replace(/_/g, ' '),
-					severity: detail.severity,
-					decision,
-				})
-
-				if ((severityOrder[detail.severity] ?? 0) > (severityOrder[fileData.maxSeverity] ?? 0)) {
-					fileData.maxSeverity = detail.severity
-				}
-
-				if (decision === 'safe') totalSafe++
-				else totalUnsafe++
-			}
-		}
-	}
-
-	const totalDecisions = totalSafe + totalUnsafe
-	if (totalDecisions === 0) return ''
-
-	const timestamp = formatDateTimeUtc(dayjs().toDate())
-	let markdown = `## Tech Review Summary\n*${timestamp}*\n\n`
-	markdown += `<details>\n<summary>File Details (${totalSafe} safe, ${totalUnsafe} unsafe)</summary>\n\n`
-
-	for (const [, fileData] of fileDecisions) {
-		if (fileData.decisions.length === 0) continue
-
-		const fileSafe = fileData.decisions.filter((d) => d.decision === 'safe').length
-		const fileUnsafe = fileData.decisions.filter((d) => d.decision === 'malware').length
-		const fileVerdict = fileUnsafe > 0 ? 'Unsafe' : 'Safe'
-
-		markdown += `### ${fileData.fileName}\n`
-		markdown += `> ${formatBytes(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
-		markdown += `<details>\n<summary>Issues (${fileSafe} safe, ${fileUnsafe} unsafe)</summary>\n\n`
-		markdown += `| Class | Issue Type | Severity | Decision |\n`
-		markdown += `|-------|------------|----------|----------|\n`
-
-		for (const d of fileData.decisions) {
-			const decisionText = d.decision === 'safe' ? '✅ Safe' : '❌ Unsafe'
-			markdown += `| \`${d.filePath}\` | ${d.issueType} | ${capitalizeString(d.severity)} | ${decisionText} |\n`
-		}
-
-		markdown += `\n</details>\n\n`
-	}
-
-	markdown += `</details>\n\n`
-	markdown += `---\n\n**Total:** ${totalDecisions} issues reviewed (${totalSafe} safe, ${totalUnsafe} unsafe)\n\n`
-
-	return markdown
-})
-
-const threadWithPreview = computed(() => {
-	if (!reviewSummaryPreview.value) return props.item.thread
-
-	const user = auth.value?.user as User | null
-	if (!user) return props.item.thread
-
-	const previewMessage: ThreadMessage & { preview: true } = {
-		id: 'preview-message',
-		author_id: user.id,
-		body: {
-			type: 'text',
-			body: reviewSummaryPreview.value,
-			private: true,
-			replying_to: null,
-			associated_images: [],
-		},
-		created: new Date().toISOString(),
-		hide_identity: false,
-		preview: true,
-	}
-
-	return {
-		...props.item.thread,
-		messages: [...props.item.thread.messages, previewMessage],
-		members: props.item.thread.members.some((m) => m.id === user.id)
-			? props.item.thread.members
-			: [...props.item.thread.members, user],
-	}
-})
-
-const allIssuesResolved = computed(() => {
-	for (const report of props.item.reports) {
-		for (const issue of report.issues) {
-			for (const detail of issue.details) {
-				const detailWithStatus = detail as typeof detail & {
-					status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
-				}
-				const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
-				if (decision === 'pending') return false
-			}
-		}
-	}
-	return true
-})
-
-const canSubmitReview = computed(() => {
-	const totalIssues = props.item.reports.reduce((sum, r) => sum + r.issues.length, 0)
-	if (totalIssues === 0) return true
-	return allIssuesResolved.value
-})
-const hasSubmittedPassReview = ref(false)
-
-async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
-	hasSubmittedPassReview.value = verdict === 'safe'
-	const editorContent = threadViewRef.value?.getReplyContent() || ''
-
-	let message: string | undefined
-	if (reviewSummaryPreview.value && editorContent) {
-		message = `${reviewSummaryPreview.value}${editorContent}`
-	} else if (reviewSummaryPreview.value) {
-		message = reviewSummaryPreview.value
-	} else if (editorContent) {
-		message = editorContent
-	}
-
-	try {
-		await client.labrinth.tech_review_internal.submitProject(props.item.project.id, {
-			verdict,
-			message,
-		})
-		emit('markComplete', props.item.project.id)
-		addNotification({
-			type: 'success',
-			title: 'Review submitted',
-			text: 'Technical review completed successfully.',
-		})
-
-		if (verdict === 'unsafe') {
-			emit('showMaliciousSummary', unsafeFiles.value)
-		}
-	} catch (error: unknown) {
-		const err = error as { response?: { data?: { issues?: string[] } } }
-		if (err.response?.data?.issues) {
-			const missedCount = err.response.data.issues.length
-			addNotification({
-				type: 'error',
-				title: 'Pending issues remain',
-				text: `${missedCount} issue(s) still need a verdict before submitting.`,
-			})
-		} else {
-			addNotification({
-				type: 'error',
-				title: 'Submit failed',
-				text: 'Failed to submit review. Please try again.',
-			})
-		}
-	}
-}
-
-function copyId() {
-	navigator.clipboard.writeText(props.item.project.id).then(() => {
-		addNotification({
-			type: 'success',
-			title: 'Project ID copied',
-			text: 'The ID of this project has been copied to your clipboard.',
-		})
-	})
-}
 </script>
 
 <template>
-	<div class="shadow-card overflow-hidden rounded-2xl border border-surface-5 bg-surface-3">
-		<div class="flex flex-col gap-4 bg-surface-3 p-4">
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-4">
-					<Avatar
-						:src="item.project.icon_url"
-						class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
-						size="4rem"
-					/>
+	<div
+		class="shadow-card overflow-hidden rounded-2xl border border-solid border-surface-4 bg-surface-3"
+	>
+		<div
+			class="flex flex-col gap-4 border-0 border-b border-solid border-surface-4 bg-surface-3 p-4"
+		>
+			<div class="flex items-start justify-between">
+				<div class="flex items-center gap-3">
+					<NuxtLink
+						:to="`/${item.project.project_types[0]}/${item.project.slug ?? item.project.id}`"
+						target="_blank"
+						tabindex="-1"
+					>
+						<Avatar
+							:src="item.project.icon_url"
+							class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
+							size="4rem"
+						/>
+					</NuxtLink>
 
 					<div class="flex flex-col gap-1.5">
 						<div class="flex items-center gap-2">
 							<NuxtLink
 								:to="`/${item.project.project_types[0]}/${item.project.slug ?? item.project.id}`"
 								target="_blank"
-								class="text-lg font-semibold text-contrast hover:underline"
+								class="text-lg font-semibold text-contrast hover:underline focus-visible:underline"
 							>
 								{{ item.project.name }}
 							</NuxtLink>
@@ -1478,28 +249,28 @@ function copyId() {
 								</span>
 							</div>
 
-							<div class="rounded-full px-2.5 py-1" :class="severityColor">
+							<div class="rounded-full border-solid px-2.5 py-1" :class="severityColor">
 								<span class="text-sm font-medium">{{
 									capitalizeString(highestSeverity.toLowerCase())
 								}}</span>
 							</div>
 						</div>
 
-						<div class="flex items-center gap-1">
-							<Avatar
-								:src="item.project_owner.icon_url"
-								class="rounded-full border border-surface-5 bg-surface-4 !shadow-none"
-								size="1.5rem"
-								circle
-							/>
+						<div class="flex items-center gap-2">
 							<NuxtLink
 								:to="`/${item.project_owner.kind}/${item.project_owner.id}`"
 								target="_blank"
-								class="text-sm font-medium text-secondary hover:underline"
+								class="flex items-center gap-1 text-sm font-medium text-secondary hover:underline"
 							>
+								<Avatar
+									:src="item.project_owner.icon_url"
+									class="rounded-full border border-surface-5 bg-surface-4 !shadow-none"
+									size="1.5rem"
+									circle
+								/>
 								{{ item.project_owner.name }}
 							</NuxtLink>
-							<span class="text-tertiary text-sm">({{ item.project_owner.id }})</span>
+							<CopyCode v-tooltip="'Copy user ID'" :text="item.project_owner.id" />
 						</div>
 					</div>
 				</div>
@@ -1516,767 +287,101 @@ function copyId() {
 						>
 							<CodeIcon />
 						</ButtonLink>
-						<IconButton v-tooltip="'Copy ID'" :label="'Copy ID'" @click="copyId">
-							<ClipboardCopyIcon />
-						</IconButton>
+						<CopyCode v-tooltip="'Copy project ID'" :text="item.project.id" />
+						<CopyLinkButton
+							copy-label="Copy project link"
+							:url="`https://modrinth.com/moderation/technical-review/${props.item.project.id}`"
+						/>
 						<ButtonLink
-							v-tooltip="'Open in new tab'"
+							v-tooltip="'Open tech review in new tab'"
 							:href="`/moderation/technical-review/${props.item.project.id}`"
 							target="_blank"
-							class="!w-9 !rounded-full !px-0"
+							circular
+							icon-only
 						>
 							<ExternalIcon />
 						</ButtonLink>
 					</div>
 				</div>
 			</div>
-
-			<div class="h-px w-full bg-surface-5"></div>
-
 			<div class="flex flex-row justify-between">
 				<NavTabs
 					mode="local"
 					:links="navTabsLinks"
 					:active-index="activeTabIndex"
-					class="bg-surface-3! shadow-none!"
+					class="border border-solid border-surface-4 bg-surface-2"
 					@tab-click="handleTabClick"
 				/>
 
-				<div v-if="selectedFile" class="flex flex-row items-end gap-2">
+				<div v-if="currentTab === 'File' && selectedFile" class="flex flex-row items-end gap-2">
 					<ButtonLink
-						v-tooltip="`Download`"
 						type="outlined"
 						target="_blank"
-						:href="selectedFile.download_url"
-						:download="selectedFile.file_name"
+						:href="getVersionPageHref(item.project, selectedFile.version_id)"
 						class="!bg-surface-2"
-						aria-label="Download"
+						:aria-label="`Open version ${getVersionLabel(selectedFile)}`"
 					>
-						<DownloadIcon aria-hidden="true" />
+						<VersionIcon aria-hidden="true" />
+						{{ getVersionLabel(selectedFile) }}
 					</ButtonLink>
 					<ButtonLink
-						v-tooltip="`Open in Slicer`"
 						type="outlined"
 						target="_blank"
 						:href="`https://slicer.run/?url=${encodeURIComponent(selectedFile.download_url)}`"
 						class="!bg-surface-2"
 						aria-label="Open in Slicer"
 					>
-						<ExternalIcon aria-hidden="true" /> Open
+						<ExternalIcon aria-hidden="true" /> Slicer
+					</ButtonLink>
+					<ButtonLink
+						v-tooltip="
+							`Download ${selectedFile.file_name} (${formatBytes(selectedFile.file_size)})`
+						"
+						type="outlined"
+						target="_blank"
+						:href="selectedFile.download_url"
+						:download="selectedFile.file_name"
+						class="!bg-surface-2"
+						aria-label="Download"
+						icon-only
+						circular
+					>
+						<DownloadIcon aria-hidden="true" />
 					</ButtonLink>
 				</div>
 			</div>
 		</div>
 
-		<div class="border-t border-surface-3 bg-surface-2">
-			<template v-if="currentTab === 'Thread'">
-				<CollapsibleRegion
-					v-model:collapsed="isThreadCollapsed"
-					:expand-text="threadExpandText"
-					collapse-text="Collapse thread"
-					class="border-x border-b border-solid border-surface-3"
-				>
-					<div class="bg-surface-2 pt-0">
-						<!-- DEV-531 -->
-						<!-- @vue-expect-error TODO: will convert ThreadView to use api-client types at a later date -->
-						<ThreadView
-							ref="threadViewRef"
-							:thread="threadWithPreview"
-							:quick-replies="techReviewQuickReplies"
-							:quick-reply-context="techReviewContext"
-							@update-thread="handleThreadUpdate"
-						>
-							<template #additionalActions>
-								<Button
-									v-tooltip="
-										!canSubmitReview
-											? 'There are still pending flags!'
-											: hasSubmittedPassReview
-												? 'Project already passed!'
-												: undefined
-									"
-									type="colored"
-									color="brand"
-									:disabled="!canSubmitReview || hasSubmittedPassReview"
-									@click="handleSubmitReview('safe')"
-								>
-									<ShieldCheckIcon /> Pass
-								</Button>
-								<Button
-									v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
-									type="colored"
-									color="red"
-									:disabled="!canSubmitReview"
-									@click="handleSubmitReview('unsafe')"
-								>
-									<BugIcon /> Fail
-								</Button>
-								<TeleportOverflowMenu
-									label="More options"
-									class="btn-dropdown-animation !w-auto !rounded-xl !px-2.5"
-									:disabled="isLoadingStatusAction"
-									:options="projectStatusActions"
-								>
-									<SpinnerIcon
-										v-if="isLoadingStatusAction"
-										class="animate-spin"
-										aria-hidden="true"
-									/>
-									<ScaleIcon v-else aria-hidden="true" />
-									Set Status
-									<template #approve>
-										<CheckIcon aria-hidden="true" />
-										Approve
-									</template>
-									<template #withhold>
-										<EyeOffIcon aria-hidden="true" />
-										Withhold
-									</template>
-									<template #send-to-review>
-										<ScaleIcon aria-hidden="true" />
-										Send to review
-									</template>
-									<template #reject>
-										<XIcon aria-hidden="true" />
-										Reject
-									</template>
-								</TeleportOverflowMenu>
-								<Button
-									v-if="featureFlags.developerMode"
-									type="outlined"
-									@click="emit('showMaliciousSummary', unsafeFiles)"
-									>Debug</Button
-								>
-							</template>
-						</ThreadView>
-					</div>
-				</CollapsibleRegion>
-			</template>
-
-			<template v-else-if="currentTab === 'Files'">
-				<div
-					v-for="(file, idx) in allFiles"
-					:key="idx"
-					class="flex items-center justify-between border-0 border-x border-b border-solid border-surface-3 bg-surface-2 px-4 py-3"
-					:class="{
-						'rounded-bl-2xl rounded-br-2xl': idx === allFiles.length - 1,
-						'bg-[#E8E8E8] dark:bg-[#1A1C20]': idx % 2 === 1,
-					}"
-				>
-					<div class="flex items-center gap-3">
-						<span
-							v-tooltip="file.file_name"
-							class="font-medium text-contrast"
-							:class="{ 'cursor-pointer hover:underline': getFileDetailCount(file) > 0 }"
-							@click="getFileDetailCount(file) > 0 && viewFileFlags(file)"
-						>
-							{{ truncateMiddle(file.file_name, 50) }}
-						</span>
-						<div class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1">
-							<span class="text-sm font-medium text-secondary">{{
-								formatBytes(file.file_size)
-							}}</span>
-						</div>
-						<div
-							v-if="getFileDetailCount(file) > 0"
-							class="rounded-full border-solid px-2.5 py-1"
-							:class="getSeverityBadgeColor(getFileHighestSeverity(file))"
-						>
-							<span class="text-sm font-medium">{{
-								capitalizeString(getFileHighestSeverity(file))
-							}}</span>
-						</div>
-						<div
-							v-if="getFileDetailCount(file) > 0"
-							class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
-							:class="
-								getFileMarkedCount(file) === getFileDetailCount(file)
-									? 'border-green/60 bg-highlight-green text-green'
-									: 'border-red/60 bg-highlight-red text-red'
-							"
-						>
-							<CheckIcon
-								v-if="getFileMarkedCount(file) === getFileDetailCount(file)"
-								class="size-4"
-							/>
-							{{ getFileMarkedCount(file) }}/{{ getFileDetailCount(file) }} flags
-						</div>
-						<!-- TODO: remove toString when backend supports it properly -->
-						<div
-							v-else-if="file.flag_reason.toString() === 'manual'"
-							class="border-blue/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-blue px-2.5 py-1 text-sm text-blue"
-						>
-							Manual review
-						</div>
-						<div
-							v-else
-							class="border-green/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-green px-2.5 py-1 text-sm text-green"
-						>
-							No flags
-						</div>
-					</div>
-
-					<div class="flex items-center gap-2">
-						<Button v-if="getFileDetailCount(file) > 0" @click="viewFileFlags(file)">Flags</Button>
-						<ButtonLink
-							type="outlined"
-							:href="file.download_url"
-							:title="`Download ${file.file_name}`"
-							:download="file.file_name"
-							tabindex="0"
-						>
-							<DownloadIcon />
-						</ButtonLink>
-						<ButtonLink
-							v-tooltip="`Open in Slicer`"
-							type="outlined"
-							target="_blank"
-							:href="`https://slicer.run/?url=${encodeURIComponent(file.download_url)}`"
-							aria-label="Open in Slicer"
-						>
-							<ExternalIcon aria-hidden="true" /> Open
-						</ButtonLink>
-					</div>
-				</div>
-			</template>
-
-			<template v-else-if="currentTab === 'File' && selectedFile">
-				<div
-					v-if="getFileDetailCount(selectedFile) > 0"
-					class="flex flex-wrap items-center justify-between gap-3 border-x border-b border-t-0 border-solid border-surface-3 bg-surface-2 p-4"
-				>
-					<div
-						v-if="remainingUnmarkedCount > 0"
-						class="detail-verdict-buttons"
-						role="group"
-						aria-label="Remaining issue actions"
-					>
-						<span class="remaining-verdict-label"
-							>Remaining issues ({{ remainingUnmarkedCount }})</span
-						>
-						<button
-							v-tooltip="'Remaining globally safe'"
-							class="detail-verdict-button detail-verdict-button--safe"
-							aria-label="Remaining globally safe"
-							:disabled="
-								isBatchUpdating || getRemainingGlobalDetailCount(getSelectedFileFlags()) === 0
-							"
-							@click="batchMarkRemainingGlobally(getSelectedFileFlags(), 'safe')"
-						>
-							<CheckCheckIcon aria-hidden="true" />
-						</button>
-						<button
-							v-tooltip="'Remaining safe'"
-							class="detail-verdict-button detail-verdict-button--safe"
-							aria-label="Remaining safe"
-							:disabled="isBatchUpdating"
-							@click="batchMarkRemaining('safe')"
-						>
-							<CheckIcon aria-hidden="true" />
-						</button>
-						<button
-							v-tooltip="'Remaining malware'"
-							class="detail-verdict-button detail-verdict-button--unsafe"
-							aria-label="Remaining malware"
-							:disabled="isBatchUpdating"
-							@click="batchMarkRemaining('unsafe')"
-						>
-							<BanIcon aria-hidden="true" />
-						</button>
-						<button
-							v-tooltip="'Remaining globally unsafe'"
-							class="detail-verdict-button detail-verdict-button--unsafe"
-							aria-label="Remaining globally unsafe"
-							:disabled="
-								isBatchUpdating || getRemainingGlobalDetailCount(getSelectedFileFlags()) === 0
-							"
-							@click="batchMarkRemainingGlobally(getSelectedFileFlags(), 'unsafe')"
-						>
-							<ShieldAlertIcon aria-hidden="true" />
-						</button>
-					</div>
-					<label class="ml-auto flex cursor-pointer items-center gap-3 text-sm">
-						<span class="text-right text-secondary">
-							Hide globally passed
-							<span class="text-tertiary block text-xs">
-								{{ globallyResolvedSelectedFileCount }}/{{ getFileDetailCount(selectedFile) }}
-								traces globally resolved
-							</span>
-						</span>
-						<Toggle
-							v-model="hideGloballyPassed"
-							:disabled="globallyPassedSelectedFileCount === 0"
-							small
-						/>
-					</label>
-				</div>
-				<div
-					v-for="jarGroup in groupedByJar"
-					:key="jarGroup.key"
-					class="border-x border-b-0 border-t-0 border-solid border-surface-3 bg-surface-2"
-				>
-					<div
-						v-if="jarGroup.segments.length > 0"
-						class="border-b border-solid border-surface-1 px-4 py-3"
-					>
-						<div class="flex flex-wrap items-center justify-between gap-3">
-							<div class="flex flex-wrap items-center gap-1">
-								<template
-									v-for="(segment, index) in jarGroup.segments"
-									:key="`${jarGroup.key}-${index}`"
-								>
-									<span
-										class="font-mono text-sm"
-										:class="
-											index === jarGroup.segments.length - 1
-												? 'font-semibold text-contrast'
-												: 'text-secondary'
-										"
-									>
-										{{ segment }}
-									</span>
-									<ChevronRightIcon
-										v-if="index < jarGroup.segments.length - 1"
-										class="size-4 text-secondary"
-									/>
-								</template>
-							</div>
-
-							<div
-								v-if="getJarRemainingUnmarkedCount(jarGroup) > 0"
-								class="detail-verdict-buttons"
-								role="group"
-								aria-label="Remaining JAR issue actions"
-							>
-								<span class="remaining-verdict-label">
-									Remaining issues ({{ getJarRemainingUnmarkedCount(jarGroup) }})
-								</span>
-								<button
-									v-tooltip="'Remaining globally safe'"
-									class="detail-verdict-button detail-verdict-button--safe"
-									aria-label="Remaining globally safe"
-									:disabled="
-										isBatchUpdating || getRemainingGlobalDetailCount(getJarFlags(jarGroup)) === 0
-									"
-									@click="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'safe')"
-								>
-									<CheckCheckIcon aria-hidden="true" />
-								</button>
-								<button
-									v-tooltip="'Remaining safe'"
-									class="detail-verdict-button detail-verdict-button--safe"
-									aria-label="Remaining safe"
-									:disabled="isBatchUpdating"
-									@click="batchMarkRemainingInJar(jarGroup, 'safe')"
-								>
-									<CheckIcon aria-hidden="true" />
-								</button>
-								<button
-									v-tooltip="'Remaining malware'"
-									class="detail-verdict-button detail-verdict-button--unsafe"
-									aria-label="Remaining malware"
-									:disabled="isBatchUpdating"
-									@click="batchMarkRemainingInJar(jarGroup, 'unsafe')"
-								>
-									<BanIcon aria-hidden="true" />
-								</button>
-								<button
-									v-tooltip="'Remaining globally unsafe'"
-									class="detail-verdict-button detail-verdict-button--unsafe"
-									aria-label="Remaining globally unsafe"
-									:disabled="
-										isBatchUpdating || getRemainingGlobalDetailCount(getJarFlags(jarGroup)) === 0
-									"
-									@click="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'unsafe')"
-								>
-									<ShieldAlertIcon aria-hidden="true" />
-								</button>
-							</div>
-						</div>
-					</div>
-
-					<div
-						v-for="classItem in jarGroup.classes"
-						:key="classItem.key"
-						class="border-b border-solid border-surface-1 last:border-b-0"
-					>
-						<div
-							class="flex cursor-pointer items-center justify-between p-4 transition-colors duration-200 hover:bg-surface-4"
-							@click="toggleClass(classItem)"
-						>
-							<div class="my-auto flex items-center gap-2">
-								<IconButton
-									type="quiet"
-									label="Toggle details"
-									class="transition-transform"
-									:class="{ 'rotate-180': expandedClasses.has(classItem.key) }"
-								>
-									<ChevronDownIcon class="h-5 w-5 text-contrast" />
-								</IconButton>
-
-								<span v-tooltip="classItem.filePath" class="font-mono font-semibold">{{
-									truncateMiddle(classItem.filePath)
-								}}</span>
-
-								<div
-									class="rounded-full border-solid px-2.5 py-1"
-									:class="getSeverityBadgeColor(getHighestSeverityInClass(classItem.flags))"
-								>
-									<span class="text-sm font-medium">{{
-										capitalizeString(getHighestSeverityInClass(classItem.flags))
-									}}</span>
-								</div>
-
-								<div
-									class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
-									:class="
-										getMarkedFlagsCount(classItem.flags) === classItem.flags.length
-											? 'border-green/60 bg-highlight-green text-green'
-											: 'border-red/60 bg-highlight-red text-red'
-									"
-								>
-									<CheckIcon
-										v-if="getMarkedFlagsCount(classItem.flags) === classItem.flags.length"
-										class="size-4"
-									/>
-									{{ getMarkedFlagsCount(classItem.flags) }}/{{ classItem.flags.length }} flags
-								</div>
-
-								<Transition name="fade">
-									<div
-										v-if="isClassLoadingSource(classItem)"
-										class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
-									>
-										<span class="flex items-center gap-1.5 text-sm font-medium text-secondary">
-											<LoaderCircleIcon class="size-4 animate-spin" />
-											Loading source...
-										</span>
-									</div>
-								</Transition>
-							</div>
-						</div>
-
-						<Collapsible :collapsed="!expandedClasses.has(classItem.key)">
-							<div
-								v-if="expandedClasses.has(classItem.key)"
-								class="mt-2 flex flex-col gap-2 px-4 pb-4"
-							>
-								<div
-									v-for="flag in classItem.flags"
-									:id="getDetailElementId(flag.detail.id)"
-									:key="`${flag.issueId}-${flag.detail.id}`"
-									class="flex flex-col gap-2 rounded-lg border-[1px] border-b border-solid border-surface-5 bg-surface-3 py-2 pl-4 last:border-b-0"
-									:class="{
-										'!border-brand bg-brand-highlight': props.focusedDetailId === flag.detail.id,
-									}"
-								>
-									<div class="grid grid-cols-[1fr_auto] items-center">
-										<div
-											class="flex items-center gap-2"
-											:class="{
-												'opacity-50': isPreReviewed(flag.detail.id, flag.detail.status),
-											}"
-										>
-											<span class="text-base font-semibold text-contrast">{{
-												flag.issueType.replace(/_/g, ' ')
-											}}</span>
-											<div
-												class="rounded-full border-solid px-2.5 py-1"
-												:class="getSeverityBadgeColor(flag.detail.severity)"
-											>
-												<span class="text-sm font-medium">{{
-													capitalizeString(flag.detail.severity)
-												}}</span>
-											</div>
-										</div>
-
-										<div class="detail-verdict-action-groups">
-											<div
-												class="detail-verdict-buttons"
-												role="group"
-												aria-label="Trace verdict actions"
-											>
-												<button
-													v-tooltip="getDetailActionTooltip(flag.detail, 'safe', 'global')"
-													class="detail-verdict-button detail-verdict-button--safe"
-													:class="{
-														'detail-verdict-button--selected': isDetailActionSelected(
-															flag.detail,
-															'safe',
-															'global',
-														),
-													}"
-													aria-label="Global pass"
-													:disabled="
-														!canUpdateGlobalDetail(flag.detail) ||
-														updatingGlobalDetailKeys.has(flag.detail.key) ||
-														updatingDetails.has(flag.detail.id)
-													"
-													@click="updateGlobalDetailAction(flag.detail, 'safe')"
-												>
-													<CheckCheckIcon aria-hidden="true" />
-												</button>
-
-												<button
-													v-tooltip="getDetailActionTooltip(flag.detail, 'safe', 'local')"
-													class="detail-verdict-button detail-verdict-button--safe"
-													:class="{
-														'detail-verdict-button--selected': isDetailActionSelected(
-															flag.detail,
-															'safe',
-															'local',
-														),
-													}"
-													aria-label="Local pass"
-													:disabled="
-														updatingDetails.has(flag.detail.id) ||
-														updatingGlobalDetailKeys.has(flag.detail.key)
-													"
-													@click="updateLocalDetailAction(flag.detail, 'safe')"
-												>
-													<CheckIcon aria-hidden="true" />
-												</button>
-
-												<button
-													v-tooltip="getDetailActionTooltip(flag.detail, 'malware', 'local')"
-													class="detail-verdict-button detail-verdict-button--unsafe"
-													:class="{
-														'detail-verdict-button--selected': isDetailActionSelected(
-															flag.detail,
-															'malware',
-															'local',
-														),
-													}"
-													aria-label="Local fail"
-													:disabled="
-														updatingDetails.has(flag.detail.id) ||
-														updatingGlobalDetailKeys.has(flag.detail.key)
-													"
-													@click="updateLocalDetailAction(flag.detail, 'malware')"
-												>
-													<BanIcon aria-hidden="true" />
-												</button>
-
-												<button
-													v-tooltip="getDetailActionTooltip(flag.detail, 'malware', 'global')"
-													class="detail-verdict-button detail-verdict-button--unsafe"
-													:class="{
-														'detail-verdict-button--selected': isDetailActionSelected(
-															flag.detail,
-															'malware',
-															'global',
-														),
-													}"
-													aria-label="Global fail"
-													:disabled="
-														!canUpdateGlobalDetail(flag.detail) ||
-														updatingGlobalDetailKeys.has(flag.detail.key) ||
-														updatingDetails.has(flag.detail.id)
-													"
-													@click="updateGlobalDetailAction(flag.detail, 'malware')"
-												>
-													<ShieldAlertIcon aria-hidden="true" />
-												</button>
-											</div>
-										</div>
-									</div>
-									<div
-										v-if="flag.detail.data && Object.keys(flag.detail.data).length > 0"
-										class="flex flex-wrap gap-x-4 gap-y-1 pr-4 text-sm"
-									>
-										<div
-											v-for="[key, value] in Object.entries(flag.detail.data).sort(([a], [b]) =>
-												a.localeCompare(b),
-											)"
-											:key="key"
-											class="flex items-center gap-1.5"
-										>
-											<span class="text-secondary">{{ key }}:</span>
-											<a
-												v-if="typeof value === 'string' && value.startsWith('http')"
-												:href="value"
-												target="_blank"
-												rel="noopener noreferrer"
-												class="text-brand-blue hover:underline"
-											>
-												{{ value }}
-											</a>
-											<span v-else class="font-mono text-contrast">{{ value }}</span>
-										</div>
-									</div>
-								</div>
-
-								<div
-									v-if="getHighlightedClassSource(classItem).length > 0"
-									class="relative inset-0 overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
-								>
-									<IconButton
-										v-tooltip="`Copy code`"
-										type="quiet"
-										:label="`Copy code`"
-										class="!absolute right-2 top-2 border-[1px]"
-										@click="copyToClipboard(getClassDecompiledSource(classItem)!, classItem.key)"
-									>
-										<CopyIcon v-if="!showCopyFeedback.get(classItem.key)" />
-										<CheckIcon v-else />
-									</IconButton>
-
-									<div class="overflow-x-auto bg-surface-3 py-3">
-										<div
-											v-for="(line, n) in getHighlightedClassSource(classItem)"
-											:key="n"
-											class="flex font-mono text-[13px] leading-[1.6]"
-										>
-											<div
-												class="select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
-												style="min-width: 3.5rem"
-											>
-												{{ n + 1 }}
-											</div>
-											<div class="flex-1 px-4 py-0 text-primary">
-												<pre v-html="line || ' '"></pre>
-											</div>
-										</div>
-									</div>
-								</div>
-								<div
-									v-else-if="isClassLoadingSource(classItem)"
-									class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
-								>
-									<p class="flex items-center gap-2 text-sm text-secondary">
-										<LoaderCircleIcon class="size-4 animate-spin" />
-										Loading source...
-									</p>
-								</div>
-								<div
-									v-else
-									class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
-								>
-									<p class="text-sm text-secondary">
-										Source code not available or failed to decompile for this file.
-									</p>
-								</div>
-							</div>
-						</Collapsible>
-					</div>
-				</div>
-			</template>
+		<div class="bg-surface-2">
+			<TechRevThreadTab
+				v-if="currentTab === 'Thread'"
+				v-model:collapsed="isThreadCollapsed"
+				:project="item.project"
+				:project-owner="item.project_owner"
+				:thread="item.thread"
+				:reports="item.reports"
+				:disable-collapsing="disableCollapsing"
+				@refetch="emit('refetch')"
+				@mark-complete="emit('markComplete', $event)"
+				@show-malicious-summary="emit('showMaliciousSummary', $event)"
+				@status-changed="projectStatus = $event"
+			/>
+			<TechRevFilesTab
+				v-else-if="currentTab === 'Files'"
+				:reports="item.reports"
+				:project="item.project"
+				@view-flags="viewFileFlags"
+			/>
+			<TechRevFileDetailTab
+				v-else-if="currentTab === 'File' && selectedFile"
+				:file="selectedFile"
+				:focused-detail-id="focusedDetailId"
+				:loading-issues="loadingIssues"
+				:decompiled-sources="decompiledSources"
+				@refetch="emit('refetch')"
+				@load-issue-sources="emit('loadIssueSources', $event)"
+				@all-flags-resolved="backToFileList"
+			/>
 		</div>
 	</div>
 </template>
-
-<style scoped>
-pre {
-	all: unset;
-	display: inline;
-	white-space: pre;
-}
-
-.fade-enter-active {
-	transition: opacity 0.3s ease-in;
-	transition-delay: 0.2s;
-}
-
-.fade-leave-active {
-	transition: opacity 0.15s ease-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.detail-verdict-action-groups {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.5rem;
-	margin-inline-end: 0.5rem;
-}
-
-.detail-verdict-buttons {
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	border: 1px solid var(--surface-5);
-	border-radius: var(--radius-md);
-	background: var(--surface-3);
-}
-
-.remaining-verdict-label {
-	padding-inline: 0.75rem;
-	font-size: 0.875rem;
-	font-weight: 600;
-	white-space: nowrap;
-	color: var(--color-secondary);
-}
-
-.detail-verdict-button {
-	display: flex;
-	width: 2rem;
-	height: 2rem;
-	align-items: center;
-	justify-content: center;
-	border: 0;
-	border-left: 1px solid var(--surface-5);
-	background: transparent;
-	padding: 0;
-	cursor: pointer;
-	transition:
-		background-color 0.15s ease-in-out,
-		filter 0.15s ease-in-out;
-}
-
-.detail-verdict-button:first-child {
-	border-left: 0;
-	border-start-start-radius: calc(var(--radius-md) - 1px);
-	border-end-start-radius: calc(var(--radius-md) - 1px);
-}
-
-.detail-verdict-button:last-child {
-	border-start-end-radius: calc(var(--radius-md) - 1px);
-	border-end-end-radius: calc(var(--radius-md) - 1px);
-}
-
-.detail-verdict-button:hover,
-.detail-verdict-button:focus-visible {
-	background: var(--surface-4);
-}
-
-.detail-verdict-button--selected {
-	background: var(--color-green-bg);
-	box-shadow: inset 0 0 0 1px var(--color-green);
-}
-
-.detail-verdict-button--selected:hover,
-.detail-verdict-button--selected:focus-visible {
-	background: var(--color-green-bg);
-}
-
-.detail-verdict-button:focus-visible {
-	outline: none;
-	box-shadow: inset 0 0 0 2px var(--color-brand);
-}
-
-.detail-verdict-button--selected:focus-visible {
-	box-shadow: inset 0 0 0 2px var(--color-green);
-}
-
-.detail-verdict-button:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-}
-
-.detail-verdict-button svg {
-	width: 1rem;
-	height: 1rem;
-}
-
-.detail-verdict-button--safe {
-	color: var(--color-green);
-}
-
-.detail-verdict-button--unsafe {
-	color: var(--color-red);
-}
-</style>
diff --git a/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue b/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
index 7a9f3ddded..7448b45ce6 100644
--- a/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
+++ b/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
@@ -363,7 +363,13 @@ function formattedLoader(version: SharedInstanceReportVersion) {
 						:key="instance.id"
 						class="flex min-w-0 items-center gap-2 rounded-xl bg-surface-2 p-3"
 					>
-						<Avatar :src="instance.icon_url" :tint-by="instance.id" size="2.5rem" no-shadow />
+						<Avatar
+							:src="instance.icon_url"
+							:tint-by="instance.id"
+							size="2.5rem"
+							no-shadow
+							pad-transparent-corners
+						/>
 						<div class="flex min-w-0 flex-1 flex-col">
 							<div class="flex min-w-0 items-center gap-1.5">
 								<span class="truncate font-semibold text-contrast">{{ instance.name }}</span>
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 7f50acc162..1d74ec9155 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -1105,7 +1105,7 @@ if (!persistedState) {
 			if (thread.value === undefined) return
 			if (currentStage.value === initialAutoStage) {
 				const firstValid = findFirstValidStage()
-				console.log('[DEBUG settle]', {
+				debug('settle', {
 					initialAutoStage,
 					currentStage: currentStage.value,
 					firstValid,
@@ -1118,7 +1118,7 @@ if (!persistedState) {
 					markStageVisited(currentStageObj.value.id)
 				}
 			} else {
-				console.log('[DEBUG settle] currentStage already changed before settle', {
+				debug('settle: currentStage already changed before settle', {
 					initialAutoStage,
 					currentStage: currentStage.value,
 				})
@@ -1143,7 +1143,7 @@ const projectUrlType = computed(() =>
 let lastSyncedStageTarget: string | null = null
 function syncStageUrl(stage: StageNode | undefined) {
 	const navigate = stage?._navigate
-	console.log('[DEBUG syncStageUrl]', { stageId: stage?.id, navigate, lastSyncedStageTarget })
+	debug('syncStageUrl', { stageId: stage?.id, navigate, lastSyncedStageTarget })
 	if (navigate === undefined) return
 	const target = `/${projectUrlType.value}/${projectV2.value.slug}${navigate}`
 	if (target === lastSyncedStageTarget) return
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue
new file mode 100644
index 0000000000..7c4d154f51
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue
@@ -0,0 +1,824 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	CheckIcon,
+	ChevronDownIcon,
+	ChevronRightIcon,
+	CopyIcon,
+	LoaderCircleIcon,
+} from '@modrinth/assets'
+import { Collapsible, IconButton, injectNotificationManager, Toggle } from '@modrinth/ui'
+import { capitalizeString, highlightCodeLines } from '@modrinth/utils'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+
+import {
+	canUpdateGlobalDetail,
+	getFileDetailCount,
+	getSeverityBadgeColor,
+	severityOrder,
+	truncateMiddle,
+	verdictToDecision,
+} from './helpers'
+import TechRevVerdictButtons from './TechRevVerdictButtons.vue'
+import type { ClassGroup, FlagItem, FlattenedFileReport, JarGroup } from './types'
+import { injectTechReviewDecisions } from './use-tech-review-decisions'
+
+const props = defineProps<{
+	file: FlattenedFileReport
+	focusedDetailId?: string | null
+	loadingIssues: Set<string>
+	decompiledSources: Map<string, string>
+}>()
+
+const emit = defineEmits<{
+	refetch: []
+	loadIssueSources: [issueIds: string[]]
+	allFlagsResolved: []
+}>()
+
+const { addNotification } = injectNotificationManager()
+const {
+	updatingDetails,
+	updatingGlobalDetailKeys,
+	getDetailDecision,
+	isPreReviewed,
+	getFileMarkedCount,
+	getMarkedFlagsCount,
+	isDetailGloballyPassed,
+	isDetailGloballyResolved,
+	applyDecisionToRelatedDetails,
+	getToggledDetailVerdict,
+	updateIssueDetails,
+	updateGlobalIssueDetails,
+} = injectTechReviewDecisions()
+
+const hideGloballyPassed = ref(true)
+const isBatchUpdating = ref(false)
+const expandedClasses = reactive<Set<string>>(new Set())
+const autoExpandedFileIds = reactive<Set<string>>(new Set())
+const showCopyFeedback = reactive<Map<string, boolean>>(new Map())
+const highlightedSourceCache = reactive<Map<string, { source: string; lines: string[] }>>(new Map())
+const LAZY_LOAD_CLASS_SOURCE_MINIMUM = 2
+
+const globallyPassedCount = computed(() => {
+	return props.file.issues.reduce(
+		(count, issue) => count + issue.details.filter(isDetailGloballyPassed).length,
+		0,
+	)
+})
+
+const globallyResolvedCount = computed(() => {
+	return props.file.issues.reduce(
+		(count, issue) => count + issue.details.filter(isDetailGloballyResolved).length,
+		0,
+	)
+})
+
+const remainingUnmarkedCount = computed(() => {
+	return getFileDetailCount(props.file) - getFileMarkedCount(props.file)
+})
+
+const selectedFileFlags = computed<FlagItem[]>(() =>
+	props.file.issues.flatMap((issue) =>
+		issue.details.map((detail) => ({
+			issueId: issue.id,
+			issueType: issue.issue_type,
+			detail,
+		})),
+	),
+)
+
+function getJarFlags(jarGroup: JarGroup): FlagItem[] {
+	return jarGroup.classes.flatMap((classItem) => classItem.flags)
+}
+
+function getJarRemainingUnmarkedCount(jarGroup: JarGroup): number {
+	const flags = getJarFlags(jarGroup)
+	return flags.length - getMarkedFlagsCount(flags)
+}
+
+function getRemainingGlobalDetailCount(flags: FlagItem[]): number {
+	return new Set(
+		flags
+			.filter(
+				(flag) =>
+					getDetailDecision(flag.detail.id, flag.detail.status) === 'pending' &&
+					canUpdateGlobalDetail(flag.detail),
+			)
+			.map((flag) => flag.detail.key),
+	).size
+}
+
+function maybeReturnToFileList() {
+	if (getFileMarkedCount(props.file) === getFileDetailCount(props.file)) {
+		emit('allFlagsResolved')
+	}
+}
+
+async function batchMarkRemainingGlobally(flags: FlagItem[], verdict: 'safe' | 'unsafe') {
+	if (isBatchUpdating.value) return
+
+	const detailsByKey = new Map(
+		flags
+			.filter(
+				(flag) =>
+					getDetailDecision(flag.detail.id, flag.detail.status) === 'pending' &&
+					canUpdateGlobalDetail(flag.detail),
+			)
+			.map((flag) => [flag.detail.key, flag.detail]),
+	)
+	const details = [...detailsByKey.values()]
+
+	if (details.length === 0) return
+
+	isBatchUpdating.value = true
+	try {
+		await updateGlobalIssueDetails(details.map((detail) => ({ detail_key: detail.key, verdict })))
+
+		applyDecisionToRelatedDetails(
+			details.map((detail) => detail.id),
+			verdictToDecision(verdict),
+			'global',
+		)
+
+		addNotification({
+			type: 'success',
+			title: `Globally marked ${details.length} trace keys as ${verdict}`,
+			text: `All remaining eligible traces have been globally marked as ${
+				verdict === 'safe' ? 'false positives' : 'malicious'
+			}.`,
+		})
+
+		maybeReturnToFileList()
+		emit('refetch')
+	} catch (error) {
+		console.error('Failed to batch update global traces:', error)
+		addNotification({
+			type: 'error',
+			title: 'Global batch update failed',
+			text: 'An error occurred while globally updating traces.',
+		})
+	} finally {
+		isBatchUpdating.value = false
+	}
+}
+
+async function batchMarkRemaining(flags: FlagItem[], verdict: 'safe' | 'unsafe', inJar = false) {
+	if (isBatchUpdating.value) return
+
+	const detailIds = flags
+		.filter((flag) => getDetailDecision(flag.detail.id, flag.detail.status) === 'pending')
+		.map((flag) => flag.detail.id)
+
+	if (detailIds.length === 0) return
+
+	isBatchUpdating.value = true
+	try {
+		await updateIssueDetails(detailIds.map((detail_id) => ({ detail_id, verdict })))
+		applyDecisionToRelatedDetails(detailIds, verdictToDecision(verdict), 'local')
+
+		addNotification({
+			type: 'success',
+			title: `Marked ${detailIds.length} traces as ${verdict}`,
+			text: `All remaining traces${inJar ? ' in this JAR' : ''} have been marked as ${
+				verdict === 'safe' ? 'false positives' : 'malicious'
+			}.`,
+		})
+
+		maybeReturnToFileList()
+		emit('refetch')
+	} catch (error) {
+		console.error('Failed to batch update:', error)
+		addNotification({
+			type: 'error',
+			title: 'Batch update failed',
+			text: 'An error occurred while updating traces.',
+		})
+	} finally {
+		isBatchUpdating.value = false
+	}
+}
+
+function updateLocalDetailAction(
+	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+	decision: 'safe' | 'malware',
+) {
+	return updateDetailStatus(detail.id, getToggledDetailVerdict(detail, decision, 'local'))
+}
+
+function updateGlobalDetailAction(
+	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+	decision: 'safe' | 'malware',
+) {
+	return updateGlobalDetailStatus(detail, getToggledDetailVerdict(detail, decision, 'global'))
+}
+
+async function updateDetailStatus(
+	detailId: string,
+	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+) {
+	const detail = props.file.issues.flatMap((issue) => issue.details).find((d) => d.id === detailId)
+	const priorDecision = detail ? getDetailDecision(detail.id, detail.status) : 'pending'
+
+	updatingDetails.add(detailId)
+
+	const previousMarkedCount = getFileMarkedCount(props.file)
+
+	try {
+		await updateIssueDetails([{ detail_id: detailId, verdict }])
+
+		const { otherMatchedCount } = applyDecisionToRelatedDetails(
+			[detailId],
+			verdictToDecision(verdict),
+			'local',
+		)
+
+		if (verdict !== 'pending' && priorDecision === 'pending') {
+			for (const classGroup of groupedByClass.value) {
+				const hasThisDetail = classGroup.flags.some((f) => f.detail.id === detailId)
+				if (hasThisDetail && getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
+					expandedClasses.delete(classGroup.key)
+					break
+				}
+			}
+		}
+
+		if (verdict !== 'pending') {
+			const markedCount = getFileMarkedCount(props.file)
+			const totalCount = getFileDetailCount(props.file)
+			if (previousMarkedCount != markedCount && markedCount === totalCount) {
+				emit('allFlagsResolved')
+			}
+		}
+
+		const otherText =
+			otherMatchedCount > 0
+				? ` (${otherMatchedCount} other trace${otherMatchedCount === 1 ? '' : 's'} also marked)`
+				: ''
+
+		if (verdict === 'pending') {
+			addNotification({
+				type: 'success',
+				title: 'Local trace verdict unset',
+				text: `The project-local verdict has been removed.${otherText}`,
+			})
+		} else if (verdict === 'safe') {
+			addNotification({
+				type: 'success',
+				title: 'Issue marked as pass',
+				text: `This issue has been marked as a false positive.${otherText}`,
+			})
+		} else {
+			addNotification({
+				type: 'success',
+				title: 'Issue marked as fail',
+				text: `This issue has been flagged as malicious.${otherText}`,
+			})
+		}
+
+		emit('refetch')
+	} catch (error) {
+		console.error('Failed to update detail status:', error)
+		addNotification({
+			type: 'error',
+			title: 'Failed to update issue',
+			text: 'An error occurred while updating the issue status.',
+		})
+	} finally {
+		updatingDetails.delete(detailId)
+	}
+}
+
+async function updateGlobalDetailStatus(
+	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+) {
+	if (!canUpdateGlobalDetail(detail)) {
+		addNotification({
+			type: 'error',
+			title: 'Global update unavailable',
+			text: 'Generated trace keys cannot be marked globally.',
+		})
+		return
+	}
+
+	updatingGlobalDetailKeys.add(detail.key)
+
+	const previousMarkedCount = getFileMarkedCount(props.file)
+
+	try {
+		await updateGlobalIssueDetails([{ detail_key: detail.key, verdict }])
+
+		const { otherMatchedCount } = applyDecisionToRelatedDetails(
+			[detail.id],
+			verdictToDecision(verdict),
+			'global',
+		)
+
+		if (verdict !== 'pending') {
+			for (const classGroup of groupedByClass.value) {
+				if (getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
+					expandedClasses.delete(classGroup.key)
+				}
+			}
+		}
+
+		if (verdict !== 'pending') {
+			const markedCount = getFileMarkedCount(props.file)
+			const totalCount = getFileDetailCount(props.file)
+			if (previousMarkedCount != markedCount && markedCount === totalCount) {
+				emit('allFlagsResolved')
+			}
+		}
+
+		const otherText =
+			otherMatchedCount > 0
+				? ` (${otherMatchedCount} other trace${otherMatchedCount === 1 ? '' : 's'} also marked in this project)`
+				: ''
+
+		if (verdict === 'pending') {
+			addNotification({
+				type: 'success',
+				title: 'Global trace verdict unset',
+				text: `The global verdict for this trace key has been removed.${otherText}`,
+			})
+		} else {
+			addNotification({
+				type: 'success',
+				title:
+					verdict === 'safe' ? 'Trace globally marked as pass' : 'Trace globally marked as fail',
+				text:
+					verdict === 'safe'
+						? `This trace key has been marked as a global false positive.${otherText}`
+						: `This trace key has been globally flagged as malicious.${otherText}`,
+			})
+		}
+
+		emit('refetch')
+	} catch (error) {
+		console.error('Failed to update global detail status:', error)
+		addNotification({
+			type: 'error',
+			title: 'Failed to update global trace',
+			text: 'An error occurred while updating the global trace status.',
+		})
+	} finally {
+		updatingGlobalDetailKeys.delete(detail.key)
+	}
+}
+
+function splitJarSegments(jar: string | null, currentFileName: string | null): string[] {
+	if (!jar) return []
+	const segments = jar
+		.split(/[/#]/)
+		.map((s) => decodeURIComponent(s.trim()))
+		.filter((s) => s.length > 0)
+	if (segments.length > 0 && currentFileName && segments[0] === currentFileName) {
+		return segments.slice(1)
+	}
+	return segments
+}
+
+const groupedByClass = computed<ClassGroup[]>(() => {
+	const classMap = new Map<string, ClassGroup>()
+
+	for (const issue of props.file.issues) {
+		for (const detail of issue.details) {
+			if (hideGloballyPassed.value && isDetailGloballyPassed(detail)) {
+				continue
+			}
+
+			const classKey = `${detail.jar ?? ''}::${detail.file_path}`
+			if (!classMap.has(classKey)) {
+				classMap.set(classKey, {
+					key: classKey,
+					jar: detail.jar ?? null,
+					filePath: detail.file_path,
+					flags: [],
+				})
+			}
+			classMap.get(classKey)!.flags.push({
+				issueId: issue.id,
+				issueType: issue.issue_type,
+				detail,
+			})
+		}
+	}
+
+	for (const classGroup of classMap.values()) {
+		classGroup.flags.sort((a, b) => {
+			const aPreReviewed = isPreReviewed(a.detail.id, a.detail.status)
+			const bPreReviewed = isPreReviewed(b.detail.id, b.detail.status)
+			return aPreReviewed === bPreReviewed ? 0 : aPreReviewed ? 1 : -1
+		})
+	}
+
+	return Array.from(classMap.values())
+})
+
+const groupedByJar = computed<JarGroup[]>(() => {
+	const jarMap = new Map<string, JarGroup>()
+
+	for (const classItem of groupedByClass.value) {
+		const jarKey = classItem.jar ?? ''
+		if (!jarMap.has(jarKey)) {
+			jarMap.set(jarKey, {
+				key: jarKey,
+				jar: classItem.jar,
+				segments: splitJarSegments(classItem.jar, props.file.file_name),
+				classes: [],
+			})
+		}
+		jarMap.get(jarKey)!.classes.push(classItem)
+	}
+
+	return Array.from(jarMap.values()).sort((a, b) => {
+		const aRoot = a.segments.length === 0
+		const bRoot = b.segments.length === 0
+		return aRoot === bRoot ? 0 : aRoot ? -1 : 1
+	})
+})
+
+function getHighestSeverityInClass(flags: FlagItem[]): Labrinth.TechReview.Internal.DelphiSeverity {
+	return flags.reduce(
+		(highest, flag) =>
+			severityOrder[flag.detail.severity] > severityOrder[highest] ? flag.detail.severity : highest,
+		'low' as Labrinth.TechReview.Internal.DelphiSeverity,
+	)
+}
+
+function getClassDecompiledSource(classItem: ClassGroup): string | undefined {
+	for (const flag of classItem.flags) {
+		const source = props.decompiledSources.get(flag.detail.id)
+		if (source) return source
+	}
+	return undefined
+}
+
+function getHighlightedClassSource(classItem: ClassGroup): string[] {
+	const source = getClassDecompiledSource(classItem)
+	if (!source) return []
+
+	const cached = highlightedSourceCache.get(classItem.key)
+	if (cached?.source === source) return cached.lines
+
+	const lines = highlightCodeLines(source, 'java')
+	highlightedSourceCache.set(classItem.key, { source, lines })
+	return lines
+}
+
+function isClassLoadingSource(classItem: ClassGroup): boolean {
+	return classItem.flags.some((flag) => props.loadingIssues.has(flag.issueId))
+}
+
+function loadClassSources(classItem: ClassGroup) {
+	const issueIds = [...new Set(classItem.flags.map((flag) => flag.issueId))]
+	if (issueIds.length > 0) {
+		emit('loadIssueSources', issueIds)
+	}
+}
+
+function expandClass(classItem: ClassGroup) {
+	if (expandedClasses.has(classItem.key)) return
+	expandedClasses.add(classItem.key)
+	loadClassSources(classItem)
+}
+
+function toggleClass(classItem: ClassGroup) {
+	if (expandedClasses.has(classItem.key)) {
+		expandedClasses.delete(classItem.key)
+	} else {
+		expandClass(classItem)
+	}
+}
+
+async function copyToClipboard(code: string, detailId: string) {
+	try {
+		await navigator.clipboard.writeText(code)
+		showCopyFeedback.set(detailId, true)
+		setTimeout(() => {
+			showCopyFeedback.delete(detailId)
+		}, 2000)
+	} catch (error) {
+		console.error('Failed to copy code:', error)
+	}
+}
+
+async function focusDetail(detailId: string) {
+	await nextTick()
+
+	const classItem = groupedByClass.value.find((group) =>
+		group.flags.some((flag) => flag.detail.id === detailId),
+	)
+
+	if (classItem) {
+		expandClass(classItem)
+	}
+
+	await nextTick()
+
+	if (!import.meta.client) return
+
+	window.requestAnimationFrame(() => {
+		document.getElementById(`tech-review-detail-${detailId}`)?.scrollIntoView({
+			behavior: 'smooth',
+			block: 'center',
+		})
+	})
+}
+
+watch(
+	[() => props.focusedDetailId, () => props.file.id],
+	([detailId]) => {
+		if (detailId) {
+			focusDetail(detailId)
+		}
+	},
+	{ immediate: true },
+)
+
+watch(
+	[() => props.file.id, groupedByClass],
+	([fileId, classes]) => {
+		if (!fileId || classes.length === 0 || autoExpandedFileIds.has(fileId)) return
+
+		autoExpandedFileIds.add(fileId)
+
+		if (classes.length < LAZY_LOAD_CLASS_SOURCE_MINIMUM) {
+			for (const classItem of classes) {
+				expandClass(classItem)
+			}
+		}
+	},
+	{ immediate: true },
+)
+</script>
+
+<template>
+	<div
+		v-if="getFileDetailCount(file) > 0"
+		class="flex flex-wrap items-center justify-between gap-3 p-4"
+	>
+		<TechRevVerdictButtons
+			v-if="remainingUnmarkedCount > 0"
+			variant="remaining"
+			:remaining-count="remainingUnmarkedCount"
+			:global-disabled="isBatchUpdating || getRemainingGlobalDetailCount(selectedFileFlags) === 0"
+			:local-disabled="isBatchUpdating"
+			@global-safe="batchMarkRemainingGlobally(selectedFileFlags, 'safe')"
+			@local-safe="batchMarkRemaining(selectedFileFlags, 'safe')"
+			@local-unsafe="batchMarkRemaining(selectedFileFlags, 'unsafe')"
+			@global-unsafe="batchMarkRemainingGlobally(selectedFileFlags, 'unsafe')"
+		/>
+		<label class="ml-auto flex cursor-pointer items-center gap-3 text-sm">
+			<span class="text-right text-secondary">
+				Hide globally passed
+				<span class="text-tertiary block text-xs">
+					{{ globallyResolvedCount }}/{{ getFileDetailCount(file) }} traces globally resolved
+				</span>
+			</span>
+			<Toggle v-model="hideGloballyPassed" :disabled="globallyPassedCount === 0" small />
+		</label>
+	</div>
+	<div v-for="jarGroup in groupedByJar" :key="jarGroup.key" class="flex flex-col gap-1 px-4 pb-4">
+		<div v-if="jarGroup.segments.length > 0" class="my-2">
+			<div class="flex flex-wrap items-center justify-between gap-3">
+				<div class="flex flex-wrap items-center gap-1">
+					<template v-for="(segment, index) in jarGroup.segments" :key="`${jarGroup.key}-${index}`">
+						<span
+							class="font-mono text-sm"
+							:class="
+								index === jarGroup.segments.length - 1
+									? 'font-semibold text-contrast'
+									: 'text-secondary'
+							"
+						>
+							{{ segment }}
+						</span>
+						<ChevronRightIcon
+							v-if="index < jarGroup.segments.length - 1"
+							class="size-4 text-secondary"
+						/>
+					</template>
+				</div>
+
+				<TechRevVerdictButtons
+					v-if="getJarRemainingUnmarkedCount(jarGroup) > 0"
+					variant="remaining"
+					jar
+					:remaining-count="getJarRemainingUnmarkedCount(jarGroup)"
+					:global-disabled="
+						isBatchUpdating || getRemainingGlobalDetailCount(getJarFlags(jarGroup)) === 0
+					"
+					:local-disabled="isBatchUpdating"
+					@global-safe="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'safe')"
+					@local-safe="batchMarkRemaining(getJarFlags(jarGroup), 'safe', true)"
+					@local-unsafe="batchMarkRemaining(getJarFlags(jarGroup), 'unsafe', true)"
+					@global-unsafe="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'unsafe')"
+				/>
+			</div>
+		</div>
+
+		<div
+			v-for="classItem in jarGroup.classes"
+			:key="classItem.key"
+			class="overflow-clip rounded-xl border border-solid border-surface-4"
+		>
+			<div
+				class="flex cursor-pointer items-center justify-between bg-surface-3 p-2 transition-colors duration-200 hover:bg-surface-4"
+				@click="toggleClass(classItem)"
+			>
+				<div class="my-auto flex items-center gap-2">
+					<IconButton
+						type="quiet"
+						label="Toggle details"
+						class="transition-transform"
+						:class="{ 'rotate-180': expandedClasses.has(classItem.key) }"
+					>
+						<ChevronDownIcon class="h-5 w-5 text-contrast" />
+					</IconButton>
+
+					<span v-tooltip="classItem.filePath" class="font-mono text-sm font-semibold">{{
+						truncateMiddle(classItem.filePath)
+					}}</span>
+
+					<div
+						class="rounded-full border-solid px-2.5 py-1"
+						:class="getSeverityBadgeColor(getHighestSeverityInClass(classItem.flags))"
+					>
+						<span class="text-sm font-medium">{{
+							capitalizeString(getHighestSeverityInClass(classItem.flags))
+						}}</span>
+					</div>
+
+					<div
+						class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
+						:class="
+							getMarkedFlagsCount(classItem.flags) === classItem.flags.length
+								? 'border-green/60 bg-highlight-green text-green'
+								: 'border-red/60 bg-highlight-red text-red'
+						"
+					>
+						<CheckIcon
+							v-if="getMarkedFlagsCount(classItem.flags) === classItem.flags.length"
+							class="size-4"
+						/>
+						{{ getMarkedFlagsCount(classItem.flags) }}/{{ classItem.flags.length }} flags
+					</div>
+
+					<Transition name="fade">
+						<div
+							v-if="isClassLoadingSource(classItem)"
+							class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
+						>
+							<span class="flex items-center gap-1.5 text-sm font-medium text-secondary">
+								<LoaderCircleIcon class="size-4 animate-spin" />
+								Loading source...
+							</span>
+						</div>
+					</Transition>
+				</div>
+			</div>
+
+			<Collapsible :collapsed="!expandedClasses.has(classItem.key)">
+				<div class="flex flex-col gap-2 border-0 border-t border-solid border-surface-4 p-2">
+					<div
+						v-for="flag in classItem.flags"
+						:id="`tech-review-detail-${flag.detail.id}`"
+						:key="`${flag.issueId}-${flag.detail.id}`"
+						class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 bg-surface-3 py-2 pl-4 last:border-b-0"
+						:class="{
+							'!border-brand bg-brand-highlight': focusedDetailId === flag.detail.id,
+						}"
+					>
+						<div class="grid grid-cols-[1fr_auto] items-center">
+							<div
+								class="flex items-center gap-2"
+								:class="{
+									'opacity-50': isPreReviewed(flag.detail.id, flag.detail.status),
+								}"
+							>
+								<span class="text-base font-semibold text-contrast">{{
+									flag.issueType.replace(/_/g, ' ')
+								}}</span>
+								<div
+									class="rounded-full border-solid px-2.5 py-1"
+									:class="getSeverityBadgeColor(flag.detail.severity)"
+								>
+									<span class="text-sm font-medium">{{
+										capitalizeString(flag.detail.severity)
+									}}</span>
+								</div>
+							</div>
+
+							<div class="me-2 flex items-center justify-end gap-2">
+								<TechRevVerdictButtons
+									variant="trace"
+									:detail="flag.detail"
+									@global-safe="updateGlobalDetailAction(flag.detail, 'safe')"
+									@local-safe="updateLocalDetailAction(flag.detail, 'safe')"
+									@local-unsafe="updateLocalDetailAction(flag.detail, 'malware')"
+									@global-unsafe="updateGlobalDetailAction(flag.detail, 'malware')"
+								/>
+							</div>
+						</div>
+						<div
+							v-if="flag.detail.data && Object.keys(flag.detail.data).length > 0"
+							class="flex flex-wrap gap-x-4 gap-y-1 pr-4 text-sm"
+						>
+							<div
+								v-for="[key, value] in Object.entries(flag.detail.data).sort(([a], [b]) =>
+									a.localeCompare(b),
+								)"
+								:key="key"
+								class="flex items-center gap-1.5"
+							>
+								<span class="text-secondary">{{ key }}:</span>
+								<a
+									v-if="typeof value === 'string' && value.startsWith('http')"
+									:href="value"
+									target="_blank"
+									rel="noopener noreferrer"
+									class="text-brand-blue hover:underline"
+								>
+									{{ value }}
+								</a>
+								<span v-else class="font-mono text-contrast">{{ value }}</span>
+							</div>
+						</div>
+					</div>
+
+					<div
+						v-if="getHighlightedClassSource(classItem).length > 0"
+						class="relative inset-0 overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
+					>
+						<IconButton
+							v-tooltip="`Copy code`"
+							type="quiet"
+							:label="`Copy code`"
+							class="!absolute right-2 top-2 border-[1px]"
+							@click="copyToClipboard(getClassDecompiledSource(classItem)!, classItem.key)"
+						>
+							<CopyIcon v-if="!showCopyFeedback.get(classItem.key)" />
+							<CheckIcon v-else />
+						</IconButton>
+
+						<div class="overflow-x-auto bg-surface-3 py-3">
+							<div
+								v-for="(line, n) in getHighlightedClassSource(classItem)"
+								:key="n"
+								class="flex font-mono text-[13px] leading-[1.6]"
+							>
+								<div
+									class="select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
+									style="min-width: 3.5rem"
+								>
+									{{ n + 1 }}
+								</div>
+								<div class="flex-1 px-4 py-0 text-primary">
+									<pre v-html="line || ' '"></pre>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div
+						v-else-if="isClassLoadingSource(classItem)"
+						class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
+					>
+						<p class="flex items-center gap-2 text-sm text-secondary">
+							<LoaderCircleIcon class="size-4 animate-spin" />
+							Loading source...
+						</p>
+					</div>
+					<div v-else class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4">
+						<p class="text-sm text-secondary">
+							Source code not available or failed to decompile for this file.
+						</p>
+					</div>
+				</div>
+			</Collapsible>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+pre {
+	all: unset;
+	display: inline;
+	white-space: pre;
+}
+
+.fade-enter-active {
+	transition: opacity 0.3s ease-in;
+	transition-delay: 0.2s;
+}
+
+.fade-leave-active {
+	transition: opacity 0.15s ease-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue
new file mode 100644
index 0000000000..96fccf3b42
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { CheckIcon, DownloadIcon, ExternalIcon, VersionIcon } from '@modrinth/assets'
+import { ButtonLink, useFormatBytes } from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
+import { computed } from 'vue'
+
+import {
+	getFileDetailCount,
+	getFileHighestSeverity,
+	getSeverityBadgeColor,
+	getVersionLabel,
+	getVersionPageHref,
+	truncateMiddle,
+} from './helpers'
+import type { FlattenedFileReport } from './types'
+import { injectTechReviewDecisions } from './use-tech-review-decisions'
+
+const props = defineProps<{
+	reports: FlattenedFileReport[]
+	project: {
+		id: string
+		slug?: string
+		project_types: string[]
+	}
+}>()
+
+const emit = defineEmits<{
+	viewFlags: [file: FlattenedFileReport]
+}>()
+
+const formatBytes = useFormatBytes()
+const { getFileMarkedCount } = injectTechReviewDecisions()
+
+const allFiles = computed(() => {
+	return [...props.reports].sort((a, b) => {
+		const aComplete = getFileMarkedCount(a) === getFileDetailCount(a)
+		const bComplete = getFileMarkedCount(b) === getFileDetailCount(b)
+		return aComplete === bComplete ? 0 : aComplete ? 1 : -1
+	})
+})
+</script>
+
+<template>
+	<div
+		v-for="(file, idx) in allFiles"
+		:key="idx"
+		class="flex items-center justify-between border-0 border-x border-b border-solid border-surface-3 bg-surface-2 px-4 py-3"
+		:class="{
+			'rounded-bl-2xl rounded-br-2xl': idx === allFiles.length - 1,
+			'bg-[#E8E8E8] dark:bg-[#1A1C20]': idx % 2 === 1,
+		}"
+	>
+		<div class="flex items-center gap-3">
+			<span
+				v-tooltip="file.file_name"
+				class="py-2 font-medium text-contrast"
+				:aria-label="`View flags for ${file.file_name}`"
+				tabindex="0"
+				:class="{ 'cursor-pointer hover:underline': getFileDetailCount(file) > 0 }"
+				@click="getFileDetailCount(file) > 0 && emit('viewFlags', file)"
+			>
+				{{ truncateMiddle(file.file_name, 50) }}
+			</span>
+			<div class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1">
+				<span class="text-sm font-medium text-secondary">{{ formatBytes(file.file_size) }}</span>
+			</div>
+			<div
+				v-if="getFileDetailCount(file) > 0"
+				class="rounded-full border-solid px-2.5 py-1"
+				:class="getSeverityBadgeColor(getFileHighestSeverity(file))"
+			>
+				<span class="text-sm font-medium">{{
+					capitalizeString(getFileHighestSeverity(file))
+				}}</span>
+			</div>
+			<div
+				v-if="getFileDetailCount(file) > 0"
+				class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
+				:class="
+					getFileMarkedCount(file) === getFileDetailCount(file)
+						? 'border-green/60 bg-highlight-green text-green'
+						: 'border-red/60 bg-highlight-red text-red'
+				"
+			>
+				<CheckIcon v-if="getFileMarkedCount(file) === getFileDetailCount(file)" class="size-4" />
+				{{ getFileMarkedCount(file) }}/{{ getFileDetailCount(file) }} flags
+			</div>
+			<!-- TODO: remove toString when backend supports it properly -->
+			<div
+				v-else-if="file.flag_reason.toString() === 'manual'"
+				class="border-blue/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-blue px-2.5 py-1 text-sm text-blue"
+			>
+				Manual review
+			</div>
+			<div
+				v-else
+				class="border-green/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-green px-2.5 py-1 text-sm text-green"
+			>
+				No flags
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<ButtonLink
+				type="outlined"
+				target="_blank"
+				:href="getVersionPageHref(project, file.version_id)"
+				:aria-label="`Open version ${getVersionLabel(file)}`"
+			>
+				<VersionIcon aria-hidden="true" /> {{ getVersionLabel(file) }}
+			</ButtonLink>
+			<ButtonLink
+				type="outlined"
+				target="_blank"
+				:href="`https://slicer.run/?url=${encodeURIComponent(file.download_url)}`"
+				aria-label="Open in Slicer"
+			>
+				<ExternalIcon aria-hidden="true" /> Slicer
+			</ButtonLink>
+			<ButtonLink
+				v-tooltip="`Download ${file.file_name} (${formatBytes(file.file_size)})`"
+				type="outlined"
+				:href="file.download_url"
+				:download="file.file_name"
+				tabindex="0"
+				icon-only
+				circular
+			>
+				<DownloadIcon />
+			</ButtonLink>
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue
new file mode 100644
index 0000000000..fe473219d5
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue
@@ -0,0 +1,416 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	BugIcon,
+	CheckIcon,
+	DropdownIcon,
+	EyeOffIcon,
+	ScaleIcon,
+	ShieldCheckIcon,
+	SpinnerIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/moderation'
+import {
+	Button,
+	type ButtonMenuOption,
+	CollapsibleRegion,
+	commonMessages,
+	injectModrinthClient,
+	injectNotificationManager,
+	TeleportOverflowMenu,
+	useFormatBytes,
+	useFormatDateTime,
+	useVIntl,
+} from '@modrinth/ui'
+import { capitalizeString, type ThreadMessage, type User } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed, ref } from 'vue'
+
+import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
+import ThreadView from '~/components/ui/thread/ThreadView.vue'
+
+import { severityOrder } from './helpers'
+import type { FlattenedFileReport } from './types'
+import { injectTechReviewDecisions } from './use-tech-review-decisions'
+
+const props = defineProps<{
+	project: Labrinth.Projects.v3.Project
+	projectOwner: Labrinth.TechReview.Internal.Ownership
+	thread: Labrinth.TechReview.Internal.Thread
+	reports: FlattenedFileReport[]
+	disableCollapsing?: boolean
+}>()
+
+const isThreadCollapsed = defineModel<boolean>('collapsed', { required: true })
+
+const emit = defineEmits<{
+	refetch: []
+	markComplete: [projectId: string]
+	showMaliciousSummary: [unsafeFiles: UnsafeFile[]]
+	statusChanged: [status: Labrinth.Projects.v2.ProjectStatus]
+}>()
+
+const auth = useAuthState()
+const featureFlags = useFeatureFlags()
+const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const { getDetailDecision } = injectTechReviewDecisions()
+const formatBytes = useFormatBytes()
+
+const formatDateTimeUtc = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+	hour: 'numeric',
+	minute: '2-digit',
+	timeZoneName: 'short',
+	timeZone: 'UTC',
+})
+
+const remainingMessageCount = computed(() => {
+	if (!props.thread?.messages) return 0
+	return Math.max(0, props.thread.messages.length - 1)
+})
+
+const threadExpandText = computed(() => {
+	if (remainingMessageCount.value === 0) return 'Expand'
+	if (remainingMessageCount.value === 1) return 'Show 1 more message'
+	return `Show ${remainingMessageCount.value} more messages`
+})
+
+const projectStatus = ref<Labrinth.Projects.v2.ProjectStatus>(props.project.status)
+const isLoadingStatusAction = ref(false)
+
+function isStatusActionDisabled(status: Labrinth.Projects.v2.ProjectStatus): boolean {
+	return projectStatus.value === status || isLoadingStatusAction.value
+}
+
+async function setStatus(status: Labrinth.Projects.v2.ProjectStatus) {
+	isLoadingStatusAction.value = true
+	try {
+		await client.labrinth.projects_v2.edit(props.project.id, { status })
+		emit('refetch')
+		projectStatus.value = status
+		emit('statusChanged', status)
+	} catch (err) {
+		addNotification({
+			title: formatMessage(commonMessages.errorNotificationTitle),
+			text: (err as any)?.data?.description ? (err as any).data.description : String(err),
+			type: 'error',
+		})
+	}
+	isLoadingStatusAction.value = false
+}
+
+const projectStatusActions = computed<ButtonMenuOption[]>(() => [
+	{
+		id: 'approve',
+		label: 'Approve',
+		icon: CheckIcon,
+		tone: 'green',
+		hoverFilled: true,
+		action: () => setStatus('approved'),
+		disabled: isStatusActionDisabled('approved'),
+	},
+	{
+		id: 'withhold',
+		label: 'Withhold',
+		icon: EyeOffIcon,
+		tone: 'orange',
+		hoverFilled: true,
+		action: () => setStatus('withheld'),
+		disabled: isStatusActionDisabled('withheld'),
+	},
+	{
+		id: 'send-to-review',
+		label: 'Send to review',
+		icon: ScaleIcon,
+		action: () => setStatus('processing'),
+		disabled: isStatusActionDisabled('processing'),
+	},
+	{
+		id: 'reject',
+		label: 'Reject',
+		icon: XIcon,
+		tone: 'red',
+		hoverFilled: true,
+		action: () => setStatus('rejected'),
+		disabled: isStatusActionDisabled('rejected'),
+	},
+])
+
+const techReviewContext = computed<TechReviewContext>(() => ({
+	project: props.project,
+	project_owner: props.projectOwner,
+	reports: props.reports,
+}))
+
+const threadViewRef = ref<{
+	setReplyContent: (content: string) => void
+	getReplyContent: () => string
+} | null>(null)
+
+const unsafeFiles = computed<UnsafeFile[]>(() => {
+	return props.reports
+		.filter((report) =>
+			report.issues.some((issue) =>
+				issue.details.some((detail) => getDetailDecision(detail.id, detail.status) === 'malware'),
+			),
+		)
+		.map((report) => ({
+			file: report,
+			projectName: props.project.name,
+			projectId: props.project.id,
+			userId: props.projectOwner.id,
+			username: props.projectOwner.name,
+		}))
+})
+
+const reviewSummaryPreview = computed(() => {
+	const fileDecisions = new Map<
+		string,
+		{
+			fileName: string
+			fileSize: number
+			decisions: {
+				filePath: string
+				issueType: string
+				severity: string
+				decision: 'safe' | 'malware'
+			}[]
+			maxSeverity: Labrinth.TechReview.Internal.DelphiSeverity
+		}
+	>()
+	let totalSafe = 0
+	let totalUnsafe = 0
+
+	for (const report of props.reports) {
+		if (!fileDecisions.has(report.id)) {
+			fileDecisions.set(report.id, {
+				fileName: report.file_name,
+				fileSize: report.file_size,
+				decisions: [],
+				maxSeverity: 'low',
+			})
+		}
+		const fileData = fileDecisions.get(report.id)!
+
+		for (const issue of report.issues) {
+			for (const detail of issue.details) {
+				const decision = getDetailDecision(detail.id, detail.status)
+				if (decision === 'pending') continue
+
+				fileData.decisions.push({
+					filePath: detail.file_path,
+					issueType: issue.issue_type.replace(/_/g, ' '),
+					severity: detail.severity,
+					decision,
+				})
+
+				if (severityOrder[detail.severity] > severityOrder[fileData.maxSeverity]) {
+					fileData.maxSeverity = detail.severity
+				}
+
+				if (decision === 'safe') totalSafe++
+				else totalUnsafe++
+			}
+		}
+	}
+
+	const totalDecisions = totalSafe + totalUnsafe
+	if (totalDecisions === 0) return ''
+
+	const timestamp = formatDateTimeUtc(dayjs().toDate())
+	let markdown = `## Tech Review Summary\n*${timestamp}*\n\n`
+	markdown += `<details>\n<summary>File Details (${totalSafe} safe, ${totalUnsafe} unsafe)</summary>\n\n`
+
+	for (const [, fileData] of fileDecisions) {
+		if (fileData.decisions.length === 0) continue
+
+		const fileSafe = fileData.decisions.filter((d) => d.decision === 'safe').length
+		const fileUnsafe = fileData.decisions.filter((d) => d.decision === 'malware').length
+		const fileVerdict = fileUnsafe > 0 ? 'Unsafe' : 'Safe'
+
+		markdown += `### ${fileData.fileName}\n`
+		markdown += `> ${formatBytes(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
+		markdown += `<details>\n<summary>Issues (${fileSafe} safe, ${fileUnsafe} unsafe)</summary>\n\n`
+		markdown += `| Class | Issue Type | Severity | Decision |\n`
+		markdown += `|-------|------------|----------|----------|\n`
+
+		for (const d of fileData.decisions) {
+			const decisionText = d.decision === 'safe' ? '✅ Safe' : '❌ Unsafe'
+			markdown += `| \`${d.filePath}\` | ${d.issueType} | ${capitalizeString(d.severity)} | ${decisionText} |\n`
+		}
+
+		markdown += `\n</details>\n\n`
+	}
+
+	markdown += `</details>\n\n`
+	markdown += `---\n\n**Total:** ${totalDecisions} issues reviewed (${totalSafe} safe, ${totalUnsafe} unsafe)\n\n`
+
+	return markdown
+})
+
+const threadWithPreview = computed(() => {
+	if (!reviewSummaryPreview.value) return props.thread
+
+	const user = auth.value?.user as User | null
+	if (!user) return props.thread
+
+	const previewMessage: ThreadMessage & { preview: true } = {
+		id: 'preview-message',
+		author_id: user.id,
+		body: {
+			type: 'text',
+			body: reviewSummaryPreview.value,
+			private: true,
+			replying_to: null,
+			associated_images: [],
+		},
+		created: new Date().toISOString(),
+		hide_identity: false,
+		preview: true,
+	}
+
+	return {
+		...props.thread,
+		messages: [...props.thread.messages, previewMessage],
+		members: props.thread.members.some((m) => m.id === user.id)
+			? props.thread.members
+			: [...props.thread.members, user],
+	}
+})
+
+const allIssuesResolved = computed(() => {
+	for (const report of props.reports) {
+		for (const issue of report.issues) {
+			for (const detail of issue.details) {
+				if (getDetailDecision(detail.id, detail.status) === 'pending') return false
+			}
+		}
+	}
+	return true
+})
+
+const canSubmitReview = computed(() => {
+	const totalIssues = props.reports.reduce((sum, r) => sum + r.issues.length, 0)
+	if (totalIssues === 0) return true
+	return allIssuesResolved.value
+})
+const hasSubmittedPassReview = ref(false)
+
+async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
+	hasSubmittedPassReview.value = verdict === 'safe'
+	const editorContent = threadViewRef.value?.getReplyContent() || ''
+
+	let message: string | undefined
+	if (reviewSummaryPreview.value && editorContent) {
+		message = `${reviewSummaryPreview.value}${editorContent}`
+	} else if (reviewSummaryPreview.value) {
+		message = reviewSummaryPreview.value
+	} else if (editorContent) {
+		message = editorContent
+	}
+
+	try {
+		await client.labrinth.tech_review_internal.submitProject(props.project.id, {
+			verdict,
+			message,
+		})
+		emit('markComplete', props.project.id)
+		addNotification({
+			type: 'success',
+			title: 'Review submitted',
+			text: 'Technical review completed successfully.',
+		})
+
+		if (verdict === 'unsafe') {
+			emit('showMaliciousSummary', unsafeFiles.value)
+		}
+	} catch (error: unknown) {
+		const err = error as { response?: { data?: { issues?: string[] } } }
+		if (err.response?.data?.issues) {
+			const missedCount = err.response.data.issues.length
+			addNotification({
+				type: 'error',
+				title: 'Pending issues remain',
+				text: `${missedCount} issue(s) still need a verdict before submitting.`,
+			})
+		} else {
+			addNotification({
+				type: 'error',
+				title: 'Submit failed',
+				text: 'Failed to submit review. Please try again.',
+			})
+		}
+	}
+}
+</script>
+
+<template>
+	<CollapsibleRegion
+		v-model:collapsed="isThreadCollapsed"
+		:expand-text="threadExpandText"
+		:disabled="disableCollapsing"
+		collapse-text="Collapse thread"
+	>
+		<div class="bg-surface-2 pt-0">
+			<!-- DEV-531 -->
+			<!-- @vue-expect-error TODO: will convert ThreadView to use api-client types at a later date -->
+			<ThreadView
+				ref="threadViewRef"
+				:thread="threadWithPreview"
+				:quick-replies="techReviewQuickReplies"
+				:quick-reply-context="techReviewContext"
+				primary-action="note"
+				@update-thread="emit('refetch')"
+			>
+				<template #additionalActions>
+					<Button
+						v-tooltip="
+							!canSubmitReview
+								? 'There are still pending flags!'
+								: hasSubmittedPassReview
+									? 'Project already passed!'
+									: undefined
+						"
+						type="colored"
+						color="brand"
+						:disabled="!canSubmitReview || hasSubmittedPassReview"
+						@click="handleSubmitReview('safe')"
+					>
+						<ShieldCheckIcon /> Pass
+					</Button>
+					<Button
+						v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
+						type="colored"
+						color="red"
+						:disabled="!canSubmitReview"
+						@click="handleSubmitReview('unsafe')"
+					>
+						<BugIcon /> Fail
+					</Button>
+					<TeleportOverflowMenu
+						label="More options"
+						class="btn-dropdown-animation !w-auto !rounded-xl !px-2.5"
+						:disabled="isLoadingStatusAction"
+						:options="projectStatusActions"
+					>
+						<SpinnerIcon v-if="isLoadingStatusAction" class="animate-spin" aria-hidden="true" />
+						<ScaleIcon v-else aria-hidden="true" />
+						Set status
+						<DropdownIcon aria-hidden="true" />
+					</TeleportOverflowMenu>
+					<Button
+						v-if="featureFlags.developerMode"
+						type="outlined"
+						@click="emit('showMaliciousSummary', unsafeFiles)"
+						>Debug</Button
+					>
+				</template>
+			</ThreadView>
+		</div>
+	</CollapsibleRegion>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue
new file mode 100644
index 0000000000..c6df2d508a
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { BanIcon, CheckCheckIcon, CheckIcon, ShieldAlertIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { canUpdateGlobalDetail } from './helpers'
+import { injectTechReviewDecisions } from './use-tech-review-decisions'
+
+const REMAINING_LABELS = {
+	globalSafe: 'All remaining globally safe',
+	localSafe: 'All remaining safe',
+	localUnsafe: 'All remaining malware',
+	globalUnsafe: 'All remaining globally unsafe',
+} as const
+
+const TRACE_ARIA_LABELS = {
+	globalSafe: 'Global pass',
+	localSafe: 'Local pass',
+	localUnsafe: 'Local fail',
+	globalUnsafe: 'Global fail',
+} as const
+
+const props = defineProps<{
+	variant: 'remaining' | 'trace'
+	remainingCount?: number
+	jar?: boolean
+	detail?: Labrinth.TechReview.Internal.ReportIssueDetail
+	globalDisabled?: boolean
+	localDisabled?: boolean
+}>()
+
+const emit = defineEmits<{
+	globalSafe: []
+	localSafe: []
+	localUnsafe: []
+	globalUnsafe: []
+}>()
+
+const {
+	isDetailActionSelected,
+	getDetailActionTooltip,
+	updatingDetails,
+	updatingGlobalDetailKeys,
+} = injectTechReviewDecisions()
+
+const groupAriaLabel = computed(() => {
+	if (props.variant === 'trace') return 'Trace verdict actions'
+	return props.jar ? 'Remaining JAR issue actions' : 'Remaining issue actions'
+})
+
+const remainingLabel = computed(() =>
+	props.variant === 'remaining' && props.remainingCount != null
+		? `${props.remainingCount} issue${props.remainingCount === 1 ? '' : 's'} remaining`
+		: undefined,
+)
+
+const ariaLabels = computed(() =>
+	props.variant === 'remaining' ? REMAINING_LABELS : TRACE_ARIA_LABELS,
+)
+
+function tooltip(decision: 'safe' | 'malware', scope: 'local' | 'global'): string {
+	if (props.variant === 'remaining') {
+		if (decision === 'safe' && scope === 'global') return REMAINING_LABELS.globalSafe
+		if (decision === 'safe') return REMAINING_LABELS.localSafe
+		if (scope === 'local') return REMAINING_LABELS.localUnsafe
+		return REMAINING_LABELS.globalUnsafe
+	}
+
+	return getDetailActionTooltip(props.detail!, decision, scope)
+}
+
+function selected(decision: 'safe' | 'malware', scope: 'local' | 'global'): boolean {
+	if (props.variant !== 'trace' || !props.detail) return false
+	return isDetailActionSelected(props.detail, decision, scope)
+}
+
+const isGlobalDisabled = computed(() => {
+	if (props.variant === 'remaining') return props.globalDisabled
+	if (!props.detail) return true
+	return (
+		!canUpdateGlobalDetail(props.detail) ||
+		updatingGlobalDetailKeys.has(props.detail.key) ||
+		updatingDetails.has(props.detail.id)
+	)
+})
+
+const isLocalDisabled = computed(() => {
+	if (props.variant === 'remaining') return props.localDisabled
+	if (!props.detail) return true
+	return updatingDetails.has(props.detail.id) || updatingGlobalDetailKeys.has(props.detail.key)
+})
+
+const BUTTON_BASE_CLASS =
+	'custom-focus-indicator flex size-8 cursor-pointer items-center justify-center border-0 border-l border-solid border-l-surface-5 bg-transparent p-0 transition-[background-color,filter] duration-150 ease-in-out first:rounded-s-[calc(var(--radius-md)-1px)] first:border-l-0 last:rounded-e-[calc(var(--radius-md)-1px)] disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4'
+
+function buttonClass(decision: 'safe' | 'malware', scope: 'local' | 'global') {
+	return [
+		BUTTON_BASE_CLASS,
+		decision === 'safe' ? 'text-green' : 'text-red',
+		selected(decision, scope)
+			? 'bg-bg-green shadow-[inset_0_0_0_1px_var(--color-green)] hover:bg-bg-green focus-visible:bg-bg-green focus-visible:shadow-[inset_0_0_0_2px_var(--color-green)]'
+			: 'hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:shadow-[inset_0_0_0_2px_var(--color-brand)]',
+	]
+}
+</script>
+
+<template>
+	<div
+		class="flex items-center overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-3"
+		role="group"
+		:aria-label="groupAriaLabel"
+	>
+		<span
+			v-if="remainingLabel"
+			class="whitespace-nowrap px-3 text-sm font-semibold text-secondary"
+			>{{ remainingLabel }}</span
+		>
+		<button
+			v-tooltip="tooltip('safe', 'global')"
+			:class="buttonClass('safe', 'global')"
+			:aria-label="ariaLabels.globalSafe"
+			:disabled="isGlobalDisabled"
+			@click="emit('globalSafe')"
+		>
+			<CheckCheckIcon aria-hidden="true" />
+		</button>
+		<button
+			v-tooltip="tooltip('safe', 'local')"
+			:class="buttonClass('safe', 'local')"
+			:aria-label="ariaLabels.localSafe"
+			:disabled="isLocalDisabled"
+			@click="emit('localSafe')"
+		>
+			<CheckIcon aria-hidden="true" />
+		</button>
+		<button
+			v-tooltip="tooltip('malware', 'local')"
+			:class="buttonClass('malware', 'local')"
+			:aria-label="ariaLabels.localUnsafe"
+			:disabled="isLocalDisabled"
+			@click="emit('localUnsafe')"
+		>
+			<BanIcon aria-hidden="true" />
+		</button>
+		<button
+			v-tooltip="tooltip('malware', 'global')"
+			:class="buttonClass('malware', 'global')"
+			:aria-label="ariaLabels.globalUnsafe"
+			:disabled="isGlobalDisabled"
+			@click="emit('globalUnsafe')"
+		>
+			<ShieldAlertIcon aria-hidden="true" />
+		</button>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts b/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts
new file mode 100644
index 0000000000..00d2809bd0
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts
@@ -0,0 +1,104 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { DetailDecision, FlattenedFileReport } from './types'
+
+export const severityOrder: Record<Labrinth.TechReview.Internal.DelphiSeverity, number> = {
+	severe: 3,
+	high: 2,
+	medium: 1,
+	low: 0,
+}
+
+export function getSeverityBadgeColor(
+	severity: Labrinth.TechReview.Internal.DelphiSeverity,
+): string {
+	switch (severity) {
+		case 'severe':
+			return 'border-red/60 border bg-highlight-red text-red'
+		case 'high':
+			return 'border-orange/60 border bg-highlight-orange text-orange'
+		case 'medium':
+			return 'border-green/60 border bg-highlight-green text-green'
+		case 'low':
+		default:
+			return 'border-blue/60 border bg-highlight-blue text-blue'
+	}
+}
+
+export function truncateMiddle(str: string, maxLength = 120): string {
+	if (str.length <= maxLength) return str
+	const keep = maxLength - 3
+	const front = Math.ceil(keep / 3)
+	return str.slice(0, front) + '...' + str.slice(front - keep)
+}
+
+export function getFileHighestSeverity(
+	file: FlattenedFileReport,
+): Labrinth.TechReview.Internal.DelphiSeverity {
+	let highest: Labrinth.TechReview.Internal.DelphiSeverity = 'low'
+	for (const issue of file.issues) {
+		for (const detail of issue.details) {
+			if (severityOrder[detail.severity] > severityOrder[highest]) {
+				highest = detail.severity
+			}
+		}
+	}
+	return highest
+}
+
+export function getFileDetailCount(file: FlattenedFileReport): number {
+	return file.issues.reduce((sum, issue) => sum + issue.details.length, 0)
+}
+
+export function flattenFileReports(
+	versions: Labrinth.TechReview.Internal.VersionReport[],
+): FlattenedFileReport[] {
+	return versions.flatMap((version) =>
+		version.files.map((file) => ({
+			...file,
+			id: file.report_id,
+			version_id: version.version_id,
+			version_number: version.version_number,
+		})),
+	)
+}
+
+export function getVersionLabel(file: FlattenedFileReport): string {
+	return file.version_number || file.version_id
+}
+
+export function getVersionPageHref(
+	project: { id: string; slug?: string; project_types: string[] },
+	versionId: string,
+): string {
+	return `/${project.project_types[0] ?? 'project'}/${project.slug ?? project.id}/version/${versionId}`
+}
+
+export function verdictToDecision(
+	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+): DetailDecision {
+	if (verdict === 'safe') return 'safe'
+	if (verdict === 'unsafe') return 'malware'
+	return 'pending'
+}
+
+export function decisionToVerdict(
+	decision: Exclude<DetailDecision, 'pending'>,
+): Labrinth.TechReview.Internal.DelphiReportIssueStatus {
+	return decision === 'safe' ? 'safe' : 'unsafe'
+}
+
+export function statusMatchesDecision(
+	status: Labrinth.TechReview.Internal.DelphiReportIssueStatus | null,
+	decision: DetailDecision,
+): boolean {
+	if (status === 'safe') return decision === 'safe'
+	if (status === 'unsafe') return decision === 'malware'
+	return false
+}
+
+export function canUpdateGlobalDetail(
+	detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+): boolean {
+	return detail.key.length > 0 && !detail.key.startsWith('<no-key-')
+}
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/types.ts b/apps/frontend/src/components/ui/moderation/tech-review/types.ts
new file mode 100644
index 0000000000..b4eab27aec
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/types.ts
@@ -0,0 +1,30 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+export type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
+	id: string
+	version_id: string
+	version_number?: string
+}
+
+export type DetailDecision = 'safe' | 'malware' | 'pending'
+export type DetailDecisionScope = 'local' | 'global'
+
+export type FlagItem = {
+	issueId: string
+	issueType: string
+	detail: Labrinth.TechReview.Internal.ReportIssueDetail
+}
+
+export type ClassGroup = {
+	key: string
+	jar: string | null
+	filePath: string
+	flags: FlagItem[]
+}
+
+export type JarGroup = {
+	key: string
+	jar: string | null
+	segments: string[]
+	classes: ClassGroup[]
+}
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-decisions.ts b/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-decisions.ts
new file mode 100644
index 0000000000..69c3b5e576
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-decisions.ts
@@ -0,0 +1,215 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { injectModrinthClient } from '@modrinth/ui'
+import { inject, type InjectionKey, type MaybeRefOrGetter, reactive, toValue } from 'vue'
+
+import { canUpdateGlobalDetail, decisionToVerdict, statusMatchesDecision } from './helpers'
+import type { DetailDecision, DetailDecisionScope, FlagItem, FlattenedFileReport } from './types'
+
+export function useTechReviewDecisions(reports: MaybeRefOrGetter<FlattenedFileReport[]>) {
+	const client = injectModrinthClient()
+
+	const detailDecisions = reactive<Map<string, DetailDecision>>(new Map())
+	const detailDecisionScopes = reactive<Map<string, DetailDecisionScope>>(new Map())
+	const updatingDetails = reactive<Set<string>>(new Set())
+	const updatingGlobalDetailKeys = reactive<Set<string>>(new Set())
+
+	function getDetailDecision(
+		detailId: string,
+		backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+	): DetailDecision {
+		const localDecision = detailDecisions.get(detailId)
+		if (localDecision) return localDecision
+		if (backendStatus === 'safe') return 'safe'
+		if (backendStatus === 'unsafe') return 'malware'
+		return 'pending'
+	}
+
+	function isPreReviewed(
+		detailId: string,
+		backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+	): boolean {
+		return (
+			(backendStatus === 'safe' || backendStatus === 'unsafe') && !detailDecisions.has(detailId)
+		)
+	}
+
+	function getFileMarkedCount(file: FlattenedFileReport): number {
+		let count = 0
+		for (const issue of file.issues) {
+			for (const detail of issue.details) {
+				if (getDetailDecision(detail.id, detail.status) !== 'pending') count++
+			}
+		}
+		return count
+	}
+
+	function getMarkedFlagsCount(flags: FlagItem[]): number {
+		return flags.filter((f) => getDetailDecision(f.detail.id, f.detail.status) !== 'pending').length
+	}
+
+	function isDetailGloballyPassed(detail: Labrinth.TechReview.Internal.ReportIssueDetail): boolean {
+		if (detailDecisionScopes.get(detail.id) === 'global') {
+			return detailDecisions.get(detail.id) === 'safe'
+		}
+
+		return detail.global_status === 'safe'
+	}
+
+	function isDetailGloballyResolved(
+		detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+	): boolean {
+		if (detailDecisionScopes.get(detail.id) === 'global') {
+			return detailDecisions.get(detail.id) !== 'pending'
+		}
+
+		return detail.global_status === 'safe' || detail.global_status === 'unsafe'
+	}
+
+	function applyDecisionToRelatedDetails(
+		detailIds: string[],
+		decision: DetailDecision,
+		scope: DetailDecisionScope,
+	): { otherMatchedCount: number } {
+		const allDetails = toValue(reports).flatMap((report) =>
+			report.issues.flatMap((issue) => issue.details),
+		)
+		const selectedDetailIds = new Set(detailIds)
+		const updatedDetailIds = new Set<string>()
+
+		for (const detailId of detailIds) {
+			const detail = allDetails.find((candidate) => candidate.id === detailId)
+			const matchingDetails = detail?.key
+				? allDetails.filter((candidate) => candidate.key === detail.key)
+				: detail
+					? [detail]
+					: []
+
+			if (matchingDetails.length === 0) {
+				detailDecisions.set(detailId, decision)
+				detailDecisionScopes.set(detailId, scope)
+				updatedDetailIds.add(detailId)
+				continue
+			}
+
+			for (const matchingDetail of matchingDetails) {
+				detailDecisions.set(matchingDetail.id, decision)
+				detailDecisionScopes.set(matchingDetail.id, scope)
+				updatedDetailIds.add(matchingDetail.id)
+			}
+		}
+
+		return {
+			otherMatchedCount: [...updatedDetailIds].filter((id) => !selectedDetailIds.has(id)).length,
+		}
+	}
+
+	function isDetailActionSelected(
+		detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+		decision: DetailDecision,
+		scope: DetailDecisionScope,
+	): boolean {
+		const localDecision = detailDecisions.get(detail.id)
+		const localScope = detailDecisionScopes.get(detail.id)
+		if (localDecision && localScope) {
+			if (localDecision === 'pending') {
+				if (localScope === 'local') {
+					if (scope === 'local') return false
+					return statusMatchesDecision(detail.global_status, decision)
+				}
+
+				if (scope === 'global') return false
+				return statusMatchesDecision(detail.local_status, decision)
+			}
+
+			return localDecision === decision && localScope === scope
+		}
+
+		if (scope === 'global') {
+			return statusMatchesDecision(detail.global_status, decision)
+		}
+
+		if (detail.global_status) return false
+
+		return statusMatchesDecision(detail.local_status, decision)
+	}
+
+	function getToggledDetailVerdict(
+		detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+		decision: Exclude<DetailDecision, 'pending'>,
+		scope: DetailDecisionScope,
+	): Labrinth.TechReview.Internal.DelphiReportIssueStatus {
+		return isDetailActionSelected(detail, decision, scope) ? 'pending' : decisionToVerdict(decision)
+	}
+
+	function getDetailActionTooltip(
+		detail: Labrinth.TechReview.Internal.ReportIssueDetail,
+		decision: Exclude<DetailDecision, 'pending'>,
+		scope: DetailDecisionScope,
+	): string {
+		const action = decision === 'safe' ? 'pass' : 'fail'
+		const scopeLabel = scope === 'global' ? 'Global' : 'Local'
+
+		if (scope === 'global' && !canUpdateGlobalDetail(detail)) {
+			return 'Global verdict unavailable for generated trace keys'
+		}
+
+		if (isDetailActionSelected(detail, decision, scope)) {
+			return `Unset ${scopeLabel.toLowerCase()} ${action}`
+		}
+
+		return `${scopeLabel} ${action}`
+	}
+
+	async function updateIssueDetails(
+		data: {
+			detail_id: string
+			verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+		}[],
+	) {
+		await client.request('/moderation/tech-review/issue-detail', {
+			api: 'labrinth',
+			version: 'internal',
+			method: 'PATCH',
+			body: data,
+		})
+	}
+
+	async function updateGlobalIssueDetails(
+		data: {
+			detail_key: string
+			verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+		}[],
+	) {
+		await client.labrinth.tech_review_internal.updateGlobalIssueDetails(data)
+	}
+
+	return {
+		updatingDetails,
+		updatingGlobalDetailKeys,
+		getDetailDecision,
+		isPreReviewed,
+		getFileMarkedCount,
+		getMarkedFlagsCount,
+		isDetailGloballyPassed,
+		isDetailGloballyResolved,
+		applyDecisionToRelatedDetails,
+		isDetailActionSelected,
+		getToggledDetailVerdict,
+		getDetailActionTooltip,
+		updateIssueDetails,
+		updateGlobalIssueDetails,
+	}
+}
+
+export type TechReviewDecisions = ReturnType<typeof useTechReviewDecisions>
+
+export const TECH_REVIEW_DECISIONS_KEY: InjectionKey<TechReviewDecisions> =
+	Symbol('techReviewDecisions')
+
+export function injectTechReviewDecisions(): TechReviewDecisions {
+	const decisions = inject(TECH_REVIEW_DECISIONS_KEY)
+	if (!decisions) {
+		throw new Error('Tech review decisions must be provided by ModerationTechRevCard')
+	}
+	return decisions
+}
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-sources.ts b/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-sources.ts
new file mode 100644
index 0000000000..ab12788ae6
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-sources.ts
@@ -0,0 +1,126 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { injectModrinthClient } from '@modrinth/ui'
+import { type MaybeRefOrGetter, reactive, toValue } from 'vue'
+
+const CACHE_TTL = 24 * 60 * 60 * 1000
+const CACHE_KEY_PREFIX = 'tech_review_source_'
+
+type CachedSource = {
+	source: string
+	timestamp: number
+}
+
+function getCachedSource(detailId: string): string | null {
+	try {
+		const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
+		if (!cached) return null
+
+		const data: CachedSource = JSON.parse(cached)
+		const now = Date.now()
+
+		if (now - data.timestamp > CACHE_TTL) {
+			localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
+			return null
+		}
+
+		return data.source
+	} catch {
+		return null
+	}
+}
+
+function setCachedSource(detailId: string, source: string): void {
+	try {
+		const data: CachedSource = {
+			source,
+			timestamp: Date.now(),
+		}
+		localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
+	} catch (error) {
+		console.error('Failed to cache source:', error)
+	}
+}
+
+function clearExpiredCache(): void {
+	try {
+		const now = Date.now()
+		const keys = Object.keys(localStorage)
+
+		for (const key of keys) {
+			if (key.startsWith(CACHE_KEY_PREFIX)) {
+				const cached = localStorage.getItem(key)
+				if (cached) {
+					const data: CachedSource = JSON.parse(cached)
+					if (now - data.timestamp > CACHE_TTL) {
+						localStorage.removeItem(key)
+					}
+				}
+			}
+		}
+	} catch (error) {
+		console.error('Failed to clear expired cache:', error)
+	}
+}
+
+export function useTechReviewSources(
+	issues: MaybeRefOrGetter<Labrinth.TechReview.Internal.FileIssue[]>,
+) {
+	const client = injectModrinthClient()
+
+	if (import.meta.client) {
+		clearExpiredCache()
+	}
+
+	const loadingIssues = reactive<Set<string>>(new Set())
+	const decompiledSources = reactive<Map<string, string>>(new Map())
+	const loadedIssues = reactive<Set<string>>(new Set())
+
+	async function loadIssueSource(issueId: string): Promise<void> {
+		if (loadingIssues.has(issueId) || loadedIssues.has(issueId)) return
+
+		loadingIssues.add(issueId)
+
+		try {
+			const issueData = await client.labrinth.tech_review_internal.getIssue(issueId)
+
+			for (const detail of issueData.details) {
+				if (detail.decompiled_source) {
+					decompiledSources.set(detail.id, detail.decompiled_source)
+					setCachedSource(detail.id, detail.decompiled_source)
+				}
+			}
+			loadedIssues.add(issueId)
+		} catch (error) {
+			console.error('Failed to load issue source:', error)
+		} finally {
+			loadingIssues.delete(issueId)
+		}
+	}
+
+	function handleLoadIssueSources(issueIds: string[]): void {
+		const uniqueIssueIds = new Set(issueIds)
+		const matchedIssues = toValue(issues).filter((issue) => uniqueIssueIds.has(issue.id))
+
+		for (const issue of matchedIssues) {
+			for (const detail of issue.details) {
+				if (!decompiledSources.has(detail.id)) {
+					const cached = getCachedSource(detail.id)
+					if (cached) {
+						decompiledSources.set(detail.id, cached)
+					}
+				}
+			}
+
+			const hasUncached = issue.details.some((detail) => !decompiledSources.has(detail.id))
+			if (hasUncached) {
+				loadIssueSource(issue.id)
+			}
+		}
+	}
+
+	return {
+		loadingIssues,
+		decompiledSources,
+		handleLoadIssueSources,
+	}
+}
diff --git a/apps/frontend/src/components/ui/report/ReportInfo.vue b/apps/frontend/src/components/ui/report/ReportInfo.vue
index e7f0cdd56e..a0e9e14eb7 100644
--- a/apps/frontend/src/components/ui/report/ReportInfo.vue
+++ b/apps/frontend/src/components/ui/report/ReportInfo.vue
@@ -70,6 +70,7 @@
 				size="xs"
 				no-shadow
 				:raised="raised"
+				pad-transparent-corners
 			/>
 			<div v-else class="backed-svg" :class="{ raised: raised }">
 				<BoxesIcon />
diff --git a/apps/frontend/src/components/ui/servers/Globe.vue b/apps/frontend/src/components/ui/servers/Globe.vue
index 969cf9e914..1925c1e64b 100644
--- a/apps/frontend/src/components/ui/servers/Globe.vue
+++ b/apps/frontend/src/components/ui/servers/Globe.vue
@@ -42,10 +42,13 @@
 </template>
 
 <script setup>
+import { useDebugLogger } from '@modrinth/ui'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { onMounted, onUnmounted, ref } from 'vue'
 
+const debug = useDebugLogger('Globe')
+
 const container = ref(null)
 const showLabels = ref(false)
 
@@ -87,7 +90,7 @@ const isLocationVisible = (location) => {
 }
 
 const toggleLocationClicked = (location) => {
-	console.log('clicked', location.name)
+	debug('clicked', location.name)
 	locations.value.find((loc) => loc.name === location.name).clicked = !location.clicked
 }
 
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index d3e4df0c2f..071bfa87cb 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -95,7 +95,7 @@
 				</div>
 			</div>
 		</NewModal>
-		<div v-if="flags.developerMode" class="mx-4 mb-3 font-semibold">
+		<div v-if="flags.showThreadIds" class="mx-4 mb-3 font-semibold">
 			Thread ID:
 			<CopyCode :text="thread.id" />
 		</div>
@@ -113,18 +113,19 @@
 					@update-thread="() => updateThreadLocal()"
 				/>
 			</div>
-			<template v-if="report && report.closed">
-				<p>{{ formatMessage(messages.closedThreadDescription) }}</p>
+			<div v-if="report && report.closed" class="m-4 mt-2 flex flex-col gap-4">
+				<p class="m-0">{{ formatMessage(messages.closedThreadDescription) }}</p>
 				<Button
 					v-if="isStaff(auth.user)"
 					:disabled="isLoading"
+					class="w-fit"
 					@click="runBlockingAction('reopen', () => reopenReport())"
 				>
 					<SpinnerIcon v-if="loadingAction === 'reopen'" class="animate-spin" aria-hidden="true" />
 					<CheckCircleIcon v-else aria-hidden="true" />
 					{{ formatMessage(messages.actionReopenThread) }}
 				</Button>
-			</template>
+			</div>
 			<template v-else-if="!report || !report.closed">
 				<div class="mx-4 mb-2 mt-2">
 					<MarkdownEditor
@@ -211,36 +212,34 @@
 					</div>
 					<div class="flex flex-wrap items-center gap-2">
 						<template v-if="report">
-							<template v-if="isStaff(auth.user)">
-								<Button
-									v-if="replyBody"
-									type="colored"
-									color="red"
-									:disabled="isLoading"
-									@click="runBlockingAction('close-with-reply', () => closeReport(true))"
-								>
-									<SpinnerIcon
-										v-if="loadingAction === 'close-with-reply'"
-										class="animate-spin"
-										aria-hidden="true"
-									/>
-									<CheckCircleIcon v-else aria-hidden="true" />
-									{{ formatMessage(messages.actionCloseWithReply) }}
-								</Button>
-								<Button
-									v-else
-									:disabled="isLoading"
-									@click="runBlockingAction('close', () => closeReport())"
-								>
-									<SpinnerIcon
-										v-if="loadingAction === 'close'"
-										class="animate-spin"
-										aria-hidden="true"
-									/>
-									<CheckCircleIcon v-else aria-hidden="true" />
-									{{ formatMessage(messages.actionCloseThread) }}
-								</Button>
-							</template>
+							<Button
+								v-if="isStaff(auth.user) && replyBody"
+								type="colored"
+								color="red"
+								:disabled="isLoading"
+								@click="runBlockingAction('close-with-reply', () => closeReport(true))"
+							>
+								<SpinnerIcon
+									v-if="loadingAction === 'close-with-reply'"
+									class="animate-spin"
+									aria-hidden="true"
+								/>
+								<CheckCircleIcon v-else aria-hidden="true" />
+								{{ formatMessage(messages.actionCloseWithReply) }}
+							</Button>
+							<Button
+								v-else
+								:disabled="isLoading"
+								@click="runBlockingAction('close', () => closeReport())"
+							>
+								<SpinnerIcon
+									v-if="loadingAction === 'close'"
+									class="animate-spin"
+									aria-hidden="true"
+								/>
+								<CheckCircleIcon v-else aria-hidden="true" />
+								{{ formatMessage(messages.actionCloseThread) }}
+							</Button>
 						</template>
 						<template v-if="project">
 							<template v-if="isStaff(auth.user)">
@@ -526,8 +525,8 @@ const messages = defineMessages({
 		defaultMessage: 'Close with reply',
 	},
 	actionCloseThread: {
-		id: 'conversation-thread.action.close-thread',
-		defaultMessage: 'Close thread',
+		id: 'conversation-thread.action.close-report',
+		defaultMessage: 'Close report',
 	},
 	actionApproveWithReply: {
 		id: 'conversation-thread.action.approve-with-reply',
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index 857f253886..61668d6462 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div v-if="flags.developerMode" class="m-4 font-bold text-heading">
+		<div v-if="flags.showThreadIds" class="m-4 font-bold text-heading">
 			Thread ID:
 			<CopyCode :text="thread.id" />
 		</div>
@@ -23,10 +23,12 @@
 			<p class="text-lg text-secondary">No messages yet</p>
 		</div>
 
-		<template v-if="closed">
-			<p class="text-secondary">This thread is closed and new messages cannot be sent to it.</p>
-			<slot name="closedActions" />
-		</template>
+		<div v-if="closed" class="flex flex-col gap-4 p-4 pt-2">
+			<p class="m-0 text-secondary">This thread is closed and new messages cannot be sent to it.</p>
+			<div>
+				<slot name="closedActions" />
+			</div>
+		</div>
 
 		<template v-else>
 			<div class="px-4 py-2">
@@ -41,43 +43,58 @@
 				class="mt-4 flex flex-col items-stretch justify-between gap-3 px-4 pb-4 sm:flex-row sm:items-center sm:gap-2"
 			>
 				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
-					<Button
-						v-if="sortedMessages.length > 0"
+					<SplitButton
+						v-if="primaryAction === 'note' && isStaff(auth.user)"
 						type="colored"
 						color="brand"
+						menu-label="More send options"
 						:disabled="!replyBody"
-						class="w-full gap-2 sm:w-auto"
-						@click="sendReply()"
-					>
-						<ReplyIcon class="size-4" />
-						Reply
-					</Button>
-					<Button
-						v-else
-						type="colored"
-						color="brand"
-						:disabled="!replyBody"
-						class="w-full gap-2 sm:w-auto"
-						@click="sendReply()"
-					>
-						<SendIcon class="size-4" />
-						Send
-					</Button>
-					<Button
-						v-if="isStaff(auth.user)"
-						:disabled="!replyBody"
+						:options="publicMessageOptions"
 						class="w-full sm:w-auto"
 						@click="sendReply(true)"
 					>
 						Add note
-					</Button>
+					</SplitButton>
+					<template v-else>
+						<Button
+							v-if="sortedMessages.length > 0"
+							type="colored"
+							color="brand"
+							:disabled="!replyBody"
+							class="w-full gap-2 sm:w-auto"
+							@click="sendReply()"
+						>
+							<ReplyIcon class="size-4" />
+							Reply
+						</Button>
+						<Button
+							v-else
+							type="colored"
+							color="brand"
+							:disabled="!replyBody"
+							class="w-full gap-2 sm:w-auto"
+							@click="sendReply()"
+						>
+							<SendIcon class="size-4" />
+							Send
+						</Button>
+						<Button
+							v-if="isStaff(auth.user)"
+							:disabled="!replyBody"
+							class="w-full sm:w-auto"
+							@click="sendReply(true)"
+						>
+							Add note
+						</Button>
+					</template>
 					<TeleportOverflowMenu
 						v-if="visibleQuickReplies.length > 0"
 						label="More options"
 						:options="visibleQuickReplies"
 						class="!w-auto !rounded-xl !px-2.5"
 					>
-						Quick reply
+						<ArrowUpFromLineIcon />
+						Load preset
 						<ChevronDownIcon />
 					</TeleportOverflowMenu>
 				</div>
@@ -91,14 +108,20 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { ChevronDownIcon, MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
-import type { QuickReply } from '@modrinth/moderation'
-import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import {
+	ArrowUpFromLineIcon,
+	ChevronDownIcon,
+	MessageIcon,
+	ReplyIcon,
+	SendIcon,
+} from '@modrinth/assets'
+import type { QuickReply } from '@modrinth/moderation'
+import { Button, SplitButton, TeleportOverflowMenu } from '@modrinth/ui'
+import {
+	type ButtonMenuOption,
 	CopyCode,
 	injectNotificationManager,
 	MarkdownEditor,
-	type OverflowMenuOption,
 } from '@modrinth/ui'
 import type { Thread, User } from '@modrinth/utils'
 import dayjs from 'dayjs'
@@ -110,7 +133,20 @@ import ThreadMessage from './ThreadMessage.vue'
 
 const { addNotification } = injectNotificationManager()
 
-const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
+const props = withDefaults(
+	defineProps<{
+		thread: Thread
+		quickReplies?: ReadonlyArray<QuickReply<T>>
+		quickReplyContext?: T
+		closed?: boolean
+		primaryAction?: 'reply' | 'note'
+	}>(),
+	{
+		primaryAction: 'reply',
+	},
+)
+
+const visibleQuickReplies = computed<ButtonMenuOption[]>(() => {
 	const replies = props.quickReplies
 	const context = props.quickReplyContext
 
@@ -127,17 +163,10 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 					id: reply.label,
 					label: reply.label,
 					action: () => handleQuickReply(reply, context),
-				}) as OverflowMenuOption,
+				}) as ButtonMenuOption,
 		)
 })
 
-const props = defineProps<{
-	thread: Thread
-	quickReplies?: ReadonlyArray<QuickReply<T>>
-	quickReplyContext?: T
-	closed?: boolean
-}>()
-
 async function handleQuickReply(reply: QuickReply<T>, context: T) {
 	const message = typeof reply.message === 'function' ? await reply.message(context) : reply.message
 
@@ -151,7 +180,7 @@ defineExpose({
 	sendReply,
 })
 
-const auth = await useAuth()
+const auth = useAuthState()
 
 const emit = defineEmits<{
 	updateThread: [thread: Thread]
@@ -169,6 +198,16 @@ const members = computed(() => {
 
 const replyBody = ref('')
 
+const publicMessageOptions = computed<ButtonMenuOption[]>(() => [
+	{
+		id: 'send-public',
+		label: 'Send publicly',
+		icon: SendIcon,
+		action: () => sendReply(false),
+		disabled: !replyBody.value,
+	},
+])
+
 function setReplyContent(content: string) {
 	replyBody.value = content
 }
diff --git a/apps/frontend/src/composables/accounts.ts b/apps/frontend/src/composables/accounts.ts
new file mode 100644
index 0000000000..ea3fcf5e68
--- /dev/null
+++ b/apps/frontend/src/composables/accounts.ts
@@ -0,0 +1,384 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { nextTick } from 'vue'
+
+import { useAuthCookie } from '@/composables/auth-cookie.ts'
+import type { CookieOptions } from '#app'
+import { useTheme } from '~/composables/nuxt-accessors.ts'
+import { getThemeType } from '~/plugins/theme/themes.ts'
+
+export const LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY = 'auth-last-sign-in-oauth-provider'
+export const PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY = 'auth-pending-sign-in-oauth-provider'
+
+export const STORED_ACCOUNT_AUTH_METHODS = [
+	'password',
+	'passkey',
+	'github',
+	'discord',
+	'microsoft',
+	'gitlab',
+	'google',
+	'steam',
+	'paypal',
+] as const
+
+export type StoredAccountAuthMethod = (typeof STORED_ACCOUNT_AUTH_METHODS)[number]
+
+export type StoredAccount = {
+	id: string
+	username: string
+	avatarUrl: string | null
+	token: string
+	role?: Labrinth.Users.v2.Role
+	email?: string | null
+	authMethod?: StoredAccountAuthMethod
+	appearance?: Labrinth.Users.v3.AppearancePreferences
+}
+
+type AccountPreview = Omit<StoredAccount, 'token' | 'appearance'>
+
+const STORAGE_KEY = 'auth-stored-accounts'
+const COOKIE_OPTIONS = {
+	maxAge: 60 * 60 * 24 * 365 * 10,
+	sameSite: 'lax',
+	httpOnly: false,
+	path: '/',
+} satisfies CookieOptions<AccountPreview[]>
+
+const ROLES: Labrinth.Users.v2.Role[] = ['developer', 'moderator', 'admin']
+
+const isRole = (value: unknown): value is Labrinth.Users.v2.Role =>
+	ROLES.includes(value as Labrinth.Users.v2.Role)
+
+export const isStoredAccountAuthMethod = (value: unknown): value is StoredAccountAuthMethod =>
+	typeof value === 'string' && (STORED_ACCOUNT_AUTH_METHODS as readonly string[]).includes(value)
+
+const isAppearance = (value: unknown): value is Labrinth.Users.v3.AppearancePreferences => {
+	if (!value || typeof value !== 'object') return false
+	const appearance = value as Labrinth.Users.v3.AppearancePreferences
+	return (
+		typeof appearance.auto === 'boolean' &&
+		typeof appearance.theme === 'string' &&
+		getThemeType(appearance.theme) !== 'unknown'
+	)
+}
+
+const parsePreview = (value: unknown): AccountPreview | null => {
+	if (!value || typeof value !== 'object') return null
+	const candidate = value as Partial<AccountPreview>
+	if (typeof candidate.id !== 'string' || typeof candidate.username !== 'string') return null
+
+	return {
+		id: candidate.id,
+		username: candidate.username,
+		avatarUrl: candidate.avatarUrl ?? null,
+		role: isRole(candidate.role) ? candidate.role : undefined,
+		email: typeof candidate.email === 'string' ? candidate.email : undefined,
+		authMethod: isStoredAccountAuthMethod(candidate.authMethod) ? candidate.authMethod : undefined,
+	}
+}
+
+const parseAccount = (value: unknown): StoredAccount | null => {
+	const preview = parsePreview(value)
+	if (!preview || typeof (value as StoredAccount).token !== 'string') return null
+
+	const candidate = value as Partial<StoredAccount>
+	return {
+		...preview,
+		token: candidate.token ?? '',
+		appearance: isAppearance(candidate.appearance) ? candidate.appearance : undefined,
+	}
+}
+
+const parsePreviews = (value: unknown): AccountPreview[] =>
+	Array.isArray(value) ? value.map(parsePreview).filter((account) => account !== null) : []
+
+const toPreview = ({
+	id,
+	username,
+	avatarUrl,
+	role,
+	email,
+	authMethod,
+}: StoredAccount): AccountPreview => ({
+	id,
+	username,
+	avatarUrl,
+	role,
+	email,
+	authMethod,
+})
+
+const getErrorStatus = (error: unknown): number | undefined => {
+	if (!error || typeof error !== 'object') return undefined
+	const typedError = error as { statusCode?: unknown; status?: unknown }
+	const status = typedError.statusCode ?? typedError.status
+	return typeof status === 'number' ? status : undefined
+}
+
+const isAuthFailure = (error: unknown): boolean => {
+	const status = getErrorStatus(error)
+	return status === 401 || status === 403
+}
+
+const readPendingAuthMethod = (): StoredAccountAuthMethod | undefined => {
+	if (!import.meta.client) return undefined
+
+	try {
+		const raw = window.localStorage.getItem(PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY)
+		if (!raw) return undefined
+		const parsed: unknown = JSON.parse(raw)
+		return isStoredAccountAuthMethod(parsed) ? parsed : undefined
+	} catch {
+		return undefined
+	}
+}
+
+const readLocal = (): StoredAccount[] => {
+	if (!import.meta.client) return []
+
+	try {
+		const parsed: unknown = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? '')
+		if (!Array.isArray(parsed)) return []
+		return parsed.map(parseAccount).filter((account) => account !== null)
+	} catch {
+		return []
+	}
+}
+
+const writeLocal = (accounts: StoredAccount[]) => {
+	if (!import.meta.client) return
+	try {
+		window.localStorage.setItem(STORAGE_KEY, JSON.stringify(accounts))
+	} catch {
+		// storage blocked or full — switching just won't be offered
+	}
+}
+
+const accountsCookie = () => {
+	const config = useRuntimeConfig()
+
+	return useCookie<AccountPreview[]>(STORAGE_KEY, {
+		...COOKIE_OPTIONS,
+		secure: config.public.cookieSecure,
+		default: () => [],
+		decode: (value) => {
+			try {
+				return parsePreviews(JSON.parse(value))
+			} catch {
+				return []
+			}
+		},
+		encode: (value) => JSON.stringify(parsePreviews(value)),
+	})
+}
+
+export const useStoredAccounts = () =>
+	useState<StoredAccount[]>('stored-accounts', () =>
+		parsePreviews(accountsCookie().value).map((preview) => ({ ...preview, token: '' })),
+	)
+
+const setAccounts = (accounts: StoredAccount[]) => {
+	useStoredAccounts().value = accounts
+	writeLocal(accounts)
+	accountsCookie().value = accounts.map(toPreview)
+}
+
+export const hydrateStoredAccounts = () => {
+	if (!import.meta.client) return
+
+	const local = readLocal()
+	if (local.length > 0) {
+		setAccounts(local)
+		return
+	}
+
+	accountsCookie().value = useStoredAccounts().value.map(toPreview)
+}
+
+export const rememberStoredAccount = (
+	user: Pick<Labrinth.Users.v2.User, 'id' | 'username' | 'avatar_url' | 'role' | 'email'>,
+	token: string,
+	options?: { authMethod?: StoredAccountAuthMethod },
+) => {
+	if (!import.meta.client) return
+
+	const local = readLocal()
+	const accounts = local.length > 0 ? local : [...useStoredAccounts().value]
+	const existingIndex = accounts.findIndex((stored) => stored.id === user.id)
+	const existing = existingIndex === -1 ? undefined : accounts[existingIndex]
+	const account: StoredAccount = {
+		id: user.id,
+		username: user.username,
+		avatarUrl: user.avatar_url ?? null,
+		token,
+		role: isRole(user.role) ? user.role : undefined,
+		email: user.email ?? existing?.email ?? null,
+		authMethod:
+			options && 'authMethod' in options
+				? options.authMethod
+				: (existing?.authMethod ?? readPendingAuthMethod()),
+		appearance: existing?.appearance,
+	}
+
+	if (existingIndex === -1) {
+		setAccounts([...accounts, account])
+		return
+	}
+
+	const next = [...accounts]
+	next[existingIndex] = account
+	setAccounts(next)
+}
+
+export const rememberStoredAccountAppearance = (
+	id: string,
+	appearance: Labrinth.Users.v3.AppearancePreferences,
+) => {
+	if (!import.meta.client) return
+
+	const accounts = readLocal()
+	const existing = accounts.find((stored) => stored.id === id)
+	if (
+		!existing ||
+		(existing.appearance?.theme === appearance.theme &&
+			existing.appearance?.auto === appearance.auto)
+	) {
+		return
+	}
+
+	setAccounts(accounts.map((stored) => (stored.id === id ? { ...stored, appearance } : stored)))
+}
+
+export const forgetStoredAccount = (id: string) => {
+	if (!import.meta.client) return
+	setAccounts(readLocal().filter((stored) => stored.id !== id))
+}
+
+export const forgetStoredAccountByToken = (token: string) => {
+	if (!import.meta.client) return
+	setAccounts(readLocal().filter((stored) => stored.token !== token))
+}
+
+export const useIsSwitchingAccount = () => useState<boolean>('switching-account', () => false)
+
+const getSwitchRedirectPath = (username: string) => {
+	if (!import.meta.client) return `/user/${username}`
+
+	const fullPath = `${window.location.pathname}${window.location.search}${window.location.hash}`
+	if (fullPath === '/auth' || fullPath.startsWith('/auth/')) return `/user/${username}`
+	return fullPath
+}
+
+async function fetchUserWithToken(
+	token: string,
+): Promise<Labrinth.Users.v2.User | 'invalid' | 'error'> {
+	try {
+		return (await useBaseFetch(
+			'user',
+			{
+				apiVersion: 3,
+				headers: {
+					Authorization: token,
+				},
+			},
+			true,
+		)) as Labrinth.Users.v2.User
+	} catch (error) {
+		return isAuthFailure(error) ? 'invalid' : 'error'
+	}
+}
+
+async function refreshStoredToken(token: string): Promise<string | 'invalid' | 'error'> {
+	try {
+		const session = (await useBaseFetch(
+			'session/refresh',
+			{
+				method: 'POST',
+				headers: {
+					Authorization: token,
+				},
+			},
+			true,
+		)) as { session?: unknown }
+
+		const nextToken = typeof session.session === 'string' ? session.session : ''
+		return nextToken || 'invalid'
+	} catch (error) {
+		return isAuthFailure(error) ? 'invalid' : 'error'
+	}
+}
+
+async function prepareStoredAccount(
+	account: StoredAccount,
+): Promise<'ready' | 'invalid' | 'error'> {
+	if (!account.token) return 'invalid'
+
+	const user = await fetchUserWithToken(account.token)
+	if (user !== 'invalid' && user !== 'error') {
+		rememberStoredAccount(user, account.token, { authMethod: account.authMethod })
+		return 'ready'
+	}
+	if (user === 'error') return 'error'
+
+	const refreshed = await refreshStoredToken(account.token)
+	if (refreshed === 'error' || refreshed === 'invalid') return refreshed
+
+	const refreshedUser = await fetchUserWithToken(refreshed)
+	if (refreshedUser === 'error' || refreshedUser === 'invalid') return refreshedUser
+
+	rememberStoredAccount(refreshedUser, refreshed, { authMethod: account.authMethod })
+	return 'ready'
+}
+
+const goToReauthenticate = async (account: StoredAccount) => {
+	await navigateTo({
+		path: '/auth/reauthenticate',
+		query: {
+			account: account.id,
+			redirect: getSwitchRedirectPath(account.username),
+		},
+	})
+}
+
+export const switchToStoredAccount = async (
+	account: StoredAccount,
+): Promise<'ready' | 'invalid' | 'error'> => {
+	if (!import.meta.client) return 'error'
+
+	hydrateStoredAccounts()
+	const stored = readLocal().find((item) => item.id === account.id) ?? account
+
+	if (!stored.token) {
+		await goToReauthenticate(stored)
+		return 'invalid'
+	}
+
+	useIsSwitchingAccount().value = true
+	const status = await prepareStoredAccount(stored)
+	if (status !== 'ready') {
+		useIsSwitchingAccount().value = false
+		if (status === 'invalid') await goToReauthenticate(stored)
+		return status
+	}
+
+	const latest = readLocal().find((item) => item.id === stored.id) ?? stored
+	const theme = useTheme()
+	if (latest.appearance) {
+		theme.applyAccountAppearance(latest.appearance)
+		await nextTick()
+	}
+
+	useAuthCookie().value = latest.token
+	await nextTick()
+	window.location.reload()
+	return 'ready'
+}
+
+export const switchToSignedOut = async () => {
+	if (!import.meta.client) return
+
+	useIsSwitchingAccount().value = true
+	useAuthCookie().value = null
+	await nextTick()
+	window.location.reload()
+}
diff --git a/apps/frontend/src/composables/auth-cookie.ts b/apps/frontend/src/composables/auth-cookie.ts
new file mode 100644
index 0000000000..c16cedadbe
--- /dev/null
+++ b/apps/frontend/src/composables/auth-cookie.ts
@@ -0,0 +1,19 @@
+import type { CookieOptions } from '#app'
+
+const AUTH_COOKIE_NAME = 'auth-token'
+
+const AUTH_COOKIE_OPTIONS = {
+	maxAge: 60 * 60 * 24 * 365 * 10,
+	sameSite: 'lax',
+	httpOnly: false,
+	path: '/',
+} satisfies CookieOptions<string | null>
+
+export const useAuthCookie = () => {
+	const config = useRuntimeConfig()
+
+	return useCookie<string | null>(AUTH_COOKIE_NAME, {
+		...AUTH_COOKIE_OPTIONS,
+		secure: config.public.cookieSecure,
+	})
+}
diff --git a/apps/frontend/src/composables/auth.ts b/apps/frontend/src/composables/auth.ts
index bffb9b72fc..642b91753c 100644
--- a/apps/frontend/src/composables/auth.ts
+++ b/apps/frontend/src/composables/auth.ts
@@ -2,7 +2,8 @@ import type { Labrinth } from '@modrinth/api-client'
 import { useStorage } from '@vueuse/core'
 import type { LocationQueryValue, RouteLocationNormalizedLoaded } from 'vue-router'
 
-import type { CookieOptions } from '#app'
+import { rememberStoredAccount } from '@/composables/accounts.ts'
+import { useAuthCookie } from '@/composables/auth-cookie.ts'
 
 type AuthState = {
 	user: Labrinth.Users.v2.User | null
@@ -12,16 +13,7 @@ type AuthState = {
 type QueryValue = LocationQueryValue | LocationQueryValue[] | undefined
 type FullPathRoute = Pick<RouteLocationNormalizedLoaded, 'fullPath'>
 type LauncherRoute = Pick<RouteLocationNormalizedLoaded, 'query'>
-
-export const LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY = 'auth-last-sign-in-oauth-provider'
-export const PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY = 'auth-pending-sign-in-oauth-provider'
-
-const AUTH_COOKIE_OPTIONS = {
-	maxAge: 60 * 60 * 24 * 365 * 10,
-	sameSite: 'lax',
-	httpOnly: false,
-	path: '/',
-} satisfies CookieOptions<string | null>
+type AuthInitRoute = Pick<RouteLocationNormalizedLoaded, 'fullPath' | 'path' | 'query'>
 
 const normalizeAuthToken = (value: unknown) => {
 	if (typeof value === 'string') {
@@ -60,20 +52,29 @@ const getQueryString = (value: QueryValue) => {
 	return value ?? null
 }
 
-export const useAuth = async (oldToken: string | null | undefined = null) => {
-	const auth = useState<AuthState>('auth', () => ({
+export const useAuthState = () =>
+	useState<AuthState>('auth', () => ({
 		user: null,
 		token: '',
 	}))
 
+export const useAuth = async (
+	oldToken: string | null | undefined = null,
+	route?: AuthInitRoute,
+) => {
+	const auth = useAuthState()
+
 	if (!auth.value.user || oldToken) {
-		auth.value = await initAuth(oldToken)
+		auth.value = await initAuth(oldToken, route)
 	}
 
 	return auth
 }
 
-export const initAuth = async (oldToken: string | null | undefined = null) => {
+export const initAuth = async (
+	oldToken: string | null | undefined = null,
+	route?: AuthInitRoute,
+) => {
 	const auth: AuthState = {
 		user: null,
 		token: '',
@@ -83,12 +84,8 @@ export const initAuth = async (oldToken: string | null | undefined = null) => {
 		return auth
 	}
 
-	const route = useRoute()
-	const config = useRuntimeConfig()
-	const authCookie = useCookie<string | null>('auth-token', {
-		...AUTH_COOKIE_OPTIONS,
-		secure: config.public.cookieSecure,
-	})
+	const resolvedRoute = route ?? useRoute()
+	const authCookie = useAuthCookie()
 
 	if (oldToken) {
 		const normalized = normalizeAuthToken(oldToken)
@@ -97,13 +94,16 @@ export const initAuth = async (oldToken: string | null | undefined = null) => {
 		}
 	}
 
-	const oauthCode = normalizeAuthToken(route.query.code)
-	if (oauthCode && !route.fullPath.includes('new_account=true')) {
+	const oauthCode = normalizeAuthToken(resolvedRoute.query.code)
+	if (oauthCode && !resolvedRoute.fullPath.includes('new_account=true')) {
 		authCookie.value = oauthCode
 	}
 
-	if (route.fullPath.includes('new_account=true') && route.path !== '/auth/welcome') {
-		const redirect = route.path.startsWith('/auth/') ? null : route.fullPath
+	if (
+		resolvedRoute.fullPath.includes('new_account=true') &&
+		resolvedRoute.path !== '/auth/welcome'
+	) {
+		const redirect = resolvedRoute.path.startsWith('/auth/') ? null : resolvedRoute.fullPath
 
 		await navigateTo(
 			`/auth/welcome?authToken=${oauthCode}${
@@ -183,14 +183,16 @@ export const initAuth = async (oldToken: string | null | undefined = null) => {
 		}
 	}
 
+	if (auth.user && auth.token) {
+		rememberStoredAccount(auth.user, auth.token)
+	}
+
 	return auth
 }
 
 export const getSignInRedirectPath = (route: FullPathRoute) => {
 	const fullPath = route.fullPath
-	if (fullPath === '/auth' || fullPath.startsWith('/auth/')) {
-		return '/dashboard'
-	}
+	if (fullPath === '/auth' || fullPath.startsWith('/auth/')) return undefined
 	return fullPath
 }
 
@@ -201,44 +203,58 @@ export const getSignInRouteObj = (route: FullPathRoute, redirectOverride?: strin
 	},
 })
 
-export const getAuthUrl = (provider: string, redirect = '/dashboard') => {
+export const ADD_ACCOUNT_QUERY_PARAM = 'add_account'
+
+export const getAddAccountRouteObj = (route: FullPathRoute) => ({
+	path: '/auth/sign-in',
+	query: {
+		redirect: getSignInRedirectPath(route),
+		[ADD_ACCOUNT_QUERY_PARAM]: 'true',
+	},
+})
+
+export const getAuthUrl = (provider: string, redirect?: string) => {
 	const config = useRuntimeConfig()
 	const route = useNativeRoute()
 	const launcher = getQueryString(route.query.launcher)
+	const addingAccount =
+		route.query[ADD_ACCOUNT_QUERY_PARAM] !== undefined || route.path === '/auth/reauthenticate'
 
-	const fullURL = launcher
-		? (() => {
-				const callbackUrl = new URL('/auth/sign-in', config.public.siteUrl)
-				callbackUrl.searchParams.set('launcher', launcher)
+	const callbackUrl = new URL('/auth/sign-in', config.public.siteUrl)
+	if (launcher) {
+		callbackUrl.searchParams.set('launcher', launcher)
 
-				const ipver = getQueryString(route.query.ipver)
-				const port = getQueryString(route.query.port)
+		const ipver = getQueryString(route.query.ipver)
+		const port = getQueryString(route.query.port)
 
-				if (ipver) {
-					callbackUrl.searchParams.set('ipver', ipver)
-				}
+		if (ipver) {
+			callbackUrl.searchParams.set('ipver', ipver)
+		}
 
-				if (port) {
-					callbackUrl.searchParams.set('port', port)
-				}
+		if (port) {
+			callbackUrl.searchParams.set('port', port)
+		}
+	} else if (redirect) {
+		callbackUrl.searchParams.set('redirect', redirect)
+	}
 
-				return callbackUrl.toString()
-			})()
-		: `${config.public.siteUrl}/auth/sign-in?redirect=${encodeURIComponent(redirect)}`
+	if (addingAccount) {
+		callbackUrl.searchParams.set(ADD_ACCOUNT_QUERY_PARAM, 'true')
+	}
 
-	return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(fullURL)}`
+	return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(callbackUrl.toString())}`
 }
 
 export const promotePendingSignInOAuthProvider = () => {
 	if (!import.meta.client) return
 	const pending = useStorage<string | null>(
-		PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+		'auth-pending-sign-in-oauth-provider',
 		null,
 		undefined,
 		{ initOnMounted: true },
 	)
 	if (!pending.value) return
-	const last = useStorage<string | null>(LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY, null, undefined, {
+	const last = useStorage<string | null>('auth-last-sign-in-oauth-provider', null, undefined, {
 		initOnMounted: true,
 	})
 	last.value = pending.value
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index d4c256d254..1165ef04cc 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -19,6 +19,7 @@ const validateValues = <K extends PropertyKey>(flags: Record<K, FlagValue>) => f
 export const DEFAULT_FEATURE_FLAGS = validateValues({
 	// Developer flags
 	developerMode: false,
+	showThreadIds: false,
 	demoMode: false,
 	showVersionFilesInTable: false,
 	showVersionEnvironmentColumn: false,
diff --git a/apps/frontend/src/composables/user.js b/apps/frontend/src/composables/user.js
index 100e66bbe4..7a7798ba2e 100644
--- a/apps/frontend/src/composables/user.js
+++ b/apps/frontend/src/composables/user.js
@@ -1,3 +1,5 @@
+import { forgetStoredAccount } from '@/composables/accounts.ts'
+import { useAuthCookie } from '@/composables/auth-cookie.ts'
 import { useAppQueryClient } from '@/composables/query-client'
 
 export const useUser = async (force = false) => {
@@ -150,6 +152,7 @@ export const resendVerifyEmail = async () => {
 export const logout = async () => {
 	startLoading()
 	const auth = await useAuth()
+	const userId = auth.value.user?.id
 	try {
 		await useBaseFetch(`session/${auth.value.token}`, {
 			method: 'DELETE',
@@ -158,8 +161,12 @@ export const logout = async () => {
 		/* empty */
 	}
 
+	if (userId) {
+		forgetStoredAccount(userId)
+	}
+
 	await useAuth('none')
-	useCookie('auth-token').value = null
+	useAuthCookie().value = null
 	useAppQueryClient().clear()
 	stopLoading()
 }
diff --git a/apps/frontend/src/error.vue b/apps/frontend/src/error.vue
index ce915498fe..6f262aea0b 100644
--- a/apps/frontend/src/error.vue
+++ b/apps/frontend/src/error.vue
@@ -2,6 +2,7 @@
 	<NuxtLayout>
 		<LoadingBar />
 		<NotificationPanel />
+		<AccountSwitchOverlay :show="isSwitchingAccount" />
 		<div class="main">
 			<div v-if="is404" class="error-graphic">
 				<Logo404 />
@@ -32,15 +33,29 @@
 							{{ formatMessage(unauthorizedMessages.signedInAsLabel) }}
 						</p>
 						<div
-							class="flex items-center gap-2 rounded-2xl border border-solid border-surface-5 bg-surface-4 p-4"
+							class="flex items-center gap-2 rounded-2xl border border-solid border-surface-4 bg-surface-2 p-4"
 						>
 							<Avatar :src="auth.user.avatar_url" size="32px" circle />
 							<span class="font-medium text-contrast">{{ auth.user.username }}</span>
+							<UserRoleIcon :role="auth.user.role" />
 
-							<Button type="quiet" color="red" native-type="button" class="ml-auto" @click="logout">
+							<Button
+								type="quiet"
+								color="red"
+								native-type="button"
+								class="ml-auto"
+								@click="signOut"
+							>
+								<LogOutIcon />
 								{{ formatMessage(commonMessages.signOutButton) }}
 							</Button>
 						</div>
+						<template v-if="otherAccounts.length">
+							<p class="m-0">
+								{{ formatMessage(unauthorizedMessages.switchAccountLabel) }}
+							</p>
+							<AccountChoiceList :accounts="otherAccounts" @select="onSelectStoredAccount" />
+						</template>
 					</template>
 					<template v-else>
 						<ButtonLink type="colored" color="brand" class="button-like w-fit" :to="signInRoute">
@@ -85,8 +100,10 @@
 </template>
 
 <script setup>
-import { AnnoyedRinthbot, LogInIcon, SadRinthbot } from '@modrinth/assets'
+import { AnnoyedRinthbot, LogInIcon, LogOutIcon, SadRinthbot } from '@modrinth/assets'
 import {
+	AccountChoiceList,
+	AccountSwitchOverlay,
 	Avatar,
 	Button,
 	ButtonLink,
@@ -97,18 +114,27 @@ import {
 	LoadingBar,
 	normalizeChildren,
 	NotificationPanel,
+	UserRoleIcon,
 	useVIntl,
 } from '@modrinth/ui'
 
 import Logo404 from '~/assets/images/404.svg'
+import {
+	hydrateStoredAccounts,
+	switchToSignedOut,
+	switchToStoredAccount,
+	useIsSwitchingAccount,
+	useStoredAccounts,
+} from '~/composables/accounts.ts'
 import { getSignInRouteObj } from '~/composables/auth.js'
-import { logout } from '~/composables/user.js'
 import { setupProviders } from '~/providers/setup.ts'
 
 const auth = await useAuth()
-setupProviders(auth)
+const { notificationManager } = setupProviders(auth)
 
 const { formatMessage } = useVIntl()
+const { addNotification } = notificationManager
+const isSwitchingAccount = useIsSwitchingAccount()
 
 const props = defineProps({
 	error: {
@@ -130,8 +156,40 @@ const unauthorizedMessages = defineMessages({
 		id: 'error.generic.401.signed-in-as',
 		defaultMessage: "You're currently signed in as:",
 	},
+	switchAccountLabel: {
+		id: 'error.generic.401.switch-account',
+		defaultMessage: 'Or switch to another account:',
+	},
+	accountSwitchFailed: {
+		id: 'error.generic.401.switch-account-failed',
+		defaultMessage: "Couldn't switch accounts. Please try again.",
+	},
 })
 
+const storedAccounts = useStoredAccounts()
+
+const otherAccounts = computed(() =>
+	storedAccounts.value.filter((account) => account.id !== auth.value.user?.id),
+)
+
+async function signOut() {
+	await switchToSignedOut()
+}
+
+async function onSelectStoredAccount(account) {
+	const result = await switchToStoredAccount(account)
+	if (result === 'error') {
+		addNotification({
+			title: formatMessage(commonMessages.errorNotificationTitle),
+			text: formatMessage(unauthorizedMessages.accountSwitchFailed),
+			type: 'error',
+		})
+	}
+}
+
+// error page replaces the app root, so hydrate here too
+onMounted(hydrateStoredAccounts)
+
 const signInRoute = computed(() => getSignInRouteObj(route))
 
 const errorMessages = computed(
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 0929966331..b01db80089 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -1,35 +1,4 @@
 <template>
-	<div class="pointer-events-none fixed inset-0 z-[-1]">
-		<div id="fixed-background-teleport" class="relative"></div>
-	</div>
-	<div class="pointer-events-none absolute inset-0 z-[-1]">
-		<div id="absolute-background-teleport" class="relative"></div>
-	</div>
-	<div
-		class="pride-backdrop pointer-events-none absolute inset-0 z-[-1]"
-		:class="{ shown: showPrideBackdrop }"
-	></div>
-	<div class="pointer-events-none absolute inset-0 z-50">
-		<div
-			class="over-the-top-random-animation"
-			:style="{ '--_r-count': rCount }"
-			:class="{ threshold: rCount > 20, 'rings-expand': rCount >= 40 }"
-		>
-			<div>
-				<div
-					class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
-				></div>
-				<div
-					class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
-				></div>
-				<div
-					class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight text-9xl font-extrabold text-contrast"
-				>
-					?
-				</div>
-			</div>
-		</div>
-	</div>
 	<div
 		ref="main_page"
 		class="layout"
@@ -38,6 +7,37 @@
 			'modrinth-parent__no-modal-blurs': !cosmetics.advancedRendering,
 		}"
 	>
+		<div class="pointer-events-none fixed inset-0 z-[-1]">
+			<div id="fixed-background-teleport" class="relative"></div>
+		</div>
+		<div class="pointer-events-none absolute inset-0 z-[-1]">
+			<div id="absolute-background-teleport" class="relative"></div>
+		</div>
+		<div
+			class="pride-backdrop pointer-events-none absolute inset-0 z-[-1]"
+			:class="{ shown: showPrideBackdrop }"
+		></div>
+		<div class="pointer-events-none absolute inset-0 z-50">
+			<div
+				class="over-the-top-random-animation"
+				:style="{ '--_r-count': rCount }"
+				:class="{ threshold: rCount > 20, 'rings-expand': rCount >= 40 }"
+			>
+				<div>
+					<div
+						class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
+					></div>
+					<div
+						class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
+					></div>
+					<div
+						class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight text-9xl font-extrabold text-contrast"
+					>
+						?
+					</div>
+				</div>
+			</div>
+		</div>
 		<RussiaBanner v-if="flags.showAllBanners || isRussia" />
 		<TaxIdMismatchBanner v-if="flags.showAllBanners || showTinMismatchBanner" />
 		<TaxComplianceBanner v-if="flags.showAllBanners || showTaxComplianceBanner" />
@@ -373,6 +373,7 @@
 						{
 							id: 'review-projects',
 							label: formatMessage(messages.reviewProjects),
+							icon: ScaleIcon,
 							type: 'link',
 							to: '/moderation',
 							tone: 'orange',
@@ -380,6 +381,7 @@
 						{
 							id: 'tech-review',
 							label: formatMessage(messages.techReview),
+							icon: ShieldAlertIcon,
 							type: 'link',
 							to: '/moderation/technical-review',
 							tone: 'orange',
@@ -387,6 +389,7 @@
 						{
 							id: 'review-reports',
 							label: formatMessage(messages.reports),
+							icon: ReportIcon,
 							type: 'link',
 							to: '/moderation/reports',
 							tone: 'orange',
@@ -394,116 +397,109 @@
 						{
 							id: 'external-projects',
 							label: formatMessage(messages.externalProjects),
+							icon: GlobeIcon,
 							type: 'link',
 							to: '/moderation/external-projects',
 							tone: 'orange',
 						},
 						{
-							type: 'divider',
+							id: 'global-traces',
+							label: 'Global traces',
+							icon: HashIcon,
+							type: 'link',
+							to: '/moderation/global-traces',
+							tone: 'orange',
 						},
+						{ type: 'divider' },
 						{
 							id: 'file-lookup',
-							label: formatMessage(messages.fileLookup),
+							label: 'File lookup',
+							icon: FileSearchCornerIcon,
 							type: 'link',
 							to: '/admin/file_lookup',
 						},
-						{
-							type: 'divider',
-							shown: isAdmin(auth.user),
-						},
 						{
 							id: 'user-lookup',
-							label: formatMessage(messages.lookupByEmail),
+							label: 'User lookup',
+							icon: UserSearchIcon,
 							type: 'link',
 							to: '/admin/user_email',
-							tone: 'brand',
 							shown: isAdmin(auth.user),
 						},
 						{
-							id: 'affiliates',
-							label: formatMessage(messages.manageAffiliates),
-							type: 'link',
-							to: '/admin/affiliates',
-							tone: 'brand',
+							type: 'divider',
 							shown: isAdmin(auth.user),
 						},
 						{
 							id: 'servers-lookup',
 							label: 'Server lookup',
+							icon: ServerSearchIcon,
 							type: 'link',
 							to: '/admin/servers/lookup',
-							tone: 'brand',
 							shown: isAdmin(auth.user),
 						},
 						{
 							id: 'servers-notices',
-							label: formatMessage(messages.manageServerNotices),
+							label: 'Server notices',
+							icon: IssuesIcon,
 							type: 'link',
 							to: '/admin/servers/notices',
-							tone: 'brand',
 							shown: isAdmin(auth.user),
 						},
 						{
 							id: 'servers-transfers',
 							label: 'Server transfers',
+							icon: TransferIcon,
 							type: 'link',
 							to: '/admin/servers/transfers',
-							tone: 'brand',
 							shown: isAdmin(auth.user),
 						},
 						{
 							id: 'servers-nodes',
 							label: 'Credit server nodes',
+							icon: ServerIcon,
 							action: (event) => $refs.modal_batch_credit.show(event),
-							tone: 'brand',
+							shown: isAdmin(auth.user),
+						},
+						{
+							type: 'divider',
+							shown: isAdmin(auth.user),
+						},
+						{
+							id: 'affiliates',
+							label: 'Affiliate links',
+							icon: AffiliateIcon,
+							type: 'link',
+							to: '/admin/affiliates',
 							shown: isAdmin(auth.user),
 						},
 						{
 							id: 'analytics-events',
-							label: formatMessage(messages.analyticsEvents),
+							label: 'Analytics events',
+							icon: ChartIcon,
 							type: 'link',
 							to: '/admin/analytics/events',
-							tone: 'brand',
 							shown: isAdmin(auth.user),
 						},
+						{ type: 'divider' },
+						{
+							id: 'email-templates',
+							label: 'Email templates',
+							icon: MailIcon,
+							type: 'link',
+							to: '/admin/emails',
+						},
+						{
+							id: 'document-templates',
+							label: 'Document templates',
+							icon: BookOpenIcon,
+							type: 'link',
+							to: '/admin/docs',
+						},
 					]"
 				>
 					<ModrinthIcon aria-hidden="true" />
 					<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-					<template #review-projects>
-						<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.reviewProjects) }}
-					</template>
-					<template #tech-review>
-						<ShieldAlertIcon aria-hidden="true" /> {{ formatMessage(messages.techReview) }}
-					</template>
-					<template #review-reports>
-						<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.reports) }}
-					</template>
-					<template #external-projects>
-						<GlobeIcon aria-hidden="true" /> {{ formatMessage(messages.externalProjects) }}
-					</template>
-					<template #user-lookup>
-						<UserSearchIcon aria-hidden="true" /> {{ formatMessage(messages.lookupByEmail) }}
-					</template>
-					<template #file-lookup>
-						<FileIcon aria-hidden="true" /> {{ formatMessage(messages.fileLookup) }}
-					</template>
-					<template #servers-lookup> <ServerIcon aria-hidden="true" /> Server lookup </template>
-					<template #servers-notices>
-						<IssuesIcon aria-hidden="true" /> {{ formatMessage(messages.manageServerNotices) }}
-					</template>
-					<template #servers-transfers>
-						<TransferIcon aria-hidden="true" /> Server transfers
-					</template>
-					<template #affiliates>
-						<AffiliateIcon aria-hidden="true" /> {{ formatMessage(messages.manageAffiliates) }}
-					</template>
-					<template #servers-nodes>
-						<ServerIcon aria-hidden="true" /> Credit server nodes
-					</template>
-					<template #analytics-events>
-						<ChartIcon aria-hidden="true" /> {{ formatMessage(messages.analyticsEvents) }}
-					</template>
 				</TeleportOverflowMenu>
 				<TeleportOverflowMenu
 					v-if="auth.user"
@@ -515,17 +511,20 @@
 						{
 							id: 'new-project',
 							label: formatMessage(messages.newProject),
+							icon: BoxPlusIcon,
 							action: (event) => requireVerifiedEmail(() => $refs.modal_creation.show(event)),
 						},
 						{
 							id: 'new-server-project',
 							label: formatMessage(messages.newServerProject),
+							icon: ServerPlusIcon,
 							action: (event) =>
 								requireVerifiedEmail(() => $refs.modal_creation.show(event, { type: 'server' })),
 						},
 						{
 							id: 'new-collection',
 							label: formatMessage(messages.newCollection),
+							icon: CollectionPlusIcon,
 							action: (event) =>
 								requireVerifiedEmail(() => $refs.modal_collection_creation.show(event)),
 						},
@@ -533,6 +532,7 @@
 						{
 							id: 'new-organization',
 							label: formatMessage(messages.newOrganization),
+							icon: OrganizationPlusIcon,
 							action: (event) =>
 								requireVerifiedEmail(() => $refs.modal_organization_creation.show(event)),
 						},
@@ -540,19 +540,6 @@
 				>
 					<PlusIcon aria-hidden="true" />
 					{{ formatMessage(messages.publish) }}
-					<template #new-project>
-						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
-					</template>
-					<template #new-server-project>
-						<ServerIcon aria-hidden="true" /> {{ formatMessage(messages.newServerProject) }}
-					</template>
-					<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
-					<template #new-collection>
-						<CollectionIcon aria-hidden="true" /> {{ formatMessage(messages.newCollection) }}
-					</template>
-					<template #new-organization>
-						<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.newOrganization) }}
-					</template>
 				</TeleportOverflowMenu>
 				<TeleportOverflowMenu
 					v-if="auth.user"
@@ -566,57 +553,40 @@
 				>
 					<Avatar :src="auth.user.avatar_url" aria-hidden="true" circle />
 					<DropdownIcon class="h-5 w-5 text-secondary" />
-					<template #profile>
-						<UserIcon aria-hidden="true" /> {{ formatMessage(messages.profile) }}
-					</template>
-					<template #notifications>
-						<BellIcon aria-hidden="true" /> {{ formatMessage(commonMessages.notificationsLabel) }}
-					</template>
-					<template #reports>
-						<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.activeReports) }}
-					</template>
-					<template #saved>
-						<LibraryIcon aria-hidden="true" /> {{ formatMessage(commonMessages.collectionsLabel) }}
-					</template>
-					<template #servers>
-						<ServerStackIcon aria-hidden="true" /> {{ formatMessage(messages.myServers) }}
-					</template>
-					<template #plus>
-						<ArrowBigUpDashIcon aria-hidden="true" />
-						{{ formatMessage(messages.upgradeToModrinthPlus) }}
-					</template>
-					<template #settings>
-						<SettingsIcon aria-hidden="true" /> {{ formatMessage(commonMessages.settingsLabel) }}
-					</template>
-					<template #flags>
-						<ToggleRightIcon aria-hidden="true" />
-						{{ formatMessage(commonSettingsMessages.featureFlags) }}
-					</template>
-					<template #projects>
-						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.projects) }}
-					</template>
-					<template #organizations>
-						<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.organizations) }}
-					</template>
-					<template #affiliate-links>
-						<AffiliateIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.affiliateLinksButton) }}
-					</template>
-					<template #revenue>
-						<CurrencyIcon aria-hidden="true" /> {{ formatMessage(messages.revenue) }}
-					</template>
-					<template #analytics>
-						<ChartIcon aria-hidden="true" /> {{ formatMessage(commonMessages.analyticsButton) }}
-					</template>
-					<template #moderation>
-						<ScaleIcon aria-hidden="true" /> {{ formatMessage(commonMessages.moderationLabel) }}
-					</template>
-					<template #sign-out>
-						<LogOutIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signOutButton) }}
+					<template
+						v-for="account in accountSwitcherAccounts"
+						:key="account.id"
+						#[account.optionId]
+					>
+						<Avatar :src="account.avatarUrl" size="1.25rem" aria-hidden="true" circle />
+						{{ account.username }}
+						<UserRoleIcon :role="account.role" />
 					</template>
 				</TeleportOverflowMenu>
 				<template v-else>
-					<ButtonLink type="colored" color="brand" :to="signInRouteObj">
+					<TeleportOverflowMenu
+						v-if="accountSwitcherAccounts.length > 0"
+						type="colored"
+						color="brand"
+						:icon-only="false"
+						:label="formatMessage(commonMessages.signInButton)"
+						class="btn-dropdown-animation !gap-1 !pr-1"
+						:options="accountSwitcherOptions"
+					>
+						<LogInIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.signInButton) }}
+						<DropdownIcon class="h-5 w-5" />
+						<template
+							v-for="account in accountSwitcherAccounts"
+							:key="account.id"
+							#[account.optionId]
+						>
+							<Avatar :src="account.avatarUrl" size="1.25rem" aria-hidden="true" circle />
+							{{ account.username }}
+							<UserRoleIcon :role="account.role" />
+						</template>
+					</TeleportOverflowMenu>
+					<ButtonLink v-else type="colored" color="brand" :to="signInRouteObj">
 						<LogInIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.signInButton) }}
 					</ButtonLink>
@@ -835,27 +805,33 @@
 import {
 	AffiliateIcon,
 	ArrowBigUpDashIcon,
+	ArrowLeftRightIcon,
 	BellIcon,
+	BookOpenIcon,
 	BoxIcon,
+	BoxPlusIcon,
 	BracesIcon,
 	ChartIcon,
-	CollectionIcon,
+	CollectionPlusIcon,
 	CompassIcon,
 	CurrencyIcon,
 	DownloadIcon,
 	DropdownIcon,
-	FileIcon,
+	FileSearchCornerIcon,
 	GlassesIcon,
 	GlobeIcon,
 	HamburgerIcon,
+	HashIcon,
 	HomeIcon,
 	IssuesIcon,
 	LibraryIcon,
 	LogInIcon,
 	LogOutIcon,
+	MailIcon,
 	ModrinthIcon,
 	MoonIcon,
 	OrganizationIcon,
+	OrganizationPlusIcon,
 	PackageOpenIcon,
 	PaintbrushIcon,
 	PlugIcon,
@@ -864,6 +840,8 @@ import {
 	ScaleIcon,
 	SearchIcon,
 	ServerIcon,
+	ServerPlusIcon,
+	ServerSearchIcon,
 	ServerStackIcon,
 	SettingsIcon,
 	ShieldAlertIcon,
@@ -890,6 +868,7 @@ import {
 	providePageContext,
 	TeleportOverflowMenu,
 	useHostingIntercom,
+	UserRoleIcon,
 	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
@@ -911,7 +890,14 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
-import { getSignInRouteObj } from '~/composables/auth.ts'
+import {
+	forgetStoredAccount,
+	switchToSignedOut,
+	switchToStoredAccount,
+	useStoredAccounts,
+} from '~/composables/accounts.ts'
+import { getAddAccountRouteObj, getSignInRouteObj } from '~/composables/auth.ts'
+import { logout } from '~/composables/user.js'
 import { errors as generatedStateErrors, taxComplianceThresholds } from '~/generated/state.json'
 import { provideCurrentProjectId } from '~/providers/current-project.ts'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
@@ -933,6 +919,8 @@ const config = useRuntimeConfig()
 const route = useNativeRoute()
 const router = useNativeRouter()
 const signInRouteObj = computed(() => getSignInRouteObj(route))
+const addAccountRouteObj = computed(() => getAddAccountRouteObj(route))
+const storedAccounts = useStoredAccounts()
 const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 const client = injectModrinthClient()
 const pageContext = injectPageContext()
@@ -1101,9 +1089,9 @@ const messages = defineMessages({
 		id: 'layout.action.external-projects',
 		defaultMessage: 'External projects',
 	},
-	lookupByEmail: {
-		id: 'layout.action.lookup-by-email',
-		defaultMessage: 'Lookup by email',
+	userLookup: {
+		id: 'layout.action.user-lookup',
+		defaultMessage: 'User lookup',
 	},
 	fileLookup: {
 		id: 'layout.action.file-lookup',
@@ -1169,6 +1157,22 @@ const messages = defineMessages({
 		id: 'layout.nav.my-servers',
 		defaultMessage: 'My servers',
 	},
+	switchAccount: {
+		id: 'layout.nav.switch-account',
+		defaultMessage: 'Switch account',
+	},
+	addAccount: {
+		id: 'layout.nav.add-account',
+		defaultMessage: 'Add account',
+	},
+	removeAccount: {
+		id: 'layout.nav.remove-account',
+		defaultMessage: 'Remove account',
+	},
+	accountSwitchFailed: {
+		id: 'layout.nav.switch-account-failed',
+		defaultMessage: "Couldn't switch accounts. Please try again.",
+	},
 	openMenu: {
 		id: 'layout.mobile.open-menu',
 		defaultMessage: 'Open menu',
@@ -1252,6 +1256,61 @@ const navRoutes = computed(() => [
 	},
 ])
 
+const accountSwitcherAccounts = computed(() =>
+	storedAccounts.value.map((account) => ({
+		...account,
+		optionId: `account-${account.id}`,
+		current: account.id === auth.value.user?.id,
+	})),
+)
+
+const accountSwitcherOptions = computed(() => [
+	...accountSwitcherAccounts.value.map((account) => ({
+		id: account.optionId,
+		label: account.username,
+		selected: account.current,
+		action: () => switchAccount(account),
+		trailingAction: {
+			label: formatMessage(messages.removeAccount),
+			icon: XIcon,
+			color: 'red',
+			action: () => removeAccount(account),
+		},
+	})),
+	{
+		type: 'divider',
+	},
+	{
+		id: 'add-account',
+		label: formatMessage(messages.addAccount),
+		icon: PlusIcon,
+		type: 'link',
+		to: addAccountRouteObj.value,
+	},
+])
+
+async function switchAccount(account) {
+	if (account.current) return
+
+	const result = await switchToStoredAccount(account)
+	if (result === 'error') {
+		addNotification({
+			title: formatMessage(commonMessages.errorNotificationTitle),
+			text: formatMessage(messages.accountSwitchFailed),
+			type: 'error',
+		})
+	}
+}
+
+async function removeAccount(account) {
+	if (account.current) {
+		await logout()
+		return
+	}
+
+	forgetStoredAccount(account.id)
+}
+
 const userMenuOptions = computed(() => {
 	const user = auth.value.user
 	if (!user) return []
@@ -1260,12 +1319,14 @@ const userMenuOptions = computed(() => {
 		{
 			id: 'profile',
 			label: formatMessage(messages.profile),
+			icon: UserIcon,
 			type: 'link',
 			to: `/user/${user.username}`,
 		},
 		{
 			id: 'plus',
 			label: formatMessage(messages.upgradeToModrinthPlus),
+			icon: ArrowBigUpDashIcon,
 			type: 'link',
 			to: '/plus',
 			tone: 'purple',
@@ -1274,12 +1335,14 @@ const userMenuOptions = computed(() => {
 		{
 			id: 'servers',
 			label: formatMessage(messages.myServers),
+			icon: ServerStackIcon,
 			type: 'link',
 			to: '/hosting/manage',
 		},
 		{
 			id: 'flags',
 			label: formatMessage(commonSettingsMessages.featureFlags),
+			icon: ToggleRightIcon,
 			type: 'link',
 			to: '/settings/flags',
 			shown: flags.value.developerMode,
@@ -1287,6 +1350,7 @@ const userMenuOptions = computed(() => {
 		{
 			id: 'settings',
 			label: formatMessage(commonMessages.settingsLabel),
+			icon: SettingsIcon,
 			type: 'link',
 			to: '/settings',
 		},
@@ -1301,18 +1365,21 @@ const userMenuOptions = computed(() => {
 		{
 			id: 'notifications',
 			label: formatMessage(commonMessages.notificationsLabel),
+			icon: BellIcon,
 			type: 'link',
 			to: '/dashboard/notifications',
 		},
 		{
 			id: 'reports',
 			label: formatMessage(messages.activeReports),
+			icon: ReportIcon,
 			type: 'link',
 			to: '/dashboard/reports',
 		},
 		{
 			id: 'saved',
 			label: formatMessage(commonMessages.collectionsLabel),
+			icon: LibraryIcon,
 			type: 'link',
 			to: '/dashboard/collections',
 		},
@@ -1322,24 +1389,28 @@ const userMenuOptions = computed(() => {
 		{
 			id: 'projects',
 			label: formatMessage(messages.projects),
+			icon: BoxIcon,
 			type: 'link',
 			to: '/dashboard/projects',
 		},
 		{
 			id: 'organizations',
 			label: formatMessage(messages.organizations),
+			icon: OrganizationIcon,
 			type: 'link',
 			to: '/dashboard/organizations',
 		},
 		{
 			id: 'analytics',
 			label: formatMessage(commonMessages.analyticsButton),
+			icon: ChartIcon,
 			type: 'link',
 			to: '/dashboard/analytics',
 		},
 		{
 			id: 'affiliate-links',
 			label: formatMessage(commonMessages.affiliateLinksButton),
+			icon: AffiliateIcon,
 			type: 'link',
 			to: '/dashboard/affiliate-links',
 			shown: Boolean(user.badges & UserBadge.AFFILIATE),
@@ -1347,6 +1418,7 @@ const userMenuOptions = computed(() => {
 		{
 			id: 'revenue',
 			label: formatMessage(messages.revenue),
+			icon: CurrencyIcon,
 			type: 'link',
 			to: '/dashboard/revenue',
 		},
@@ -1357,9 +1429,17 @@ const userMenuOptions = computed(() => {
 		{
 			type: 'divider',
 		},
+		{
+			id: 'switch-account',
+			label: formatMessage(messages.switchAccount),
+			icon: ArrowLeftRightIcon,
+			type: 'submenu',
+			options: accountSwitcherOptions.value,
+		},
 		{
 			id: 'sign-out',
 			label: formatMessage(commonMessages.signOutButton),
+			icon: LogOutIcon,
 			tone: 'red',
 			hoverFilled: true,
 			action: () => logoutUser(),
@@ -1448,7 +1528,7 @@ watch(
 )
 
 async function logoutUser() {
-	await logout()
+	await switchToSignedOut()
 }
 
 function runAnalytics() {
diff --git a/apps/frontend/src/locales/ar-SA/index.json b/apps/frontend/src/locales/ar-SA/index.json
index 47b30ad99f..f6e06cbe37 100644
--- a/apps/frontend/src/locales/ar-SA/index.json
+++ b/apps/frontend/src/locales/ar-SA/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "متابعة"
   },
-  "admin.billing.error.not-found": {
-    "message": "المستخدم غير موجود"
-  },
   "ads-consent.accept": {
     "message": "قبول الكل"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "الموافقة مع الرد"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "إغلاق سلسلة المحادثة"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "الإغلاق مع الرد"
   },
@@ -2648,9 +2642,6 @@
   "layout.action.file-lookup": {
     "message": "البحث عن ملف"
   },
-  "layout.action.lookup-by-email": {
-    "message": "البحث باستخدام البريد الإلكتروني"
-  },
   "layout.action.manage-affiliates": {
     "message": "إدارة روابط العمولة"
   },
diff --git a/apps/frontend/src/locales/cs-CZ/index.json b/apps/frontend/src/locales/cs-CZ/index.json
index f6d1d7b698..03cb020d65 100644
--- a/apps/frontend/src/locales/cs-CZ/index.json
+++ b/apps/frontend/src/locales/cs-CZ/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Pokračovat"
   },
-  "admin.billing.error.not-found": {
-    "message": "Uživatel nebyl nalezen"
-  },
   "ads-consent.accept": {
     "message": "Přijmout vše"
   },
@@ -920,9 +917,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Schválit s odpovědí"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Uzavřít vlákno"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Uzavřít s odpovědí"
   },
diff --git a/apps/frontend/src/locales/da-DK/index.json b/apps/frontend/src/locales/da-DK/index.json
index 764723bd3e..62e33be61e 100644
--- a/apps/frontend/src/locales/da-DK/index.json
+++ b/apps/frontend/src/locales/da-DK/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Forsæt"
   },
-  "admin.billing.error.not-found": {
-    "message": "Bruger ikke fundet"
-  },
   "ads-consent.accept": {
     "message": "Tillad alle"
   },
@@ -680,9 +677,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Godkend med svar"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Luk tråd"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Luk med svar"
   },
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index c87485e341..0f03f6c968 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Weiter"
   },
-  "admin.billing.error.not-found": {
-    "message": "Benutzer nicht gefunden"
-  },
   "ads-consent.accept": {
     "message": "Alle akzeptieren"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Genehmigen mit Antwort"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Thread schliessen"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Schliessen mit Antwort"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "Datei ansehen"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Über E-Mail ansehen"
-  },
   "layout.action.manage-affiliates": {
     "message": "Partnerlinks verwalten"
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index 732779edb2..6effcf80be 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Weiter"
   },
-  "admin.billing.error.not-found": {
-    "message": "Benutzer nicht gefunden"
-  },
   "ads-consent.accept": {
     "message": "Alle akzeptieren"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Mit Antwort annehmen"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Thread schließen"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Mit Antwort schließen"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "Dateisuche"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Mit E-Mail suchen"
-  },
   "layout.action.manage-affiliates": {
     "message": "Partnerlinks verwalten"
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 38ef534d84..b55ccfdf5d 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continue"
   },
-  "admin.billing.error.not-found": {
-    "message": "User not found"
-  },
   "ads-consent.accept": {
     "message": "Accept all"
   },
@@ -821,6 +818,33 @@
   "auth.create-account.username.placeholder": {
     "message": "Enter username"
   },
+  "auth.reauthenticate.2fa.description": {
+    "message": "Enter the 6-digit code from your authenticator app, or one of your backup codes."
+  },
+  "auth.reauthenticate.2fa.label": {
+    "message": "Two-factor authentication"
+  },
+  "auth.reauthenticate.2fa.placeholder": {
+    "message": "Enter code..."
+  },
+  "auth.reauthenticate.continue-with-passkey": {
+    "message": "Continue with passkey"
+  },
+  "auth.reauthenticate.last-signed-in-with": {
+    "message": "It was last signed into with {method, select, password {a password} passkey {a passkey} github {GitHub} discord {Discord} google {Google} microsoft {Microsoft} gitlab {GitLab} steam {Steam} paypal {PayPal} other {{method}} }."
+  },
+  "auth.reauthenticate.page-title": {
+    "message": "Reauthenticate"
+  },
+  "auth.reauthenticate.sign-in-another-way": {
+    "message": "Sign in another way"
+  },
+  "auth.reauthenticate.sign-in-with-provider": {
+    "message": "Sign in with {provider}"
+  },
+  "auth.reauthenticate.title": {
+    "message": "{name} needs to be reauthenticated."
+  },
   "auth.reset-password.method-choice.action": {
     "message": "Send recovery email"
   },
@@ -863,6 +887,12 @@
   "auth.sign-in.2fa.placeholder": {
     "message": "Enter code..."
   },
+  "auth.sign-in.add-account": {
+    "message": "Add account"
+  },
+  "auth.sign-in.choose-account": {
+    "message": "Choose an account to use in Modrinth App"
+  },
   "auth.sign-in.continue-with-email": {
     "message": "Continue with Email"
   },
@@ -881,6 +911,9 @@
   "auth.sign-in.launcher.complete.description": {
     "message": "We’re returning you to the Modrinth App. If nothing happens, use the button below."
   },
+  "auth.sign-in.launcher.complete.go-to-website": {
+    "message": "Go to Modrinth.com"
+  },
   "auth.sign-in.launcher.complete.return-button": {
     "message": "Open Modrinth App"
   },
@@ -1037,8 +1070,8 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Approve with reply"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Close thread"
+  "conversation-thread.action.close-report": {
+    "message": "Close report"
   },
   "conversation-thread.action.close-with-reply": {
     "message": "Close with reply"
@@ -2204,6 +2237,12 @@
   "error.generic.401.signed-in-as": {
     "message": "You're currently signed in as:"
   },
+  "error.generic.401.switch-account": {
+    "message": "Or switch to another account:"
+  },
+  "error.generic.401.switch-account-failed": {
+    "message": "Couldn't switch accounts. Please try again."
+  },
   "error.generic.401.title": {
     "message": "You don't have access to this page"
   },
@@ -2660,9 +2699,6 @@
   "layout.action.file-lookup": {
     "message": "File lookup"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Lookup by email"
-  },
   "layout.action.manage-affiliates": {
     "message": "Manage affiliate links"
   },
@@ -2693,6 +2729,9 @@
   "layout.action.tech-review": {
     "message": "Tech review"
   },
+  "layout.action.user-lookup": {
+    "message": "User lookup"
+  },
   "layout.avatar.alt": {
     "message": "Your avatar"
   },
@@ -2888,6 +2927,9 @@
   "layout.nav.active-reports": {
     "message": "Active reports"
   },
+  "layout.nav.add-account": {
+    "message": "Add account"
+  },
   "layout.nav.discover": {
     "message": "Discover"
   },
@@ -2918,6 +2960,9 @@
   "layout.nav.projects": {
     "message": "Projects"
   },
+  "layout.nav.remove-account": {
+    "message": "Remove account"
+  },
   "layout.nav.revenue": {
     "message": "Revenue"
   },
@@ -2927,6 +2972,12 @@
   "layout.nav.search": {
     "message": "Search"
   },
+  "layout.nav.switch-account": {
+    "message": "Switch account"
+  },
+  "layout.nav.switch-account-failed": {
+    "message": "Couldn't switch accounts. Please try again."
+  },
   "layout.nav.upgrade-to-modrinth-plus": {
     "message": "Upgrade to Modrinth+"
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index cc2d944a80..194bc96123 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continuar"
   },
-  "admin.billing.error.not-found": {
-    "message": "Usuario no encontrado"
-  },
   "ads-consent.accept": {
     "message": "Aceptar todo"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Aprovar con respuesta"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Cerrar hilo"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Cerrar con respuesta"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "Buscar archivo"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Buscar por correo electrónico"
-  },
   "layout.action.manage-affiliates": {
     "message": "Gestionar enlaces de afiliado"
   },
diff --git a/apps/frontend/src/locales/es-ES/index.json b/apps/frontend/src/locales/es-ES/index.json
index ad2ef88bd8..5425a5dfe4 100644
--- a/apps/frontend/src/locales/es-ES/index.json
+++ b/apps/frontend/src/locales/es-ES/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continuar"
   },
-  "admin.billing.error.not-found": {
-    "message": "Usuario no encontrado"
-  },
   "ads-consent.accept": {
     "message": "Aceptar todos"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Aprobar con respuesta"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Cerrar hilo"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Cerrar con respuesta"
   },
@@ -2642,9 +2636,6 @@
   "layout.action.file-lookup": {
     "message": "Búsqueda de archivos"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Búsqueda por correo electrónico"
-  },
   "layout.action.manage-affiliates": {
     "message": "Manejar enlaces de afiliados"
   },
diff --git a/apps/frontend/src/locales/fi-FI/index.json b/apps/frontend/src/locales/fi-FI/index.json
index b8770d3b10..4b1bbeb534 100644
--- a/apps/frontend/src/locales/fi-FI/index.json
+++ b/apps/frontend/src/locales/fi-FI/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Jatka"
   },
-  "admin.billing.error.not-found": {
-    "message": "Käyttäjää ei löydetty"
-  },
   "analytics.action.add": {
     "message": "Lisää"
   },
@@ -386,9 +383,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Hyväksy vastauksella"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Sulje keskustelu"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Sulje vastauksella"
   },
diff --git a/apps/frontend/src/locales/fil-PH/index.json b/apps/frontend/src/locales/fil-PH/index.json
index 30a2503c92..fb16e988b8 100644
--- a/apps/frontend/src/locales/fil-PH/index.json
+++ b/apps/frontend/src/locales/fil-PH/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Tumuloy"
   },
-  "admin.billing.error.not-found": {
-    "message": "Hindi mahanap na tagagamit"
-  },
   "analytics.action.add": {
     "message": "Magdagdag"
   },
@@ -1625,9 +1622,6 @@
   "layout.action.file-lookup": {
     "message": "File lookup"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Lookup by email"
-  },
   "layout.action.manage-affiliates": {
     "message": "Pamahalaan ang mga affiliate link"
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index 8bc258d58a..479eb460ad 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continuer"
   },
-  "admin.billing.error.not-found": {
-    "message": "Utilisateur non trouvé"
-  },
   "ads-consent.accept": {
     "message": "Tout accepter"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Approuver avec réponse"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Fermer le fil"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Fermer avec réponse"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "Recherche de fichier"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Recherche par adresse e-mail"
-  },
   "layout.action.manage-affiliates": {
     "message": "Gérer les liens affiliés"
   },
diff --git a/apps/frontend/src/locales/he-IL/index.json b/apps/frontend/src/locales/he-IL/index.json
index 03211ecae1..758f5f3c0d 100644
--- a/apps/frontend/src/locales/he-IL/index.json
+++ b/apps/frontend/src/locales/he-IL/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "המשך"
   },
-  "admin.billing.error.not-found": {
-    "message": "משתמש לא קיים"
-  },
   "ads-consent.accept": {
     "message": "אשר הכול"
   },
@@ -1448,9 +1445,6 @@
   "layout.action.file-lookup": {
     "message": "חיפוש קבצים"
   },
-  "layout.action.lookup-by-email": {
-    "message": "חיפוש על ידי אימייל"
-  },
   "layout.action.manage-affiliates": {
     "message": "נהל את קישורי השותפים"
   },
diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index b9c89ad106..bbb20fe541 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Tovább"
   },
-  "admin.billing.error.not-found": {
-    "message": "Felhasználó nem található"
-  },
   "ads-consent.accept": {
     "message": "Összes elfogadása"
   },
@@ -1010,9 +1007,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Jóváhagyás és válasz"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Gondolatmenet lezárása"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Bezárás és válasz"
   },
@@ -2504,9 +2498,6 @@
   "layout.action.file-lookup": {
     "message": "Fájl keresés"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Keresés e-mail cím alapján"
-  },
   "layout.action.manage-affiliates": {
     "message": "Partnerlinkek kezelése"
   },
diff --git a/apps/frontend/src/locales/id-ID/index.json b/apps/frontend/src/locales/id-ID/index.json
index 45830bf334..7b69f186ec 100644
--- a/apps/frontend/src/locales/id-ID/index.json
+++ b/apps/frontend/src/locales/id-ID/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Lanjutkan"
   },
-  "admin.billing.error.not-found": {
-    "message": "Pengguna tidak ditemukan"
-  },
   "analytics.action.add": {
     "message": "Tambah"
   },
@@ -1640,9 +1637,6 @@
   "layout.action.file-lookup": {
     "message": "Pencarian berkas"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Cari dengan sur-el"
-  },
   "layout.action.manage-affiliates": {
     "message": "Kelola tautan afiliasi"
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index 29d0ed2341..69b585c535 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continua"
   },
-  "admin.billing.error.not-found": {
-    "message": "Utente non trovato"
-  },
   "ads-consent.accept": {
     "message": "Accetta tutto"
   },
@@ -1022,9 +1019,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Approva con risposta"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Chiudi thread"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Chiudi con risposta"
   },
@@ -2642,9 +2636,6 @@
   "layout.action.file-lookup": {
     "message": "Trova file"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Trova tramite email"
-  },
   "layout.action.manage-affiliates": {
     "message": "Gestisci link affiliati"
   },
diff --git a/apps/frontend/src/locales/ja-JP/index.json b/apps/frontend/src/locales/ja-JP/index.json
index d38a99e820..840803cd3d 100644
--- a/apps/frontend/src/locales/ja-JP/index.json
+++ b/apps/frontend/src/locales/ja-JP/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "続ける"
   },
-  "admin.billing.error.not-found": {
-    "message": "ユーザーが見つかりませんでした"
-  },
   "ads-consent.accept": {
     "message": "すべて受け入れる"
   },
@@ -1025,9 +1022,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "送信して承認"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "スレッドを閉じる"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "返信して閉じる"
   },
@@ -2537,9 +2531,6 @@
   "layout.action.file-lookup": {
     "message": "ファイル検索"
   },
-  "layout.action.lookup-by-email": {
-    "message": "メールで探す"
-  },
   "layout.action.manage-affiliates": {
     "message": "アフィリエイトリンクを管理"
   },
diff --git a/apps/frontend/src/locales/ko-KR/index.json b/apps/frontend/src/locales/ko-KR/index.json
index d4e6e7f38f..63581092e7 100644
--- a/apps/frontend/src/locales/ko-KR/index.json
+++ b/apps/frontend/src/locales/ko-KR/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "계속"
   },
-  "admin.billing.error.not-found": {
-    "message": "사용자를 찾을 수 없습니다"
-  },
   "ads-consent.accept": {
     "message": "모두 수용"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "답글과 함께 승인"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "스레드 닫기"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "답글과 함께 닫기"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "파일 찾기"
   },
-  "layout.action.lookup-by-email": {
-    "message": "이메일로 찾기"
-  },
   "layout.action.manage-affiliates": {
     "message": "제휴 링크 관리"
   },
diff --git a/apps/frontend/src/locales/ms-MY/index.json b/apps/frontend/src/locales/ms-MY/index.json
index d04525a217..4ea4fc473b 100644
--- a/apps/frontend/src/locales/ms-MY/index.json
+++ b/apps/frontend/src/locales/ms-MY/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Teruskan"
   },
-  "admin.billing.error.not-found": {
-    "message": "Pengguna tidak dijumpai"
-  },
   "analytics.action.add": {
     "message": "Tambah"
   },
@@ -797,9 +794,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Luluskan dengan balasan"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Tutup bebenang"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Tutup dengan balasan"
   },
@@ -2156,9 +2150,6 @@
   "layout.action.file-lookup": {
     "message": "Carian fail"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Cari melalui e-mel"
-  },
   "layout.action.manage-affiliates": {
     "message": "Urus pautan afiliasi"
   },
diff --git a/apps/frontend/src/locales/nl-NL/index.json b/apps/frontend/src/locales/nl-NL/index.json
index a539bd0d5b..334a5465fc 100644
--- a/apps/frontend/src/locales/nl-NL/index.json
+++ b/apps/frontend/src/locales/nl-NL/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Doorgaan"
   },
-  "admin.billing.error.not-found": {
-    "message": "Gebruiker niet gevonden"
-  },
   "ads-consent.accept": {
     "message": "Alles accepteren"
   },
@@ -1025,9 +1022,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Accepteren met antwoord"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Sluit thread"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Sluit met antwoord"
   },
@@ -2648,9 +2642,6 @@
   "layout.action.file-lookup": {
     "message": "Bestand opzoeken"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Zoek op via email"
-  },
   "layout.action.manage-affiliates": {
     "message": "Beheer partner links"
   },
diff --git a/apps/frontend/src/locales/no-NO/index.json b/apps/frontend/src/locales/no-NO/index.json
index 3758300d1d..d5c2ff953d 100644
--- a/apps/frontend/src/locales/no-NO/index.json
+++ b/apps/frontend/src/locales/no-NO/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Fortsett"
   },
-  "admin.billing.error.not-found": {
-    "message": "Bruker ikke funnet"
-  },
   "analytics.action.add": {
     "message": "Legg til"
   },
@@ -797,9 +794,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Godkjenn med svar"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Lukk tråden"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Lukk med svar"
   },
@@ -2078,9 +2072,6 @@
   "layout.action.file-lookup": {
     "message": "Filoppslag"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Bla gjennom med email"
-  },
   "layout.action.manage-affiliates": {
     "message": "Hold styr på tilknytte lenker"
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index 99314c5c1d..128c1a3388 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Kontynuuj"
   },
-  "admin.billing.error.not-found": {
-    "message": "Nie znaleziono użytkownika"
-  },
   "ads-consent.accept": {
     "message": "Zaakceptuj wszystko"
   },
@@ -1025,9 +1022,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Zatwierdź z odpowiedzią "
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Zamknij wątek"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Zamknij z odpowiedzią"
   },
@@ -2645,9 +2639,6 @@
   "layout.action.file-lookup": {
     "message": "Wyszukiwarka plików"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Szukaj po e-mailu"
-  },
   "layout.action.manage-affiliates": {
     "message": "Zarządzaj linkami afiliacyjnymi"
   },
diff --git a/apps/frontend/src/locales/pt-BR/index.json b/apps/frontend/src/locales/pt-BR/index.json
index 151f71a783..9aa7c48301 100644
--- a/apps/frontend/src/locales/pt-BR/index.json
+++ b/apps/frontend/src/locales/pt-BR/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continuar"
   },
-  "admin.billing.error.not-found": {
-    "message": "Usuário não encontrado"
-  },
   "ads-consent.accept": {
     "message": "Aceitar todos"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Aprovar com resposta"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Encerrar tópico"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Encerrar com resposta"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "Procurar arquivo"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Procurar por e-mail"
-  },
   "layout.action.manage-affiliates": {
     "message": "Gerenciar links de afiliado"
   },
diff --git a/apps/frontend/src/locales/pt-PT/index.json b/apps/frontend/src/locales/pt-PT/index.json
index 3376ba1498..8b0b13a258 100644
--- a/apps/frontend/src/locales/pt-PT/index.json
+++ b/apps/frontend/src/locales/pt-PT/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continuar"
   },
-  "admin.billing.error.not-found": {
-    "message": "Utilizador não encontrado"
-  },
   "ads-consent.accept": {
     "message": "Aceitar todos"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Aprovar com comentário"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Fechar tópico"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Fechar com comentário"
   },
@@ -2324,9 +2318,6 @@
   "layout.action.file-lookup": {
     "message": "Pesquisa de ficheiros"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Pesquisa por e-mail"
-  },
   "layout.action.manage-affiliates": {
     "message": "Gerir links de afiliado"
   },
diff --git a/apps/frontend/src/locales/ro-RO/index.json b/apps/frontend/src/locales/ro-RO/index.json
index 687b682103..617152b767 100644
--- a/apps/frontend/src/locales/ro-RO/index.json
+++ b/apps/frontend/src/locales/ro-RO/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Continuă"
   },
-  "admin.billing.error.not-found": {
-    "message": "Utilizatorul nu a fost găsit"
-  },
   "app-marketing.download.description": {
     "message": "Aplicația noastră de desktop este disponibilă pe toate platformele, alege versiunea ta favorită."
   },
@@ -941,9 +938,6 @@
   "layout.action.file-lookup": {
     "message": "Căutare fișier"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Căutare după email"
-  },
   "layout.action.manage-server-notices": {
     "message": "Administrează notificările serverului"
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index d1acc7ad67..fe9c8c96cb 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Продолжить"
   },
-  "admin.billing.error.not-found": {
-    "message": "Пользователь не найден"
-  },
   "ads-consent.accept": {
     "message": "Принять всё"
   },
@@ -1022,9 +1019,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Одобрить с ответом"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Закрыть ветку"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Закрыть с ответом"
   },
@@ -2645,9 +2639,6 @@
   "layout.action.file-lookup": {
     "message": "Поиск файла"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Поиск по почте"
-  },
   "layout.action.manage-affiliates": {
     "message": "Партнёрские ссылки"
   },
diff --git a/apps/frontend/src/locales/sr-CS/index.json b/apps/frontend/src/locales/sr-CS/index.json
index 32a24201b9..5149d6a3b9 100644
--- a/apps/frontend/src/locales/sr-CS/index.json
+++ b/apps/frontend/src/locales/sr-CS/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Nastavi"
   },
-  "admin.billing.error.not-found": {
-    "message": "Korisnik nije pronađen"
-  },
   "ads-consent.accept": {
     "message": "Prihvati sve"
   },
diff --git a/apps/frontend/src/locales/sv-SE/index.json b/apps/frontend/src/locales/sv-SE/index.json
index 9e0d5a8ddb..149f8fd755 100644
--- a/apps/frontend/src/locales/sv-SE/index.json
+++ b/apps/frontend/src/locales/sv-SE/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Fortsätt"
   },
-  "admin.billing.error.not-found": {
-    "message": "Användaren hittades inte"
-  },
   "ads-consent.accept": {
     "message": "Godkänn alla"
   },
@@ -962,9 +959,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Godkänn med svar"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Stäng tråd"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Stäng med svar"
   },
@@ -2462,9 +2456,6 @@
   "layout.action.file-lookup": {
     "message": "Sök efter fil"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Sök efter e-post"
-  },
   "layout.action.manage-affiliates": {
     "message": "Hantera affiliatelänk"
   },
diff --git a/apps/frontend/src/locales/th-TH/index.json b/apps/frontend/src/locales/th-TH/index.json
index 2f68d5803c..f28defc02d 100644
--- a/apps/frontend/src/locales/th-TH/index.json
+++ b/apps/frontend/src/locales/th-TH/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "ดำเนินการต่อ"
   },
-  "admin.billing.error.not-found": {
-    "message": "ไม่พบผู้ใช้นี้"
-  },
   "analytics.action.add": {
     "message": "เพิ่ม"
   },
diff --git a/apps/frontend/src/locales/tr-TR/index.json b/apps/frontend/src/locales/tr-TR/index.json
index bbfc56269d..50cd9bac2e 100644
--- a/apps/frontend/src/locales/tr-TR/index.json
+++ b/apps/frontend/src/locales/tr-TR/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Devam et"
   },
-  "admin.billing.error.not-found": {
-    "message": "Kullanıcı bulunamadı"
-  },
   "ads-consent.accept": {
     "message": "Tümünü kabul et"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Onaylandı, işlem tamamlandı"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Konuyu kapat"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Cevapla ve kapat"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "Dosya bulma"
   },
-  "layout.action.lookup-by-email": {
-    "message": "E-posta ile arama"
-  },
   "layout.action.manage-affiliates": {
     "message": "Ortaklık linklerini yönet"
   },
diff --git a/apps/frontend/src/locales/uk-UA/index.json b/apps/frontend/src/locales/uk-UA/index.json
index d61de69c23..408c0b7075 100644
--- a/apps/frontend/src/locales/uk-UA/index.json
+++ b/apps/frontend/src/locales/uk-UA/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Продовжити"
   },
-  "admin.billing.error.not-found": {
-    "message": "Користувача не знайдено"
-  },
   "ads-consent.accept": {
     "message": "Прийняти всі"
   },
@@ -1025,9 +1022,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Підтвердити з відповіддю"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Закрити тему"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Закрити з відповіддю"
   },
@@ -2648,9 +2642,6 @@
   "layout.action.file-lookup": {
     "message": "Пошук файлів"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Пошук електронною поштою"
-  },
   "layout.action.manage-affiliates": {
     "message": "Керувати партнерськими посиланнями"
   },
diff --git a/apps/frontend/src/locales/vi-VN/index.json b/apps/frontend/src/locales/vi-VN/index.json
index 7ea9248194..f03702f255 100644
--- a/apps/frontend/src/locales/vi-VN/index.json
+++ b/apps/frontend/src/locales/vi-VN/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "Tiếp tục"
   },
-  "admin.billing.error.not-found": {
-    "message": "Không tìm thấy người dùng"
-  },
   "ads-consent.accept": {
     "message": "Chấp nhận tất cả"
   },
@@ -911,9 +908,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "Chấp thuận với phản hồi"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "Đóng luồng"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "Đóng với phản hồi"
   },
@@ -2321,9 +2315,6 @@
   "layout.action.file-lookup": {
     "message": "Tra cứu tệp"
   },
-  "layout.action.lookup-by-email": {
-    "message": "Tra cứu theo email"
-  },
   "layout.action.manage-affiliates": {
     "message": "Quản lý link affiliate"
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index f9adaf04c5..77fffff085 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "继续"
   },
-  "admin.billing.error.not-found": {
-    "message": "用户不存在"
-  },
   "ads-consent.accept": {
     "message": "全部接受"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "批准并回复"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "关闭对话消息"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "关闭并回复"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "文件查询"
   },
-  "layout.action.lookup-by-email": {
-    "message": "通过电子邮箱查找"
-  },
   "layout.action.manage-affiliates": {
     "message": "管理推广链接"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index fcabb641de..984d673a02 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -5,9 +5,6 @@
   "action.continue": {
     "message": "繼續"
   },
-  "admin.billing.error.not-found": {
-    "message": "找不到使用者"
-  },
   "ads-consent.accept": {
     "message": "全部接受"
   },
@@ -1028,9 +1025,6 @@
   "conversation-thread.action.approve-with-reply": {
     "message": "回覆並核准"
   },
-  "conversation-thread.action.close-thread": {
-    "message": "關閉討論串"
-  },
   "conversation-thread.action.close-with-reply": {
     "message": "回覆並關閉"
   },
@@ -2651,9 +2645,6 @@
   "layout.action.file-lookup": {
     "message": "檔案查詢"
   },
-  "layout.action.lookup-by-email": {
-    "message": "依電子郵件查詢"
-  },
   "layout.action.manage-affiliates": {
     "message": "管理聯盟連結"
   },
diff --git a/apps/frontend/src/middleware/auth.ts b/apps/frontend/src/middleware/auth.ts
index fc94786878..70e7ac7e5b 100644
--- a/apps/frontend/src/middleware/auth.ts
+++ b/apps/frontend/src/middleware/auth.ts
@@ -1,8 +1,8 @@
 const whitelistedParams = ['flow', 'error']
 
-export default defineNuxtRouteMiddleware(async (_to, from) => {
+export default defineNuxtRouteMiddleware(async (to, from) => {
 	const config = useRuntimeConfig()
-	const auth = await useAuth()
+	const auth = await useAuth(null, to)
 
 	if (auth.value.user) return
 
diff --git a/apps/frontend/src/middleware/project.global.ts b/apps/frontend/src/middleware/project.global.ts
index ba5a0bcebe..7319cfd354 100644
--- a/apps/frontend/src/middleware/project.global.ts
+++ b/apps/frontend/src/middleware/project.global.ts
@@ -1,3 +1,5 @@
+import type { RouteLocationNormalized } from 'vue-router'
+
 import { useGeneratedState } from '~/composables/generated'
 import { projectQueryOptions, warmProjectCheckCaches } from '~/composables/queries/project'
 import { useAppQueryClient } from '~/composables/query-client'
@@ -29,7 +31,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
 	}
 
 	const queryClient = useAppQueryClient()
-	const client = await getProjectMiddlewareClient()
+	const client = await getProjectMiddlewareClient(to)
 	const tags = useGeneratedState()
 
 	if (import.meta.client) startLoading()
@@ -85,13 +87,13 @@ export default defineNuxtRouteMiddleware(async (to) => {
 	}
 })
 
-async function getProjectMiddlewareClient() {
+async function getProjectMiddlewareClient(route: RouteLocationNormalized) {
 	if (import.meta.server) {
 		const authToken = useCookie('auth-token')
 		return useServerModrinthClient({ authToken: authToken.value || undefined })
 	}
 
-	const auth = await useAuth()
+	const auth = await useAuth(null, route)
 	const config = useRuntimeConfig()
 
 	return createModrinthClient(auth, {
diff --git a/apps/frontend/src/middleware/staff.ts b/apps/frontend/src/middleware/staff.ts
index 70167bf20c..bb6a33765d 100644
--- a/apps/frontend/src/middleware/staff.ts
+++ b/apps/frontend/src/middleware/staff.ts
@@ -1,7 +1,7 @@
 import { isStaff } from '@modrinth/utils'
 
-export default defineNuxtRouteMiddleware(async () => {
-	const auth = await useAuth()
+export default defineNuxtRouteMiddleware(async (to) => {
+	const auth = await useAuth(null, to)
 
 	if (!auth.value.user || !isStaff(auth.value.user)) {
 		throw createError({
diff --git a/apps/frontend/src/pages/[type]/[project]/changelog.vue b/apps/frontend/src/pages/[type]/[project]/changelog.vue
index e311f93f24..5316b247a3 100644
--- a/apps/frontend/src/pages/[type]/[project]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[project]/changelog.vue
@@ -92,6 +92,7 @@
 import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	ButtonLink,
+	getEnvironmentFilterValue,
 	injectModrinthClient,
 	injectProjectPageContext,
 	MarkdownBody,
@@ -141,6 +142,7 @@ const filteredVersions = computed(() => {
 	const selectedGameVersions = getArrayOrString(route.query.g) ?? []
 	const selectedLoaders = getArrayOrString(route.query.l) ?? []
 	const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
+	const selectedEnvironments = getArrayOrString(route.query.e) ?? []
 
 	return versions.value.filter(
 		(projectVersion) =>
@@ -151,7 +153,9 @@ const filteredVersions = computed(() => {
 			(selectedLoaders.length === 0 ||
 				selectedLoaders.some((loader) => getVersionLoaders(projectVersion).includes(loader))) &&
 			(selectedVersionTypes.length === 0 ||
-				selectedVersionTypes.includes(projectVersion.version_type)),
+				selectedVersionTypes.includes(projectVersion.version_type)) &&
+			(selectedEnvironments.length === 0 ||
+				selectedEnvironments.includes(getEnvironmentFilterValue(projectVersion.environment) ?? '')),
 	)
 })
 
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/[type]/[project]/version/[version].vue b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
index 193aeb89f7..13c0843d36 100644
--- a/apps/frontend/src/pages/[type]/[project]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
@@ -89,12 +89,11 @@
 			@download="emit('onDownload')"
 		/>
 		<div class="flex flex-col">
-			<nuxt-link
-				class="mb-4 flex w-fit items-center gap-2 rounded-lg px-2 py-0.5 pl-0 text-link"
+			<BackToParentLink
 				:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
 			>
-				<ChevronLeftIcon class="shrink-0" /> {{ formatMessage(messages.allVersions) }}
-			</nuxt-link>
+				{{ formatMessage(messages.allVersions) }}
+			</BackToParentLink>
 			<template v-if="version">
 				<Admonition
 					v-if="version.files_missing_attribution?.length"
@@ -521,6 +520,7 @@ import {
 import { moderationSettings } from '@modrinth/moderation'
 import {
 	Admonition,
+	BackToParentLink,
 	Button,
 	ButtonLink,
 	Collapsible,
diff --git a/apps/frontend/src/pages/admin.vue b/apps/frontend/src/pages/admin.vue
index ba470e6902..370399b2d5 100644
--- a/apps/frontend/src/pages/admin.vue
+++ b/apps/frontend/src/pages/admin.vue
@@ -1,4 +1,104 @@
+<template>
+	<div>
+		<NormalPage sidebar="left">
+			<template #header>
+				<h1 class="m-0 text-3xl font-semibold">Admin</h1>
+			</template>
+			<template #sidebar>
+				<NavStack
+					aria-label="Admin navigation"
+					:items="[
+						{ type: 'heading', label: 'Lookup' },
+						{
+							link: '/admin/file_lookup',
+							label: 'File lookup',
+							icon: FileSearchCornerIcon,
+						},
+						{
+							link: '/admin/user_email',
+							label: 'User lookup',
+							icon: UserSearchIcon,
+							shown: admin,
+						},
+						{
+							type: 'heading',
+							label: 'Hosting',
+							shown: admin,
+						},
+						{
+							link: '/admin/servers/lookup',
+							label: 'Server lookup',
+							icon: ServerSearchIcon,
+							shown: admin,
+						},
+						{
+							link: '/admin/servers/notices',
+							label: 'Server notices',
+							icon: IssuesIcon,
+							shown: admin,
+						},
+						{
+							link: '/admin/servers/transfers',
+							label: 'Server transfers',
+							icon: TransferIcon,
+							shown: admin,
+						},
+						{
+							type: 'heading',
+							label: 'Management',
+							shown: admin,
+						},
+						{
+							link: '/admin/affiliates',
+							label: 'Affiliate links',
+							icon: AffiliateIcon,
+							shown: admin,
+						},
+						{
+							link: '/admin/analytics/events',
+							label: 'Analytics events',
+							icon: ChartIcon,
+							shown: admin,
+						},
+						{ type: 'heading', label: 'Templates' },
+						{
+							link: '/admin/emails',
+							label: 'Email templates',
+							icon: MailIcon,
+						},
+						{
+							link: '/admin/docs',
+							label: 'Document templates',
+							icon: BookOpenIcon,
+						},
+					]"
+				/>
+			</template>
+			<NuxtPage :route="route" />
+		</NormalPage>
+	</div>
+</template>
 <script setup lang="ts">
+import {
+	AffiliateIcon,
+	BookOpenIcon,
+	ChartIcon,
+	FileSearchCornerIcon,
+	IssuesIcon,
+	MailIcon,
+	ServerSearchIcon,
+	TransferIcon,
+	UserSearchIcon,
+} from '@modrinth/assets'
+import { NormalPage } from '@modrinth/ui'
+import { isAdmin } from '@modrinth/utils'
+
+import NavStack from '~/components/ui/NavStack.vue'
+
+const auth = await useAuth()
+const route = useNativeRoute()
+const admin = computed(() => isAdmin(auth.value.user))
+
 definePageMeta({
 	middleware: ['auth', 'staff'],
 })
@@ -7,6 +107,3 @@ useSeoMeta({
 	robots: 'noindex',
 })
 </script>
-<template>
-	<NuxtPage />
-</template>
diff --git a/apps/frontend/src/pages/admin/affiliates.vue b/apps/frontend/src/pages/admin/affiliates.vue
index 7d2db99a25..097963108c 100644
--- a/apps/frontend/src/pages/admin/affiliates.vue
+++ b/apps/frontend/src/pages/admin/affiliates.vue
@@ -13,11 +13,9 @@
 		:proceed-label="`Revoke`"
 		@proceed="confirmRevokeAffiliateCode"
 	/>
-	<div class="page">
-		<div
-			class="mb-6 flex items-center gap-6 border-0 border-b-[1px] border-solid border-divider pb-6"
-		>
-			<h1 class="m-0 grow text-2xl font-extrabold">Manage affiliate links</h1>
+	<div>
+		<div class="mb-4 flex items-center justify-between gap-4">
+			<h2 class="m-0 text-2xl font-semibold">Manage affiliate links</h2>
 			<div class="flex items-center gap-2">
 				<Input
 					v-model="filterQuery"
@@ -260,12 +258,3 @@ async function confirmRevokeAffiliateCode() {
 	}
 }
 </script>
-
-<style lang="scss" scoped>
-.page {
-	padding: 1rem;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 78.5rem;
-}
-</style>
diff --git a/apps/frontend/src/pages/admin/analytics/events.vue b/apps/frontend/src/pages/admin/analytics/events.vue
index ddfb40773e..81b05716e0 100644
--- a/apps/frontend/src/pages/admin/analytics/events.vue
+++ b/apps/frontend/src/pages/admin/analytics/events.vue
@@ -125,108 +125,105 @@
 		</template>
 	</NewModal>
 
-	<div class="normal-page no-sidebar">
-		<div class="normal-page__content flex flex-col gap-4">
-			<div class="mt-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-				<h1 class="m-0 text-2xl font-extrabold text-contrast">Analytics Events</h1>
+	<div class="flex flex-col gap-4">
+		<div class="flex items-center justify-between gap-4">
+			<h2 class="m-0 text-2xl font-semibold">Analytics events</h2>
+			<div class="flex flex-wrap items-center gap-2">
+				<Input
+					v-model="searchQuery"
+					:icon="SearchIcon"
+					type="search"
+					placeholder="Search..."
+					clearable
+					wrapper-class="w-full sm:w-72"
+				/>
+				<Button type="colored" color="brand" :disabled="isSaving" @click="openCreateModal">
+					<PlusIcon aria-hidden="true" />
+					New event
+				</Button>
+			</div>
+		</div>
 
-				<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
-					<Input
-						v-model="searchQuery"
-						:icon="SearchIcon"
-						type="search"
-						placeholder="Search..."
-						clearable
-						wrapper-class="w-full sm:w-72"
-					/>
-					<Button type="colored" color="brand" :disabled="isSaving" @click="openCreateModal">
-						<PlusIcon aria-hidden="true" />
-						New event
+		<Table
+			v-model:sort-column="sortColumn"
+			v-model:sort-direction="sortDirection"
+			:columns="columns"
+			:data="sortedEvents"
+			row-key="id"
+		>
+			<template #cell-title="{ row }">
+				<span class="line-clamp-2 font-medium text-primary">{{ row.title }}</span>
+			</template>
+
+			<template #cell-announcement="{ row }">
+				<a
+					v-if="row.announcement_url"
+					:href="row.announcement_url"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="inline-flex items-center gap-1 font-medium text-primary hover:text-contrast"
+				>
+					Open link
+					<ExternalIcon class="size-4" aria-hidden="true" />
+				</a>
+				<span v-else class="text-xs font-medium text-primary">—</span>
+			</template>
+
+			<template #cell-date="{ row }">
+				<div
+					v-if="isEventDateRange(row)"
+					class="flex flex-col gap-0.5 text-sm font-medium leading-5 text-primary"
+				>
+					<span>{{ formatEventDateRangeStart(row) }} -</span>
+					<span>{{ formatEventDateRangeEnd(row) }}</span>
+				</div>
+				<span v-else class="font-medium text-primary">{{ formatEventDateRange(row) }}</span>
+			</template>
+
+			<template #cell-metrics="{ row }">
+				<div class="flex flex-wrap gap-1">
+					<span
+						v-for="metric in getMetricKindOptions(row.for_metric_kind)"
+						:key="metric.value"
+						class="inline-flex items-center rounded-full border border-solid border-surface-5 px-2 py-0.5 text-xs font-medium text-secondary"
+					>
+						{{ metric.label }}
+					</span>
+				</div>
+			</template>
+
+			<template #cell-actions="{ row }">
+				<div class="flex justify-end gap-2">
+					<IconButton
+						type="outlined"
+						:label="`Delete ${row.title}`"
+						:disabled="isDeletingEvent(row.id)"
+						class="!text-red !shadow-[inset_0_0_0_1px_var(--color-red)] [&>svg]:!text-red"
+						@click="openDeleteEventModal(row)"
+					>
+						<TrashIcon aria-hidden="true" />
+					</IconButton>
+					<Button
+						type="outlined"
+						:disabled="isSaving || isDeletingEvent(row.id)"
+						@click="openEditModal(row)"
+					>
+						Edit
+						<EditIcon aria-hidden="true" />
 					</Button>
 				</div>
-			</div>
+			</template>
 
-			<Table
-				v-model:sort-column="sortColumn"
-				v-model:sort-direction="sortDirection"
-				:columns="columns"
-				:data="sortedEvents"
-				row-key="id"
-			>
-				<template #cell-title="{ row }">
-					<span class="line-clamp-2 font-medium text-primary">{{ row.title }}</span>
-				</template>
-
-				<template #cell-announcement="{ row }">
-					<a
-						v-if="row.announcement_url"
-						:href="row.announcement_url"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="inline-flex items-center gap-1 font-medium text-primary hover:text-contrast"
-					>
-						Open link
-						<ExternalIcon class="size-4" aria-hidden="true" />
-					</a>
-					<span v-else class="text-xs font-medium text-primary">—</span>
-				</template>
-
-				<template #cell-date="{ row }">
-					<div
-						v-if="isEventDateRange(row)"
-						class="flex flex-col gap-0.5 text-sm font-medium leading-5 text-primary"
-					>
-						<span>{{ formatEventDateRangeStart(row) }} -</span>
-						<span>{{ formatEventDateRangeEnd(row) }}</span>
+			<template #empty-state>
+				<div class="flex h-64 items-center justify-center text-secondary">
+					<div v-if="isFetchingEvents" class="flex items-center gap-2">
+						<SpinnerIcon class="size-5 animate-spin" aria-hidden="true" />
+						Loading
 					</div>
-					<span v-else class="font-medium text-primary">{{ formatEventDateRange(row) }}</span>
-				</template>
-
-				<template #cell-metrics="{ row }">
-					<div class="flex flex-wrap gap-1">
-						<span
-							v-for="metric in getMetricKindOptions(row.for_metric_kind)"
-							:key="metric.value"
-							class="inline-flex items-center rounded-full border border-solid border-surface-5 px-2 py-0.5 text-xs font-medium text-secondary"
-						>
-							{{ metric.label }}
-						</span>
-					</div>
-				</template>
-
-				<template #cell-actions="{ row }">
-					<div class="flex justify-end gap-2">
-						<IconButton
-							type="outlined"
-							:label="`Delete ${row.title}`"
-							:disabled="isDeletingEvent(row.id)"
-							class="!text-red !shadow-[inset_0_0_0_1px_var(--color-red)] [&>svg]:!text-red"
-							@click="openDeleteEventModal(row)"
-						>
-							<TrashIcon aria-hidden="true" />
-						</IconButton>
-						<Button
-							type="outlined"
-							:disabled="isSaving || isDeletingEvent(row.id)"
-							@click="openEditModal(row)"
-						>
-							Edit
-							<EditIcon aria-hidden="true" />
-						</Button>
-					</div>
-				</template>
-
-				<template #empty-state>
-					<div class="flex h-64 items-center justify-center text-secondary">
-						<div v-if="isFetchingEvents" class="flex items-center gap-2">
-							<SpinnerIcon class="size-5 animate-spin" aria-hidden="true" />
-							Loading
-						</div>
-						<template v-else>No results.</template>
-					</div>
-				</template>
-			</Table>
-		</div>
+					<template v-else>No results.</template>
+				</div>
+			</template>
+		</Table>
 	</div>
 </template>
 
@@ -241,10 +238,12 @@ import {
 	SpinnerIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
+	Button,
+	ButtonLink,
 	ConfirmModal,
 	DatePicker,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	Input,
diff --git a/apps/frontend/src/pages/admin/billing/[user].vue b/apps/frontend/src/pages/admin/billing/[user].vue
index 789b57b095..8e6141f1ef 100644
--- a/apps/frontend/src/pages/admin/billing/[user].vue
+++ b/apps/frontend/src/pages/admin/billing/[user].vue
@@ -120,13 +120,11 @@
 			</div>
 		</div>
 	</NewModal>
-	<div class="page">
-		<div
-			class="mb-4 flex items-center justify-between border-0 border-b border-solid border-divider pb-4"
-		>
+	<div>
+		<div class="mb-4 flex items-center justify-between gap-4">
 			<div class="flex items-center gap-2">
 				<Avatar :src="user?.avatar_url" :alt="user?.username" size="32px" circle />
-				<h1 class="m-0 text-2xl font-extrabold">{{ user?.username }}'s subscriptions</h1>
+				<h2 class="m-0 text-2xl font-semibold">{{ user?.username }}'s subscriptions</h2>
 			</div>
 			<div class="flex items-center gap-2">
 				<ButtonLink :to="`/user/${user?.id}`">
@@ -210,7 +208,6 @@ import {
 	Button,
 	ButtonLink,
 	CopyCode,
-	defineMessages,
 	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
@@ -219,7 +216,6 @@ import {
 	Toggle,
 	useFormatDateTime,
 	useRelativeTime,
-	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
@@ -236,18 +232,8 @@ const formatDateTime = useFormatDateTime({
 	dateStyle: 'long',
 })
 
-const vintl = useVIntl()
-
-const { formatMessage } = vintl
 const formatRelativeTime = useRelativeTime()
 
-const messages = defineMessages({
-	userNotFoundError: {
-		id: 'admin.billing.error.not-found',
-		defaultMessage: 'User not found',
-	},
-})
-
 const userId = useRouteId('user')
 
 const {
@@ -266,7 +252,7 @@ watch(userError, (error) => {
 		showError({
 			fatal: true,
 			statusCode: error.statusCode ?? error.status ?? 404,
-			message: formatMessage(messages.userNotFoundError),
+			message: 'User not found',
 		})
 	}
 })
@@ -410,11 +396,3 @@ async function modifyCharge() {
 	modifying.value = false
 }
 </script>
-<style scoped>
-.page {
-	padding: 1rem;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 56rem;
-}
-</style>
diff --git a/apps/frontend/src/pages/admin/docs.vue b/apps/frontend/src/pages/admin/docs.vue
index 33d519348a..d77b8a932e 100644
--- a/apps/frontend/src/pages/admin/docs.vue
+++ b/apps/frontend/src/pages/admin/docs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { Button, Card, Input } from '@modrinth/ui'
+import { Button, IconButton, Input, NewModal } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import docs from '~/templates/docs'
@@ -14,7 +14,7 @@ const filtered = computed(() =>
 function openAll() {
 	let offset = 0
 	for (const id of filtered.value) {
-		openPreview(id, offset)
+		openPopupPreview(id, offset)
 		offset++
 	}
 }
@@ -23,101 +23,224 @@ function copy(id: string) {
 	navigator.clipboard?.writeText(`/_internal/templates/doc/${id}`).catch(() => {})
 }
 
-function openPreview(id: string, offset = 0) {
+function uncachedPreviewUrl(id: string) {
+	return `/_internal/templates/doc/${id}?preview=${Date.now()}`
+}
+
+const previewModal = ref<{ hide: () => void; show: () => void } | null>(null)
+const previewTemplate = ref<string | null>(null)
+const previewLoading = ref(false)
+const previewError = ref<string | null>(null)
+const previewHtml = ref('')
+const previewVariables = ref<string[]>([])
+const variableValues = ref<Record<string, string>>({})
+
+function extractVariables(html: string): string[] {
+	const tokens = new Set<string>()
+	const regex = /\{\s*([a-zA-Z0-9_.-]+)\s*\}/g
+	let match = regex.exec(html)
+
+	while (match !== null) {
+		tokens.add(match[1])
+		match = regex.exec(html)
+	}
+
+	return [...tokens]
+}
+
+const renderedPreview = computed(() => {
+	let html = previewHtml.value
+
+	for (const [key, value] of Object.entries(variableValues.value)) {
+		if (!value) {
+			continue
+		}
+
+		const pattern = new RegExp(`\\{\\s*${key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\}`, 'g')
+		html = html.replace(pattern, value)
+	}
+
+	return html
+})
+
+async function openPreview(id: string, event?: MouseEvent) {
+	if (event?.shiftKey) {
+		openPopupPreview(id)
+		return
+	}
+
+	previewTemplate.value = id
+	previewLoading.value = true
+	previewError.value = null
+	previewHtml.value = ''
+	previewVariables.value = []
+	variableValues.value = {}
+
+	try {
+		const response = await fetch(uncachedPreviewUrl(id), { cache: 'no-store' })
+		previewHtml.value = await response.text()
+
+		if (!response.ok) {
+			throw new Error(`Failed to load template ${id}`)
+		}
+
+		const variables = extractVariables(previewHtml.value)
+		previewVariables.value = variables
+		variableValues.value = Object.fromEntries(variables.map((value) => [value, '']))
+		previewModal.value?.show()
+	} catch (error) {
+		previewError.value = 'Failed to load document preview.'
+		console.error(error)
+		previewModal.value?.show()
+	} finally {
+		previewLoading.value = false
+	}
+}
+
+function closePreview() {
+	previewModal.value?.hide()
+}
+
+function openPopupPreview(id: string, offset = 0) {
 	const width = 800
 	const height = 1000
 	const left = window.screenX + (window.outerWidth - width) / 2 + ((offset * 28) % 320)
 	const top = window.screenY + (window.outerHeight - height) / 2 + ((offset * 28) % 320)
 	window.open(
-		`/_internal/templates/doc/${id}`,
+		uncachedPreviewUrl(id),
 		`doc-${id}`,
 		`popup=yes,width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,menubar=no,toolbar=no,location=no,status=no`,
 	)
 }
 
-const counts = computed(() => ({
-	total: allTemplates.length,
-	shown: filtered.value.length,
-}))
-
 onMounted(() => {
 	document.getElementById('doc-search')?.focus()
 })
 </script>
 
 <template>
-	<div class="normal-page no-sidebar">
-		<h1 class="mb-4 text-3xl font-extrabold text-heading">Document templates</h1>
-		<div class="normal-page__content">
-			<Card class="mb-6 flex flex-col gap-4">
-				<div class="flex flex-wrap items-center gap-3">
-					<Input
-						id="doc-search"
-						v-model="query"
-						type="search"
-						:icon="SearchIcon"
-						placeholder="Search templates..."
-						wrapper-class="w-72"
-					/>
-
-					<Button type="colored" color="brand" :disabled="filtered.length === 0" @click="openAll">
-						<LibraryIcon class="h-4 w-4" aria-hidden="true" />
-						Open all ({{ counts.shown }})
-					</Button>
-
-					<span class="text-sm text-secondary">
-						Showing <span class="font-medium text-contrast">{{ counts.shown }}</span> of
-						<span class="font-medium text-contrast">{{ counts.total }}</span>
-					</span>
-				</div>
+	<div>
+		<div class="mb-4 flex items-center justify-between gap-4">
+			<h2 class="m-0 text-2xl font-semibold">Document templates</h2>
+			<div class="flex items-center gap-2">
+				<Input
+					id="doc-search"
+					v-model="query"
+					:icon="SearchIcon"
+					type="text"
+					autocomplete="off"
+					placeholder="Search templates..."
+					clearable
+				/>
+				<Button type="colored" color="brand" :disabled="filtered.length === 0" @click="openAll">
+					<LibraryIcon class="h-4 w-4" aria-hidden="true" />
+					Open all ({{ filtered.length }})
+				</Button>
+			</div>
+		</div>
+		<NewModal
+			ref="previewModal"
+			header="Preview document"
+			width="min(92vw, 1000px)"
+			:max-content-height="'88vh'"
+			scrollable
+		>
+			<div class="flex flex-col gap-4">
+				<p class="label__title text-base">Template: {{ previewTemplate }}</p>
 
 				<div
-					v-if="filtered.length === 0"
-					class="rounded-lg border border-dashed border-divider px-6 py-10 text-center text-sm text-secondary"
+					v-if="previewError"
+					class="border-danger bg-danger/10 text-danger my-2 rounded border px-3 py-2 text-sm"
 				>
-					No templates match your search.
+					{{ previewError }}
 				</div>
 
-				<ul v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-					<li
-						v-for="id in filtered"
-						:key="id"
-						class="hover:border-green/70 group flex flex-col justify-between rounded-lg border border-divider bg-button-bg p-4 shadow-sm transition hover:shadow"
-					>
-						<div class="mb-3">
-							<div class="font-mono text-sm font-semibold tracking-tight text-contrast">
-								{{ id }}
-							</div>
-							<div class="mt-1 truncate text-xs text-secondary">
-								/_internal/templates/doc/{{ id }}
-							</div>
+				<div v-if="previewLoading" class="my-4 text-sm text-secondary">Loading preview...</div>
+				<div v-else>
+					<div v-if="previewVariables.length" class="mt-2 grid gap-3 md:grid-cols-2">
+						<label
+							v-for="variable in previewVariables"
+							:key="variable"
+							:for="`preview-${variable}`"
+							class="flex flex-col"
+						>
+							<span class="label__title">{{ variable }}</span>
+							<Input
+								:id="`preview-${variable}`"
+								v-model="variableValues[variable]"
+								type="text"
+								:placeholder="`Enter ${variable}`"
+							/>
+						</label>
+					</div>
+					<p v-else class="mt-2 text-xs text-secondary">
+						No template variables were detected; preview shown using default values.
+					</p>
+
+					<div class="mt-4">
+						<div class="label__title mb-2">Rendered template</div>
+						<iframe
+							v-if="!previewError"
+							:srcdoc="renderedPreview"
+							class="h-[60vh] w-full rounded border border-divider bg-white"
+							sandbox="allow-same-origin"
+						/>
+						<div
+							v-else
+							class="rounded border border-divider bg-white px-4 py-3 text-sm text-secondary"
+						>
+							Could not render template preview.
 						</div>
+					</div>
 
-						<div class="mt-auto flex gap-2">
-							<Button
-								type="colored"
-								color="brand"
-								class="w-full flex-1 justify-center"
-								@click="openPreview(id)"
-							>
-								<PlayIcon class="h-4 w-4" aria-hidden="true" />
-								Preview
-							</Button>
+					<div class="input-group mt-4">
+						<Button type="quiet" @click="closePreview">Close</Button>
+					</div>
+				</div>
+			</div>
+		</NewModal>
+		<div>
+			<div
+				v-if="filtered.length === 0"
+				class="border-0 border-b border-solid border-surface-4 pb-4"
+			>
+				No templates match your search.
+			</div>
 
-							<Button class="justify-center" title="Copy preview URL" @click="copy(id)">
-								<CopyIcon class="h-4 w-4" aria-hidden="true" />
-							</Button>
+			<ul v-else class="m-0 mt-4 grid gap-3 p-0 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+				<li
+					v-for="id in filtered"
+					:key="id"
+					class="group flex flex-col justify-between rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4 shadow-sm transition hover:shadow"
+				>
+					<div class="mb-3">
+						<div class="font-mono text-sm font-semibold tracking-tight text-contrast">
+							{{ id }}
 						</div>
-					</li>
-				</ul>
-			</Card>
+						<div class="mt-1 truncate text-xs text-secondary">
+							/_internal/templates/doc/{{ id }}
+						</div>
+					</div>
 
-			<p class="mt-2 text-xs text-secondary">
+					<div class="mt-auto flex gap-2">
+						<Button type="colored" color="brand" @click="openPreview(id, $event)">
+							<PlayIcon aria-hidden="true" />
+							Preview
+						</Button>
+
+						<IconButton type="outlined" label="Copy" title="Copy preview URL" @click="copy(id)">
+							<CopyIcon aria-hidden="true" />
+						</IconButton>
+					</div>
+				</li>
+			</ul>
+
+			<p class="mt-4">
 				All templates come from
-				<code class="rounded bg-code-bg px-1 py-0.5 text-[11px] text-code-text"
+				<code class="rounded bg-code-bg px-1 py-0.5 text-sm text-code-text"
 					>src/templates/docs/index.ts</code
 				>. Popouts render via
-				<code class="rounded bg-code-bg px-1 py-0.5 text-[11px] text-code-text"
+				<code class="rounded bg-code-bg px-1 py-0.5 text-sm text-code-text"
 					>/_internal/templates/doc/[template]</code
 				>.
 			</p>
diff --git a/apps/frontend/src/pages/admin/emails.vue b/apps/frontend/src/pages/admin/emails.vue
index 3c91178cd3..96b0867fe2 100644
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -113,19 +113,31 @@ function openPopupPreview(id: string, offset = 0) {
 	)
 }
 
-const counts = computed(() => ({
-	total: allTemplates.length,
-	shown: filtered.value.length,
-}))
-
 onMounted(() => {
 	document.getElementById('email-search')?.focus()
 })
 </script>
 
 <template>
-	<div class="normal-page no-sidebar">
-		<h1 class="mb-4 text-3xl font-extrabold text-heading">Email templates</h1>
+	<div>
+		<div class="mb-4 flex items-center justify-between gap-4">
+			<h2 class="m-0 text-2xl font-semibold">Email templates</h2>
+			<div class="flex items-center gap-2">
+				<Input
+					id="email-search"
+					v-model="query"
+					:icon="SearchIcon"
+					type="text"
+					autocomplete="off"
+					placeholder="Search templates..."
+					clearable
+				/>
+				<Button type="colored" color="brand" :disabled="filtered.length === 0" @click="openAll">
+					<LibraryIcon class="h-4 w-4" aria-hidden="true" />
+					Open all ({{ filtered.length }})
+				</Button>
+			</div>
+		</div>
 		<NewModal
 			ref="previewModal"
 			header="Preview email"
@@ -187,31 +199,10 @@ onMounted(() => {
 				</div>
 			</div>
 		</NewModal>
-		<div class="normal-page__content">
-			<div class="flex flex-wrap items-center gap-3">
-				<Input
-					id="email-search"
-					v-model="query"
-					type="search"
-					:icon="SearchIcon"
-					placeholder="Search templates..."
-					wrapper-class="w-72"
-				/>
-
-				<Button type="colored" color="brand" :disabled="filtered.length === 0" @click="openAll">
-					<LibraryIcon class="h-4 w-4" aria-hidden="true" />
-					Open all ({{ counts.shown }})
-				</Button>
-
-				<span class="text-sm text-secondary">
-					Showing <span class="font-medium text-contrast">{{ counts.shown }}</span> of
-					<span class="font-medium text-contrast">{{ counts.total }}</span>
-				</span>
-			</div>
-
+		<div>
 			<div
 				v-if="filtered.length === 0"
-				class="mt-4 border-0 border-b border-solid border-surface-4 pb-4"
+				class="border-0 border-b border-solid border-surface-4 pb-4"
 			>
 				No templates match your search.
 			</div>
diff --git a/apps/frontend/src/pages/admin/file_lookup.vue b/apps/frontend/src/pages/admin/file_lookup.vue
index 86f9841c87..164bae7116 100644
--- a/apps/frontend/src/pages/admin/file_lookup.vue
+++ b/apps/frontend/src/pages/admin/file_lookup.vue
@@ -1,80 +1,76 @@
 <template>
-	<div class="normal-page no-sidebar">
-		<h1>File lookup</h1>
-		<div class="normal-page__content">
-			<div class="card flex flex-col gap-3">
-				<div
-					class="border-highlight-gray hover:bg-button-hover relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed bg-button-bg p-8 transition-colors"
-					@click="triggerFileInput"
-					@drop.prevent="handleDrop"
-					@dragover.prevent
-					@dragenter.prevent
-				>
-					<p
-						class="mx-auto mb-0 flex items-center gap-2 text-center text-lg font-bold text-primary"
-					>
-						<UploadIcon /> Select file to lookup
-					</p>
-					<p class="mx-auto mt-0 text-center text-sm text-secondary">
-						Drag and drop or click here to browse
-					</p>
-					<input ref="fileInput" type="file" class="hidden" @change="handleFileSelect" />
+	<div>
+		<h2 class="m-0 mb-4 text-2xl font-semibold">File lookup</h2>
+		<div class="card flex flex-col gap-3">
+			<div
+				class="border-highlight-gray hover:bg-button-hover relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed bg-button-bg p-8 transition-colors"
+				@click="triggerFileInput"
+				@drop.prevent="handleDrop"
+				@dragover.prevent
+				@dragenter.prevent
+			>
+				<p class="mx-auto mb-0 flex items-center gap-2 text-center text-lg font-bold text-primary">
+					<UploadIcon /> Select file to lookup
+				</p>
+				<p class="mx-auto mt-0 text-center text-sm text-secondary">
+					Drag and drop or click here to browse
+				</p>
+				<input ref="fileInput" type="file" class="hidden" @change="handleFileSelect" />
+			</div>
+
+			<template v-if="selectedFile">
+				<div class="flex items-center gap-2 text-sm text-secondary">
+					<FileIcon class="h-4 w-4" />
+					<span>{{ selectedFile.name }} ({{ formatBytes(selectedFile.size) }})</span>
 				</div>
 
-				<template v-if="selectedFile">
-					<div class="flex items-center gap-2 text-sm text-secondary">
-						<FileIcon class="h-4 w-4" />
-						<span>{{ selectedFile.name }} ({{ formatBytes(selectedFile.size) }})</span>
-					</div>
+				<div v-if="loadingHash" class="flex items-center gap-2 text-sm text-secondary">
+					<SpinnerIcon class="h-4 w-4 animate-spin" />
+					Calculating hashes...
+				</div>
+				<div v-if="loadingLookup" class="flex items-center gap-2 text-sm text-secondary">
+					<SpinnerIcon class="h-4 w-4 animate-spin" />
+					Looking up file on Modrinth...
+				</div>
 
-					<div v-if="loadingHash" class="flex items-center gap-2 text-sm text-secondary">
-						<SpinnerIcon class="h-4 w-4 animate-spin" />
-						Calculating hashes...
+				<template v-if="fileHashes">
+					<h3 class="mb-0 text-lg font-extrabold text-contrast">File hashes:</h3>
+					<div class="flex flex-col gap-2">
+						<span class="text-xs text-secondary">SHA512:</span>
+						<CopyCode :text="fileHashes.sha512" />
+						<span class="mt-1 text-xs text-secondary">SHA256:</span>
+						<CopyCode :text="fileHashes.sha256" />
+						<span class="mt-1 text-xs text-secondary">SHA1:</span>
+						<CopyCode :text="fileHashes.sha1" />
 					</div>
-					<div v-if="loadingLookup" class="flex items-center gap-2 text-sm text-secondary">
-						<SpinnerIcon class="h-4 w-4 animate-spin" />
-						Looking up file on Modrinth...
-					</div>
-
-					<template v-if="fileHashes">
-						<h3 class="mb-0 text-lg font-extrabold text-contrast">File hashes:</h3>
-						<div class="flex flex-col gap-2">
-							<span class="text-xs text-secondary">SHA512:</span>
-							<CopyCode :text="fileHashes.sha512" />
-							<span class="mt-1 text-xs text-secondary">SHA256:</span>
-							<CopyCode :text="fileHashes.sha256" />
-							<span class="mt-1 text-xs text-secondary">SHA1:</span>
-							<CopyCode :text="fileHashes.sha1" />
-						</div>
-					</template>
 				</template>
+			</template>
 
-				<template v-if="lookupResult">
-					<h3 class="mb-0 text-lg font-extrabold text-contrast">Modrinth project:</h3>
-					<nuxt-link
-						class="flex w-fit items-center gap-2 text-lg font-semibold text-contrast hover:underline"
-						target="_blank"
-						:to="`/project/${lookupResult.projectId}`"
-					>
-						<Avatar :src="lookupResult.iconUrl" alt="" size="48px" />
-						{{ lookupResult.name }}
-					</nuxt-link>
-					<CopyCode :text="lookupResult.projectId" />
-					<h3 class="mb-0 text-lg font-extrabold text-contrast">Modrinth version:</h3>
-					<nuxt-link
-						class="text-blue hover:underline"
-						:to="`/project/${lookupResult.projectId}/version/${lookupResult.versionId}`"
-						target="_blank"
-					>
-						Version {{ lookupResult.versionNumber }}
-					</nuxt-link>
-					<CopyCode :text="lookupResult.versionId" />
-				</template>
+			<template v-if="lookupResult">
+				<h3 class="mb-0 text-lg font-extrabold text-contrast">Modrinth project:</h3>
+				<nuxt-link
+					class="flex w-fit items-center gap-2 text-lg font-semibold text-contrast hover:underline"
+					target="_blank"
+					:to="`/project/${lookupResult.projectId}`"
+				>
+					<Avatar :src="lookupResult.iconUrl" alt="" size="48px" />
+					{{ lookupResult.name }}
+				</nuxt-link>
+				<CopyCode :text="lookupResult.projectId" />
+				<h3 class="mb-0 text-lg font-extrabold text-contrast">Modrinth version:</h3>
+				<nuxt-link
+					class="text-blue hover:underline"
+					:to="`/project/${lookupResult.projectId}/version/${lookupResult.versionId}`"
+					target="_blank"
+				>
+					Version {{ lookupResult.versionNumber }}
+				</nuxt-link>
+				<CopyCode :text="lookupResult.versionId" />
+			</template>
 
-				<Admonition v-if="lookupError" type="critical" header="Lookup failed">
-					{{ lookupError }}
-				</Admonition>
-			</div>
+			<Admonition v-if="lookupError" type="critical" header="Lookup failed">
+				{{ lookupError }}
+			</Admonition>
 		</div>
 	</div>
 </template>
diff --git a/apps/frontend/src/pages/admin/index.vue b/apps/frontend/src/pages/admin/index.vue
new file mode 100644
index 0000000000..01a60796f5
--- /dev/null
+++ b/apps/frontend/src/pages/admin/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+	redirect: '/admin/file_lookup',
+})
+</script>
+
+<template>
+	<div />
+</template>
diff --git a/apps/frontend/src/pages/admin/servers/lookup.vue b/apps/frontend/src/pages/admin/servers/lookup.vue
index e5f46a37e0..9c69bb8095 100644
--- a/apps/frontend/src/pages/admin/servers/lookup.vue
+++ b/apps/frontend/src/pages/admin/servers/lookup.vue
@@ -1,42 +1,40 @@
 <template>
-	<div class="normal-page no-sidebar">
-		<h1>Server lookup</h1>
-		<div class="normal-page__content">
-			<form class="card flex flex-col gap-3" @submit.prevent="lookupServer">
-				<div class="flex flex-col gap-2">
-					<label for="server-subdomain">
-						<span class="text-lg font-semibold text-contrast">
-							Server subdomain
-							<span class="text-brand-red">*</span>
-						</span>
-					</label>
-					<Input
-						id="server-subdomain"
-						v-model="subdomainInput"
-						:icon="ServerIcon"
-						:error="submitted && !!validationError"
-						placeholder="example or example.modrinth.gg"
-						autocomplete="off"
-						autocapitalize="none"
-						:spellcheck="false"
-					/>
-					<span v-if="submitted && validationError" class="text-sm font-medium text-red">
-						{{ validationError }}
+	<div>
+		<h2 class="m-0 mb-4 text-2xl font-semibold">Server lookup</h2>
+		<form class="card flex flex-col gap-3" @submit.prevent="lookupServer">
+			<div class="flex flex-col gap-2">
+				<label for="server-subdomain">
+					<span class="text-lg font-semibold text-contrast">
+						Server subdomain
+						<span class="text-brand-red">*</span>
 					</span>
-				</div>
+				</label>
+				<Input
+					id="server-subdomain"
+					v-model="subdomainInput"
+					:icon="ServerIcon"
+					:error="submitted && !!validationError"
+					placeholder="example or example.modrinth.gg"
+					autocomplete="off"
+					autocapitalize="none"
+					:spellcheck="false"
+				/>
+				<span v-if="submitted && validationError" class="text-sm font-medium text-red">
+					{{ validationError }}
+				</span>
+			</div>
 
-				<div>
-					<Button type="colored" color="brand" native-type="submit" :loading="isLoading">
-						<SearchIcon aria-hidden="true" />
-						Look up server
-					</Button>
-				</div>
+			<div>
+				<Button type="colored" color="brand" native-type="submit" :loading="isLoading">
+					<SearchIcon aria-hidden="true" />
+					Look up server
+				</Button>
+			</div>
 
-				<Admonition v-if="lookupError" type="critical" header="Lookup failed">
-					{{ lookupError }}
-				</Admonition>
-			</form>
-		</div>
+			<Admonition v-if="lookupError" type="critical" header="Lookup failed">
+				{{ lookupError }}
+			</Admonition>
+		</form>
 	</div>
 </template>
 
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index 586a8cc09c..5d40daa04c 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -116,11 +116,9 @@
 		</div>
 	</NewModal>
 	<AssignNoticeModal ref="assignNoticeModal" @close="refreshNotices" />
-	<div class="page">
-		<div
-			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
-		>
-			<h1 class="m-0 text-2xl">Server notices</h1>
+	<div>
+		<div class="mb-4 flex items-center justify-between gap-4">
+			<h2 class="m-0 text-2xl font-semibold">Server notices</h2>
 			<Button type="colored" color="brand" @click="openNewNoticeModal">
 				<PlusIcon />
 				{{ formatMessage(messages.createNotice) }}
@@ -498,11 +496,3 @@ const messages = defineMessages({
 	},
 })
 </script>
-<style lang="scss" scoped>
-.page {
-	padding: 1rem;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 78.5rem;
-}
-</style>
diff --git a/apps/frontend/src/pages/admin/servers/transfers.vue b/apps/frontend/src/pages/admin/servers/transfers.vue
index 7a1c2b7e85..193e3d43f4 100644
--- a/apps/frontend/src/pages/admin/servers/transfers.vue
+++ b/apps/frontend/src/pages/admin/servers/transfers.vue
@@ -8,11 +8,9 @@
 		proceed-label="Cancel transfer"
 		@proceed="confirmCancel"
 	/>
-	<div class="mx-auto max-w-[78.5rem] p-4">
-		<div
-			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
-		>
-			<h1 class="m-0 text-2xl">Server transfers</h1>
+	<div>
+		<div class="mb-4 flex items-center justify-between gap-4">
+			<h2 class="m-0 text-2xl font-semibold">Server transfers</h2>
 			<Button type="colored" color="brand" @click="openTransferModal">
 				<PlusIcon />
 				New transfer
diff --git a/apps/frontend/src/pages/admin/user_email.vue b/apps/frontend/src/pages/admin/user_email.vue
index 700837ff76..da2daf0a2b 100644
--- a/apps/frontend/src/pages/admin/user_email.vue
+++ b/apps/frontend/src/pages/admin/user_email.vue
@@ -1,30 +1,28 @@
 <template>
-	<div class="normal-page no-sidebar">
-		<h1>User account request</h1>
-		<div class="normal-page__content">
-			<div class="card flex flex-col gap-3">
-				<div class="flex flex-col gap-2">
-					<label for="name">
-						<span class="text-lg font-semibold text-contrast">
-							User email
-							<span class="text-brand-red">*</span>
-						</span>
-					</label>
-					<Input
-						id="name"
-						v-model="userEmail"
-						type="email"
-						:maxlength="64"
-						:placeholder="`Enter user email...`"
-						autocomplete="off"
-					/>
-				</div>
-				<div class="flex gap-2">
-					<Button type="colored" color="brand" @click="getUserFromEmail">
-						<MailIcon aria-hidden="true" />
-						Get user account
-					</Button>
-				</div>
+	<div>
+		<h2 class="m-0 mb-4 text-2xl font-semibold">User lookup</h2>
+		<div class="card flex flex-col gap-3">
+			<div class="flex flex-col gap-2">
+				<label for="name">
+					<span class="text-lg font-semibold text-contrast">
+						User email
+						<span class="text-brand-red">*</span>
+					</span>
+				</label>
+				<Input
+					id="name"
+					v-model="userEmail"
+					type="email"
+					:maxlength="64"
+					:placeholder="`Enter user email...`"
+					autocomplete="off"
+				/>
+			</div>
+			<div class="flex gap-2">
+				<Button type="colored" color="brand" @click="getUserFromEmail">
+					<MailIcon aria-hidden="true" />
+					Get user account
+				</Button>
 			</div>
 		</div>
 	</div>
diff --git a/apps/frontend/src/pages/auth/create/oauth.vue b/apps/frontend/src/pages/auth/create/oauth.vue
index 96864382be..c99a919807 100644
--- a/apps/frontend/src/pages/auth/create/oauth.vue
+++ b/apps/frontend/src/pages/auth/create/oauth.vue
@@ -190,8 +190,8 @@ async function finishSignIn(sessionToken?: string | null) {
 		await navigateTo(redirect, {
 			replace: true,
 		})
-	} else {
-		await navigateTo('/dashboard')
+	} else if (auth.value.user) {
+		await navigateTo(`/user/${auth.value.user.username}`)
 	}
 }
 </script>
diff --git a/apps/frontend/src/pages/auth/reauthenticate.vue b/apps/frontend/src/pages/auth/reauthenticate.vue
new file mode 100644
index 0000000000..d4b9854a23
--- /dev/null
+++ b/apps/frontend/src/pages/auth/reauthenticate.vue
@@ -0,0 +1,409 @@
+<template>
+	<div
+		class="universal-card mx-auto flex w-full max-w-[27rem] flex-col gap-6 border border-solid border-surface-5 !p-6"
+	>
+		<template v-if="flow">
+			<div class="flex flex-col items-end gap-4">
+				<div class="flex flex-col gap-1.5">
+					<label for="two-factor-code">
+						<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
+						<span class="label__description">
+							{{ formatMessage(messages.twoFactorCodeDescription) }}
+						</span>
+					</label>
+					<Input
+						id="two-factor-code"
+						v-model="twoFactorCode"
+						:maxlength="11"
+						inputmode="numeric"
+						:placeholder="formatMessage(messages.twoFactorCodePlaceholder)"
+						autocomplete="one-time-code"
+						@keyup.enter="begin2FASignIn"
+					/>
+				</div>
+				<Button type="colored" color="brand" @click="begin2FASignIn">
+					{{ formatMessage(commonMessages.signInButton) }}
+					<RightArrowIcon />
+				</Button>
+			</div>
+		</template>
+		<template v-else-if="account">
+			<div class="flex flex-col items-center gap-3 text-center">
+				<Avatar :src="account.avatarUrl" size="64px" circle />
+				<div class="flex flex-col gap-2">
+					<h1 class="m-0 text-2xl font-semibold text-contrast">
+						{{ formatMessage(messages.title, { name: account.username }) }}
+					</h1>
+					<p v-if="account.authMethod" class="m-0 text-primary">
+						{{ formatMessage(messages.lastSignedInWith, { method: account.authMethod }) }}
+					</p>
+				</div>
+			</div>
+
+			<template v-if="oauthProvider">
+				<div class="flex flex-col gap-2.5">
+					<ButtonLink
+						type="colored"
+						color="brand"
+						class="!w-full !justify-center"
+						:href="getAuthUrl(oauthProvider.id, redirectTarget)"
+						:aria-label="
+							formatMessage(messages.signInWithProvider, { provider: oauthProvider.name })
+						"
+						@click="pendingSignInOAuthProvider = oauthProvider.id"
+					>
+						<component :is="oauthProvider.icon" />
+						{{ formatMessage(messages.signInWithProvider, { provider: oauthProvider.name }) }}
+					</ButtonLink>
+					<ButtonLink class="!w-full !justify-center" :to="signInAnotherWayRoute">
+						{{ formatMessage(messages.signInAnotherWay) }}
+					</ButtonLink>
+				</div>
+			</template>
+
+			<template v-else-if="account.authMethod === 'passkey'">
+				<div class="flex flex-col gap-2.5">
+					<Button
+						type="colored"
+						color="brand"
+						class="!w-full !justify-center"
+						@click="beginPasskeySignIn"
+					>
+						<UserKeyIcon />
+						{{ formatMessage(messages.continueWithPasskey) }}
+					</Button>
+					<ButtonLink class="!w-full !justify-center" :to="signInAnotherWayRoute">
+						{{ formatMessage(messages.signInAnotherWay) }}
+					</ButtonLink>
+				</div>
+			</template>
+
+			<template v-else-if="account.authMethod === 'password'">
+				<section class="flex w-full flex-col gap-2.5">
+					<label for="reauth-username" hidden>
+						{{ formatMessage(commonMessages.emailUsernameLabel) }}
+					</label>
+					<Input
+						id="reauth-username"
+						:model-value="loginIdentifier"
+						:icon="MailIcon"
+						type="text"
+						autocomplete="username"
+						disabled
+						wrapper-class="w-full"
+					/>
+
+					<label for="reauth-password" hidden>
+						{{ formatMessage(commonMessages.passwordLabel) }}
+					</label>
+					<Input
+						id="reauth-password"
+						v-model="password"
+						:icon="KeyIcon"
+						type="password"
+						autocomplete="current-password"
+						:placeholder="formatMessage(commonMessages.passwordLabel)"
+						wrapper-class="w-full"
+						@keyup.enter="beginPasswordSignIn"
+					/>
+
+					<HCaptcha
+						v-if="globals?.captcha_enabled && password"
+						:ref="setCaptchaRef"
+						v-model="captchaToken"
+					/>
+
+					<Button
+						type="colored"
+						color="brand"
+						class="!w-full"
+						:disabled="globals?.captcha_enabled ? !captchaToken : false"
+						@click="beginPasswordSignIn"
+					>
+						{{ formatMessage(commonMessages.signInButton) }}
+						<RightArrowIcon />
+					</Button>
+					<ButtonLink class="!w-full !justify-center" :to="signInAnotherWayRoute">
+						{{ formatMessage(messages.signInAnotherWay) }}
+					</ButtonLink>
+				</section>
+			</template>
+
+			<ButtonLink v-else class="!w-full !justify-center" :to="signInAnotherWayRoute">
+				{{ formatMessage(messages.signInAnotherWay) }}
+			</ButtonLink>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	DiscordColorIcon,
+	GitHubColorIcon,
+	GitLabColorIcon,
+	GoogleColorIcon,
+	KeyIcon,
+	MailIcon,
+	MicrosoftColorIcon,
+	RightArrowIcon,
+	SteamColorIcon,
+	UserKeyIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	Button,
+	ButtonLink,
+	commonMessages,
+	defineMessages,
+	injectModrinthClient,
+	injectNotificationManager,
+	Input,
+	useVIntl,
+} from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useStorage } from '@vueuse/core'
+import type { LocationQueryValue } from 'vue-router'
+
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
+import {
+	hydrateStoredAccounts,
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	rememberStoredAccount,
+	type StoredAccountAuthMethod,
+	useStoredAccounts,
+} from '@/composables/accounts.ts'
+import {
+	ADD_ACCOUNT_QUERY_PARAM,
+	getAuthUrl,
+	promotePendingSignInOAuthProvider,
+} from '@/composables/auth.ts'
+import { getPasskeyCredential } from '@/helpers/passkey.ts'
+
+const oauthProviders = [
+	{ id: 'discord', name: 'Discord', icon: DiscordColorIcon },
+	{ id: 'github', name: 'GitHub', icon: GitHubColorIcon },
+	{ id: 'microsoft', name: 'Microsoft', icon: MicrosoftColorIcon },
+	{ id: 'google', name: 'Google', icon: GoogleColorIcon },
+	{ id: 'steam', name: 'Steam', icon: SteamColorIcon },
+	{ id: 'gitlab', name: 'GitLab', icon: GitLabColorIcon },
+] as const
+
+type OAuthProviderId = (typeof oauthProviders)[number]['id']
+
+interface AuthGlobalsResponse {
+	captcha_enabled?: boolean
+	[key: string]: unknown
+}
+
+interface ApiErrorShape {
+	data?: {
+		description?: string
+	}
+}
+
+const getQueryString = (
+	value: LocationQueryValue | LocationQueryValue[] | null | undefined,
+): string => {
+	const firstValue = Array.isArray(value) ? value[0] : value
+	return typeof firstValue === 'string' ? firstValue : ''
+}
+
+const getErrorMessage = (error: unknown): string => {
+	const apiError = error as ApiErrorShape
+	if (typeof apiError?.data?.description === 'string') {
+		return apiError.data.description
+	}
+	if (error instanceof Error) {
+		return error.message
+	}
+	return String(error)
+}
+
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const route = useNativeRoute()
+const storedAccounts = useStoredAccounts()
+
+const messages = defineMessages({
+	title: {
+		id: 'auth.reauthenticate.title',
+		defaultMessage: '{name} needs to be reauthenticated.',
+	},
+	lastSignedInWith: {
+		id: 'auth.reauthenticate.last-signed-in-with',
+		defaultMessage:
+			'It was last signed into with {method, select, password {a password} passkey {a passkey} github {GitHub} discord {Discord} google {Google} microsoft {Microsoft} gitlab {GitLab} steam {Steam} paypal {PayPal} other {{method}} }.',
+	},
+	signInWithProvider: {
+		id: 'auth.reauthenticate.sign-in-with-provider',
+		defaultMessage: 'Sign in with {provider}',
+	},
+	signInAnotherWay: {
+		id: 'auth.reauthenticate.sign-in-another-way',
+		defaultMessage: 'Sign in another way',
+	},
+	continueWithPasskey: {
+		id: 'auth.reauthenticate.continue-with-passkey',
+		defaultMessage: 'Continue with passkey',
+	},
+	twoFactorCodePlaceholder: {
+		id: 'auth.reauthenticate.2fa.placeholder',
+		defaultMessage: 'Enter code...',
+	},
+	twoFactorCodeLabel: {
+		id: 'auth.reauthenticate.2fa.label',
+		defaultMessage: 'Two-factor authentication',
+	},
+	twoFactorCodeDescription: {
+		id: 'auth.reauthenticate.2fa.description',
+		defaultMessage:
+			'Enter the 6-digit code from your authenticator app, or one of your backup codes.',
+	},
+	pageTitle: {
+		id: 'auth.reauthenticate.page-title',
+		defaultMessage: 'Reauthenticate',
+	},
+})
+
+useHead({
+	title() {
+		return `${formatMessage(messages.pageTitle)} - Modrinth`
+	},
+})
+
+const accountId = computed(() => getQueryString(route.query.account))
+const account = computed(() => storedAccounts.value.find((stored) => stored.id === accountId.value))
+const redirectTarget = computed(
+	() =>
+		getQueryString(route.query.redirect) ||
+		(account.value ? `/user/${account.value.username}` : ''),
+)
+const loginIdentifier = computed(() => account.value?.username || '')
+const oauthProvider = computed(() =>
+	oauthProviders.find((provider) => provider.id === account.value?.authMethod),
+)
+
+const signInAnotherWayRoute = computed(() => ({
+	path: '/auth/sign-in',
+	query: {
+		redirect: redirectTarget.value,
+		[ADD_ACCOUNT_QUERY_PARAM]: 'true',
+	},
+}))
+
+const pendingSignInOAuthProvider = useStorage<OAuthProviderId | StoredAccountAuthMethod | null>(
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+	undefined,
+	{ initOnMounted: true },
+)
+
+const password = ref('')
+const captchaToken = ref('')
+const twoFactorCode = ref('')
+const flow = ref('')
+const captcha = ref<{ reset?: () => void } | null>(null)
+
+const setCaptchaRef = (captchaRef: unknown) => {
+	captcha.value = (captchaRef as { reset?: () => void } | null) ?? null
+}
+
+const { data: globals } = useQuery<AuthGlobalsResponse>({
+	queryKey: ['auth-globals'],
+	queryFn: async () => {
+		try {
+			return await client.labrinth.globals_internal.get()
+		} catch (err) {
+			console.error('Error fetching globals:', err)
+			return { captcha_enabled: true, tax_compliance_thresholds: {} }
+		}
+	},
+})
+
+onMounted(() => {
+	hydrateStoredAccounts()
+	if (!accountId.value || !account.value) {
+		void navigateTo({
+			path: '/auth/sign-in',
+			query: { redirect: redirectTarget.value },
+		})
+	}
+})
+
+async function completeSignIn(sessionToken: string, authMethod: StoredAccountAuthMethod) {
+	await useAuth(sessionToken)
+	await useUser()
+	queryClient.clear()
+
+	const signedIn = await useAuth()
+	if (signedIn.value.user && signedIn.value.token) {
+		rememberStoredAccount(signedIn.value.user, signedIn.value.token, { authMethod })
+	}
+
+	promotePendingSignInOAuthProvider()
+	await navigateTo(redirectTarget.value, { replace: true })
+}
+
+function notifyError(error: unknown) {
+	addNotification({
+		title: formatMessage(commonMessages.errorNotificationTitle),
+		text: getErrorMessage(error),
+		type: 'error',
+	})
+	captcha.value?.reset?.()
+}
+
+async function beginPasswordSignIn() {
+	pendingSignInOAuthProvider.value = null
+	startLoading()
+	try {
+		const res = await client.labrinth.auth_v2.login({
+			username: loginIdentifier.value,
+			password: password.value,
+			challenge: captchaToken.value,
+		})
+
+		if (res.flow) {
+			flow.value = res.flow
+		} else if (res.session) {
+			await completeSignIn(res.session, 'password')
+		}
+	} catch (err) {
+		notifyError(err)
+	}
+	stopLoading()
+}
+
+async function begin2FASignIn() {
+	startLoading()
+	try {
+		const res = await client.labrinth.auth_v2.login2FA({
+			flow: flow.value,
+			code: twoFactorCode.value,
+		})
+		await completeSignIn(res.session, 'password')
+	} catch (err) {
+		notifyError(err)
+	}
+	stopLoading()
+}
+
+async function beginPasskeySignIn() {
+	startLoading()
+	try {
+		const start = await client.labrinth.auth_v2.authenticatePasskeyStart()
+		const credential = await getPasskeyCredential(start.options.publicKey)
+		const result = await client.labrinth.auth_v2.authenticatePasskeyFinish({
+			flow: start.flow,
+			credential,
+		})
+		pendingSignInOAuthProvider.value = 'passkey'
+		await completeSignIn(result.session, 'passkey')
+	} catch (err) {
+		notifyError(err)
+	}
+	stopLoading()
+}
+</script>
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 7edab205b5..8d9da626c8 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -218,7 +218,7 @@ useHead({
 
 const auth = await useAuth()
 if (auth.value.user) {
-	await navigateTo('/dashboard')
+	await navigateTo(`/user/${auth.value.user.username}`)
 }
 
 const route = useNativeRoute()
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index adb3e4f488..87ef7c917e 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -1,5 +1,6 @@
 <template>
 	<SignInView
+		v-if="signInReady || subtleLauncherRedirectUri"
 		v-model:email="email"
 		v-model:password="password"
 		v-model:token="token"
@@ -9,10 +10,12 @@
 		:redirect-target="redirectTarget"
 		:route-query="route.query"
 		:globals="globals"
+		:accounts="launcherAccountChoices"
 		:on-password-sign-in="beginPasswordSignIn"
 		:on-two-factor-sign-in="begin2FASignIn"
 		:on-passkey-sign-in="beginPasskeySignin"
 		:on-set-captcha-ref="setCaptchaRef"
+		@select="onSelectLauncherAccount"
 	/>
 </template>
 
@@ -30,9 +33,18 @@ import type { LocationQueryValue } from 'vue-router'
 
 import SignInView from '@/components/ui/auth/SignIn.vue'
 import {
-	getLauncherRedirectUrl,
+	hydrateStoredAccounts,
+	isStoredAccountAuthMethod,
 	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
 	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	rememberStoredAccount,
+	type StoredAccount,
+	type StoredAccountAuthMethod,
+	useStoredAccounts,
+} from '@/composables/accounts.ts'
+import {
+	ADD_ACCOUNT_QUERY_PARAM,
+	getLauncherRedirectUrl,
 	promotePendingSignInOAuthProvider,
 } from '@/composables/auth.ts'
 import { getPasskeyCredential } from '@/helpers/passkey.ts'
@@ -120,10 +132,106 @@ if (route.query.code) {
 	await finishSignIn()
 }
 
-if (auth.value.user) {
+const isAddingAccount = route.query[ADD_ACCOUNT_QUERY_PARAM] !== undefined
+const isLauncherSignIn = route.query.launcher !== undefined
+const storedAccounts = useStoredAccounts()
+const signInReady = ref(!isLauncherSignIn)
+
+const choosableAccounts = computed((): StoredAccount[] => {
+	const user = auth.value.user
+	const token = auth.value.token
+	const accounts = storedAccounts.value.map((stored) => {
+		if (user && token && stored.id === user.id) {
+			return {
+				...stored,
+				username: user.username,
+				avatarUrl: user.avatar_url ?? stored.avatarUrl,
+				token,
+				role: user.role,
+			}
+		}
+
+		return stored
+	})
+
+	if (user && token && !accounts.some((account) => account.id === user.id)) {
+		accounts.push({
+			id: user.id,
+			username: user.username,
+			avatarUrl: user.avatar_url ?? null,
+			token,
+			role: user.role,
+		})
+	}
+
+	return accounts
+})
+
+const launcherAccountChoices = computed(() => {
+	if (!isLauncherSignIn) return []
+
+	const minimumAccounts = isAddingAccount ? 1 : 2
+	return choosableAccounts.value.length >= minimumAccounts ? choosableAccounts.value : []
+})
+
+if (auth.value.user && !isAddingAccount && !isLauncherSignIn) {
 	await finishSignIn()
 }
 
+onMounted(async () => {
+	if (!isLauncherSignIn) {
+		return
+	}
+
+	hydrateStoredAccounts()
+
+	if (subtleLauncherRedirectUri.value) {
+		signInReady.value = true
+		return
+	}
+
+	if (
+		auth.value.user &&
+		!isAddingAccount &&
+		choosableAccounts.value.length === 1 &&
+		route.query.code === undefined
+	) {
+		await showLauncherOpeningPage(auth.value.token)
+		if (subtleLauncherRedirectUri.value) {
+			signInReady.value = true
+		}
+		return
+	}
+
+	signInReady.value = true
+})
+
+function getLauncherCallbackUrl(sessionToken: string) {
+	return `${getLauncherRedirectUrl(route)}/?code=${sessionToken}`
+}
+
+async function showLauncherOpeningPage(sessionToken: string) {
+	promotePendingSignInOAuthProvider()
+
+	const redirectUrl = getLauncherCallbackUrl(sessionToken)
+
+	if (redirectUrl.startsWith('https://launcher-files.modrinth.com/')) {
+		await navigateTo(redirectUrl, {
+			external: true,
+		})
+		return
+	}
+
+	subtleLauncherRedirectUri.value = redirectUrl
+}
+
+function onSelectLauncherAccount(account: { id: string }) {
+	const stored = choosableAccounts.value.find((choice) => choice.id === account.id)
+	if (stored) {
+		void showLauncherOpeningPage(stored.token)
+	}
+}
+
 const captcha = ref<{ reset?: () => void } | null>(null)
 const setCaptchaRef = (captchaRef: unknown) => {
 	captcha.value = (captchaRef as { reset?: () => void } | null) ?? null
@@ -161,7 +269,7 @@ async function beginPasswordSignIn() {
 		if (res.flow) {
 			flow.value = res.flow
 		} else {
-			await finishSignIn(res.session)
+			await finishSignIn(res.session, 'password')
 		}
 	} catch (err) {
 		addNotification({
@@ -183,7 +291,7 @@ async function begin2FASignIn() {
 			code: twoFactorCode.value,
 		})
 
-		await finishSignIn(res.session)
+		await finishSignIn(res.session, 'password')
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
@@ -208,7 +316,7 @@ async function beginPasskeySignin() {
 		})
 
 		pendingSignInOAuthProvider.value = 'passkey'
-		await finishSignIn(result.session)
+		await finishSignIn(result.session, 'passkey')
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
@@ -219,30 +327,11 @@ async function beginPasskeySignin() {
 	stopLoading()
 }
 
-async function finishSignIn(sessionToken?: string | null) {
+async function finishSignIn(sessionToken?: string | null, authMethod?: StoredAccountAuthMethod) {
 	if (route.query.launcher) {
-		let token = sessionToken
-		if (!token) {
-			token = auth.value.token
-		}
-
-		promotePendingSignInOAuthProvider()
-
-		const redirectUrl = `${getLauncherRedirectUrl(route)}/?code=${token}`
-
-		if (redirectUrl.startsWith('https://launcher-files.modrinth.com/')) {
-			await navigateTo(redirectUrl, {
-				external: true,
-			})
-		} else {
-			// When redirecting to localhost, the auth token is very visible in the URL to the user.
-			// While we could make it harder to find with a POST request, such is security by obscurity:
-			// the user and other applications would still be able to sniff the token in the request body.
-			// So, to make the UX a little better by not changing the displayed URL, while keeping the
-			// token hidden from very casual observation and keeping the protocol as close to OAuth's
-			// standard flows as possible, let's execute the redirect within an iframe that visually
-			// covers the entire page.
-			subtleLauncherRedirectUri.value = redirectUrl
+		const token = sessionToken ?? auth.value.token
+		if (token) {
+			await showLauncherOpeningPage(token)
 		}
 
 		return
@@ -254,6 +343,20 @@ async function finishSignIn(sessionToken?: string | null) {
 		queryClient.clear()
 	}
 
+	const signedIn = await useAuth()
+	if (signedIn.value.user && signedIn.value.token) {
+		const nextAuthMethod =
+			authMethod ??
+			(isStoredAccountAuthMethod(pendingSignInOAuthProvider.value)
+				? pendingSignInOAuthProvider.value
+				: undefined)
+		rememberStoredAccount(
+			signedIn.value.user,
+			signedIn.value.token,
+			nextAuthMethod ? { authMethod: nextAuthMethod } : undefined,
+		)
+	}
+
 	promotePendingSignInOAuthProvider()
 
 	if (route.query.redirect) {
@@ -261,8 +364,8 @@ async function finishSignIn(sessionToken?: string | null) {
 		await navigateTo(redirect, {
 			replace: true,
 		})
-	} else {
-		await navigateTo('/dashboard')
+	} else if (signedIn.value.user) {
+		await navigateTo(`/user/${signedIn.value.user.username}`)
 	}
 }
 </script>
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index 42b7fbca9c..46d5d643b5 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -38,8 +38,8 @@ import SignUpView from '@/components/ui/auth/SignUp.vue'
 import {
 	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
 	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
-	promotePendingSignInOAuthProvider,
-} from '@/composables/auth.ts'
+} from '@/composables/accounts.ts'
+import { promotePendingSignInOAuthProvider } from '@/composables/auth.ts'
 
 interface AuthGlobalsResponse {
 	captcha_enabled?: boolean
@@ -120,7 +120,7 @@ const showOtherOptions = ref(false)
 const isCreateAccountStep = ref(false)
 
 if (auth.value.user) {
-	await navigateTo('/dashboard')
+	await navigateTo(`/user/${auth.value.user.username}`)
 }
 
 const captcha = ref<{ reset?: () => void } | null>(null)
@@ -275,7 +275,7 @@ async function createAccount(accountConsent: boolean) {
 		if (route.query.redirect) {
 			await navigateTo(getQueryString(route.query.redirect))
 		} else {
-			await navigateTo('/dashboard')
+			await navigateTo(`/user/${username.value}`)
 		}
 	} catch (err) {
 		addNotification({
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/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index a064c82756..17a679ea54 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -644,6 +644,7 @@ import {
 	ModrinthServersPurchaseModal,
 	OptionGroup,
 	TagIcon,
+	useDebugLogger,
 	useFormatPrice,
 	useVIntl,
 } from '@modrinth/ui'
@@ -658,6 +659,7 @@ import { products } from '~/generated/state.json'
 const route = useRoute()
 const router = useRouter()
 const client = injectModrinthClient()
+const debug = useDebugLogger('Hosting')
 
 const { setAffiliateCode, getAffiliateCode } = useAffiliates()
 
@@ -1199,7 +1201,7 @@ const selectProduct = async (product) => {
 	}
 
 	await refreshCapacity()
-	console.log(capacityStatuses.value)
+	debug(capacityStatuses.value)
 
 	if ((product === 'custom' && isCustomAtCapacity.value) || isAtCapacity.value) {
 		addNotification({
diff --git a/apps/frontend/src/pages/moderation.vue b/apps/frontend/src/pages/moderation.vue
index 4334b52079..0fdb8bef1e 100644
--- a/apps/frontend/src/pages/moderation.vue
+++ b/apps/frontend/src/pages/moderation.vue
@@ -1,9 +1,9 @@
 <template>
 	<div
-		class="relativemb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
+		class="relative mb-6 mt-4 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
 		:class="`m${marginTarget}-auto`"
 	>
-		<h1>Moderation</h1>
+		<h1 class="mb-4 mt-0 text-3xl font-semibold">Moderation</h1>
 		<NavTabs :links="moderationLinks" class="mb-4 hidden sm:flex" />
 		<div class="mb-4 sm:hidden">
 			<Chips
diff --git a/apps/frontend/src/pages/moderation/external-projects.vue b/apps/frontend/src/pages/moderation/external-projects.vue
index ef48d5d7bf..25c69fe20d 100644
--- a/apps/frontend/src/pages/moderation/external-projects.vue
+++ b/apps/frontend/src/pages/moderation/external-projects.vue
@@ -36,7 +36,7 @@
 		</form>
 	</NewModal>
 	<div>
-		<form class="flex gap-2" @submit.prevent="executeSearch">
+		<form class="flex items-center gap-2" @submit.prevent="executeSearch">
 			<Input
 				v-model="query"
 				:icon="SearchIcon"
@@ -44,17 +44,18 @@
 				autocomplete="off"
 				placeholder="Search external projects..."
 				clearable
-				wrapper-class="flex-1 w-full"
+				size="medium"
+				wrapper-class="min-w-0 flex-1"
 			/>
-			<Button type="colored" color="brand" native-type="submit">
+			<Button type="colored" color="brand" size="lg" native-type="submit">
 				<SearchIcon aria-hidden="true" />
 				Search by title
 			</Button>
-			<Button native-type="button" @click="executeFlameIdLookup">
+			<Button size="lg" native-type="button" @click="executeFlameIdLookup">
 				<BinaryIcon aria-hidden="true" />
 				Lookup CurseForge ID
 			</Button>
-			<Button native-type="button" @click="executeSha1Lookup">
+			<Button size="lg" native-type="button" @click="executeSha1Lookup">
 				<HashIcon aria-hidden="true" />
 				Lookup SHA-1
 			</Button>
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index 2cab2b59e8..efa648356e 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -1,95 +1,88 @@
 <template>
 	<div class="flex flex-col gap-4">
-		<div class="flex flex-col justify-between gap-3 lg:flex-row">
-			<Input
-				v-model="query"
-				:icon="SearchIcon"
-				type="text"
-				autocomplete="off"
-				:placeholder="formatMessage(commonMessages.searchPlaceholder)"
-				clearable
-				wrapper-class="flex-1"
-				input-class="h-[40px] w-full"
-				@input="goToPage(1)"
-			/>
+		<ModerationQueueToolbar
+			v-model="query"
+			:page="currentPage"
+			:total-pages="totalPages"
+			@search="goToPage(1)"
+			@switch-page="goToPage"
+		>
+			<template #actions>
+				<Combobox
+					v-model="currentFilterType"
+					class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
+					trigger-type="base"
+					trigger-size="lg"
+					:options="filterTypes"
+					:placeholder="formatMessage(commonMessages.filterByLabel)"
+					@select="goToPage(1)"
+				>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
+							<ModerationFilterCount
+								:label="currentFilterType"
+								:count="totalProjects"
+								:loading="pending"
+							/>
+						</span>
+					</template>
+				</Combobox>
 
-			<div class="flex flex-col flex-wrap justify-end gap-2 sm:flex-row lg:flex-shrink-0">
-				<div class="flex flex-col gap-2 sm:flex-row">
-					<Combobox
-						v-model="currentFilterType"
-						class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
-						trigger-type="base"
-						trigger-size="lg"
-						:options="filterTypes"
-						:placeholder="formatMessage(commonMessages.filterByLabel)"
-						@select="goToPage(1)"
-					>
-						<template #selected>
-							<span class="flex flex-row gap-2 align-middle font-semibold">
-								<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
-								<span class="truncate text-contrast"
-									>{{ currentFilterType }} ({{ totalProjects }})</span
-								>
-							</span>
-						</template>
-					</Combobox>
+				<Combobox
+					v-model="currentSortType"
+					class="!w-full flex-grow sm:!w-[240px] sm:flex-grow-0"
+					trigger-type="base"
+					trigger-size="lg"
+					:options="sortTypes"
+					:placeholder="formatMessage(commonMessages.sortByLabel)"
+					@select="goToPage(1)"
+				>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<SortAscIcon
+								v-if="currentSortType === 'Oldest' || currentSortType === 'Least external deps'"
+								class="size-5 flex-shrink-0 text-secondary"
+							/>
+							<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
+							<span class="truncate text-contrast">{{ currentSortType }}</span>
+						</span>
+					</template>
+				</Combobox>
 
-					<Combobox
-						v-model="currentSortType"
-						class="!w-full flex-grow sm:!w-[240px] sm:flex-grow-0"
-						trigger-type="base"
-						trigger-size="lg"
-						:options="sortTypes"
-						:placeholder="formatMessage(commonMessages.sortByLabel)"
-						@select="goToPage(1)"
-					>
-						<template #selected>
-							<span class="flex flex-row gap-2 align-middle font-semibold">
-								<SortAscIcon
-									v-if="currentSortType === 'Oldest' || currentSortType === 'Least external deps'"
-									class="size-5 flex-shrink-0 text-secondary"
-								/>
-								<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
-								<span class="truncate text-contrast">{{ currentSortType }}</span>
-							</span>
-						</template>
-					</Combobox>
-
-					<Combobox
-						v-model="itemsPerPage"
-						class="!w-full flex-grow sm:!w-[160px] sm:flex-grow-0 lg:!w-[140px]"
-						trigger-type="base"
-						trigger-size="lg"
-						:options="itemsPerPageOptions"
-						placeholder="Items per page"
-						@select="goToPage(1)"
-					>
-						<template #selected>
-							<span class="flex flex-row gap-2 align-middle font-semibold">
-								<span class="truncate text-contrast">{{ itemsPerPage }} items</span>
-							</span>
-						</template>
-					</Combobox>
-				</div>
+				<Combobox
+					v-model="itemsPerPage"
+					class="!w-full flex-grow sm:!w-[160px] sm:flex-grow-0 lg:!w-[140px]"
+					trigger-type="base"
+					trigger-size="lg"
+					:options="itemsPerPageOptions"
+					placeholder="Items per page"
+					@select="goToPage(1)"
+				>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<span class="truncate text-contrast">{{ itemsPerPage }} items</span>
+						</span>
+					</template>
+				</Combobox>
 
 				<Button
 					type="colored"
 					color="orange"
-					class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
+					size="lg"
+					class="w-full sm:w-auto"
 					:disabled="pending || paginatedProjects?.length === 0"
 					@click="moderateAllInFilter()"
 				>
-					<ScaleIcon class="flex-shrink-0" />
+					<ScaleIcon />
 					<span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
 					<span class="sm:hidden">Moderate</span>
 				</Button>
-			</div>
-		</div>
-
-		<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-			<div class="flex flex-wrap items-center gap-3">
+			</template>
+			<template #meta>
 				<div v-if="totalProjects > 0">
-					Showing {{ pageStart }}–{{ pageEnd }} of {{ totalProjects }}
+					Showing {{ formatNumber(pageStart) }}–{{ formatNumber(pageEnd) }} of
+					{{ formatNumber(totalProjects) }}
 					{{
 						currentFilterType === DEFAULT_FILTER_TYPE ? 'projects' : currentFilterType.toLowerCase()
 					}}
@@ -100,39 +93,27 @@
 						{{ formatMessage(messages.excludeTechnicalReview) }}
 					</label>
 				</div>
-			</div>
-			<Pagination
-				v-if="totalPages > 1"
-				:page="currentPage"
-				:count="totalPages"
-				@switch-page="goToPage"
-			/>
-			<ConfettiExplosion v-if="visible" />
-			<QueueSummaryModal
-				ref="queueSummaryModal"
-				:completed-ids="moderationQueue.currentQueue.completed"
-				:skipped-ids="moderationQueue.currentQueue.skipped"
-				@review-skipped="reviewSkippedQueue"
-			/>
-		</div>
-
-		<div class="flex flex-col gap-3">
-			<template v-if="pending">
-				<div
-					v-for="i in 3"
-					:key="`loading-skeleton-${i}`"
-					class="flex h-[98px] w-full animate-pulse rounded-2xl bg-surface-3"
-				></div>
 			</template>
-			<EmptyState
-				v-else-if="paginatedProjects.length === 0"
-				:type="!!query ? 'no-search-result' : 'no-tasks'"
-				:heading="emptyStateHeading"
-				:description="emptyStateDescription"
-			/>
+		</ModerationQueueToolbar>
+
+		<ConfettiExplosion v-if="visible" />
+		<QueueSummaryModal
+			ref="queueSummaryModal"
+			:completed-ids="moderationQueue.currentQueue.completed"
+			:skipped-ids="moderationQueue.currentQueue.skipped"
+			@review-skipped="reviewSkippedQueue"
+		/>
+
+		<ModerationQueueSkeleton v-if="pending" />
+		<EmptyState
+			v-else-if="paginatedProjects.length === 0"
+			:type="!!query ? 'no-search-result' : 'no-tasks'"
+			:heading="emptyStateHeading"
+			:description="emptyStateDescription"
+		/>
+		<div v-else class="flex flex-col gap-3">
 			<ModerationQueueCard
 				v-for="item in paginatedProjects"
-				v-else
 				:key="item.project.id"
 				:queue-entry="item"
 				:show-external-dependencies="currentFilterType === MODPACK_FILTER_TYPE"
@@ -147,7 +128,7 @@
 </template>
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ListFilterIcon, ScaleIcon, SearchIcon, SortAscIcon, SortDescIcon } from '@modrinth/assets'
+import { ListFilterIcon, ScaleIcon, SortAscIcon, SortDescIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
 import {
 	Combobox,
@@ -157,15 +138,18 @@ import {
 	EmptyState,
 	injectModrinthClient,
 	injectNotificationManager,
-	Input,
 	Pagination,
 	Toggle,
+	useFormatNumber,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import ConfettiExplosion from 'vue-confetti-explosion'
 
+import ModerationFilterCount from '~/components/ui/moderation/ModerationFilterCount.vue'
 import ModerationQueueCard from '~/components/ui/moderation/ModerationQueueCard.vue'
+import ModerationQueueSkeleton from '~/components/ui/moderation/ModerationQueueSkeleton.vue'
+import ModerationQueueToolbar from '~/components/ui/moderation/ModerationQueueToolbar.vue'
 import QueueSummaryModal from '~/components/ui/moderation/QueueSummaryModal.vue'
 import { type ModerationProject, toModerationProjects } from '~/helpers/moderation.ts'
 import { getProjectTypeForUrlShorthand } from '~/helpers/projects.js'
@@ -175,6 +159,7 @@ import { findNextEligibleQueueProject } from '~/services/moderation/queue-eligib
 useHead({ title: 'Projects queue - Modrinth' })
 
 const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
 const { addNotification } = injectNotificationManager()
 const moderationQueue = useModerationQueue()
 const route = useRoute()
diff --git a/apps/frontend/src/pages/moderation/reports/[report].vue b/apps/frontend/src/pages/moderation/reports/[report].vue
index fdd656cafe..b9b6a94147 100644
--- a/apps/frontend/src/pages/moderation/reports/[report].vue
+++ b/apps/frontend/src/pages/moderation/reports/[report].vue
@@ -28,6 +28,11 @@ const { data: report } = useQuery({
 
 <template>
 	<div class="flex flex-col gap-3">
-		<ModerationReportCard v-if="report" :report="report" :collapsed="false" />
+		<ModerationReportCard
+			v-if="report"
+			:report="report"
+			:collapsed="false"
+			:disable-collapsing="true"
+		/>
 	</div>
 </template>
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index aa364ba579..dafe872cd7 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -1,21 +1,13 @@
 <template>
 	<div class="flex flex-col gap-4">
-		<div class="flex flex-col justify-between gap-3 lg:flex-row">
-			<Input
-				v-model="query"
-				:icon="SearchIcon"
-				type="text"
-				autocomplete="off"
-				:placeholder="formatMessage(commonMessages.searchPlaceholder)"
-				clearable
-				wrapper-class="flex-1"
-				input-class="h-[40px] w-full"
-				@input="goToPage(1)"
-			/>
-
-			<div
-				class="flex flex-col items-stretch justify-end gap-2 sm:flex-row sm:items-center lg:flex-shrink-0"
-			>
+		<ModerationQueueToolbar
+			v-model="query"
+			:page="currentPage"
+			:total-pages="totalPages"
+			@search="goToPage(1)"
+			@switch-page="goToPage"
+		>
+			<template #actions>
 				<Combobox
 					v-model="currentMessageFilter"
 					class="!w-full flex-grow sm:!w-[200px] sm:flex-grow-0"
@@ -25,12 +17,14 @@
 					trigger-size="lg"
 					@select="goToPage(1)"
 				>
-					<template #selected="{ label: messageLabel }">
+					<template #selected>
 						<span class="flex flex-row gap-2 align-middle font-semibold">
 							<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
-							<span class="truncate text-contrast"
-								>{{ messageLabel }} ({{ sortedReports.length }})</span
-							>
+							<ModerationFilterCount
+								:label="currentMessageFilterName"
+								:count="sortedReports.length"
+								:loading="isLoading"
+							/>
 						</span>
 					</template>
 				</Combobox>
@@ -78,7 +72,7 @@
 							<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-inherit">
 								{{
 									currentReporterOrProject.length === 0
-										? 'All Reports'
+										? 'All reports'
 										: `${currentReporterOrProject.length} selected`
 								}}
 							</span>
@@ -111,7 +105,7 @@
 									class="h-5 w-5 shrink-0 text-primary"
 									:class="currentReporterOrProject.length === 0 ? 'text-contrast' : 'text-primary'"
 								/>
-								<span class="min-w-0 flex-1 font-semibold leading-tight">All Reports</span>
+								<span class="min-w-0 flex-1 font-semibold leading-tight">All reports</span>
 								<span class="flex shrink-0 items-center justify-center text-brand">
 									<CheckIcon
 										v-if="currentReporterOrProject.length === 0"
@@ -169,35 +163,34 @@
 						</div>
 					</template>
 				</TeleportPopoutMenu>
-			</div>
-		</div>
+			</template>
+			<template #meta>
+				<div v-if="sortedReports.length > 0">
+					Showing {{ formatNumber(pageStart) }}–{{ formatNumber(pageEnd) }} of
+					{{ formatNumber(sortedReports.length) }} reports
+				</div>
+			</template>
+		</ModerationQueueToolbar>
 
-		<div v-if="totalPages > 1" class="flex items-center justify-between">
-			<div>
-				Showing
-				{{ itemsPerPage * (currentPage - 1) + 1 }}
-				–
-				{{ itemsPerPage * (currentPage - 1) + Math.min(itemsPerPage, paginatedReports.length) }}
-				of {{ sortedReports.length }} reports
-			</div>
-			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+		<ModerationQueueSkeleton v-if="isLoading" />
+		<div
+			v-else-if="paginatedReports.length === 0"
+			class="universal-card flex h-24 items-center justify-center text-secondary"
+		>
+			No reports in queue.
 		</div>
-
-		<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
-			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-		</div>
-
-		<div class="flex flex-col gap-4">
-			<div v-if="paginatedReports.length === 0" class="universal-card h-24 animate-pulse"></div>
+		<div v-else class="flex flex-col gap-4 overflow-x-clip">
 			<ReportCard
 				v-for="report in paginatedReports"
 				:key="report.id"
 				:report="report"
 				:collapsed="true"
+				dismiss-after-close
+				@dismiss="dismissReport(report.id)"
 			/>
 		</div>
 
-		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
+		<div v-if="totalPages > 1" class="flex justify-end">
 			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
 		</div>
 	</div>
@@ -211,7 +204,6 @@ import {
 	ChevronLeftIcon,
 	LayersIcon,
 	ListFilterIcon,
-	SearchIcon,
 	SortAscIcon,
 	SortDescIcon,
 } from '@modrinth/assets'
@@ -222,161 +214,259 @@ import {
 	commonMessages,
 	formatReportType,
 	injectModrinthClient,
-	Input,
 	MultiSelect,
 	type MultiSelectItem,
 	Pagination,
 	TeleportPopoutMenu,
+	useDebugLogger,
+	useFormatNumber,
 	useVIntl,
 } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 
+import ModerationFilterCount from '~/components/ui/moderation/ModerationFilterCount.vue'
+import ModerationQueueSkeleton from '~/components/ui/moderation/ModerationQueueSkeleton.vue'
+import ModerationQueueToolbar from '~/components/ui/moderation/ModerationQueueToolbar.vue'
 import ReportCard from '~/components/ui/moderation/ModerationReportCard.vue'
 import { enrichReportBatch } from '~/helpers/moderation.ts'
 
 useHead({ title: 'Reports queue - Modrinth' })
 
 const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
 const route = useRoute()
 const router = useRouter()
 const auth = await useAuth()
 const client = injectModrinthClient()
+const debug = useDebugLogger('ModerationReports')
 
-const { data: allReports } = await useLazyAsyncData('new-moderation-reports', async () => {
-	const startTime = performance.now()
-	let currentOffset = 0
-	const REPORT_ENDPOINT_COUNT = 350
-	const allReports: ExtendedReport[] = []
+const { data: allReports, pending: reportsPending } = await useLazyAsyncData(
+	'new-moderation-reports',
+	async () => {
+		const startTime = performance.now()
+		let currentOffset = 0
+		const REPORT_ENDPOINT_COUNT = 350
+		const allReports: ExtendedReport[] = []
 
-	const enrichmentPromises: Promise<ExtendedReport[]>[] = []
+		const enrichmentPromises: Promise<ExtendedReport[]>[] = []
 
-	let reports: Labrinth.Reports.v3.Report[]
-	let hasMoreReports = true
-	while (hasMoreReports) {
-		reports = (await useBaseFetch(
-			`report?count=${REPORT_ENDPOINT_COUNT}&offset=${currentOffset}&all=true`,
-			{
-				apiVersion: 3,
-			},
-		)) as Labrinth.Reports.v3.Report[]
+		let reports: Labrinth.Reports.v3.Report[]
+		let hasMoreReports = true
+		while (hasMoreReports) {
+			reports = (await useBaseFetch(
+				`report?count=${REPORT_ENDPOINT_COUNT}&offset=${currentOffset}&all=true`,
+				{
+					apiVersion: 3,
+				},
+			)) as Labrinth.Reports.v3.Report[]
 
-		hasMoreReports = reports.length > 0
-		if (!hasMoreReports) {
-			break
+			hasMoreReports = reports.length > 0
+			if (!hasMoreReports) {
+				break
+			}
+
+			const enrichmentPromise = enrichReportBatch(reports, client)
+			enrichmentPromises.push(enrichmentPromise)
+
+			// this is explicitly not the length of the reports array, because the API may return fewer reports due to a report in the middle not being
+			// serializable if the offset is set to the reports array you can get the same report from the end multiple times.
+			currentOffset += REPORT_ENDPOINT_COUNT
+
+			if (enrichmentPromises.length >= 3) {
+				const completed = await Promise.all(enrichmentPromises.splice(0, 2))
+				allReports.push(...completed.flat())
+			}
 		}
 
-		const enrichmentPromise = enrichReportBatch(reports, client)
-		enrichmentPromises.push(enrichmentPromise)
+		const remainingBatches = await Promise.all(enrichmentPromises)
+		allReports.push(...remainingBatches.flat())
 
-		// this is explicitly not the length of the reports array, because the API may return fewer reports due to a report in the middle not being
-		// serializable if the offset is set to the reports array you can get the same report from the end multiple times.
-		currentOffset += REPORT_ENDPOINT_COUNT
+		const endTime = performance.now()
+		const duration = endTime - startTime
 
-		if (enrichmentPromises.length >= 3) {
-			const completed = await Promise.all(enrichmentPromises.splice(0, 2))
-			allReports.push(...completed.flat())
-		}
-	}
+		debug(
+			`Reports fetched and processed in ${duration.toFixed(2)}ms (${(duration / 1000).toFixed(2)}s)`,
+		)
 
-	const remainingBatches = await Promise.all(enrichmentPromises)
-	allReports.push(...remainingBatches.flat())
-
-	const endTime = performance.now()
-	const duration = endTime - startTime
-
-	console.debug(
-		`Reports fetched and processed in ${duration.toFixed(2)}ms (${(duration / 1000).toFixed(2)}s)`,
-	)
-
-	return allReports
-})
-
-const query = ref(route.query.q?.toString() || '')
-
-watch(
-	query,
-	(newQuery) => {
-		const currentQuery = { ...route.query }
-		if (newQuery) {
-			currentQuery.q = newQuery
-		} else {
-			delete currentQuery.q
-		}
-
-		router.replace({
-			path: route.path,
-			query: currentQuery,
-		})
-	},
-	{ immediate: false },
-)
-
-watch(
-	() => route.query.q,
-	(newQueryParam) => {
-		const newValue = newQueryParam?.toString() || ''
-		if (query.value !== newValue) {
-			query.value = newValue
-		}
+		return allReports
 	},
 )
 
-const currentSortTypeSorting = ref('oldest')
+const isLoading = computed(() => reportsPending.value || allReports.value == null)
+
+const SORT_VALUES = ['oldest', 'newest'] as const
 const sortTypes: ComboboxOption<string>[] = [
 	{ value: 'oldest', label: 'Oldest' },
 	{ value: 'newest', label: 'Newest' },
 ]
 
-const currentMessageFilter = ref('all')
-const messageFilterTypes: ComboboxOption<string>[] = [
-	{ value: 'all', label: 'All' },
-	{ value: 'unread', label: 'Unread' },
-	{ value: 'read', label: 'Read' },
-	{ value: 'involved', label: 'Involved' },
-]
+const MESSAGE_FILTERS = [
+	{ value: 'all', name: 'All' },
+	{ value: 'unread', name: 'Unread' },
+	{ value: 'read', name: 'Read' },
+	{ value: 'involved', name: 'Involved' },
+] as const
+const MESSAGE_FILTER_VALUES = MESSAGE_FILTERS.map((filter) => filter.value)
 
-const currentProjectTypeFilter = ref('all')
-const projectTypeFilterTypes: ComboboxOption<string>[] = [
-	{ value: 'all', label: 'All project types' },
-	{ value: 'modpack', label: 'Modpacks' },
-	{ value: 'mod', label: 'Mods' },
-	{ value: 'resourcepack', label: 'Resource Packs' },
-	{ value: 'datapack', label: 'Data Packs' },
-	{ value: 'plugin', label: 'Plugins' },
-	{ value: 'shader', label: 'Shaders' },
-	{ value: 'minecraft_java_server', label: 'Servers' },
-	{ value: 'shared-instance', label: 'Shared instance' },
-]
+const PROJECT_TYPE_FILTERS = [
+	{ value: 'all', name: 'All project types' },
+	{ value: 'modpack', name: 'Modpacks' },
+	{ value: 'mod', name: 'Mods' },
+	{ value: 'resourcepack', name: 'Resource Packs' },
+	{ value: 'datapack', name: 'Data Packs' },
+	{ value: 'plugin', name: 'Plugins' },
+	{ value: 'shader', name: 'Shaders' },
+	{ value: 'minecraft_java_server', name: 'Servers' },
+	{ value: 'shared-instance', name: 'Shared instance' },
+] as const
+const PROJECT_TYPE_VALUES = PROJECT_TYPE_FILTERS.map((filter) => filter.value)
 
-const currentReportTargetFilter = ref('all')
-const reportTargetFilterTypes: ComboboxOption<string>[] = [
-	{ value: 'all', label: 'All' },
-	{ value: 'project', label: 'Projects' },
-	{ value: 'user', label: 'Users' },
-	{ value: 'version', label: 'Versions' },
-	{ value: 'shared-instance', label: 'Shared instances' },
-]
+const REPORT_TARGET_FILTERS = [
+	{ value: 'all', name: 'All' },
+	{ value: 'project', name: 'Projects' },
+	{ value: 'user', name: 'Users' },
+	{ value: 'version', name: 'Versions' },
+	{ value: 'shared-instance', name: 'Shared instances' },
+] as const
+const REPORT_TARGET_VALUES = REPORT_TARGET_FILTERS.map((filter) => filter.value)
 
-const currentReportIssueFilter = ref('all')
-const reportIssueFilterTypes = computed<ComboboxOption<string>[]>(() => {
-	const base: ComboboxOption<string>[] = [{ value: 'all', label: 'All' }]
-	if (!allReports.value) return base
+function parseAllowed<T extends string>(value: unknown, allowed: readonly T[], fallback: T): T {
+	const parsed = queryAsStringOrEmpty((value as string | string[] | null | undefined) ?? '')
+	return (allowed as readonly string[]).includes(parsed) ? (parsed as T) : fallback
+}
 
-	const issueTypes = new Set(allReports.value.map((report) => report.report_type))
+function parsePage(value: unknown): number {
+	const page = Number.parseInt(
+		queryAsStringOrEmpty((value as string | string[] | null | undefined) ?? ''),
+		10,
+	)
+	return Number.isInteger(page) && page > 0 ? page : 1
+}
 
-	const sortedTypes = Array.from(issueTypes).sort()
-	return [
-		...base,
-		...sortedTypes.map((type) => ({
-			value: type,
-			label: formatReportType(formatMessage, type),
-		})),
-	]
-})
+function selectedValuesEqual(left: string[], right: string[]): boolean {
+	if (left.length !== right.length) return false
+	return left.every((value, index) => value === right[index])
+}
+
+function serializeRouteQuery(query: typeof route.query): string {
+	const keys = Object.keys(query).sort()
+	return JSON.stringify(
+		Object.fromEntries(
+			keys.flatMap((key) => {
+				const value = query[key]
+				if (value == null || value === '') return []
+				return [[key, Array.isArray(value) ? value.map(String) : String(value)]]
+			}),
+		),
+	)
+}
+
+const query = ref(queryAsStringOrEmpty(route.query.q ?? ''))
+const currentSortTypeSorting = ref(parseAllowed(route.query.sort, SORT_VALUES, 'oldest'))
+const currentMessageFilter = ref(parseAllowed(route.query.messages, MESSAGE_FILTER_VALUES, 'all'))
+const currentMessageFilterName = computed(
+	() =>
+		MESSAGE_FILTERS.find((filter) => filter.value === currentMessageFilter.value)?.name ?? 'All',
+)
+const currentProjectTypeFilter = ref(
+	parseAllowed(route.query.projectType, PROJECT_TYPE_VALUES, 'all'),
+)
+const currentReportTargetFilter = ref(parseAllowed(route.query.target, REPORT_TARGET_VALUES, 'all'))
+const currentReportIssueFilter = ref(queryAsStringOrEmpty(route.query.issue ?? '') || 'all')
+const currentReporterOrProject = ref(queryAsStringArray(route.query.selected))
+const currentPage = ref(parsePage(route.query.page))
+
+function writeFiltersToRoute() {
+	const nextQuery = { ...route.query }
+
+	if (query.value) nextQuery.q = query.value
+	else delete nextQuery.q
+
+	if (currentSortTypeSorting.value !== 'oldest') nextQuery.sort = currentSortTypeSorting.value
+	else delete nextQuery.sort
+
+	if (currentMessageFilter.value !== 'all') nextQuery.messages = currentMessageFilter.value
+	else delete nextQuery.messages
+
+	if (currentReportTargetFilter.value !== 'all') nextQuery.target = currentReportTargetFilter.value
+	else delete nextQuery.target
+
+	if (currentReportIssueFilter.value !== 'all') nextQuery.issue = currentReportIssueFilter.value
+	else delete nextQuery.issue
+
+	if (currentProjectTypeFilter.value !== 'all') {
+		nextQuery.projectType = currentProjectTypeFilter.value
+	} else {
+		delete nextQuery.projectType
+	}
+
+	if (currentReporterOrProject.value.length === 1) {
+		nextQuery.selected = currentReporterOrProject.value[0]
+	} else if (currentReporterOrProject.value.length > 1) {
+		nextQuery.selected = currentReporterOrProject.value
+	} else {
+		delete nextQuery.selected
+	}
+
+	if (currentPage.value > 1) nextQuery.page = String(currentPage.value)
+	else delete nextQuery.page
+
+	if (serializeRouteQuery(route.query) === serializeRouteQuery(nextQuery)) return
+
+	router.replace({
+		path: route.path,
+		query: nextQuery,
+	})
+}
+
+function readFiltersFromRoute() {
+	const nextQuery = queryAsStringOrEmpty(route.query.q ?? '')
+	if (query.value !== nextQuery) query.value = nextQuery
+
+	const nextSort = parseAllowed(route.query.sort, SORT_VALUES, 'oldest')
+	if (currentSortTypeSorting.value !== nextSort) currentSortTypeSorting.value = nextSort
+
+	const nextMessages = parseAllowed(route.query.messages, MESSAGE_FILTER_VALUES, 'all')
+	if (currentMessageFilter.value !== nextMessages) currentMessageFilter.value = nextMessages
+
+	const nextProjectType = parseAllowed(route.query.projectType, PROJECT_TYPE_VALUES, 'all')
+	if (currentProjectTypeFilter.value !== nextProjectType) {
+		currentProjectTypeFilter.value = nextProjectType
+	}
+
+	const nextTarget = parseAllowed(route.query.target, REPORT_TARGET_VALUES, 'all')
+	if (currentReportTargetFilter.value !== nextTarget) currentReportTargetFilter.value = nextTarget
+
+	const nextIssue = queryAsStringOrEmpty(route.query.issue ?? '') || 'all'
+	if (currentReportIssueFilter.value !== nextIssue) currentReportIssueFilter.value = nextIssue
+
+	const nextSelected = queryAsStringArray(route.query.selected)
+	if (!selectedValuesEqual(currentReporterOrProject.value, nextSelected)) {
+		currentReporterOrProject.value = nextSelected
+	}
+
+	const nextPage = parsePage(route.query.page)
+	if (currentPage.value !== nextPage) currentPage.value = nextPage
+}
+
+watch(
+	[
+		query,
+		currentSortTypeSorting,
+		currentMessageFilter,
+		currentProjectTypeFilter,
+		currentReportTargetFilter,
+		currentReportIssueFilter,
+		currentReporterOrProject,
+		currentPage,
+	],
+	writeFiltersToRoute,
+	{ deep: true },
+)
+
+watch(() => route.query, readFiltersFromRoute, { deep: true })
 
 type ReportedType<T> = T & { report_item_count: number }
-
-const currentReporterOrProject = ref<string[]>([])
 const reporterOrProjectOptions = computed<MultiSelectItem<string>[]>(() => {
 	if (!allReports.value) return []
 	const options: MultiSelectItem<string>[] = []
@@ -408,7 +498,7 @@ const reporterOrProjectOptions = computed<MultiSelectItem<string>[]>(() => {
 			.forEach((project) => {
 				options.push({
 					value: `project/${project.id}`,
-					label: `${project.title} (${project.report_item_count})`,
+					label: `${project.title} (${formatNumber(project.report_item_count)})`,
 					icon: project.icon_url ? h('img', { src: project.icon_url }) : undefined,
 				})
 			})
@@ -424,7 +514,7 @@ const reporterOrProjectOptions = computed<MultiSelectItem<string>[]>(() => {
 		.forEach((reporter) => {
 			options.push({
 				value: `reporter/${reporter.id}`,
-				label: `${reporter.username} (${reporter.report_item_count})`,
+				label: `${reporter.username} (${formatNumber(reporter.report_item_count)})`,
 				icon: reporter.avatar_url ? h('img', { src: reporter.avatar_url }) : undefined,
 			})
 		})
@@ -432,7 +522,6 @@ const reporterOrProjectOptions = computed<MultiSelectItem<string>[]>(() => {
 	return options
 })
 
-const currentPage = ref(1)
 const itemsPerPage = 15
 const totalPages = computed(() => Math.ceil((sortedReports.value?.length || 0) / itemsPerPage))
 
@@ -499,65 +588,164 @@ const baseFiltered = computed(() => {
 })
 
 const filteredReports = computed(() => {
-	const messageFilter = currentMessageFilter.value
-	const projectTypeFilter = currentProjectTypeFilter.value
-	const reportTargetFilter = currentReportTargetFilter.value
-	const reportIssueFilter = currentReportIssueFilter.value
-
-	if (
-		messageFilter === 'all' &&
-		projectTypeFilter === 'all' &&
-		reportTargetFilter === 'all' &&
-		reportIssueFilter === 'all'
-	) {
-		return baseFiltered.value
-	}
-
-	const messageFilterPredicate = (report: ExtendedReport) => {
-		const messages = report.thread?.messages || []
-
-		if (messageFilter === 'all') return true
-		if (messages.length === 0) return messageFilter === 'Unread'
-		if (!messages[messages.length - 1].author_id) return false
-
-		if (messageFilter === 'involved') {
-			const userId = (auth.value.user as any)?.id
-			return userId && messages.some((message) => message.author_id === userId)
-		}
-
-		const roleMap = memberRoleMap.value.get(report.id)
-		if (!roleMap) return false
-
-		const authorRole = roleMap.get(messages[messages.length - 1].author_id)
-		const isModeratorMessage = authorRole === 'moderator' || authorRole === 'admin'
-
-		return messageFilter === 'Read' ? isModeratorMessage : !isModeratorMessage
-	}
-
-	const projectTypeFilterPredicate = (report: ExtendedReport) => {
-		if (projectTypeFilter === 'all') return true
-		if (projectTypeFilter === 'shared-instance') return report.item_type === 'shared-instance'
-		return report.project?.project_type === projectTypeFilter
-	}
-
-	const reportTargetFilterPredicate = (report: ExtendedReport) => {
-		return reportTargetFilter === 'all' || report.item_type === reportTargetFilter
-	}
-
-	const reportIssueFilterPredicate = (report: ExtendedReport) => {
-		return reportIssueFilter === 'all' || report.report_type === reportIssueFilter
-	}
-
 	return baseFiltered.value.filter((report) => {
 		return (
-			messageFilterPredicate(report) &&
-			projectTypeFilterPredicate(report) &&
-			reportTargetFilterPredicate(report) &&
-			reportIssueFilterPredicate(report)
+			matchesMessageFilter(report, currentMessageFilter.value) &&
+			matchesProjectTypeFilter(report, currentProjectTypeFilter.value) &&
+			matchesReportTargetFilter(report, currentReportTargetFilter.value) &&
+			matchesReportIssueFilter(report, currentReportIssueFilter.value)
 		)
 	})
 })
 
+function matchesMessageFilter(
+	report: ExtendedReport,
+	messageFilter: (typeof MESSAGE_FILTERS)[number]['value'] | string,
+): boolean {
+	if (messageFilter === 'all') return true
+
+	const messages = report.thread?.messages || []
+	if (messages.length === 0) return messageFilter === 'unread'
+	if (!messages[messages.length - 1].author_id) return false
+
+	if (messageFilter === 'involved') {
+		const userId = (auth.value.user as any)?.id
+		return !!userId && messages.some((message) => message.author_id === userId)
+	}
+
+	const roleMap = memberRoleMap.value.get(report.id)
+	if (!roleMap) return false
+
+	const authorRole = roleMap.get(messages[messages.length - 1].author_id)
+	const isModeratorMessage = authorRole === 'moderator' || authorRole === 'admin'
+
+	return messageFilter === 'read' ? isModeratorMessage : !isModeratorMessage
+}
+
+function matchesProjectTypeFilter(
+	report: ExtendedReport,
+	projectTypeFilter: (typeof PROJECT_TYPE_FILTERS)[number]['value'] | string,
+): boolean {
+	if (projectTypeFilter === 'all') return true
+	if (projectTypeFilter === 'shared-instance') return report.item_type === 'shared-instance'
+	return report.project?.project_type === projectTypeFilter
+}
+
+function matchesReportTargetFilter(
+	report: ExtendedReport,
+	reportTargetFilter: (typeof REPORT_TARGET_FILTERS)[number]['value'] | string,
+): boolean {
+	return reportTargetFilter === 'all' || report.item_type === reportTargetFilter
+}
+
+function matchesReportIssueFilter(report: ExtendedReport, reportIssueFilter: string): boolean {
+	return reportIssueFilter === 'all' || report.report_type === reportIssueFilter
+}
+
+function labelWithCount(name: string, count: number): string {
+	return `${name} (${formatNumber(count)})`
+}
+
+const reportsForMessageCounts = computed(() =>
+	baseFiltered.value.filter(
+		(report) =>
+			matchesProjectTypeFilter(report, currentProjectTypeFilter.value) &&
+			matchesReportTargetFilter(report, currentReportTargetFilter.value) &&
+			matchesReportIssueFilter(report, currentReportIssueFilter.value),
+	),
+)
+const reportsForProjectTypeCounts = computed(() =>
+	baseFiltered.value.filter(
+		(report) =>
+			matchesMessageFilter(report, currentMessageFilter.value) &&
+			matchesReportTargetFilter(report, currentReportTargetFilter.value) &&
+			matchesReportIssueFilter(report, currentReportIssueFilter.value),
+	),
+)
+const reportsForTargetCounts = computed(() =>
+	baseFiltered.value.filter(
+		(report) =>
+			matchesMessageFilter(report, currentMessageFilter.value) &&
+			matchesProjectTypeFilter(report, currentProjectTypeFilter.value) &&
+			matchesReportIssueFilter(report, currentReportIssueFilter.value),
+	),
+)
+const reportsForIssueCounts = computed(() =>
+	baseFiltered.value.filter(
+		(report) =>
+			matchesMessageFilter(report, currentMessageFilter.value) &&
+			matchesProjectTypeFilter(report, currentProjectTypeFilter.value) &&
+			matchesReportTargetFilter(report, currentReportTargetFilter.value),
+	),
+)
+
+const messageFilterTypes = computed<ComboboxOption<string>[]>(() =>
+	MESSAGE_FILTERS.map((filter) => ({
+		value: filter.value,
+		label: isLoading.value
+			? filter.name
+			: labelWithCount(
+					filter.name,
+					reportsForMessageCounts.value.filter((report) =>
+						matchesMessageFilter(report, filter.value),
+					).length,
+				),
+	})),
+)
+
+const projectTypeFilterTypes = computed<ComboboxOption<string>[]>(() =>
+	PROJECT_TYPE_FILTERS.map((filter) => ({
+		value: filter.value,
+		label: isLoading.value
+			? filter.name
+			: labelWithCount(
+					filter.name,
+					reportsForProjectTypeCounts.value.filter((report) =>
+						matchesProjectTypeFilter(report, filter.value),
+					).length,
+				),
+	})),
+)
+
+const reportTargetFilterTypes = computed<ComboboxOption<string>[]>(() =>
+	REPORT_TARGET_FILTERS.map((filter) => ({
+		value: filter.value,
+		label: isLoading.value
+			? filter.name
+			: labelWithCount(
+					filter.name,
+					reportsForTargetCounts.value.filter((report) =>
+						matchesReportTargetFilter(report, filter.value),
+					).length,
+				),
+	})),
+)
+
+const reportIssueFilterTypes = computed<ComboboxOption<string>[]>(() => {
+	const issueTypes = new Set((allReports.value ?? []).map((report) => report.report_type))
+	const options = [
+		{ value: 'all', name: 'All' },
+		...Array.from(issueTypes)
+			.sort()
+			.map((type) => ({
+				value: type,
+				name: formatReportType(formatMessage, type),
+			})),
+	]
+
+	return options.map((filter) => ({
+		value: filter.value,
+		label: isLoading.value
+			? filter.name
+			: labelWithCount(
+					filter.name,
+					reportsForIssueCounts.value.filter((report) =>
+						matchesReportIssueFilter(report, filter.value),
+					).length,
+				),
+	}))
+})
+
 const sortedReports = computed(() => {
 	const reporterOrProjectFilter = currentReporterOrProject.value
 	const filtered =
@@ -589,7 +777,37 @@ const paginatedReports = computed(() => {
 	return sortedReports.value.slice(start, end)
 })
 
+const pageStart = computed(() =>
+	sortedReports.value.length === 0 ? 0 : itemsPerPage * (currentPage.value - 1) + 1,
+)
+const pageEnd = computed(
+	() =>
+		itemsPerPage * (currentPage.value - 1) + Math.min(itemsPerPage, paginatedReports.value.length),
+)
+
 function goToPage(page: number) {
 	currentPage.value = page
 }
+
+watch(totalPages, (pages) => {
+	if (isLoading.value) return
+
+	if (pages === 0) {
+		if (currentPage.value !== 1) goToPage(1)
+		return
+	}
+
+	if (currentPage.value > pages) {
+		goToPage(pages)
+	}
+})
+
+function dismissReport(reportId: string) {
+	if (!allReports.value) return
+
+	allReports.value = allReports.value.filter((report) => report.id !== reportId)
+	if (currentPage.value > totalPages.value) {
+		currentPage.value = Math.max(1, totalPages.value)
+	}
+}
 </script>
diff --git a/apps/frontend/src/pages/moderation/technical-review/[project].vue b/apps/frontend/src/pages/moderation/technical-review/[project].vue
index e3f413c26b..2c137ff5c0 100644
--- a/apps/frontend/src/pages/moderation/technical-review/[project].vue
+++ b/apps/frontend/src/pages/moderation/technical-review/[project].vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ArrowLeftIcon, LoaderCircleIcon } from '@modrinth/assets'
-import { ButtonLink, injectModrinthClient } from '@modrinth/ui'
+import { LoaderCircleIcon } from '@modrinth/assets'
+import { BackToParentLink, injectModrinthClient } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 
 import MaliciousSummaryModal, {
 	type UnsafeFile,
 } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
 import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
+import { flattenFileReports } from '~/components/ui/moderation/tech-review/helpers'
+import { useTechReviewSources } from '~/components/ui/moderation/tech-review/use-tech-review-sources'
 
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
@@ -18,133 +20,6 @@ const projectId = String(useRouteId('project'))
 
 useHead({ title: () => `Tech review - ${projectId} - Modrinth` })
 
-const CACHE_TTL = 24 * 60 * 60 * 1000
-const CACHE_KEY_PREFIX = 'tech_review_source_'
-
-type CachedSource = {
-	source: string
-	timestamp: number
-}
-
-function getCachedSource(detailId: string): string | null {
-	try {
-		const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
-		if (!cached) return null
-
-		const data: CachedSource = JSON.parse(cached)
-		const now = Date.now()
-
-		if (now - data.timestamp > CACHE_TTL) {
-			localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
-			return null
-		}
-
-		return data.source
-	} catch {
-		return null
-	}
-}
-
-function setCachedSource(detailId: string, source: string): void {
-	try {
-		const data: CachedSource = {
-			source,
-			timestamp: Date.now(),
-		}
-		localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
-	} catch (error) {
-		console.error('Failed to cache source:', error)
-	}
-}
-
-function clearExpiredCache(): void {
-	try {
-		const now = Date.now()
-		const keys = Object.keys(localStorage)
-
-		for (const key of keys) {
-			if (key.startsWith(CACHE_KEY_PREFIX)) {
-				const cached = localStorage.getItem(key)
-				if (cached) {
-					const data: CachedSource = JSON.parse(cached)
-					if (now - data.timestamp > CACHE_TTL) {
-						localStorage.removeItem(key)
-					}
-				}
-			}
-		}
-	} catch (error) {
-		console.error('Failed to clear expired cache:', error)
-	}
-}
-
-if (import.meta.client) {
-	clearExpiredCache()
-}
-
-const loadingIssues = reactive<Set<string>>(new Set())
-const decompiledSources = reactive<Map<string, string>>(new Map())
-const loadedIssues = reactive<Set<string>>(new Set())
-
-async function loadIssueSource(issueId: string): Promise<void> {
-	if (loadingIssues.has(issueId) || loadedIssues.has(issueId)) return
-
-	loadingIssues.add(issueId)
-
-	try {
-		const issueData = await client.labrinth.tech_review_internal.getIssue(issueId)
-
-		for (const detail of issueData.details) {
-			if (detail.decompiled_source) {
-				decompiledSources.set(detail.id, detail.decompiled_source)
-				setCachedSource(detail.id, detail.decompiled_source)
-			}
-		}
-		loadedIssues.add(issueId)
-	} catch (error) {
-		console.error('Failed to load issue source:', error)
-	} finally {
-		loadingIssues.delete(issueId)
-	}
-}
-
-function findIssuesByIds(issueIds: Set<string>): Labrinth.TechReview.Internal.FileIssue[] {
-	const issues: Labrinth.TechReview.Internal.FileIssue[] = []
-
-	if (!reviewItem.value) return []
-
-	for (const report of reviewItem.value.reports) {
-		for (const issue of report.issues) {
-			if (issueIds.has(issue.id)) {
-				issues.push(issue)
-			}
-		}
-	}
-
-	return issues
-}
-
-function handleLoadIssueSources(issueIds: string[]): void {
-	const uniqueIssueIds = new Set(issueIds)
-	const issues = findIssuesByIds(uniqueIssueIds)
-
-	for (const issue of issues) {
-		for (const detail of issue.details) {
-			if (!decompiledSources.has(detail.id)) {
-				const cached = getCachedSource(detail.id)
-				if (cached) {
-					decompiledSources.set(detail.id, cached)
-				}
-			}
-		}
-
-		const hasUncached = issue.details.some((detail) => !decompiledSources.has(detail.id))
-		if (hasUncached) {
-			loadIssueSource(issue.id)
-		}
-	}
-}
-
 const {
 	data: projectReportData,
 	isLoading: isLoadingReport,
@@ -194,11 +69,6 @@ const isLoading = computed(
 
 const hasError = computed(() => isReportError.value || isProjectError.value)
 
-type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
-	id: string
-	version_id: string
-}
-
 const ownership = computed<Labrinth.TechReview.Internal.Ownership | null>(() => {
 	if (organizationData.value) {
 		return {
@@ -229,15 +99,7 @@ const reviewItem = computed(() => {
 
 	const { project_report, thread } = projectReportData.value
 
-	const reports: FlattenedFileReport[] = project_report
-		? project_report.versions.flatMap((version) =>
-				version.files.map((file) => ({
-					...file,
-					id: file.report_id,
-					version_id: version.version_id,
-				})),
-			)
-		: []
+	const reports = project_report ? flattenFileReports(project_report.versions) : []
 
 	return {
 		project: projectData.value,
@@ -247,6 +109,10 @@ const reviewItem = computed(() => {
 	}
 })
 
+const { loadingIssues, decompiledSources, handleLoadIssueSources } = useTechReviewSources(
+	() => reviewItem.value?.reports.flatMap((report) => report.issues) ?? [],
+)
+
 const focusedDetailId = computed(() => route.query.detail?.toString() ?? null)
 
 async function handleMarkComplete(projectId: string) {
@@ -301,13 +167,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<div class="flex flex-col gap-4">
-		<div>
-			<ButtonLink :to="'/moderation/technical-review'">
-				<ArrowLeftIcon class="size-5" />
-				Back to queue
-			</ButtonLink>
-		</div>
+	<div class="flex flex-col">
+		<BackToParentLink :to="'/moderation/technical-review'"> Back to queue </BackToParentLink>
 
 		<div v-if="isLoading" class="flex flex-col gap-4">
 			<div class="universal-card flex h-48 items-center justify-center">
@@ -333,12 +194,12 @@ onUnmounted(() => {
 			:loading-issues="loadingIssues"
 			:decompiled-sources="decompiledSources"
 			:collapsed="false"
+			disable-collapsing
 			@refetch="refetch"
 			@load-issue-sources="handleLoadIssueSources"
 			@mark-complete="handleMarkComplete"
 			@show-malicious-summary="handleShowMaliciousSummary"
 		/>
-
 		<MaliciousSummaryModal ref="maliciousSummaryModalRef" :unsafe-files="currentUnsafeFiles" />
 	</div>
 </template>
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
index 7b250b8df8..9edb7a0aba 100644
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/index.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import {
-	BlendIcon,
-	ListFilterIcon,
-	LoaderCircleIcon,
-	SearchIcon,
-	SortAscIcon,
-	SortDescIcon,
-} from '@modrinth/assets'
+import { BlendIcon, ListFilterIcon, SortAscIcon, SortDescIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	Combobox,
 	type ComboboxOption,
 	commonMessages,
 	injectModrinthClient,
-	Input,
 	Pagination,
 	TeleportPopoutMenu,
 	Toggle,
+	useFormatNumber,
 	useVIntl,
 } from '@modrinth/ui'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
@@ -26,7 +19,11 @@ import { nextTick, reactive } from 'vue'
 import MaliciousSummaryModal, {
 	type UnsafeFile,
 } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
+import ModerationQueueSkeleton from '~/components/ui/moderation/ModerationQueueSkeleton.vue'
+import ModerationQueueToolbar from '~/components/ui/moderation/ModerationQueueToolbar.vue'
 import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
+import { flattenFileReports } from '~/components/ui/moderation/tech-review/helpers'
+import { useTechReviewSources } from '~/components/ui/moderation/tech-review/use-tech-review-sources'
 
 useHead({ title: 'Tech review queue - Modrinth' })
 
@@ -34,187 +31,14 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const keybinds = useModerationKeybinds()
 
-const currentPage = ref(1)
 const API_PAGE_SIZE = 50
 const UI_PAGE_SIZE = 4
 const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
 const route = useRoute()
 const router = useRouter()
 
-const CACHE_TTL = 24 * 60 * 60 * 1000
-const CACHE_KEY_PREFIX = 'tech_review_source_'
-
-type CachedSource = {
-	source: string
-	timestamp: number
-}
-
-function getCachedSource(detailId: string): string | null {
-	try {
-		const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
-		if (!cached) return null
-
-		const data: CachedSource = JSON.parse(cached)
-		const now = Date.now()
-
-		if (now - data.timestamp > CACHE_TTL) {
-			localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
-			return null
-		}
-
-		return data.source
-	} catch {
-		return null
-	}
-}
-
-function setCachedSource(detailId: string, source: string): void {
-	try {
-		const data: CachedSource = {
-			source,
-			timestamp: Date.now(),
-		}
-		localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
-	} catch (error) {
-		console.error('Failed to cache source:', error)
-	}
-}
-
-function clearExpiredCache(): void {
-	try {
-		const now = Date.now()
-		const keys = Object.keys(localStorage)
-
-		for (const key of keys) {
-			if (key.startsWith(CACHE_KEY_PREFIX)) {
-				const cached = localStorage.getItem(key)
-				if (cached) {
-					const data: CachedSource = JSON.parse(cached)
-					if (now - data.timestamp > CACHE_TTL) {
-						localStorage.removeItem(key)
-					}
-				}
-			}
-		}
-	} catch (error) {
-		console.error('Failed to clear expired cache:', error)
-	}
-}
-
-clearExpiredCache()
-
-const loadingIssues = reactive<Set<string>>(new Set())
-const decompiledSources = reactive<Map<string, string>>(new Map())
-const loadedIssues = reactive<Set<string>>(new Set())
-
-async function loadIssueSource(issueId: string): Promise<void> {
-	if (loadingIssues.has(issueId) || loadedIssues.has(issueId)) return
-
-	loadingIssues.add(issueId)
-
-	try {
-		const issueData = await client.labrinth.tech_review_internal.getIssue(issueId)
-
-		for (const detail of issueData.details) {
-			if (detail.decompiled_source) {
-				decompiledSources.set(detail.id, detail.decompiled_source)
-				setCachedSource(detail.id, detail.decompiled_source)
-			}
-		}
-		loadedIssues.add(issueId)
-	} catch (error) {
-		console.error('Failed to load issue source:', error)
-	} finally {
-		loadingIssues.delete(issueId)
-	}
-}
-
-function findIssuesByIds(issueIds: Set<string>): Labrinth.TechReview.Internal.FileIssue[] {
-	const issues: Labrinth.TechReview.Internal.FileIssue[] = []
-
-	for (const review of reviewItems.value) {
-		for (const report of review.reports) {
-			for (const issue of report.issues) {
-				if (issueIds.has(issue.id)) {
-					issues.push(issue)
-				}
-			}
-		}
-	}
-
-	return issues
-}
-
-function handleLoadIssueSources(issueIds: string[]): void {
-	const uniqueIssueIds = new Set(issueIds)
-	const issues = findIssuesByIds(uniqueIssueIds)
-
-	for (const issue of issues) {
-		for (const detail of issue.details) {
-			if (!decompiledSources.has(detail.id)) {
-				const cached = getCachedSource(detail.id)
-				if (cached) {
-					decompiledSources.set(detail.id, cached)
-				}
-			}
-		}
-
-		const hasUncached = issue.details.some((detail) => !decompiledSources.has(detail.id))
-		if (hasUncached) {
-			loadIssueSource(issue.id)
-		}
-	}
-}
-
-const query = ref(route.query.q?.toString() || '')
-
-watch(
-	query,
-	(newQuery) => {
-		const currentQuery = { ...route.query }
-		if (newQuery) {
-			currentQuery.q = newQuery
-		} else {
-			delete currentQuery.q
-		}
-
-		router.replace({
-			path: route.path,
-			query: currentQuery,
-		})
-		goToPage(1)
-	},
-	{ immediate: false },
-)
-
-watch(
-	() => route.query.q,
-	(newQueryParam) => {
-		const newValue = newQueryParam?.toString() || ''
-		if (query.value !== newValue) {
-			query.value = newValue
-		}
-	},
-)
-
-const currentFilterType = ref('All flags')
-
-const filterTypes = computed<ComboboxOption<string>[]>(() => {
-	const base: ComboboxOption<string>[] = [{ value: 'All flags', label: 'All flags' }]
-	if (!reviewItems.value) return base
-
-	const issueTypes = new Set(
-		reviewItems.value
-			.flatMap((review) => review.reports)
-			.flatMap((report) => report.issues)
-			.map((issue) => issue.issue_type),
-	)
-
-	const sortedTypes = Array.from(issueTypes).sort()
-	return [...base, ...sortedTypes.map((type) => ({ value: type, label: type }))]
-})
-
-const currentSortType = ref('Severity highest')
+const SORT_VALUES = ['Severity highest', 'Severity lowest', 'Oldest', 'Newest'] as const
 const sortTypes: ComboboxOption<string>[] = [
 	{ value: 'Severity highest', label: 'Severity highest' },
 	{ value: 'Severity lowest', label: 'Severity lowest' },
@@ -222,26 +46,200 @@ const sortTypes: ComboboxOption<string>[] = [
 	{ value: 'Newest', label: 'Newest' },
 ]
 
-const currentResponseFilter = ref('All')
+const RESPONSE_FILTER_VALUES = ['All', 'Unread', 'Read'] as const
 const responseFilterTypes: ComboboxOption<string>[] = [
 	{ value: 'All', label: 'All' },
 	{ value: 'Unread', label: 'Unread' },
 	{ value: 'Read', label: 'Read' },
 ]
 
-const currentProjectTypeFilter = ref('All project types')
-const projectTypeFilterTypes: ComboboxOption<string>[] = [
-	{ value: 'All project types', label: 'All project types' },
-	{ value: 'Modpacks', label: 'Modpacks' },
-	{ value: 'Mods', label: 'Mods' },
-	{ value: 'Resource Packs', label: 'Resource Packs' },
-	{ value: 'Data Packs', label: 'Data Packs' },
-	{ value: 'Plugins', label: 'Plugins' },
-	{ value: 'Shaders', label: 'Shaders' },
-	{ value: 'Servers', label: 'Servers' },
-]
+const PROJECT_TYPE_FILTERS = [
+	{ value: 'All project types', name: 'All project types' },
+	{ value: 'Modpacks', name: 'Modpacks' },
+	{ value: 'Mods', name: 'Mods' },
+	{ value: 'Resource Packs', name: 'Resource Packs' },
+	{ value: 'Data Packs', name: 'Data Packs' },
+	{ value: 'Plugins', name: 'Plugins' },
+	{ value: 'Shaders', name: 'Shaders' },
+	{ value: 'Servers', name: 'Servers' },
+] as const
+const PROJECT_TYPE_VALUES = PROJECT_TYPE_FILTERS.map((filter) => filter.value)
 
-const inOtherQueueFilter = ref(true)
+function parseAllowed<T extends string>(value: unknown, allowed: readonly T[], fallback: T): T {
+	const parsed = queryAsStringOrEmpty((value as string | string[] | null | undefined) ?? '')
+	return (allowed as readonly string[]).includes(parsed) ? (parsed as T) : fallback
+}
+
+function parsePage(value: unknown): number {
+	const page = Number.parseInt(
+		queryAsStringOrEmpty((value as string | string[] | null | undefined) ?? ''),
+		10,
+	)
+	return Number.isInteger(page) && page > 0 ? page : 1
+}
+
+function parseBoolean(value: unknown, fallback: boolean): boolean {
+	const parsed = queryAsStringOrEmpty(
+		(value as string | string[] | null | undefined) ?? '',
+	).toLowerCase()
+	if (parsed === 'true' || parsed === '1') return true
+	if (parsed === 'false' || parsed === '0') return false
+	return fallback
+}
+
+function serializeRouteQuery(query: typeof route.query): string {
+	const keys = Object.keys(query).sort()
+	return JSON.stringify(
+		Object.fromEntries(
+			keys.flatMap((key) => {
+				const value = query[key]
+				if (value == null || value === '') return []
+				return [[key, Array.isArray(value) ? value.map(String) : String(value)]]
+			}),
+		),
+	)
+}
+
+const query = ref(queryAsStringOrEmpty(route.query.q ?? ''))
+const currentFilterType = ref(queryAsStringOrEmpty(route.query.flags ?? '') || 'All flags')
+const currentSortType = ref(parseAllowed(route.query.sort, SORT_VALUES, 'Severity highest'))
+const currentResponseFilter = ref(parseAllowed(route.query.response, RESPONSE_FILTER_VALUES, 'All'))
+const currentProjectTypeFilter = ref(
+	parseAllowed(route.query.projectType, PROJECT_TYPE_VALUES, 'All project types'),
+)
+const inOtherQueueFilter = ref(parseBoolean(route.query.underReview, true))
+const currentPage = ref(parsePage(route.query.page))
+
+let syncingFromRoute = false
+
+function writeFiltersToRoute() {
+	if (syncingFromRoute) return
+
+	const nextQuery = { ...route.query }
+
+	if (query.value) nextQuery.q = query.value
+	else delete nextQuery.q
+
+	if (currentSortType.value !== 'Severity highest') nextQuery.sort = currentSortType.value
+	else delete nextQuery.sort
+
+	if (currentResponseFilter.value !== 'All') nextQuery.response = currentResponseFilter.value
+	else delete nextQuery.response
+
+	if (currentFilterType.value !== 'All flags') nextQuery.flags = currentFilterType.value
+	else delete nextQuery.flags
+
+	if (currentProjectTypeFilter.value !== 'All project types') {
+		nextQuery.projectType = currentProjectTypeFilter.value
+	} else {
+		delete nextQuery.projectType
+	}
+
+	if (!inOtherQueueFilter.value) nextQuery.underReview = 'false'
+	else delete nextQuery.underReview
+
+	if (currentPage.value > 1) nextQuery.page = String(currentPage.value)
+	else delete nextQuery.page
+
+	if (serializeRouteQuery(route.query) === serializeRouteQuery(nextQuery)) return
+
+	router.replace({
+		path: route.path,
+		query: nextQuery,
+	})
+}
+
+function readFiltersFromRoute() {
+	syncingFromRoute = true
+
+	const nextQuery = queryAsStringOrEmpty(route.query.q ?? '')
+	if (query.value !== nextQuery) query.value = nextQuery
+
+	const nextFlags = queryAsStringOrEmpty(route.query.flags ?? '') || 'All flags'
+	if (currentFilterType.value !== nextFlags) currentFilterType.value = nextFlags
+
+	const nextSort = parseAllowed(route.query.sort, SORT_VALUES, 'Severity highest')
+	if (currentSortType.value !== nextSort) currentSortType.value = nextSort
+
+	const nextResponse = parseAllowed(route.query.response, RESPONSE_FILTER_VALUES, 'All')
+	if (currentResponseFilter.value !== nextResponse) currentResponseFilter.value = nextResponse
+
+	const nextProjectType = parseAllowed(
+		route.query.projectType,
+		PROJECT_TYPE_VALUES,
+		'All project types',
+	)
+	if (currentProjectTypeFilter.value !== nextProjectType) {
+		currentProjectTypeFilter.value = nextProjectType
+	}
+
+	const nextUnderReview = parseBoolean(route.query.underReview, true)
+	if (inOtherQueueFilter.value !== nextUnderReview) inOtherQueueFilter.value = nextUnderReview
+
+	const nextPage = parsePage(route.query.page)
+	if (currentPage.value !== nextPage) currentPage.value = nextPage
+
+	nextTick(() => {
+		syncingFromRoute = false
+	})
+}
+
+watch(
+	[
+		query,
+		currentFilterType,
+		currentSortType,
+		currentResponseFilter,
+		currentProjectTypeFilter,
+		inOtherQueueFilter,
+		currentPage,
+	],
+	writeFiltersToRoute,
+)
+
+watch(() => route.query, readFiltersFromRoute, { deep: true })
+
+const filterTypes = computed<ComboboxOption<string>[]>(() => {
+	const issues =
+		reviewItems.value?.flatMap((review) => review.reports.flatMap((report) => report.issues)) ?? []
+	const counts = new Map<string, number>()
+	for (const issue of issues) {
+		counts.set(issue.issue_type, (counts.get(issue.issue_type) ?? 0) + 1)
+	}
+
+	const options: ComboboxOption<string>[] = [
+		{
+			value: 'All flags',
+			label: isLoading.value ? 'All flags' : `All flags (${formatNumber(issues.length)})`,
+		},
+	]
+	for (const type of Array.from(counts.keys()).sort()) {
+		options.push({
+			value: type,
+			label: isLoading.value ? type : `${type} (${formatNumber(counts.get(type) ?? 0)})`,
+		})
+	}
+	return options
+})
+
+const projectTypeFilterTypes = computed<ComboboxOption<string>[]>(() => {
+	const items = reviewItems.value ?? []
+	const showCounts = !isLoading.value && currentProjectTypeFilter.value === 'All project types'
+
+	return PROJECT_TYPE_FILTERS.map((filter) => {
+		if (!showCounts) {
+			return { value: filter.value, label: filter.name }
+		}
+
+		const apiType = toApiProjectType(filter.value)
+		const count =
+			filter.value === 'All project types'
+				? items.length
+				: items.filter((item) => apiType && item.project.project_types.includes(apiType)).length
+
+		return { value: filter.value, label: `${filter.name} (${formatNumber(count)})` }
+	})
+})
 
 const techReviewQueryKey = computed(
 	() =>
@@ -275,13 +273,11 @@ const searchResults = computed(() => {
 	return fuse.value.search(query.value).map((result) => result.item)
 })
 
-const baseFiltered = computed(() => {
+const filteredItems = computed(() => {
 	if (!reviewItems.value) return []
 	return query.value && searchResults.value ? searchResults.value : [...reviewItems.value]
 })
 
-const filteredItems = computed(() => baseFiltered.value)
-
 const filteredIssuesCount = computed(() => {
 	return filteredItems.value.reduce((total, review) => {
 		return total + review.reports.reduce((sum, report) => sum + report.issues.length, 0)
@@ -295,6 +291,15 @@ const paginatedItems = computed(() => {
 	const end = start + UI_PAGE_SIZE
 	return filteredItems.value.slice(start, end)
 })
+const pageStart = computed(() =>
+	filteredItems.value.length === 0 ? 0 : (currentPage.value - 1) * UI_PAGE_SIZE + 1,
+)
+const pageEnd = computed(() =>
+	Math.min(
+		(currentPage.value - 1) * UI_PAGE_SIZE + paginatedItems.value.length,
+		filteredItems.value.length,
+	),
+)
 function goToPage(page: number, top = false) {
 	currentPage.value = page
 
@@ -388,7 +393,7 @@ const {
 		})
 	},
 	getNextPageParam: (lastPage, allPages) => {
-		// If we got a full page, there's probably more
+		// full page = maybe more
 		return lastPage.project_reports.length >= API_PAGE_SIZE ? allPages.length : undefined
 	},
 	initialPageParam: 0,
@@ -423,11 +428,6 @@ const mergedSearchResponse = computed(() => {
 	)
 })
 
-type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
-	id: string
-	version_id: string
-}
-
 const reviewItems = computed(() => {
 	if (!mergedSearchResponse.value?.project_reports?.length) {
 		return []
@@ -435,47 +435,29 @@ const reviewItems = computed(() => {
 
 	const response = mergedSearchResponse.value
 
-	return response.project_reports
-		.map((projectReport) => {
-			const project = response.projects[projectReport.project_id]
-			const thread = project?.thread_id ? response.threads[project.thread_id] : undefined
+	return response.project_reports.flatMap((projectReport) => {
+		const project = response.projects[projectReport.project_id]
+		const thread = project?.thread_id ? response.threads[project.thread_id] : undefined
+		if (!thread) return []
 
-			if (!thread) return null
-
-			const reports: FlattenedFileReport[] = projectReport.versions.flatMap((version) =>
-				version.files.map((file) => ({
-					...file,
-					id: file.report_id,
-					version_id: version.version_id,
-				})),
-			)
-
-			return {
+		return [
+			{
 				project,
 				project_owner: response.ownership[projectReport.project_id],
 				thread,
-				reports,
-			}
-		})
-		.filter(
-			(
-				item,
-			): item is {
-				project: Labrinth.TechReview.Internal.ProjectModerationInfo
-				project_owner: Labrinth.TechReview.Internal.Ownership
-				thread: Labrinth.TechReview.Internal.Thread
-				reports: FlattenedFileReport[]
-			} => item !== null,
-		)
+				reports: flattenFileReports(projectReport.versions),
+			},
+		]
+	})
 })
 
-function handleMarkComplete(projectId: string) {
-	// Find the index of the current card before removing it
-	const currentIndex = paginatedItems.value.findIndex((item) => item.project.id === projectId)
+const { loadingIssues, decompiledSources, handleLoadIssueSources } = useTechReviewSources(() =>
+	reviewItems.value.flatMap((review) => review.reports.flatMap((report) => report.issues)),
+)
 
-	// Find the thread ID for this project so we can remove it from the threads cache
-	const projectData = reviewItems.value.find((item) => item.project.id === projectId)
-	const threadId = projectData?.thread?.id
+function handleMarkComplete(projectId: string) {
+	const currentIndex = paginatedItems.value.findIndex((item) => item.project.id === projectId)
+	const threadId = reviewItems.value.find((item) => item.project.id === projectId)?.thread?.id
 
 	queryClient.setQueryData(
 		techReviewQueryKey.value,
@@ -493,7 +475,7 @@ function handleMarkComplete(projectId: string) {
 				...oldData,
 				pages: oldData.pages.map((page) => ({
 					...page,
-					// Keep the raw page length stable; getNextPageParam uses it to know if more API pages exist.
+					// leave this as-is so getNextPageParam still sees a full page
 					project_reports: page.project_reports,
 					projects: Object.fromEntries(
 						Object.entries(page.projects).filter(([id]) => id !== projectId),
@@ -509,25 +491,18 @@ function handleMarkComplete(projectId: string) {
 		},
 	)
 
-	// Also invalidate the query to ensure consistency with server state
-	// This triggers a background refetch after the optimistic update
 	queryClient.invalidateQueries({
 		queryKey: ['tech-reviews'],
-		refetchType: 'none', // Don't refetch immediately, just mark as stale
+		refetchType: 'none',
 	})
 
-	// Scroll to the next card after Vue updates the DOM
 	nextTick(() => {
-		// Get the project ID at the same position (next project after removal)
 		const nextItem = paginatedItems.value[currentIndex]
 		if (nextItem) {
-			const nextCard = cardRefs.get(nextItem.project.id)
-			if (nextCard) {
-				nextCard.scrollIntoView({
-					behavior: 'smooth',
-					block: 'start',
-				})
-			}
+			cardRefs.get(nextItem.project.id)?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start',
+			})
 		}
 	})
 }
@@ -550,13 +525,16 @@ watch(
 		currentProjectTypeFilter,
 	],
 	() => {
+		if (syncingFromRoute) return
 		goToPage(1)
 	},
 )
 
 watch(totalPages, (pages) => {
+	if (isLoading.value) return
+
 	if (pages === 0) {
-		goToPage(1)
+		if (currentPage.value !== 1) goToPage(1)
 		return
 	}
 
@@ -626,32 +604,14 @@ onUnmounted(() => {
 			:progress="batchScanProgressInformation"
 		/> -->
 
-		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<Input
-				v-model="query"
-				:icon="SearchIcon"
-				type="text"
-				autocomplete="off"
-				:placeholder="formatMessage(commonMessages.searchPlaceholder)"
-				clearable
-				wrapper-class="flex-1 lg:max-w-52"
-				input-class="!h-10"
-				@input="goToPage(1)"
-			/>
-
-			<div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
-				<LoaderCircleIcon
-					v-if="isFetchingNextPage"
-					v-tooltip="`Pages are still being fetched...`"
-					aria-hidden="true"
-					class="my-auto mr-2 size-6 animate-spin text-green"
-				/>
-				<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-			</div>
-
-			<div
-				class="flex flex-col items-stretch justify-end gap-2 sm:flex-row sm:items-center lg:flex-shrink-0"
-			>
+		<ModerationQueueToolbar
+			v-model="query"
+			:page="currentPage"
+			:total-pages="totalPages"
+			@search="goToPage(1)"
+			@switch-page="goToPage"
+		>
+			<template #actions>
 				<Combobox
 					v-model="currentResponseFilter"
 					class="!w-full flex-grow sm:!w-[120px] sm:flex-grow-0"
@@ -695,16 +655,19 @@ onUnmounted(() => {
 					<template #panel>
 						<div class="flex min-w-64 flex-col gap-3">
 							<label class="flex cursor-pointer items-center justify-between gap-2 text-sm">
-								<span class="whitespace-nowrap font-semibold">In project queue</span>
+								<span class="whitespace-nowrap font-semibold">Only under review</span>
 								<Toggle v-model="inOtherQueueFilter" />
 							</label>
 							<div class="flex flex-col gap-2">
-								<span class="text-sm font-semibold text-secondary"
-									>Flag type ({{ filteredIssuesCount }})</span
-								>
+								<span class="flex items-center gap-1.5 text-sm font-semibold text-secondary">
+									Flag type
+									<SpinnerIcon v-if="isLoading" class="size-3.5 animate-spin" aria-hidden="true" />
+									<template v-else>({{ formatNumber(filteredIssuesCount) }})</template>
+								</span>
 								<Combobox
 									v-model="currentFilterType"
 									class="!w-full"
+									dropdown-class="!z-[10000]"
 									:options="filterTypes"
 									:placeholder="formatMessage(commonMessages.filterByLabel)"
 									searchable
@@ -722,6 +685,7 @@ onUnmounted(() => {
 								<Combobox
 									v-model="currentProjectTypeFilter"
 									class="!w-full"
+									dropdown-class="!z-[10000]"
 									:options="projectTypeFilterTypes"
 									:placeholder="formatMessage(commonMessages.filterByLabel)"
 									searchable
@@ -737,23 +701,29 @@ onUnmounted(() => {
 						</div>
 					</template>
 				</TeleportPopoutMenu>
-			</div>
-		</div>
+			</template>
+			<template #meta>
+				<div v-if="filteredItems.length > 0" class="flex items-center gap-2">
+					<SpinnerIcon
+						v-if="isFetchingNextPage"
+						v-tooltip="`Pages are still being fetched...`"
+						aria-hidden="true"
+						class="size-4 animate-spin"
+					/>
+					Showing {{ formatNumber(pageStart) }}–{{ formatNumber(pageEnd) }} of
+					{{ formatNumber(filteredItems.length) }} projects
+				</div>
+			</template>
+		</ModerationQueueToolbar>
 
-		<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
-			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+		<ModerationQueueSkeleton v-if="isLoading" />
+		<div
+			v-else-if="paginatedItems.length === 0"
+			class="universal-card flex h-24 items-center justify-center text-secondary"
+		>
+			No projects in queue.
 		</div>
-
-		<div class="flex flex-col gap-4">
-			<div v-if="isLoading" class="flex flex-col gap-4">
-				<div v-for="i in UI_PAGE_SIZE" :key="i" class="universal-card h-48 animate-pulse"></div>
-			</div>
-			<div
-				v-else-if="paginatedItems.length === 0"
-				class="universal-card flex h-24 items-center justify-center text-secondary"
-			>
-				No projects in queue.
-			</div>
+		<div v-else class="flex flex-col gap-4">
 			<div
 				v-for="item in paginatedItems"
 				:key="item.project.id"
@@ -780,7 +750,7 @@ onUnmounted(() => {
 			</div>
 		</div>
 
-		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
+		<div v-if="totalPages > 1" class="flex justify-end">
 			<Pagination
 				:page="currentPage"
 				:count="totalPages"
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index f00bcfc4d3..7d426f815b 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -126,7 +126,7 @@
 				<ProjectList
 					v-if="projects && projects.length > 0"
 					:projects="displayedProjects"
-					:show-status="showProjectStatus"
+					:show-status="canSeeProjectStatus"
 				/>
 				<div v-else-if="true" class="error">
 					<UpToDate class="icon" />
@@ -215,7 +215,6 @@ const messages = defineMessages({
 const { formatCompactNumber } = useCompactNumber()
 
 const auth: { user: any } & any = await useAuth()
-const user = await useUser()
 const cosmetics = useCosmetics()
 const route = useNativeRoute()
 const router = useRouter()
@@ -321,10 +320,6 @@ const displayedProjects = computed(() =>
 		.sort(projectUserSorting),
 )
 
-const showProjectStatus = computed(
-	() => !!(auth.user && (auth.user.id === user.id || tags.staffRoles.includes(auth.user.role))),
-)
-
 const sumDownloads = computed(() => {
 	let sum = 0
 
@@ -358,6 +353,22 @@ provideOrganizationContext(organizationContext)
 
 const canAccessSettings = computed(() => !!currentMember.value?.accepted)
 
+const authUserId = computed(() => auth.value?.user?.id as string | undefined)
+const viewerProjectsQuery = useQuery({
+	queryKey: computed(() => ['user', authUserId.value, 'projects']),
+	queryFn: () => client.labrinth.users_v3.getProjects(authUserId.value!),
+	enabled: computed(() => !!authUserId.value && !!organization.value && !currentMember.value),
+	staleTime: 30_000,
+})
+const viewerMemberProjectIds = computed(
+	() => new Set((viewerProjectsQuery.data.value ?? []).map((project) => project.id)),
+)
+
+function canSeeProjectStatus(project: ProjectV3) {
+	if (currentMember.value) return true
+	return viewerMemberProjectIds.value.has(project.id)
+}
+
 watch(
 	[routeHasSettings, acceptedMembers, currentMember],
 	() => {
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index ad11e1ba42..4bb93f83fa 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -493,7 +493,9 @@ import SteamIcon from 'assets/icons/auth/sso-steam.svg'
 import QrcodeVue from 'qrcode.vue'
 
 import PasskeySettings from '~/components/ui/auth/PasskeySettings.vue'
+import { forgetStoredAccount } from '~/composables/accounts.ts'
 import { getAuthUrl, removeAuthProvider } from '~/composables/auth.ts'
+import { useAuthCookie } from '~/composables/auth-cookie.ts'
 
 definePageMeta({
 	middleware: 'auth',
@@ -987,7 +989,8 @@ async function deleteAccount() {
 		})
 	}
 
-	useCookie('auth-token').value = null
+	forgetStoredAccount(auth.value.user.id)
+	useAuthCookie().value = null
 	window.location.href = '/'
 
 	stopLoading()
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index f59a03f07e..02e0ce4579 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -711,6 +711,7 @@ import {
 	ResubscribeModal,
 	ServerListing,
 	TeleportOverflowMenu,
+	useDebugLogger,
 	useFormatDateTime,
 	useFormatPrice,
 	useServerBackupDownload,
@@ -728,6 +729,7 @@ import { products } from '~/generated/state.json'
 const { addNotification, handleError } = injectNotificationManager()
 const client = injectModrinthClient()
 const { getLatestBackupDownload } = useServerBackupDownload()
+const debug = useDebugLogger('Billing')
 definePageMeta({
 	middleware: 'auth',
 })
@@ -1013,7 +1015,6 @@ const messages = defineMessages({
 })
 
 function getIntervalNounLabel(interval) {
-	console.log(interval)
 	return interval === 'yearly'
 		? formatMessage(messages.intervalYear)
 		: interval === 'quarterly'
@@ -1391,10 +1392,10 @@ function showCancellationSurvey(subscription) {
 			price: price ? `${price / 100}` : 'unknown',
 			currency: currency ?? 'unknown',
 		},
-		onOpen: () => console.log(`Opened cancellation survey for: ${subscription.id}`),
-		onClose: () => console.log(`Closed cancellation survey for: ${subscription.id}`),
+		onOpen: () => debug(`Opened cancellation survey for: ${subscription.id}`),
+		onClose: () => debug(`Closed cancellation survey for: ${subscription.id}`),
 		onSubmit: (payload) => {
-			console.log('Form submitted, cancelling server.', payload)
+			debug('Form submitted, cancelling server.', payload)
 			cancelSubscription(subscription.id, true)
 		},
 	}
@@ -1403,9 +1404,7 @@ function showCancellationSurvey(subscription) {
 
 	try {
 		if (window.Tally?.openPopup) {
-			console.log(
-				`Opening Tally popup for servers subscription ${subscription.id} (form ID: ${formId})`,
-			)
+			debug(`Opening Tally popup for servers subscription ${subscription.id} (form ID: ${formId})`)
 			window.Tally.openPopup(formId, popupOptions)
 		} else {
 			console.warn('Tally script not yet loaded')
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index e2e4b2a24c..5d81a57c25 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -287,6 +287,9 @@ provideAppearanceSettings({
 		current: computed(() => current.value.theme),
 		options: themeOptions,
 		system: systemTheme,
+		preferredDark: computed(() =>
+			isDarkTheme(current.value.theme) ? current.value.theme : theme.preferences.dark,
+		),
 		set: setTheme,
 		syncAcrossDevices: {
 			value: computed(() => current.value.syncAcrossDevices),
diff --git a/apps/frontend/src/pages/share/[inviteId].vue b/apps/frontend/src/pages/share/[inviteId].vue
index 36c0a1b631..2aed923185 100644
--- a/apps/frontend/src/pages/share/[inviteId].vue
+++ b/apps/frontend/src/pages/share/[inviteId].vue
@@ -68,7 +68,13 @@
 						<span
 							class="flex min-w-0 max-w-full items-center gap-1.5 whitespace-nowrap rounded-xl font-semibold text-contrast"
 						>
-							<Avatar :src="instanceIcon" :alt="invite.instance_name" size="32px" no-shadow />
+							<Avatar
+								:src="instanceIcon"
+								:alt="invite.instance_name"
+								size="32px"
+								no-shadow
+								pad-transparent-corners
+							/>
 							<span class="min-w-0 truncate whitespace-nowrap">{{ invite.instance_name }}</span>
 						</span>
 					</div>
diff --git a/apps/frontend/src/plugins/open-on-modrinth.client.ts b/apps/frontend/src/plugins/open-on-modrinth.client.ts
index 966e698429..413460355a 100644
--- a/apps/frontend/src/plugins/open-on-modrinth.client.ts
+++ b/apps/frontend/src/plugins/open-on-modrinth.client.ts
@@ -19,6 +19,7 @@ export default defineNuxtPlugin(() => {
 		keybinds.value.handle(event, {
 			scope: 'global',
 			officialUrl: `${getOfficialOrigin(String(config.public.apiBaseUrl))}${window.location.pathname}${window.location.search}`,
+			localhostUrl: `http://localhost:3000${window.location.pathname}${window.location.search}`,
 			notifyCopied,
 		})
 	})
diff --git a/apps/frontend/src/plugins/theme/index.ts b/apps/frontend/src/plugins/theme/index.ts
index 72c52b3b7f..35b59e577e 100644
--- a/apps/frontend/src/plugins/theme/index.ts
+++ b/apps/frontend/src/plugins/theme/index.ts
@@ -1,4 +1,6 @@
-import { ref } from 'vue'
+import type { Labrinth } from '@modrinth/api-client'
+import { prepareThemeColorTransition } from '@modrinth/ui'
+import { ref, watch, watchEffect } from 'vue'
 
 import { useNativeTheme } from './native-theme.ts'
 import { usePreferredThemes } from './preferred-theme.ts'
@@ -46,6 +48,21 @@ export default defineNuxtPlugin({
 				$settings.preferred === 'system' ? getPreferredNativeTheme() : $settings.preferred
 		}
 
+		function applyAccountAppearance(appearance: Labrinth.Users.v3.AppearancePreferences) {
+			if (isDarkTheme(appearance.theme)) {
+				$preferredThemes.dark = appearance.theme
+			} else {
+				$preferredThemes.light = appearance.theme
+			}
+
+			$settings.preferred = appearance.auto ? 'system' : appearance.theme
+
+			const systemThemeIsUnknown =
+				import.meta.server && $settings.preferred === 'system' && $nativeTheme.value === 'unknown'
+
+			if (!systemThemeIsUnknown) syncTheme()
+		}
+
 		if (
 			import.meta.server &&
 			$settings.preferred === 'system' &&
@@ -57,12 +74,27 @@ export default defineNuxtPlugin({
 
 		if (import.meta.client) {
 			const $clientReady = ref(false)
+			let themeColorTransitionsEnabled = false
 
 			nuxtApp.hook('app:suspense:resolve', () => {
 				$clientReady.value = true
 			})
 
-			watchEffect(() => $clientReady.value && syncTheme())
+			watchEffect(() => {
+				if (!$clientReady.value) return
+				syncTheme()
+				themeColorTransitionsEnabled = true
+			})
+
+			watch(
+				$active,
+				(theme, previousTheme) => {
+					if (themeColorTransitionsEnabled && previousTheme && theme !== previousTheme) {
+						prepareThemeColorTransition()
+					}
+				},
+				{ flush: 'sync' },
+			)
 		}
 
 		function cycle() {
@@ -91,6 +123,7 @@ export default defineNuxtPlugin({
 					 */
 					native: $nativeTheme,
 					cycle,
+					applyAccountAppearance,
 				}),
 			},
 		}
diff --git a/apps/frontend/src/providers/setup.ts b/apps/frontend/src/providers/setup.ts
index eb969312dc..b10bc764f0 100644
--- a/apps/frontend/src/providers/setup.ts
+++ b/apps/frontend/src/providers/setup.ts
@@ -28,5 +28,5 @@ export function setupProviders(auth: Awaited<ReturnType<typeof useAuth>>) {
 	setupLoadingStateProvider()
 	setupUserCountryProvider()
 
-	return userPreferences
+	return { userPreferences, notificationManager }
 }
diff --git a/apps/frontend/src/server/plugins/error-handling.ts b/apps/frontend/src/server/plugins/error-handling.ts
index 01efafd25b..cc788cb436 100644
--- a/apps/frontend/src/server/plugins/error-handling.ts
+++ b/apps/frontend/src/server/plugins/error-handling.ts
@@ -1,5 +1,8 @@
 export default defineNitroPlugin((nitroApp) => {
 	nitroApp.hooks.hook('error', async (error, { event }) => {
+		const statusCode = (error as { statusCode?: number }).statusCode ?? 500
+		if (statusCode < 500) return
+
 		console.error(`[Context Error] at ${event?.path}:`, error)
 	})
 })
diff --git a/apps/frontend/wrangler.jsonc b/apps/frontend/wrangler.jsonc
index 22da20148b..45264c2c1f 100644
--- a/apps/frontend/wrangler.jsonc
+++ b/apps/frontend/wrangler.jsonc
@@ -44,6 +44,7 @@
 		"mode": "smart"
 	},
 	"vars": {
+		"NODE_ENV": "production",
 		"ENVIRONMENT": "production",
 		"SENTRY_ENVIRONMENT": "production",
 		"BASE_URL": "https://api.modrinth.com/v2/",
@@ -66,6 +67,7 @@
 			},
 			"routes": ["staging.modrinth.com/*"],
 			"vars": {
+				"NODE_ENV": "development",
 				"ENVIRONMENT": "staging",
 				"SENTRY_ENVIRONMENT": "staging",
 				"BASE_URL": "https://staging-api.modrinth.com/v2/",
diff --git a/apps/labrinth/src/routes/internal/moderation/tech_review.rs b/apps/labrinth/src/routes/internal/moderation/tech_review.rs
index c55d8fdbc7..f41f116d1e 100644
--- a/apps/labrinth/src/routes/internal/moderation/tech_review.rs
+++ b/apps/labrinth/src/routes/internal/moderation/tech_review.rs
@@ -396,6 +396,8 @@ pub struct ProjectReport {
 pub struct VersionReport {
     /// ID of the project version this report is for.
     pub version_id: VersionId,
+    /// Version number of the project version this report is for.
+    pub version_number: String,
     /// Reports for this version's files.
     #[serde(default)]
     pub files: Vec<FileReport>,
@@ -663,6 +665,7 @@ async fn fetch_project_reports(
 
             version_reports.push(VersionReport {
                 version_id: VersionId::from(version_query.inner.id),
+                version_number: version_query.inner.version_number.clone(),
                 files: file_reports,
             });
         }
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index 66b8b5e3a5..b2ae6cfdb0 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -2522,6 +2522,7 @@ export namespace Labrinth {
 
 			export type VersionReport = {
 				version_id: string
+				version_number?: string
 				files: FileReport[]
 			}
 
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-c7ade4d5f2b4b910b8d3a100d7285ac08744fc65c686cc185c1af97ea7f0738a.json b/packages/app-lib/.sqlx/query-c7ade4d5f2b4b910b8d3a100d7285ac08744fc65c686cc185c1af97ea7f0738a.json
new file mode 100644
index 0000000000..ab476ae6b7
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-c7ade4d5f2b4b910b8d3a100d7285ac08744fc65c686cc185c1af97ea7f0738a.json
@@ -0,0 +1,38 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            SELECT\n                id, active, session_id, expires\n            FROM modrinth_users\n            ORDER BY rowid\n            ",
+  "describe": {
+    "columns": [
+      {
+        "name": "id",
+        "ordinal": 0,
+        "type_info": "Text"
+      },
+      {
+        "name": "active",
+        "ordinal": 1,
+        "type_info": "Integer"
+      },
+      {
+        "name": "session_id",
+        "ordinal": 2,
+        "type_info": "Text"
+      },
+      {
+        "name": "expires",
+        "ordinal": 3,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "c7ade4d5f2b4b910b8d3a100d7285ac08744fc65c686cc185c1af97ea7f0738a"
+}
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/mr_auth.rs b/packages/app-lib/src/api/mr_auth.rs
index 4b0246aad5..01d282422e 100644
--- a/packages/app-lib/src/api/mr_auth.rs
+++ b/packages/app-lib/src/api/mr_auth.rs
@@ -1,6 +1,9 @@
-use crate::state::ModrinthCredentials;
+use crate::state::{FeatureFlag, ModrinthCredentials, Settings};
 use serde::Deserialize;
 
+const LOCALHOST_LOGIN_URL: &str = "http://localhost:3000/auth/sign-in";
+const LOCALHOST_SIGNUP_URL: &str = "http://localhost:3000/auth/sign-up";
+
 #[derive(Clone, Copy, Debug, Deserialize)]
 #[serde(rename_all = "kebab-case")]
 pub enum ModrinthAuthFlow {
@@ -9,11 +12,23 @@ pub enum ModrinthAuthFlow {
 }
 
 #[tracing::instrument]
-pub fn authenticate_begin_flow(flow: ModrinthAuthFlow) -> &'static str {
-    match flow {
-        ModrinthAuthFlow::SignIn => crate::state::get_login_url(),
-        ModrinthAuthFlow::SignUp => crate::state::get_signup_url(),
-    }
+pub async fn authenticate_begin_flow(
+    flow: ModrinthAuthFlow,
+) -> crate::Result<&'static str> {
+    let state = crate::State::get().await?;
+    let settings = Settings::get(&state.pool).await?;
+    let use_localhost = settings
+        .feature_flags
+        .get(&FeatureFlag::LocalhostSignIn)
+        .copied()
+        .unwrap_or(false);
+
+    Ok(match (use_localhost, flow) {
+        (true, ModrinthAuthFlow::SignIn) => LOCALHOST_LOGIN_URL,
+        (true, ModrinthAuthFlow::SignUp) => LOCALHOST_SIGNUP_URL,
+        (false, ModrinthAuthFlow::SignIn) => crate::state::get_login_url(),
+        (false, ModrinthAuthFlow::SignUp) => crate::state::get_signup_url(),
+    })
 }
 
 #[tracing::instrument]
@@ -39,11 +54,7 @@ pub async fn authenticate_finish_flow(
         );
     }
 
-    state.friends_socket.disconnect().await?;
-    state
-        .friends_socket
-        .connect(&state.pool, &state.api_semaphore, &state.process_manager)
-        .await?;
+    reconnect_friends(&state).await?;
 
     Ok(creds)
 }
@@ -51,16 +62,66 @@ pub async fn authenticate_finish_flow(
 #[tracing::instrument]
 pub async fn logout() -> crate::Result<()> {
     let state = crate::State::get().await?;
-    let current = ModrinthCredentials::get_active(&state.pool).await?;
-
-    if let Some(current) = current {
-        ModrinthCredentials::remove(&current.user_id, &state.pool).await?;
-    }
+    ModrinthCredentials::deactivate_all(&state.pool).await?;
     state.friends_socket.disconnect().await?;
 
     Ok(())
 }
 
+#[tracing::instrument]
+pub async fn get_all() -> crate::Result<Vec<ModrinthCredentials>> {
+    let state = crate::State::get().await?;
+    ModrinthCredentials::get_all(&state.pool).await
+}
+
+#[tracing::instrument]
+pub async fn set_active(user_id: &str) -> crate::Result<()> {
+    let state = crate::State::get().await?;
+    let users = ModrinthCredentials::get_all(&state.pool).await?;
+    let Some(mut creds) =
+        users.into_iter().find(|creds| creds.user_id == user_id)
+    else {
+        return Err(crate::ErrorKind::OtherError(format!(
+            "Tried to activate nonexistent Modrinth user with ID {user_id}"
+        ))
+        .as_error());
+    };
+
+    creds.active = true;
+    creds.upsert(&state.pool).await?;
+    reconnect_friends(&state).await?;
+
+    Ok(())
+}
+
+#[tracing::instrument]
+pub async fn remove_user(user_id: &str) -> crate::Result<()> {
+    let state = crate::State::get().await?;
+    let current = ModrinthCredentials::get_active(&state.pool).await?;
+    ModrinthCredentials::remove(user_id, &state.pool).await?;
+
+    if current.is_some_and(|creds| creds.user_id == user_id) {
+        state.friends_socket.disconnect().await?;
+    }
+
+    Ok(())
+}
+
+async fn reconnect_friends(state: &crate::State) -> crate::Result<()> {
+    if let Err(error) = state.friends_socket.disconnect().await {
+        tracing::warn!("Failed to disconnect friends socket: {error}");
+    }
+    if let Err(error) = state
+        .friends_socket
+        .connect(&state.pool, &state.api_semaphore, &state.process_manager)
+        .await
+    {
+        tracing::warn!("Failed to reconnect friends socket: {error}");
+    }
+
+    Ok(())
+}
+
 #[tracing::instrument]
 pub async fn get_credentials() -> crate::Result<Option<ModrinthCredentials>> {
     let state = crate::State::get().await?;
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/install/diagnostics.rs b/packages/app-lib/src/install/diagnostics.rs
index f014a0ac29..65ff85ed56 100644
--- a/packages/app-lib/src/install/diagnostics.rs
+++ b/packages/app-lib/src/install/diagnostics.rs
@@ -591,11 +591,7 @@ async fn censor_support_text(
     mut text: String,
     state: &State,
 ) -> crate::Result<String> {
-    for credentials in ModrinthCredentials::get_all(&state.pool)
-        .await?
-        .into_iter()
-        .map(|credentials| credentials.1)
-    {
+    for credentials in ModrinthCredentials::get_all(&state.pool).await? {
         replace_nonempty(
             &mut text,
             &credentials.session,
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 99aa310c44..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)
     }
@@ -200,9 +216,8 @@ pub(crate) async fn resolve_icon_path(
         .await
         {
             Ok(bytes) => bytes,
-            Err(error)
-                if ignore_missing_remote_icon && is_not_found_error(&error) =>
-            {
+            Err(error) if ignore_missing_remote_icon => {
+                tracing::warn!("Error while getting instance icon: {error}");
                 return Ok(None);
             }
             Err(error) => return Err(error),
@@ -219,18 +234,6 @@ pub(crate) async fn resolve_icon_path(
     Ok(Some(file.to_string_lossy().to_string()))
 }
 
-fn is_not_found_error(error: &crate::Error) -> bool {
-    match error.raw.as_ref() {
-        crate::ErrorKind::FetchError(error) => {
-            error.status() == Some(reqwest::StatusCode::NOT_FOUND)
-        }
-        crate::ErrorKind::LabrinthError(error) => {
-            error.status == Some(reqwest::StatusCode::NOT_FOUND.as_u16())
-        }
-        _ => false,
-    }
-}
-
 fn content_source_kind(link: &InstanceLink) -> ContentSourceKind {
     match link {
         InstanceLink::Unmanaged => ContentSourceKind::Local,
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/mr_auth.rs b/packages/app-lib/src/state/mr_auth.rs
index 54276bf560..86a3bfeca5 100644
--- a/packages/app-lib/src/state/mr_auth.rs
+++ b/packages/app-lib/src/state/mr_auth.rs
@@ -1,8 +1,6 @@
 use crate::state::{CacheBehaviour, CachedEntry};
 use crate::util::fetch::{FetchSemaphore, fetch_advanced};
 use chrono::{DateTime, Duration, TimeZone, Utc};
-use dashmap::DashMap;
-use futures::TryStreamExt;
 use reqwest::Method;
 use serde::{Deserialize, Serialize};
 
@@ -90,34 +88,30 @@ impl ModrinthCredentials {
 
     pub async fn get_all(
         exec: impl sqlx::Executor<'_, Database = sqlx::Sqlite>,
-    ) -> crate::Result<DashMap<String, Self>> {
+    ) -> crate::Result<Vec<Self>> {
         let res = sqlx::query!(
             "
             SELECT
                 id, active, session_id, expires
             FROM modrinth_users
+            ORDER BY rowid
             "
         )
-        .fetch(exec)
-        .try_fold(DashMap::new(), |acc, x| {
-            acc.insert(
-                x.id.clone(),
-                Self {
-                    session: x.session_id,
-                    expires: Utc
-                        .timestamp_opt(x.expires, 0)
-                        .single()
-                        .unwrap_or_else(Utc::now),
-                    user_id: x.id,
-                    active: x.active == 1,
-                },
-            );
-
-            async move { Ok(acc) }
-        })
+        .fetch_all(exec)
         .await?;
 
-        Ok(res)
+        Ok(res
+            .into_iter()
+            .map(|x| Self {
+                session: x.session_id,
+                expires: Utc
+                    .timestamp_opt(x.expires, 0)
+                    .single()
+                    .unwrap_or_else(Utc::now),
+                user_id: x.id,
+                active: x.active == 1,
+            })
+            .collect())
     }
 
     pub async fn upsert(
@@ -127,14 +121,7 @@ impl ModrinthCredentials {
         let expires = self.expires.timestamp();
 
         if self.active {
-            sqlx::query!(
-                "
-                UPDATE modrinth_users
-                SET active = FALSE
-                "
-            )
-            .execute(exec)
-            .await?;
+            Self::deactivate_all(exec).await?;
         }
 
         sqlx::query!(
@@ -157,6 +144,21 @@ impl ModrinthCredentials {
         Ok(())
     }
 
+    pub async fn deactivate_all(
+        exec: impl sqlx::Executor<'_, Database = sqlx::Sqlite>,
+    ) -> crate::Result<()> {
+        sqlx::query!(
+            "
+                UPDATE modrinth_users
+                SET active = FALSE
+                "
+        )
+        .execute(exec)
+        .await?;
+
+        Ok(())
+    }
+
     pub async fn remove(
         user_id: &str,
         exec: impl sqlx::Executor<'_, Database = sqlx::Sqlite>,
@@ -177,7 +179,7 @@ impl ModrinthCredentials {
         let state = crate::State::get().await?;
         let all = Self::get_all(&state.pool).await?;
 
-        let user_ids = all.into_iter().map(|x| x.0).collect::<Vec<_>>();
+        let user_ids = all.into_iter().map(|x| x.user_id).collect::<Vec<_>>();
 
         CachedEntry::get_user_many(
             &user_ids.iter().map(|x| &**x).collect::<Vec<_>>(),
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/app-lib/src/state/settings.rs b/packages/app-lib/src/state/settings.rs
index 7197c7e26b..5dd0e79431 100644
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -72,6 +72,7 @@ pub enum FeatureFlag {
     FriendsOfflineCollapsed,
     FriendsPendingCollapsed,
     DismissedPhotosensitivityFilterWarning,
+    LocalhostSignIn,
 }
 
 impl Settings {
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index b92e881e3a..65e948ca7b 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -20,6 +20,7 @@ import _ArrowLeftIcon from './icons/arrow-left.svg?component'
 import _ArrowLeftRightIcon from './icons/arrow-left-right.svg?component'
 import _ArrowUpIcon from './icons/arrow-up.svg?component'
 import _ArrowUpDownIcon from './icons/arrow-up-down.svg?component'
+import _ArrowUpFromLineIcon from './icons/arrow-up-from-line.svg?component'
 import _ArrowUpRightIcon from './icons/arrow-up-right.svg?component'
 import _ArrowUpZAIcon from './icons/arrow-up-z-a.svg?component'
 import _AsteriskIcon from './icons/asterisk.svg?component'
@@ -59,6 +60,7 @@ import _BookmarkIcon from './icons/bookmark.svg?component'
 import _BotIcon from './icons/bot.svg?component'
 import _BoxIcon from './icons/box.svg?component'
 import _BoxImportIcon from './icons/box-import.svg?component'
+import _BoxPlusIcon from './icons/box-plus.svg?component'
 import _BoxesIcon from './icons/boxes.svg?component'
 import _BracesIcon from './icons/braces.svg?component'
 import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
@@ -77,6 +79,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'
@@ -97,12 +100,14 @@ import _CogIcon from './icons/cog.svg?component'
 import _CoinsIcon from './icons/coins.svg?component'
 import _CollapseIcon from './icons/collapse.svg?component'
 import _CollectionIcon from './icons/collection.svg?component'
+import _CollectionPlusIcon from './icons/collection-plus.svg?component'
 import _CompassIcon from './icons/compass.svg?component'
 import _ComponentIcon from './icons/component.svg?component'
 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'
@@ -113,6 +118,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'
@@ -123,6 +129,7 @@ import _FileCodeIcon from './icons/file-code.svg?component'
 import _FileCogIcon from './icons/file-cog.svg?component'
 import _FileImageIcon from './icons/file-image.svg?component'
 import _FilePlusIcon from './icons/file-plus.svg?component'
+import _FileSearchCornerIcon from './icons/file-search-corner.svg?component'
 import _FileTextIcon from './icons/file-text.svg?component'
 import _FilterIcon from './icons/filter.svg?component'
 import _FilterXIcon from './icons/filter-x.svg?component'
@@ -154,6 +161,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'
@@ -202,13 +210,16 @@ 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'
 import _OmorphiaIcon from './icons/omorphia.svg?component'
 import _OnlineIndicatorIcon from './icons/online-indicator.svg?component'
 import _OrganizationIcon from './icons/organization.svg?component'
+import _OrganizationPlusIcon from './icons/organization-plus.svg?component'
 import _PackageIcon from './icons/package.svg?component'
 import _PackageClosedIcon from './icons/package-closed.svg?component'
 import _PackageOpenIcon from './icons/package-open.svg?component'
@@ -247,6 +258,7 @@ import _SearchIcon from './icons/search.svg?component'
 import _SendIcon from './icons/send.svg?component'
 import _ServerIcon from './icons/server.svg?component'
 import _ServerPlusIcon from './icons/server-plus.svg?component'
+import _ServerSearchIcon from './icons/server-search.svg?component'
 import _ServerStackIcon from './icons/server-stack.svg?component'
 import _SettingsIcon from './icons/settings.svg?component'
 import _Settings2Icon from './icons/settings-2.svg?component'
@@ -264,6 +276,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'
@@ -419,6 +432,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'
@@ -464,6 +478,7 @@ export const ArrowLeftIcon = _ArrowLeftIcon
 export const ArrowLeftRightIcon = _ArrowLeftRightIcon
 export const ArrowUpIcon = _ArrowUpIcon
 export const ArrowUpDownIcon = _ArrowUpDownIcon
+export const ArrowUpFromLineIcon = _ArrowUpFromLineIcon
 export const ArrowUpRightIcon = _ArrowUpRightIcon
 export const ArrowUpZAIcon = _ArrowUpZAIcon
 export const AsteriskIcon = _AsteriskIcon
@@ -503,6 +518,7 @@ export const BookmarkIcon = _BookmarkIcon
 export const BotIcon = _BotIcon
 export const BoxIcon = _BoxIcon
 export const BoxImportIcon = _BoxImportIcon
+export const BoxPlusIcon = _BoxPlusIcon
 export const BoxesIcon = _BoxesIcon
 export const BracesIcon = _BracesIcon
 export const BrushCleaningIcon = _BrushCleaningIcon
@@ -521,6 +537,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
@@ -541,12 +558,14 @@ export const CogIcon = _CogIcon
 export const CoinsIcon = _CoinsIcon
 export const CollapseIcon = _CollapseIcon
 export const CollectionIcon = _CollectionIcon
+export const CollectionPlusIcon = _CollectionPlusIcon
 export const CompassIcon = _CompassIcon
 export const ComponentIcon = _ComponentIcon
 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
@@ -557,6 +576,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
@@ -567,6 +587,7 @@ export const FileCodeIcon = _FileCodeIcon
 export const FileCogIcon = _FileCogIcon
 export const FileImageIcon = _FileImageIcon
 export const FilePlusIcon = _FilePlusIcon
+export const FileSearchCornerIcon = _FileSearchCornerIcon
 export const FileTextIcon = _FileTextIcon
 export const FilterIcon = _FilterIcon
 export const FilterXIcon = _FilterXIcon
@@ -598,6 +619,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
@@ -646,13 +668,16 @@ 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
 export const OmorphiaIcon = _OmorphiaIcon
 export const OnlineIndicatorIcon = _OnlineIndicatorIcon
 export const OrganizationIcon = _OrganizationIcon
+export const OrganizationPlusIcon = _OrganizationPlusIcon
 export const PackageIcon = _PackageIcon
 export const PackageClosedIcon = _PackageClosedIcon
 export const PackageOpenIcon = _PackageOpenIcon
@@ -691,6 +716,7 @@ export const SearchIcon = _SearchIcon
 export const SendIcon = _SendIcon
 export const ServerIcon = _ServerIcon
 export const ServerPlusIcon = _ServerPlusIcon
+export const ServerSearchIcon = _ServerSearchIcon
 export const ServerStackIcon = _ServerStackIcon
 export const SettingsIcon = _SettingsIcon
 export const Settings2Icon = _Settings2Icon
@@ -708,6 +734,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
@@ -863,6 +890,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/arrow-up-from-line.svg b/packages/assets/icons/arrow-up-from-line.svg
new file mode 100644
index 0000000000..f856bbb13f
--- /dev/null
+++ b/packages/assets/icons/arrow-up-from-line.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-arrow-up-from-line"
+  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="m18 9-6-6-6 6" />
+  <path d="M12 3v14" />
+  <path d="M5 21h14" />
+</svg>
diff --git a/packages/assets/icons/box-plus.svg b/packages/assets/icons/box-plus.svg
new file mode 100644
index 0000000000..14f623df6b
--- /dev/null
+++ b/packages/assets/icons/box-plus.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	xmlns:serif="http://www.serif.com/"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
+    <path d="M21,10L21,8C21,7.3 20.6,6.6 20,6.3L13,2.3C12.4,1.9 11.6,1.9 11,2.3L4,6.3C3.4,6.6 3,7.3 3,8L3,16C3,16.7 3.4,17.4 4,17.7L11,21.7C11.6,22.1 12.4,22.1 13,21.7L15,20.6" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M3.3,7L12,12L20.7,7M12,22L12,12" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <g transform="matrix(1,0,0,1,0,-3)">
+        <path d="M19,16L19,22" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-3)">
+        <path d="M22,19L16,19" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    </g>
+</svg>
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/collection-plus.svg b/packages/assets/icons/collection-plus.svg
new file mode 100644
index 0000000000..da49592b58
--- /dev/null
+++ b/packages/assets/icons/collection-plus.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	xmlns:serif="http://www.serif.com/"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
+    <path d="M13.475,21L5,21C3.896,21 3,20.104 3,19L3,5C3,3.896 3.896,3 5,3L19,3C20.104,3 21,3.896 21,5L21,13.309" style="fill:none;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M7,7L7,17" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M11,7L11,17" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M15,7L16.429,14.145" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <g>
+        <path d="M19,16L19,22" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+        <path d="M22,19L16,19" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    </g>
+</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/file-search-corner.svg b/packages/assets/icons/file-search-corner.svg
new file mode 100644
index 0000000000..7e6895fbf7
--- /dev/null
+++ b/packages/assets/icons/file-search-corner.svg
@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-file-search-corner"
+  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="M11.1 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.589 3.588A2.4 2.4 0 0 1 20 8v3.25" />
+  <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+  <path d="m21 22-2.88-2.88" />
+  <circle cx="16" cy="17" r="3" />
+</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/organization-plus.svg b/packages/assets/icons/organization-plus.svg
new file mode 100644
index 0000000000..fb7f1b6e7b
--- /dev/null
+++ b/packages/assets/icons/organization-plus.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	xmlns:serif="http://www.serif.com/"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
+    <path d="M15.112,22L6,22L6,4C6,2.903 6.903,2 8,2L16,2C17.097,2 18,2.903 18,4L18,12.879" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M6,12L4,12C2.903,12 2,12.903 2,14L2,20C2,21.097 2.903,22 4,22L6,22" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M18,9L20,9C21.097,9 22,9.903 22,11L22,14" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M10,6L14,6" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M10,10L14,10" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M10,14L14,14" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M10,18L12.874,18" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <g>
+        <path d="M19,16L19,22" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+        <path d="M22,19L16,19" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    </g>
+</svg>
diff --git a/packages/assets/icons/play.svg b/packages/assets/icons/play.svg
index b484cdd2e5..dde12b89c7 100644
--- a/packages/assets/icons/play.svg
+++ b/packages/assets/icons/play.svg
@@ -1 +1,4 @@
-<svg 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"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+<svg 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">
+	<polygon points="5 3 19 12 5 21 5 3"></polygon>
+</svg>
diff --git a/packages/assets/icons/server-plus.svg b/packages/assets/icons/server-plus.svg
index b9bab1bd8f..fb7b077d4a 100644
--- a/packages/assets/icons/server-plus.svg
+++ b/packages/assets/icons/server-plus.svg
@@ -1 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M22 12H2M11.1 4H7.2c-.8 0-1.5.4-1.8 1.1L2 12v6c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-6l-1.5-3M6 16h0M10 16h0M14.4 4h6M17.4 1v6"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	xmlns:serif="http://www.serif.com/"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
+    <path d="M10,16L10.01,16" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M22,14.328L22,12.473C22,12.162 21.927,11.855 21.788,11.577L18.55,5.11C18.213,4.431 17.518,4 16.76,4L7.24,4C6.482,4 5.787,4.431 5.45,5.11L2.212,11.577C2.073,11.855 2,12.162 2,12.473L2,18C2,19.097 2.903,20 4,20L12.636,20" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M21.946,12.013L2.054,12.013" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M6,16L6.01,16" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <g>
+        <path d="M19,16L19,22" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+        <path d="M22,19L16,19" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    </g>
+</svg>
diff --git a/packages/assets/icons/server-search.svg b/packages/assets/icons/server-search.svg
new file mode 100644
index 0000000000..be4f3eafb8
--- /dev/null
+++ b/packages/assets/icons/server-search.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	xmlns:serif="http://www.serif.com/"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
+    <path d="M22,4L22,8C22,9.104 21.104,10 20,10L4,10C2.896,10 2,9.104 2,8L2,4C2,2.896 2.896,2 4,2L20,2C21.104,2 22,2.896 22,4Z" style="fill:none;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M12.501,22L4,22C2.896,22 2,21.104 2,20L2,16C2,14.896 2.896,14 4,14L12.431,14" style="fill:none;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M6,6L6.01,6" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M6,18L6.01,18" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M22,22L20.125,20.125" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <circle cx="18" cy="18" r="3" style="fill:none;stroke:currentColor;stroke-width:2px;"/>
+</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/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index 7b5c83335e..1891dbda89 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -708,12 +708,15 @@ a:not(.no-click-animation),
 		color: var(--color-tooltip-text) !important;
 		padding: 0.625rem 0.75rem !important;
 		border-radius: var(--radius-sm) !important;
-		filter: drop-shadow(2px 2px 0.4rem rgba(0, 0, 0, 0.5));
 		font-size: 0.9rem;
 		font-weight: 500;
 		line-height: 1;
 		border: 1px solid var(--surface-5);
 	}
+
+	.v-popper__wrapper {
+		filter: drop-shadow(0 2px 0.4rem rgba(0, 0, 0, 0.5));
+	}
 }
 
 .v-popper__popper.v-popper--theme-dismissable-prompt {
@@ -856,7 +859,8 @@ a:not(.no-click-animation),
 
 	h1,
 	h2,
-	h3 {
+	h3,
+	h4 {
 		color: var(--color-contrast);
 	}
 
@@ -866,6 +870,10 @@ a:not(.no-click-animation),
 		border-bottom: 1px solid var(--color-divider);
 	}
 
+	h4 {
+		@apply mt-5 mb-3;
+	}
+
 	h1,
 	h2,
 	h3,
@@ -922,13 +930,12 @@ a:not(.no-click-animation),
 	}
 
 	pre {
+		@apply bg-surface-2 rounded-xl p-4 border border-solid border-surface-5;
 		margin-top: 1rem;
-		padding: 14px;
-		border-radius: var(--radius-sm);
-		background-color: var(--color-button-bg);
 		overflow-x: auto;
 
 		code {
+			@apply bg-transparent border-0;
 			font-size: 80%;
 			padding: 0;
 			border-radius: 0;
@@ -936,6 +943,7 @@ a:not(.no-click-animation),
 	}
 
 	code {
+		@apply bg-surface-3 rounded-md p-4 border border-solid border-surface-5;
 		padding: 0.2em 0.4em;
 		font-size: 80%;
 		border-radius: var(--radius-sm);
@@ -989,38 +997,80 @@ a:not(.no-click-animation),
 	}
 
 	details {
-		border: 0.15rem solid var(--color-button-bg);
-		border-radius: var(--radius-sm);
-		padding: 0.5rem 0.5rem 0;
+		@apply border border-solid border-surface-5 bg-surface-3 rounded-xl p-2;
+		display: grid;
+		grid-template-rows: min-content 0fr;
+		transition: grid-template-rows 0.3s var(--ease-out-expo);
+		overflow: clip;
 
 		summary {
-			font-weight: bold;
-			margin: -0.5rem -0.5rem 0;
-			padding: 0.5rem 0.8rem;
+			@apply bg-surface-4 hover:bg-surface-5 p-2 flex items-center gap-1 text-contrast -m-2 border border-solid border-transparent;
+			font-weight: 600;
 			cursor: pointer;
 			background-color: var(--color-button-bg);
-			border-radius: var(--radius-xs);
+			list-style: none;
 
-			&:hover {
-				filter: brightness(0.85);
+			&::-webkit-details-marker {
+				display: none;
 			}
+
+			&::marker {
+				content: none;
+			}
+
+			&::before {
+				@apply text-primary;
+				content: '';
+				flex-shrink: 0;
+				width: 1.25rem;
+				height: 1.25rem;
+				background-color: currentColor;
+				mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 16L5 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+					center / contain no-repeat;
+				-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 16L5 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+					center / contain no-repeat;
+				transition: transform 0.3s ease-in-out;
+			}
+		}
+
+		> :nth-child(2) {
+			@apply mt-5;
+		}
+
+		> :nth-child(n + 2) {
+			@apply mx-1;
+		}
+
+		> :last-child:not(summary) {
+			@apply mb-1;
+		}
+
+		&::details-content {
+			min-height: 0;
+			overflow: hidden;
+			transition: content-visibility 0.3s allow-discrete;
 		}
 
 		&[open] {
 			padding: 0.5rem;
+			grid-template-rows: min-content 1fr;
 
-			summary {
-				margin-bottom: 0.5rem;
-				border-radius: var(--radius-xs) var(--radius-xs) 0 0;
+			> summary {
+				@apply border-b-surface-5;
+
+				&::before {
+					transform: rotate(180deg);
+				}
 			}
+		}
 
-			> :last-child:not(summary) {
-				margin-bottom: 0 !important;
-			}
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
 
-			> details:not([open]) summary {
-				margin: -0.5em -0.5em 0;
-				border-radius: var(--radius-xs);
+			summary,
+			summary::before,
+			&::details-content {
+				transition: none;
 			}
 		}
 	}
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 43bc28aa50..545edd475b 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -160,6 +160,12 @@
 
 	--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #00af5c 100%);
 
+	--splash-tint-top: rgba(185, 255, 207, 0.465);
+	--splash-tint-bottom: rgba(183, 226, 255, 0.563);
+	--splash-overlay: rgba(181, 255, 213, 0.315);
+	--splash-cube-opacity: 0.4;
+	--splash-cube-blend: multiply;
+
 	--color-platform-fabric: #8a7b71;
 	--color-platform-quilt: #8b61b4;
 	--color-platform-forge: #5b6197;
@@ -374,6 +380,12 @@ html {
 
 	--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #1ffa9a 100%);
 
+	--splash-tint-top: rgba(66, 131, 92, 0.275);
+	--splash-tint-bottom: rgba(17, 35, 43, 0.5);
+	--splash-overlay: rgba(22, 24, 28, 0.64);
+	--splash-cube-opacity: 0.8;
+	--splash-cube-blend: normal;
+
 	--color-platform-fabric: #dbb69b;
 	--color-platform-quilt: #c796f9;
 	--color-platform-forge: #959eef;
@@ -433,6 +445,9 @@ html {
 	--color-base: #c3c4b3;
 	--color-secondary: #9b9e98;
 	--color-contrast: #e6e2d1;
+	--color-text-primary: #e6e2d1;
+	--color-text-default: #c3c4b3;
+	--color-text-tertiary: #9b9e98;
 
 	--color-brand: #4d9227;
 	--color-brand-highlight: #25421e;
diff --git a/packages/blog/changelog.ts b/packages/blog/changelog.ts
index 5c828b228d..a6fb9a4413 100644
--- a/packages/blog/changelog.ts
+++ b/packages/blog/changelog.ts
@@ -10,6 +10,88 @@ export type VersionEntry = {
 }
 
 const VERSIONS: VersionEntry[] = [
+	{
+		date: `2026-08-27T18:54:17+00:00`,
+		product: 'app',
+		version: '0.19.1',
+		body: `## Changed
+- Updated style of spoilers in descriptions.
+- Updated style of code formatting and snippets in descriptions.
+- Fourth-level headings in descriptions now have more contrast compared to regular body text.
+
+## Fixed
+- Fixed lag on Screenshots page/tab when you have a lot of screenshots`,
+	},
+	{
+		date: `2026-08-27T18:54:17+00:00`,
+		product: 'web',
+		body: `## Changed
+- Updated style of spoilers in descriptions.
+- Updated style of code formatting and snippets in descriptions.
+- Fourth-level headings in descriptions now have more contrast compared to regular body text.`,
+	},
+	{
+		date: `2026-08-27T17:07:29+00:00`,
+		product: 'app',
+		version: '0.19.0',
+		body: `## Added
+- Added option to switch between multiple signed-in Modrinth accounts.
+- Added the ability to view the app signed out as well even when accounts are added.
+- Added right-click context menu actions for Jump in items.
+- Added "Add a friend" to account menu.
+- Added a new global screenshots page accessible via the sidebar, which shows all screenshots you've taken from all of your instances.
+- Added an option to instances which allows you to opt-out an instance from the global screenshots page, which will enable an instance-local screenshot tab showing screenshots only for that instance.
+- Added a new screenshot editor, allowing you to annotate, doodle and blur out areas of your screenshots.
+- Added syncing between instances for command history, the in-game server list and creative hotbars. You will need to enable this for any existing instances in the Sync override tab of your instance settings.
+
+## Changed
+- Improved the consistency of filter dropdowns on the Versions page.
+- Improved the consistency of context menus, now they look the same as overflow menus.
+- Changed profile button to say "View profile" in account menu.
+- Added "Open backups folder" button from the state initialization error screen.
+- Appearance settings now remember your preferred dark theme when using "Sync with system".
+- Theme changes now happen instantly, disabling any funky transitions while it happens.
+- Splash screen is now responsive to color theme.
+- Made resize handle on "Jump in" section always visible.
+
+## Fixed
+- Non-instance icons with transparent corners are no longer padded, fixing many icons flashing in after a second.
+- Fixed window controls being covered by the splash screen.
+- Fixed "Official Modrinth account" badge on official profiles appearing gray instead of green
+- Fixed newer snapshots since 26.1 not being grouped properly.
+- Fixed settings menu headers being cut off when the window is small.
+- Fixed creating a new group when only one group exists does not show the group.
+- Fixed inconsistencies with text inputs.`,
+	},
+	{
+		date: `2026-08-27T17:07:29+00:00`,
+		product: 'web',
+		body: `## Added
+- Added option to switch between multiple signed-in Modrinth accounts.
+- Added the ability to view the site signed out as well even when accounts are added.
+
+## Changed
+- Improved the consistency of filter dropdowns on the Versions and Changelog pages.
+- When signing into Modrinth App, you're now given the choice of which account you'd like to sign into.
+- When you get a "You don't have access to this page" error, you are given the option to switch to another account.
+- Theme changes now happen instantly, disabling any funky transitions while it happens.
+- Renamed "Source jar" to "Sources jar" and "Javadoc jar" to "Javadocs jar"
+- Changed the icons for publish options to include a plus on them.
+- Redesigned the gallery image viewer to match what we have in Modrinth App for screenshots.
+- Opening an image in a new tab will now open the raw image.
+- Collections by non-creators are no longer indexed.
+- Changed Settings page favicons to have a Settings cog icon in the corner.
+- Removed cog emoji from project settings page titles.
+
+## Fixed
+- Non-instance icons with transparent corners are no longer padded, fixing many icons flashing in after a second.
+- Fixed color theme settings not showing what your preferred dark theme is.
+- Fixed "Official Modrinth account" badge on official profiles appearing gray instead of green
+- Fixed project status badges not visible on your projects in organizations
+- Fixed projects in organizations not being sorted by status.
+- Fixed newer snapshots since 26.1 not being grouped properly.
+- Fixed inconsistencies with text inputs.`,
+	},
 	{
 		date: `2026-08-20T22:10:10+00:00`,
 		product: 'app',
diff --git a/packages/moderation/src/data/keybinds.ts b/packages/moderation/src/data/keybinds.ts
index 0e46123f8c..4ca0f406c9 100644
--- a/packages/moderation/src/data/keybinds.ts
+++ b/packages/moderation/src/data/keybinds.ts
@@ -132,6 +132,15 @@ const keybinds: { [id: string]: KeybindListener } = {
 			globalThis.open(ctx.officialUrl, '_blank', 'noopener,noreferrer')
 		},
 	},
+	'open-localhost': {
+		keybind: [],
+		description: 'Open current page on localhost',
+		scope: 'global',
+		enabled: () => !isLocalhost(),
+		action: (ctx) => {
+			globalThis.open(ctx.localhostUrl, '_blank', 'noopener,noreferrer')
+		},
+	},
 	'copy-official-site': {
 		keybind: 'Ctrl+Shift+O',
 		description: 'Copy production/staging URL (localhost only)',
diff --git a/packages/moderation/src/types/keybinds.ts b/packages/moderation/src/types/keybinds.ts
index 1455eb4b20..5cf798be74 100644
--- a/packages/moderation/src/types/keybinds.ts
+++ b/packages/moderation/src/types/keybinds.ts
@@ -58,6 +58,7 @@ export type ModerationTechReviewContext = {
 export type ModerationGlobalContext = {
 	scope: 'global'
 	officialUrl: string
+	localhostUrl: string
 	notifyCopied: (value: string, title: string) => void
 }
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 73ac2ca36b..a1b22d3675 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -79,6 +79,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/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index f182fed323..88a548da8b 100644
--- a/packages/ui/src/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -6,9 +6,9 @@
 		:style="`--_size: ${cssSize}`"
 		:class="{
 			circle: circle,
-			detecting: !hasDetectedCorners,
+			detecting: padTransparentCorners && !hasDetectedCorners,
 			'no-shadow': noShadow,
-			padded: hasTransparentCorners && !circle && !disableConditionalIconPadding,
+			padded: padTransparentCorners && hasTransparentCorners,
 			raised: raised,
 			pixelated: pixelated,
 		}"
@@ -51,9 +51,10 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 
-import { useFullImageContextMenu } from '../../composables'
+import { useDebugLogger, useFullImageContextMenu } from '../../composables'
 
 const onFullImageContextMenu = useFullImageContextMenu()
+const debug = useDebugLogger('Avatar')
 
 const pixelated = ref(false)
 const hasTransparentCorners = ref(false)
@@ -78,7 +79,7 @@ const props = withDefaults(
 		size?: string
 		circle?: boolean
 		noShadow?: boolean
-		disableConditionalIconPadding?: boolean
+		padTransparentCorners?: boolean
 		loading?: 'eager' | 'lazy'
 		raised?: boolean
 		tintBy?: string | null
@@ -90,7 +91,7 @@ const props = withDefaults(
 		size: '2rem',
 		circle: false,
 		noShadow: false,
-		disableConditionalIconPadding: false,
+		padTransparentCorners: false,
 		loading: 'eager',
 		raised: false,
 		tintBy: null,
@@ -141,7 +142,7 @@ function clearDetectionTimeout() {
 function onError(e) {
 	clearDetectionTimeout()
 	detectingSource = undefined
-	console.log('Avatar image failed to load:', props.src, e)
+	debug('Avatar image failed to load:', props.src, e)
 	failed.value = true
 }
 
@@ -150,8 +151,6 @@ function onLoad() {
 	if (!image) return
 	const source = image.currentSrc
 	if (detectingSource === source) return
-	detectingSource = source
-	clearDetectionTimeout()
 
 	if (image.naturalWidth && image.naturalWidth < 32) {
 		pixelated.value = true
@@ -159,6 +158,13 @@ function onLoad() {
 		pixelated.value = false
 	}
 
+	if (!props.padTransparentCorners) {
+		return
+	}
+
+	detectingSource = source
+	clearDetectionTimeout()
+
 	if (canReadImagePixels(source)) {
 		const transparentCorners = detectTransparentCorners(image)
 		if (transparentCorners !== null) {
diff --git a/packages/ui/src/components/base/BackToParentLink.vue b/packages/ui/src/components/base/BackToParentLink.vue
new file mode 100644
index 0000000000..4503825ef5
--- /dev/null
+++ b/packages/ui/src/components/base/BackToParentLink.vue
@@ -0,0 +1,19 @@
+<template>
+	<AutoLink
+		:to="to"
+		class="mb-4 flex w-fit items-center gap-2 rounded-lg px-2 py-0.5 pl-0 text-link"
+	>
+		<ChevronLeftIcon aria-hidden="true" class="shrink-0" />
+		<slot />
+	</AutoLink>
+</template>
+
+<script setup lang="ts">
+import { ChevronLeftIcon } from '@modrinth/assets'
+
+import AutoLink from './AutoLink.vue'
+
+defineProps<{
+	to: unknown
+}>()
+</script>
diff --git a/packages/ui/src/components/base/CollapsibleRegion.vue b/packages/ui/src/components/base/CollapsibleRegion.vue
index a9fd3d71f7..a29f4efe78 100644
--- a/packages/ui/src/components/base/CollapsibleRegion.vue
+++ b/packages/ui/src/components/base/CollapsibleRegion.vue
@@ -2,28 +2,29 @@
 	<div class="relative overflow-hidden">
 		<div
 			class="collapsible-region-content"
-			:class="{ open: !collapsed }"
+			:class="{ open: !collapsed || disabled }"
 			:style="{ '--collapsed-height': collapsedHeight }"
 		>
-			<div :class="{ 'pointer-events-none select-none pb-16': collapsed }">
+			<div :class="{ 'pointer-events-none select-none': collapsed }">
 				<slot />
 			</div>
 		</div>
 
 		<div
-			v-if="collapsed"
-			class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent"
-			:class="gradientTo"
+			v-if="!disabled"
+			class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent transition-opacity duration-250"
+			:class="[gradientTo, { 'opacity-0': !collapsed }]"
 		/>
 
-		<div class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
-			<Button
-				type="quiet"
-				class="flex items-center gap-1 text-xs !rounded-full"
-				@click="collapsed = !collapsed"
-			>
-				<ExpandIcon v-if="collapsed" />
-				<CollapseIcon v-else />
+		<div v-if="!collapsed && !disabled" class="top-4 right-4 z-20 group absolute">
+			<Button v-tooltip="collapseText" type="quiet" circular icon-only @click="collapsed = true">
+				<DropdownIcon class="rotate-180" />
+			</Button>
+		</div>
+
+		<div v-if="!disabled" class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
+			<Button type="quiet" class="text-xs" @click="collapsed = !collapsed">
+				<DropdownIcon class="transition-transform" :class="{ 'rotate-180': !collapsed }" />
 				{{ collapsed ? expandText : collapseText }}
 			</Button>
 		</div>
@@ -31,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
+import { DropdownIcon } from '@modrinth/assets'
 
 import { Button } from '#ui/components/base/buttons'
 
@@ -41,12 +42,14 @@ withDefaults(
 		collapseText?: string
 		collapsedHeight?: string
 		gradientTo?: string
+		disabled?: boolean
 	}>(),
 	{
 		expandText: 'Expand',
 		collapseText: 'Collapse',
 		collapsedHeight: '8rem',
 		gradientTo: 'to-surface-2',
+		disabled: false,
 	},
 )
 
@@ -56,8 +59,12 @@ const collapsed = defineModel<boolean>('collapsed', { default: true })
 <style scoped>
 .collapsible-region-content {
 	display: grid;
-	grid-template-rows: 0fr;
-	transition: grid-template-rows 0.3s linear;
+	grid-template-rows: minmax(var(--collapsed-height), 0fr);
+	transition: grid-template-rows 500ms var(--ease-out-expo);
+
+	& > div {
+		grid-row: 1 / span 2;
+	}
 }
 
 @media (prefers-reduced-motion) {
@@ -67,16 +74,10 @@ const collapsed = defineModel<boolean>('collapsed', { default: true })
 }
 
 .collapsible-region-content.open {
-	grid-template-rows: 1fr;
+	grid-template-rows: minmax(var(--collapsed-height), 1fr);
 }
 
 .collapsible-region-content > div {
 	overflow: hidden;
-	min-height: var(--collapsed-height);
-	transition: min-height 0.3s linear;
-}
-
-.collapsible-region-content.open > div {
-	min-height: 0;
 }
 </style>
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 1da658f1ea..9e16236e84 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -95,7 +95,7 @@
 			</div>
 		</ButtonFrame>
 
-		<Teleport to="#teleports">
+		<Teleport v-if="isClient" to="#teleports">
 			<Transition name="floating-expand">
 				<div
 					v-if="shouldRenderDropdown"
@@ -105,8 +105,9 @@
 						props.dropdownClass,
 						openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
 					]"
-					:style="dropdownStyle"
+					:style="[dropdownStyle, { transformOrigin: dropdownTransformOrigin }]"
 					:role="listbox ? 'listbox' : 'menu'"
+					@pointerdown.stop
 					@mousedown.stop
 					@keydown="handleDropdownKeydown"
 				>
@@ -387,6 +388,9 @@ const dropdownStyle = ref({
 })
 
 const openDirection = ref<'down' | 'up'>('down')
+const dropdownTransformOrigin = computed(() =>
+	openDirection.value === 'up' ? 'bottom center' : 'top center',
+)
 
 const selectedOption = computed<ComboboxOption<T> | undefined>(() => {
 	return props.options.find(
@@ -475,11 +479,85 @@ function setInitialFocus() {
 		? props.options.findIndex((opt) => isDropdownOption(opt) && opt.value === props.modelValue)
 		: -1
 
-	if (focusedIndex.value >= 0 && optionRefs.value[focusedIndex.value]) {
-		optionRefs.value[focusedIndex.value]?.scrollIntoView({ block: 'center' })
+	if (focusedIndex.value >= 0) {
+		scrollOptionIntoView(focusedIndex.value, 'center')
 	}
 }
 
+function getOptionsViewport(): HTMLElement | undefined {
+	return optionsOverlayScrollbars.value?.elements().viewport ?? optionsContainerRef.value
+}
+
+function scrollOptionIntoView(index: number, block: 'center' | 'nearest') {
+	const option = optionRefs.value[index]
+	const viewport = getOptionsViewport()
+	if (!option || !viewport) return
+
+	const optionRect = option.getBoundingClientRect()
+	const viewportRect = viewport.getBoundingClientRect()
+	const optionTop = optionRect.top - viewportRect.top + viewport.scrollTop
+	const optionHeight = optionRect.height
+	const viewHeight = viewport.clientHeight
+	const current = viewport.scrollTop
+
+	if (block === 'center') {
+		viewport.scrollTop = Math.max(0, optionTop - (viewHeight - optionHeight) / 2)
+		return
+	}
+
+	if (optionTop < current) {
+		viewport.scrollTop = optionTop
+	} else if (optionTop + optionHeight > current + viewHeight) {
+		viewport.scrollTop = optionTop + optionHeight - viewHeight
+	}
+}
+
+function estimateDropdownHeight(): number {
+	const optionHeight = 44
+	const optionWithSubLabelHeight = 68
+	const dividerHeight = 1
+	let height = 0
+
+	if (filteredOptions.value.length === 0) {
+		if (searchQuery.value) {
+			height += 52
+		}
+	} else {
+		for (const item of filteredOptions.value) {
+			if (isDivider(item)) {
+				height += dividerHeight
+			} else {
+				height += item.subLabel ? optionWithSubLabelHeight : optionHeight
+			}
+		}
+
+		height = Math.min(height, props.maxHeight)
+	}
+
+	if (slots['dropdown-footer']) {
+		height += 48
+	}
+
+	return height
+}
+
+function previewOpenDirection() {
+	if (props.forceDirection) {
+		openDirection.value = props.forceDirection
+		return
+	}
+
+	if (!effectiveTriggerEl.value) return
+
+	const triggerRect = getTriggerRect(effectiveTriggerEl.value)
+	const viewport = getViewportRect()
+	openDirection.value = determineOpenDirection(
+		triggerRect,
+		{ width: triggerRect.width, height: estimateDropdownHeight() },
+		viewport,
+	)
+}
+
 function determineOpenDirection(
 	triggerRect: DOMRect,
 	dropdownRect: { width: number; height: number },
@@ -542,6 +620,26 @@ function getViewportRect(): ViewportRect {
 	}
 }
 
+function getTriggerRect(el: HTMLElement): DOMRect {
+	const rect = el.getBoundingClientRect()
+	const transform = getComputedStyle(el).transform
+	if (!transform || transform === 'none') return rect
+
+	const matrix = new DOMMatrixReadOnly(transform)
+	const scaleX = Math.hypot(matrix.a, matrix.b) || 1
+	const scaleY = Math.hypot(matrix.c, matrix.d) || 1
+	if (Math.abs(scaleX - 1) < 0.001 && Math.abs(scaleY - 1) < 0.001) return rect
+
+	const width = rect.width / scaleX
+	const height = rect.height / scaleY
+	return new DOMRect(
+		rect.left + (rect.width - width) / 2,
+		rect.top + (rect.height - height) / 2,
+		width,
+		height,
+	)
+}
+
 function resolveDropdownWidth(triggerWidth: number): string {
 	if (props.dropdownWidth === undefined) return `${triggerWidth}px`
 	if (typeof props.dropdownWidth === 'number') return `${props.dropdownWidth}px`
@@ -559,8 +657,9 @@ async function updateDropdownPosition() {
 
 	await nextTick()
 
-	const triggerRect = effectiveTriggerEl.value.getBoundingClientRect()
-	const width = resolveDropdownWidth(effectiveTriggerEl.value.offsetWidth)
+	const trigger = effectiveTriggerEl.value
+	let triggerRect = getTriggerRect(trigger)
+	const width = resolveDropdownWidth(triggerRect.width)
 	const minWidth = resolveCssSize(props.dropdownMinWidth) ?? '0px'
 
 	dropdownStyle.value = {
@@ -571,6 +670,7 @@ async function updateDropdownPosition() {
 
 	await nextTick()
 
+	triggerRect = getTriggerRect(trigger)
 	const dropdownRect = {
 		width: dropdownRef.value.offsetWidth,
 		height: dropdownRef.value.offsetHeight,
@@ -635,15 +735,16 @@ async function openDropdown() {
 	if (props.disabled || isOpen.value || !hasMinimumSearchLength.value || !hasDropdownContent.value)
 		return
 
+	previewOpenDirection()
 	isOpen.value = true
 	emit('open')
 
 	await nextTick()
 	await updateDropdownPosition()
 	await initializeOptionsOverlayScrollbars()
-
-	setInitialFocus()
 	startPositionTracking()
+	setInitialFocus()
+	scheduleDropdownPositionUpdate()
 }
 
 function closeDropdown() {
@@ -735,7 +836,7 @@ function focusOption(index: number) {
 	if (isDivider(option) || option.disabled) return
 
 	focusedIndex.value = index
-	optionRefs.value[index]?.scrollIntoView({ block: 'nearest' })
+	scrollOptionIntoView(index, 'nearest')
 }
 
 function focusNextOption() {
@@ -930,7 +1031,10 @@ onClickOutside(
 	{ ignore: outsideClickIgnoreTargets },
 )
 
+const isClient = ref(false)
+
 onMounted(() => {
+	isClient.value = true
 	window.addEventListener('resize', handleWindowResize)
 })
 
diff --git a/packages/ui/src/components/base/CopyCode.vue b/packages/ui/src/components/base/CopyCode.vue
index 201ea09bde..26af6978f2 100644
--- a/packages/ui/src/components/base/CopyCode.vue
+++ b/packages/ui/src/components/base/CopyCode.vue
@@ -1,17 +1,17 @@
 <template>
 	<button
-		class="!m-0 inline-flex w-fit select-text items-center gap-2 rounded-[10px] bg-[var(--color-button-bg)] px-2 py-1 font-mono text-sm text-primary transition-[opacity,filter,transform,outline] duration-200 ease-in-out hover:brightness-[1.25] active:scale-95 active:brightness-[0.8] motion-reduce:transition-none [&>svg]:h-[1em] [&>svg]:w-[1em]"
+		class="rounded-lg border border-solid border-surface-5 bg-surface-2 text-xs !m-0 inline-flex w-fit select-text items-center gap-2 px-2 py-1 font-mono text-primary transition-[opacity,filter,transform,outline] duration-200 ease-in-out hover:brightness-[1.25] active:scale-95 motion-reduce:transition-none [&>svg]:h-[1em] [&>svg]:w-[1em]"
 		:title="formatMessage(copiedMessage)"
 		@click="copyText"
 	>
 		<span>{{ displayText ?? text }}</span>
 		<CheckIcon v-if="copied" />
-		<ClipboardCopyIcon v-else />
+		<CopyIcon v-else />
 	</button>
 </template>
 
 <script setup lang="ts">
-import { CheckIcon, ClipboardCopyIcon } from '@modrinth/assets'
+import { CheckIcon, CopyIcon } from '@modrinth/assets'
 import { onBeforeUnmount, ref } from 'vue'
 
 import { defineMessage, useVIntl } from '../../composables/i18n'
diff --git a/packages/ui/src/components/base/CopyLinkButton.vue b/packages/ui/src/components/base/CopyLinkButton.vue
new file mode 100644
index 0000000000..4d884522be
--- /dev/null
+++ b/packages/ui/src/components/base/CopyLinkButton.vue
@@ -0,0 +1,63 @@
+<template>
+	<IconButton
+		v-tooltip="label"
+		:label="label"
+		:disabled="copied"
+		class="relative grid place-items-center overflow-hidden"
+		@click="copyToClipboard"
+	>
+		<CheckIcon
+			class="absolute transition-all ease-in-out"
+			:class="copied ? 'translate-y-0' : 'translate-y-7'"
+		/>
+		<LinkIcon
+			class="absolute transition-all ease-in-out"
+			:class="copied ? '-translate-y-7' : 'translate-y-0'"
+		/>
+	</IconButton>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, LinkIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import { defineMessage, useVIntl } from '../../composables/i18n'
+import { commonMessages } from '../../utils/common-messages'
+import IconButton from './buttons/IconButton.vue'
+
+const copyLinkMessage = commonMessages.copyLinkButton
+const copiedToClipboardMessage = defineMessage({
+	id: 'button.copied-to-clipboard',
+	defaultMessage: 'Copied to clipboard',
+})
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+	url: string
+	copyLabel?: string
+	copiedLabel?: string
+}>()
+
+const copied = ref(false)
+let copiedResetTimeout: ReturnType<typeof setTimeout> | undefined
+
+const label = computed(() => {
+	if (copied.value) {
+		return props.copiedLabel ?? formatMessage(copiedToClipboardMessage)
+	}
+
+	return props.copyLabel ?? formatMessage(copyLinkMessage)
+})
+
+async function copyToClipboard() {
+	await navigator.clipboard.writeText(props.url)
+	copied.value = true
+	clearTimeout(copiedResetTimeout)
+	copiedResetTimeout = setTimeout(() => {
+		copied.value = false
+	}, 3000)
+}
+
+onBeforeUnmount(() => clearTimeout(copiedResetTimeout))
+</script>
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 05c33a86b9..5985b3cd82 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -150,7 +150,7 @@
 		}}</Button>
 	</div>
 
-	<Teleport to="#teleports">
+	<Teleport v-if="isClient" to="#teleports">
 		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
 			<div
 				v-if="isAddMenuOpen && !isMobileActiveSubmenu"
@@ -158,6 +158,7 @@
 				class="fixed z-[9999] flex flex-col overflow-x-hidden overflow-y-auto rounded-[14px] border border-solid border-surface-5 bg-surface-4 shadow-2xl"
 				:style="addMenuStyle"
 				role="menu"
+				@pointerdown.stop
 				@mousedown.stop
 				@keydown="handleAddMenuKeydown"
 				@mousemove="(event) => handleMenuMouseMove(event, 'menu')"
@@ -192,7 +193,7 @@
 		</Transition>
 	</Teleport>
 
-	<Teleport to="#teleports">
+	<Teleport v-if="isClient" to="#teleports">
 		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
 			<div
 				v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
@@ -425,7 +426,7 @@ import {
 import { onClickOutside } from '@vueuse/core'
 import { OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'
 import type { Component, ComponentPublicInstance, CSSProperties } from 'vue'
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { Button, type ButtonElementHandle, type ButtonSize } from '#ui/components/base/buttons'
 
@@ -607,6 +608,7 @@ const emit = defineEmits<{
 }>()
 
 const isAddMenuOpen = ref(false)
+const isClient = ref(false)
 const activeCategoryKey = ref<string | null>(null)
 const pendingCategoryKey = ref<string | null>(null)
 const draftSelectedFilters = ref<DropdownFilterBarValue>(cloneSelectedFilters(props.modelValue))
@@ -1980,6 +1982,10 @@ watch(
 	{ deep: true },
 )
 
+onMounted(() => {
+	isClient.value = true
+})
+
 onBeforeUnmount(() => {
 	clearPendingCategoryTimeout()
 	stopAddMenuPositionTracking()
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index 487a328345..23c0e8ddc6 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -107,7 +107,7 @@
 			</template>
 		</component>
 
-		<Teleport to="#teleports">
+		<Teleport v-if="isClient" to="#teleports">
 			<Transition name="floating-expand">
 				<div
 					v-if="isOpen"
@@ -119,13 +119,14 @@
 					:style="dropdownStyle"
 					role="listbox"
 					aria-multiselectable="true"
+					@pointerdown.stop
 					@mousedown.stop
 					@keydown="handleDropdownKeydown"
 				>
 					<div class="empty:hidden">
 						<div
 							v-if="searchable"
-							class="px-0 py-1.5 border-0 border-solid border-b border-b-surface-5 flex"
+							class="px-0 border-0 border-solid border-b border-b-surface-5 flex"
 						>
 							<Input
 								ref="searchInputRef"
@@ -133,7 +134,7 @@
 								:icon="SearchIcon"
 								type="text"
 								:placeholder="searchPlaceholder"
-								wrapper-class="grow"
+								wrapper-class="grow m-2"
 								@input="handleSearchInput"
 								@keydown="handleSearchKeydown"
 							/>
@@ -1390,7 +1391,10 @@ onClickOutside(
 	{ ignore: [triggerElement, containerRef, '.v-popper__popper'] },
 )
 
+const isClient = ref(false)
+
 onMounted(() => {
+	isClient.value = true
 	window.addEventListener('resize', handleWindowResize)
 	calculateVisibleTags()
 })
diff --git a/packages/ui/src/components/base/Toggle.vue b/packages/ui/src/components/base/Toggle.vue
index a44ef755d4..4ffa62d33c 100644
--- a/packages/ui/src/components/base/Toggle.vue
+++ b/packages/ui/src/components/base/Toggle.vue
@@ -5,7 +5,7 @@
 		role="switch"
 		:aria-checked="modelValue"
 		:disabled="disabled"
-		class="group inline-flex shrink-0 touch-manipulation items-center rounded-full m-0 p-1 transition-all duration-200 cursor-pointer border-none"
+		class="group inline-flex shrink-0 touch-manipulation items-center rounded-full m-0 p-1 transition-all duration-200 cursor-pointer border border-solid border-surface-5"
 		:class="[
 			small ? 'h-5 !w-[40px]' : 'h-6 !w-[48px]',
 			modelValue ? 'bg-brand' : 'bg-button-bg',
@@ -21,7 +21,7 @@
 					? small
 						? 'translate-x-[20px] bg-black/90'
 						: 'translate-x-[24px] bg-black/90'
-					: 'bg-gray',
+					: 'bg-secondary',
 				disabled
 					? ''
 					: small
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/ContextMenu.vue b/packages/ui/src/components/base/buttons/ContextMenu.vue
new file mode 100644
index 0000000000..31e40460f7
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/ContextMenu.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
+
+import type { AnchoredTeleportAnchor } from '../../../utils/use-anchored-teleport'
+import { pointAnchor, useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
+import {
+	isDivider,
+	isHeading,
+	isMenuRow,
+	isSubmenu,
+	useMenuKeyboard,
+	visibleOptions,
+} from './button-menu/button-menu'
+import ButtonMenuItem from './button-menu/ButtonMenuItem.vue'
+import ButtonMenuPanel from './button-menu/ButtonMenuPanel.vue'
+import ButtonMenuSubmenu from './button-menu/ButtonMenuSubmenu.vue'
+import type { ButtonMenuAction, ButtonMenuLink, ButtonMenuOption } from './types'
+
+const props = defineProps<{
+	label: string
+}>()
+
+const emit = defineEmits<{
+	select: [option: ButtonMenuAction | ButtonMenuLink]
+	open: []
+	close: []
+}>()
+
+const anchor = ref<AnchoredTeleportAnchor | null>(null)
+const panel = ref<InstanceType<typeof ButtonMenuPanel> | null>(null)
+const panelElement = computed(() => panel.value?.element ?? null)
+const placement = ref('bottom-start' as const)
+const distance = ref(0)
+const menuId = `context-menu-${useId()}`
+const currentOptions = ref<ButtonMenuOption[]>([])
+
+const options = computed(() => visibleOptions(currentOptions.value))
+const rows = computed(() => options.value.filter(isMenuRow))
+
+const { isOpen, panelStyle, expandOrigin, open, close, updatePosition } = useAnchoredTeleport(
+	anchor,
+	panelElement,
+	placement,
+	distance,
+)
+
+const { focusedIndex, getItems, handleKeydown, reset } = useMenuKeyboard({
+	panel: panelElement,
+	rows: () => rows.value,
+	onEscape: () => closeMenu(),
+	onTab: () => closeMenu(),
+})
+
+async function openMenu(event: MouseEvent, menuOptions: ButtonMenuOption[]) {
+	currentOptions.value = menuOptions
+	anchor.value = pointAnchor(event.clientX, event.clientY)
+
+	if (isOpen.value) {
+		await nextTick()
+		updatePosition()
+		return
+	}
+
+	await open()
+	emit('open')
+	// focus the panel so keys work without highlighting a row
+	await nextTick()
+	panelElement.value?.focus()
+	window.getSelection()?.removeAllRanges()
+}
+
+function closeMenu() {
+	if (!isOpen.value) return
+	reset()
+	close()
+}
+
+function handleSelect(option: ButtonMenuAction | ButtonMenuLink) {
+	emit('select', option)
+	if (!option.remainOpen) closeMenu()
+}
+
+watch(isOpen, (openState, previousOpenState) => {
+	if (!openState && previousOpenState) emit('close')
+})
+
+const isClient = ref(false)
+onMounted(() => {
+	isClient.value = true
+})
+
+defineExpose({ open: openMenu, close: closeMenu })
+</script>
+
+<template>
+	<Teleport v-if="isClient" to="body">
+		<ButtonMenuPanel
+			ref="panel"
+			:open="isOpen"
+			:panel-id="menuId"
+			:label="props.label"
+			:panel-style="panelStyle"
+			:origin="expandOrigin"
+			tabindex="-1"
+			class="focus-visible:outline-none"
+			@keydown="handleKeydown"
+		>
+			<template v-for="(option, index) in options" :key="option.id ?? `${option.type}-${index}`">
+				<div v-if="isDivider(option)" role="separator" class="my-1 h-px bg-surface-5" />
+
+				<div
+					v-else-if="isHeading(option)"
+					class="px-3 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-secondary first:pt-1"
+				>
+					{{ option.label }}
+				</div>
+
+				<ButtonMenuSubmenu v-else-if="isSubmenu(option)" :option="option" @select="handleSelect">
+					<template #trigger>
+						<slot :name="option.id" :option="option">
+							<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+							{{ option.label }}
+						</slot>
+					</template>
+					<template #item="{ option: child }">
+						<slot :name="child.id" :option="child">
+							<component :is="child.icon" v-if="child.icon" aria-hidden="true" />
+							{{ child.label }}
+						</slot>
+					</template>
+				</ButtonMenuSubmenu>
+
+				<ButtonMenuItem
+					v-else
+					:option="option"
+					@select="handleSelect"
+					@focus="focusedIndex = getItems().indexOf($event)"
+				>
+					<slot :name="option.id" :option="option">
+						<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+						{{ option.label }}
+					</slot>
+				</ButtonMenuItem>
+			</template>
+		</ButtonMenuPanel>
+	</Teleport>
+</template>
diff --git a/packages/ui/src/components/base/buttons/SplitButton.vue b/packages/ui/src/components/base/buttons/SplitButton.vue
index 40badebad8..ea1998e6b9 100644
--- a/packages/ui/src/components/base/buttons/SplitButton.vue
+++ b/packages/ui/src/components/base/buttons/SplitButton.vue
@@ -8,19 +8,19 @@ import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
 import type {
 	ButtonColor,
 	ButtonInteraction,
+	ButtonMenuAction,
+	ButtonMenuLink,
+	ButtonMenuOption,
 	ButtonNativeType,
 	ButtonSize,
 	ButtonType,
-	OverflowMenuAction,
-	OverflowMenuLink,
-	OverflowMenuOption,
 	TeleportPlacement,
 } from './types'
 
 const props = withDefaults(
 	defineProps<{
 		menuLabel: string
-		options: OverflowMenuOption[]
+		options: ButtonMenuOption[]
 		groupLabel?: string
 		type?: ButtonType
 		color?: ButtonColor
@@ -46,7 +46,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
 	click: [event: MouseEvent]
-	select: [option: OverflowMenuAction | OverflowMenuLink]
+	select: [option: ButtonMenuAction | ButtonMenuLink]
 }>()
 
 const slots = useSlots()
diff --git a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
index a9f638197d..895b346181 100644
--- a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
@@ -1,29 +1,42 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import { computed, nextTick, onUnmounted, ref, useId, watch } from 'vue'
-import { RouterLink } from 'vue-router'
+import { computed, nextTick, onMounted, ref, toRef, useId, watch } from 'vue'
 
 import { useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
 import Button from './Button.vue'
+import {
+	isDivider,
+	isHeading,
+	isLink,
+	isMenuRow,
+	isSubmenu,
+	useHoverIntent,
+	useMenuKeyboard,
+	visibleOptions,
+} from './button-menu/button-menu'
+import ButtonMenuItem from './button-menu/ButtonMenuItem.vue'
+import ButtonMenuPanel from './button-menu/ButtonMenuPanel.vue'
+import ButtonMenuSubmenu from './button-menu/ButtonMenuSubmenu.vue'
 import IconButton from './IconButton.vue'
 import type {
 	ButtonColor,
 	ButtonElementHandle,
 	ButtonInteraction,
+	ButtonMenuAction,
+	ButtonMenuLink,
+	ButtonMenuOption,
 	ButtonSize,
 	ButtonType,
-	OverflowMenuAction,
-	OverflowMenuLink,
-	OverflowMenuOption,
 	TeleportPlacement,
 } from './types'
 
+const HOVER_CLOSE_DELAY = 250
+
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
 	defineProps<{
 		label: string
-		options: OverflowMenuOption[]
+		options: ButtonMenuOption[]
 		type?: ButtonType
 		color?: ButtonColor
 		size?: ButtonSize
@@ -49,108 +62,56 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-	select: [option: OverflowMenuAction | OverflowMenuLink]
+	select: [option: ButtonMenuAction | ButtonMenuLink]
 	open: []
 	close: []
 }>()
 
 const triggerButton = ref<ButtonElementHandle | null>(null)
 const triggerElement = computed(() => triggerButton.value?.element ?? null)
-const panelElement = ref<HTMLElement | null>(null)
-const resolvedPlacement = computed(() => props.placement)
-const resolvedDistance = computed(() => props.distance)
+const panel = ref<InstanceType<typeof ButtonMenuPanel> | null>(null)
+const panelElement = computed(() => panel.value?.element ?? null)
+const resolvedPlacement = toRef(props, 'placement')
+const resolvedDistance = toRef(props, 'distance')
 const menuId = `button-overflow-${useId()}`
-const selectedIndex = ref(-1)
-const typeahead = ref('')
-let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
-let hoverCloseTimer: ReturnType<typeof setTimeout> | undefined
 const triggerComponent = computed(() => (props.iconOnly ? IconButton : Button))
 
-const visibleOptions = computed(() => props.options.filter((option) => option.shown !== false))
-const menuOptions = computed(() =>
-	visibleOptions.value.filter(
-		(option): option is OverflowMenuAction | OverflowMenuLink => option.type !== 'divider',
-	),
-)
+const options = computed(() => visibleOptions(props.options))
+const rowOptions = computed(() => options.value.filter(isMenuRow))
 
-const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchoredTeleport(
-	triggerElement,
-	panelElement,
-	resolvedPlacement,
-	resolvedDistance,
-)
+const { isOpen, panelStyle, anchorStyle, resolvedSide, expandOrigin, open, close } =
+	useAnchoredTeleport(triggerElement, panelElement, resolvedPlacement, resolvedDistance)
 
-const menuTransformOrigin = computed(() => {
-	switch (resolvedSide.value) {
-		case 'top':
-			return 'bottom center'
-		case 'left':
-			return 'right center'
-		case 'right':
-			return 'left center'
-		default:
-			return 'top center'
-	}
+const { focusedIndex, getItems, focusItem, handleKeydown, reset } = useMenuKeyboard({
+	panel: panelElement,
+	rows: () => rowOptions.value,
+	onEscape: () => closeMenu(true),
+	onTab: () => {
+		triggerElement.value?.focus()
+		closeMenu()
+	},
 })
 
-const menuItemClasses =
-	'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
-	'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
-	'disabled:cursor-not-allowed disabled:opacity-50 [&[aria-disabled=true]]:cursor-not-allowed [&[aria-disabled=true]]:opacity-50 ' +
-	'[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:text-primary'
-
-const toneVariables: Record<ButtonColor, string> = {
-	brand: 'var(--color-brand)',
-	red: 'var(--color-red)',
-	orange: 'var(--color-orange)',
-	green: 'var(--color-green)',
-	blue: 'var(--color-blue)',
-	purple: 'var(--color-purple)',
-	medal_promotion: 'var(--medal-promotion-text-orange, var(--color-orange))',
-}
-
-function getMenuItemStyle(option: OverflowMenuAction | OverflowMenuLink) {
-	if (!option.tone || option.tone === 'default') return undefined
-
-	return {
-		'--overflow-menu-item-tone': toneVariables[option.tone],
-	} as CSSProperties
-}
-
-function isDivider(
-	option: OverflowMenuOption,
-): option is Extract<OverflowMenuOption, { type: 'divider' }> {
-	return option.type === 'divider'
-}
-
-function isLink(option: OverflowMenuOption): option is OverflowMenuLink {
-	return option.type === 'link'
-}
-
-function getMenuItems() {
-	if (!panelElement.value) return []
-	return Array.from(panelElement.value.querySelectorAll<HTMLElement>('[role="menuitem"]'))
-}
-
-function focusItem(index: number) {
-	const items = getMenuItems()
-	if (items.length === 0) return
-	selectedIndex.value = (index + items.length) % items.length
-	items[selectedIndex.value]?.focus()
-}
+const { handleMouseEnter, handleMouseLeave, cancelLeave } = useHoverIntent({
+	closeDelay: HOVER_CLOSE_DELAY,
+	enabled: () => props.hoverable,
+	onEnter: () => openMenu('first', false),
+	onLeave: () => closeMenu(),
+})
 
 async function openMenu(position: 'first' | 'last' = 'first', focus = true) {
 	if (props.disabled || isOpen.value) return
+	cancelLeave()
 	await open()
 	emit('open')
 	if (!focus) return
 	await nextTick()
-	focusItem(position === 'first' ? 0 : getMenuItems().length - 1)
+	focusItem(position === 'first' ? 0 : getItems().length - 1)
 }
 
 function closeMenu(restoreFocus = false) {
 	if (!isOpen.value) return
-	selectedIndex.value = -1
+	reset()
 	close(restoreFocus)
 }
 
@@ -160,123 +121,30 @@ async function toggleMenu(event?: MouseEvent) {
 	else await openMenu()
 }
 
-function clearHoverCloseTimer() {
-	if (!hoverCloseTimer) return
-	clearTimeout(hoverCloseTimer)
-	hoverCloseTimer = undefined
-}
-
-function handleMouseEnter() {
-	if (!props.hoverable || !window.matchMedia('(hover: hover)').matches) return
-	clearHoverCloseTimer()
-	openMenu('first', false)
-}
-
-function handleMouseLeave() {
-	if (!props.hoverable || !window.matchMedia('(hover: hover)').matches) return
-	clearHoverCloseTimer()
-	hoverCloseTimer = setTimeout(() => closeMenu(), 250)
-}
-
 function handleTriggerKeydown(event: KeyboardEvent) {
 	if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
 	event.preventDefault()
 	openMenu(event.key === 'ArrowDown' ? 'first' : 'last')
 }
 
-function handleAction(option: OverflowMenuAction, event: MouseEvent) {
-	if (option.disabled) return
-	option.action(event)
+function handleItemSelect(option: ButtonMenuAction | ButtonMenuLink) {
 	emit('select', option)
-	if (!option.remainOpen) closeMenu(true)
+	if (!option.remainOpen) closeMenu(!isLink(option)) // don't steal focus from a navigating link
 }
 
-function handleLink(option: OverflowMenuLink, event: MouseEvent) {
-	if (option.disabled) {
-		event.preventDefault()
-		return
-	}
+function handleSubmenuSelect(option: ButtonMenuAction | ButtonMenuLink) {
 	emit('select', option)
 	if (!option.remainOpen) closeMenu()
 }
 
-function handleLinkKeydown(option: OverflowMenuLink, event: KeyboardEvent) {
-	if (event.key !== ' ') return
-	event.preventDefault()
-	if (option.disabled) return
-	;(event.currentTarget as HTMLElement).click()
-}
-
-function handleMenuKeydown(event: KeyboardEvent) {
-	const items = getMenuItems()
-	if (items.length === 0) return
-
-	switch (event.key) {
-		case 'ArrowDown':
-			event.preventDefault()
-			focusItem(selectedIndex.value + 1)
-			break
-		case 'ArrowUp':
-			event.preventDefault()
-			focusItem(selectedIndex.value - 1)
-			break
-		case 'Home':
-			event.preventDefault()
-			focusItem(0)
-			break
-		case 'End':
-			event.preventDefault()
-			focusItem(items.length - 1)
-			break
-		case 'Escape':
-			event.preventDefault()
-			closeMenu(true)
-			break
-		case 'Tab':
-			triggerElement.value?.focus()
-			closeMenu()
-			break
-		default: {
-			if (
-				event.key === ' ' ||
-				event.key.length !== 1 ||
-				event.ctrlKey ||
-				event.metaKey ||
-				event.altKey
-			)
-				return
-
-			const character = event.key.toLocaleLowerCase()
-			const query = typeahead.value === character ? character : `${typeahead.value}${character}`
-			const startIndex = query.length === 1 ? selectedIndex.value + 1 : 0
-			typeahead.value = query
-
-			for (let offset = 0; offset < menuOptions.value.length; offset++) {
-				const index = (startIndex + offset) % menuOptions.value.length
-				if (menuOptions.value[index]?.label.toLocaleLowerCase().startsWith(query)) {
-					focusItem(index)
-					break
-				}
-			}
-
-			if (typeaheadTimer) clearTimeout(typeaheadTimer)
-			typeaheadTimer = setTimeout(() => {
-				typeahead.value = ''
-			}, 500)
-		}
-	}
-}
-
 watch(isOpen, (openState, previousOpenState) => {
 	if (!openState && previousOpenState) emit('close')
-	if (!openState && typeaheadTimer) {
-		clearTimeout(typeaheadTimer)
-		typeaheadTimer = undefined
-		typeahead.value = ''
-	}
 })
 
-onUnmounted(clearHoverCloseTimer)
+const isClient = ref(false)
+onMounted(() => {
+	isClient.value = true
+})
 
 defineExpose({ open: openMenu, close: closeMenu })
 </script>
@@ -306,179 +174,61 @@ defineExpose({ open: openMenu, close: closeMenu })
 		<slot />
 	</component>
 
-	<Teleport to="body">
-		<Transition name="floating-expand">
-			<div
-				v-if="isOpen"
-				:id="menuId"
-				ref="panelElement"
-				class="fixed isolate z-[9999] rounded-[14px] bg-surface-3 shadow-lg ring-1 ring-surface-5"
-				:style="[panelStyle, { transformOrigin: menuTransformOrigin }]"
-				role="menu"
-				:aria-label="props.label"
-				@keydown="handleMenuKeydown"
-				@mouseenter="handleMouseEnter"
-				@mouseleave="handleMouseLeave"
-			>
-				<span
-					aria-hidden="true"
-					class="overflow-menu-arrow"
-					:data-side="resolvedSide"
-					:style="anchorStyle"
-				/>
+	<Teleport v-if="isClient" to="body">
+		<ButtonMenuPanel
+			ref="panel"
+			:open="isOpen"
+			:panel-id="menuId"
+			:label="props.label"
+			:panel-style="panelStyle"
+			:side="resolvedSide"
+			:anchor-style="anchorStyle"
+			:origin="expandOrigin"
+			@keydown="handleKeydown"
+			@mouseenter="handleMouseEnter"
+			@mouseleave="handleMouseLeave"
+		>
+			<template v-for="(option, index) in options" :key="option.id ?? `${option.type}-${index}`">
+				<div v-if="isDivider(option)" role="separator" class="my-1 h-px bg-surface-5" />
+
 				<div
-					data-anchored-scroll-region
-					class="flex min-w-48 flex-col gap-1 overflow-y-auto p-2"
-					:style="{ maxHeight: panelStyle.maxHeight }"
+					v-else-if="isHeading(option)"
+					class="px-3 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-secondary first:pt-1"
 				>
-					<template
-						v-for="(option, index) in visibleOptions"
-						:key="option.id ?? `divider-${index}`"
-					>
-						<div v-if="isDivider(option)" role="separator" class="my-1 h-px bg-surface-5" />
-
-						<RouterLink
-							v-else-if="isLink(option) && option.to !== undefined && !option.disabled"
-							v-tooltip="option.tooltip"
-							:to="option.to"
-							:class="menuItemClasses"
-							:style="getMenuItemStyle(option)"
-							:data-tone="option.tone && option.tone !== 'default' ? option.tone : undefined"
-							:data-hover-filled="option.hoverFilled || option.hoverFilledOnly || undefined"
-							:data-hover-filled-only="option.hoverFilledOnly || undefined"
-							role="menuitem"
-							tabindex="-1"
-							@click="handleLink(option, $event)"
-							@keydown="handleLinkKeydown(option, $event)"
-							@focus="selectedIndex = getMenuItems().indexOf($event.currentTarget as HTMLElement)"
-						>
-							<slot :name="option.id" :option="option">
-								<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
-								{{ option.label }}
-							</slot>
-						</RouterLink>
-
-						<a
-							v-else-if="isLink(option)"
-							v-tooltip="option.tooltip"
-							:href="option.disabled ? undefined : option.href"
-							:target="option.target"
-							:rel="option.rel ?? (option.target === '_blank' ? 'noopener noreferrer' : undefined)"
-							:download="option.download"
-							:aria-disabled="option.disabled || undefined"
-							:class="menuItemClasses"
-							:style="getMenuItemStyle(option)"
-							:data-tone="option.tone && option.tone !== 'default' ? option.tone : undefined"
-							:data-hover-filled="option.hoverFilled || option.hoverFilledOnly || undefined"
-							:data-hover-filled-only="option.hoverFilledOnly || undefined"
-							role="menuitem"
-							tabindex="-1"
-							@click="handleLink(option, $event)"
-							@keydown="handleLinkKeydown(option, $event)"
-							@focus="selectedIndex = getMenuItems().indexOf($event.currentTarget as HTMLElement)"
-						>
-							<slot :name="option.id" :option="option">
-								<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
-								{{ option.label }}
-							</slot>
-						</a>
-
-						<button
-							v-else
-							v-tooltip="option.tooltip"
-							type="button"
-							:aria-disabled="option.disabled || undefined"
-							:class="menuItemClasses"
-							:style="getMenuItemStyle(option)"
-							:data-tone="option.tone && option.tone !== 'default' ? option.tone : undefined"
-							:data-hover-filled="option.hoverFilled || option.hoverFilledOnly || undefined"
-							:data-hover-filled-only="option.hoverFilledOnly || undefined"
-							role="menuitem"
-							tabindex="-1"
-							@click="handleAction(option, $event)"
-							@focus="selectedIndex = getMenuItems().indexOf($event.currentTarget as HTMLElement)"
-						>
-							<slot :name="option.id" :option="option">
-								<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
-								{{ option.label }}
-							</slot>
-						</button>
-					</template>
+					{{ option.label }}
 				</div>
-			</div>
-		</Transition>
+
+				<ButtonMenuSubmenu
+					v-else-if="isSubmenu(option)"
+					:option="option"
+					@select="handleSubmenuSelect"
+				>
+					<template #trigger>
+						<slot :name="option.id" :option="option">
+							<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+							{{ option.label }}
+						</slot>
+					</template>
+					<template #item="{ option: child }">
+						<slot :name="child.id" :option="child">
+							<component :is="child.icon" v-if="child.icon" aria-hidden="true" />
+							{{ child.label }}
+						</slot>
+					</template>
+				</ButtonMenuSubmenu>
+
+				<ButtonMenuItem
+					v-else
+					:option="option"
+					@select="handleItemSelect"
+					@focus="focusedIndex = getItems().indexOf($event)"
+				>
+					<slot :name="option.id" :option="option">
+						<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+						{{ option.label }}
+					</slot>
+				</ButtonMenuItem>
+			</template>
+		</ButtonMenuPanel>
 	</Teleport>
 </template>
-
-<style scoped>
-.overflow-menu-arrow {
-	position: absolute;
-	width: 0;
-	height: 0;
-	pointer-events: none;
-}
-
-.overflow-menu-arrow::before {
-	position: absolute;
-	width: 10px;
-	height: 10px;
-	content: '';
-	background-color: var(--surface-3);
-	transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.overflow-menu-arrow[data-side='bottom'] {
-	top: 0;
-}
-
-.overflow-menu-arrow[data-side='bottom']::before {
-	border-top: 1px solid var(--surface-5);
-	border-left: 1px solid var(--surface-5);
-}
-
-.overflow-menu-arrow[data-side='top'] {
-	bottom: 0;
-}
-
-.overflow-menu-arrow[data-side='top']::before {
-	border-right: 1px solid var(--surface-5);
-	border-bottom: 1px solid var(--surface-5);
-}
-
-.overflow-menu-arrow[data-side='right'] {
-	left: 0;
-}
-
-.overflow-menu-arrow[data-side='right']::before {
-	border-bottom: 1px solid var(--surface-5);
-	border-left: 1px solid var(--surface-5);
-}
-
-.overflow-menu-arrow[data-side='left'] {
-	right: 0;
-}
-
-.overflow-menu-arrow[data-side='left']::before {
-	border-top: 1px solid var(--surface-5);
-	border-right: 1px solid var(--surface-5);
-}
-
-.overflow-menu-item[data-tone]:not([data-hover-filled-only]) {
-	color: var(--overflow-menu-item-tone);
-}
-
-.overflow-menu-item[data-tone]:not([data-hover-filled-only]) :deep(svg) {
-	color: var(--overflow-menu-item-tone);
-}
-
-.overflow-menu-item[data-tone][data-hover-filled]:hover,
-.overflow-menu-item[data-tone][data-hover-filled]:focus-visible {
-	color: var(--color-accent-contrast);
-	background-color: var(--overflow-menu-item-tone);
-}
-
-.overflow-menu-item[data-tone][data-hover-filled]:hover :deep(svg),
-.overflow-menu-item[data-tone][data-hover-filled]:focus-visible :deep(svg) {
-	color: inherit;
-}
-</style>
diff --git a/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue b/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
index d365b1673a..665285581d 100644
--- a/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
+++ b/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, useId, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
 
 import { useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
 import Button from './Button.vue'
@@ -98,6 +98,11 @@ watch(isOpen, (openState, previousOpenState) => {
 	if (!openState && previousOpenState) emit('close')
 })
 
+const isClient = ref(false)
+onMounted(() => {
+	isClient.value = true
+})
+
 defineExpose({ open: openMenu, close: closeMenu })
 </script>
 
@@ -122,7 +127,7 @@ defineExpose({ open: openMenu, close: closeMenu })
 		<slot name="trigger" />
 	</component>
 
-	<Teleport to="body">
+	<Teleport v-if="isClient" to="body">
 		<Transition name="floating-expand">
 			<div
 				v-if="isOpen"
diff --git a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
new file mode 100644
index 0000000000..9e385b5369
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import type { ButtonMenuAction, ButtonMenuLink } from '../types'
+import {
+	buttonMenuItemClasses,
+	buttonMenuTones,
+	getButtonMenuItemAttrs,
+	isLink,
+} from './button-menu'
+
+const trailingActionClasses =
+	'button-menu-trailing relative flex size-10 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 opacity-0 ' +
+	"pointer-events-none before:pointer-events-none before:absolute before:size-8 before:rounded-full before:content-[''] " +
+	'focus-visible:outline-none ' +
+	'group-hover/button-menu-item:pointer-events-auto group-hover/button-menu-item:opacity-100 ' +
+	'focus-visible:pointer-events-auto focus-visible:opacity-100 ' +
+	'[&>svg]:relative [&>svg]:z-[1] [&>svg]:size-5'
+
+const props = defineProps<{
+	option: ButtonMenuAction | ButtonMenuLink
+	submenuItem?: boolean
+}>()
+
+const emit = defineEmits<{
+	select: [option: ButtonMenuAction | ButtonMenuLink, event: MouseEvent]
+	focus: [element: HTMLElement]
+}>()
+
+const wrapperElement = ref<HTMLElement | null>(null)
+const trailingElement = ref<HTMLElement | null>(null)
+
+const trailingActionStyle = computed(() => {
+	const color = props.option.trailingAction?.color
+	if (!color) return undefined
+	return { '--button-menu-trailing-color': buttonMenuTones[color] }
+})
+
+const itemAttrs = computed(() => ({
+	...getButtonMenuItemAttrs(props.option),
+	'data-button-menu-submenu-item': props.submenuItem || undefined,
+	'aria-checked': typeof props.option.selected === 'boolean' ? props.option.selected : undefined,
+	'aria-current': props.option.selected || undefined,
+}))
+
+function handleClick(event: MouseEvent) {
+	if (props.option.disabled) {
+		event.preventDefault()
+		return
+	}
+	if (!isLink(props.option)) props.option.action(event)
+	emit('select', props.option, event)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key === 'ArrowRight' && props.option.trailingAction) {
+		event.preventDefault()
+		event.stopPropagation()
+		trailingElement.value?.focus()
+		return
+	}
+
+	// links don't fire on space the way buttons do
+	if (event.key !== ' ' || !isLink(props.option)) return
+	event.preventDefault()
+	if (props.option.disabled) return
+	;(event.currentTarget as HTMLElement).click()
+}
+
+function focusRow() {
+	wrapperElement.value?.querySelector<HTMLElement>('[role="menuitem"]')?.focus()
+}
+
+function handleTrailingKeydown(event: KeyboardEvent) {
+	if (event.key === 'ArrowLeft') {
+		event.preventDefault()
+		event.stopPropagation()
+		focusRow()
+		return
+	}
+
+	if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) focusRow() // so the menu still moves from this row
+}
+
+function handleFocus(event: FocusEvent) {
+	emit('focus', event.currentTarget as HTMLElement)
+}
+</script>
+
+<template>
+	<div ref="wrapperElement" class="group/button-menu-item flex items-center">
+		<RouterLink
+			v-if="isLink(props.option) && props.option.to !== undefined && !props.option.disabled"
+			v-tooltip="props.option.tooltip"
+			v-bind="itemAttrs"
+			:to="props.option.to"
+			:class="[buttonMenuItemClasses, 'flex-1']"
+			@click="handleClick"
+			@keydown="handleKeydown"
+			@focus="handleFocus"
+		>
+			<RadioButtonCheckedIcon
+				v-if="props.option.selected === true"
+				aria-hidden="true"
+				class="!text-brand"
+			/>
+			<RadioButtonIcon
+				v-else-if="props.option.selected === false"
+				aria-hidden="true"
+				class="!text-secondary"
+			/>
+			<slot />
+		</RouterLink>
+
+		<a
+			v-else-if="isLink(props.option)"
+			v-tooltip="props.option.tooltip"
+			v-bind="itemAttrs"
+			:href="props.option.disabled ? undefined : props.option.href"
+			:target="props.option.target"
+			:rel="
+				props.option.rel ?? (props.option.target === '_blank' ? 'noopener noreferrer' : undefined)
+			"
+			:download="props.option.download"
+			:aria-disabled="props.option.disabled || undefined"
+			:class="[buttonMenuItemClasses, 'flex-1']"
+			@click="handleClick"
+			@keydown="handleKeydown"
+			@focus="handleFocus"
+		>
+			<RadioButtonCheckedIcon
+				v-if="props.option.selected === true"
+				aria-hidden="true"
+				class="!text-brand"
+			/>
+			<RadioButtonIcon
+				v-else-if="props.option.selected === false"
+				aria-hidden="true"
+				class="!text-secondary"
+			/>
+			<slot />
+		</a>
+
+		<button
+			v-else
+			v-tooltip="props.option.tooltip"
+			v-bind="itemAttrs"
+			type="button"
+			:aria-disabled="props.option.disabled || undefined"
+			:class="[buttonMenuItemClasses, 'flex-1']"
+			@click="handleClick"
+			@keydown="handleKeydown"
+			@focus="handleFocus"
+		>
+			<RadioButtonCheckedIcon
+				v-if="props.option.selected === true"
+				aria-hidden="true"
+				class="!text-brand"
+			/>
+			<RadioButtonIcon
+				v-else-if="props.option.selected === false"
+				aria-hidden="true"
+				class="!text-secondary"
+			/>
+			<slot />
+		</button>
+
+		<button
+			v-if="props.option.trailingAction"
+			ref="trailingElement"
+			v-tooltip="props.option.trailingAction.label"
+			type="button"
+			:aria-label="props.option.trailingAction.label"
+			:class="trailingActionClasses"
+			:style="trailingActionStyle"
+			tabindex="-1"
+			@click="props.option.trailingAction.action($event)"
+			@keydown="handleTrailingKeydown"
+		>
+			<component :is="props.option.trailingAction.icon" aria-hidden="true" />
+		</button>
+	</div>
+</template>
diff --git a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuPanel.vue b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuPanel.vue
new file mode 100644
index 0000000000..78fe1348ba
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuPanel.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { computed, ref } from 'vue'
+
+import type { AnchoredTeleportSide } from '../../../../utils/use-anchored-teleport'
+import { buttonMenuPanelClasses } from './button-menu'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+	open: boolean
+	panelId: string
+	label: string
+	panelStyle: CSSProperties
+	side?: AnchoredTeleportSide
+	anchorStyle?: CSSProperties
+	origin?: string
+	expand?: 'vertical' | 'horizontal'
+	// covers the gap so hovering from the trigger doesn't count as leaving
+	bridge?: { side: AnchoredTeleportSide; size: number }
+}>()
+
+const element = ref<HTMLElement | null>(null)
+
+const expandStyle = computed(() => {
+	const origin = props.origin ?? 'top center'
+	return {
+		transformOrigin: origin,
+		'--floating-expand-origin': origin,
+		...(props.expand === 'horizontal'
+			? {
+					'--floating-expand-x': '0.3',
+					'--floating-expand-y': '0.8',
+				}
+			: {}),
+	}
+})
+
+defineExpose({ element })
+</script>
+
+<template>
+	<Transition name="floating-expand">
+		<div
+			v-if="props.open"
+			:id="props.panelId"
+			ref="element"
+			v-bind="$attrs"
+			:class="buttonMenuPanelClasses"
+			:style="[props.panelStyle, expandStyle]"
+			role="menu"
+			:aria-label="props.label"
+		>
+			<span
+				v-if="props.side && props.anchorStyle"
+				aria-hidden="true"
+				class="button-menu-arrow"
+				:data-side="props.side"
+				:style="props.anchorStyle"
+			/>
+			<span
+				v-if="props.bridge"
+				aria-hidden="true"
+				class="button-menu-bridge"
+				:data-side="props.bridge.side"
+				:style="{ '--button-menu-bridge-size': `${props.bridge.size}px` }"
+			/>
+			<div
+				data-anchored-scroll-region
+				class="flex flex-col p-2 overflow-y-auto"
+				:style="{ maxHeight: props.panelStyle.maxHeight }"
+			>
+				<slot />
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+.button-menu-arrow {
+	position: absolute;
+	width: 0;
+	height: 0;
+	pointer-events: none;
+}
+
+.button-menu-arrow::before {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	content: '';
+	background-color: var(--surface-3);
+	transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.button-menu-arrow[data-side='bottom'] {
+	top: 0;
+}
+
+.button-menu-arrow[data-side='bottom']::before {
+	border-top: 1px solid var(--surface-5);
+	border-left: 1px solid var(--surface-5);
+	border-radius: 0 0 99999px 0;
+}
+
+.button-menu-arrow[data-side='top'] {
+	bottom: 0;
+}
+
+.button-menu-arrow[data-side='top']::before {
+	border-right: 1px solid var(--surface-5);
+	border-bottom: 1px solid var(--surface-5);
+}
+
+.button-menu-arrow[data-side='right'] {
+	left: 0;
+}
+
+.button-menu-arrow[data-side='right']::before {
+	border-bottom: 1px solid var(--surface-5);
+	border-left: 1px solid var(--surface-5);
+}
+
+.button-menu-arrow[data-side='left'] {
+	right: 0;
+}
+
+.button-menu-arrow[data-side='left']::before {
+	border-top: 1px solid var(--surface-5);
+	border-right: 1px solid var(--surface-5);
+}
+
+.button-menu-bridge {
+	position: absolute;
+}
+
+.button-menu-bridge[data-side='right'] {
+	top: 0;
+	bottom: 0;
+	left: calc(-1 * var(--button-menu-bridge-size));
+	width: var(--button-menu-bridge-size);
+}
+
+.button-menu-bridge[data-side='left'] {
+	top: 0;
+	bottom: 0;
+	right: calc(-1 * var(--button-menu-bridge-size));
+	width: var(--button-menu-bridge-size);
+}
+
+.button-menu-bridge[data-side='bottom'] {
+	left: 0;
+	right: 0;
+	top: calc(-1 * var(--button-menu-bridge-size));
+	height: var(--button-menu-bridge-size);
+}
+
+.button-menu-bridge[data-side='top'] {
+	left: 0;
+	right: 0;
+	bottom: calc(-1 * var(--button-menu-bridge-size));
+	height: var(--button-menu-bridge-size);
+}
+</style>
diff --git a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
new file mode 100644
index 0000000000..cf1fc1b6ef
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { computed, ref, toRef, useId } from 'vue'
+
+import { useAnchoredTeleport } from '../../../../utils/use-anchored-teleport'
+import type {
+	ButtonMenuAction,
+	ButtonMenuLink,
+	ButtonMenuSubmenu,
+	TeleportPlacement,
+} from '../types'
+import {
+	buttonMenuItemClasses,
+	getButtonMenuItemAttrs,
+	isDivider,
+	isHeading,
+	menuItemSelector,
+	menuPanelPadding,
+	submenuGap,
+	useButtonMenuNavigation,
+	useHoverIntent,
+	visibleOptions,
+} from './button-menu'
+import ButtonMenuItem from './ButtonMenuItem.vue'
+import ButtonMenuPanel from './ButtonMenuPanel.vue'
+
+const HOVER_CLOSE_DELAY = 200
+
+const props = withDefaults(
+	defineProps<{
+		option: ButtonMenuSubmenu
+		placement?: TeleportPlacement
+		distance?: number
+	}>(),
+	{
+		placement: 'right-start',
+		distance: submenuGap,
+	},
+)
+
+const emit = defineEmits<{
+	select: [option: ButtonMenuAction | ButtonMenuLink]
+}>()
+
+const triggerElement = ref<HTMLElement | null>(null)
+const panel = ref<InstanceType<typeof ButtonMenuPanel> | null>(null)
+const panelElement = computed(() => panel.value?.element ?? null)
+const resolvedPlacement = toRef(props, 'placement')
+const resolvedDistance = toRef(props, 'distance')
+const alignOffset = ref(-menuPanelPadding)
+const panelId = `button-menu-submenu-${useId()}`
+
+const options = computed(() => visibleOptions(props.option.options))
+const triggerAttrs = computed(() => getButtonMenuItemAttrs(props.option))
+
+const { isOpen, panelStyle, resolvedSide, expandOrigin, open, close } = useAnchoredTeleport(
+	triggerElement,
+	panelElement,
+	resolvedPlacement,
+	resolvedDistance,
+	alignOffset,
+)
+
+const bridge = computed(() => ({ side: resolvedSide.value, size: resolvedDistance.value }))
+
+const { focusItem, handleNavigationKeydown } = useButtonMenuNavigation(
+	panelElement,
+	menuItemSelector,
+)
+
+const { handleMouseEnter, handleMouseLeave, cancelLeave } = useHoverIntent({
+	closeDelay: HOVER_CLOSE_DELAY,
+	onEnter: () => openSubmenu(false),
+	onLeave: () => closeSubmenu(),
+})
+
+async function openSubmenu(focus = true) {
+	cancelLeave()
+	if (props.option.disabled) return
+	if (!isOpen.value) await open()
+	if (focus) focusItem(0)
+}
+
+function closeSubmenu(restoreFocus = false) {
+	cancelLeave()
+	close(restoreFocus)
+}
+
+function handleTriggerClick(event: MouseEvent) {
+	if (event.detail && window.matchMedia('(hover: hover)').matches) return
+	toggleSubmenu()
+}
+
+function toggleSubmenu() {
+	if (isOpen.value) closeSubmenu()
+	else openSubmenu()
+}
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+	if (event.key === 'ArrowRight') {
+		event.preventDefault()
+		openSubmenu()
+		return
+	}
+	if (event.key === 'ArrowLeft' && isOpen.value) {
+		event.preventDefault()
+		closeSubmenu(true)
+		return
+	}
+	if (event.key !== 'Enter' && event.key !== ' ') return
+	event.preventDefault()
+	toggleSubmenu()
+}
+
+function handleSelect(option: ButtonMenuAction | ButtonMenuLink) {
+	emit('select', option)
+	if (!option.remainOpen) closeSubmenu()
+}
+
+function handlePanelKeydown(event: KeyboardEvent) {
+	if (handleNavigationKeydown(event)) {
+		event.stopPropagation() // parent menu is listening too
+		return
+	}
+
+	if (event.key !== 'Escape' && event.key !== 'ArrowLeft') return
+	event.preventDefault()
+	event.stopPropagation()
+	closeSubmenu(true)
+}
+</script>
+
+<template>
+	<button
+		ref="triggerElement"
+		v-tooltip="props.option.tooltip"
+		v-bind="triggerAttrs"
+		type="button"
+		:aria-disabled="props.option.disabled || undefined"
+		:aria-expanded="isOpen"
+		:aria-controls="panelId"
+		aria-haspopup="menu"
+		:class="buttonMenuItemClasses"
+		@click="handleTriggerClick"
+		@keydown="handleTriggerKeydown"
+		@mouseenter="handleMouseEnter"
+		@mouseleave="handleMouseLeave"
+	>
+		<slot name="trigger" :option="props.option">
+			<component :is="props.option.icon" v-if="props.option.icon" aria-hidden="true" />
+			{{ props.option.label }}
+		</slot>
+		<ChevronRightIcon aria-hidden="true" class="ml-auto !text-secondary" />
+	</button>
+
+	<ButtonMenuPanel
+		ref="panel"
+		:open="isOpen"
+		:panel-id="panelId"
+		:label="props.option.label"
+		:panel-style="panelStyle"
+		:side="resolvedSide"
+		:origin="expandOrigin"
+		expand="horizontal"
+		:bridge="bridge"
+		@keydown="handlePanelKeydown"
+		@mouseenter="handleMouseEnter"
+		@mouseleave="handleMouseLeave"
+	>
+		<template v-for="(child, index) in options" :key="child.id ?? `${child.type}-${index}`">
+			<div v-if="isDivider(child)" role="separator" class="my-1 h-px bg-surface-5" />
+
+			<div
+				v-else-if="isHeading(child)"
+				class="px-3 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-secondary first:pt-1"
+			>
+				{{ child.label }}
+			</div>
+
+			<ButtonMenuItem v-else :option="child" submenu-item @select="handleSelect">
+				<slot name="item" :option="child">
+					<component :is="child.icon" v-if="child.icon" aria-hidden="true" />
+					{{ child.label }}
+				</slot>
+			</ButtonMenuItem>
+		</template>
+	</ButtonMenuPanel>
+</template>
diff --git a/packages/ui/src/components/base/buttons/button-menu/button-menu.ts b/packages/ui/src/components/base/buttons/button-menu/button-menu.ts
new file mode 100644
index 0000000000..aa56d33ce6
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/button-menu/button-menu.ts
@@ -0,0 +1,239 @@
+import type { CSSProperties, Ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
+
+import type {
+	ButtonColor,
+	ButtonMenuAction,
+	ButtonMenuDivider,
+	ButtonMenuHeading,
+	ButtonMenuLink,
+	ButtonMenuOption,
+	ButtonMenuSubmenu,
+} from '../types'
+
+export const buttonMenuItemClasses =
+	'button-menu-item flex min-h-10 z-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
+	'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
+	'disabled:cursor-not-allowed disabled:opacity-50 [&[aria-disabled=true]]:cursor-not-allowed [&[aria-disabled=true]]:opacity-50 ' +
+	'[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:text-primary'
+
+export const buttonMenuPanelClasses =
+	'fixed isolate z-[9999] rounded-[14px] bg-surface-3 shadow-lg ring-1 ring-surface-5 select-none'
+
+export const menuPanelPadding = 8
+export const submenuGap = 2
+export const menuItemSelector = '[role="menuitem"]'
+// submenu items render inside this panel, so skip them when moving focus
+export const topLevelMenuItemSelector = `${menuItemSelector}:not([data-button-menu-submenu-item])`
+
+const TYPEAHEAD_RESET_DELAY = 500
+
+export const buttonMenuTones: Record<ButtonColor, string> = {
+	brand: 'var(--color-brand)',
+	red: 'var(--color-red)',
+	orange: 'var(--color-orange)',
+	green: 'var(--color-green)',
+	blue: 'var(--color-blue)',
+	purple: 'var(--color-purple)',
+	medal_promotion: 'var(--medal-promotion-text-orange, var(--color-orange))',
+}
+
+export function isDivider(option: ButtonMenuOption): option is ButtonMenuDivider {
+	return option.type === 'divider'
+}
+
+export function isHeading(option: ButtonMenuOption): option is ButtonMenuHeading {
+	return option.type === 'heading'
+}
+
+export function isLink(option: ButtonMenuOption): option is ButtonMenuLink {
+	return option.type === 'link'
+}
+
+export function isSubmenu(option: ButtonMenuOption): option is ButtonMenuSubmenu {
+	return option.type === 'submenu'
+}
+
+export function isMenuRow(
+	option: ButtonMenuOption,
+): option is ButtonMenuAction | ButtonMenuLink | ButtonMenuSubmenu {
+	return option.type !== 'divider' && option.type !== 'heading'
+}
+
+export function visibleOptions<T extends { shown?: boolean }>(options: T[]): T[] {
+	return options.filter((option) => option.shown !== false)
+}
+
+export function getButtonMenuItemAttrs(
+	option: ButtonMenuAction | ButtonMenuLink | ButtonMenuSubmenu,
+) {
+	const tone = option.tone && option.tone !== 'default' ? option.tone : undefined
+
+	return {
+		role: 'menuitem',
+		tabindex: '-1',
+		style: tone
+			? ({ '--button-menu-item-tone': buttonMenuTones[tone] } as CSSProperties)
+			: undefined,
+		'data-tone': tone,
+		'data-hover-filled': option.hoverFilled || option.hoverFilledOnly || undefined,
+		'data-hover-filled-only': option.hoverFilledOnly || undefined,
+	}
+}
+
+export function useButtonMenuNavigation(
+	panel: Readonly<Ref<HTMLElement | null>>,
+	itemSelector: string,
+) {
+	const focusedIndex = ref(-1)
+
+	function getItems() {
+		if (!panel.value) return []
+		return Array.from(panel.value.querySelectorAll<HTMLElement>(itemSelector))
+	}
+
+	function focusItem(index: number) {
+		const items = getItems()
+		if (items.length === 0) return
+		focusedIndex.value = (index + items.length) % items.length
+		items[focusedIndex.value]?.focus()
+	}
+
+	function handleNavigationKeydown(event: KeyboardEvent) {
+		const items = getItems()
+		if (items.length === 0) return false
+
+		const activeIndex = items.indexOf(document.activeElement as HTMLElement)
+		const currentIndex = activeIndex === -1 ? focusedIndex.value : activeIndex
+
+		switch (event.key) {
+			case 'ArrowDown':
+				focusItem(currentIndex + 1)
+				break
+			case 'ArrowUp':
+				focusItem(currentIndex === -1 ? items.length - 1 : currentIndex - 1)
+				break
+			case 'Home':
+				focusItem(0)
+				break
+			case 'End':
+				focusItem(items.length - 1)
+				break
+			default:
+				return false
+		}
+
+		event.preventDefault()
+		return true
+	}
+
+	return { focusedIndex, getItems, focusItem, handleNavigationKeydown }
+}
+
+export function useMenuKeyboard(options: {
+	panel: Readonly<Ref<HTMLElement | null>>
+	rows: () => { label: string }[]
+	onEscape: () => void
+	onTab?: () => void
+}) {
+	const navigation = useButtonMenuNavigation(options.panel, topLevelMenuItemSelector)
+	const typeahead = ref('')
+	let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
+
+	function clearTypeahead() {
+		if (typeaheadTimer) clearTimeout(typeaheadTimer)
+		typeaheadTimer = undefined
+		typeahead.value = ''
+	}
+
+	function focusTypeaheadMatch(event: KeyboardEvent) {
+		if (
+			event.key === ' ' ||
+			event.key.length !== 1 ||
+			event.ctrlKey ||
+			event.metaKey ||
+			event.altKey
+		) {
+			return
+		}
+
+		const character = event.key.toLocaleLowerCase()
+		// repeating a letter cycles matches instead of appending
+		const query = typeahead.value === character ? character : `${typeahead.value}${character}`
+		const startIndex = query.length === 1 ? navigation.focusedIndex.value + 1 : 0
+		const rows = options.rows()
+		typeahead.value = query
+
+		for (let offset = 0; offset < rows.length; offset++) {
+			const index = (startIndex + offset) % rows.length
+			if (rows[index]?.label.toLocaleLowerCase().startsWith(query)) {
+				navigation.focusItem(index)
+				break
+			}
+		}
+
+		if (typeaheadTimer) clearTimeout(typeaheadTimer)
+		typeaheadTimer = setTimeout(clearTypeahead, TYPEAHEAD_RESET_DELAY)
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (navigation.handleNavigationKeydown(event)) return
+
+		switch (event.key) {
+			case 'Escape':
+				event.preventDefault()
+				options.onEscape()
+				break
+			case 'Tab':
+				options.onTab?.()
+				break
+			default:
+				focusTypeaheadMatch(event)
+		}
+	}
+
+	function reset() {
+		navigation.focusedIndex.value = -1
+		clearTypeahead()
+	}
+
+	onUnmounted(clearTypeahead)
+
+	return { ...navigation, handleKeydown, reset }
+}
+
+export function useHoverIntent(options: {
+	closeDelay: number
+	enabled?: () => boolean
+	onEnter: () => void
+	onLeave: () => void
+}) {
+	let leaveTimer: ReturnType<typeof setTimeout> | undefined
+
+	function cancelLeave() {
+		if (leaveTimer === undefined) return
+		clearTimeout(leaveTimer)
+		leaveTimer = undefined
+	}
+
+	function isIgnored() {
+		// touch reports hover on tap, which would open menus you meant to scroll past
+		return options.enabled?.() === false || !window.matchMedia('(hover: hover)').matches
+	}
+
+	function handleMouseEnter() {
+		if (isIgnored()) return
+		cancelLeave()
+		options.onEnter()
+	}
+
+	function handleMouseLeave() {
+		if (isIgnored()) return
+		cancelLeave()
+		leaveTimer = setTimeout(options.onLeave, options.closeDelay)
+	}
+
+	onUnmounted(cancelLeave)
+
+	return { handleMouseEnter, handleMouseLeave, cancelLeave }
+}
diff --git a/packages/ui/src/components/base/buttons/index.ts b/packages/ui/src/components/base/buttons/index.ts
index cbfc192984..de96110228 100644
--- a/packages/ui/src/components/base/buttons/index.ts
+++ b/packages/ui/src/components/base/buttons/index.ts
@@ -1,6 +1,8 @@
 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'
 export { default as SplitButton } from './SplitButton.vue'
@@ -11,13 +13,16 @@ export type {
 	ButtonElementHandle,
 	ButtonInteraction,
 	ButtonLinkDestination,
+	ButtonMenuAction,
+	ButtonMenuDivider,
+	ButtonMenuHeading,
+	ButtonMenuLeafOption,
+	ButtonMenuLink,
+	ButtonMenuOption,
+	ButtonMenuSubmenu,
 	ButtonNativeType,
 	ButtonSize,
 	ButtonType,
 	ButtonVisualProps,
-	OverflowMenuAction,
-	OverflowMenuDivider,
-	OverflowMenuLink,
-	OverflowMenuOption,
 	TeleportPlacement,
 } from './types'
diff --git a/packages/ui/src/components/base/buttons/types.ts b/packages/ui/src/components/base/buttons/types.ts
index 2e8e7f5d81..a6dd78068e 100644
--- a/packages/ui/src/components/base/buttons/types.ts
+++ b/packages/ui/src/components/base/buttons/types.ts
@@ -69,7 +69,7 @@ export type ButtonLinkDestination =
 
 export type TeleportPlacement = AnchoredTeleportPlacement
 
-export interface OverflowMenuItemBase {
+export interface ButtonMenuItemBase {
 	id: string
 	label: string
 	icon?: Component
@@ -80,14 +80,21 @@ export interface OverflowMenuItemBase {
 	tone?: 'default' | ButtonColor
 	hoverFilled?: boolean
 	hoverFilledOnly?: boolean
+	selected?: boolean
+	trailingAction?: {
+		label: string
+		icon: Component
+		color?: ButtonColor
+		action: (event: MouseEvent) => void
+	}
 }
 
-export interface OverflowMenuAction extends OverflowMenuItemBase {
+export interface ButtonMenuAction extends ButtonMenuItemBase {
 	type?: 'action'
 	action: (event: MouseEvent) => void
 }
 
-export interface OverflowMenuLink extends OverflowMenuItemBase {
+export interface ButtonMenuLink extends ButtonMenuItemBase {
 	type: 'link'
 	to?: RouteLocationRaw
 	href?: string
@@ -96,13 +103,31 @@ export interface OverflowMenuLink extends OverflowMenuItemBase {
 	download?: string | boolean
 }
 
-export interface OverflowMenuDivider {
+export interface ButtonMenuDivider {
 	type: 'divider'
 	id?: string
 	shown?: boolean
 }
 
-export type OverflowMenuOption = OverflowMenuAction | OverflowMenuLink | OverflowMenuDivider
+export interface ButtonMenuHeading {
+	type: 'heading'
+	id?: string
+	label: string
+	shown?: boolean
+}
+
+export type ButtonMenuLeafOption =
+	| ButtonMenuAction
+	| ButtonMenuLink
+	| ButtonMenuDivider
+	| ButtonMenuHeading
+
+export interface ButtonMenuSubmenu extends ButtonMenuItemBase {
+	type: 'submenu'
+	options: ButtonMenuLeafOption[]
+}
+
+export type ButtonMenuOption = ButtonMenuLeafOption | ButtonMenuSubmenu
 
 export interface ButtonElementHandle {
 	element: HTMLElement | null
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 1a62a43dfd..7555dabe17 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -5,6 +5,7 @@ export { default as AppearingProgressBar } from './AppearingProgressBar.vue'
 export { default as AutoBrandIcon } from './AutoBrandIcon.vue'
 export { default as AutoLink } from './AutoLink.vue'
 export { default as Avatar } from './Avatar.vue'
+export { default as BackToParentLink } from './BackToParentLink.vue'
 export { default as Badge } from './Badge.vue'
 export { default as BaseTerminal } from './BaseTerminal.vue'
 export { default as BigOptionButton } from './BigOptionButton.vue'
@@ -12,6 +13,8 @@ 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'
 export { default as SplitButton } from './buttons/SplitButton.vue'
@@ -20,14 +23,17 @@ export { default as TeleportPopoutMenu } from './buttons/TeleportPopoutMenu.vue'
 export type {
 	ButtonColor,
 	ButtonInteraction,
+	ButtonMenuAction,
+	ButtonMenuDivider,
+	ButtonMenuHeading,
+	ButtonMenuLeafOption,
+	ButtonMenuLink,
+	ButtonMenuOption,
+	ButtonMenuSubmenu,
 	ButtonNativeType,
 	ButtonSize,
 	ButtonType,
 	ButtonVisualProps,
-	OverflowMenuAction,
-	OverflowMenuDivider,
-	OverflowMenuLink,
-	OverflowMenuOption,
 	TeleportPlacement,
 } from './buttons/types'
 export { default as Card } from './Card.vue'
@@ -40,6 +46,7 @@ export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
 export type { ComboboxOption, ComboboxSearchInputVariant } from './Combobox.vue'
 export { default as Combobox } from './Combobox.vue'
 export { default as CopyCode } from './CopyCode.vue'
+export { default as CopyLinkButton } from './CopyLinkButton.vue'
 export { default as DoubleIcon } from './DoubleIcon.vue'
 export { default as DropArea } from './DropArea.vue'
 export type { DropdownFilterBarCategory, DropdownFilterBarOption } from './DropdownFilterBar.vue'
diff --git a/packages/ui/src/components/billing/AddPaymentMethod.vue b/packages/ui/src/components/billing/AddPaymentMethod.vue
index ac8c25c74b..2cd5535949 100644
--- a/packages/ui/src/components/billing/AddPaymentMethod.vue
+++ b/packages/ui/src/components/billing/AddPaymentMethod.vue
@@ -3,8 +3,11 @@ import { createStripeElements } from '@modrinth/utils'
 import { loadStripe, type Stripe as StripsJs, type StripeElements } from '@stripe/stripe-js'
 import { ref } from 'vue'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 
+const debug = useDebugLogger('AddPaymentMethod')
+
 const emit = defineEmits<{
 	(e: 'startLoading' | 'stopLoading'): void
 }>()
@@ -70,7 +73,7 @@ async function submit(): Promise<boolean> {
 		},
 	})
 
-	console.log(result)
+	debug(result)
 
 	const { error } = result
 
diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index 14c1eacd8a..5634b258a8 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -15,6 +15,7 @@ import { computed, nextTick, onBeforeUnmount, ref, toRef, useTemplateRef, watch
 import { Button } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { useStripe } from '../../composables/stripe'
 import { commonMessages } from '../../utils'
@@ -28,6 +29,7 @@ import ConfirmPurchase from './ServersPurchase3Review.vue'
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const queryClient = useQueryClient()
+const debug = useDebugLogger('ModrinthServersPurchaseModal')
 
 export type RegionPing = {
 	region: string
@@ -246,7 +248,7 @@ const nextStep = computed(() => {
 const canProceed = computed(() => {
 	switch (currentStep.value) {
 		case 'plan':
-			console.log('Plan step:', {
+			debug('Plan step:', {
 				customServer: customServer.value,
 				selectedPlan: selectedPlan.value,
 				existingPlan: props.existingPlan,
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index 53da3512f2..330ac5940d 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -466,6 +466,7 @@ import { calculateSavings, createStripeElements, getCurrency } from '@modrinth/u
 import dayjs from 'dayjs'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import { useVIntl } from '../../composables/i18n'
 import { useFormatDateTime, useFormatPrice } from '../../composables/index.ts'
 import { paymentMethodMessages } from '../../utils/common-messages'
@@ -481,6 +482,7 @@ import NewModal from '../modal/NewModal.vue'
 const { formatMessage } = useVIntl()
 const formatPrice = useFormatPrice()
 const formatDate = useFormatDateTime({ dateStyle: 'long' })
+const debug = useDebugLogger('PurchaseModal')
 
 const props = defineProps({
 	product: {
@@ -648,7 +650,7 @@ const updateCustomServerStock = async () => {
 						mutatedProduct.value,
 					)
 					customOutOfStock.value = capacityStatus.custom?.available === 0
-					console.log(capacityStatus)
+					debug(capacityStatus)
 				}
 			} else {
 				const capacityStatus = await props.fetchCapacityStatuses(mutatedProduct.value)
diff --git a/packages/ui/src/components/chart/Chart.vue b/packages/ui/src/components/chart/Chart.vue
index 72d42bc67a..aa894791dd 100644
--- a/packages/ui/src/components/chart/Chart.vue
+++ b/packages/ui/src/components/chart/Chart.vue
@@ -147,8 +147,7 @@ const chartOptions = ref({
 		},
 	},
 	tooltip: {
-		custom({ series, seriesIndex, dataPointIndex, w }) {
-			console.log(seriesIndex, w)
+		custom({ series, dataPointIndex, w }) {
 			return (
 				`<div class="bar-tooltip">` +
 				`<div class="seperated-entry title">` +
diff --git a/packages/ui/src/components/chart/CompactChart.vue b/packages/ui/src/components/chart/CompactChart.vue
index 962315cb7d..348a6c0a19 100644
--- a/packages/ui/src/components/chart/CompactChart.vue
+++ b/packages/ui/src/components/chart/CompactChart.vue
@@ -118,8 +118,7 @@ const chartOptions = ref({
 		},
 	},
 	tooltip: {
-		custom({ series, seriesIndex, dataPointIndex, w }) {
-			console.log(seriesIndex, w)
+		custom({ series, dataPointIndex, w }) {
 			return `<div class="bar-tooltip">${series
 				.map((value) =>
 					value[dataPointIndex] > 0
diff --git a/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue b/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue
index 2467b5d3cf..3fee5bc9b9 100644
--- a/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue
@@ -43,7 +43,9 @@ async function copyProjectLink() {
 </script>
 
 <template>
-	<div class="bg-surface-3 p-4 rounded-2xl flex flex-col gap-3">
+	<div
+		class="bg-surface-3 p-4 rounded-2xl flex flex-col gap-3 border border-solid border-surface-4"
+	>
 		<div class="flex gap-4 justify-between">
 			<div class="flex flex-col gap-2">
 				<span class="text-contrast font-semibold">{{ title }}</span>
@@ -88,7 +90,9 @@ async function copyProjectLink() {
 			<div class="font-medium">Notes:</div>
 			<div>{{ notes ?? 'N/A' }}</div>
 		</div>
-		<div class="bg-surface-2 p-4 rounded-2xl flex flex-col gap-3">
+		<div
+			class="bg-surface-2 p-4 rounded-2xl flex flex-col gap-3 border border-solid border-surface-4"
+		>
 			<span class="text-contrast font-semibold">Files</span>
 			<span v-if="!(files?.length > 0)" class="text-secondary">
 				No files available for external project.
diff --git a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
index 9b2ce15e22..e321162b3b 100644
--- a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
@@ -18,7 +18,7 @@ import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
 import { Collapsible, ConfirmModal } from '#ui/components'
-import type { OverflowMenuOption } from '#ui/components/base'
+import type { ButtonMenuOption } from '#ui/components/base'
 import { Button, IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import { commonMessages } from '#ui/utils'
 
@@ -485,7 +485,7 @@ async function handleQuickReply(reply: QuickReply) {
 	reviewReasonInput.value = message
 }
 
-const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
+const visibleQuickReplies = computed<ButtonMenuOption[]>(() => {
 	const replies = attributionModeration?.attributionQuickReplies
 
 	if (!replies) return []
@@ -501,7 +501,7 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 					id: reply.label,
 					label: reply.label,
 					action: () => handleQuickReply(reply),
-				}) as OverflowMenuOption,
+				}) as ButtonMenuOption,
 		)
 })
 </script>
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
index 448eae49d6..8592ec8621 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
@@ -43,7 +43,12 @@
 		<!-- Instance-specific: Icon upload -->
 		<div v-if="ctx.flowType === 'instance'" class="flex items-center gap-2.5">
 			<div class="group relative size-[7.75rem] shrink-0">
-				<Avatar :src="ctx.instanceIconUrl.value ?? undefined" size="100%" no-shadow />
+				<Avatar
+					:src="ctx.instanceIconUrl.value ?? undefined"
+					size="100%"
+					no-shadow
+					pad-transparent-corners
+				/>
 				<div
 					v-if="ctx.instanceIconUrl.value"
 					class="pointer-events-none absolute right-1.5 top-1.5 opacity-0 transition-opacity group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"
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/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index 79ad760a84..f6f851a76a 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -15,8 +15,11 @@ import { computed, nextTick, ref } from 'vue'
 import { ButtonLink, IconButton } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import { NewModal, Textarea } from '../index'
 
+const debug = useDebugLogger('ShareModal')
+
 const props = defineProps({
 	header: {
 		type: String,
@@ -83,11 +86,11 @@ const show = async (passedContent) => {
 	if (props.link) {
 		url.value = passedContent
 		nextTick(() => {
-			console.log(qrCode.value)
+			debug(qrCode.value)
 			fetch(qrCode.value.getElementsByTagName('canvas')[0].toDataURL('image/png'))
 				.then((res) => res.blob())
 				.then((blob) => {
-					console.log(blob)
+					debug(blob)
 					qrImage.value = blob
 				})
 		})
diff --git a/packages/ui/src/components/project/ProjectList.vue b/packages/ui/src/components/project/ProjectList.vue
index 429f46dbd8..deac6c06f5 100644
--- a/packages/ui/src/components/project/ProjectList.vue
+++ b/packages/ui/src/components/project/ProjectList.vue
@@ -13,7 +13,7 @@
 				:server-region="project.minecraft_server?.region"
 				:server-status-online="!!project.minecraft_java_server?.ping?.data"
 				:server-modpack-content="getServerModpackContent(project, openModpackProject)"
-				:status="showStatus ? project.status : undefined"
+				:status="statusFor(project)"
 				:max-tags="2"
 				:layout="cardLayout"
 				is-server-project
@@ -38,7 +38,7 @@
 				:color="project.color"
 				:environment="project.environment?.[0]"
 				:layout="cardLayout"
-				:status="showStatus ? project.status : undefined"
+				:status="statusFor(project)"
 			>
 				<template v-if="$slots.actions" #actions>
 					<slot name="actions" :project="project" />
@@ -71,7 +71,7 @@ const props = withDefaults(
 		projects: Labrinth.Projects.v3.Project[]
 		layout?: 'list' | 'grid' | 'gallery'
 		linkMode?: ProjectLinkMode
-		showStatus?: boolean
+		showStatus?: boolean | ((project: Labrinth.Projects.v3.Project) => boolean)
 	}>(),
 	{
 		layout: 'list',
@@ -87,6 +87,12 @@ defineSlots<{
 const router = useRouter()
 const cardLayout = computed(() => (props.layout === 'list' ? 'list' : 'grid'))
 
+function statusFor(project: Labrinth.Projects.v3.Project) {
+	const visible =
+		typeof props.showStatus === 'function' ? props.showStatus(project) : !!props.showStatus
+	return visible ? project.status : undefined
+}
+
 function openModpackProject(projectId: string): void {
 	const path = `/project/${projectId}`
 	if (props.linkMode === 'app') {
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index 455746bf68..b692e98d04 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -221,8 +221,10 @@
 				<TagItem
 					v-for="(tag, tagIdx) in getEnvironmentTags(version.environment)"
 					:key="`env-tag-${tagIdx}`"
+					v-tooltip="getFilterTooltip(formatMessage(tag.label))"
 					data-no-row-click
 					class="w-fit max-w-full truncate text-center"
+					:action="() => toggleEnvironmentFilter(version.environment)"
 				>
 					<component :is="tag.icon" />
 					<span class="min-w-0 truncate">{{ formatMessage(tag.label).replace('and', '&') }}</span>
@@ -406,7 +408,9 @@
 								<TagItem
 									v-for="(tag, tagIdx) in getEnvironmentTags(version.environment)"
 									:key="`env-tag-${tagIdx}`"
-									class="text-center"
+									v-tooltip="getFilterTooltip(formatMessage(tag.label))"
+									class="text-center smart-clickable:allow-pointer-events"
+									:action="() => toggleEnvironmentFilter(version.environment)"
 								>
 									<component :is="tag.icon" />
 									{{ formatMessage(tag.label).replace('and', '&') }}
@@ -485,7 +489,7 @@ import { Button } from '#ui/components/base/buttons'
 import { useRelativeTime } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { formatTag } from '../../utils/tag-messages'
-import { getEnvironmentTags } from './settings/environment/environments'
+import { getEnvironmentFilterValue, getEnvironmentTags } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime({ style: 'narrow' })
@@ -653,6 +657,13 @@ function getPlatformTooltip(platform: string): string {
 	return getFilterTooltip(formatTag(formatMessage, platform, 'loader'))
 }
 
+function toggleEnvironmentFilter(environment?: Labrinth.Projects.v3.Environment) {
+	const value = getEnvironmentFilterValue(environment)
+	if (value) {
+		versionFilters.value?.toggleFilter('environment', value)
+	}
+}
+
 function isFileRowVisible(version: VersionTableRow): boolean {
 	return props.showFiles && Array.isArray(version.files) && version.files.length > 0
 }
@@ -683,13 +694,20 @@ const selectedPlatforms: Ref<string[]> = computed(
 	() => versionFilters.value?.selectedPlatforms ?? [],
 )
 const selectedChannels: Ref<string[]> = computed(() => versionFilters.value?.selectedChannels ?? [])
+const selectedEnvironments: Ref<string[]> = computed(
+	() => versionFilters.value?.selectedEnvironments ?? [],
+)
 
 const filteredVersions = computed(() => {
 	return normalizedVersions.value.filter(
 		(version) =>
 			hasAnySelected(version.game_versions, selectedGameVersions.value) &&
 			hasAnySelected(version.loaders, selectedPlatforms.value) &&
-			isAnySelected(version.version_type, selectedChannels.value),
+			isAnySelected(version.version_type, selectedChannels.value) &&
+			isAnySelected(
+				getEnvironmentFilterValue(version.environment) ?? '',
+				selectedEnvironments.value,
+			),
 	)
 })
 
diff --git a/packages/ui/src/components/project/settings/environment/environments.ts b/packages/ui/src/components/project/settings/environment/environments.ts
index 585ee060ef..957e7a44c9 100644
--- a/packages/ui/src/components/project/settings/environment/environments.ts
+++ b/packages/ui/src/components/project/settings/environment/environments.ts
@@ -210,3 +210,34 @@ export function getEnvironmentTags(
 			return [{ label: ENVIRONMENT_TAG_LABELS.notApplicable, icon: null }]
 	}
 }
+
+export type EnvironmentFilterValue = 'client' | 'server' | 'client_and_server' | 'singleplayer'
+
+export const ENVIRONMENT_FILTER_VALUES: EnvironmentFilterValue[] = [
+	'client',
+	'server',
+	'client_and_server',
+	'singleplayer',
+]
+
+export function getEnvironmentFilterValue(
+	environment?: Labrinth.Projects.v3.Environment | null,
+): EnvironmentFilterValue | undefined {
+	switch (environment) {
+		case 'client_only':
+			return 'client'
+		case 'server_only':
+		case 'dedicated_server_only':
+			return 'server'
+		case 'client_and_server':
+		case 'client_only_server_optional':
+		case 'server_only_client_optional':
+		case 'client_or_server':
+		case 'client_or_server_prefers_both':
+			return 'client_and_server'
+		case 'singleplayer_only':
+			return 'singleplayer'
+		default:
+			return undefined
+	}
+}
diff --git a/packages/ui/src/components/project/settings/index.ts b/packages/ui/src/components/project/settings/index.ts
index d538f8adfe..055175de51 100644
--- a/packages/ui/src/components/project/settings/index.ts
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -1,4 +1,9 @@
 export { default as EnvironmentMigration } from './environment/EnvironmentMigration.vue'
-export { ENVIRONMENTS_COPY } from './environment/environments'
+export {
+	ENVIRONMENT_FILTER_VALUES,
+	type EnvironmentFilterValue,
+	ENVIRONMENTS_COPY,
+	getEnvironmentFilterValue,
+} from './environment/environments'
 export { default as EnvironmentSelector } from './environment/EnvironmentSelector.vue'
 export { default as ProjectEnvironmentModal } from './environment/ProjectEnvironmentModal.vue'
diff --git a/packages/ui/src/components/servers/access/AccessTable.vue b/packages/ui/src/components/servers/access/AccessTable.vue
index 6babe5b7ac..5292c58ff3 100644
--- a/packages/ui/src/components/servers/access/AccessTable.vue
+++ b/packages/ui/src/components/servers/access/AccessTable.vue
@@ -287,8 +287,8 @@ import {
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import {
+	type ButtonMenuOption,
 	IconButton,
-	type OverflowMenuOption,
 	TeleportOverflowMenu,
 } from '#ui/components/base/buttons'
 
@@ -599,7 +599,7 @@ function handleRemoveMember(member: ServerAccessMember) {
 	emit('removeMember', member)
 }
 
-function memberActionOptions(member: ServerAccessMember): OverflowMenuOption[] {
+function memberActionOptions(member: ServerAccessMember): ButtonMenuOption[] {
 	return [
 		{
 			id: 'resend-invite',
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index dc5b4f7c01..629da5609a 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -13,7 +13,7 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
-import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { Button, TeleportOverflowMenu } from '#ui/components/base/buttons'
 
 import { useFormatDateTime } from '../../../composables'
@@ -94,8 +94,8 @@ const itemBorderClass = computed(() => {
 	return 'border-transparent'
 })
 
-const overflowMenuOptions = computed<OverflowMenuOption[]>(() => {
-	const options: OverflowMenuOption[] = []
+const overflowMenuOptions = computed<ButtonMenuOption[]>(() => {
+	const options: ButtonMenuOption[] = []
 
 	if (props.showCopyIdAction) {
 		options.push({
diff --git a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
index 381aed3b28..b3d3f41296 100644
--- a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
+++ b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
@@ -85,7 +85,7 @@ import {
 } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { Button, SplitButton } from '#ui/components/base/buttons'
 
 import { useServerPowerAction } from './use-server-power-action'
@@ -113,7 +113,7 @@ const {
 	disabled: computed(() => props.disabled),
 })
 
-const stopMenuOptions = computed<OverflowMenuOption[]>(() => [
+const stopMenuOptions = computed<ButtonMenuOption[]>(() => [
 	{
 		id: 'kill_server',
 		label: 'Kill server',
diff --git a/packages/ui/src/components/skin/CapeButton.vue b/packages/ui/src/components/skin/CapeButton.vue
index e64fd554ff..0e6f5ccd60 100644
--- a/packages/ui/src/components/skin/CapeButton.vue
+++ b/packages/ui/src/components/skin/CapeButton.vue
@@ -21,8 +21,6 @@ const props = withDefaults(
 	},
 )
 
-console.log(props)
-
 const highlighted = computed(() => props.selected ?? props.isEquipped)
 </script>
 
diff --git a/packages/ui/src/components/user/AccountChoiceList.vue b/packages/ui/src/components/user/AccountChoiceList.vue
new file mode 100644
index 0000000000..350080d749
--- /dev/null
+++ b/packages/ui/src/components/user/AccountChoiceList.vue
@@ -0,0 +1,54 @@
+<template>
+	<div class="flex w-full flex-col rounded-2xl border border-solid border-surface-5 bg-surface-4">
+		<button
+			v-for="account in accounts"
+			:key="account.id"
+			type="button"
+			data-button
+			:class="rowClass"
+			@click="emit('select', account)"
+		>
+			<Avatar :src="account.avatarUrl" size="32px" circle />
+			<span class="min-w-0 truncate font-medium text-contrast">{{ account.username }}</span>
+			<UserRoleIcon :role="account.role" class="!size-5" />
+			<RightArrowIcon aria-hidden="true" class="ml-auto h-5 w-5 shrink-0 text-secondary" />
+		</button>
+		<button v-if="addAccountLabel" type="button" data-button :class="rowClass" @click="emit('add')">
+			<span
+				class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-5 text-secondary"
+			>
+				<PlusIcon aria-hidden="true" class="h-5 w-5" />
+			</span>
+			<span class="font-medium text-contrast">{{ addAccountLabel }}</span>
+			<RightArrowIcon aria-hidden="true" class="ml-auto h-5 w-5 shrink-0 text-secondary" />
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { PlusIcon, RightArrowIcon } from '@modrinth/assets'
+
+import Avatar from '../base/Avatar.vue'
+import UserRoleIcon from './UserRoleIcon.vue'
+
+export type AccountChoice = {
+	id: string
+	username: string
+	avatarUrl?: string | null
+	role?: Labrinth.Users.v2.Role | null
+}
+
+defineProps<{
+	accounts: AccountChoice[]
+	addAccountLabel?: string
+}>()
+
+const emit = defineEmits<{
+	select: [account: AccountChoice]
+	add: []
+}>()
+
+const rowClass =
+	'flex w-full !w-full items-center gap-2 border-0 border-t border-solid border-surface-5 bg-surface-4 px-4 py-2 text-left transition-colors first:rounded-t-2xl first:border-t-0 last:rounded-b-2xl hover:bg-surface-5'
+</script>
diff --git a/packages/ui/src/components/user/AccountSwitchOverlay.vue b/packages/ui/src/components/user/AccountSwitchOverlay.vue
new file mode 100644
index 0000000000..69359de753
--- /dev/null
+++ b/packages/ui/src/components/user/AccountSwitchOverlay.vue
@@ -0,0 +1,49 @@
+<template>
+	<Transition name="fade">
+		<div
+			v-if="show"
+			class="account-switch-overlay fixed inset-0 z-[10000] flex items-center justify-center backdrop-blur"
+			role="status"
+		>
+			<span
+				class="flex cursor-default select-none items-center gap-4 text-xl font-semibold text-contrast"
+			>
+				<RefreshCwIcon aria-hidden="true" class="h-6 w-6 animate-spin" />
+				{{ formatMessage(messages.switchingAccounts) }}
+			</span>
+		</div>
+	</Transition>
+</template>
+
+<script setup lang="ts">
+import { RefreshCwIcon } from '@modrinth/assets'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+defineProps<{
+	show: boolean
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	switchingAccounts: {
+		id: 'layout.account-switcher.switching',
+		defaultMessage: 'Switching accounts...',
+	},
+})
+</script>
+
+<style scoped>
+.account-switch-overlay {
+	background-color: color-mix(in srgb, var(--color-bg) 82%, transparent);
+}
+
+.fade-enter-active {
+	transition: 0.25s ease-in-out;
+}
+
+.fade-enter-from {
+	opacity: 0;
+}
+</style>
diff --git a/packages/ui/src/components/user/UserAvatar.vue b/packages/ui/src/components/user/UserAvatar.vue
new file mode 100644
index 0000000000..3c7a52aa14
--- /dev/null
+++ b/packages/ui/src/components/user/UserAvatar.vue
@@ -0,0 +1,101 @@
+<template>
+	<div class="user-avatar relative inline-flex shrink-0" :style="{ '--_size': cssSize }">
+		<div class="flex" :class="{ 'user-avatar-cutout': badge }">
+			<Avatar
+				:src="src"
+				:alt="alt"
+				:size="size"
+				:loading="loading"
+				:tint-by="tintBy"
+				:no-shadow="noShadow"
+				:raised="raised"
+				:class="{ grayscale }"
+				circle
+			/>
+		</div>
+		<span v-if="badge" class="user-avatar-badge" aria-hidden="true">
+			<slot>
+				<span class="block size-full rounded-full bg-brand" />
+			</slot>
+		</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import Avatar from '../base/Avatar.vue'
+
+const props = withDefaults(
+	defineProps<{
+		src?: string | null
+		alt?: string
+		size?: string
+		badge?: boolean
+		grayscale?: boolean
+		loading?: 'eager' | 'lazy'
+		raised?: boolean
+		tintBy?: string | null
+		noShadow?: boolean
+	}>(),
+	{
+		src: null,
+		alt: '',
+		size: '2rem',
+		badge: false,
+		grayscale: false,
+		loading: 'eager',
+		raised: false,
+		tintBy: null,
+		noShadow: true,
+	},
+)
+
+const LEGACY_PRESETS: Record<string, string> = {
+	xxs: '1.25rem',
+	xs: '2.5rem',
+	sm: '3rem',
+	md: '6rem',
+	lg: '9rem',
+}
+
+const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
+</script>
+
+<style lang="scss" scoped>
+.user-avatar {
+	--user-avatar-badge-size: calc(var(--_size) * 11 / 32);
+	--user-avatar-badge-gap: max(2px, calc(var(--_size) * 3 / 32));
+}
+
+.user-avatar-cutout {
+	--cutout: calc(var(--user-avatar-badge-size) / 2 + var(--user-avatar-badge-gap));
+
+	-webkit-mask-image: radial-gradient(
+		circle at calc(100% - var(--user-avatar-badge-size) / 2)
+			calc(100% - var(--user-avatar-badge-size) / 2),
+		transparent var(--cutout),
+		#000 calc(var(--cutout) + 0.5px)
+	);
+	mask-image: radial-gradient(
+		circle at calc(100% - var(--user-avatar-badge-size) / 2)
+			calc(100% - var(--user-avatar-badge-size) / 2),
+		transparent var(--cutout),
+		#000 calc(var(--cutout) + 0.5px)
+	);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
+}
+
+.user-avatar-badge {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	width: var(--user-avatar-badge-size);
+	height: var(--user-avatar-badge-size);
+	pointer-events: none;
+}
+</style>
diff --git a/packages/ui/src/components/user/UserPageHeader.vue b/packages/ui/src/components/user/UserPageHeader.vue
index 3707340d0c..cc253a9063 100644
--- a/packages/ui/src/components/user/UserPageHeader.vue
+++ b/packages/ui/src/components/user/UserPageHeader.vue
@@ -16,7 +16,7 @@
 				:icon="BadgeCheckIcon"
 				:icon-props="{ fill: 'var(--color-brand-highlight)' }"
 				:tooltip="formatMessage(messages.officialAccount)"
-				class="border-brand-highlight bg-brand-highlight text-brand"
+				class="border-brand-highlight bg-brand-highlight !text-brand"
 			>
 				{{ formatMessage(messages.officialAccount) }}
 			</PageHeaderBadgeItem>
@@ -104,7 +104,7 @@ import {
 import { computed } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { Button, ButtonLink, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import PageHeader from '#ui/components/base/page-header/index.vue'
 import PageHeaderMetadata from '#ui/components/base/page-header/metadata/index.vue'
@@ -234,7 +234,7 @@ const formatDateTime = useFormatDateTime({
 const downloadsTooltip = computed(() => formatNumber(props.downloads))
 const joinedTooltip = computed(() => formatDateTime(props.user.created))
 
-const moreActions = computed<OverflowMenuOption[]>(() => [
+const moreActions = computed<ButtonMenuOption[]>(() => [
 	{
 		id: 'manage-projects',
 		label: formatMessage(messages.profileManageProjectsButton),
diff --git a/packages/ui/src/components/user/UserRoleIcon.vue b/packages/ui/src/components/user/UserRoleIcon.vue
new file mode 100644
index 0000000000..ddf0d7ae1c
--- /dev/null
+++ b/packages/ui/src/components/user/UserRoleIcon.vue
@@ -0,0 +1,40 @@
+<template>
+	<ModrinthIcon
+		v-if="role === 'admin'"
+		v-tooltip="formatMessage(messages.modrinthTeamLabel)"
+		role="img"
+		:aria-label="formatMessage(messages.modrinthTeamLabel)"
+		class="size-4 shrink-0 !text-green"
+	/>
+	<ScaleIcon
+		v-else-if="role === 'moderator'"
+		v-tooltip="formatMessage(messages.moderatorLabel)"
+		role="img"
+		:aria-label="formatMessage(messages.moderatorLabel)"
+		class="size-4 shrink-0 !text-orange"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { ModrinthIcon, ScaleIcon } from '@modrinth/assets'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+defineProps<{
+	role?: Labrinth.Users.v2.Role | null
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	modrinthTeamLabel: {
+		id: 'user.role.modrinth-team',
+		defaultMessage: 'Modrinth Team',
+	},
+	moderatorLabel: {
+		id: 'user.role.moderator',
+		defaultMessage: 'Content Moderator',
+	},
+})
+</script>
diff --git a/packages/ui/src/components/user/index.ts b/packages/ui/src/components/user/index.ts
index e7ee497fd8..fcb4f5fefc 100644
--- a/packages/ui/src/components/user/index.ts
+++ b/packages/ui/src/components/user/index.ts
@@ -1,2 +1,7 @@
+export type { AccountChoice } from './AccountChoiceList.vue'
+export { default as AccountChoiceList } from './AccountChoiceList.vue'
+export { default as AccountSwitchOverlay } from './AccountSwitchOverlay.vue'
+export { default as UserAvatar } from './UserAvatar.vue'
 export { default as UserBadges } from './UserBadges.vue'
 export { default as UserPageHeader } from './UserPageHeader.vue'
+export { default as UserRoleIcon } from './UserRoleIcon.vue'
diff --git a/packages/ui/src/components/version/VersionFilterControl.vue b/packages/ui/src/components/version/VersionFilterControl.vue
index 0cc3f82a0e..b5c1bbbe6d 100644
--- a/packages/ui/src/components/version/VersionFilterControl.vue
+++ b/packages/ui/src/components/version/VersionFilterControl.vue
@@ -1,134 +1,99 @@
 <template>
-	<div class="flex flex-col gap-3">
-		<div class="flex flex-wrap items-center gap-2">
-			<MultiSelect
-				v-if="filterOptions.platform.length > 1"
-				:model-value="selectedPlatforms"
-				:options="platformOptions"
-				fit-content
-				:dropdown-min-width="180"
-				trigger-type="base"
-				@update:model-value="updateSelectedPlatforms"
-			>
-				<template #input-content="{ isOpen, openDirection }">
-					<div class="flex items-center gap-2">
-						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-inherit">Platforms</span>
+	<div
+		v-if="visibleDropdowns.length > 0"
+		class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5"
+	>
+		<FilterIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
+		<MultiSelect
+			v-for="dropdown in visibleDropdowns"
+			:key="dropdown.key"
+			class="min-w-0 max-w-full"
+			:model-value="selectedFilters[dropdown.key]"
+			:options="dropdown.options"
+			:searchable="dropdown.searchable"
+			:search-placeholder="dropdown.searchPlaceholder"
+			:max-height="500"
+			:clearable="false"
+			:show-chevron="false"
+			fit-content
+			trigger-type="base"
+			trigger-size="lg"
+			:trigger-class="getDropdownTriggerClass(dropdown.key)"
+			:dropdown-min-width="dropdown.dropdownMinWidth"
+			checkbox-position="right"
+			show-selection-actions
+			@update:model-value="(values) => updateSelected(dropdown.key, values)"
+		>
+			<template #input-content="{ isOpen, openDirection }">
+				<div class="flex min-h-8 min-w-0 max-w-full items-center gap-2 sm:max-w-80">
+					<span class="min-w-0 flex-1 truncate">
+						<template v-if="selectedFilters[dropdown.key].length > 0">
+							<span class="font-medium">{{ dropdown.label }}:</span>
+							<span class="ml-1 font-semibold text-contrast">{{
+								getDropdownSummary(dropdown)
+							}}</span>
+						</template>
+						<span v-else class="font-semibold text-inherit">{{ dropdown.label }}</span>
+					</span>
+					<div class="flex shrink-0 items-center gap-1.5">
+						<button
+							v-if="selectedFilters[dropdown.key].length > 0"
+							type="button"
+							class="flex cursor-pointer items-center justify-center rounded border-none bg-transparent p-0.5 text-secondary transition-colors hover:text-contrast"
+							:aria-label="formatMessage(messages.clearNamedFilter, { name: dropdown.label })"
+							@click.stop="clearCategory(dropdown.key)"
+						>
+							<XIcon class="size-4 text-primary" />
+						</button>
+						<div
+							v-if="selectedFilters[dropdown.key].length > 0"
+							class="h-5 w-[1px] shrink-0 bg-surface-5"
+						></div>
 						<ChevronLeftIcon
-							class="h-5 w-5 text-secondary transition-transform duration-150"
+							class="size-5 shrink-0 text-secondary transition-transform duration-150"
 							:class="
 								isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'
 							"
 						/>
 					</div>
-				</template>
-			</MultiSelect>
-			<MultiSelect
-				v-if="availableGameVersions.length > 1"
-				:model-value="selectedGameVersions"
-				:options="gameVersionOptions"
-				searchable
-				search-placeholder="Search..."
-				fit-content
-				:dropdown-min-width="240"
-				trigger-type="base"
-				@update:model-value="updateSelectedGameVersions"
-			>
-				<template #input-content="{ isOpen, openDirection }">
-					<div class="flex items-center gap-2">
-						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-inherit">Game versions</span>
-						<ChevronLeftIcon
-							class="h-5 w-5 text-secondary transition-transform duration-150"
-							:class="
-								isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'
-							"
-						/>
-					</div>
-				</template>
-				<template v-if="hasAnyNonReleaseGameVersions" #bottom>
-					<div class="border-0 border-t border-solid border-t-surface-5 px-3 py-3">
-						<Checkbox
-							:model-value="showSnapshots"
-							class="mx-1"
-							:label="`Show all versions`"
-							@update:model-value="updateShowSnapshots"
-						/>
-					</div>
-				</template>
-			</MultiSelect>
-			<MultiSelect
-				v-if="filterOptions.channel.length > 1"
-				:model-value="selectedChannels"
-				:options="channelOptions"
-				fit-content
-				:dropdown-min-width="180"
-				trigger-type="base"
-				@update:model-value="updateSelectedChannels"
-			>
-				<template #input-content="{ isOpen, openDirection }">
-					<div class="flex items-center gap-2">
-						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-inherit">Channels</span>
-						<ChevronLeftIcon
-							class="h-5 w-5 text-secondary transition-transform duration-150"
-							:class="
-								isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'
-							"
-						/>
-					</div>
-				</template>
-			</MultiSelect>
-		</div>
-		<div class="flex flex-wrap items-center gap-1 empty:hidden">
-			<TagItem
-				v-if="selectedChannels.length + selectedGameVersions.length + selectedPlatforms.length > 1"
-				class="transition-transform active:scale-[0.95]"
-				:action="clearFilters"
-			>
-				<XCircleIcon />
-				Clear all filters
-			</TagItem>
-			<TagItem
-				v-for="channel in selectedChannels"
-				:key="`remove-filter-${channel}`"
-				:style="`--_color: var(--color-${channel === 'alpha' ? 'red' : channel === 'beta' ? 'orange' : 'green'});--_bg-color: var(--color-${channel === 'alpha' ? 'red' : channel === 'beta' ? 'orange' : 'green'}-highlight)`"
-				:action="() => toggleFilter('channel', channel)"
-			>
-				<XIcon />
-				{{ channel.slice(0, 1).toUpperCase() + channel.slice(1) }}
-			</TagItem>
-			<TagItem
-				v-for="version in selectedGameVersions"
-				:key="`remove-filter-${version}`"
-				:action="() => toggleFilter('gameVersion', version)"
-			>
-				<XIcon />
-				{{ version }}
-			</TagItem>
-			<TagItem
-				v-for="platform in selectedPlatforms"
-				:key="`remove-filter-${platform}`"
-				:style="`--_color: var(--color-platform-${platform})`"
-				:action="() => toggleFilter('platform', platform)"
-			>
-				<XIcon />
-				<FormattedTag :tag="platform" enforce-type="loader" />
-			</TagItem>
-		</div>
+				</div>
+			</template>
+			<template v-if="dropdown.key === 'gameVersion' && hasAnyNonReleaseGameVersions" #bottom>
+				<div class="border-0 border-t border-solid border-t-surface-5 px-3 py-3">
+					<Checkbox
+						:model-value="showSnapshots"
+						:label="formatMessage(commonMessages.showAllVersionsButton)"
+						@update:model-value="updateShowSnapshots"
+					/>
+				</div>
+			</template>
+		</MultiSelect>
+		<Button v-if="hasSelectedFilters" type="quiet" native-type="button" @click="clearAllFilters">
+			{{ formatMessage(commonMessages.clearButton) }}
+		</Button>
 	</div>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ChevronLeftIcon, FilterIcon, XCircleIcon, XIcon } from '@modrinth/assets'
-import type { MultiSelectOption } from '@modrinth/ui'
-import { Checkbox, formatLoader, FormattedTag, MultiSelect, TagItem, useVIntl } from '@modrinth/ui'
+import { ChevronLeftIcon, FilterIcon, XIcon } from '@modrinth/assets'
 import type { GameVersionTag } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 import type { LocationQueryValue } from 'vue-router'
 import { useRoute } from 'vue-router'
 
+import { Button } from '#ui/components/base/buttons'
+import Checkbox from '#ui/components/base/Checkbox.vue'
+import MultiSelect, { type MultiSelectOption } from '#ui/components/base/MultiSelect.vue'
+import {
+	ENVIRONMENT_FILTER_VALUES,
+	type EnvironmentFilterValue,
+	getEnvironmentFilterValue,
+} from '#ui/components/project/settings/environment/environments'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages, commonProjectSettingsMessages } from '#ui/utils/common-messages'
+import { formatLoader } from '#ui/utils/tag-messages'
+
 const props = defineProps<{
 	versions: Labrinth.Versions.v3.Version[]
 	gameVersions: GameVersionTag[]
@@ -138,15 +103,75 @@ const props = defineProps<{
 const emit = defineEmits(['update:query'])
 
 const { formatMessage } = useVIntl()
-
-const allChannels = ref(['release', 'beta', 'alpha'])
-
 const route = useRoute()
 
+const CHANNEL_ORDER = ['release', 'beta', 'alpha'] as const
+
+const messages = defineMessages({
+	channel: {
+		id: 'project.versions.filter.channel',
+		defaultMessage: 'Channel',
+	},
+	clientSideOnly: {
+		id: 'project.settings.environment.client_only.title',
+		defaultMessage: 'Client-side only',
+	},
+	serverSideOnly: {
+		id: 'project.settings.environment.server_only.title',
+		defaultMessage: 'Server-side only',
+	},
+	clientAndServer: {
+		id: 'project.settings.environment.client_and_server.title',
+		defaultMessage: 'Client and server',
+	},
+	singleplayerOnly: {
+		id: 'project.settings.environment.singleplayer.title',
+		defaultMessage: 'Singleplayer only',
+	},
+	clearNamedFilter: {
+		id: 'filter-bar.clear-named-filter',
+		defaultMessage: 'Clear {name} filter',
+	},
+	selectedCount: {
+		id: 'project.versions.filter.selected-count',
+		defaultMessage: '{count, number} selected',
+	},
+})
+
+const filterTriggerClass =
+	'!h-[34px] !rounded-xl !border !border-solid !border-surface-5 !bg-transparent !px-3 !text-sm !font-medium !text-primary !shadow-[0_1px_1.5px_rgba(0,0,0,0.15)] transition-all duration-100 active:scale-[0.97] hover:!bg-surface-3 focus-visible:!outline-none focus-visible:!ring-4 focus-visible:!ring-brand-shadow [&>svg]:!size-5'
+const filterPreviewTriggerClass =
+	'!h-[34px] !rounded-xl !border !border-solid !border-brand !bg-brand-highlight !px-3 !text-sm !font-medium !text-brand !shadow-[0_1px_1.5px_rgba(0,0,0,0.15)] transition-all duration-100 active:scale-[0.97] hover:!bg-brand-highlight focus-visible:!outline-none focus-visible:!ring-4 focus-visible:!ring-brand-shadow [&>svg]:!size-5 [&>svg]:!text-brand'
+
+type FilterType = 'channel' | 'gameVersion' | 'platform' | 'environment'
+type Filter = string
+
+type FilterDropdown = {
+	key: FilterType
+	label: string
+	options: MultiSelectOption<string>[]
+	searchable?: boolean
+	searchPlaceholder?: string
+	dropdownMinWidth: number
+}
+
 const showSnapshots = ref(false)
 
-type FilterType = 'channel' | 'gameVersion' | 'platform'
-type Filter = string
+const selectedFilters = ref<Record<FilterType, string[]>>({
+	channel: route.query.c ? getArrayOrString(route.query.c) : [],
+	gameVersion: route.query.g ? getArrayOrString(route.query.g) : [],
+	platform: route.query.l ? getArrayOrString(route.query.l) : [],
+	environment: route.query.e ? getArrayOrString(route.query.e) : [],
+})
+
+const selectedChannels = computed(() => selectedFilters.value.channel)
+const selectedGameVersions = computed(() => selectedFilters.value.gameVersion)
+const selectedPlatforms = computed(() => selectedFilters.value.platform)
+const selectedEnvironments = computed(() => selectedFilters.value.environment)
+
+const hasSelectedFilters = computed(() =>
+	Object.values(selectedFilters.value).some((values) => values.length > 0),
+)
 
 const gameVersionTags = computed(() => new Map(props.gameVersions.map((x) => [x.version, x])))
 
@@ -176,91 +201,162 @@ const hasAnyNonReleaseGameVersions = computed(() =>
 	availableGameVersions.value.some((version) => !isReleaseGameVersion(version)),
 )
 
-const filterOptions = computed(() => {
-	const filters: Record<FilterType, Filter[]> = {
-		channel: [],
-		gameVersion: [],
-		platform: [],
+const availableChannels = computed(() => {
+	const channelSet = new Set<Filter>()
+	for (const version of props.versions) {
+		channelSet.add(version.version_type)
 	}
 
-	const platformSet = new Set<Filter>()
-	const channelSet = new Set<Filter>()
+	const knownChannels = CHANNEL_ORDER.filter((channel) => channelSet.has(channel))
+	const unknownChannels = [...channelSet].filter(
+		(channel) => !(CHANNEL_ORDER as readonly string[]).includes(channel),
+	)
+	return [...knownChannels, ...unknownChannels]
+})
 
+const availablePlatforms = computed(() => {
+	const platformSet = new Set<Filter>()
 	for (const version of props.versions) {
 		for (const loader of Array.isArray(version.loaders) ? version.loaders : []) {
 			platformSet.add(loader)
 		}
-		channelSet.add(version.version_type)
 	}
-
-	if (channelSet.size > 0) {
-		filters.channel = Array.from(channelSet) as Filter[]
-		filters.channel.sort((a, b) => allChannels.value.indexOf(a) - allChannels.value.indexOf(b))
-	}
-	if (availableGameVersions.value.length > 0) {
-		filters.gameVersion = availableGameVersions.value.filter((version) =>
-			showSnapshots.value || !hasAnyReleaseGameVersions.value
-				? true
-				: isReleaseGameVersion(version),
-		)
-	}
-	if (platformSet.size > 0) {
-		filters.platform = Array.from(platformSet) as Filter[]
-	}
-
-	return filters
+	return Array.from(platformSet)
 })
 
-const gameVersionOptions = computed<MultiSelectOption<string>[]>(() =>
-	filterOptions.value.gameVersion.map((version) => ({
-		value: version,
-		label: version,
-	})),
+const availableEnvironments = computed(() => {
+	const environmentSet = new Set<EnvironmentFilterValue>()
+	for (const version of props.versions) {
+		const environment = getEnvironmentFilterValue(version.environment)
+		if (environment) {
+			environmentSet.add(environment)
+		}
+	}
+	return ENVIRONMENT_FILTER_VALUES.filter((environment) => environmentSet.has(environment))
+})
+
+const visibleGameVersions = computed(() =>
+	availableGameVersions.value.filter(
+		(version) =>
+			showSnapshots.value || !hasAnyReleaseGameVersions.value || isReleaseGameVersion(version),
+	),
 )
 
-const channelOptions = computed<MultiSelectOption<string>[]>(() =>
-	filterOptions.value.channel.map((channel) => ({
-		value: channel,
-		label: getChannelLabel(channel),
-	})),
-)
-
-const platformOptions = computed<MultiSelectOption<string>[]>(() =>
-	filterOptions.value.platform.map((platform) => ({
-		value: platform,
-		label: formatLoader(formatMessage, platform),
-	})),
-)
-
-const selectedChannels = ref<string[]>([])
-const selectedGameVersions = ref<string[]>([])
-const selectedPlatforms = ref<string[]>([])
-
-selectedChannels.value = route.query.c ? getArrayOrString(route.query.c) : []
-selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : []
-selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : []
-
 if (selectedGameVersions.value.some((version) => !isReleaseGameVersion(version))) {
 	showSnapshots.value = true
 }
 
-function selectedFiltersOfType(type: FilterType) {
-	if (type === 'channel') {
-		return selectedChannels
-	} else if (type === 'gameVersion') {
-		return selectedGameVersions
-	} else {
-		return selectedPlatforms
+const visibleDropdowns = computed<FilterDropdown[]>(() => {
+	const dropdowns: FilterDropdown[] = []
+
+	if (shouldShowCategory('channel', availableChannels.value)) {
+		dropdowns.push({
+			key: 'channel',
+			label: formatMessage(messages.channel),
+			dropdownMinWidth: 180,
+			options: availableChannels.value.map((channel) => ({
+				value: channel,
+				label: getChannelLabel(channel),
+			})),
+		})
 	}
+
+	if (shouldShowCategory('gameVersion', availableGameVersions.value)) {
+		dropdowns.push({
+			key: 'gameVersion',
+			label: formatMessage(commonMessages.gameVersionLabel),
+			searchable: true,
+			searchPlaceholder: formatMessage(commonMessages.searchVersionPlaceholder),
+			dropdownMinWidth: 240,
+			options: visibleGameVersions.value.map((version) => ({
+				value: version,
+				label: version,
+			})),
+		})
+	}
+
+	if (shouldShowCategory('platform', availablePlatforms.value)) {
+		dropdowns.push({
+			key: 'platform',
+			label: formatMessage(commonMessages.platformLabel),
+			dropdownMinWidth: 180,
+			options: availablePlatforms.value.map((platform) => ({
+				value: platform,
+				label: formatLoader(formatMessage, platform),
+			})),
+		})
+	}
+
+	if (shouldShowCategory('environment', availableEnvironments.value)) {
+		dropdowns.push({
+			key: 'environment',
+			label: formatMessage(commonProjectSettingsMessages.environment),
+			dropdownMinWidth: 220,
+			options: availableEnvironments.value.map((environment) => ({
+				value: environment,
+				label: getEnvironmentFilterLabel(environment),
+			})),
+		})
+	}
+
+	return dropdowns
+})
+
+function shouldShowCategory(type: FilterType, options: string[]) {
+	return options.length > 1 || (selectedFilters.value[type]?.length ?? 0) > 0
+}
+
+function getDropdownTriggerClass(type: FilterType) {
+	return selectedFilters.value[type].length > 0 ? filterPreviewTriggerClass : filterTriggerClass
+}
+
+function getDropdownSummary(dropdown: FilterDropdown) {
+	const selected = selectedFilters.value[dropdown.key]
+	if (selected.length === 0) {
+		return ''
+	}
+	if (selected.length === 1) {
+		return dropdown.options.find((option) => option.value === selected[0])?.label ?? selected[0]
+	}
+	return formatMessage(messages.selectedCount, { count: selected.length })
+}
+
+function updateSelected(type: FilterType, values: string[]) {
+	selectedFilters.value = {
+		...selectedFilters.value,
+		[type]: values,
+	}
+	updateFilters()
+}
+
+function clearCategory(type: FilterType) {
+	updateSelected(type, [])
+}
+
+function clearAllFilters() {
+	selectedFilters.value = {
+		channel: [],
+		gameVersion: [],
+		platform: [],
+		environment: [],
+	}
+	updateFilters()
+}
+
+function selectedFiltersOfType(type: FilterType) {
+	return selectedFilters.value[type] ?? []
 }
 
 function toggleFilters(type: FilterType, filters: Filter[]) {
 	const selected = selectedFiltersOfType(type)
-	const allSelected = filters.every((filter) => selected.value.includes(filter))
+	const allSelected = filters.every((filter) => selected.includes(filter))
 
-	selected.value = allSelected
-		? selected.value.filter((x) => !filters.includes(x))
-		: [...selected.value, ...filters.filter((filter) => !selected.value.includes(filter))]
+	selectedFilters.value = {
+		...selectedFilters.value,
+		[type]: allSelected
+			? selected.filter((x) => !filters.includes(x))
+			: [...selected, ...filters.filter((filter) => !selected.includes(filter))],
+	}
 
 	updateFilters()
 }
@@ -268,29 +364,17 @@ function toggleFilters(type: FilterType, filters: Filter[]) {
 function toggleFilter(type: FilterType, filter: Filter) {
 	const selected = selectedFiltersOfType(type)
 
-	selected.value = selected.value.includes(filter)
-		? selected.value.filter((x) => x !== filter)
-		: [...selected.value, filter]
+	selectedFilters.value = {
+		...selectedFilters.value,
+		[type]: selected.includes(filter)
+			? selected.filter((x) => x !== filter)
+			: [...selected, filter],
+	}
 
 	updateFilters()
 }
 
-function updateSelectedGameVersions(versions: string[]) {
-	selectedGameVersions.value = versions
-	updateFilters()
-}
-
-function updateSelectedChannels(channels: string[]) {
-	selectedChannels.value = channels
-	updateFilters()
-}
-
-function updateSelectedPlatforms(platforms: string[]) {
-	selectedPlatforms.value = platforms
-	updateFilters()
-}
-
-function updateShowSnapshots(value: boolean, _event?: MouseEvent) {
+function updateShowSnapshots(value: boolean) {
 	showSnapshots.value = value
 
 	if (value || !hasAnyReleaseGameVersions.value) {
@@ -302,24 +386,20 @@ function updateShowSnapshots(value: boolean, _event?: MouseEvent) {
 	)
 
 	if (selectedReleaseGameVersions.length !== selectedGameVersions.value.length) {
-		selectedGameVersions.value = selectedReleaseGameVersions
+		selectedFilters.value = {
+			...selectedFilters.value,
+			gameVersion: selectedReleaseGameVersions,
+		}
 		updateFilters()
 	}
 }
 
-function clearFilters() {
-	selectedChannels.value = []
-	selectedGameVersions.value = []
-	selectedPlatforms.value = []
-
-	updateFilters()
-}
-
 function updateFilters() {
 	emit('update:query', {
 		c: selectedChannels.value,
 		g: selectedGameVersions.value,
 		l: selectedPlatforms.value,
+		e: selectedEnvironments.value,
 		page: undefined,
 	})
 }
@@ -330,6 +410,7 @@ defineExpose({
 	selectedChannels,
 	selectedGameVersions,
 	selectedPlatforms,
+	selectedEnvironments,
 })
 
 function getArrayOrString(x: LocationQueryValue | LocationQueryValue[]): string[] {
@@ -344,7 +425,29 @@ function getArrayOrString(x: LocationQueryValue | LocationQueryValue[]): string[
 }
 
 function getChannelLabel(channel: string) {
-	return channel === 'release' ? 'Release' : channel === 'beta' ? 'Beta' : 'Alpha'
+	if (channel === 'release') {
+		return formatMessage(commonMessages.release)
+	}
+	if (channel === 'beta') {
+		return formatMessage(commonMessages.beta)
+	}
+	if (channel === 'alpha') {
+		return formatMessage(commonMessages.alpha)
+	}
+	return channel.slice(0, 1).toUpperCase() + channel.slice(1)
+}
+
+function getEnvironmentFilterLabel(environment: EnvironmentFilterValue) {
+	switch (environment) {
+		case 'client':
+			return formatMessage(messages.clientSideOnly)
+		case 'server':
+			return formatMessage(messages.serverSideOnly)
+		case 'client_and_server':
+			return formatMessage(messages.clientAndServer)
+		case 'singleplayer':
+			return formatMessage(messages.singleplayerOnly)
+	}
 }
 
 function isReleaseGameVersion(version: string) {
diff --git a/packages/ui/src/composables/debug-logger.ts b/packages/ui/src/composables/debug-logger.ts
index 776e879400..944b9d415b 100644
--- a/packages/ui/src/composables/debug-logger.ts
+++ b/packages/ui/src/composables/debug-logger.ts
@@ -18,7 +18,11 @@ function getCallerLocation(): string {
 	}
 }
 
+const noop = () => {}
+
 export function useDebugLogger(namespace: string) {
+	if (process.env.NODE_ENV === 'production') return noop
+
 	// eslint-disable-next-line
 	return (...args: any[]) => {
 		const location = getCallerLocation()
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/composables/skin-rendering/use-skin-preview-animation.ts b/packages/ui/src/composables/skin-rendering/use-skin-preview-animation.ts
index 981f15c747..01d87f3a88 100644
--- a/packages/ui/src/composables/skin-rendering/use-skin-preview-animation.ts
+++ b/packages/ui/src/composables/skin-rendering/use-skin-preview-animation.ts
@@ -2,8 +2,11 @@ import { useRenderLoop } from '@tresjs/core'
 import * as THREE from 'three'
 import { computed, type ComputedRef, type Ref, ref, watch } from 'vue'
 
+import { useDebugLogger } from '../debug-logger'
 import type { SkinPreviewAnimationConfig } from './types'
 
+const debug = useDebugLogger('SkinPreviewAnimation')
+
 type AnimationFinishedListener = (
 	event: THREE.AnimationMixerEventMap['finished'] & {
 		readonly type: 'finished'
@@ -103,7 +106,7 @@ export function useSkinPreviewAnimation(
 		const action = actions.value[name]
 
 		if (currentAnimation.value === name && action.isRunning() && name !== baseAnimation.value) {
-			console.log(`Animation "${name}" is already running, ignoring request`)
+			debug(`Animation "${name}" is already running, ignoring request`)
 			return false
 		}
 
@@ -196,7 +199,7 @@ export function useSkinPreviewAnimation(
 		const action = actions.value[name]
 
 		if (currentAnimation.value === name && action.isRunning()) {
-			console.log(`Animation "${name}" is already running, ignoring request`)
+			debug(`Animation "${name}" is already running, ignoring request`)
 			return
 		}
 
diff --git a/packages/ui/src/composables/skin-rendering/use-skin-preview-fit.ts b/packages/ui/src/composables/skin-rendering/use-skin-preview-fit.ts
index 7eaa9b3150..58a38421bf 100644
--- a/packages/ui/src/composables/skin-rendering/use-skin-preview-fit.ts
+++ b/packages/ui/src/composables/skin-rendering/use-skin-preview-fit.ts
@@ -10,6 +10,7 @@ import {
 	watch,
 } from 'vue'
 
+import { useDebugLogger } from '../debug-logger'
 import type {
 	SkinPreviewBounds,
 	SkinPreviewFitLock,
@@ -18,6 +19,8 @@ import type {
 	SkinPreviewTuple,
 } from './types'
 
+const debug = useDebugLogger('SkinPreviewFit')
+
 const FRAMING_PRESETS = {
 	page: {
 		fov: 35,
@@ -456,7 +459,7 @@ export function useSkinPreviewFit({
 
 		entries.push(snapshot)
 		if (entries.length > 100) entries.splice(0, entries.length - 100)
-		console.log('[SkinPreviewDebug]', snapshot)
+		debug(snapshot)
 	}
 
 	function queueDebugSnapshot(reason: string) {
diff --git a/packages/ui/src/composables/stripe.ts b/packages/ui/src/composables/stripe.ts
index 837122c23e..00f56aa3dc 100644
--- a/packages/ui/src/composables/stripe.ts
+++ b/packages/ui/src/composables/stripe.ts
@@ -6,6 +6,7 @@ import { computed, type Ref, ref } from 'vue'
 
 import type { ServerBillingInterval } from '../components/billing/ModrinthServersPurchaseModal.vue'
 import { getPriceForInterval } from '../utils/product-utils'
+import { useDebugLogger } from './debug-logger'
 
 // export type CreateElements = (
 //   paymentMethods: Stripe.PaymentMethod[],
@@ -35,6 +36,8 @@ export const useStripe = (
 	onError: (err: Error) => void,
 	affiliateCode?: Ref<string | null>,
 ) => {
+	const debug = useDebugLogger('Stripe')
+
 	const stripe = ref<StripeJs | null>(null)
 
 	let elements: StripeElements | undefined = undefined
@@ -188,7 +191,7 @@ export const useStripe = (
 			}
 		} catch (err) {
 			loadingFailed.value = String(err)
-			console.log(err)
+			console.error(err)
 		}
 	}
 
@@ -241,7 +244,7 @@ export const useStripe = (
 				total.value = result.total
 				noPaymentRequired.value = false
 
-				console.log(
+				debug(
 					`${paymentIntentId.value ? 'Updated' : 'Created'} payment intent: ${interval.value} for ${result.total}`,
 				)
 			}
@@ -392,8 +395,8 @@ export const useStripe = (
 	}
 
 	async function reloadPaymentIntent() {
-		console.log('selected:', selectedPaymentMethod.value)
-		console.log('token:', confirmationToken.value)
+		debug('selected:', selectedPaymentMethod.value)
+		debug('token:', confirmationToken.value)
 		if (selectedPaymentMethod.value) {
 			await refreshPaymentIntent(selectedPaymentMethod.value.id, false)
 		} else if (confirmationToken.value) {
diff --git a/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts
index 69a404bb83..dae2f52a7d 100644
--- a/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts
+++ b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts
@@ -25,6 +25,7 @@ export const Interactive: StoryObj = {
 				v-model="currentTheme"
 				:theme-options="themeOptions"
 				system-theme-color="dark"
+				preferred-dark-theme="oled"
 			/>
 		`,
 	}),
diff --git a/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue
index 639dc0df29..d47562b169 100644
--- a/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue
+++ b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue
@@ -5,11 +5,12 @@ import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 const { formatMessage } = useVIntl()
 
-const { ariaLabel, modelValue, themeOptions, systemThemeColor } = defineProps<{
+const { ariaLabel, modelValue, themeOptions, systemThemeColor, preferredDarkTheme } = defineProps<{
 	ariaLabel: string
 	modelValue: T
 	themeOptions: readonly T[]
 	systemThemeColor: T
+	preferredDarkTheme: T
 }>()
 
 const emit = defineEmits<{
@@ -94,7 +95,7 @@ function getPreviewClass(option: T): string {
 					aria-hidden="true"
 				/>
 				<MoonIcon
-					v-else-if="'dark' === option"
+					v-else-if="option === preferredDarkTheme"
 					v-tooltip="formatMessage(themeTooltips.preferredDark)"
 					class="theme-icon shrink-0"
 					aria-hidden="true"
diff --git a/packages/ui/src/layouts/shared/appearance-settings/layout.vue b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
index b3415b19c6..7c9856509d 100644
--- a/packages/ui/src/layouts/shared/appearance-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
@@ -15,6 +15,7 @@ const theme = appearance.theme
 const currentTheme = theme.current
 const themeOptions = theme.options
 const systemTheme = theme.system
+const preferredDarkTheme = theme.preferredDark
 const syncAcrossDevices = theme.syncAcrossDevices.value
 const syncDisabled = theme.syncAcrossDevices.disabled
 const advancedRendering = appearance.advancedRendering.value
@@ -46,6 +47,7 @@ const sidebarPreferenceValues = sidebarPreferences?.value
 				:model-value="currentTheme"
 				:theme-options="themeOptions"
 				:system-theme-color="systemTheme"
+				:preferred-dark-theme="preferredDarkTheme"
 				@update:model-value="theme.update"
 			/>
 
diff --git a/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts b/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
index c0ddd9e9e7..f8df437da4 100644
--- a/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
+++ b/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
@@ -25,6 +25,7 @@ interface ThemeSettings {
 	current: AppearanceRef<AppearanceThemeSelection>
 	options: AppearanceRef<readonly AppearanceThemeSelection[]>
 	system: AppearanceRef<AppearanceTheme>
+	preferredDark: AppearanceRef<AppearanceTheme>
 	update: AppearanceSetter<AppearanceThemeSelection>
 	syncAcrossDevices: AppearanceSetting<boolean>
 }
@@ -54,6 +55,7 @@ export interface AppearanceSettingsProviderOptions {
 		current: AppearanceRef<AppearanceThemeSelection>
 		options: AppearanceRef<readonly AppearanceThemeSelection[]>
 		system: AppearanceRef<AppearanceTheme>
+		preferredDark: AppearanceRef<AppearanceTheme>
 		set: AppearanceSetter<AppearanceThemeSelection>
 		syncAcrossDevices: WritableAppearanceSetting<boolean>
 		syncDisabled: AppearanceRef<boolean>
@@ -197,6 +199,7 @@ export function provideAppearanceSettings(
 			current: options.theme.current,
 			options: options.theme.options,
 			system: options.theme.system,
+			preferredDark: options.theme.preferredDark,
 			update: updateTheme,
 			syncAcrossDevices: {
 				value: options.theme.syncAcrossDevices.value,
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
index 94a7de5f3a..1099fe73a2 100644
--- a/packages/ui/src/layouts/shared/browse-tab/header.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -51,6 +51,8 @@ const iconSrc = computed(() => {
 	return fetchedIcon.value ?? installContext.value?.iconSrc ?? null
 })
 
+const isInstanceIcon = computed(() => !installContext.value?.serverId)
+
 const metadataItems = computed(() => {
 	const context = installContext.value
 	if (!context) return []
@@ -161,6 +163,7 @@ async function handleSelectedProjectsLeaveResult(
 					:alt="installContext.name"
 					size="48px"
 					class="shrink-0"
+					:pad-transparent-corners="isInstanceIcon"
 				/>
 			</template>
 
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/components/ContentCardItem.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
index 899e526d95..e707dc318c 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
@@ -17,7 +17,7 @@ import type { RouteLocationRaw } from 'vue-router'
 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
-import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import ProgressSpinner from '#ui/components/base/ProgressSpinner.vue'
@@ -67,7 +67,7 @@ interface Props {
 	isClientOnly?: boolean
 	clientWarning?: ClientWarningType | null
 	hideSwitchVersion?: boolean
-	overflowOptions?: OverflowMenuOption[]
+	overflowOptions?: ButtonMenuOption[]
 	disabled?: boolean
 	disabledTooltip?: string | null
 	toggleDisabled?: boolean
diff --git a/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
index 606c1f0507..47562c1eda 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
@@ -14,7 +14,7 @@ import { computed, nextTick, ref, watchSyncEffect } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
-import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { ButtonLink } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import FilterPills from '#ui/components/base/FilterPills.vue'
@@ -44,7 +44,7 @@ interface Props {
 	enableToggle?: boolean
 	actionDisabled?: boolean
 	actionDisabledTooltip?: string | null
-	getOverflowOptions?: (item: ContentItem) => OverflowMenuOption[]
+	getOverflowOptions?: (item: ContentItem) => ButtonMenuOption[]
 	switchVersion?: (item: ContentItem) => void
 	showEnvironmentWarnings?: boolean
 }
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index 89cdb4afac..345902ebd1 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -109,7 +109,12 @@
 						class="flex min-w-0 cursor-pointer items-center gap-2.5 overflow-hidden border-0 bg-transparent p-0 text-left"
 						@click="emit('navigate', inst)"
 					>
-						<Avatar :src="inst.iconUrl ?? undefined" size="2rem" rounded="md" />
+						<Avatar
+							:src="inst.iconUrl ?? undefined"
+							size="2rem"
+							rounded="md"
+							pad-transparent-corners
+						/>
 						<span class="truncate font-semibold text-contrast hover:underline">{{
 							inst.name
 						}}</span>
@@ -145,7 +150,12 @@
 		<div v-else class="flex flex-col gap-6 p-6">
 			<div class="flex items-center gap-2.5">
 				<div class="group relative size-[7.75rem] shrink-0">
-					<Avatar :src="iconPreviewUrl ?? undefined" size="100%" no-shadow />
+					<Avatar
+						:src="iconPreviewUrl ?? undefined"
+						size="100%"
+						no-shadow
+						pad-transparent-corners
+					/>
 					<div
 						v-if="iconPreviewUrl"
 						class="pointer-events-none absolute right-1.5 top-1.5 opacity-0 transition-opacity group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"
diff --git a/packages/ui/src/layouts/shared/content-tab/composables/use-content-metadata-filters.ts b/packages/ui/src/layouts/shared/content-tab/composables/use-content-metadata-filters.ts
index f26981d2d8..d05eb079b8 100644
--- a/packages/ui/src/layouts/shared/content-tab/composables/use-content-metadata-filters.ts
+++ b/packages/ui/src/layouts/shared/content-tab/composables/use-content-metadata-filters.ts
@@ -6,6 +6,10 @@ import type {
 	DropdownFilterBarCategory,
 	DropdownFilterBarOption,
 } from '#ui/components/base/DropdownFilterBar.vue'
+import {
+	type EnvironmentFilterValue,
+	getEnvironmentFilterValue,
+} from '#ui/components/project/settings/environment/environments'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 import type { ContentItem } from '../types'
@@ -58,30 +62,6 @@ const openSourceLicenseIds = new Set([
 	'Zlib',
 ])
 
-type EnvironmentFilterValue = 'client' | 'server' | 'client_and_server' | 'singleplayer'
-
-function getEnvironmentFilterValue(
-	environment?: ContentItem['environment'],
-): EnvironmentFilterValue | undefined {
-	switch (environment) {
-		case 'client_only':
-			return 'client'
-		case 'server_only':
-		case 'dedicated_server_only':
-			return 'server'
-		case 'client_and_server':
-		case 'client_only_server_optional':
-		case 'server_only_client_optional':
-		case 'client_or_server':
-		case 'client_or_server_prefers_both':
-			return 'client_and_server'
-		case 'singleplayer_only':
-			return 'singleplayer'
-		default:
-			return undefined
-	}
-}
-
 const messages = defineMessages({
 	author: {
 		id: 'content.metadata-filter.author',
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index 6e66501040..dc674e51ae 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -23,7 +23,7 @@ import { useSessionStorage } from '@vueuse/core'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import { Button, type OverflowMenuOption, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import { Button, type ButtonMenuOption, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import DropdownFilterBar from '#ui/components/base/DropdownFilterBar.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import FilterPills from '#ui/components/base/FilterPills.vue'
@@ -191,7 +191,7 @@ const sortLabels: Record<SortMode, () => string> = {
 	'date-added-oldest': () => formatMessage(messages.sortDateAddedOldest),
 }
 
-const sortOptions = computed<OverflowMenuOption[]>(() => [
+const sortOptions = computed<ButtonMenuOption[]>(() => [
 	{
 		id: 'alphabetical-asc',
 		label: formatMessage(messages.sortAlphabeticalAscending),
@@ -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/shared/content-tab/providers/content-manager.ts b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
index 37fcd018cc..10397a9c35 100644
--- a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
+++ b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from 'vue'
 
-import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { createContext } from '#ui/providers/create-context'
 
 import type {
@@ -81,7 +81,7 @@ export interface ContentManagerContext {
 	switchVersion?: (item: ContentItem) => void
 
 	// Per-item overflow menu (optional)
-	getOverflowOptions?: (item: ContentItem) => OverflowMenuOption[]
+	getOverflowOptions?: (item: ContentItem) => ButtonMenuOption[]
 
 	// Share support (optional — when undefined, share button becomes hidden entirely)
 	shareItems?: (items: ContentItem[], format: 'names' | 'file-names' | 'urls' | 'markdown') => void
diff --git a/packages/ui/src/layouts/shared/content-tab/types.ts b/packages/ui/src/layouts/shared/content-tab/types.ts
index 255e66bc23..6154b33ca1 100644
--- a/packages/ui/src/layouts/shared/content-tab/types.ts
+++ b/packages/ui/src/layouts/shared/content-tab/types.ts
@@ -1,7 +1,7 @@
 import type { Labrinth } from '@modrinth/api-client'
 import type { RouteLocationRaw } from 'vue-router'
 
-import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 
 export type ContentCardProject = Pick<
 	Labrinth.Projects.v2.Project,
@@ -73,7 +73,7 @@ export interface ContentCardTableItem {
 	clientWarning?: ClientWarningType | null
 	hideDelete?: boolean
 	hideSwitchVersion?: boolean
-	overflowOptions?: OverflowMenuOption[]
+	overflowOptions?: ButtonMenuOption[]
 }
 
 export type ContentCardTableSortColumn = 'project' | 'version'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
deleted file mode 100644
index 340c136540..0000000000
--- a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-	<Teleport to="#teleports">
-		<Transition name="floating-expand">
-			<div
-				v-if="visible"
-				ref="menuRef"
-				class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
-				:style="{ left: `${position.x}px`, top: `${position.y}px`, transformOrigin: 'top left' }"
-				role="menu"
-				tabindex="-1"
-				@mousedown.stop
-			>
-				<Button
-					type="quiet"
-					class="w-full !justify-start !whitespace-nowrap"
-					role="menuitem"
-					@click="handleCopyFilename"
-				>
-					<ClipboardCopyIcon class="size-5" />
-					{{ formatMessage(commonMessages.copyFilenameButton) }}
-				</Button>
-				<Button
-					type="quiet"
-					class="w-full !justify-start !whitespace-nowrap"
-					role="menuitem"
-					@click="handleCopyPath"
-				>
-					<ClipboardCopyIcon class="size-5" />
-					{{ formatMessage(commonMessages.copyFullPathButton) }}
-				</Button>
-				<Button
-					v-if="ctx.openInFolder"
-					type="quiet"
-					class="w-full !justify-start !whitespace-nowrap"
-					role="menuitem"
-					@click="handleOpenInFolder"
-				>
-					<FolderOpenIcon class="size-5" />
-					{{ formatMessage(commonMessages.openInFolderButton) }}
-				</Button>
-				<div class="h-px w-full bg-surface-5" />
-				<template v-for="(option, index) in menuOptions" :key="index">
-					<div
-						v-if="'divider' in option && option.divider && option.shown !== false"
-						class="h-px w-full bg-surface-5"
-					/>
-					<Button
-						v-else-if="'id' in option && option.shown !== false"
-						v-tooltip="option.tooltip"
-						type="quiet"
-						:color="
-							option.color && option.color !== 'standard'
-								? option.color === 'medal-promo'
-									? 'medal_promotion'
-									: option.color
-								: undefined
-						"
-						:disabled="option.disabled"
-						class="w-full !justify-start !whitespace-nowrap"
-						role="menuitem"
-						@click="handleOptionClick(option)"
-					>
-						<slot :name="option.id" />
-					</Button>
-				</template>
-			</div>
-		</Transition>
-	</Teleport>
-</template>
-
-<script setup lang="ts">
-import { ClipboardCopyIcon, FolderOpenIcon } from '@modrinth/assets'
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-import { Button } from '#ui/components/base/buttons'
-import { useVIntl } from '#ui/composables/i18n'
-import { injectNotificationManager } from '#ui/providers/web-notifications'
-import { commonMessages } from '#ui/utils/common-messages'
-
-import { injectFileManager } from '../providers/file-manager'
-import type { FileContextMenuOption, FileItem } from '../types'
-import { joinDisplayPath } from '../utils'
-
-const { formatMessage } = useVIntl()
-const { addNotification } = injectNotificationManager()
-const ctx = injectFileManager()
-
-const visible = ref(false)
-const menuRef = ref<HTMLElement>()
-const position = ref({ x: 0, y: 0 })
-const currentItem = ref<FileItem | null>(null)
-const menuOptions = ref<FileContextMenuOption[]>([])
-
-function show(item: FileItem, x: number, y: number, options: typeof menuOptions.value) {
-	currentItem.value = item
-	menuOptions.value = options
-	position.value = { x, y }
-	visible.value = true
-
-	nextTick(() => {
-		if (!menuRef.value) return
-		const rect = menuRef.value.getBoundingClientRect()
-		const padding = 10
-		if (rect.right > window.innerWidth - padding) {
-			position.value.x = Math.max(padding, x - rect.width)
-		}
-		if (rect.bottom > window.innerHeight - padding) {
-			position.value.y = Math.max(padding, y - rect.height)
-		}
-	})
-}
-
-function hide() {
-	visible.value = false
-	currentItem.value = null
-}
-
-function handleCopyFilename() {
-	if (!currentItem.value) return
-	navigator.clipboard.writeText(currentItem.value.name)
-	addNotification({ title: formatMessage(commonMessages.copiedFilenameLabel), type: 'success' })
-	hide()
-}
-
-function getFullPath() {
-	if (!currentItem.value) return ''
-	return joinDisplayPath(ctx.basePath?.value, currentItem.value.path)
-}
-
-function handleCopyPath() {
-	if (!currentItem.value) return
-	navigator.clipboard.writeText(getFullPath())
-	addNotification({ title: formatMessage(commonMessages.copiedPathLabel), type: 'success' })
-	hide()
-}
-
-function handleOpenInFolder() {
-	if (!currentItem.value) return
-	ctx.openInFolder?.(getFullPath())
-	hide()
-}
-
-function handleOptionClick(option: { action?: () => void }) {
-	option.action?.()
-	hide()
-}
-
-function onClickOutside(event: MouseEvent) {
-	if (menuRef.value && !menuRef.value.contains(event.target as Node)) {
-		hide()
-	}
-}
-
-function onEscape(event: KeyboardEvent) {
-	if (event.key === 'Escape') {
-		hide()
-	}
-}
-
-onMounted(() => {
-	document.addEventListener('mousedown', onClickOutside)
-	document.addEventListener('keydown', onEscape)
-})
-
-onBeforeUnmount(() => {
-	document.removeEventListener('mousedown', onClickOutside)
-	document.removeEventListener('keydown', onEscape)
-})
-
-watch(visible, (v) => {
-	if (!v) currentItem.value = null
-})
-
-defineExpose({ show, hide })
-</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
index 983af761ad..fdff012b05 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
@@ -62,35 +62,6 @@
 						:options="menuOptions"
 					>
 						<MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
-						<template #copy-filename
-							><ClipboardCopyIcon />
-							{{ formatMessage(commonMessages.copyFilenameButton) }}</template
-						>
-						<template #copy-full-path
-							><ClipboardCopyIcon />
-							{{ formatMessage(commonMessages.copyFullPathButton) }}</template
-						>
-						<template #open-in-folder
-							><FolderOpenIcon /> {{ formatMessage(commonMessages.openInFolderButton) }}</template
-						>
-						<template #extract
-							><PackageOpenIcon /> {{ formatMessage(commonMessages.extractButton) }}</template
-						>
-						<template #rename
-							><EditIcon /> {{ formatMessage(commonMessages.renameButton) }}</template
-						>
-						<template #move
-							><RightArrowIcon /> {{ formatMessage(commonMessages.moveButton) }}</template
-						>
-						<template #download
-							><DownloadIcon />
-							{{
-								ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton)
-							}}</template
-						>
-						<template #delete
-							><TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}</template
-						>
 					</TeleportOverflowMenu>
 				</div>
 			</div>
@@ -117,6 +88,7 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useFormatBytes } from '#ui/composables'
@@ -168,7 +140,7 @@ const emit = defineEmits<{
 		e: 'moveDirectTo',
 		item: Pick<FileItem, 'name' | 'type' | 'path'> & { destination: string },
 	): void
-	(e: 'contextmenu', x: number, y: number): void
+	(e: 'contextmenu', event: MouseEvent, options: ButtonMenuOption[]): void
 	(e: 'toggle-select'): void
 }>()
 
@@ -205,13 +177,13 @@ const containerClasses = computed(() => {
 
 const fileExtension = computed(() => getFileExtension(props.name))
 
-const isZip = computed(() => fileExtension.value === 'zip')
+const canExtract = computed(() => fileExtension.value === 'zip' && !!ctx.extractFile)
 
 function getFullPath() {
 	return joinDisplayPath(ctx.basePath?.value, props.path)
 }
 
-const menuOptions = computed(() => {
+const menuOptions = computed<ButtonMenuOption[]>(() => {
 	const item = { name: props.name, type: props.type, path: props.path }
 	const wd = props.writeDisabled
 	const wdTooltip = props.writeDisabledTooltip
@@ -248,15 +220,17 @@ const menuOptions = computed(() => {
 		{
 			id: 'extract',
 			label: formatMessage(commonMessages.extractButton),
-			shown: isZip.value,
+			icon: PackageOpenIcon,
+			shown: canExtract.value,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('extract', item),
 		},
-		{ type: 'divider', shown: isZip.value },
+		{ type: 'divider', shown: canExtract.value },
 		{
 			id: 'rename',
 			label: formatMessage(commonMessages.renameButton),
+			icon: EditIcon,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('rename', item),
@@ -264,6 +238,7 @@ const menuOptions = computed(() => {
 		{
 			id: 'move',
 			label: formatMessage(commonMessages.moveButton),
+			icon: RightArrowIcon,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('move', item),
@@ -271,12 +246,14 @@ const menuOptions = computed(() => {
 		{
 			id: 'download',
 			label: ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton),
+			icon: DownloadIcon,
 			action: () => emit('download', item),
 			shown: props.type !== 'directory',
 		},
 		{
 			id: 'delete',
 			label: formatMessage(commonMessages.deleteLabel),
+			icon: TrashIcon,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('delete', item),
@@ -327,7 +304,7 @@ const formattedSize = computed(() => {
 
 function openContextMenu(event: MouseEvent) {
 	event.preventDefault()
-	emit('contextmenu', event.clientX, event.clientY)
+	emit('contextmenu', event, menuOptions.value)
 }
 
 function handleMouseEnter() {
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index a8744b0888..fefef599fc 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -17,25 +17,7 @@
 		@move="handleMoveItem"
 	/>
 	<FileDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
-	<FileContextMenu ref="contextMenuRef">
-		<template #extract
-			><PackageOpenIcon class="size-5" />
-			{{ formatMessage(commonMessages.extractButton) }}</template
-		>
-		<template #rename
-			><EditIcon class="size-5" /> {{ formatMessage(commonMessages.renameButton) }}</template
-		>
-		<template #move
-			><RightArrowIcon class="size-5" /> {{ formatMessage(commonMessages.moveButton) }}</template
-		>
-		<template #download
-			><DownloadIcon class="size-5" />
-			{{ ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton) }}</template
-		>
-		<template #delete
-			><TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}</template
-		>
-	</FileContextMenu>
+	<ContextMenu ref="contextMenuRef" :label="formatMessage(commonMessages.actionsLabel)" />
 	<div v-if="!(ctx.loading.value && items.length === 0)" class="contents">
 		<div class="relative flex w-full flex-col">
 			<div class="relative isolate flex w-full flex-col gap-4">
@@ -113,7 +95,9 @@
 									@edit="() => handleEditFile(item)"
 									@navigate="() => handleNavigateToFolder(item)"
 									@hover="() => handleItemHover(item)"
-									@contextmenu="(x, y) => handleContextMenu(item, x, y)"
+									@contextmenu="
+										(event, options) => contextMenuRef?.open(event as MouseEvent, options)
+									"
 									@toggle-select="() => toggleItemSelection(item.path)"
 								/>
 							</div>
@@ -200,20 +184,11 @@
 </template>
 
 <script setup lang="ts">
-import {
-	DownloadIcon,
-	EditIcon,
-	FolderOpenIcon,
-	HistoryIcon,
-	PackageOpenIcon,
-	RightArrowIcon,
-	SaveIcon,
-	TrashIcon,
-} from '@modrinth/assets'
+import { FolderOpenIcon, HistoryIcon, SaveIcon, TrashIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 
-import { Button } from '#ui/components/base/buttons'
+import { Button, ContextMenu } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useStickyObserver } from '#ui/composables/sticky-observer'
@@ -221,10 +196,9 @@ import { useVirtualScroll } from '#ui/composables/virtual-scroll'
 import { injectFilePicker } from '#ui/providers/file-picker'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
-import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
+import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
 import FileEditor from './components/editor/FileEditor.vue'
-import FileContextMenu from './components/FileContextMenu.vue'
 import FileManagerError from './components/FileManagerError.vue'
 import FileNavbar from './components/FileNavbar.vue'
 import FileTableHeader from './components/FileTableHeader.vue'
@@ -242,7 +216,7 @@ import { useFileSelection } from './composables/file-selection'
 import { useFileSorting } from './composables/file-sorting'
 import { useFileUndoRedo } from './composables/file-undo-redo'
 import { injectFileManager } from './providers/file-manager'
-import type { FileContextMenuOption, FileItem } from './types'
+import type { FileItem } from './types'
 
 const { formatMessage } = useVIntl()
 
@@ -366,7 +340,7 @@ const moveItemModal = ref<InstanceType<typeof FileMoveItemModal>>()
 const deleteItemModal = ref<InstanceType<typeof FileDeleteItemModal>>()
 const uploadConflictModal = ref<InstanceType<typeof FileUploadConflictModal>>()
 const uploadZipUrlModal = ref<InstanceType<typeof FileUploadZipUrlModal>>()
-const contextMenuRef = ref<InstanceType<typeof FileContextMenu>>()
+const contextMenuRef = ref<InstanceType<typeof ContextMenu>>()
 
 const newItemType = ref<'file' | 'directory'>('file')
 const selectedItem = ref<FileItem | null>(null)
@@ -663,50 +637,6 @@ function handlePrefetchHome() {
 	}, 150)
 }
 
-// Context menu
-function handleContextMenu(item: FileItem, x: number, y: number) {
-	const wd = isBusy.value
-	const wdTooltip = busyTooltip.value
-	const isZip = getFileExtension(item.name) === 'zip'
-
-	const options: FileContextMenuOption[] = [
-		{
-			id: 'extract',
-			shown: isZip && !!ctx.extractFile,
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => handleExtractItem(item),
-		},
-		{ divider: true, shown: isZip && !!ctx.extractFile },
-		{
-			id: 'rename',
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => showRenameModal(item),
-		},
-		{
-			id: 'move',
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => showMoveModal(item),
-		},
-		{
-			id: 'download',
-			action: () => handleDownload(item),
-			shown: item.type !== 'directory',
-		},
-		{
-			id: 'delete',
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => showDeleteModal(item),
-			color: 'red',
-		},
-	]
-
-	contextMenuRef.value?.show(item, x, y, options)
-}
-
 // Reset search/sort/selection on path change
 watch(
 	() => ctx.currentPath.value,
diff --git a/packages/ui/src/layouts/shared/files-tab/types.ts b/packages/ui/src/layouts/shared/files-tab/types.ts
index 12416aa5e0..dd386682f8 100644
--- a/packages/ui/src/layouts/shared/files-tab/types.ts
+++ b/packages/ui/src/layouts/shared/files-tab/types.ts
@@ -18,17 +18,6 @@ export type FileSortField = 'name' | 'size' | 'created' | 'modified'
 
 export type FileViewFilter = 'all' | 'filesOnly' | 'foldersOnly'
 
-export type FileContextMenuOption =
-	| {
-			id: string
-			action?: () => void
-			disabled?: boolean
-			tooltip?: string
-			color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
-			shown?: boolean
-	  }
-	| { divider: true; shown?: boolean }
-
 export interface FileOperation {
 	id?: string
 	op: string
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index 9ca26dedce..ee5b3a84e7 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -230,7 +230,7 @@
 					:projects="filteredProjects"
 					:layout="displayMode"
 					:link-mode="projectLinkMode"
-					show-status
+					:show-status="canSeeProjectStatus"
 				>
 					<template v-if="$slots['project-actions']" #actions="{ project }">
 						<slot name="project-actions" :project="project" />
@@ -296,7 +296,7 @@
 										})
 									}}
 								</div>
-								<div class="flex items-center gap-1">
+								<div v-if="canSeeCollectionStatus" class="flex items-center gap-1">
 									<template v-if="collection.status === 'listed'">
 										<GlobeIcon />
 										{{ formatMessage(commonMessages.publicLabel) }}
@@ -703,6 +703,19 @@ const blockedUsersQuery = useQuery({
 	enabled: computed(() => Boolean(auth.user.value)),
 	staleTime: 30_000,
 })
+const viewerProjectsQuery = useQuery({
+	queryKey: computed(() => ['user', auth.user.value?.id, 'projects']),
+	queryFn: () => userProfile.getProjects(auth.user.value!.id),
+	enabled: computed(
+		() =>
+			Boolean(auth.user.value?.id) &&
+			Boolean(userQuery.data.value?.id) &&
+			auth.user.value?.id !== userQuery.data.value?.id &&
+			auth.user.value?.role !== 'admin' &&
+			auth.user.value?.role !== 'moderator',
+	),
+	staleTime: 30_000,
+})
 
 const user = computed(() => userQuery.data.value)
 const projects = computed(() => projectsQuery.data.value ?? [])
@@ -797,6 +810,16 @@ const isAdminViewing = computed(() => auth.user.value?.role === 'admin')
 const isStaffViewing = computed(
 	() => auth.user.value?.role === 'admin' || auth.user.value?.role === 'moderator',
 )
+const viewerMemberProjectIds = computed(
+	() => new Set((viewerProjectsQuery.data.value ?? []).map((project) => project.id)),
+)
+
+function canSeeProjectStatus(project: Labrinth.Projects.v3.Project) {
+	if (isSelf.value || isStaffViewing.value) return true
+	return viewerMemberProjectIds.value.has(project.id)
+}
+
+const canSeeCollectionStatus = computed(() => isSelf.value || isStaffViewing.value)
 const isAffiliate = computed(() => Boolean((user.value?.badges ?? 0) & UserBadge.AFFILIATE))
 const hasMidas = computed(
 	() => Boolean((user.value?.badges ?? 0) & UserBadge.MIDAS) || hasActivePride26Midas(user.value),
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 094b8515b1..619eedc7b0 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -879,10 +879,10 @@ const popupOptions = computed(
 				modpack_id: serverProject.value?.id,
 				modpack_name: serverProject.value?.title,
 			},
-			onOpen: () => console.log(`Opened survey notice: ${surveyNotice.value?.id}`),
+			onOpen: () => debug(`Opened survey notice: ${surveyNotice.value?.id}`),
 			onClose: async () => await dismissSurvey(),
 			onSubmit: (payload: unknown) => {
-				console.log('Form submitted:', payload)
+				debug('Form submitted:', payload)
 			},
 		}) satisfies TallyPopupOptions,
 )
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 35f401eadb..6ee59db802 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -176,6 +176,9 @@
   "button.continue": {
     "defaultMessage": "Continue"
   },
+  "button.copied-to-clipboard": {
+    "defaultMessage": "Copied to clipboard"
+  },
   "button.copy-filename": {
     "defaultMessage": "Copy filename"
   },
@@ -2018,6 +2021,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..."
   },
@@ -2609,6 +2723,9 @@
   "label.yes": {
     "defaultMessage": "Yes"
   },
+  "layout.account-switcher.switching": {
+    "defaultMessage": "Switching accounts..."
+  },
   "locale.cs-CZ": {
     "defaultMessage": "Czech"
   },
@@ -4019,6 +4136,12 @@
   "project.versions.channel.release.symbol": {
     "defaultMessage": "R"
   },
+  "project.versions.filter.channel": {
+    "defaultMessage": "Channel"
+  },
+  "project.versions.filter.selected-count": {
+    "defaultMessage": "{count, number} selected"
+  },
   "project.versions.filter.toggle-tooltip": {
     "defaultMessage": "Toggle filter for {filter}"
   },
@@ -6671,6 +6794,12 @@
   "user.profile.badge.staff.name": {
     "defaultMessage": "Modrinth Team"
   },
+  "user.role.moderator": {
+    "defaultMessage": "Content Moderator"
+  },
+  "user.role.modrinth-team": {
+    "defaultMessage": "Modrinth Team"
+  },
   "version.content.name": {
     "defaultMessage": "Name"
   },
@@ -6681,7 +6810,7 @@
     "defaultMessage": "Dev jar"
   },
   "version.file-type.javadoc-jar": {
-    "defaultMessage": "Javadoc jar"
+    "defaultMessage": "Javadocs jar"
   },
   "version.file-type.optional-resource-pack": {
     "defaultMessage": "Optional resource pack"
@@ -6696,7 +6825,7 @@
     "defaultMessage": "Signature file"
   },
   "version.file-type.sources-jar": {
-    "defaultMessage": "Source jar"
+    "defaultMessage": "Sources jar"
   },
   "version.file-type.unknown": {
     "defaultMessage": "Other"
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/BackToParentLink.stories.ts b/packages/ui/src/stories/base/BackToParentLink.stories.ts
new file mode 100644
index 0000000000..cb92b45c68
--- /dev/null
+++ b/packages/ui/src/stories/base/BackToParentLink.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import BackToParentLink from '../../components/base/BackToParentLink.vue'
+
+const meta = {
+	title: 'Base/BackToParentLink',
+	component: BackToParentLink,
+	render: (args) => ({
+		components: { BackToParentLink },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<BackToParentLink v-bind="args">All versions</BackToParentLink>
+		`,
+	}),
+} satisfies Meta<typeof BackToParentLink>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		to: '/versions',
+	},
+}
diff --git a/packages/ui/src/stories/base/CopyLinkButton.stories.ts b/packages/ui/src/stories/base/CopyLinkButton.stories.ts
new file mode 100644
index 0000000000..408d97cd73
--- /dev/null
+++ b/packages/ui/src/stories/base/CopyLinkButton.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CopyLinkButton from '../../components/base/CopyLinkButton.vue'
+
+const meta = {
+	title: 'Base/CopyLinkButton',
+	component: CopyLinkButton,
+} satisfies Meta<typeof CopyLinkButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		url: 'https://modrinth.com',
+	},
+}
+
+export const CustomLabels: Story = {
+	args: {
+		url: 'https://modrinth.com',
+		copyLabel: 'Copy project link',
+		copiedLabel: 'Project link copied',
+	},
+}
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/ButtonGroup.stories.ts b/packages/ui/src/stories/buttons/ButtonGroup.stories.ts
index 3f234148c4..b6dfd07f99 100644
--- a/packages/ui/src/stories/buttons/ButtonGroup.stories.ts
+++ b/packages/ui/src/stories/buttons/ButtonGroup.stories.ts
@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Button from '../../components/base/buttons/Button.vue'
 import ButtonGroup from '../../components/base/buttons/ButtonGroup.vue'
 import SplitButton from '../../components/base/buttons/SplitButton.vue'
-import type { OverflowMenuOption } from '../../components/base/buttons/types'
+import type { ButtonMenuOption } from '../../components/base/buttons/types'
 
-const splitOptions: OverflowMenuOption[] = [
+const splitOptions: ButtonMenuOption[] = [
 	{
 		id: 'settings',
 		label: 'Server settings',
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/app/ContextMenu.stories.ts b/packages/ui/src/stories/buttons/ContextMenu.stories.ts
similarity index 53%
rename from packages/ui/src/stories/app/ContextMenu.stories.ts
rename to packages/ui/src/stories/buttons/ContextMenu.stories.ts
index a521f89caf..313d141930 100644
--- a/packages/ui/src/stories/app/ContextMenu.stories.ts
+++ b/packages/ui/src/stories/buttons/ContextMenu.stories.ts
@@ -3,47 +3,61 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { fn } from 'storybook/test'
 import { nextTick, onMounted, ref } from 'vue'
 
-import ContextMenu from '../../../../../apps/app-frontend/src/components/ui/context-menu/index.vue'
-import type { ContextMenuOption } from '../../../../../apps/app-frontend/src/components/ui/context-menu/types'
+import ContextMenu from '../../components/base/buttons/ContextMenu.vue'
+import type { ButtonMenuOption } from '../../components/base/buttons/types'
 
-const options: ContextMenuOption[] = [
-	{ name: 'play', color: 'primary' },
+const options: ButtonMenuOption[] = [
 	{
-		name: 'copy',
-		children: [{ name: 'copy_name' }, { name: 'copy_path' }, { name: 'copy_id' }],
+		id: 'play',
+		label: 'Play',
+		icon: PlayIcon,
+		tone: 'brand',
+		action: () => undefined,
 	},
-	{ name: 'open_folder' },
+	{
+		id: 'copy',
+		label: 'Copy',
+		icon: CopyIcon,
+		type: 'submenu',
+		options: [
+			{ id: 'copy_name', label: 'Copy name', icon: CopyIcon, action: () => undefined },
+			{ id: 'copy_path', label: 'Copy path', icon: CopyIcon, action: () => undefined },
+			{ id: 'copy_id', label: 'Copy ID', icon: CopyIcon, action: () => undefined },
+		],
+	},
+	{ id: 'open_folder', label: 'Open folder', icon: FolderOpenIcon, action: () => undefined },
 	{ type: 'divider' },
-	{ name: 'settings' },
-	{ name: 'delete', color: 'danger' },
+	{ id: 'settings', label: 'Settings', icon: SettingsIcon, action: () => undefined },
+	{
+		id: 'delete',
+		label: 'Delete',
+		icon: TrashIcon,
+		tone: 'red',
+		hoverFilledOnly: true,
+		action: () => undefined,
+	},
 ]
 
 const meta = {
-	title: 'App/Context Menu',
+	title: 'Buttons/Context Menu',
 	component: ContextMenu,
 	parameters: {
 		layout: 'fullscreen',
 	},
 	args: {
-		onMenuClosed: fn(),
-		onOptionClicked: fn(),
+		label: 'Instance actions',
+		onSelect: fn(),
+		onOpen: fn(),
+		onClose: fn(),
 	},
 	render: (args) => ({
-		components: {
-			ContextMenu,
-			CopyIcon,
-			FolderOpenIcon,
-			PlayIcon,
-			SettingsIcon,
-			TrashIcon,
-		},
+		components: { ContextMenu },
 		setup() {
 			const contextMenu = ref<InstanceType<typeof ContextMenu>>()
 			const target = ref<HTMLElement>()
-			const item = { id: 'storybook-instance', name: 'Storybook Instance' }
 
 			function openMenu(event: MouseEvent) {
-				contextMenu.value?.showMenu(event, item, options)
+				contextMenu.value?.open(event, options)
 			}
 
 			onMounted(() => {
@@ -74,18 +88,11 @@ const meta = {
 
 				<ContextMenu
 					ref="contextMenu"
-					@menu-closed="args.onMenuClosed"
-					@option-clicked="args.onOptionClicked"
-				>
-					<template #play><PlayIcon /> Play</template>
-					<template #copy><CopyIcon /> Copy</template>
-					<template #copy_name><CopyIcon /> Copy name</template>
-					<template #copy_path><CopyIcon /> Copy path</template>
-					<template #copy_id> <CopyIcon /> Copy ID</template>
-					<template #open_folder><FolderOpenIcon /> Open folder</template>
-					<template #settings><SettingsIcon /> Settings</template>
-					<template #delete><TrashIcon /> Delete</template>
-				</ContextMenu>
+					:label="args.label"
+					@select="args.onSelect"
+					@open="args.onOpen"
+					@close="args.onClose"
+				/>
 			</div>
 		`,
 	}),
diff --git a/packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts b/packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts
index 5ed21392f1..e0c327bb69 100644
--- a/packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts
+++ b/packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts
@@ -1,16 +1,19 @@
 import {
+	ArrowLeftRightIcon,
 	DownloadIcon,
 	ExternalIcon,
 	MoreVerticalIcon,
+	PlusIcon,
 	SettingsIcon,
 	TrashIcon,
+	XIcon,
 } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import TeleportOverflowMenu from '../../components/base/buttons/TeleportOverflowMenu.vue'
-import type { OverflowMenuOption } from '../../components/base/buttons/types'
+import type { ButtonMenuOption } from '../../components/base/buttons/types'
 
-const options: OverflowMenuOption[] = [
+const options: ButtonMenuOption[] = [
 	{
 		id: 'download',
 		label: 'Download',
@@ -102,3 +105,48 @@ export const Hoverable: Story = {
 		hoverable: true,
 	},
 }
+
+const optionsWithSubmenu: ButtonMenuOption[] = [
+	...options,
+	{ type: 'divider' },
+	{
+		id: 'switch-account',
+		label: 'Switch account',
+		icon: ArrowLeftRightIcon,
+		type: 'submenu',
+		options: [
+			{
+				id: 'account-jai',
+				label: 'Jai',
+				selected: true,
+				action: () => undefined,
+				trailingAction: {
+					label: 'Remove Jai',
+					icon: XIcon,
+					color: 'red',
+					action: () => undefined,
+				},
+			},
+			{
+				id: 'account-prospector',
+				label: 'Prospector',
+				selected: false,
+				action: () => undefined,
+				trailingAction: {
+					label: 'Remove Prospector',
+					icon: XIcon,
+					color: 'red',
+					action: () => undefined,
+				},
+			},
+			{ type: 'divider' },
+			{ id: 'add-account', label: 'Add account', icon: PlusIcon, action: () => undefined },
+		],
+	},
+]
+
+export const WithSubmenu: Story = {
+	args: {
+		options: optionsWithSubmenu,
+	},
+}
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/stories/user/UserAvatar.stories.ts b/packages/ui/src/stories/user/UserAvatar.stories.ts
new file mode 100644
index 0000000000..7b05883e12
--- /dev/null
+++ b/packages/ui/src/stories/user/UserAvatar.stories.ts
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import UserAvatar from '../../components/user/UserAvatar.vue'
+
+const src = 'https://cdn.modrinth.com/data/AANobbMI/icon.png'
+
+const meta = {
+	title: 'User/User Avatar',
+	component: UserAvatar,
+	args: {
+		src,
+		size: '32px',
+	},
+} satisfies Meta<typeof UserAvatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Online: Story = {
+	args: {
+		badge: true,
+	},
+}
+
+export const Offline: Story = {
+	args: {
+		grayscale: true,
+	},
+}
+
+export const OnSurface: Story = {
+	render: (args) => ({
+		components: { UserAvatar },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<div style="display: flex; gap: 1rem; padding: 1rem; background: var(--color-button-bg); border-radius: 1rem;">
+				<UserAvatar v-bind="args" />
+				<UserAvatar v-bind="args" badge />
+				<UserAvatar v-bind="args" grayscale />
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/styles/tailwind-utilities.css b/packages/ui/src/styles/tailwind-utilities.css
index c32ef00996..2a52013513 100644
--- a/packages/ui/src/styles/tailwind-utilities.css
+++ b/packages/ui/src/styles/tailwind-utilities.css
@@ -2,15 +2,67 @@
 	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+@media (prefers-reduced-motion: no-preference) {
+	html.theme-color-transitioning *,
+	html.theme-color-transitioning *::before,
+	html.theme-color-transitioning *::after,
+	html.theme-color-transitioning *::backdrop,
+	html.theme-color-transitioning *::placeholder {
+		animation: none !important;
+		animation-delay: 0s !important;
+		transition:
+			color,
+			background-color,
+			border-color,
+			outline-color,
+			fill,
+			stroke,
+			box-shadow,
+			text-decoration-color,
+			caret-color,
+			column-rule-color 125ms ease-in-out !important;
+		transition-delay: 0s !important;
+	}
+
+	/* save bars and stuff should still animate in/out */
+	html.theme-color-transitioning .floating-action-bar {
+		animation: revert !important;
+		animation-delay: revert !important;
+		transition:
+			color,
+			background-color,
+			border-color,
+			outline-color,
+			fill,
+			stroke,
+			box-shadow,
+			text-decoration-color,
+			caret-color,
+			column-rule-color 125ms ease-in-out,
+			transform 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96),
+			opacity 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96),
+			bottom 0.25s ease-in-out !important;
+		transition-delay: 0s !important;
+	}
+
+	html.theme-color-transitioning .floating-action-bar *,
+	html.theme-color-transitioning .floating-action-bar *::before,
+	html.theme-color-transitioning .floating-action-bar *::after {
+		animation: revert !important;
+		animation-delay: revert !important;
+	}
+}
+
 .floating-expand-enter-from,
 .floating-expand-leave-to {
 	opacity: 0;
-	scale: 0.9 0.3;
+	scale: var(--floating-expand-x, 0.9) var(--floating-expand-y, 0.3);
 }
 
 .floating-expand-enter-to,
 .floating-expand-leave-from {
 	opacity: 1;
+	scale: 1 1;
 }
 
 .floating-expand-enter-active,
@@ -18,7 +70,37 @@
 	transition:
 		opacity 0.125s var(--ease-out-expo),
 		scale 0.125s var(--ease-out-expo);
-	transform-origin: top;
+	transform-origin: var(--floating-expand-origin, top);
+}
+
+.button-menu-item[data-tone]:not([data-hover-filled-only]),
+.button-menu-item[data-tone]:not([data-hover-filled-only]) svg {
+	color: var(--button-menu-item-tone);
+}
+
+.button-menu-item[data-tone][data-hover-filled]:hover,
+.button-menu-item[data-tone][data-hover-filled]:focus-visible {
+	color: var(--color-accent-contrast);
+	background-color: var(--button-menu-item-tone);
+}
+
+.button-menu-item[data-tone][data-hover-filled]:hover svg,
+.button-menu-item[data-tone][data-hover-filled]:focus-visible svg {
+	color: inherit;
+}
+
+.button-menu-trailing {
+	color: var(--button-menu-trailing-color, var(--color-secondary));
+}
+
+.button-menu-trailing:hover,
+.button-menu-trailing:focus-visible {
+	color: var(--color-accent-contrast);
+}
+
+.button-menu-trailing:hover::before,
+.button-menu-trailing:focus-visible::before {
+	background-color: var(--button-menu-trailing-color, var(--color-secondary));
 }
 
 @layer utilities {
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/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 0b22cb173f..314863039e 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -1466,7 +1466,7 @@ export const fileTypeMessages: Record<
 	}),
 	'sources-jar': defineMessage({
 		id: 'version.file-type.sources-jar',
-		defaultMessage: 'Source jar',
+		defaultMessage: 'Sources jar',
 	}),
 	'dev-jar': defineMessage({
 		id: 'version.file-type.dev-jar',
@@ -1474,7 +1474,7 @@ export const fileTypeMessages: Record<
 	}),
 	'javadoc-jar': defineMessage({
 		id: 'version.file-type.javadoc-jar',
-		defaultMessage: 'Javadoc jar',
+		defaultMessage: 'Javadocs jar',
 	}),
 	signature: defineMessage({
 		id: 'version.file-type.signature',
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index a97545fd2a..d92f045915 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -13,6 +13,7 @@ export * from './savable'
 export * from './search'
 export * from './server-search'
 export * from './tag-messages'
+export * from './theme-color-transition'
 export * from './truncate'
 export * from './use-anchored-teleport'
 export * from './v3-projects'
diff --git a/packages/ui/src/utils/theme-color-transition.ts b/packages/ui/src/utils/theme-color-transition.ts
new file mode 100644
index 0000000000..4a06af8f07
--- /dev/null
+++ b/packages/ui/src/utils/theme-color-transition.ts
@@ -0,0 +1,19 @@
+const DURATION_MS = 125
+const CLASS = 'theme-color-transitioning'
+
+let removeTimeout: ReturnType<typeof setTimeout> | undefined
+
+export function prepareThemeColorTransition() {
+	if (typeof document === 'undefined') return
+
+	const root = document.documentElement
+	root.classList.remove(CLASS)
+	void root.offsetWidth
+	root.classList.add(CLASS)
+
+	clearTimeout(removeTimeout)
+	removeTimeout = setTimeout(() => {
+		root.classList.remove(CLASS)
+		removeTimeout = undefined
+	}, DURATION_MS)
+}
diff --git a/packages/ui/src/utils/use-anchored-teleport.ts b/packages/ui/src/utils/use-anchored-teleport.ts
index e93672193d..0779341eaf 100644
--- a/packages/ui/src/utils/use-anchored-teleport.ts
+++ b/packages/ui/src/utils/use-anchored-teleport.ts
@@ -14,15 +14,26 @@ export type AnchoredTeleportPlacement =
 	| 'left-end'
 export type AnchoredTeleportSide = 'top' | 'right' | 'bottom' | 'left'
 
+export interface AnchoredTeleportAnchor {
+	getBoundingClientRect(): DOMRect
+}
+
 const viewportPadding = 8
 const anchorPadding = 18
 const defaultDistance = ref(8)
+const defaultAlignOffset = ref(0)
+
+export function pointAnchor(x: number, y: number): AnchoredTeleportAnchor {
+	const rect = new DOMRect(x, y, 0, 0)
+	return { getBoundingClientRect: () => rect }
+}
 
 export function useAnchoredTeleport(
-	trigger: Readonly<Ref<HTMLElement | null>>,
+	trigger: Readonly<Ref<AnchoredTeleportAnchor | null>>,
 	panel: Readonly<Ref<HTMLElement | null>>,
 	placement: Readonly<Ref<AnchoredTeleportPlacement>>,
 	distance: Readonly<Ref<number>> = defaultDistance,
+	alignOffset: Readonly<Ref<number>> = defaultAlignOffset,
 ) {
 	const isOpen = ref(false)
 	const panelStyle = ref<CSSProperties>({
@@ -32,6 +43,7 @@ export function useAnchoredTeleport(
 	})
 	const anchorStyle = ref<CSSProperties>({})
 	const resolvedSide = ref<AnchoredTeleportSide>('bottom')
+	const expandOrigin = ref('top center')
 
 	let resizeObserver: ResizeObserver | undefined
 
@@ -59,7 +71,8 @@ export function useAnchoredTeleport(
 				: panelRect.width + offset > spaceLeft && spaceRight > spaceLeft
 
 			resolvedSide.value = opensRight ? 'right' : 'left'
-			idealTop = alignsEnd ? triggerRect.bottom - panelRect.height : triggerRect.top
+			idealTop =
+				(alignsEnd ? triggerRect.bottom - panelRect.height : triggerRect.top) + alignOffset.value
 			idealLeft = opensRight
 				? triggerRect.right + offset
 				: triggerRect.left - panelRect.width - offset
@@ -89,7 +102,8 @@ export function useAnchoredTeleport(
 					idealLeft = centered
 				}
 			} else {
-				idealLeft = alignsEnd ? triggerRect.right - panelRect.width : triggerRect.left
+				idealLeft =
+					(alignsEnd ? triggerRect.right - panelRect.width : triggerRect.left) + alignOffset.value
 			}
 		}
 
@@ -98,6 +112,11 @@ export function useAnchoredTeleport(
 		const maxLeft = Math.max(viewportPadding, window.innerWidth - panelRect.width - viewportPadding)
 		const panelTop = Math.min(Math.max(idealTop, viewportPadding), maxTop)
 		const panelLeft = Math.min(Math.max(idealLeft, viewportPadding), maxLeft)
+		const originY = triggerRect.top + triggerRect.height / 2 - panelTop
+		const originX = isHorizontal
+			? (resolvedSide.value === 'right' ? triggerRect.right : triggerRect.left) - panelLeft
+			: triggerRect.left + triggerRect.width / 2 - panelLeft
+		expandOrigin.value = `${originX}px ${originY}px`
 
 		panelStyle.value = {
 			top: `${panelTop}px`,
@@ -120,9 +139,14 @@ export function useAnchoredTeleport(
 				}
 	}
 
+	function triggerElement() {
+		return trigger.value instanceof HTMLElement ? trigger.value : null
+	}
+
 	function handlePointerDown(event: PointerEvent) {
 		const target = event.target as Node | null
-		if (!target || trigger.value?.contains(target) || panel.value?.contains(target)) return
+		if (!target || triggerElement()?.contains(target) || panel.value?.contains(target)) return
+		if (document.getElementById('teleports')?.contains(target)) return
 		close()
 	}
 
@@ -132,7 +156,8 @@ export function useAnchoredTeleport(
 		window.addEventListener('scroll', updatePosition, true)
 
 		resizeObserver = new ResizeObserver(updatePosition)
-		if (trigger.value) resizeObserver.observe(trigger.value)
+		const element = triggerElement()
+		if (element) resizeObserver.observe(element)
 		if (panel.value) resizeObserver.observe(panel.value)
 	}
 
@@ -157,14 +182,15 @@ export function useAnchoredTeleport(
 		if (!isOpen.value) return
 		isOpen.value = false
 		removeListeners()
-		if (restoreFocus) nextTick(() => trigger.value?.focus())
+		if (restoreFocus) nextTick(() => triggerElement()?.focus())
 	}
 
-	watch([placement, distance], updatePosition)
+	watch([placement, distance, alignOffset, trigger], updatePosition)
 	watch(panel, () => {
 		if (!isOpen.value) return
 		resizeObserver?.disconnect()
-		if (trigger.value) resizeObserver?.observe(trigger.value)
+		const element = triggerElement()
+		if (element) resizeObserver?.observe(element)
 		if (panel.value) resizeObserver?.observe(panel.value)
 		updatePosition()
 	})
@@ -176,7 +202,9 @@ export function useAnchoredTeleport(
 		panelStyle,
 		anchorStyle,
 		resolvedSide,
+		expandOrigin,
 		open,
 		close,
+		updatePosition,
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 406c4dec48..204f5e6a0d 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))
@@ -715,6 +721,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))
@@ -895,6 +904,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
@@ -1261,6 +1273,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'}
@@ -5529,6 +5569,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==}
 
@@ -5565,6 +5608,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==}
 
@@ -5625,6 +5671,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==}
 
@@ -5678,6 +5728,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'}
@@ -5946,9 +5999,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==}
 
@@ -5996,10 +6057,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==}
 
@@ -6507,6 +6576,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==}
 
@@ -6523,6 +6596,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==}
 
@@ -6663,6 +6740,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'}
@@ -6727,6 +6807,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==}
 
@@ -6904,6 +6987,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==}
 
@@ -6936,6 +7023,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'}
@@ -6962,6 +7053,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==}
 
@@ -7129,6 +7224,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==}
 
@@ -7241,6 +7339,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
@@ -7820,6 +7927,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'}
@@ -7857,6 +7968,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'}
@@ -7871,6 +7985,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==}
 
@@ -7918,6 +8035,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}
@@ -7949,6 +8069,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==}
 
@@ -8023,6 +8147,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'}
@@ -8543,6 +8670,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'}
@@ -8754,6 +8887,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:
@@ -8783,6 +8920,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}
@@ -8995,6 +9136,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==}
 
@@ -9023,6 +9167,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==}
 
@@ -9148,6 +9296,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==}
 
@@ -9326,6 +9480,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'}
@@ -9395,6 +9553,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}
@@ -9419,6 +9580,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==}
 
@@ -9487,6 +9655,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'}
@@ -9502,9 +9677,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==}
 
@@ -9551,6 +9734,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]
@@ -10349,6 +10535,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==}
 
@@ -10358,6 +10548,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'}
@@ -10368,6 +10562,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==}
 
@@ -10490,6 +10697,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'}
@@ -10501,6 +10712,14 @@ 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'}
+    hasBin: true
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -10607,6 +10826,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)
@@ -11108,6 +11336,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':
@@ -15435,6 +15688,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: {}
@@ -15479,6 +15739,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
@@ -15545,6 +15811,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:
@@ -15604,6 +15876,9 @@ snapshots:
     dependencies:
       readdirp: 5.0.0
 
+  chownr@1.1.4:
+    optional: true
+
   chownr@3.0.0: {}
 
   ci-info@2.0.0: {}
@@ -15861,8 +16136,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: {}
@@ -15881,8 +16168,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: {}
@@ -16673,6 +16968,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
@@ -16695,6 +16993,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: {}
@@ -16814,6 +17121,9 @@ snapshots:
 
   fresh@2.0.0: {}
 
+  fs-constants@1.0.0:
+    optional: true
+
   fs-extra@11.3.6:
     dependencies:
       graceful-fs: 4.2.11
@@ -16883,6 +17193,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:
@@ -17185,6 +17498,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:
@@ -17233,6 +17551,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:
@@ -17261,6 +17587,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:
@@ -17413,6 +17744,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:
@@ -17507,6 +17841,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: {}
@@ -18312,6 +18676,9 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
+  mimic-response@3.1.0:
+    optional: true
+
   min-indent@1.0.1: {}
 
   miniflare@4.20260212.0:
@@ -18362,6 +18729,9 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimist@1.2.8:
+    optional: true
+
   minipass@7.1.2: {}
 
   minizlib@3.1.0:
@@ -18372,6 +18742,9 @@ snapshots:
 
   mitt@3.0.1: {}
 
+  mkdirp-classic@0.5.3:
+    optional: true
+
   mlly@1.8.0:
     dependencies:
       acorn: 8.15.0
@@ -18420,6 +18793,9 @@ snapshots:
 
   nanotar@0.2.0: {}
 
+  napi-build-utils@2.0.0:
+    optional: true
+
   napi-postinstall@0.3.4: {}
 
   natural-compare@1.4.0: {}
@@ -18541,6 +18917,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: {}
@@ -18714,6 +19095,9 @@ snapshots:
       - xml2js
       - yaml
 
+  nwsapi@2.2.24:
+    optional: true
+
   nypm@0.6.4:
     dependencies:
       citty: 0.2.0
@@ -19274,6 +19658,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:
@@ -19449,6 +19849,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
@@ -19492,6 +19900,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
@@ -19819,6 +20234,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
@@ -19846,6 +20264,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:
@@ -20071,6 +20494,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
@@ -20259,6 +20692,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:
@@ -20335,6 +20771,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
@@ -20375,6 +20814,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
@@ -20455,6 +20911,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
@@ -20465,8 +20929,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: {}
@@ -20493,6 +20967,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
 
@@ -21280,18 +21759,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
@@ -21404,6 +21905,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
@@ -21413,6 +21917,14 @@ snapshots:
 
   xmlbuilder@11.0.1: {}
 
+  xmlchars@2.2.0:
+    optional: true
+
+  xss@1.0.15:
+    dependencies:
+      commander: 2.20.3
+      cssfilter: 0.0.10
+
   xtend@4.0.2: {}
 
   xxhash-wasm@1.1.0: {}
diff --git a/scripts/collect-changelog.ts b/scripts/collect-changelog.ts
index ab9000f479..e572018f51 100644
--- a/scripts/collect-changelog.ts
+++ b/scripts/collect-changelog.ts
@@ -1,4 +1,4 @@
-import { execSync } from 'child_process'
+import { execFileSync, execSync } from 'child_process'
 import chalk from 'chalk'
 import * as fs from 'fs'
 import * as path from 'path'
@@ -42,6 +42,11 @@ interface CommentInfo {
 	body: string
 }
 
+interface AppRelease {
+	tag: string
+	date: string
+}
+
 function parseArgs(argv: string[]): {
 	version?: string
 	dryRun: boolean
@@ -230,6 +235,19 @@ async function fetchMergedPRs(token: string, sinceDate: string): Promise<PRInfo[
 	return prs
 }
 
+function getLatestAppRelease(): AppRelease {
+	const tag = execFileSync(
+		'git',
+		['describe', '--tags', '--abbrev=0', '--match', 'v[0-9]*', 'origin/main'],
+		{ encoding: 'utf-8' },
+	).trim()
+	const date = execFileSync('git', ['log', '-1', '--format=%cI', tag], {
+		encoding: 'utf-8',
+	}).trim()
+
+	return { tag, date }
+}
+
 async function fetchBotComment(token: string, prNumber: number): Promise<CommentInfo | null> {
 	const res = await githubFetch(
 		`/repos/${REPO}/issues/${prNumber}/comments?per_page=100`,
@@ -314,11 +332,20 @@ async function main() {
 		const prodDate = execSync('git log -1 --format=%aI origin/prod', { encoding: 'utf-8' }).trim()
 		console.log(chalk.gray(`Last prod commit: ${prodDate}`))
 
-		prs = await fetchMergedPRs(token, prodDate)
-		console.log(chalk.gray(`Found ${prs.length} merged PR(s) since last prod deploy`))
+		let sinceDate = prodDate
+		if (args.version) {
+			const appRelease = getLatestAppRelease()
+			console.log(chalk.gray(`Last app release: ${appRelease.tag} (${appRelease.date})`))
+			if (new Date(appRelease.date) < new Date(sinceDate)) {
+				sinceDate = appRelease.date
+			}
+		}
+
+		prs = await fetchMergedPRs(token, sinceDate)
+		console.log(chalk.gray(`Found ${prs.length} merged PR(s) since ${sinceDate}`))
 
 		if (prs.length === 0) {
-			console.log(chalk.yellow('No merged PRs found since last prod deploy'))
+			console.log(chalk.yellow(`No merged PRs found since ${sinceDate}`))
 			return
 		}
 	}