diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 33afd4d216..28764564ba 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -10,6 +10,7 @@ import {
 } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
+	ArrowLeftRightIcon,
 	ChevronLeftIcon,
 	ChevronRightIcon,
 	CompassIcon,
@@ -23,20 +24,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,
 	NewsArticleCard,
 	NotificationPanel,
@@ -51,6 +57,7 @@ import {
 	useDebugLogger,
 	useFormatBytes,
 	useHostingIntercom,
+	UserRoleIcon,
 	useVIntl,
 } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
@@ -62,7 +69,7 @@ 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 +103,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 +116,22 @@ 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 {
+	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,
@@ -201,6 +217,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(
@@ -425,6 +442,11 @@ const stateInitialized = ref(false)
 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({
@@ -457,6 +479,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,6 +488,7 @@ 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)
 	clearDelayedUpdatePopup()
 
@@ -480,7 +504,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' },
@@ -542,13 +565,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 +695,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 +712,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 +725,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')
@@ -984,6 +1026,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 +1122,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 +1135,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 +1148,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]))
+
+	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,
+	}))
+})
 
-	await logout().catch(handleError)
-	await fetchCredentials()
+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 +1391,7 @@ onMounted(() => {
 })
 
 const accounts = ref(null)
+const friendsList = ref(null)
 provide('accountsCard', accounts)
 
 useAppEvent('command', handleCommand, appEvents)
@@ -1711,12 +1919,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 +2010,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)"
@@ -1819,59 +2054,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">
@@ -2020,7 +2265,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
@@ -2190,7 +2439,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);
 }
@@ -2336,7 +2587,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..d6f9850456 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',
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 1b13a40cd5..561db86a5b 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,
@@ -430,34 +369,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, [
+			{
+				id: 'stop',
+				label: formatMessage(instanceActionMessages.stop),
+				icon: StopCircleIcon,
+				shown: item.playing,
+				tone: 'red',
+				action: () => void item.stop(null, 'InstanceGridContextMenu'),
+			},
 			{
-				name: item.instance.group_ids.includes(FAVORITES_GROUP_ID)
-					? 'remove_from_favorites'
-					: 'add_to_favorites',
+				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..d1dfbec528 100644
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -222,7 +222,17 @@ 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()
+}
+
+defineExpose({ show, showProfile, showFeatureFlags })
 
 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/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/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>
+					<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>
-					<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,
-						}"
+				<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"
 					>
-						<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>
+						<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..509fbdd27d 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'
@@ -225,6 +226,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 +262,364 @@ 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.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: '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',
+				action: () => emit('stop'),
+			}
+		: {
+				id: 'play',
+				label: formatMessage(messages.playWorld),
+				icon: PlayIcon,
+				tone: 'brand',
+				disabled: playDisabled.value,
+				tooltip: playTooltip.value ?? undefined,
+				action: () => emit('play'),
+			},
+	{ type: 'divider' },
+	...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 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>
-								<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>
-						<template v-else>
-							<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
-							{{ formatMessage(messages.offline) }}
-						</template>
+							<template v-else>
+								<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
+								{{ formatMessage(messages.offline) }}
+							</template>
+						</div>
 					</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,
-						}"
-					>
-						<template v-if="world.last_played">
-							{{ formatRelativeTime(dayjs(world.last_played).toISOString()) }}
+					<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>
-						<template v-else> {{ formatMessage(messages.notPlayedYet) }} </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>
-			<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,
-						},
-					]"
+				<div
+					class="font-semibold flex items-center gap-1 justify-center text-center"
+					:class="world.type === 'singleplayer' && world.hardcore ? `text-red` : 'text-secondary'"
 				>
-					<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 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 #delete>
-						<TrashIcon aria-hidden="true" />
-						{{
-							formatMessage(
-								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
-							)
-						}}
+					<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>
-				</TeleportOverflowMenu>
+				</div>
+				<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+					<Button v-if="showStop" type="colored" color="red" @click="emit('stop')">
+						<StopCircleIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.stopButton) }}
+					</Button>
+					<Button
+						v-else
+						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>
-	</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/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(
-	active,
+	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, 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/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/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/locales/ar-SA/index.json b/apps/app-frontend/src/locales/ar-SA/index.json
index 81929b073c..b272e74cca 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": "الصورة التالية"
   },
diff --git a/apps/app-frontend/src/locales/cs-CZ/index.json b/apps/app-frontend/src/locales/cs-CZ/index.json
index 44e3a1988f..181f195d02 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"
   },
diff --git a/apps/app-frontend/src/locales/de-CH/index.json b/apps/app-frontend/src/locales/de-CH/index.json
index a0ae9c3c38..6bf37d6c82 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"
   },
diff --git a/apps/app-frontend/src/locales/de-DE/index.json b/apps/app-frontend/src/locales/de-DE/index.json
index aa47fad67a..545562d90b 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"
   },
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index b68c532493..96412bd7ae 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"
   },
@@ -851,6 +863,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 +914,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 +1040,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 +1238,39 @@
   "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.remove-account": {
+    "message": "Remove account"
+  },
   "app.nav.sign-in-to-modrinth-account": {
-    "message": "Sign in to a Modrinth account"
+    "message": "Sign into Modrinth"
   },
-  "app.nav.signed-in-as": {
-    "message": "Signed in as <user>{username}</user>"
+  "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 +1280,6 @@
   "app.navigation.home": {
     "message": "Home"
   },
-  "app.navigation.more-options": {
-    "message": "More options"
-  },
   "app.navigation.next-image": {
     "message": "Next image"
   },
@@ -1262,6 +1292,9 @@
   "app.notification.warning": {
     "message": "Warning"
   },
+  "app.project.actions.label": {
+    "message": "Project actions"
+  },
   "app.project.coming-soon": {
     "message": "Coming soon"
   },
@@ -1304,12 +1337,21 @@
   "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..."
   },
@@ -1808,6 +1850,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"
   },
@@ -2510,6 +2555,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"
   },
@@ -2552,6 +2600,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..4e5a4540ed 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"
   },
diff --git a/apps/app-frontend/src/locales/es-ES/index.json b/apps/app-frontend/src/locales/es-ES/index.json
index 99eb6b55a6..b4f77d9cfc 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"
   },
diff --git a/apps/app-frontend/src/locales/fr-FR/index.json b/apps/app-frontend/src/locales/fr-FR/index.json
index 59f6fa43fa..74ddb3d96d 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"
   },
diff --git a/apps/app-frontend/src/locales/hu-HU/index.json b/apps/app-frontend/src/locales/hu-HU/index.json
index 0bba14ae2d..d8ba639d3b 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"
   },
diff --git a/apps/app-frontend/src/locales/it-IT/index.json b/apps/app-frontend/src/locales/it-IT/index.json
index 0aec5b5474..9164ec714a 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"
   },
diff --git a/apps/app-frontend/src/locales/ja-JP/index.json b/apps/app-frontend/src/locales/ja-JP/index.json
index 3311ccf012..54b1f4c9bb 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+にアップグレード"
   },
diff --git a/apps/app-frontend/src/locales/ko-KR/index.json b/apps/app-frontend/src/locales/ko-KR/index.json
index 27599c952a..34c40a6f0c 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+ 로 업그레이드"
   },
diff --git a/apps/app-frontend/src/locales/nl-NL/index.json b/apps/app-frontend/src/locales/nl-NL/index.json
index 80a3605b0d..23179a67e1 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+"
   },
diff --git a/apps/app-frontend/src/locales/pl-PL/index.json b/apps/app-frontend/src/locales/pl-PL/index.json
index 3e490e7386..95286f34be 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"
   },
diff --git a/apps/app-frontend/src/locales/pt-BR/index.json b/apps/app-frontend/src/locales/pt-BR/index.json
index 6b4ee7402e..16563101c8 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+"
   },
diff --git a/apps/app-frontend/src/locales/ru-RU/index.json b/apps/app-frontend/src/locales/ru-RU/index.json
index 35aeedbd62..7f5170a067 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": "Следующее изображение"
   },
diff --git a/apps/app-frontend/src/locales/sv-SE/index.json b/apps/app-frontend/src/locales/sv-SE/index.json
index 984ac58016..73cc72e16d 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"
   },
diff --git a/apps/app-frontend/src/locales/tr-TR/index.json b/apps/app-frontend/src/locales/tr-TR/index.json
index 1503d3671a..7cfcc12c2b 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"
   },
diff --git a/apps/app-frontend/src/locales/uk-UA/index.json b/apps/app-frontend/src/locales/uk-UA/index.json
index af8616fb5e..68b26c2da8 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": "Наступне зображення"
   },
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 721f1d1b77..6354300bf0 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": "下一张图片"
   },
diff --git a/apps/app-frontend/src/locales/zh-TW/index.json b/apps/app-frontend/src/locales/zh-TW/index.json
index 16b4c0d584..2b3d423594 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": "下一張圖片"
   },
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index dc586a74e9..abb2c70bff 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',
@@ -1331,12 +1333,9 @@ provideBrowseManager({
 	<div class="flex flex-col gap-3 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/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/index.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue
index 4aadcbd485..98d5823eac 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
@@ -200,6 +200,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/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/layout.vue b/apps/app-frontend/src/pages/instance/layout.vue
index eec9e3b13f..571af0d3a5 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">
@@ -109,6 +100,7 @@ import {
 } from '@modrinth/assets'
 import {
 	commonMessages,
+	ContextMenu,
 	defineMessages,
 	injectNotificationManager,
 	NavTabs,
@@ -122,7 +114,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'
@@ -190,6 +181,10 @@ 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' },
 	worldsTab: { id: 'app.instance.tab.worlds', defaultMessage: 'Worlds' },
@@ -765,63 +760,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/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, [
-		{
-			name: 'install',
-		},
+	const project = data.value
+	options.value.open(event, [
 		{
-			type: 'divider',
+			id: 'install',
+			label: formatMessage(commonMessages.installButton),
+			icon: DownloadIcon,
+			action: () => install(null),
 		},
+		{ type: 'divider' },
 		{
-			name: 'open_link',
+			id: 'open_link',
+			label: formatMessage(commonMessages.openInModrinthButton),
+			icon: GlobeIcon,
+			action: () => openProjectLink(project),
 		},
 		{
-			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/build.rs b/apps/app/build.rs
index f1347fe3e6..5af039fa05 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(
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/frontend/src/app.vue b/apps/frontend/src/app.vue
index 4208db0280..f0a1006e4a 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -5,18 +5,31 @@
 			<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()
@@ -24,6 +37,20 @@ 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 6063423a50..52c4d961fa 100644
--- a/apps/frontend/src/components/ui/OrganizationPageHeader.vue
+++ b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
@@ -69,9 +69,9 @@ import {
 import { ButtonLink, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
+	type ButtonMenuOption,
 	commonMessages,
 	defineMessages,
-	type OverflowMenuOption,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
@@ -132,7 +132,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/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>
+				<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>
+				</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)]': 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"
+					<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)"
 						>
-							{{ 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>
+							<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>
 
-				<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"
-					/>
+					<div class="h-px w-full bg-surface-5"></div>
 
-					<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"
-					/>
+					<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"
+						/>
 
-					<HCaptcha
-						v-if="globals?.captcha_enabled && emailModel && passwordModel"
-						:ref="onSetCaptchaRef"
-						v-model="tokenModel"
-					/>
+						<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"
+						/>
 
-					<Button
-						type="colored"
-						color="brand"
-						class="!w-full"
-						:disabled="globals?.captcha_enabled ? !tokenModel : false"
-						@click="onPasswordSignIn()"
-					>
-						{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
-					</Button>
+						<HCaptcha
+							v-if="globals?.captcha_enabled && emailModel && passwordModel"
+							:ref="onSetCaptchaRef"
+							v-model="tokenModel"
+						/>
 
-					<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,
-							}"
+						<Button
+							type="colored"
+							color="brand"
+							class="!w-full"
+							:disabled="globals?.captcha_enabled ? !tokenModel : false"
+							@click="onPasswordSignIn()"
 						>
-							{{ 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>
+							{{ 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/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 3c793278c0..bdc5255ed5 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -61,6 +61,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',
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index e6f5b3f9a4..432465712d 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -25,6 +25,7 @@ import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/modera
 import { Button, ButtonLink, IconButton, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
+	type ButtonMenuOption,
 	Collapsible,
 	CollapsibleRegion,
 	commonMessages,
@@ -32,7 +33,6 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	NavTabs,
-	type OverflowMenuOption,
 	Toggle,
 	useFormatBytes,
 	useFormatDateTime,
@@ -116,7 +116,7 @@ const isProjectApproved = computed(() => {
 })
 
 const isLoadingStatusAction = ref(false)
-const projectStatusActions = computed<OverflowMenuOption[]>(() => [
+const projectStatusActions = computed<ButtonMenuOption[]>(() => [
 	{
 		id: 'approve',
 		label: 'Approve',
diff --git a/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue b/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
index e3839dd4a6..eadf065502 100644
--- a/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
+++ b/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
@@ -350,7 +350,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/report/ReportInfo.vue b/apps/frontend/src/components/ui/report/ReportInfo.vue
index 1de7dfb119..3257fa4360 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/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index 857f253886..01ce617431 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -95,10 +95,10 @@ import { ChevronDownIcon, MessageIcon, ReplyIcon, SendIcon } from '@modrinth/ass
 import type { QuickReply } from '@modrinth/moderation'
 import { Button, 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 +110,7 @@ import ThreadMessage from './ThreadMessage.vue'
 
 const { addNotification } = injectNotificationManager()
 
-const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
+const visibleQuickReplies = computed<ButtonMenuOption[]>(() => {
 	const replies = props.quickReplies
 	const context = props.quickReplyContext
 
@@ -127,7 +127,7 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 					id: reply.label,
 					label: reply.label,
 					action: () => handleQuickReply(reply, context),
-				}) as OverflowMenuOption,
+				}) as ButtonMenuOption,
 		)
 })
 
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..b092fe26a4 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,26 @@ const getQueryString = (value: QueryValue) => {
 	return value ?? null
 }
 
-export const useAuth = async (oldToken: string | null | undefined = null) => {
+export const useAuth = async (
+	oldToken: string | null | undefined = null,
+	route?: AuthInitRoute,
+) => {
 	const auth = useState<AuthState>('auth', () => ({
 		user: null,
 		token: '',
 	}))
 
 	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 +81,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 +91,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 +180,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 +200,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/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..c168f55f40 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>
-
-							<Button type="quiet" color="red" native-type="button" class="ml-auto" @click="logout">
+							<UserRoleIcon :role="auth.user.role" />
+
+							<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,30 +100,42 @@
 </template>
 
 <script setup>
-import { AnnoyedRinthbot, LogInIcon, SadRinthbot } from '@modrinth/assets'
+import { AnnoyedRinthbot, LogInIcon, LogOutIcon, SadRinthbot } from '@modrinth/assets'
 import {
+	AccountChoiceList,
+	AccountSwitchOverlay,
 	Avatar,
 	Button,
 	ButtonLink,
 	commonMessages,
 	defineMessage,
 	defineMessages,
+	injectNotificationManager,
 	IntlFormatted,
 	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 { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+const isSwitchingAccount = useIsSwitchingAccount()
 
 const props = defineProps({
 	error: {
@@ -130,8 +157,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..03f6206080 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": "قبول الكل"
   },
@@ -2648,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/cs-CZ/index.json b/apps/frontend/src/locales/cs-CZ/index.json
index f6d1d7b698..47b14238f9 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"
   },
diff --git a/apps/frontend/src/locales/da-DK/index.json b/apps/frontend/src/locales/da-DK/index.json
index 764723bd3e..028027efb7 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"
   },
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index c87485e341..6eb8f1743a 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"
   },
@@ -2651,9 +2648,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..4810d6f57a 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"
   },
@@ -2651,9 +2648,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..b8bd1fa792 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"
   },
@@ -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..59c35af786 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"
   },
@@ -2651,9 +2648,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..b1a99dfeb0 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"
   },
@@ -2642,9 +2639,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..1e4c7d96fe 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ää"
   },
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..bef42a4d02 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"
   },
@@ -2651,9 +2648,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..6f591e8c59 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"
   },
@@ -2504,9 +2501,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..39ba5b093a 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"
   },
@@ -2642,9 +2639,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..4a680eba74 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": "すべて受け入れる"
   },
@@ -2537,9 +2534,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..0a79d5edbd 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": "모두 수용"
   },
@@ -2651,9 +2648,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..837d70cd4c 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"
   },
@@ -2156,9 +2153,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..271e5c5ae0 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"
   },
@@ -2648,9 +2645,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..248b7970c7 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"
   },
@@ -2078,9 +2075,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..43b9e947a3 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"
   },
@@ -2645,9 +2642,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..0b3d1464b3 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"
   },
@@ -2651,9 +2648,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..1a207601b3 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"
   },
@@ -2324,9 +2321,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..746dee5cc6 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": "Принять всё"
   },
@@ -2645,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/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..ff2e4f8ac6 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"
   },
@@ -2462,9 +2459,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..0cd2556c57 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"
   },
@@ -2651,9 +2648,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..d84254ee9b 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": "Прийняти всі"
   },
@@ -2648,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/vi-VN/index.json b/apps/frontend/src/locales/vi-VN/index.json
index 7ea9248194..6c48f20a02 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ả"
   },
@@ -2321,9 +2318,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..10b73ab902 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": "全部接受"
   },
@@ -2651,9 +2648,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..c381e5b71b 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": "全部接受"
   },
@@ -2651,9 +2648,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 376964b839..3cb3d2d4cf 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,
 	Pagination,
@@ -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/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-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
-					</Button>
-				</div>
+	<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>
 
-			<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"
+		<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"
 					>
-						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"
+						{{ 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)"
 					>
-						<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>
-				</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>
+						<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>
-			</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="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>
 
-						<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>
-
-							<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>
+						<div class="mt-1 truncate text-xs text-secondary">
+							/_internal/templates/doc/{{ id }}
 						</div>
-					</li>
-				</ul>
-			</Card>
+					</div>
+
+					<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-2 text-xs text-secondary">
+			<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...
-					</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...
+				<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 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 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>
+			</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>
 	</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/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/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index 00605dae96..bf8b6452eb 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/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 d32602bf28..d066088c0f 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/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/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,24 +54,70 @@ 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)
 }
 
 #[tracing::instrument]
 pub async fn logout() -> crate::Result<()> {
+    let state = crate::State::get().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 let Some(current) = current {
-        ModrinthCredentials::remove(&current.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}");
     }
-    state.friends_socket.disconnect().await?;
 
     Ok(())
 }
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/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/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..5f0204fb04 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -59,6 +59,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'
@@ -97,6 +98,7 @@ 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'
@@ -123,6 +125,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'
@@ -209,6 +212,7 @@ 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 +251,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'
@@ -503,6 +508,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
@@ -541,6 +547,7 @@ 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
@@ -567,6 +574,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
@@ -653,6 +661,7 @@ 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 +700,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
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/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/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/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/styles/classes.scss b/packages/assets/styles/classes.scss
index 35bb7a1a1d..975957248f 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 {
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/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/src/components/base/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index 72465ce38b..8747b25649 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,
 		}"
@@ -72,7 +72,7 @@ const props = withDefaults(
 		size?: string
 		circle?: boolean
 		noShadow?: boolean
-		disableConditionalIconPadding?: boolean
+		padTransparentCorners?: boolean
 		loading?: 'eager' | 'lazy'
 		raised?: boolean
 		tintBy?: string | null
@@ -83,7 +83,7 @@ const props = withDefaults(
 		size: '2rem',
 		circle: false,
 		noShadow: false,
-		disableConditionalIconPadding: false,
+		padTransparentCorners: false,
 		loading: 'eager',
 		raised: false,
 		tintBy: null,
@@ -143,8 +143,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
@@ -152,6 +150,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/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 1da658f1ea..e6755f6e23 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,7 +105,7 @@
 						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'"
 					@mousedown.stop
 					@keydown="handleDropdownKeydown"
@@ -387,6 +387,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 +478,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 +619,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 +656,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 +669,7 @@ async function updateDropdownPosition() {
 
 	await nextTick()
 
+	triggerRect = getTriggerRect(trigger)
 	const dropdownRect = {
 		width: dropdownRef.value.offsetWidth,
 		height: dropdownRef.value.offsetHeight,
@@ -635,15 +734,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 +835,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 +1030,10 @@ onClickOutside(
 	{ ignore: outsideClickIgnoreTargets },
 )
 
+const isClient = ref(false)
+
 onMounted(() => {
+	isClient.value = true
 	window.addEventListener('resize', handleWindowResize)
 })
 
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 05c33a86b9..25cc278941 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"
@@ -192,7 +192,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 +425,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 +607,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 +1981,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..0ff25d673c 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"
@@ -125,7 +125,7 @@
 					<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 +133,7 @@
 								:icon="SearchIcon"
 								type="text"
 								:placeholder="searchPlaceholder"
-								wrapper-class="grow"
+								wrapper-class="grow m-2"
 								@input="handleSearchInput"
 								@keydown="handleSearchKeydown"
 							/>
@@ -1390,7 +1390,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/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>
+					{{ option.label }}
+				</div>
 
-						<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>
+				<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>
-				</div>
-			</div>
-		</Transition>
+					<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..3ee76b3272
--- /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 min-w-48 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..89e774e749 100644
--- a/packages/ui/src/components/base/buttons/index.ts
+++ b/packages/ui/src/components/base/buttons/index.ts
@@ -1,6 +1,7 @@
 export { default as Button } from './Button.vue'
 export { default as ButtonGroup } from './ButtonGroup.vue'
 export { default as ButtonLink } from './ButtonLink.vue'
+export { default as 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 +12,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 f9a9429837..ff2d5616e0 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -13,6 +13,7 @@ export { default as BulletDivider } from './BulletDivider.vue'
 export { default as Button } from './buttons/Button.vue'
 export { default as ButtonGroup } from './buttons/ButtonGroup.vue'
 export { default as ButtonLink } from './buttons/ButtonLink.vue'
+export { default as 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'
@@ -21,14 +22,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'
diff --git a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
index 1e4e5adeb6..4522dff89d 100644
--- a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
@@ -19,7 +19,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/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/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 a99f3eadaf..8d2e675dba 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>
@@ -103,7 +103,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'
@@ -228,7 +228,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 route = useRoute()
 
-const allChannels = ref(['release', 'beta', 'alpha'])
+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 route = useRoute()
+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,121 +201,180 @@ 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)
 	}
+	return Array.from(platformSet)
+})
 
-	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[]
+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 filters
+	return ENVIRONMENT_FILTER_VALUES.filter((environment) => environmentSet.has(environment))
 })
 
-const gameVersionOptions = computed<MultiSelectOption<string>[]>(() =>
-	filterOptions.value.gameVersion.map((version) => ({
-		value: version,
-		label: version,
-	})),
+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),
-	})),
-)
+if (selectedGameVersions.value.some((version) => !isReleaseGameVersion(version))) {
+	showSnapshots.value = true
+}
 
-const platformOptions = computed<MultiSelectOption<string>[]>(() =>
-	filterOptions.value.platform.map((platform) => ({
-		value: platform,
-		label: formatLoader(formatMessage, platform),
-	})),
-)
+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),
+			})),
+		})
+	}
 
-const selectedChannels = ref<string[]>([])
-const selectedGameVersions = ref<string[]>([])
-const selectedPlatforms = ref<string[]>([])
+	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,
+			})),
+		})
+	}
 
-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 (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 (selectedGameVersions.value.some((version) => !isReleaseGameVersion(version))) {
-	showSnapshots.value = true
+	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 selectedFiltersOfType(type: FilterType) {
-	if (type === 'channel') {
-		return selectedChannels
-	} else if (type === 'gameVersion') {
-		return selectedGameVersions
-	} else {
-		return selectedPlatforms
+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 toggleFilters(type: FilterType, filters: Filter[]) {
-	const selected = selectedFiltersOfType(type)
-	const allSelected = filters.every((filter) => selected.value.includes(filter))
+function updateSelected(type: FilterType, values: string[]) {
+	selectedFilters.value = {
+		...selectedFilters.value,
+		[type]: values,
+	}
+	updateFilters()
+}
 
-	selected.value = allSelected
-		? selected.value.filter((x) => !filters.includes(x))
-		: [...selected.value, ...filters.filter((filter) => !selected.value.includes(filter))]
+function clearCategory(type: FilterType) {
+	updateSelected(type, [])
+}
 
+function clearAllFilters() {
+	selectedFilters.value = {
+		channel: [],
+		gameVersion: [],
+		platform: [],
+		environment: [],
+	}
 	updateFilters()
 }
 
-function toggleFilter(type: FilterType, filter: Filter) {
+function selectedFiltersOfType(type: FilterType) {
+	return selectedFilters.value[type] ?? []
+}
+
+function toggleFilters(type: FilterType, filters: Filter[]) {
 	const selected = selectedFiltersOfType(type)
+	const allSelected = filters.every((filter) => selected.includes(filter))
 
-	selected.value = selected.value.includes(filter)
-		? selected.value.filter((x) => x !== filter)
-		: [...selected.value, filter]
+	selectedFilters.value = {
+		...selectedFilters.value,
+		[type]: allSelected
+			? selected.filter((x) => !filters.includes(x))
+			: [...selected, ...filters.filter((filter) => !selected.includes(filter))],
+	}
 
 	updateFilters()
 }
 
-function updateSelectedGameVersions(versions: string[]) {
-	selectedGameVersions.value = versions
-	updateFilters()
-}
+function toggleFilter(type: FilterType, filter: Filter) {
+	const selected = selectedFiltersOfType(type)
 
-function updateSelectedChannels(channels: string[]) {
-	selectedChannels.value = channels
-	updateFilters()
-}
+	selectedFilters.value = {
+		...selectedFilters.value,
+		[type]: selected.includes(filter)
+			? selected.filter((x) => x !== filter)
+			: [...selected, filter],
+	}
 
-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/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/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..fb47d43da8 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),
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 7311b4fc66..d46201021d 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -229,7 +229,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" />
@@ -295,7 +295,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) }}
@@ -702,6 +702,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 ?? [])
@@ -796,6 +809,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/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 8f9dabe99c..e8c5ab399b 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2609,6 +2609,9 @@
   "label.yes": {
     "defaultMessage": "Yes"
   },
+  "layout.account-switcher.switching": {
+    "defaultMessage": "Switching accounts..."
+  },
   "locale.cs-CZ": {
     "defaultMessage": "Czech"
   },
@@ -4016,6 +4019,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}"
   },
@@ -6668,6 +6677,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"
   },
@@ -6678,7 +6693,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"
@@ -6693,7 +6708,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/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/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/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/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..48abfbb434 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,13 @@ 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
 		close()
 	}
 
@@ -132,7 +155,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 +181,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 +201,9 @@ export function useAnchoredTeleport(
 		panelStyle,
 		anchorStyle,
 		resolvedSide,
+		expandOrigin,
 		open,
 		close,
+		updatePosition,
 	}
 }