diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7522198819..af3d483835 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,7 +9,7 @@
 	"files.insertFinalNewline": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit",
-		"source.organizeImports": "always"
+		"source.organizeImports": "never"
 	},
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[vue]": {
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 4e31d5a82c..df22421aa6 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -11,7 +11,6 @@ import {
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
-	CheckIcon,
 	CompassIcon,
 	DownloadIcon,
 	ExternalIcon,
@@ -41,7 +40,6 @@ import {
 	defineMessages,
 	I18nDebugPanel,
 	LoadingBar,
-	ModrinthHostingLogo,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
@@ -86,7 +84,6 @@ import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'
 import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyInstalledModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
-import ServerInvitePopupBody from '@/components/ui/notifications/ServerInvitePopupBody.vue'
 import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
@@ -804,6 +801,11 @@ async function declineServerInviteNotification(notification) {
 	}
 }
 
+function openServerInviteInviterProfile(inviterName) {
+	if (!inviterName) return
+	openUrl(`${config.siteUrl}/user/${encodeURIComponent(inviterName)}`)
+}
+
 async function handleLiveNotification(notification) {
 	if (notification?.body?.type !== 'server_invite' || notification.read) return
 	if (displayedServerInviteNotifications.has(notification.id)) return
@@ -817,30 +819,17 @@ async function handleLiveNotification(notification) {
 		typeof inviterId === 'string' ? await get_user(inviterId, 'bypass').catch(() => null) : null
 
 	addPopupNotification({
-		title: 'Modrinth Hosting',
-		titleLogo: ModrinthHostingLogo,
-		bodyComponent: ServerInvitePopupBody,
-		bodyProps: {
-			inviterName: invitedBy?.username ?? null,
-			inviterAvatarUrl: invitedBy?.avatar_url ?? null,
-			serverName,
-		},
-		type: 'info',
-		buttons: [
-			{
-				label: 'Accept',
-				action: () => acceptServerInviteNotification(notification),
-				icon: CheckIcon,
-				color: 'brand',
-			},
-			{
-				label: 'Decline',
-				action: () => declineServerInviteNotification(notification),
-				icon: XIcon,
-				color: 'red',
-			},
-		],
+		title: serverName,
 		autoCloseMs: null,
+		toast: {
+			type: 'server-invite',
+			actorName: invitedBy?.username ?? null,
+			actorAvatarUrl: invitedBy?.avatar_url ?? null,
+			entityName: serverName,
+			onAccept: () => acceptServerInviteNotification(notification),
+			onDecline: () => declineServerInviteNotification(notification),
+			onOpenActor: () => openServerInviteInviterProfile(invitedBy?.username ?? null),
+		},
 	})
 }
 
diff --git a/apps/app-frontend/src/components/ui/AppActionBar.vue b/apps/app-frontend/src/components/ui/AppActionBar.vue
index cdcd3d0b1f..9b18e85951 100644
--- a/apps/app-frontend/src/components/ui/AppActionBar.vue
+++ b/apps/app-frontend/src/components/ui/AppActionBar.vue
@@ -133,6 +133,7 @@ import {
 	type PopupNotificationProgressItem,
 	useVIntl,
 } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { Dropdown } from 'floating-vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -284,6 +285,7 @@ function goToTerminal(path?: string) {
 }
 
 const currentLoadingBars = ref<LoadingBar[]>([])
+const currentLoadingBarIconUrls = ref<Record<string, string | null>>({})
 const notificationId = ref<string | number | null>(null)
 const dismissed = ref(false)
 
@@ -303,6 +305,16 @@ function getLoadingText(loadingBar: LoadingBar): string {
 	return loadingBar.message ? `${percent}% ${loadingBar.message}` : `${percent}%`
 }
 
+function getDisplayIconUrl(icon: string | null | undefined): string | null {
+	if (!icon) {
+		return null
+	}
+	if (/^(https?:|data:|blob:|asset:|tauri:)/.test(icon)) {
+		return icon
+	}
+	return convertFileSrc(icon)
+}
+
 function getNotification(): PopupNotification | null {
 	if (!notificationId.value) {
 		return null
@@ -326,6 +338,7 @@ function buildDownloadItems(): PopupNotificationProgressItem[] {
 		id: getLoadingBarKey(bar),
 		title: bar.title ?? '',
 		text: getLoadingText(bar),
+		iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
 		progress: getLoadingProgress(bar),
 		waiting: !bar.total || bar.total <= 0,
 	}))
@@ -400,6 +413,32 @@ async function refreshLoadingBars() {
 		.map(formatLoadingBars)
 		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
 
+	const profilePaths = Array.from(
+		new Set(
+			currentLoadingBars.value
+				.map((bar) => bar.bar_type?.profile_path)
+				.filter((path): path is string => !!path),
+		),
+	)
+	const profiles = profilePaths.length
+		? await getInstances(profilePaths).catch((error) => {
+				handleError(error)
+				return []
+			})
+		: []
+	const profileIconUrls = new Map(
+		profiles.map((profile) => [profile.path, getDisplayIconUrl(profile.icon_path)]),
+	)
+	currentLoadingBarIconUrls.value = Object.fromEntries(
+		currentLoadingBars.value.map((bar) => {
+			const barIconUrl = getDisplayIconUrl(bar.bar_type?.icon)
+			const profileIconUrl = bar.bar_type?.profile_path
+				? profileIconUrls.get(bar.bar_type.profile_path)
+				: null
+			return [getLoadingBarKey(bar), barIconUrl ?? profileIconUrl ?? null]
+		}),
+	)
+
 	currentLoadingBars.value.sort((a, b) => {
 		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
 		const bKey = `${b.loading_bar_uuid ?? b.id ?? ''}`
diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
index 4b1e5af378..a9edf12ef3 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -8,6 +8,7 @@ import {
 	InstallationSettingsLayout,
 	provideAppBackup,
 	provideInstallationSettings,
+	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
@@ -34,9 +35,17 @@ import type { Manifest } from '../../../helpers/types'
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
+const debug = useDebugLogger('AppInstallationSettings')
 
 const { instance, offline, isMinecraftServer, onUnlinked, closeModal } = injectInstanceSettings()
 
+debug('metadata load: start', {
+	instancePath: instance.value.path,
+	loader: instance.value.loader,
+	gameVersion: instance.value.game_version,
+	installStage: instance.value.install_stage,
+})
+
 const [
 	fabric_versions,
 	forge_versions,
@@ -72,6 +81,15 @@ const [
 		.catch(handleError),
 ])
 
+debug('metadata load: done', {
+	hasFabricManifest: !!fabric_versions?.value,
+	hasForgeManifest: !!forge_versions?.value,
+	hasQuiltManifest: !!quilt_versions?.value,
+	hasNeoforgeManifest: !!neoforge_versions?.value,
+	gameVersions: all_game_versions?.value?.length ?? 0,
+	availablePlatforms: loaders?.value?.map((loader) => loader.name) ?? [],
+})
+
 const { data: modpackInfo } = useQuery({
 	queryKey: computed(() => ['linkedModpackInfo', instance.value.path]),
 	queryFn: () => get_linked_modpack_info(instance.value.path, 'must_revalidate'),
@@ -95,11 +113,21 @@ function getManifest(loader: string) {
 		quilt: quilt_versions,
 		neoforge: neoforge_versions,
 	}
-	return map[loader]
+	const manifest = map[loader]
+	debug('getManifest:', {
+		loader,
+		hasManifest: !!manifest?.value,
+		gameVersions: manifest?.value?.gameVersions?.length ?? 0,
+	})
+	return manifest
 }
 
 provideAppBackup({
 	async createBackup() {
+		debug('createBackup: start', {
+			instancePath: instance.value.path,
+			instanceName: instance.value.name,
+		})
 		const allProfiles = await list()
 		const prefix = `${instance.value.name} - Backup #`
 		const existingNums = allProfiles
@@ -109,6 +137,7 @@ provideAppBackup({
 		const nextNum = existingNums.length > 0 ? Math.max(...existingNums) + 1 : 1
 		const newPath = await duplicate(instance.value.path)
 		await edit(newPath, { name: `${prefix}${nextNum}` })
+		debug('createBackup: done', { newPath, backupName: `${prefix}${nextNum}` })
 	},
 })
 
@@ -165,32 +194,72 @@ provideInstallationSettings({
 			const manifest = getManifest(loader)
 			return !!manifest?.value?.gameVersions?.some((x) => item.version === x.id)
 		})
-		return (showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')).map(
-			(x) => ({ value: x.version, label: x.version }),
-		)
+		const result = (
+			showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')
+		).map((x) => ({ value: x.version, label: x.version }))
+		debug('resolveGameVersions:', {
+			loader,
+			showSnapshots,
+			totalVersions: versions.length,
+			filteredVersions: filtered.length,
+			resultVersions: result.length,
+		})
+		return result
 	},
 
 	resolveLoaderVersions(loader, gameVersion) {
-		if (loader === 'vanilla' || !gameVersion) return []
+		if (loader === 'vanilla' || !gameVersion) {
+			debug('resolveLoaderVersions: skipped', { loader, gameVersion })
+			return []
+		}
 		const manifest = getManifest(loader)
-		if (!manifest?.value) return []
+		if (!manifest?.value) {
+			debug('resolveLoaderVersions: no manifest', { loader, gameVersion })
+			return []
+		}
 		if (loader === 'fabric' || loader === 'quilt') {
-			return manifest.value.gameVersions[0]?.loaders ?? []
+			const result = manifest.value.gameVersions[0]?.loaders ?? []
+			debug('resolveLoaderVersions: fabric/quilt result', {
+				loader,
+				gameVersion,
+				count: result.length,
+			})
+			return result
 		}
-		return manifest.value.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
+		const result =
+			manifest.value.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
+		debug('resolveLoaderVersions: result', { loader, gameVersion, count: result.length })
+		return result
 	},
 
 	resolveHasSnapshots(loader) {
 		const versions = all_game_versions?.value ?? []
-		if (loader === 'vanilla') return versions.some((x) => x.version_type !== 'release')
+		if (loader === 'vanilla') {
+			const result = versions.some((x) => x.version_type !== 'release')
+			debug('resolveHasSnapshots: vanilla', { loader, result })
+			return result
+		}
 		const manifest = getManifest(loader)
 		const supported = versions.filter(
 			(item) => !!manifest?.value?.gameVersions?.some((x) => item.version === x.id),
 		)
-		return supported.some((x) => x.version_type !== 'release')
+		const result = supported.some((x) => x.version_type !== 'release')
+		debug('resolveHasSnapshots:', {
+			loader,
+			totalVersions: versions.length,
+			supportedVersions: supported.length,
+			result,
+		})
+		return result
 	},
 
 	async save(platform, gameVersion, loaderVersionId) {
+		debug('save: called', {
+			instancePath: instance.value.path,
+			platform,
+			gameVersion,
+			loaderVersionId,
+		})
 		const editProfile: Record<string, string | undefined> = {
 			loader: platform,
 			game_version: gameVersion,
@@ -199,17 +268,21 @@ provideInstallationSettings({
 			editProfile.loader_version = loaderVersionId
 		}
 		await edit(instance.value.path, editProfile).catch(handleError)
+		debug('save: edit complete', { editProfile })
 	},
 
 	afterSave: async () => {
+		debug('afterSave: installing', { instancePath: instance.value.path })
 		await install(instance.value.path, false).catch(handleError)
 		trackEvent('InstanceRepair', {
 			loader: instance.value.loader,
 			game_version: instance.value.game_version,
 		})
+		debug('afterSave: done')
 	},
 
 	async repair() {
+		debug('repair: called', { instancePath: instance.value.path })
 		repairing.value = true
 		await install(instance.value.path, true).catch(handleError)
 		repairing.value = false
@@ -217,9 +290,11 @@ provideInstallationSettings({
 			loader: instance.value.loader,
 			game_version: instance.value.game_version,
 		})
+		debug('repair: done')
 	},
 
 	async reinstallModpack() {
+		debug('reinstallModpack: called', { instancePath: instance.value.path })
 		reinstalling.value = true
 		await update_repair_modrinth(instance.value.path).catch(handleError)
 		reinstalling.value = false
@@ -227,9 +302,11 @@ provideInstallationSettings({
 			loader: instance.value.loader,
 			game_version: instance.value.game_version,
 		})
+		debug('reinstallModpack: done')
 	},
 
 	async unlinkModpack() {
+		debug('unlinkModpack: called', { instancePath: instance.value.path })
 		await edit(instance.value.path, {
 			linked_data: null as unknown as undefined,
 		})
@@ -237,27 +314,38 @@ provideInstallationSettings({
 			queryKey: ['linkedModpackInfo', instance.value.path],
 		})
 		onUnlinked()
+		debug('unlinkModpack: done')
 	},
 
 	getCachedModpackVersions: () => null,
 	async fetchModpackVersions() {
+		debug('fetchModpackVersions: called', {
+			projectId: instance.value.linked_data?.project_id,
+		})
 		const versions = await get_project_versions(instance.value.linked_data!.project_id!).catch(
 			handleError,
 		)
+		debug('fetchModpackVersions: done', { count: versions?.length ?? 0 })
 		return (versions ?? []) as Labrinth.Versions.v2.Version[]
 	},
 
 	async getVersionChangelog(versionId: string) {
+		debug('getVersionChangelog: called', { versionId })
 		return (await get_version(versionId, 'must_revalidate').catch(
 			() => null,
 		)) as Labrinth.Versions.v2.Version | null
 	},
 
 	async onModpackVersionConfirm(version) {
+		debug('onModpackVersionConfirm: called', {
+			versionId: version.id,
+			instancePath: instance.value.path,
+		})
 		await update_managed_modrinth_version(instance.value.path, version.id)
 		await queryClient.invalidateQueries({
 			queryKey: ['linkedModpackInfo', instance.value.path],
 		})
+		debug('onModpackVersionConfirm: done')
 	},
 
 	updaterModalProps: computed(() => ({
diff --git a/apps/app-frontend/src/components/ui/notifications/ServerInvitePopupBody.vue b/apps/app-frontend/src/components/ui/notifications/ServerInvitePopupBody.vue
deleted file mode 100644
index 2899a0bdb7..0000000000
--- a/apps/app-frontend/src/components/ui/notifications/ServerInvitePopupBody.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-	<div class="flex flex-wrap items-center gap-x-1.5 gap-y-1 leading-snug text-primary">
-		<button
-			v-if="inviterName"
-			type="button"
-			class="inline-flex min-w-0 items-center border-0 bg-transparent p-0 font-semibold text-contrast hover:underline"
-			@click="openInviterProfile(inviterName)"
-		>
-			<Avatar
-				:src="inviterAvatarUrl"
-				:alt="inviterName"
-				circle
-				size="xxs"
-				no-shadow
-				class="mr-1.5 inline-flex"
-			/>
-			<span>{{ inviterName }}</span>
-		</button>
-		<span>
-			<span v-if="inviterName" class="whitespace-nowrap">has invited you to manage</span>
-			<span v-else class="whitespace-nowrap">You have been invited to manage</span>
-			<span class="font-semibold text-contrast ml-1">{{ serverName }}</span>
-			<span>.</span>
-		</span>
-	</div>
-</template>
-
-<script setup>
-import { Avatar } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
-
-import { config } from '@/config'
-
-defineProps({
-	inviterName: {
-		type: String,
-		default: null,
-	},
-	inviterAvatarUrl: {
-		type: String,
-		default: null,
-	},
-	serverName: {
-		type: String,
-		required: true,
-	},
-})
-
-function openInviterProfile(username) {
-	openUrl(`${config.siteUrl}/user/${encodeURIComponent(username)}`)
-}
-</script>
diff --git a/apps/app-frontend/src/helpers/state.ts b/apps/app-frontend/src/helpers/state.ts
index 8e9bb13f54..516d657cf4 100644
--- a/apps/app-frontend/src/helpers/state.ts
+++ b/apps/app-frontend/src/helpers/state.ts
@@ -10,6 +10,7 @@ export interface LoadingBarType {
 	version?: string
 	profile_path?: string
 	pack_name?: string
+	icon?: string | null
 }
 
 export interface LoadingBar {
diff --git a/apps/app-frontend/src/pages/hosting/manage/Access.vue b/apps/app-frontend/src/pages/hosting/manage/Access.vue
new file mode 100644
index 0000000000..59a3b82e36
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Access.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageAccessPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const client = injectModrinthClient()
+const { serverId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+try {
+	await Promise.all([
+		queryClient.ensureQueryData({
+			queryKey: ['servers', 'users', 'v1', serverId],
+			queryFn: () => client.archon.server_users_v1.list(serverId),
+			staleTime: 30_000,
+		}),
+		queryClient.ensureQueryData({
+			queryKey: ['servers', 'v1', 'detail', serverId],
+			queryFn: () => client.archon.servers_v1.get(serverId),
+			staleTime: 30_000,
+		}),
+	])
+} catch {
+	// Let mounted layouts' useQuery surface errors; do not fail route setup.
+}
+</script>
+
+<template>
+	<ServersManageAccessPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/index.js b/apps/app-frontend/src/pages/hosting/manage/index.js
index 50052e3f9e..0c10b07133 100644
--- a/apps/app-frontend/src/pages/hosting/manage/index.js
+++ b/apps/app-frontend/src/pages/hosting/manage/index.js
@@ -1,7 +1,8 @@
+import Access from './Access.vue'
 import Backups from './Backups.vue'
 import Content from './Content.vue'
 import Files from './Files.vue'
 import Index from './Index.vue'
 import Overview from './Overview.vue'
 
-export { Backups, Content, Files, Index, Overview }
+export { Access, Backups, Content, Files, Index, Overview }
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index f01df0670c..da93b48e85 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -73,6 +73,14 @@ export default new createRouter({
 						breadcrumb: [{ name: '?Server' }],
 					},
 				},
+				{
+					path: 'access',
+					name: 'ServerManageAccess',
+					component: Hosting.Access,
+					meta: {
+						breadcrumb: [{ name: '?Server' }],
+					},
+				},
 			],
 		},
 		{
diff --git a/apps/frontend/CLAUDE.md b/apps/frontend/CLAUDE.md
index 9d0d05c4df..03515cbb31 100644
--- a/apps/frontend/CLAUDE.md
+++ b/apps/frontend/CLAUDE.md
@@ -40,4 +40,3 @@ These composables are deprecated and should not be used in new code:
 
 - **`useAsyncData`** - we use tanstack, not nuxt's built in async data utility.
 - **`useBaseFetch`** (`src/composables/fetch.js`) — legacy Labrinth fetch wrapper. Use `client.labrinth.*` modules instead.
-- **`useServersFetch`** (`src/composables/servers/servers-fetch.ts`) — legacy Archon fetch wrapper with manual retry/circuit-breaker. Use `client.archon.*` modules instead — refer to the `packages/api-client/CLAUDE.md` for more information.
diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index 45f1526eb4..f7f8a5296b 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -224,6 +224,7 @@ export default defineNuxtConfig({
 				globalThis.INTERCOM_APP_ID ||
 				'ykeritl9',
 			production: isProduction(),
+			cookieSecure: isProduction(),
 			buildEnv: process.env.BUILD_ENV,
 			preview: process.env.PREVIEW === 'true',
 			featureFlagOverrides: getFeatureFlagOverrides(),
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index e835e9cfc9..fa2e751f4c 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -26,7 +26,7 @@
 		"@types/semver": "^7.7.1",
 		"autoprefixer": "^10.4.19",
 		"glob": "^10.2.7",
-		"nuxt": "^3.20.2",
+		"nuxt": "=3.20.2",
 		"postcss": "^8.4.39",
 		"prettier-plugin-tailwindcss": "^0.6.5",
 		"sass": "^1.58.0",
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 420e852424..1bbac8bf38 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -1,244 +1,284 @@
 <template>
 	<div
-		class="notification"
-		:class="{
-			'has-body': hasBody,
-			compact: compact,
-			read: notification.read,
-		}"
+		:class="
+			type === 'server_invite'
+				? { read: notification.read }
+				: {
+						notification: true,
+						'has-body': hasBody,
+						compact: compact,
+						read: notification.read,
+					}
+		"
 	>
-		<nuxt-link
-			v-if="!type"
-			:to="notification.link"
-			class="notification__icon backed-svg"
-			:class="{ raised: raised }"
-		>
-			<BellIcon />
-		</nuxt-link>
-		<DoubleIcon v-else class="notification__icon">
-			<template #primary>
-				<nuxt-link v-if="project" :to="getProjectLink(project)" tabindex="-1">
-					<Avatar size="xs" :src="project.icon_url" :raised="raised" no-shadow />
-				</nuxt-link>
-				<nuxt-link
-					v-else-if="organization"
-					:to="`/organization/${organization.slug}`"
-					tabindex="-1"
+		<template v-if="type === 'server_invite'">
+			<div class="flex flex-col gap-4">
+				<ModrinthServersIcon class="h-auto w-56 max-w-full text-[var(--color-heading)]" />
+				<div
+					class="flex flex-wrap items-center gap-x-1.5 gap-y-2 text-lg leading-tight text-[var(--color-heading)]"
 				>
-					<Avatar size="xs" :src="organization.icon_url" :raised="raised" no-shadow />
-				</nuxt-link>
-				<nuxt-link v-else-if="user" :to="getUserLink(user)" tabindex="-1">
-					<Avatar size="xs" :src="user.avatar_url" :raised="raised" no-shadow />
-				</nuxt-link>
-				<Avatar v-else size="xs" :raised="raised" no-shadow />
-			</template>
-			<template #secondary>
-				<ScaleIcon
-					v-if="type === 'moderator_message' || type === 'status_change'"
-					class="moderation-color"
-				/>
-				<UserPlusIcon v-else-if="type === 'team_invite' && project" class="creator-color" />
-				<UserPlusIcon
-					v-else-if="type === 'organization_invite' && organization"
-					class="creator-color"
-				/>
-				<VersionIcon v-else-if="type === 'project_update' && project && version" />
-				<BellIcon v-else />
-			</template>
-		</DoubleIcon>
-		<div class="notification__title">
-			<template v-if="type === 'project_update' && project && version">
-				A project you follow,
-				<nuxt-link :to="getProjectLink(project)" class="title-link">{{ project.title }}</nuxt-link>
-				, has been updated:
-			</template>
-			<template v-else-if="type === 'team_invite' && project">
-				<nuxt-link
-					:to="`/user/${invitedBy.username}`"
-					class="iconified-link title-link inline-flex"
+					<nuxt-link
+						v-if="invitedBy"
+						:to="`/user/${invitedBy.username}`"
+						class="inline-flex items-center font-bold text-[var(--color-heading)] hover:underline"
+					>
+						<Avatar
+							:src="invitedBy.avatar_url"
+							circle
+							size="xxs"
+							no-shadow
+							:raised="raised"
+							class="mr-1.5 inline-flex"
+						/>
+						<span>{{ invitedBy.username }}</span>
+					</nuxt-link>
+					<span v-if="invitedBy">has invited you to manage</span>
+					<span v-else>You have been invited to manage</span>
+					<span
+						><strong class="font-bold text-[var(--color-heading)]">{{
+							notification.body.server_name
+						}}</strong
+						>.</span
+					>
+				</div>
+				<div
+					v-if="!notification.read"
+					class="flex flex-wrap items-center gap-3"
+					:class="{ 'gap-2': compact }"
 				>
-					<Avatar
-						:src="invitedBy.avatar_url"
-						circle
-						size="xxs"
-						no-shadow
-						:raised="raised"
-						class="inline-flex"
-					/>
-					<span class="space">&nbsp;</span>
-					<span>{{ invitedBy.username }}</span>
-				</nuxt-link>
-				<span>
-					has invited you to join
-					<nuxt-link :to="getProjectLink(project)" class="title-link">
-						{{ project.title }} </nuxt-link
-					>.
-				</span>
-			</template>
-			<template v-else-if="type === 'organization_invite' && organization">
-				<nuxt-link
-					:to="`/user/${invitedBy.username}`"
-					class="iconified-link title-link inline-flex"
+					<ButtonStyled color="brand">
+						<button @click="performActionByTitle(notification, 'Accept')">
+							<CheckIcon />
+							Accept
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="red">
+						<button @click="performActionByTitle(notification, 'Deny')">
+							<XIcon />
+							Decline
+						</button>
+					</ButtonStyled>
+				</div>
+				<div
+					class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[var(--color-text-secondary)]"
 				>
-					<Avatar
-						:src="invitedBy.avatar_url"
-						circle
-						size="xxs"
-						no-shadow
-						:raised="raised"
-						class="inline-flex"
+					<span
+						v-if="notification.read"
+						class="inline-flex items-center font-bold text-[var(--color-text)]"
+					>
+						<CheckCircleIcon /> Read
+					</span>
+					<span v-tooltip="formatDateTime(notification.created)" class="inline-flex items-center">
+						<CalendarIcon class="mr-1" /> Received
+						{{ formatRelativeTime(notification.created) }}
+					</span>
+					<CopyCode v-if="flags.developerMode" :text="notification.id" />
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<nuxt-link
+				v-if="!type"
+				:to="notification.link"
+				class="notification__icon backed-svg"
+				:class="{ raised: raised }"
+			>
+				<BellIcon />
+			</nuxt-link>
+			<DoubleIcon v-else class="notification__icon">
+				<template #primary>
+					<nuxt-link v-if="project" :to="getProjectLink(project)" tabindex="-1">
+						<Avatar size="xs" :src="project.icon_url" :raised="raised" no-shadow />
+					</nuxt-link>
+					<nuxt-link
+						v-else-if="organization"
+						:to="`/organization/${organization.slug}`"
+						tabindex="-1"
+					>
+						<Avatar size="xs" :src="organization.icon_url" :raised="raised" no-shadow />
+					</nuxt-link>
+					<nuxt-link v-else-if="user" :to="getUserLink(user)" tabindex="-1">
+						<Avatar size="xs" :src="user.avatar_url" :raised="raised" no-shadow />
+					</nuxt-link>
+					<Avatar v-else size="xs" :raised="raised" no-shadow />
+				</template>
+				<template #secondary>
+					<ScaleIcon
+						v-if="type === 'moderator_message' || type === 'status_change'"
+						class="moderation-color"
 					/>
-					<span class="space">&nbsp;</span>
-					<span>{{ invitedBy.username }}</span>
-				</nuxt-link>
-				<span>
-					has invited you to join
-					<nuxt-link :to="`/organization/${organization.slug}`" class="title-link">
-						{{ organization.name }} </nuxt-link
-					>.
-				</span>
-			</template>
-			<template v-else-if="type === 'status_change' && project">
-				<nuxt-link :to="getProjectLink(project)" class="title-link">
-					{{ project.title }}
-				</nuxt-link>
-				<template v-if="tags.rejectedStatuses.includes(notification.body.new_status)">
-					has been
-					<ProjectStatusBadge :status="notification.body.new_status" />
+					<UserPlusIcon v-else-if="type === 'team_invite' && project" class="creator-color" />
+					<UserPlusIcon
+						v-else-if="type === 'organization_invite' && organization"
+						class="creator-color"
+					/>
+					<VersionIcon v-else-if="type === 'project_update' && project && version" />
+					<BellIcon v-else />
 				</template>
-				<template v-else>
-					updated from
-					<ProjectStatusBadge :status="notification.body.old_status" />
-					to
-					<ProjectStatusBadge :status="notification.body.new_status" />
+			</DoubleIcon>
+			<div class="notification__title">
+				<template v-if="type === 'project_update' && project && version">
+					A project you follow,
+					<nuxt-link :to="getProjectLink(project)" class="title-link">{{
+						project.title
+					}}</nuxt-link>
+					, has been updated:
 				</template>
-				by the moderators.
-			</template>
-			<template v-else-if="type === 'moderator_message' && thread && project && !report">
-				Your project,
-				<nuxt-link :to="getProjectLink(project)" class="title-link">{{ project.title }}</nuxt-link>
-				, has received
-				<template v-if="notification.grouped_notifs"> messages</template>
-				<template v-else>a message</template>
-				from the moderators.
-			</template>
-			<template v-else-if="type === 'moderator_message' && thread && report">
-				A moderator replied to your report of
-				<template v-if="version">
-					version
-					<nuxt-link :to="getVersionLink(project, version)" class="title-link">
-						{{ version.name }}
+				<template v-else-if="type === 'team_invite' && project">
+					<nuxt-link
+						:to="`/user/${invitedBy.username}`"
+						class="iconified-link title-link inline-flex"
+					>
+						<Avatar
+							:src="invitedBy.avatar_url"
+							circle
+							size="xxs"
+							no-shadow
+							:raised="raised"
+							class="inline-flex"
+						/>
+						<span class="space">&nbsp;</span>
+						<span>{{ invitedBy.username }}</span>
 					</nuxt-link>
-					of project
+					<span>
+						has invited you to join
+						<nuxt-link :to="getProjectLink(project)" class="title-link">
+							{{ project.title }} </nuxt-link
+						>.
+					</span>
 				</template>
-				<nuxt-link v-if="project" :to="getProjectLink(project)" class="title-link">
-					{{ project.title }}
-				</nuxt-link>
-				<nuxt-link v-else-if="user" :to="getUserLink(user)" class="title-link">
-					{{ user.username }}
-				</nuxt-link>
-				.
-			</template>
-			<nuxt-link v-else :to="notification.link" class="title-link">
-				<span v-html="renderString(notification.title)" />
-			</nuxt-link>
-			<!--      <span v-else class="known-errors">Error reading notification.</span>-->
-		</div>
-		<div v-if="hasBody" class="notification__body">
-			<ThreadSummary
-				v-if="type === 'moderator_message' && thread"
-				:thread="thread"
-				:link="threadLink"
-				:raised="raised"
-				:messages="getMessages()"
-				class="thread-summary"
-				:auth="auth"
-			/>
-			<div v-else-if="type === 'project_update'" class="version-list">
-				<div
-					v-for="notif in (notification.grouped_notifs
-						? [notification, ...notification.grouped_notifs]
-						: [notification]
-					).filter((x) => x.extra_data.version)"
-					:key="notif.id"
-					class="version-link"
-				>
-					<VersionIcon />
+				<template v-else-if="type === 'organization_invite' && organization">
 					<nuxt-link
-						:to="getVersionLink(notif.extra_data.project, notif.extra_data.version)"
-						class="text-link"
+						:to="`/user/${invitedBy.username}`"
+						class="iconified-link title-link inline-flex"
 					>
-						{{ notif.extra_data.version.name }}
-					</nuxt-link>
-					<span class="version-info">
-						for
-						<Categories
-							:categories="getLoaderCategories(notif.extra_data.version)"
-							:type="notif.extra_data.project.project_type"
-							class="categories"
+						<Avatar
+							:src="invitedBy.avatar_url"
+							circle
+							size="xxs"
+							no-shadow
+							:raised="raised"
+							class="inline-flex"
 						/>
-						{{ $formatVersion(notif.extra_data.version.game_versions) }}
-						<span v-tooltip="formatDateTime(notif.extra_data.version.date_published)" class="date">
-							{{ formatRelativeTime(notif.extra_data.version.date_published) }}
-						</span>
+						<span class="space">&nbsp;</span>
+						<span>{{ invitedBy.username }}</span>
+					</nuxt-link>
+					<span>
+						has invited you to join
+						<nuxt-link :to="`/organization/${organization.slug}`" class="title-link">
+							{{ organization.name }} </nuxt-link
+						>.
 					</span>
+				</template>
+				<template v-else-if="type === 'status_change' && project">
+					<nuxt-link :to="getProjectLink(project)" class="title-link">
+						{{ project.title }}
+					</nuxt-link>
+					<template v-if="tags.rejectedStatuses.includes(notification.body.new_status)">
+						has been
+						<ProjectStatusBadge :status="notification.body.new_status" />
+					</template>
+					<template v-else>
+						updated from
+						<ProjectStatusBadge :status="notification.body.old_status" />
+						to
+						<ProjectStatusBadge :status="notification.body.new_status" />
+					</template>
+					by the moderators.
+				</template>
+				<template v-else-if="type === 'moderator_message' && thread && project && !report">
+					Your project,
+					<nuxt-link :to="getProjectLink(project)" class="title-link">{{
+						project.title
+					}}</nuxt-link>
+					, has received
+					<template v-if="notification.grouped_notifs"> messages</template>
+					<template v-else>a message</template>
+					from the moderators.
+				</template>
+				<template v-else-if="type === 'moderator_message' && thread && report">
+					A moderator replied to your report of
+					<template v-if="version">
+						version
+						<nuxt-link :to="getVersionLink(project, version)" class="title-link">
+							{{ version.name }}
+						</nuxt-link>
+						of project
+					</template>
+					<nuxt-link v-if="project" :to="getProjectLink(project)" class="title-link">
+						{{ project.title }}
+					</nuxt-link>
+					<nuxt-link v-else-if="user" :to="getUserLink(user)" class="title-link">
+						{{ user.username }}
+					</nuxt-link>
+					.
+				</template>
+				<nuxt-link v-else :to="notification.link" class="title-link">
+					<span v-html="renderString(notification.title)" />
+				</nuxt-link>
+				<!--      <span v-else class="known-errors">Error reading notification.</span>-->
+			</div>
+			<div v-if="hasBody" class="notification__body">
+				<ThreadSummary
+					v-if="type === 'moderator_message' && thread"
+					:thread="thread"
+					:link="threadLink"
+					:raised="raised"
+					:messages="getMessages()"
+					class="thread-summary"
+					:auth="auth"
+				/>
+				<div v-else-if="type === 'project_update'" class="version-list">
+					<div
+						v-for="notif in (notification.grouped_notifs
+							? [notification, ...notification.grouped_notifs]
+							: [notification]
+						).filter((x) => x.extra_data.version)"
+						:key="notif.id"
+						class="version-link"
+					>
+						<VersionIcon />
+						<nuxt-link
+							:to="getVersionLink(notif.extra_data.project, notif.extra_data.version)"
+							class="text-link"
+						>
+							{{ notif.extra_data.version.name }}
+						</nuxt-link>
+						<span class="version-info">
+							for
+							<Categories
+								:categories="getLoaderCategories(notif.extra_data.version)"
+								:type="notif.extra_data.project.project_type"
+								class="categories"
+							/>
+							{{ $formatVersion(notif.extra_data.version.game_versions) }}
+							<span
+								v-tooltip="formatDateTime(notif.extra_data.version.date_published)"
+								class="date"
+							>
+								{{ formatRelativeTime(notif.extra_data.version.date_published) }}
+							</span>
+						</span>
+					</div>
 				</div>
+				<template v-else>
+					{{ notification.text }}
+				</template>
 			</div>
-			<template v-else>
-				{{ notification.text }}
-			</template>
-		</div>
-		<span class="notification__date">
-			<span v-if="notification.read" class="read-badge inline-flex">
-				<CheckCircleIcon /> Read
-			</span>
-			<span v-tooltip="formatDateTime(notification.created)" class="inline-flex">
-				<CalendarIcon class="mr-1" /> Received
-				{{ formatRelativeTime(notification.created) }}
+			<span class="notification__date">
+				<span v-if="notification.read" class="read-badge inline-flex">
+					<CheckCircleIcon /> Read
+				</span>
+				<span v-tooltip="formatDateTime(notification.created)" class="inline-flex">
+					<CalendarIcon class="mr-1" /> Received
+					{{ formatRelativeTime(notification.created) }}
+				</span>
 			</span>
-		</span>
-		<div v-if="compact" class="notification__actions">
-			<template v-if="type === 'team_invite' || type === 'organization_invite'">
-				<ButtonStyled circular color="brand" type="transparent">
-					<button
-						v-tooltip="`Accept`"
-						@click="
-							() => {
-								acceptTeamInvite(notification.body.team_id)
-								read()
-							}
-						"
-					>
-						<CheckIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular color="red" type="transparent">
-					<button
-						v-tooltip="`Decline`"
-						@click="
-							() => {
-								removeSelfFromTeam(notification.body.team_id)
-								read()
-							}
-						"
-					>
-						<XIcon />
-					</button>
-				</ButtonStyled>
-			</template>
-			<ButtonStyled v-else-if="!notification.read" circular type="transparent">
-				<button v-tooltip="`Mark as read`" @click="read()">
-					<XIcon />
-				</button>
-			</ButtonStyled>
-		</div>
-		<div v-else class="notification__actions">
-			<div v-if="type !== null" class="input-group">
-				<template
-					v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
-				>
-					<ButtonStyled color="brand">
+			<div v-if="compact" class="notification__actions">
+				<template v-if="type === 'team_invite' || type === 'organization_invite'">
+					<ButtonStyled circular color="brand" type="transparent">
 						<button
+							v-tooltip="`Accept`"
 							@click="
 								() => {
 									acceptTeamInvite(notification.body.team_id)
@@ -247,11 +287,11 @@
 							"
 						>
 							<CheckIcon />
-							Accept
 						</button>
 					</ButtonStyled>
-					<ButtonStyled color="red">
+					<ButtonStyled circular color="red" type="transparent">
 						<button
+							v-tooltip="`Decline`"
 							@click="
 								() => {
 									removeSelfFromTeam(notification.body.team_id)
@@ -260,41 +300,79 @@
 							"
 						>
 							<XIcon />
-							Decline
 						</button>
 					</ButtonStyled>
 				</template>
-				<ButtonStyled v-else-if="!notification.read">
-					<button @click="read()">
-						<CheckIcon />
-						Mark as read
+				<ButtonStyled v-else-if="!notification.read" circular type="transparent">
+					<button v-tooltip="`Mark as read`" @click="read()">
+						<XIcon />
 					</button>
 				</ButtonStyled>
-				<CopyCode v-if="flags.developerMode" :text="notification.id" />
 			</div>
-			<div v-else class="input-group">
-				<ButtonStyled v-if="notification.link && notification.link !== '#'">
-					<nuxt-link :to="notification.link" target="_blank">
-						<ExternalIcon />
-						Open link
-					</nuxt-link>
-				</ButtonStyled>
-				<ButtonStyled v-for="(action, actionIndex) in notification.actions" :key="actionIndex">
-					<button @click="performAction(notification, actionIndex)">
-						<CheckIcon v-if="action.title === 'Accept'" />
-						<XIcon v-else-if="action.title === 'Deny'" />
-						{{ action.title }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="notification.actions.length === 0 && !notification.read">
-					<button @click="performAction(notification, null)">
-						<CheckIcon />
-						Mark as read
-					</button>
-				</ButtonStyled>
-				<CopyCode v-if="flags.developerMode" :text="notification.id" />
+			<div v-else class="notification__actions">
+				<div v-if="type !== null" class="input-group">
+					<template
+						v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
+					>
+						<ButtonStyled color="brand">
+							<button
+								@click="
+									() => {
+										acceptTeamInvite(notification.body.team_id)
+										read()
+									}
+								"
+							>
+								<CheckIcon />
+								Accept
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="red">
+							<button
+								@click="
+									() => {
+										removeSelfFromTeam(notification.body.team_id)
+										read()
+									}
+								"
+							>
+								<XIcon />
+								Decline
+							</button>
+						</ButtonStyled>
+					</template>
+					<ButtonStyled v-else-if="!notification.read">
+						<button @click="read()">
+							<CheckIcon />
+							Mark as read
+						</button>
+					</ButtonStyled>
+					<CopyCode v-if="flags.developerMode" :text="notification.id" />
+				</div>
+				<div v-else class="input-group">
+					<ButtonStyled v-if="notification.link && notification.link !== '#'">
+						<nuxt-link :to="notification.link" target="_blank">
+							<ExternalIcon />
+							Open link
+						</nuxt-link>
+					</ButtonStyled>
+					<ButtonStyled v-for="(action, actionIndex) in notification.actions" :key="actionIndex">
+						<button @click="performAction(notification, actionIndex)">
+							<CheckIcon v-if="action.title === 'Accept'" />
+							<XIcon v-else-if="action.title === 'Deny'" />
+							{{ action.title }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="notification.actions.length === 0 && !notification.read">
+						<button @click="performAction(notification, null)">
+							<CheckIcon />
+							Mark as read
+						</button>
+					</ButtonStyled>
+					<CopyCode v-if="flags.developerMode" :text="notification.id" />
+				</div>
 			</div>
-		</div>
+		</template>
 	</div>
 </template>
 
@@ -328,11 +406,13 @@ import { markAsRead } from '~/helpers/platform-notifications'
 import { getProjectLink, getVersionLink } from '~/helpers/projects'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 
+import ModrinthServersIcon from '../brand/ModrinthServersIcon.vue'
 import ThreadSummary from './thread/ThreadSummary.vue'
 
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const emit = defineEmits(['update:notifications'])
+const router = useRouter()
 const formatRelativeTime = useRelativeTime()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
@@ -415,9 +495,29 @@ async function performAction(notification, actionIndex) {
 		await read()
 
 		if (actionIndex !== null) {
-			await useBaseFetch(`${notification.actions[actionIndex].action_route[1]}`, {
-				method: notification.actions[actionIndex].action_route[0].toUpperCase(),
-			})
+			const action = notification.actions[actionIndex]
+
+			if (type.value === 'server_invite') {
+				const actionName = action.title.toLowerCase()
+				const inviteAction = actionName === 'accept' ? 'accept' : 'decline'
+				const serverId = notification.body.server_id
+
+				await client.request(`/servers/${serverId}/invites/${inviteAction}`, {
+					api: 'archon',
+					version: 1,
+					method: 'POST',
+				})
+
+				if (inviteAction === 'accept') {
+					await router.push(`/hosting/manage/${encodeURIComponent(serverId)}`)
+				}
+			} else {
+				const [method, route] = action.action_route
+
+				await useBaseFetch(route, {
+					method: method.toUpperCase(),
+				})
+			}
 		}
 	} catch (err) {
 		addNotification({
@@ -429,6 +529,20 @@ async function performAction(notification, actionIndex) {
 	stopLoading()
 }
 
+function performActionByTitle(notification, title) {
+	const actionIndex = notification.actions.findIndex((action) => action.title === title)
+	if (actionIndex === -1) {
+		addNotification({
+			title: 'An error occurred',
+			text: `Missing ${title.toLowerCase()} action for notification.`,
+			type: 'error',
+		})
+		return
+	}
+
+	return performAction(notification, actionIndex)
+}
+
 function getMessages() {
 	const messages = []
 	if (props.notification.body.message_id) {
diff --git a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
index 4a303112a0..a52bb5c01e 100644
--- a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Accordion,
 	ButtonStyled,
+	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
 	ServerNotice,
 	StyledInput,
 	TagItem,
 } from '@modrinth/ui'
-import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
 import { ref } from 'vue'
 
-import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
-
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+
+type ServerNoticeType = Archon.Notices.v0.ListedNotice
 
 const modal = ref<InstanceType<typeof NewModal>>()
 
@@ -32,28 +34,23 @@ const assignedNodes = computed(() => assigned.value.filter((n) => n.kind === 'no
 const inputField = ref('')
 
 async function refresh() {
-	await useServersFetch('notices').then((res) => {
-		const notices = res as ServerNoticeType[]
-		assigned.value = notices.find((n) => n.id === notice.value?.id)?.assigned ?? []
-	})
+	const notices = await client.archon.notices_v0.list()
+	assigned.value = notices.find((n) => n.id === notice.value?.id)?.assigned ?? []
 }
 
 async function assign(server: boolean = true) {
 	const input = inputField.value.trim()
 
 	if (input !== '' && notice.value) {
-		await useServersFetch(
-			`notices/${notice.value.id}/assign?${server ? 'server' : 'node'}=${input}`,
-			{
-				method: 'PUT',
-			},
-		).catch((err) => {
-			addNotification({
-				title: 'Error assigning notice',
-				text: err,
-				type: 'error',
+		await client.archon.notices_v0
+			.assign(notice.value.id, server ? { server: input } : { node: input })
+			.catch((err) => {
+				addNotification({
+					title: 'Error assigning notice',
+					text: err,
+					type: 'error',
+				})
 			})
-		})
 	} else {
 		addNotification({
 			title: 'Error assigning notice',
@@ -84,18 +81,15 @@ async function unassignDetect() {
 
 async function unassign(id: string, server: boolean = true) {
 	if (notice.value) {
-		await useServersFetch(
-			`notices/${notice.value.id}/unassign?${server ? 'server' : 'node'}=${id}`,
-			{
-				method: 'PUT',
-			},
-		).catch((err) => {
-			addNotification({
-				title: 'Error unassigning notice',
-				text: err,
-				type: 'error',
+		await client.archon.notices_v0
+			.unassign(notice.value.id, server ? { server: id } : { node: id })
+			.catch((err) => {
+				addNotification({
+					title: 'Error unassigning notice',
+					text: err,
+					type: 'error',
+				})
 			})
-		})
 	}
 	await refresh()
 }
@@ -125,7 +119,7 @@ defineExpose({ show, hide })
 				:level="notice.level"
 				:message="notice.message"
 				:dismissable="notice.dismissable"
-				:title="notice.title"
+				:title="notice.title ?? undefined"
 				preview
 			/>
 			<div class="flex flex-col gap-2">
diff --git a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
index 8d48651ebf..587402cf1d 100644
--- a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
+++ b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
@@ -133,6 +133,7 @@ import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	Combobox,
+	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
@@ -143,9 +144,9 @@ import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
 import { computed, ref } from 'vue'
 
 import { useBaseFetch } from '#imports'
-import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
 
 const modal = ref<InstanceType<typeof NewModal>>()
 
@@ -205,12 +206,12 @@ const applyDisabled = computed(() => {
 async function ensureOverview() {
 	if (regions.value.length || nodeHostnames.value.length) return
 	try {
-		const data = await useServersFetch<any>('/nodes/overview', { version: 'internal' })
-		regions.value = (data.regions || []).map((r: any) => ({
+		const data = await client.archon.nodes_internal.overview()
+		regions.value = data.regions.map((r) => ({
 			value: r.key,
 			label: `${r.display_name} (${r.key})`,
 		}))
-		nodeHostnames.value = data.node_hostnames || []
+		nodeHostnames.value = data.node_hostnames
 		if (!selectedRegion.value && regions.value.length) selectedRegion.value = regions.value[0].value
 	} catch (err) {
 		addNotification({ title: 'Failed to load nodes overview', text: String(err), type: 'error' })
diff --git a/apps/frontend/src/components/ui/admin/TransferModal.vue b/apps/frontend/src/components/ui/admin/TransferModal.vue
index bf5e1e2307..bd0d5ce399 100644
--- a/apps/frontend/src/components/ui/admin/TransferModal.vue
+++ b/apps/frontend/src/components/ui/admin/TransferModal.vue
@@ -198,6 +198,7 @@ import {
 	ButtonStyled,
 	Chips,
 	Combobox,
+	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
 	StyledInput,
@@ -207,13 +208,12 @@ import {
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
-import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
-
 const emit = defineEmits<{
 	success: []
 }>()
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
 
 const modal = ref<InstanceType<typeof NewModal>>()
 
@@ -341,12 +341,12 @@ const submitDisabled = computed(() => {
 async function ensureOverview() {
 	if (regions.value.length || nodeHostnames.value.length) return
 	try {
-		const data = await useServersFetch<any>('/nodes/overview', { version: 'internal' })
-		regions.value = (data.regions || []).map((r: any) => ({
+		const data = await client.archon.nodes_internal.overview()
+		regions.value = data.regions.map((r) => ({
 			value: r.key,
 			label: `${r.display_name} (${r.key})`,
 		}))
-		nodeHostnames.value = data.node_hostnames || []
+		nodeHostnames.value = data.node_hostnames
 		if (!selectedRegion.value && regions.value.length) {
 			selectedRegion.value = regions.value[0].value
 		}
@@ -364,30 +364,22 @@ async function submit() {
 			scheduleOption.value === 'now' ? undefined : dayjs(scheduledDate.value).toISOString()
 
 		if (mode.value === 'servers') {
-			await useServersFetch('/transfers/schedule/servers', {
-				version: 'internal',
-				method: 'POST',
-				body: {
-					server_ids: parsedServerIds.value,
-					scheduled_at: scheduledAt,
-					target_region: selectedRegion.value || undefined,
-					node_tags: selectedTags.value.length > 0 ? selectedTags.value : undefined,
-					reason: reason.value.trim(),
-				},
+			await client.archon.transfers_internal.scheduleServers({
+				server_ids: parsedServerIds.value,
+				scheduled_at: scheduledAt,
+				target_region: selectedRegion.value || undefined,
+				node_tags: selectedTags.value.length > 0 ? selectedTags.value : undefined,
+				reason: reason.value.trim(),
 			})
 		} else {
-			await useServersFetch('/transfers/schedule/nodes', {
-				version: 'internal',
-				method: 'POST',
-				body: {
-					node_hostnames: selectedNodes.value.slice(),
-					scheduled_at: scheduledAt,
-					target_region: selectedRegion.value || undefined,
-					node_tags: selectedTags.value.length > 0 ? selectedTags.value : undefined,
-					reason: reason.value.trim(),
-					cordon_nodes: cordonNodes.value,
-					tag_nodes: tagNodes.value.trim() || undefined,
-				},
+			await client.archon.transfers_internal.scheduleNodes({
+				node_hostnames: selectedNodes.value.slice(),
+				scheduled_at: scheduledAt,
+				target_region: selectedRegion.value || undefined,
+				node_tags: selectedTags.value.length > 0 ? selectedTags.value : undefined,
+				reason: reason.value.trim(),
+				cordon_nodes: cordonNodes.value,
+				tag_nodes: tagNodes.value.trim() || undefined,
 			})
 		}
 
diff --git a/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue b/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
index b8258cfbed..5370e1afd4 100644
--- a/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
+++ b/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
@@ -48,7 +48,12 @@
 					>{{ isIncome ? '' : '-' }}{{ formatMoney(transaction.amount) }}</span
 				>
 				<template v-if="transaction.type === 'withdrawal' && transaction.status === 'in-transit'">
-					<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
+					<Tooltip
+						theme="dismissable-prompt"
+						class="inline-flex shrink-0"
+						:triggers="['hover', 'focus']"
+						no-auto-focus
+					>
 						<span class="my-auto align-middle"
 							><ButtonStyled circular type="outlined" size="small">
 								<button class="align-middle" @click="cancelPayout">
diff --git a/apps/frontend/src/composables/affiliates.ts b/apps/frontend/src/composables/affiliates.ts
index 3e23c3b3e8..f386ef291a 100644
--- a/apps/frontend/src/composables/affiliates.ts
+++ b/apps/frontend/src/composables/affiliates.ts
@@ -1,8 +1,9 @@
 export const useAffiliates = () => {
+	const config = useRuntimeConfig()
 	const affiliateCookie = useCookie('mrs_afl', {
 		maxAge: 60 * 60 * 24 * 7, // 7 days
 		sameSite: 'lax',
-		secure: true,
+		secure: config.public.cookieSecure,
 		httpOnly: false,
 		path: '/',
 	})
diff --git a/apps/frontend/src/composables/auth.js b/apps/frontend/src/composables/auth.js
index 344806afa8..aea80a1faa 100644
--- a/apps/frontend/src/composables/auth.js
+++ b/apps/frontend/src/composables/auth.js
@@ -30,10 +30,11 @@ export const initAuth = async (oldToken = null) => {
 	}
 
 	const route = useRoute()
+	const config = useRuntimeConfig()
 	const authCookie = useCookie('auth-token', {
 		maxAge: 60 * 60 * 24 * 365 * 10,
 		sameSite: 'lax',
-		secure: true,
+		secure: config.public.cookieSecure,
 		httpOnly: false,
 		path: '/',
 	})
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index 1becc8b856..ba6538ee81 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -54,6 +54,8 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	showViewProdRouteBanner: false,
 	showModeratorProjectMemberUi: false,
 	showModeratorPrivateMessageHighlight: true,
+	archonApiStaging: false,
+	showHostingAccessInstanceAuditLog: false,
 } as const)
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
@@ -64,19 +66,20 @@ export type AllFeatureFlags = {
 
 export type PartialFeatureFlags = Partial<AllFeatureFlags>
 
-const COOKIE_OPTIONS = {
-	maxAge: 60 * 60 * 24 * 365 * 10,
-	sameSite: 'lax',
-	secure: true,
-	httpOnly: false,
-	path: '/',
-} satisfies CookieOptions<PartialFeatureFlags>
+const getCookieOptions = () =>
+	({
+		maxAge: 60 * 60 * 24 * 365 * 10,
+		sameSite: 'lax',
+		secure: useRuntimeConfig().public.cookieSecure,
+		httpOnly: false,
+		path: '/',
+	}) satisfies CookieOptions<PartialFeatureFlags>
 
 export const useFeatureFlags = () =>
 	useState<AllFeatureFlags>('featureFlags', () => {
 		const config = useRuntimeConfig()
 
-		const savedFlags = useCookie<PartialFeatureFlags>('featureFlags', COOKIE_OPTIONS)
+		const savedFlags = useCookie<PartialFeatureFlags>('featureFlags', getCookieOptions())
 
 		if (!savedFlags.value) {
 			savedFlags.value = {}
@@ -106,6 +109,6 @@ export const useFeatureFlags = () =>
 
 export const saveFeatureFlags = () => {
 	const flags = useFeatureFlags()
-	const cookie = useCookie<PartialFeatureFlags>('featureFlags', COOKIE_OPTIONS)
+	const cookie = useCookie<PartialFeatureFlags>('featureFlags', getCookieOptions())
 	cookie.value = flags.value
 }
diff --git a/apps/frontend/src/composables/servers/servers-fetch.ts b/apps/frontend/src/composables/servers/servers-fetch.ts
deleted file mode 100644
index 44884b5e06..0000000000
--- a/apps/frontend/src/composables/servers/servers-fetch.ts
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * @deprecated Use `@modrinth/api-client` via `injectModrinthClient()` instead.
- * The api-client's archon modules (`client.archon.servers_v0`, etc.) handle auth,
- * retry, and circuit breaking automatically. This composable is kept for legacy
- * code that hasn't been migrated yet.
- */
-
-import { PANEL_VERSION } from '@modrinth/api-client'
-import type { V1ErrorInfo } from '@modrinth/utils'
-import { ModrinthServerError, ModrinthServersFetchError } from '@modrinth/utils'
-import { $fetch, FetchError } from 'ofetch'
-
-export interface ServersFetchOptions {
-	method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
-	contentType?: string
-	body?: Record<string, any>
-	version?: number | 'internal'
-	override?: {
-		url?: string
-		token?: string
-	}
-	retry?: number | boolean
-	bypassAuth?: boolean
-}
-
-export async function useServersFetch<T>(
-	path: string,
-	options: ServersFetchOptions = {},
-	module?: string,
-	errorContext?: string,
-): Promise<T> {
-	const config = useRuntimeConfig()
-	const auth = await useAuth()
-	const authToken = auth.value?.token
-
-	if (!authToken && !options.bypassAuth) {
-		const error = new ModrinthServersFetchError(
-			'[Modrinth Hosting] Cannot fetch without auth',
-			10000,
-		)
-		throw new ModrinthServerError('Missing auth token', 401, error, module, undefined, undefined)
-	}
-
-	const {
-		method = 'GET',
-		contentType = 'application/json',
-		body,
-		version = 0,
-		override,
-		retry = method === 'GET' ? 3 : 0,
-	} = options
-
-	const circuitBreakerKey = `${module || 'default'}_${path}`
-	const failureCount = useState<number>(`fetch_failures_${circuitBreakerKey}`, () => 0)
-	const lastFailureTime = useState<number>(`last_failure_${circuitBreakerKey}`, () => 0)
-
-	const now = Date.now()
-	if (failureCount.value >= 3 && now - lastFailureTime.value < 30000) {
-		const error = new ModrinthServersFetchError(
-			'[Modrinth Hosting] Circuit breaker open - too many recent failures',
-			503,
-		)
-		throw new ModrinthServerError(
-			'Service temporarily unavailable',
-			503,
-			error,
-			module,
-			undefined,
-			undefined,
-		)
-	}
-
-	if (now - lastFailureTime.value > 30000) {
-		failureCount.value = 0
-	}
-
-	const base = (import.meta.server ? config.pyroBaseUrl : config.public.pyroBaseUrl)?.replace(
-		/\/$/,
-		'',
-	)
-
-	if (!base) {
-		const error = new ModrinthServersFetchError(
-			'[Modrinth Hosting] Cannot fetch without base url. Make sure to set a PYRO_BASE_URL in environment variables',
-			10001,
-		)
-		throw new ModrinthServerError(
-			'Configuration error: Missing PYRO_BASE_URL',
-			500,
-			error,
-			module,
-			undefined,
-			undefined,
-		)
-	}
-
-	const versionString = `v${version}`
-	let newOverrideUrl = override?.url
-	if (newOverrideUrl && newOverrideUrl.includes('v0') && version !== 0) {
-		newOverrideUrl = newOverrideUrl.replace('v0', versionString)
-	}
-
-	const fullUrl = newOverrideUrl
-		? `https://${newOverrideUrl}/${path.replace(/^\//, '')}`
-		: version === 0
-			? `${base}/modrinth/v${version}/${path.replace(/^\//, '')}`
-			: version === 'internal'
-				? `${base}/_internal/${path.replace(/^\//, '')}`
-				: `${base}/v${version}/${path.replace(/^\//, '')}`
-
-	const headers: Record<string, string> = {
-		'User-Agent': 'Modrinth/1.0 (https://modrinth.com)',
-		'X-Archon-Request': 'true',
-		'X-Panel-Version': String(PANEL_VERSION),
-		Vary: 'Accept, Origin',
-	}
-
-	if (!options.bypassAuth) {
-		headers.Authorization = `Bearer ${override?.token ?? authToken}`
-		headers['Access-Control-Allow-Headers'] = 'Authorization'
-	}
-
-	if (contentType !== 'none') {
-		headers['Content-Type'] = contentType
-	}
-
-	if (import.meta.client && typeof window !== 'undefined') {
-		headers.Origin = window.location.origin
-	}
-
-	let attempts = 0
-	const maxAttempts = (typeof retry === 'boolean' ? (retry ? 3 : 1) : retry) + 1
-	let lastError: Error | null = null
-
-	while (attempts < maxAttempts) {
-		try {
-			const response = await $fetch<T>(fullUrl, {
-				method,
-				headers,
-				body:
-					body && contentType === 'application/json' ? JSON.stringify(body) : (body ?? undefined),
-				timeout: 10000,
-			})
-
-			failureCount.value = 0
-			return response
-		} catch (error) {
-			lastError = error as Error
-			attempts++
-
-			if (error instanceof FetchError) {
-				const statusCode = error.response?.status
-				const statusText = error.response?.statusText || 'Unknown error'
-
-				if (statusCode && statusCode >= 500) {
-					failureCount.value++
-					lastFailureTime.value = now
-				}
-
-				let v1Error: V1ErrorInfo | undefined
-				if (error.data?.error && error.data?.description) {
-					v1Error = {
-						context: errorContext,
-						...error.data,
-					}
-				}
-
-				const errorMessages: { [key: number]: string } = {
-					400: 'Bad Request',
-					401: 'Unauthorized',
-					403: 'Forbidden',
-					404: 'Not Found',
-					405: 'Method Not Allowed',
-					408: 'Request Timeout',
-					429: "You're making requests too quickly. Please wait a moment and try again.",
-					500: 'Internal Server Error',
-					502: 'Bad Gateway',
-					503: 'Service Unavailable',
-					504: 'Gateway Timeout',
-				}
-
-				const message =
-					statusCode && statusCode in errorMessages
-						? errorMessages[statusCode]
-						: `HTTP Error: ${statusCode || 'unknown'} ${statusText}`
-
-				const isRetryable = statusCode ? [408, 429].includes(statusCode) : false
-				const is5xxRetryable =
-					statusCode && statusCode >= 500 && statusCode < 600 && method === 'GET' && attempts === 1
-
-				if (!(isRetryable || is5xxRetryable) || attempts >= maxAttempts) {
-					console.error('Fetch error:', error)
-
-					const fetchError = new ModrinthServersFetchError(
-						`[Modrinth Hosting] ${error.message}`,
-						statusCode,
-						error,
-					)
-					throw new ModrinthServerError(
-						`[Modrinth Hosting] ${message}`,
-						statusCode,
-						fetchError,
-						module,
-						v1Error,
-						error.data,
-					)
-				}
-
-				const baseDelay = statusCode && statusCode >= 500 ? 5000 : 1000
-				const delay = Math.min(baseDelay * Math.pow(2, attempts - 1) + Math.random() * 1000, 15000)
-				console.warn(`Retrying request in ${delay}ms (attempt ${attempts}/${maxAttempts - 1})`)
-				await new Promise((resolve) => setTimeout(resolve, delay))
-				continue
-			}
-
-			console.error('Unexpected fetch error:', error)
-			const fetchError = new ModrinthServersFetchError(
-				'[Modrinth Hosting] An unexpected error occurred during the fetch operation.',
-				undefined,
-				error as Error,
-			)
-			throw new ModrinthServerError(
-				'Unexpected error during fetch operation',
-				undefined,
-				fetchError,
-				module,
-				undefined,
-				undefined,
-			)
-		}
-	}
-
-	console.error('All retry attempts failed:', lastError)
-	if (lastError instanceof FetchError) {
-		const statusCode = lastError.response?.status
-		const pyroError = new ModrinthServersFetchError(
-			'Maximum retry attempts reached',
-			statusCode,
-			lastError,
-		)
-		throw new ModrinthServerError(
-			'Maximum retry attempts reached',
-			statusCode,
-			pyroError,
-			module,
-			undefined,
-			lastError.data,
-		)
-	}
-
-	const fetchError = new ModrinthServersFetchError(
-		'Maximum retry attempts reached',
-		undefined,
-		lastError || undefined,
-	)
-	throw new ModrinthServerError(
-		'Maximum retry attempts reached',
-		undefined,
-		fetchError,
-		module,
-		undefined,
-		undefined,
-	)
-}
diff --git a/apps/frontend/src/composables/useCdnDownloadContext.ts b/apps/frontend/src/composables/useCdnDownloadContext.ts
index b9897a347d..6691843def 100644
--- a/apps/frontend/src/composables/useCdnDownloadContext.ts
+++ b/apps/frontend/src/composables/useCdnDownloadContext.ts
@@ -17,7 +17,6 @@ export type FilterSelection = {
 const cookieDefaults = {
 	maxAge: TEN_MINUTES,
 	sameSite: 'lax' as const,
-	secure: true,
 	path: '/',
 	httpOnly: false,
 }
@@ -52,13 +51,19 @@ function newFilterSelection(
 }
 
 export function useCdnDownloadContext() {
-	const filterGameVersionCookie = useCookie<string | null>('mr_download_filter_game_version', {
+	const config = useRuntimeConfig()
+	const cookieOptions = {
 		...cookieDefaults,
+		secure: config.public.cookieSecure,
+	}
+
+	const filterGameVersionCookie = useCookie<string | null>('mr_download_filter_game_version', {
+		...cookieOptions,
 		default: () => null,
 	})
 
 	const filterLoaderCookie = useCookie<string | null>('mr_download_filter_loader', {
-		...cookieDefaults,
+		...cookieOptions,
 		default: () => null,
 	})
 
diff --git a/apps/frontend/src/helpers/api.ts b/apps/frontend/src/helpers/api.ts
index 1434fe144f..5dd1ed0a8f 100644
--- a/apps/frontend/src/helpers/api.ts
+++ b/apps/frontend/src/helpers/api.ts
@@ -14,6 +14,7 @@ import {
 import type { Ref } from 'vue'
 
 import { useFeatureFlags } from '~/composables/featureFlags.ts'
+import { withStagingArchonBaseUrl } from '~/helpers/archon.ts'
 
 async function getRateLimitKeyFromSecretsStore(): Promise<string | undefined> {
 	try {
@@ -37,7 +38,8 @@ export function createModrinthClient(
 
 	const clientConfig: NuxtClientConfig = {
 		labrinthBaseUrl: config.apiBaseUrl,
-		archonBaseUrl: config.archonBaseUrl,
+		archonBaseUrl: () =>
+			withStagingArchonBaseUrl(config.archonBaseUrl, flags.value.archonApiStaging),
 		archonSentryCapture: () => flags.value.archonSentryCapture,
 		rateLimitKey: config.rateLimitKey || getRateLimitKeyFromSecretsStore,
 		features: [
diff --git a/apps/frontend/src/helpers/archon.ts b/apps/frontend/src/helpers/archon.ts
new file mode 100644
index 0000000000..4121f0dad9
--- /dev/null
+++ b/apps/frontend/src/helpers/archon.ts
@@ -0,0 +1,12 @@
+export const STAGING_ARCHON_BASE_URL = 'https://staging-archon.modrinth.com/'
+
+export function withStagingArchonBaseUrl(
+	baseUrl: string,
+	useStaging = useFeatureFlags().value.archonApiStaging,
+) {
+	if (!useStaging) {
+		return baseUrl
+	}
+
+	return STAGING_ARCHON_BASE_URL
+}
diff --git a/apps/frontend/src/pages/admin/emails.vue b/apps/frontend/src/pages/admin/emails.vue
index 24a788f67d..3a6e71e826 100644
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -23,6 +23,10 @@ function copy(id: string) {
 	navigator.clipboard?.writeText(`/_internal/templates/email/${id}`).catch(() => {})
 }
 
+function uncachedPreviewUrl(id: string) {
+	return `/_internal/templates/email/${id}?preview=${Date.now()}`
+}
+
 const previewModal = ref<{ hide: () => void; show: () => void } | null>(null)
 const previewTemplate = ref<string | null>(null)
 const previewLoading = ref(false)
@@ -73,7 +77,7 @@ async function openPreview(id: string, event?: MouseEvent) {
 	variableValues.value = {}
 
 	try {
-		const response = await fetch(`/_internal/templates/email/${id}`)
+		const response = await fetch(uncachedPreviewUrl(id), { cache: 'no-store' })
 		previewHtml.value = await response.text()
 
 		if (!response.ok) {
@@ -103,7 +107,7 @@ function openPopupPreview(id: string, offset = 0) {
 	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/email/${id}`,
+		uncachedPreviewUrl(id),
 		`email-${id}`,
 		`popup=yes,width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,menubar=no,toolbar=no,location=no,status=no`,
 	)
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index 8cc36c9c6b..a3e8465714 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -218,7 +218,7 @@
 							:level="notice.level"
 							:message="notice.message"
 							:dismissable="notice.dismissable"
-							:title="notice.title"
+							:title="notice.title ?? undefined"
 							preview
 						/>
 						<div class="mt-4 flex items-center gap-2">
@@ -260,6 +260,7 @@
 	</div>
 </template>
 <script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
 import { EditIcon, PlusIcon, SaveIcon, SettingsIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
@@ -267,6 +268,7 @@ import {
 	commonMessages,
 	CopyCode,
 	defineMessages,
+	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
 	ServerNotice,
@@ -278,14 +280,13 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { NOTICE_LEVELS } from '@modrinth/ui/src/utils/notices.ts'
-import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
 import AssignNoticeModal from '~/components/ui/admin/AssignNoticeModal.vue'
-import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 const formatDateTime = useFormatDateTime({
@@ -297,6 +298,8 @@ const formatDateTimeShortMonth = useFormatDateTime({
 	dateStyle: 'medium',
 })
 
+type ServerNoticeType = Archon.Notices.v0.ListedNotice
+
 const notices = ref<ServerNoticeType[]>([])
 const createNoticeModal = ref<InstanceType<typeof NewModal>>()
 const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>()
@@ -304,16 +307,14 @@ const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>()
 await refreshNotices()
 
 async function refreshNotices() {
-	await useServersFetch('notices').then((res) => {
-		notices.value = res as ServerNoticeType[]
-		notices.value.sort((a, b) => {
-			const dateDiff = dayjs(b.announce_at).diff(dayjs(a.announce_at))
-			if (dateDiff === 0) {
-				return b.id - a.id
-			}
+	notices.value = await client.archon.notices_v0.list()
+	notices.value.sort((a, b) => {
+		const dateDiff = dayjs(b.announce_at).diff(dayjs(a.announce_at))
+		if (dateDiff === 0) {
+			return b.id - a.id
+		}
 
-			return dateDiff
-		})
+		return dateDiff
 	})
 }
 
@@ -347,7 +348,7 @@ function startEditing(notice: ServerNoticeType, assignments: boolean = false) {
 	newNoticeLevel.value = levelOptions.find((x) => x.id === notice.level) ?? levelOptions[0]
 	newNoticeDismissable.value = notice.dismissable
 	newNoticeMessage.value = notice.message
-	newNoticeTitle.value = notice.title
+	newNoticeTitle.value = notice.title ?? undefined
 	newNoticeScheduledDate.value = dayjs(notice.announce_at).format(DATE_TIME_FORMAT)
 	newNoticeExpiresDate.value = notice.expires
 		? dayjs(notice.expires).format(DATE_TIME_FORMAT)
@@ -361,9 +362,8 @@ function startEditing(notice: ServerNoticeType, assignments: boolean = false) {
 }
 
 async function deleteNotice(notice: ServerNoticeType) {
-	await useServersFetch(`notices/${notice.id}`, {
-		method: 'DELETE',
-	})
+	await client.archon.notices_v0
+		.delete(notice.id)
 		.then(() => {
 			addNotification({
 				title: `Successfully deleted notice #${notice.id}`,
@@ -412,9 +412,10 @@ async function saveChanges() {
 		return
 	}
 
-	await useServersFetch(`notices/${editingNotice.value?.id}`, {
-		method: 'PATCH',
-		body: {
+	if (!editingNotice.value) return
+
+	await client.archon.notices_v0
+		.update(editingNotice.value.id, {
 			message: newNoticeMessage.value,
 			title: newNoticeSurvey.value ? undefined : trimmedTitle.value,
 			level: newNoticeLevel.value.id,
@@ -425,14 +426,14 @@ async function saveChanges() {
 			expires: newNoticeExpiresDate.value
 				? dayjs(newNoticeExpiresDate.value).toISOString()
 				: undefined,
-		},
-	}).catch((err) => {
-		addNotification({
-			title: 'Error saving changes to notice',
-			text: err,
-			type: 'error',
 		})
-	})
+		.catch((err) => {
+			addNotification({
+				title: 'Error saving changes to notice',
+				text: err,
+				type: 'error',
+			})
+		})
 	await refreshNotices()
 	createNoticeModal.value?.hide()
 }
@@ -442,9 +443,8 @@ async function createNotice() {
 		return
 	}
 
-	await useServersFetch('notices', {
-		method: 'POST',
-		body: {
+	await client.archon.notices_v0
+		.create({
 			message: newNoticeMessage.value,
 			title: newNoticeSurvey.value ? undefined : trimmedTitle.value,
 			level: newNoticeLevel.value.id,
@@ -455,14 +455,14 @@ async function createNotice() {
 			expires: newNoticeExpiresDate.value
 				? dayjs(newNoticeExpiresDate.value).toISOString()
 				: undefined,
-		},
-	}).catch((err) => {
-		addNotification({
-			title: 'Error creating notice',
-			text: err,
-			type: 'error',
 		})
-	})
+		.catch((err) => {
+			addNotification({
+				title: 'Error creating notice',
+				text: err,
+				type: 'error',
+			})
+		})
 	await refreshNotices()
 	createNoticeModal.value?.hide()
 }
diff --git a/apps/frontend/src/pages/admin/servers/transfers.vue b/apps/frontend/src/pages/admin/servers/transfers.vue
index 04627f4885..ed50e5be86 100644
--- a/apps/frontend/src/pages/admin/servers/transfers.vue
+++ b/apps/frontend/src/pages/admin/servers/transfers.vue
@@ -108,11 +108,13 @@
 </template>
 
 <script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
 import { PlusIcon, XCircleIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	ButtonStyled,
 	ConfirmModal,
+	injectModrinthClient,
 	injectNotificationManager,
 	Pagination,
 	TagItem,
@@ -124,38 +126,16 @@ import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
 import TransferModal from '~/components/ui/admin/TransferModal.vue'
-import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
 const formatRelativeTime = useRelativeTime()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
 
-// Types
-interface ProvisionOptions {
-	region?: string | null
-	node_tags?: string[]
-}
-
-interface TransferBatch {
-	id: number
-	created_by: string
-	created_at: string
-	reason: string | null
-	scheduled_at: string
-	cancelled: boolean
-	log_count: number
-	provision_options: ProvisionOptions
-}
-
-interface HistoryResponse {
-	batches: TransferBatch[]
-	total: number
-	page: number
-	page_size: number
-}
+type TransferBatch = Archon.Transfers.Internal.TransferLogBatchEntry
 
 const transferModal = ref<InstanceType<typeof TransferModal>>()
 const cancelModal = ref<InstanceType<typeof ConfirmModal>>()
@@ -178,10 +158,10 @@ async function refreshHistory() {
 	loading.value = true
 	error.value = null
 	try {
-		const data = await useServersFetch<HistoryResponse>(
-			`/transfers/history?page=${currentPage.value}&page_size=${pageSize}`,
-			{ version: 'internal' },
-		)
+		const data = await client.archon.transfers_internal.history({
+			page: currentPage.value,
+			page_size: pageSize,
+		})
 		batches.value = data.batches || []
 		total.value = data.total || 0
 
@@ -283,12 +263,8 @@ function showCancelModal(batchId: number) {
 async function confirmCancel() {
 	if (!cancellingBatchId.value) return
 	try {
-		await useServersFetch('/transfers/cancel', {
-			version: 'internal',
-			method: 'POST',
-			body: {
-				batch_ids: [cancellingBatchId.value],
-			},
+		await client.archon.transfers_internal.cancel({
+			batch_ids: [cancellingBatchId.value],
 		})
 		addNotification({
 			title: 'Transfer cancelled',
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index a1bbb18090..60b503a931 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -72,6 +72,7 @@
 						}}
 						<Tooltip
 							theme="dismissable-prompt"
+							class="inline-flex shrink-0"
 							:triggers="['hover', 'focus']"
 							no-auto-focus
 							:aria-id="`${baseId}-date-segment-tooltip-${i}`"
@@ -106,6 +107,7 @@
 						{{ formatMessage(messages.processing) }}
 						<Tooltip
 							theme="dismissable-prompt"
+							class="inline-flex shrink-0"
 							:triggers="['hover', 'focus']"
 							no-auto-focus
 							:aria-id="`${baseId}-processing-tooltip`"
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 7c4a3d8ecd..5f6d5245f4 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -11,6 +11,7 @@
 		:auth-user="authUser"
 		:navigate-to-billing="() => router.push('/settings/billing')"
 		:navigate-to-servers="() => router.push('/hosting/manage')"
+		constrain-width
 		:browse-modpacks="
 			({ serverId: sid, worldId: wid, from }) => {
 				navigateTo({
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/access.vue b/apps/frontend/src/pages/hosting/manage/[id]/access.vue
new file mode 100644
index 0000000000..818ac1acbc
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/access.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageAccessPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const client = injectModrinthClient()
+const { server, serverId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+const flags = useFeatureFlags()
+const ACTION_LOG_PAGE_SIZE = 200
+const ACTION_LOG_SORT_DIRECTION = 'desc'
+const actionLogDateFilter = defaultActionLogDateFilter()
+
+await Promise.allSettled([
+	queryClient.ensureQueryData({
+		queryKey: ['servers', 'users', 'v1', serverId],
+		queryFn: () => client.archon.server_users_v1.list(serverId),
+		staleTime: 30_000,
+	}),
+	queryClient.ensureQueryData({
+		queryKey: ['servers', 'v1', 'detail', serverId],
+		queryFn: () => client.archon.servers_v1.get(serverId),
+		staleTime: 30_000,
+	}),
+	queryClient.prefetchInfiniteQuery({
+		queryKey: [
+			'servers',
+			'action-log',
+			'v1',
+			'infinite',
+			serverId,
+			null,
+			actionLogDateFilter.min_datetime,
+			actionLogDateFilter.max_datetime,
+			ACTION_LOG_SORT_DIRECTION,
+		],
+		queryFn: ({ pageParam = 0 }) => {
+			const offset = typeof pageParam === 'number' ? pageParam : 0
+			return client.archon.actions_v1.list(serverId, {
+				limit: ACTION_LOG_PAGE_SIZE,
+				offset,
+				order: ACTION_LOG_SORT_DIRECTION,
+				...actionLogDateFilter,
+			})
+		},
+		getNextPageParam: (lastPage) =>
+			typeof lastPage.next_offset === 'number' ? lastPage.next_offset : undefined,
+		initialPageParam: 0,
+		staleTime: 30_000,
+	}),
+])
+
+useHead({
+	title: computed(() => `Access - ${server.value?.name ?? 'Server'} - Modrinth`),
+})
+
+function defaultActionLogDateFilter() {
+	const endDate = new Date()
+	const startDate = new Date(endDate)
+	startDate.setDate(startDate.getDate() - 6)
+
+	return {
+		min_datetime: startOfDay(startDate).toISOString(),
+		max_datetime: endOfDay(endDate).toISOString(),
+	}
+}
+
+function startOfDay(date: Date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+function endOfDay(date: Date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999)
+}
+</script>
+
+<template>
+	<ServersManageAccessPage :show-audit-log-instances="flags.showHostingAccessInstanceAuditLog" />
+</template>
diff --git a/apps/frontend/src/plugins/cosmetics.ts b/apps/frontend/src/plugins/cosmetics.ts
index e77aeb288e..7d821eae7f 100644
--- a/apps/frontend/src/plugins/cosmetics.ts
+++ b/apps/frontend/src/plugins/cosmetics.ts
@@ -27,10 +27,11 @@ export interface Cosmetics {
 export default defineNuxtPlugin({
 	name: 'cosmetics',
 	setup() {
+		const config = useRuntimeConfig()
 		const cosmetics = useCookie<Cosmetics>('cosmetics', {
 			maxAge: 60 * 60 * 24 * 365 * 10,
 			sameSite: 'lax',
-			secure: true,
+			secure: config.public.cookieSecure,
 			httpOnly: false,
 			path: '/',
 			default: () => ({
diff --git a/apps/frontend/src/plugins/theme/theme-settings.ts b/apps/frontend/src/plugins/theme/theme-settings.ts
index 37333be09c..b8a632288a 100644
--- a/apps/frontend/src/plugins/theme/theme-settings.ts
+++ b/apps/frontend/src/plugins/theme/theme-settings.ts
@@ -8,10 +8,11 @@ interface ThemeSettings {
 export function useThemeSettings(getDefaultTheme?: () => Theme) {
 	getDefaultTheme ??= () => 'dark'
 
+	const config = useRuntimeConfig()
 	const $settings = useCookie<ThemeSettings>('color-mode', {
 		maxAge: 60 * 60 * 24 * 365 * 10,
 		sameSite: 'lax',
-		secure: true,
+		secure: config.public.cookieSecure,
 		httpOnly: false,
 		path: '/',
 	})
diff --git a/apps/frontend/src/public/news/article/server-access/activity-log.webp b/apps/frontend/src/public/news/article/server-access/activity-log.webp
new file mode 100644
index 0000000000..01847b870b
Binary files /dev/null and b/apps/frontend/src/public/news/article/server-access/activity-log.webp differ
diff --git a/apps/frontend/src/public/news/article/server-access/add-user-modal.webp b/apps/frontend/src/public/news/article/server-access/add-user-modal.webp
new file mode 100644
index 0000000000..8a36a37890
Binary files /dev/null and b/apps/frontend/src/public/news/article/server-access/add-user-modal.webp differ
diff --git a/apps/frontend/src/public/news/article/server-access/server-access.webp b/apps/frontend/src/public/news/article/server-access/server-access.webp
new file mode 100644
index 0000000000..5900cdefbf
Binary files /dev/null and b/apps/frontend/src/public/news/article/server-access/server-access.webp differ
diff --git a/apps/frontend/src/public/news/article/server-access/thumbnail.webp b/apps/frontend/src/public/news/article/server-access/thumbnail.webp
new file mode 100644
index 0000000000..fa708ee51c
Binary files /dev/null and b/apps/frontend/src/public/news/article/server-access/thumbnail.webp differ
diff --git a/apps/frontend/src/public/news/feed/articles.json b/apps/frontend/src/public/news/feed/articles.json
index 8327d1406e..a78d4db466 100644
--- a/apps/frontend/src/public/news/feed/articles.json
+++ b/apps/frontend/src/public/news/feed/articles.json
@@ -1,5 +1,12 @@
 {
 	"articles": [
+		{
+			"title": "Manage servers together",
+			"summary": "Add other users to your server, assign roles, and track what’s changed.",
+			"thumbnail": "https://modrinth.com/news/article/server-access/thumbnail.webp",
+			"date": "2026-06-03T20:10:28.823Z",
+			"link": "https://modrinth.com/news/article/server-access"
+		},
 		{
 			"title": "Pride 2026 Fundraiser: Matching up to $10,000",
 			"summary": "Celebrating our community and working together to make a difference.",
diff --git a/apps/frontend/src/public/news/feed/rss.xml b/apps/frontend/src/public/news/feed/rss.xml
index 24755b99ad..47249c7c04 100644
--- a/apps/frontend/src/public/news/feed/rss.xml
+++ b/apps/frontend/src/public/news/feed/rss.xml
@@ -4,9 +4,17 @@
         <description><![CDATA[Keep up-to-date on the latest news from Modrinth.]]></description>
         <link>https://modrinth.com/news/</link>
         <generator>@modrinth/blog</generator>
-        <lastBuildDate>Sun, 31 May 2026 23:20:41 GMT</lastBuildDate>
+        <lastBuildDate>Wed, 03 Jun 2026 21:05:41 GMT</lastBuildDate>
         <atom:link href="https://modrinth.com/news/feed/rss.xml" rel="self" type="application/rss+xml"/>
         <language><![CDATA[en]]></language>
+        <item>
+            <title><![CDATA[Manage servers together]]></title>
+            <description><![CDATA[Add other users to your server, assign roles, and track what’s changed.]]></description>
+            <link>https://modrinth.com/news/article/server-access/</link>
+            <guid isPermaLink="false">https://modrinth.com/news/article/server-access/</guid>
+            <pubDate>Wed, 03 Jun 2026 20:10:28 GMT</pubDate>
+            <content:encoded>&lt;![CDATA[&lt;p&gt;Hey everyone,&lt;/p&gt;&lt;p&gt;With this release, you can now give other users access to your server! This has been one of the most requested features for Modrinth Hosting and we’re excited to finally get it out.&lt;/p&gt;&lt;p&gt;&lt;img src=&quot;/news/article/server-access/server-access.webp&quot; alt=&quot;The new Access tab in the Modrinth Hosting panel, featuring a list of invited users and their permissions, invite new users, and an activity log to see what changes are being made to your server and by whom.&quot;&gt;&lt;/p&gt;&lt;h2&gt;TL;DR&lt;/h2&gt;&lt;ul&gt;&lt;li&gt;Add users to your server&lt;/li&gt;&lt;li&gt;Set permission roles&lt;/li&gt;&lt;li&gt;View activity log&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;Invite your friends&lt;/h2&gt;&lt;p&gt;You can now give other users access to your server so they can help manage content, start the server, and more. To invite someone, just enter their Modrinth username and they’ll receive an invite by email or as a notification in the app if they’re signed in.&lt;/p&gt;&lt;p&gt;Alongside this release, we’ve also improved state syncing between the website panel, app, and other users, so everything should stay up to date in real time.&lt;/p&gt;&lt;p&gt;&lt;img src=&quot;/news/article/server-access/add-user-modal.webp&quot; alt=&quot;A pop-up modal for adding a user to your server. Search by Modrinth username, select their role (editor or limited), and an option to also send them a friend request.&quot;&gt;&lt;/p&gt;&lt;h2&gt;Permission roles&lt;/h2&gt;&lt;p&gt;When adding someone to your server, you can choose what level of access they have. There are three roles, with each role inheriting the permissions of the previous one:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Owner:&lt;/strong&gt; Full access to the server including billing (you)&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Editor:&lt;/strong&gt; Manage content, files, backups, settings, and more&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Limited:&lt;/strong&gt; Start, stop, and view the server without making changes&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;You can find a full permission breakdown below:&lt;/p&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Permission&lt;/th&gt;&lt;th&gt;Owner&lt;/th&gt;&lt;th&gt;Editor&lt;/th&gt;&lt;th&gt;Limited&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Start / stop server&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Execute commands&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Edit settings&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Edit installation&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Manage content&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Manage files&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Create &amp;amp; restore backups&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Invite users&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Reset server&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Manage billing&lt;/td&gt;&lt;td&gt;✅&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;td&gt;❌&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;h2&gt;See what changed&lt;/h2&gt;&lt;p&gt;Along with adding users, we’ve introduced an activity log. This is a chronological history of actions related to your server so you can see what changed, who changed it, and when it happened. Some actions are grouped together, like updating multiple projects at once, to keep things easier to read.&lt;/p&gt;&lt;p&gt;You can select a time timeframe and filter by user or action type if you’re looking for something specific.&lt;/p&gt;&lt;p&gt;&lt;img src=&quot;/news/article/server-access/activity-log.webp&quot; alt=&quot;The activity log section of the Access tab, where you can see the user that performed an action on the left column, the action that was performed in the center, and the time it happened on the right.&quot;&gt;&lt;/p&gt;&lt;p&gt;—&lt;/p&gt;&lt;p&gt;Thank you for your continued support! 💚&lt;/p&gt;]]&gt;</content:encoded>
+        </item>
         <item>
             <title><![CDATA[Pride 2026 Fundraiser: Matching up to $10,000]]></title>
             <description><![CDATA[Celebrating our community and working together to make a difference.]]></description>
diff --git a/packages/api-client/src/core/abstract-client.ts b/packages/api-client/src/core/abstract-client.ts
index 97ce38dd1b..70c2f1584f 100644
--- a/packages/api-client/src/core/abstract-client.ts
+++ b/packages/api-client/src/core/abstract-client.ts
@@ -1,10 +1,11 @@
 import type { InferredClientModules } from '../modules'
 import { buildModuleStructure } from '../modules'
-import type { ClientConfig } from '../types/client'
+import type { BaseUrlConfig, ClientConfig } from '../types/client'
 import type { RequestContext, RequestOptions } from '../types/request'
 import type { UploadMetadata, UploadProgress, UploadRequestOptions } from '../types/upload'
 import type { AbstractFeature } from './abstract-feature'
 import type { AbstractModule } from './abstract-module'
+import type { AbstractSyncClient } from './abstract-sync'
 import { AbstractUploadClient } from './abstract-upload-client'
 import type { AbstractWebSocketClient } from './abstract-websocket'
 import { ModrinthApiError, ModrinthServerError } from './errors'
@@ -32,7 +33,10 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	private _moduleNamespaces: Map<string, Record<string, AbstractModule>> = new Map()
 
 	public readonly labrinth!: InferredClientModules['labrinth']
-	public readonly archon!: ArchonClientModules & { sockets: AbstractWebSocketClient }
+	public readonly archon!: ArchonClientModules & {
+		sockets: AbstractWebSocketClient
+		sync: AbstractSyncClient
+	}
 	public readonly kyros!: InferredClientModules['kyros']
 	public readonly iso3166!: InferredClientModules['iso3166']
 	public readonly mclogs!: InferredClientModules['mclogs']
@@ -116,9 +120,9 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	async request<T>(path: string, options: RequestOptions): Promise<T> {
 		let baseUrl: string
 		if (options.api === 'labrinth') {
-			baseUrl = this.config.labrinthBaseUrl!
+			baseUrl = this.resolveBaseUrl(this.config.labrinthBaseUrl!)
 		} else if (options.api === 'archon') {
-			baseUrl = this.config.archonBaseUrl!
+			baseUrl = this.resolveBaseUrl(this.config.archonBaseUrl!)
 		} else {
 			baseUrl = options.api
 		}
@@ -160,13 +164,55 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 		}
 	}
 
+	async stream(path: string, options: RequestOptions): Promise<ReadableStream<Uint8Array>> {
+		let baseUrl: string
+		if (options.api === 'labrinth') {
+			baseUrl = this.resolveBaseUrl(this.config.labrinthBaseUrl!)
+		} else if (options.api === 'archon') {
+			baseUrl = this.resolveBaseUrl(this.config.archonBaseUrl!)
+		} else {
+			baseUrl = options.api
+		}
+
+		const url = this.buildUrl(path, baseUrl, options.version)
+		const defaultHeaders = await this.buildDefaultHeaders()
+		const mergedOptions: RequestOptions = {
+			method: 'GET',
+			retry: false,
+			circuitBreaker: false,
+			...options,
+			headers: {
+				...defaultHeaders,
+				Accept: 'text/event-stream',
+				...options.headers,
+			},
+		}
+		this.attachArchonSentryCaptureHeader(mergedOptions)
+
+		const context = this.buildContext(url, path, mergedOptions)
+
+		try {
+			return await this.executeFeatureChain<ReadableStream<Uint8Array>>(context, () =>
+				this.executeStreamRequest(context.url, context.options),
+			)
+		} catch (error) {
+			const apiError = this.normalizeError(error, context)
+			await this.config.hooks?.onError?.(apiError, context)
+
+			throw apiError
+		}
+	}
+
 	/**
 	 * Execute the feature chain and the actual request
 	 *
 	 * Features are executed in order, with each feature calling next() to continue.
 	 * The last "feature" in the chain is the actual request execution.
 	 */
-	protected async executeFeatureChain<T>(context: RequestContext): Promise<T> {
+	protected async executeFeatureChain<T>(
+		context: RequestContext,
+		executeTerminal: () => Promise<T> = () => this.executeRequest<T>(context.url, context.options),
+	): Promise<T> {
 		// Filter to only features that should apply
 		const applicableFeatures = this.features.filter((feature) => feature.shouldApply(context))
 
@@ -184,7 +230,7 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 			} else {
 				// We've reached the end of the chain, execute the actual request
 				await this.config.hooks?.onRequest?.(context)
-				return this.executeRequest<T>(context.url, context.options)
+				return executeTerminal()
 			}
 		}
 
@@ -243,6 +289,10 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 		return `${base}${versionPath}${cleanPath}`
 	}
 
+	protected resolveBaseUrl(baseUrl: BaseUrlConfig): string {
+		return typeof baseUrl === 'function' ? baseUrl() : baseUrl
+	}
+
 	/**
 	 * Build the request context
 	 */
@@ -354,6 +404,11 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	 */
 	protected abstract executeRequest<T>(url: string, options: RequestOptions): Promise<T>
 
+	protected abstract executeStreamRequest(
+		url: string,
+		options: RequestOptions,
+	): Promise<ReadableStream<Uint8Array>>
+
 	/**
 	 * Execute the actual XHR upload
 	 *
diff --git a/packages/api-client/src/core/abstract-sync.ts b/packages/api-client/src/core/abstract-sync.ts
new file mode 100644
index 0000000000..a8e31c536e
--- /dev/null
+++ b/packages/api-client/src/core/abstract-sync.ts
@@ -0,0 +1,167 @@
+import type mitt from 'mitt'
+
+import type { Archon } from '../modules/archon/types'
+import type { RequestOptions } from '../types/request'
+
+export type SyncEventType = Archon.Sync.v1.SyncEvent['type']
+
+export type SyncEventOfType<E extends SyncEventType> = Extract<
+	Archon.Sync.v1.SyncEvent,
+	{ type: E }
+>
+
+export type SyncEventHandler<E extends Archon.Sync.v1.SyncEvent = Archon.Sync.v1.SyncEvent> = (
+	event: E,
+) => void
+
+export type SyncStatusState =
+	| 'idle'
+	| 'connecting'
+	| 'connected'
+	| 'reconnecting'
+	| 'disconnected'
+	| 'error'
+
+export type SyncStatus = {
+	state: SyncStatusState
+	connected: boolean
+	reconnecting: boolean
+	reconnectAttempts: number
+	retryDelay: number
+	lastEventId?: string
+	error?: unknown
+}
+
+export type SyncStatusHandler = (status: SyncStatus) => void
+
+export type SyncConnectOptions = {
+	intent?: Archon.Sync.v1.SyncIntent
+	force?: boolean
+}
+
+export type SyncConnection = {
+	serverId: string
+	intent: Archon.Sync.v1.SyncIntent
+	controller?: AbortController
+	reconnectAttempts: number
+	reconnectTimer?: ReturnType<typeof setTimeout>
+	reconnectResolve?: () => void
+	retryDelay: number
+	lastEventId?: string
+	stopped: boolean
+	status: SyncStatusState
+	error?: unknown
+}
+
+export type SyncEmitterEvents = Record<string, unknown>
+
+export abstract class AbstractSyncClient {
+	protected connections = new Map<string, SyncConnection>()
+	protected abstract emitter: ReturnType<typeof mitt<SyncEmitterEvents>>
+
+	constructor(
+		protected client: {
+			stream: (path: string, options: RequestOptions) => Promise<ReadableStream<Uint8Array>>
+		},
+	) {}
+
+	abstract safeConnectServer(serverId: string, options?: SyncConnectOptions): Promise<void>
+
+	abstract disconnect(serverId: string): void
+
+	abstract disconnectAll(): void
+
+	on<E extends SyncEventType>(
+		serverId: string,
+		eventType: E,
+		handler: SyncEventHandler<SyncEventOfType<E>>,
+	): () => void {
+		const eventKey = this.getEventKey(serverId, eventType)
+		const wrapped = handler as (event: unknown) => void
+
+		this.emitter.on(eventKey, wrapped)
+
+		return () => {
+			this.emitter.off(eventKey, wrapped)
+		}
+	}
+
+	onAny(serverId: string, handler: SyncEventHandler): () => void {
+		const eventKey = this.getAnyEventKey(serverId)
+		const wrapped = handler as (event: unknown) => void
+
+		this.emitter.on(eventKey, wrapped)
+
+		return () => {
+			this.emitter.off(eventKey, wrapped)
+		}
+	}
+
+	onStatus(serverId: string, handler: SyncStatusHandler): () => void {
+		const eventKey = this.getStatusEventKey(serverId)
+		const wrapped = handler as (event: unknown) => void
+
+		this.emitter.on(eventKey, wrapped)
+
+		return () => {
+			this.emitter.off(eventKey, wrapped)
+		}
+	}
+
+	getStatus(serverId: string): SyncStatus | null {
+		const connection = this.connections.get(serverId)
+		if (!connection) return null
+
+		return this.connectionToStatus(connection)
+	}
+
+	protected emitSyncEvent(serverId: string, event: Archon.Sync.v1.SyncEvent): void {
+		this.emitter.emit(this.getEventKey(serverId, event.type), event)
+		this.emitter.emit(this.getAnyEventKey(serverId), event)
+	}
+
+	protected updateStatus(
+		connection: SyncConnection,
+		status: SyncStatusState,
+		error?: unknown,
+	): void {
+		connection.status = status
+		connection.error = error
+		this.emitter.emit(
+			this.getStatusEventKey(connection.serverId),
+			this.connectionToStatus(connection),
+		)
+	}
+
+	protected clearListeners(serverId: string): void {
+		this.emitter.all.forEach((_handlers, type) => {
+			if (type.toString().startsWith(`${serverId}:`)) {
+				this.emitter.all.delete(type)
+			}
+		})
+	}
+
+	protected connectionToStatus(connection: SyncConnection): SyncStatus {
+		return {
+			state: connection.status,
+			connected: connection.status === 'connected',
+			reconnecting: connection.status === 'reconnecting',
+			reconnectAttempts: connection.reconnectAttempts,
+			retryDelay: connection.retryDelay,
+			lastEventId: connection.lastEventId,
+			error: connection.error,
+		}
+	}
+
+	private getEventKey(serverId: string, eventType: string): string {
+		return `${serverId}:${eventType}`
+	}
+
+	private getAnyEventKey(serverId: string): string {
+		return `${serverId}:*`
+	}
+
+	private getStatusEventKey(serverId: string): string {
+		return `${serverId}:__status`
+	}
+}
diff --git a/packages/api-client/src/index.ts b/packages/api-client/src/index.ts
index 2e1e1a3ec0..e675904fc1 100644
--- a/packages/api-client/src/index.ts
+++ b/packages/api-client/src/index.ts
@@ -1,5 +1,16 @@
 export { AbstractModrinthClient } from './core/abstract-client'
 export { AbstractFeature, type FeatureConfig } from './core/abstract-feature'
+export {
+	AbstractSyncClient,
+	type SyncConnection,
+	type SyncConnectOptions,
+	type SyncEventHandler,
+	type SyncEventOfType,
+	type SyncEventType,
+	type SyncStatus,
+	type SyncStatusHandler,
+	type SyncStatusState,
+} from './core/abstract-sync'
 export { AbstractUploadClient } from './core/abstract-upload-client'
 export {
 	AbstractWebSocketClient,
@@ -25,10 +36,18 @@ export * from './modules/types'
 export { GenericModrinthClient } from './platform/generic'
 export type { NuxtClientConfig } from './platform/nuxt'
 export { NuxtCircuitBreakerStorage, NuxtModrinthClient } from './platform/nuxt'
+export { GenericSyncClient } from './platform/sync-generic'
 export type { TauriClientConfig } from './platform/tauri'
 export { TauriModrinthClient } from './platform/tauri'
 export { XHRUploadClient } from './platform/xhr-upload-client'
 export { clearNodeAuthState, nodeAuthState, setNodeAuthState } from './state/node-auth'
 export * from './types'
 export { withJWTRetry } from './utils/jwt-retry'
+export {
+	type ParsedSseEvent,
+	type ParsedSseItem,
+	type ParsedSseRetry,
+	parseSyncEventData,
+	SseParser,
+} from './utils/sse'
 export type { Override, RawDecimal } from './utils/types'
diff --git a/packages/api-client/src/modules/archon/actions/v1.ts b/packages/api-client/src/modules/archon/actions/v1.ts
new file mode 100644
index 0000000000..88227bf0e8
--- /dev/null
+++ b/packages/api-client/src/modules/archon/actions/v1.ts
@@ -0,0 +1,35 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Archon } from '../types'
+
+export class ArchonActionsV1Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'archon_actions_v1'
+	}
+
+	/**
+	 * Get server action log entries.
+	 * GET /v1/servers/:server_id/action-log
+	 */
+	public async list(
+		serverId: string,
+		options: Archon.Actions.v1.ListActionLogOptions = {},
+	): Promise<Archon.Actions.v1.ActionLogResponse> {
+		const params: Record<string, string | number> = {}
+		if (options.filter) params.filter = JSON.stringify(options.filter)
+		if (options.limit !== undefined) params.limit = options.limit
+		if (options.offset !== undefined) params.offset = options.offset
+		if (options.order !== undefined) params.order = options.order
+		if (options.min_datetime !== undefined) params.min_datetime = options.min_datetime
+		if (options.max_datetime !== undefined) params.max_datetime = options.max_datetime
+
+		return this.client.request<Archon.Actions.v1.ActionLogResponse>(
+			`/servers/${serverId}/action-log`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'GET',
+				params: Object.keys(params).length > 0 ? params : undefined,
+			},
+		)
+	}
+}
diff --git a/packages/api-client/src/modules/archon/index.ts b/packages/api-client/src/modules/archon/index.ts
index ed9719ad3c..194ea0333e 100644
--- a/packages/api-client/src/modules/archon/index.ts
+++ b/packages/api-client/src/modules/archon/index.ts
@@ -1,3 +1,4 @@
+export * from './actions/v1'
 export * from './backups/v1'
 export * from './backups-queue/v1'
 export * from './content/v1'
diff --git a/packages/api-client/src/modules/archon/nodes/internal.ts b/packages/api-client/src/modules/archon/nodes/internal.ts
new file mode 100644
index 0000000000..254f392c8c
--- /dev/null
+++ b/packages/api-client/src/modules/archon/nodes/internal.ts
@@ -0,0 +1,20 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Archon } from '../types'
+
+export class ArchonNodesInternalModule extends AbstractModule {
+	public getModuleID(): string {
+		return 'archon_nodes_internal'
+	}
+
+	/**
+	 * Get node hostnames and region summary for admin tooling.
+	 * GET /_internal/nodes/overview
+	 */
+	public async overview(): Promise<Archon.Nodes.Internal.Overview> {
+		return this.client.request<Archon.Nodes.Internal.Overview>('/nodes/overview', {
+			api: 'archon',
+			version: 'internal',
+			method: 'GET',
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/archon/notices/v0.ts b/packages/api-client/src/modules/archon/notices/v0.ts
new file mode 100644
index 0000000000..a6e76b0277
--- /dev/null
+++ b/packages/api-client/src/modules/archon/notices/v0.ts
@@ -0,0 +1,98 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Archon } from '../types'
+
+export class ArchonNoticesV0Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'archon_notices_v0'
+	}
+
+	/**
+	 * Get all server notices.
+	 * GET /modrinth/v0/notices
+	 */
+	public async list(): Promise<Archon.Notices.v0.ListedNotice[]> {
+		return this.client.request<Archon.Notices.v0.ListedNotice[]>('/notices', {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'GET',
+		})
+	}
+
+	/**
+	 * Create a server notice.
+	 * POST /modrinth/v0/notices
+	 */
+	public async create(
+		request: Archon.Notices.v0.Announce,
+	): Promise<Archon.Notices.v0.PostNoticeResponseBody> {
+		return this.client.request<Archon.Notices.v0.PostNoticeResponseBody>('/notices', {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'POST',
+			body: request,
+		})
+	}
+
+	/**
+	 * Update a server notice.
+	 * PATCH /modrinth/v0/notices/:id
+	 */
+	public async update(id: number, request: Archon.Notices.v0.AnnouncePatch): Promise<void> {
+		await this.client.request(`/notices/${id}`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'PATCH',
+			body: request,
+		})
+	}
+
+	/**
+	 * Delete a server notice.
+	 * DELETE /modrinth/v0/notices/:id
+	 */
+	public async delete(id: number): Promise<void> {
+		await this.client.request(`/notices/${id}`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'DELETE',
+		})
+	}
+
+	/**
+	 * Assign a notice to a server or node.
+	 * PUT /modrinth/v0/notices/:id/assign?server=:serverId
+	 * PUT /modrinth/v0/notices/:id/assign?node=:nodeId
+	 */
+	public async assign(id: number, target: Archon.Notices.v0.AssignmentTarget): Promise<void> {
+		await this.client.request(`/notices/${id}/assign`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'PUT',
+			params: this.assignmentTargetToParams(target),
+		})
+	}
+
+	/**
+	 * Unassign a notice from a server or node.
+	 * PUT /modrinth/v0/notices/:id/unassign?server=:serverId
+	 * PUT /modrinth/v0/notices/:id/unassign?node=:nodeId
+	 */
+	public async unassign(id: number, target: Archon.Notices.v0.AssignmentTarget): Promise<void> {
+		await this.client.request(`/notices/${id}/unassign`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'PUT',
+			params: this.assignmentTargetToParams(target),
+		})
+	}
+
+	private assignmentTargetToParams(
+		target: Archon.Notices.v0.AssignmentTarget,
+	): Record<string, string> {
+		if ('server' in target) {
+			return { server: target.server }
+		}
+
+		return { node: target.node }
+	}
+}
diff --git a/packages/api-client/src/modules/archon/server-users/v1.ts b/packages/api-client/src/modules/archon/server-users/v1.ts
new file mode 100644
index 0000000000..ef5a144d18
--- /dev/null
+++ b/packages/api-client/src/modules/archon/server-users/v1.ts
@@ -0,0 +1,83 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Archon } from '../types'
+
+export class ArchonServerUsersV1Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'archon_server_users_v1'
+	}
+
+	/**
+	 * Get list of users with access to a server
+	 * GET /v1/servers/:server_id/users
+	 */
+	public async list(serverId: string): Promise<Archon.ServerUsers.v1.ServerUser[]> {
+		return this.client.request<Archon.ServerUsers.v1.ServerUser[]>(`/servers/${serverId}/users`, {
+			api: 'archon',
+			version: 1,
+			method: 'GET',
+		})
+	}
+
+	/**
+	 * Add a user to a server
+	 * POST /v1/servers/:server_id/users
+	 */
+	public async add(
+		serverId: string,
+		user: Archon.ServerUsers.v1.AddServerUserRequest,
+	): Promise<void> {
+		await this.client.request(`/servers/${serverId}/users`, {
+			api: 'archon',
+			version: 1,
+			method: 'POST',
+			body: user,
+		})
+	}
+
+	/**
+	 * Re-send an invite to a pending server user.
+	 * POST /v1/servers/:server_id/users/:user_id/reinvite
+	 */
+	public async reinvite(
+		serverId: string,
+		userId: string,
+	): Promise<Archon.ServerUsers.v1.ReinviteResponse> {
+		return this.client.request<Archon.ServerUsers.v1.ReinviteResponse>(
+			`/servers/${serverId}/users/${userId}/reinvite`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'POST',
+			},
+		)
+	}
+
+	/**
+	 * Remove a user from a server
+	 * DELETE /v1/servers/:server_id/users/:user_id
+	 */
+	public async delete(serverId: string, userId: string): Promise<void> {
+		await this.client.request(`/servers/${serverId}/users/${userId}`, {
+			api: 'archon',
+			version: 1,
+			method: 'DELETE',
+		})
+	}
+
+	/**
+	 * Update a user's server role
+	 * PATCH /v1/servers/:server_id/users/:user_id
+	 */
+	public async update(
+		serverId: string,
+		userId: string,
+		role: Archon.ServerUsers.v1.AssignableServerUserRole,
+	): Promise<void> {
+		await this.client.request(`/servers/${serverId}/users/${userId}`, {
+			api: 'archon',
+			version: 1,
+			method: 'PATCH',
+			body: JSON.stringify(role),
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/archon/transfers/internal.ts b/packages/api-client/src/modules/archon/transfers/internal.ts
new file mode 100644
index 0000000000..ccbedaffd8
--- /dev/null
+++ b/packages/api-client/src/modules/archon/transfers/internal.ts
@@ -0,0 +1,84 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Archon } from '../types'
+
+export class ArchonTransfersInternalModule extends AbstractModule {
+	public getModuleID(): string {
+		return 'archon_transfers_internal'
+	}
+
+	/**
+	 * Schedule transfers for specific servers.
+	 * POST /_internal/transfers/schedule/servers
+	 */
+	public async scheduleServers(
+		request: Archon.Transfers.Internal.ScheduleServerTransfersRequest,
+	): Promise<Archon.Transfers.Internal.ScheduleTransfersResponse> {
+		return this.client.request<Archon.Transfers.Internal.ScheduleTransfersResponse>(
+			'/transfers/schedule/servers',
+			{
+				api: 'archon',
+				version: 'internal',
+				method: 'POST',
+				body: request,
+			},
+		)
+	}
+
+	/**
+	 * Schedule transfers for all servers on specific nodes.
+	 * POST /_internal/transfers/schedule/nodes
+	 */
+	public async scheduleNodes(
+		request: Archon.Transfers.Internal.ScheduleNodeTransfersRequest,
+	): Promise<Archon.Transfers.Internal.ScheduleTransfersResponse> {
+		return this.client.request<Archon.Transfers.Internal.ScheduleTransfersResponse>(
+			'/transfers/schedule/nodes',
+			{
+				api: 'archon',
+				version: 'internal',
+				method: 'POST',
+				body: request,
+			},
+		)
+	}
+
+	/**
+	 * Get transfer batch history.
+	 * GET /_internal/transfers/history
+	 */
+	public async history(
+		options?: Archon.Transfers.Internal.TransferHistoryQuery,
+	): Promise<Archon.Transfers.Internal.TransferHistoryResponse> {
+		const params: Record<string, number> = {}
+		if (options?.page !== undefined) params.page = options.page
+		if (options?.page_size !== undefined) params.page_size = options.page_size
+
+		return this.client.request<Archon.Transfers.Internal.TransferHistoryResponse>(
+			'/transfers/history',
+			{
+				api: 'archon',
+				version: 'internal',
+				method: 'GET',
+				params,
+			},
+		)
+	}
+
+	/**
+	 * Cancel pending transfer batches.
+	 * POST /_internal/transfers/cancel
+	 */
+	public async cancel(
+		request: Archon.Transfers.Internal.CancelTransfersRequest,
+	): Promise<Archon.Transfers.Internal.CancelTransfersResponse> {
+		return this.client.request<Archon.Transfers.Internal.CancelTransfersResponse>(
+			'/transfers/cancel',
+			{
+				api: 'archon',
+				version: 'internal',
+				method: 'POST',
+				body: request,
+			},
+		)
+	}
+}
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index b348cbe7c8..31b1a7224c 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -1,6 +1,287 @@
 import type { Labrinth } from '../labrinth/types'
 
 export namespace Archon {
+	export namespace Nodes {
+		export namespace Internal {
+			export type Node = {
+				id: string
+				hostname: string
+				region: string
+				created_at: string | null
+				locked: boolean
+			}
+
+			export type Server = {
+				id: string
+				available: boolean
+			}
+
+			export type NodeFull = Node & {
+				servers: Server[]
+			}
+
+			export type Overview = {
+				node_hostnames: string[]
+				regions: Region[]
+				total_servers_active: number
+			}
+
+			export type Region = {
+				display_name: string
+				country_code: string
+				key: string
+				server_count: number
+				node_count: number
+			}
+
+			export type RegionWithStatistics = {
+				region: Region
+				active_servers: string[]
+			}
+		}
+	}
+
+	export namespace Notices {
+		export namespace v0 {
+			export type Notice = {
+				id: number
+				dismissable: boolean
+				title: string | null
+				message: string
+				level: string
+				announced: string
+			}
+
+			export type ListedNotice = {
+				id: number
+				dismissable: boolean
+				message: string
+				title: string | null
+				level: string
+				announce_at: string
+				expires: string | null
+				assigned: Assignment[]
+				dismissed_by: Dismisser[]
+			}
+
+			export type Dismisser = {
+				server: string
+				dismissed_on: string
+			}
+
+			export type Assignment = {
+				kind: string
+				id: string
+				name: string
+			}
+
+			export type AssignmentTarget = { server: string } | { node: string }
+
+			export type Announce = {
+				message: string
+				title?: string | null
+				level: string
+				dismissable: boolean
+				announce_at: string
+				expires?: string | null
+			}
+
+			export type AnnouncePatch = {
+				message?: string
+				title?: string | null
+				level?: string
+				dismissable?: boolean
+				announce_at?: string
+				expires?: string | null
+			}
+
+			export type PostNoticeResponseBody = {
+				id: number
+			}
+		}
+	}
+
+	export namespace Actions {
+		export namespace v1 {
+			export type SortOrder = 'asc' | 'desc'
+
+			export type ActionName =
+				| 'server_created'
+				| 'changed_server_name'
+				| 'changed_server_subdomain'
+				| 'server_reallocated'
+				| 'server_plan_changed'
+				| 'user_invited'
+				| 'user_invite_revoked'
+				| 'user_permission_modified'
+				| 'user_removed'
+				| 'addon_added'
+				| 'addon_uploaded'
+				| 'addon_disabled'
+				| 'addon_enabled'
+				| 'addon_deleted'
+				| 'addon_updated'
+				| 'modpack_changed'
+				| 'modpack_unlinked'
+				| 'server_repaired'
+				| 'server_reset'
+				| 'server_started'
+				| 'server_stopped'
+				| 'server_restarted'
+				| 'server_killed'
+				| 'port_allocation_added'
+				| 'port_allocation_removed'
+				| 'loader_version_edited'
+				| 'game_version_edited'
+				| 'server_properties_modified'
+				| 'file_uploaded'
+				| 'file_deleted'
+				| 'file_renamed'
+				| 'file_edited'
+				| 'sftp_login'
+				| 'console_command_executed'
+				| 'console_cleared'
+				| 'backup_created'
+				| 'backup_renamed'
+				| 'backup_restored'
+				| 'backup_deleted'
+				| 'startup_command_modified'
+				| 'java_runtime_modified'
+				| 'java_version_modified'
+
+			export type Action = {
+				action: ActionName | string
+				metadata?: unknown
+			}
+
+			export type UserPermissionsActionMetadata = {
+				user_id: string
+				permissions?: ServerUsers.v1.UserScope | null
+			}
+
+			export type ActionUser =
+				| {
+						type: 'user'
+						user_id: string
+				  }
+				| {
+						type: 'support'
+						user_id?: string | null
+				  }
+
+			export type ActionEntry = {
+				actor: ActionUser
+				action: Action
+				server_id: string
+				world_id?: string | null
+				timestamp: string
+			}
+
+			export type UserResp = {
+				username: string
+				avatar_url?: string | null
+			}
+
+			export type AddonResp = {
+				title: string
+				slug?: string | null
+				icon_url?: string | null
+				version?: string | null
+			}
+
+			export type VersionResp = {
+				name: string
+				version_number?: string | null
+			}
+
+			export type ActionLogResponse = {
+				next_offset?: number | null
+				data: ActionEntry[]
+				users: Record<string, UserResp>
+				addons: Record<string, AddonResp>
+				versions: Record<string, VersionResp>
+			}
+
+			export type ActionLogFilter = {
+				users?: string[]
+				worlds?: Array<string | null>
+				actions?: ActionName[]
+			}
+
+			export type ListActionLogOptions = {
+				filter?: ActionLogFilter
+				limit?: number
+				offset?: number
+				order?: SortOrder
+				min_datetime?: string
+				max_datetime?: string
+			}
+		}
+	}
+
+	export namespace Transfers {
+		export namespace Internal {
+			export type ProvisionOptions = {
+				region?: string | null
+				node_tags: string[]
+			}
+
+			export type ScheduleServerTransfersRequest = {
+				server_ids: string[]
+				scheduled_at?: string | null
+				target_region?: string | null
+				node_tags?: string[]
+				reason?: string | null
+			}
+
+			export type ScheduleNodeTransfersRequest = {
+				node_hostnames: string[]
+				scheduled_at?: string | null
+				target_region?: string | null
+				node_tags?: string[]
+				reason?: string | null
+				cordon_nodes?: boolean
+				tag_nodes?: string | null
+			}
+
+			export type ScheduleTransfersResponse = {
+				batch_id: number
+				scheduled_count: number
+			}
+
+			export type CancelTransfersRequest = {
+				batch_ids: number[]
+			}
+
+			export type CancelTransfersResponse = {
+				cancelled_count: number
+			}
+
+			export type TransferLogBatchEntry = {
+				id: number
+				created_by: string
+				created_at: string
+				reason?: string | null
+				scheduled_at: string
+				cancelled: boolean
+				log_count: number
+				provision_options: ProvisionOptions
+			}
+
+			export type TransferHistoryQuery = {
+				page?: number
+				page_size?: number
+			}
+
+			export type TransferHistoryResponse = {
+				batches: TransferLogBatchEntry[]
+				total: number
+				page: number
+				page_size: number
+			}
+		}
+	}
+
 	export namespace Content {
 		export namespace v1 {
 			export type AddonKind = 'mod' | 'plugin' | 'datapack' | 'shader' | 'resourcepack'
@@ -222,11 +503,66 @@ export namespace Archon {
 		}
 	}
 
+	export namespace ServerUsers {
+		export namespace v1 {
+			export type ServerUserRole = 'Owner' | 'Editor' | 'Viewer' | 'Unknown'
+
+			export type AssignableServerUserRole = Exclude<ServerUserRole, 'Owner' | 'Unknown'>
+
+			export const UserScope = {
+				NONE: '',
+				SERVER_ADMIN: 'SERVER_ADMIN',
+				BASE_READ: 'BASE_READ',
+				POWER_ACTIONS: 'POWER_ACTIONS',
+				EXEC_COMMANDS: 'EXEC_COMMANDS',
+				FILES_WRITE: 'FILES_WRITE',
+				SETUP: 'SETUP',
+				BACKUPS: 'BACKUPS',
+				ADVANCED: 'ADVANCED',
+				RESET_SERVER: 'RESET_SERVER',
+				MANAGE_USERS: 'MANAGE_USERS',
+				SUPPORT_AGENT: 'SUPPORT_AGENT',
+				INFRA_MANAGER: 'INFRA_MANAGER',
+				INFRA_MANAGER_READ: 'INFRA_MANAGER_READ',
+				INFRA_SERVERS_XFER: 'INFRA_SERVERS_XFER',
+				INFRA_USERS: 'INFRA_USERS',
+			} as const
+
+			export type UserScope = string | number
+
+			export type UserResp = {
+				id: string
+				username: string
+				avatar_url?: string | null
+			}
+
+			export type ServerUser = {
+				user: UserResp
+				added_on?: string | null
+				last_invite_sent?: string | null
+				permissions: UserScope
+			}
+
+			export type AddServerUserRequest = {
+				server_id?: string | null
+				user_id: string
+				added_on?: string | null
+				role: ServerUserRole
+			}
+
+			export type ReinviteResponse = {
+				sent: boolean
+				cooldown_seconds: number | null
+			}
+		}
+	}
+
 	export namespace Servers {
 		export namespace v0 {
 			export type ServerGetResponse = {
 				servers: Server[]
 				pagination: Pagination
+				users: Record<string, ServerOwner>
 			}
 
 			export type Pagination = {
@@ -236,6 +572,12 @@ export namespace Archon {
 				total_items: number
 			}
 
+			export type ServerOwner = {
+				id: string
+				username: string
+				avatar_url?: string | null
+			}
+
 			export type Status = 'installing' | 'broken' | 'available' | 'suspended'
 
 			export type SuspensionReason =
@@ -281,12 +623,15 @@ export namespace Archon {
 				node: NodeInfo | null
 				flows: Flows
 				is_medal: boolean
+				current_user_permissions: UserScope
 
 				medal_expires?: string
 			}
 
+			export type UserScope = number
+
 			export type Net = {
-				ip: string
+				ip: string | null
 				port: number
 				domain: string
 			}
@@ -422,9 +767,9 @@ export namespace Archon {
 				modloader: string
 				modloader_version: string
 				game_version: string
-				java_version: number
-				invocation: string
-				original_invocation: string
+				java_version: number | null
+				invocation: string | null
+				original_invocation: string | null
 			}
 
 			export type Region = {
@@ -555,6 +900,106 @@ export namespace Archon {
 		}
 	}
 
+	export namespace Sync {
+		export namespace v1 {
+			export type SyncCategory = 'backup' | 'users' | 'server' | 'protocol' | 'world'
+			export type SyncIntent = 'all' | SyncCategory | SyncCategory[]
+			export type BackupOperationStatus = 'completed' | 'cancelled' | 'failed' | 'timed-out'
+			export type ServerNetworkPort = { port: number; name: string }
+
+			export type ProtocolResetEvent = { type: 'protocol.reset' }
+			export type ProtocolInvalidEvent = { type: 'protocol.invalid' }
+			export type ProtocolErrorEvent = { type: 'protocol.error'; error: string }
+
+			export type BackupNewEvent = { type: 'backup.new'; id: string }
+			export type BackupPatchEvent = {
+				type: 'backup.patch'
+				world_id: string
+				backup_id: string
+				name: string
+			}
+			export type BackupDeleteEvent = {
+				type: 'backup.delete'
+				world_id: string
+				backup_id: string
+			}
+			export type BackupOperationStartEvent = {
+				type:
+					| 'backup.operation.create.init'
+					| 'backup.operation.create.start'
+					| 'backup.operation.restore.init'
+					| 'backup.operation.restore.start'
+				world_id: string
+				backup_id: string
+				operation_id: number
+			}
+			export type BackupOperationDoneEvent = {
+				type: 'backup.operation.create.done' | 'backup.operation.restore.done'
+				world_id: string
+				backup_id: string
+				operation_id: number
+				status: BackupOperationStatus
+			}
+
+			export type ServerPatchEvent = {
+				type: 'server.patch'
+				name: string
+				subdomain: string
+			}
+			export type ServerNetworkPatchEvent = {
+				type: 'server.network.patch'
+				ports: ServerNetworkPort[]
+			}
+			export type ServerTransferEvent = {
+				type: 'server.transfer.start' | 'server.transfer.done'
+				target_node: string
+			}
+
+			export type UsersPatchEvent = { type: 'users.patch' }
+
+			export type WorldPatchEvent = {
+				type: 'world.patch'
+				world_id: string
+				name: string
+			}
+			export type WorldStartupPatchEvent = {
+				type: 'world.startup.patch'
+				world_id: string
+				java_version: number | null
+				invocation: string | null
+				original_invocation: string | null
+			}
+			export type WorldContentAddonPatchEvent = {
+				type: 'world.content.addon.patch'
+				world_id: string
+				specs: Archon.Content.v1.Addon[]
+			}
+			export type WorldContentBaseUpdateEvent = {
+				type: 'world.content.base.update'
+				world_id: string
+				spec: Archon.Content.v1.Addons
+			}
+
+			export type SyncEvent =
+				| ProtocolResetEvent
+				| ProtocolInvalidEvent
+				| ProtocolErrorEvent
+				| BackupNewEvent
+				| BackupPatchEvent
+				| BackupDeleteEvent
+				| BackupOperationStartEvent
+				| BackupOperationDoneEvent
+				| ServerPatchEvent
+				| ServerNetworkPatchEvent
+				| ServerTransferEvent
+				| UsersPatchEvent
+				| WorldPatchEvent
+				| WorldStartupPatchEvent
+				| WorldContentAddonPatchEvent
+				| WorldContentBaseUpdateEvent
+		}
+	}
+
 	export namespace Websocket {
 		export namespace v0 {
 			export type WSAuth = {
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 8416796348..7e857f12c3 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -1,12 +1,17 @@
 import type { AbstractModrinthClient } from '../core/abstract-client'
 import type { AbstractModule } from '../core/abstract-module'
+import { ArchonActionsV1Module } from './archon/actions/v1'
 import { ArchonBackupsV1Module } from './archon/backups/v1'
 import { ArchonBackupsQueueV1Module } from './archon/backups-queue/v1'
 import { ArchonContentV1Module } from './archon/content/v1'
+import { ArchonNodesInternalModule } from './archon/nodes/internal'
+import { ArchonNoticesV0Module } from './archon/notices/v0'
 import { ArchonOptionsV1Module } from './archon/options/v1'
 import { ArchonPropertiesV1Module } from './archon/properties/v1'
+import { ArchonServerUsersV1Module } from './archon/server-users/v1'
 import { ArchonServersV0Module } from './archon/servers/v0'
 import { ArchonServersV1Module } from './archon/servers/v1'
+import { ArchonTransfersInternalModule } from './archon/transfers/internal'
 import { ISO3166Module } from './iso3166'
 import { KyrosContentV1Module } from './kyros/content/v1'
 import { KyrosFilesV0Module } from './kyros/files/v0'
@@ -21,6 +26,7 @@ import { LabrinthBillingInternalModule } from './labrinth/billing/internal'
 import { LabrinthCampaignInternalModule } from './labrinth/campaign/internal'
 import { LabrinthCollectionsModule } from './labrinth/collections'
 import { LabrinthExternalProjectsInternalModule } from './labrinth/external-projects/internal'
+import { LabrinthFriendsV3Module } from './labrinth/friends/v3'
 import { LabrinthGlobalsInternalModule } from './labrinth/globals/internal'
 import { LabrinthLimitsV3Module } from './labrinth/limits/v3'
 import { LabrinthModerationInternalModule } from './labrinth/moderation/internal'
@@ -61,13 +67,18 @@ type ModuleConstructor = new (client: AbstractModrinthClient) => AbstractModule
  * TODO: Better way? Probably not
  */
 export const MODULE_REGISTRY = {
+	archon_actions_v1: ArchonActionsV1Module,
 	archon_backups_queue_v1: ArchonBackupsQueueV1Module,
 	archon_backups_v1: ArchonBackupsV1Module,
 	archon_content_v1: ArchonContentV1Module,
+	archon_nodes_internal: ArchonNodesInternalModule,
+	archon_notices_v0: ArchonNoticesV0Module,
 	archon_options_v1: ArchonOptionsV1Module,
 	archon_properties_v1: ArchonPropertiesV1Module,
+	archon_server_users_v1: ArchonServerUsersV1Module,
 	archon_servers_v0: ArchonServersV0Module,
 	archon_servers_v1: ArchonServersV1Module,
+	archon_transfers_internal: ArchonTransfersInternalModule,
 	iso3166_data: ISO3166Module,
 	mclogs_insights_v1: MclogsInsightsV1Module,
 	mclogs_logs_v1: MclogsLogsV1Module,
@@ -84,6 +95,7 @@ export const MODULE_REGISTRY = {
 	labrinth_campaign_internal: LabrinthCampaignInternalModule,
 	labrinth_collections: LabrinthCollectionsModule,
 	labrinth_external_projects_internal: LabrinthExternalProjectsInternalModule,
+	labrinth_friends_v3: LabrinthFriendsV3Module,
 	labrinth_globals_internal: LabrinthGlobalsInternalModule,
 	labrinth_moderation_internal: LabrinthModerationInternalModule,
 	labrinth_notifications_v2: LabrinthNotificationsV2Module,
diff --git a/packages/api-client/src/modules/labrinth/friends/v3.ts b/packages/api-client/src/modules/labrinth/friends/v3.ts
new file mode 100644
index 0000000000..d946880dc5
--- /dev/null
+++ b/packages/api-client/src/modules/labrinth/friends/v3.ts
@@ -0,0 +1,47 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Labrinth } from '../types'
+
+export class LabrinthFriendsV3Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'labrinth_friends_v3'
+	}
+
+	/**
+	 * Get friends and pending friend requests for the authenticated user
+	 *
+	 * @returns Promise resolving to friend relationships
+	 */
+	public async list(): Promise<Labrinth.Friends.v3.UserFriend[]> {
+		return this.client.request<Labrinth.Friends.v3.UserFriend[]>('/friends', {
+			api: 'labrinth',
+			version: 3,
+			method: 'GET',
+		})
+	}
+
+	/**
+	 * Send or accept a friend request
+	 *
+	 * @param idOrUsername - The target user's ID or username
+	 */
+	public async add(idOrUsername: string): Promise<void> {
+		return this.client.request(`/friend/${encodeURIComponent(idOrUsername)}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'POST',
+		})
+	}
+
+	/**
+	 * Remove a friend or pending friend request
+	 *
+	 * @param idOrUsername - The target user's ID or username
+	 */
+	public async remove(idOrUsername: string): Promise<void> {
+		return this.client.request(`/friend/${encodeURIComponent(idOrUsername)}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'DELETE',
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/labrinth/index.ts b/packages/api-client/src/modules/labrinth/index.ts
index 487329fe0e..4bc8e150e1 100644
--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -4,6 +4,7 @@ export * from './auth/v2'
 export * from './billing/internal'
 export * from './collections'
 export * from './external-projects/internal'
+export * from './friends/v3'
 export * from './globals/internal'
 export * from './limits/v3'
 export * from './moderation/internal'
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index 46179ad9f7..91a2702091 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -1350,6 +1350,12 @@ export namespace Labrinth {
 				github_id?: number
 			}
 
+			export type SearchUser = {
+				id: string
+				username: string
+				avatar_url: string | null
+			}
+
 			export type AllProjectsResponse = {
 				projects: Projects.v3.Project[]
 				organizations: Record<string, Organizations.v3.Organization>
@@ -1357,6 +1363,17 @@ export namespace Labrinth {
 		}
 	}
 
+	export namespace Friends {
+		export namespace v3 {
+			export type UserFriend = {
+				id: string
+				friend_id: string
+				accepted: boolean
+				created: string
+			}
+		}
+	}
+
 	export namespace ServerPing {
 		export namespace Internal {
 			export type MinecraftJavaPingRequest = {
diff --git a/packages/api-client/src/modules/labrinth/users/v3.ts b/packages/api-client/src/modules/labrinth/users/v3.ts
index 1f20889039..90dfced927 100644
--- a/packages/api-client/src/modules/labrinth/users/v3.ts
+++ b/packages/api-client/src/modules/labrinth/users/v3.ts
@@ -37,6 +37,25 @@ export class LabrinthUsersV3Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * Search users by username prefix.
+	 *
+	 * @param query - Username search query
+	 * @returns Promise resolving to compact user search results
+	 *
+	 * GET /v3/users/search?query=:query
+	 */
+	public async search(query: string): Promise<Labrinth.Users.v3.SearchUser[]> {
+		return this.client.request<Labrinth.Users.v3.SearchUser[]>(
+			`/users/search?query=${encodeURIComponent(query)}`,
+			{
+				api: 'labrinth',
+				version: 3,
+				method: 'GET',
+			},
+		)
+	}
+
 	/**
 	 * Get all projects the authenticated user can access directly or through
 	 * their organizations.
diff --git a/packages/api-client/src/platform/generic.ts b/packages/api-client/src/platform/generic.ts
index 4a939b6f7a..7ec63b6824 100644
--- a/packages/api-client/src/platform/generic.ts
+++ b/packages/api-client/src/platform/generic.ts
@@ -1,8 +1,10 @@
 import { $fetch, FetchError } from 'ofetch'
 
-import type { ModrinthApiError } from '../core/errors'
+import { ModrinthApiError } from '../core/errors'
 import type { ClientConfig } from '../types/client'
 import type { RequestOptions } from '../types/request'
+import { appendRequestParams, parseResponseErrorData, toFetchBody } from '../utils/fetch'
+import { GenericSyncClient } from './sync-generic'
 import { GenericWebSocketClient } from './websocket-generic'
 import { XHRUploadClient } from './xhr-upload-client'
 
@@ -34,6 +36,12 @@ export class GenericModrinthClient extends XHRUploadClient {
 			enumerable: true,
 			configurable: false,
 		})
+		Object.defineProperty(this.archon, 'sync', {
+			value: new GenericSyncClient(this),
+			writable: false,
+			enumerable: true,
+			configurable: false,
+		})
 	}
 
 	protected async executeRequest<T>(url: string, options: RequestOptions): Promise<T> {
@@ -54,6 +62,38 @@ export class GenericModrinthClient extends XHRUploadClient {
 		}
 	}
 
+	protected async executeStreamRequest(
+		url: string,
+		options: RequestOptions,
+	): Promise<ReadableStream<Uint8Array>> {
+		try {
+			const response = await fetch(appendRequestParams(url, options.params), {
+				method: options.method ?? 'GET',
+				headers: options.headers,
+				body: toFetchBody(options.body),
+				signal: options.signal,
+			})
+
+			if (!response.ok) {
+				throw this.createNormalizedError(
+					new Error(`HTTP ${response.status}: ${response.statusText}`),
+					response.status,
+					await parseResponseErrorData(response),
+				)
+			}
+
+			if (!response.body) {
+				throw new ModrinthApiError('Streaming response has no readable body', {
+					statusCode: response.status,
+				})
+			}
+
+			return response.body
+		} catch (error) {
+			throw this.normalizeError(error)
+		}
+	}
+
 	protected normalizeError(error: unknown): ModrinthApiError {
 		if (error instanceof FetchError) {
 			return this.createNormalizedError(error, error.response?.status, error.data)
diff --git a/packages/api-client/src/platform/nuxt.ts b/packages/api-client/src/platform/nuxt.ts
index ce0c456345..a5308535ba 100644
--- a/packages/api-client/src/platform/nuxt.ts
+++ b/packages/api-client/src/platform/nuxt.ts
@@ -5,6 +5,8 @@ import type { CircuitBreakerState, CircuitBreakerStorage } from '../features/cir
 import type { ClientConfig } from '../types/client'
 import type { RequestOptions } from '../types/request'
 import type { UploadHandle, UploadRequestOptions } from '../types/upload'
+import { appendRequestParams, parseResponseErrorData, toFetchBody } from '../utils/fetch'
+import { GenericSyncClient } from './sync-generic'
 import { GenericWebSocketClient } from './websocket-generic'
 import { XHRUploadClient } from './xhr-upload-client'
 
@@ -97,6 +99,12 @@ export class NuxtModrinthClient extends XHRUploadClient {
 			enumerable: true,
 			configurable: false,
 		})
+		Object.defineProperty(this.archon, 'sync', {
+			value: new GenericSyncClient(this),
+			writable: false,
+			enumerable: true,
+			configurable: false,
+		})
 	}
 
 	/**
@@ -167,6 +175,40 @@ export class NuxtModrinthClient extends XHRUploadClient {
 		}
 	}
 
+	protected async executeStreamRequest(
+		url: string,
+		options: RequestOptions,
+	): Promise<ReadableStream<Uint8Array>> {
+		try {
+			const response = await fetch(appendRequestParams(url, options.params), {
+				method: options.method ?? 'GET',
+				headers: options.headers,
+				body: toFetchBody(options.body),
+				signal: options.signal,
+				// @ts-expect-error - import.meta is provided by Nuxt
+				cache: import.meta.server ? undefined : 'no-store',
+			})
+
+			if (!response.ok) {
+				throw this.createNormalizedError(
+					new Error(`HTTP ${response.status}: ${response.statusText}`),
+					response.status,
+					await parseResponseErrorData(response),
+				)
+			}
+
+			if (!response.body) {
+				throw new ModrinthApiError('Streaming response has no readable body', {
+					statusCode: response.status,
+				})
+			}
+
+			return response.body
+		} catch (error) {
+			throw this.normalizeError(error)
+		}
+	}
+
 	protected normalizeError(error: unknown): ModrinthApiError {
 		if (error instanceof FetchError) {
 			return this.createNormalizedError(error, error.response?.status, error.data)
diff --git a/packages/api-client/src/platform/sync-generic.ts b/packages/api-client/src/platform/sync-generic.ts
new file mode 100644
index 0000000000..e43fbaf2da
--- /dev/null
+++ b/packages/api-client/src/platform/sync-generic.ts
@@ -0,0 +1,229 @@
+import mitt from 'mitt'
+
+import {
+	AbstractSyncClient,
+	type SyncConnection,
+	type SyncConnectOptions,
+	type SyncEmitterEvents,
+} from '../core/abstract-sync'
+import type { Archon } from '../modules/archon/types'
+import { type ParsedSseItem, parseSyncEventData, SseParser } from '../utils/sse'
+
+type StreamReadResult = 'closed' | 'protocol-reconnect'
+
+const DEFAULT_RETRY_DELAY = 1000
+const MAX_RECONNECT_DELAY = 30000
+const JITTER_MS = 1000
+
+export class GenericSyncClient extends AbstractSyncClient {
+	protected emitter = mitt<SyncEmitterEvents>()
+
+	async safeConnectServer(serverId: string, options: SyncConnectOptions = {}): Promise<void> {
+		const existing = this.connections.get(serverId)
+		if (existing && !options.force && !existing.stopped && existing.status !== 'disconnected') {
+			return
+		}
+
+		if (existing) {
+			this.closeConnection(serverId)
+		}
+
+		const connection: SyncConnection = {
+			serverId,
+			intent: options.intent ?? 'all',
+			reconnectAttempts: 0,
+			retryDelay: DEFAULT_RETRY_DELAY,
+			stopped: false,
+			status: 'idle',
+		}
+
+		this.connections.set(serverId, connection)
+		void this.runConnection(connection)
+	}
+
+	disconnect(serverId: string): void {
+		this.closeConnection(serverId)
+		this.clearListeners(serverId)
+	}
+
+	disconnectAll(): void {
+		for (const serverId of this.connections.keys()) {
+			this.disconnect(serverId)
+		}
+	}
+
+	private async runConnection(connection: SyncConnection): Promise<void> {
+		while (!connection.stopped) {
+			const hadConnected = connection.status === 'connected'
+			this.updateStatus(connection, hadConnected ? 'reconnecting' : 'connecting')
+
+			const controller = new AbortController()
+			connection.controller = controller
+
+			try {
+				const stream = await this.client.stream('/sync', {
+					api: 'archon',
+					version: 1,
+					method: 'GET',
+					params: {
+						scope: `server:${connection.serverId}`,
+						intent: this.intentToParam(connection.intent),
+					},
+					headers: connection.lastEventId
+						? {
+								'Last-Event-Id': connection.lastEventId,
+							}
+						: undefined,
+					signal: controller.signal,
+					retry: false,
+					circuitBreaker: false,
+				})
+
+				if (connection.stopped) return
+
+				connection.reconnectAttempts = 0
+				this.updateStatus(connection, 'connected')
+
+				const result = await this.consumeStream(connection, stream)
+				connection.controller = undefined
+				if (connection.stopped) return
+
+				if (result === 'protocol-reconnect') {
+					connection.reconnectAttempts = 0
+					continue
+				}
+
+				await this.waitForReconnect(connection)
+			} catch (error) {
+				connection.controller = undefined
+				if (connection.stopped || this.isAbortError(error)) return
+
+				connection.reconnectAttempts++
+				this.updateStatus(connection, 'error', error)
+				console.warn(`[Sync] Connection failed for server ${connection.serverId}:`, error)
+				await this.waitForReconnect(connection)
+			}
+		}
+	}
+
+	private async consumeStream(
+		connection: SyncConnection,
+		stream: ReadableStream<Uint8Array>,
+	): Promise<StreamReadResult> {
+		const reader = stream.getReader()
+		const decoder = new TextDecoder()
+		const parser = new SseParser()
+
+		try {
+			while (!connection.stopped) {
+				const { done, value } = await reader.read()
+				if (done) break
+
+				const chunk = decoder.decode(value, { stream: true })
+				const result = this.processParsedItems(connection, parser.feed(chunk))
+				if (result === 'protocol-reconnect') {
+					await reader.cancel()
+					connection.controller?.abort()
+					return result
+				}
+			}
+
+			const finalChunk = decoder.decode()
+			const finalItems = finalChunk ? parser.feed(finalChunk) : []
+			const result = this.processParsedItems(connection, [...finalItems, ...parser.end()])
+			if (result === 'protocol-reconnect') {
+				await reader.cancel()
+				connection.controller?.abort()
+				return result
+			}
+		} finally {
+			reader.releaseLock()
+		}
+
+		return 'closed'
+	}
+
+	private processParsedItems(connection: SyncConnection, items: ParsedSseItem[]): StreamReadResult {
+		for (const item of items) {
+			if (item.kind === 'retry') {
+				connection.retryDelay = Math.min(item.retry, MAX_RECONNECT_DELAY)
+				continue
+			}
+
+			this.updateLastEventId(connection, item.id)
+
+			const event = parseSyncEventData(item.data)
+			if (!event) {
+				console.warn('[Sync] Dropping malformed SSE payload:', {
+					serverId: connection.serverId,
+					event: item.event,
+					data: item.data,
+				})
+				continue
+			}
+
+			this.emitSyncEvent(connection.serverId, event)
+
+			if (event.type === 'protocol.reset' || event.type === 'protocol.invalid') {
+				connection.lastEventId = undefined
+				return 'protocol-reconnect'
+			}
+		}
+
+		return 'closed'
+	}
+
+	private async waitForReconnect(connection: SyncConnection): Promise<void> {
+		if (connection.stopped) return
+
+		this.updateStatus(connection, 'reconnecting')
+		const delay = this.getReconnectDelay(connection)
+
+		await new Promise<void>((resolve) => {
+			connection.reconnectResolve = resolve
+			connection.reconnectTimer = setTimeout(() => {
+				connection.reconnectTimer = undefined
+				connection.reconnectResolve = undefined
+				resolve()
+			}, delay)
+		})
+	}
+
+	private closeConnection(serverId: string): void {
+		const connection = this.connections.get(serverId)
+		if (!connection) return
+
+		connection.stopped = true
+		connection.controller?.abort()
+
+		if (connection.reconnectTimer) {
+			clearTimeout(connection.reconnectTimer)
+			connection.reconnectTimer = undefined
+		}
+		connection.reconnectResolve?.()
+		connection.reconnectResolve = undefined
+
+		this.updateStatus(connection, 'disconnected')
+		this.connections.delete(serverId)
+	}
+
+	private getReconnectDelay(connection: SyncConnection): number {
+		const exponentialDelay =
+			connection.retryDelay * Math.pow(2, Math.max(connection.reconnectAttempts - 1, 0))
+		return Math.min(exponentialDelay, MAX_RECONNECT_DELAY) + Math.random() * JITTER_MS
+	}
+
+	private updateLastEventId(connection: SyncConnection, id: string | undefined): void {
+		if (id === undefined) return
+		connection.lastEventId = id || undefined
+	}
+
+	private intentToParam(intent: Archon.Sync.v1.SyncIntent): string {
+		return Array.isArray(intent) ? intent.join(',') : intent
+	}
+
+	private isAbortError(error: unknown): boolean {
+		if (!(error instanceof Error)) return false
+		return error.name === 'AbortError' || error.message.toLowerCase().includes('abort')
+	}
+}
diff --git a/packages/api-client/src/platform/tauri.ts b/packages/api-client/src/platform/tauri.ts
index 725bcc7795..ac82b53edb 100644
--- a/packages/api-client/src/platform/tauri.ts
+++ b/packages/api-client/src/platform/tauri.ts
@@ -1,6 +1,8 @@
 import type { ModrinthApiError } from '../core/errors'
 import type { ClientConfig } from '../types/client'
 import type { RequestOptions } from '../types/request'
+import { appendRequestParams, parseResponseErrorData, toFetchBody } from '../utils/fetch'
+import { GenericSyncClient } from './sync-generic'
 import { GenericWebSocketClient } from './websocket-generic'
 import { XHRUploadClient } from './xhr-upload-client'
 
@@ -49,6 +51,12 @@ export class TauriModrinthClient extends XHRUploadClient {
 			enumerable: true,
 			configurable: false,
 		})
+		Object.defineProperty(this.archon, 'sync', {
+			value: new GenericSyncClient(this),
+			writable: false,
+			enumerable: true,
+			configurable: false,
+		})
 	}
 
 	protected async executeRequest<T>(url: string, options: RequestOptions): Promise<T> {
@@ -57,36 +65,8 @@ export class TauriModrinthClient extends XHRUploadClient {
 			// This allows the package to be used in non-Tauri environments
 			const { fetch: tauriFetch } = await import('@tauri-apps/plugin-http')
 
-			let body: BodyInit | null | undefined = undefined
-			if (options.body) {
-				const raw = options.body
-				if (
-					typeof raw === 'object' &&
-					!(raw instanceof FormData) &&
-					!(raw instanceof URLSearchParams) &&
-					!(raw instanceof Blob) &&
-					!(raw instanceof ArrayBuffer) &&
-					!ArrayBuffer.isView(raw as ArrayBufferView)
-				) {
-					body = JSON.stringify(raw)
-				} else {
-					body = raw as BodyInit
-				}
-			}
-
-			let fullUrl = url
-			if (options.params) {
-				const filteredParams: Record<string, string> = {}
-				for (const [key, value] of Object.entries(options.params)) {
-					if (value !== undefined && value !== null) {
-						filteredParams[key] = String(value)
-					}
-				}
-				const queryString = new URLSearchParams(filteredParams).toString()
-				if (queryString) {
-					fullUrl = `${url}?${queryString}`
-				}
-			}
+			const body = toFetchBody(options.body)
+			const fullUrl = appendRequestParams(url, options.params)
 
 			const response = await tauriFetch(fullUrl, {
 				method: options.method ?? 'GET',
@@ -147,6 +127,41 @@ export class TauriModrinthClient extends XHRUploadClient {
 		}
 	}
 
+	protected async executeStreamRequest(
+		url: string,
+		options: RequestOptions,
+	): Promise<ReadableStream<Uint8Array>> {
+		try {
+			const { fetch: tauriFetch } = await import('@tauri-apps/plugin-http')
+			const response = await tauriFetch(appendRequestParams(url, options.params), {
+				method: options.method ?? 'GET',
+				headers: options.headers,
+				body: toFetchBody(options.body),
+				signal: options.signal,
+			})
+
+			if (!response.ok) {
+				throw this.createNormalizedError(
+					new Error(`HTTP ${response.status}: ${response.statusText}`),
+					response.status,
+					await parseResponseErrorData(response),
+				)
+			}
+
+			if (!response.body) {
+				throw this.createNormalizedError(
+					new Error('Streaming response has no readable body'),
+					response.status,
+					undefined,
+				)
+			}
+
+			return response.body
+		} catch (error) {
+			throw this.normalizeError(error)
+		}
+	}
+
 	protected normalizeError(error: unknown): ModrinthApiError {
 		if (error instanceof Error) {
 			const httpError = error as HttpError
diff --git a/packages/api-client/src/platform/xhr-upload-client.ts b/packages/api-client/src/platform/xhr-upload-client.ts
index d16e765899..40190f96d4 100644
--- a/packages/api-client/src/platform/xhr-upload-client.ts
+++ b/packages/api-client/src/platform/xhr-upload-client.ts
@@ -18,9 +18,9 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 	upload<T = void>(path: string, options: UploadRequestOptions): UploadHandle<T> {
 		let baseUrl: string
 		if (options.api === 'labrinth') {
-			baseUrl = this.config.labrinthBaseUrl!
+			baseUrl = this.resolveBaseUrl(this.config.labrinthBaseUrl!)
 		} else if (options.api === 'archon') {
-			baseUrl = this.config.archonBaseUrl!
+			baseUrl = this.resolveBaseUrl(this.config.archonBaseUrl!)
 		} else {
 			baseUrl = options.api
 		}
diff --git a/packages/api-client/src/types/client.ts b/packages/api-client/src/types/client.ts
index 45828d5c20..57d33105ef 100644
--- a/packages/api-client/src/types/client.ts
+++ b/packages/api-client/src/types/client.ts
@@ -3,6 +3,7 @@ import type { RequestContext } from './request'
 
 export type MaybePromise<T> = T | Promise<T>
 export type UserAgentProvider = string | (() => MaybePromise<string | undefined>)
+export type BaseUrlConfig = string | (() => string)
 
 /**
  * Request lifecycle hooks
@@ -39,13 +40,15 @@ export interface ClientConfig {
 	 * Base URL for Labrinth API (main Modrinth API)
 	 * @default 'https://api.modrinth.com'
 	 */
-	labrinthBaseUrl?: string
+	labrinthBaseUrl?: BaseUrlConfig
 
 	/**
 	 * Base URL for Archon API (Modrinth Hosting API)
+	 * Can be a callback so apps can drive this from runtime feature flags.
+	 *
 	 * @default 'https://archon.modrinth.com'
 	 */
-	archonBaseUrl?: string
+	archonBaseUrl?: BaseUrlConfig
 
 	/**
 	 * Default request timeout in milliseconds
diff --git a/packages/api-client/src/types/index.ts b/packages/api-client/src/types/index.ts
index 30daf6520c..2fb40b14e4 100644
--- a/packages/api-client/src/types/index.ts
+++ b/packages/api-client/src/types/index.ts
@@ -7,7 +7,7 @@ export type {
 } from '../features/circuit-breaker'
 export type { BackoffStrategy, RetryConfig } from '../features/retry'
 export type { Archon } from '../modules/archon/types'
-export type { ClientConfig, RequestHooks } from './client'
+export type { BaseUrlConfig, ClientConfig, RequestHooks } from './client'
 export type { ApiErrorData, ModrinthErrorResponse } from './errors'
 export { isModrinthErrorResponse } from './errors'
 export type { HttpMethod, RequestContext, RequestOptions, ResponseData } from './request'
diff --git a/packages/api-client/src/utils/fetch.ts b/packages/api-client/src/utils/fetch.ts
new file mode 100644
index 0000000000..9ab9c7ab0a
--- /dev/null
+++ b/packages/api-client/src/utils/fetch.ts
@@ -0,0 +1,55 @@
+import type { RequestOptions } from '../types/request'
+
+export function appendRequestParams(url: string, params?: RequestOptions['params']): string {
+	if (!params) return url
+
+	const filteredParams: Record<string, string> = {}
+	for (const [key, value] of Object.entries(params)) {
+		if (value !== undefined && value !== null) {
+			filteredParams[key] = String(value)
+		}
+	}
+
+	const queryString = new URLSearchParams(filteredParams).toString()
+	if (!queryString) return url
+
+	return `${url}${url.includes('?') ? '&' : '?'}${queryString}`
+}
+
+export function toFetchBody(body: unknown): BodyInit | null | undefined {
+	if (!body) return undefined
+
+	if (
+		typeof body === 'object' &&
+		!(body instanceof FormData) &&
+		!(body instanceof URLSearchParams) &&
+		!(body instanceof Blob) &&
+		!(body instanceof ArrayBuffer) &&
+		!ArrayBuffer.isView(body as ArrayBufferView)
+	) {
+		return JSON.stringify(body)
+	}
+
+	return body as BodyInit
+}
+
+export async function parseResponseErrorData(response: Response): Promise<unknown> {
+	const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''
+
+	try {
+		if (contentType.includes('application/json') || contentType.includes('+json')) {
+			return await response.json()
+		}
+
+		const text = await response.text()
+		if (!text) return undefined
+
+		try {
+			return JSON.parse(text)
+		} catch {
+			return text
+		}
+	} catch {
+		return undefined
+	}
+}
diff --git a/packages/api-client/src/utils/sse.ts b/packages/api-client/src/utils/sse.ts
new file mode 100644
index 0000000000..8497196875
--- /dev/null
+++ b/packages/api-client/src/utils/sse.ts
@@ -0,0 +1,139 @@
+import type { Archon } from '../modules/archon/types'
+
+export type ParsedSseEvent = {
+	kind: 'event'
+	id?: string
+	event?: string
+	data: string
+}
+
+export type ParsedSseRetry = {
+	kind: 'retry'
+	retry: number
+}
+
+export type ParsedSseItem = ParsedSseEvent | ParsedSseRetry
+
+export class SseParser {
+	private buffer = ''
+	private eventName = ''
+	private data = ''
+	private id: string | undefined
+
+	feed(chunk: string): ParsedSseItem[] {
+		this.buffer += chunk
+		const items: ParsedSseItem[] = []
+
+		while (true) {
+			const lineEnd = this.findLineEnd()
+			if (!lineEnd) break
+
+			const { line, length } = lineEnd
+			this.buffer = this.buffer.slice(length)
+			this.processLine(line, items)
+		}
+
+		return items
+	}
+
+	end(): ParsedSseItem[] {
+		const items: ParsedSseItem[] = []
+
+		if (this.buffer.length > 0) {
+			this.processLine(this.buffer.endsWith('\r') ? this.buffer.slice(0, -1) : this.buffer, items)
+			this.buffer = ''
+		}
+
+		this.dispatch(items)
+		return items
+	}
+
+	private findLineEnd(): { line: string; length: number } | null {
+		const lf = this.buffer.indexOf('\n')
+		const cr = this.buffer.indexOf('\r')
+
+		if (lf === -1 && cr === -1) return null
+
+		if (cr !== -1 && (lf === -1 || cr < lf)) {
+			if (cr === this.buffer.length - 1) return null
+			const length = this.buffer[cr + 1] === '\n' ? cr + 2 : cr + 1
+			return {
+				line: this.buffer.slice(0, cr),
+				length,
+			}
+		}
+
+		return {
+			line: this.buffer.slice(0, lf),
+			length: lf + 1,
+		}
+	}
+
+	private processLine(line: string, items: ParsedSseItem[]): void {
+		if (line === '') {
+			this.dispatch(items)
+			return
+		}
+
+		if (line.startsWith(':')) return
+
+		const colon = line.indexOf(':')
+		const field = colon === -1 ? line : line.slice(0, colon)
+		let value = colon === -1 ? '' : line.slice(colon + 1)
+		if (value.startsWith(' ')) value = value.slice(1)
+
+		switch (field) {
+			case 'event':
+				this.eventName = value
+				break
+			case 'data':
+				this.data += `${value}\n`
+				break
+			case 'id':
+				this.id = value
+				break
+			case 'retry': {
+				const retry = Number(value)
+				if (Number.isInteger(retry) && retry >= 0) {
+					items.push({ kind: 'retry', retry })
+				}
+				break
+			}
+		}
+	}
+
+	private dispatch(items: ParsedSseItem[]): void {
+		if (!this.data) {
+			this.eventName = ''
+			this.id = undefined
+			return
+		}
+
+		items.push({
+			kind: 'event',
+			id: this.id,
+			event: this.eventName || undefined,
+			data: this.data.endsWith('\n') ? this.data.slice(0, -1) : this.data,
+		})
+
+		this.eventName = ''
+		this.data = ''
+		this.id = undefined
+	}
+}
+
+export function parseSyncEventData(data: string): Archon.Sync.v1.SyncEvent | null {
+	let parsed: unknown
+
+	try {
+		parsed = JSON.parse(data)
+	} catch {
+		return null
+	}
+
+	if (!parsed || typeof parsed !== 'object') return null
+	const event = parsed as { type?: unknown }
+	if (typeof event.type !== 'string') return null
+
+	return parsed as Archon.Sync.v1.SyncEvent
+}
diff --git a/packages/assets/external/illustrations/intercom_bubble_icon.png b/packages/assets/external/illustrations/intercom_bubble_icon.png
new file mode 100644
index 0000000000..6585b9b09e
Binary files /dev/null and b/packages/assets/external/illustrations/intercom_bubble_icon.png differ
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 4fb4028886..7a8ed170cd 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -41,6 +41,7 @@ import _DiscordIcon from './external/discord.svg?component'
 import _FacebookIcon from './external/facebook.svg?component'
 import _FlathubIcon from './external/flathub.svg?component'
 import _GithubIcon from './external/github.svg?component'
+import _IntercomBubbleIcon from './external/illustrations/intercom_bubble_icon.png?url'
 import _MinecraftServerIcon from './external/illustrations/minecraft_server_icon.png?url'
 import _InstagramIcon from './external/instagram.svg?component'
 import _KoFiIcon from './external/kofi.svg?component'
@@ -132,6 +133,7 @@ export const VenmoIcon = _VenmoIcon
 export const PolygonIcon = _PolygonIcon
 export const USDCColorIcon = _USDCColorIcon
 export const VisaIcon = _VisaIcon
+export const IntercomBubbleIcon = _IntercomBubbleIcon
 export const MinecraftServerIcon = _MinecraftServerIcon
 
 export * from './generated-icons'
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index ba9388eaa1..1965c61b98 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -639,8 +639,11 @@ a:not(.no-click-animation),
 
 // TOOLTIPS
 
-.v-popper--theme-dropdown,
-.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
+.v-popper__popper.v-popper--theme-dropdown,
+.v-popper__popper.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
+	--_popper-arrow-bg: var(--surface-3);
+	--_popper-arrow-border: var(--surface-5);
+
 	.v-popper__inner {
 		border: 1px solid var(--surface-5) !important;
 		padding: var(--gap-sm) !important;
@@ -649,14 +652,6 @@ a:not(.no-click-animation),
 		background-color: var(--surface-3) !important;
 		box-shadow: 3px 3px 0.8rem rgba(0, 0, 0, 0.3) !important;
 	}
-
-	.v-popper__arrow-outer {
-		border-color: var(--surface-5) !important;
-	}
-
-	.v-popper__arrow-inner {
-		border-color: var(--surface-3) !important;
-	}
 }
 
 .v-popper__popper[data-popper-placement='bottom-end'] .v-popper__wrapper {
@@ -698,7 +693,16 @@ a:not(.no-click-animation),
 	//transform: scale(.9);
 }
 
-.v-popper--theme-tooltip {
+.v-popper__popper.v-popper--theme-tooltip {
+	--_popper-arrow-bg: var(--color-tooltip-bg);
+	--_popper-arrow-border: var(--surface-5);
+
+	pointer-events: none;
+
+	&.v-popper--interactive {
+		pointer-events: auto;
+	}
+
 	.v-popper__inner {
 		background: var(--color-tooltip-bg) !important;
 		color: var(--color-tooltip-text) !important;
@@ -710,18 +714,12 @@ a:not(.no-click-animation),
 		line-height: 1;
 		border: 1px solid var(--surface-5);
 	}
-
-	.v-popper__arrow-outer {
-		border-color: var(--surface-5) !important;
-	}
-
-	.v-popper__arrow-inner {
-		visibility: visible;
-		border-color: var(--surface-3) !important;
-	}
 }
 
-.v-popper--theme-dismissable-prompt {
+.v-popper__popper.v-popper--theme-dismissable-prompt {
+	--_popper-arrow-bg: var(--color-raised-bg);
+	--_popper-arrow-border: var(--color-button-border);
+
 	z-index: 10;
 
 	.v-popper__inner {
@@ -734,13 +732,85 @@ a:not(.no-click-animation),
 		font-weight: bold;
 		line-height: 1;
 	}
+}
+
+.v-popper__popper.v-popper--theme-dropdown,
+.v-popper__popper.v-popper--theme-tooltip,
+.v-popper__popper.v-popper--theme-dismissable-prompt {
+	.v-popper__arrow-container {
+		width: 0.875rem !important;
+		height: 0.875rem !important;
+	}
 
 	.v-popper__arrow-outer {
-		border-color: var(--color-button-border);
+		border-color: transparent !important;
+		border-style: solid !important;
+		height: 0 !important;
+		width: 0 !important;
 	}
 
 	.v-popper__arrow-inner {
-		border-color: var(--color-raised-bg);
+		border-color: transparent !important;
+		border-style: solid !important;
+		height: 0 !important;
+		visibility: visible !important;
+		width: 0 !important;
+	}
+
+	&[data-popper-placement^='top'] {
+		.v-popper__arrow-outer {
+			border-width: 0.4375rem 0.4375rem 0 !important;
+			border-top-color: var(--_popper-arrow-border) !important;
+		}
+
+		.v-popper__arrow-inner {
+			border-width: 0.375rem 0.375rem 0 !important;
+			border-top-color: var(--_popper-arrow-bg) !important;
+			left: 0.0625rem !important;
+			top: -0.0625rem !important;
+		}
+	}
+
+	&[data-popper-placement^='bottom'] {
+		.v-popper__arrow-outer {
+			border-width: 0 0.4375rem 0.4375rem !important;
+			border-bottom-color: var(--_popper-arrow-border) !important;
+		}
+
+		.v-popper__arrow-inner {
+			border-width: 0 0.375rem 0.375rem !important;
+			border-bottom-color: var(--_popper-arrow-bg) !important;
+			bottom: -0.0625rem !important;
+			left: 0.0625rem !important;
+		}
+	}
+
+	&[data-popper-placement^='left'] {
+		.v-popper__arrow-outer {
+			border-width: 0.4375rem 0 0.4375rem 0.4375rem !important;
+			border-left-color: var(--_popper-arrow-border) !important;
+		}
+
+		.v-popper__arrow-inner {
+			border-width: 0.375rem 0 0.375rem 0.375rem !important;
+			left: -0.0625rem !important;
+			border-left-color: var(--_popper-arrow-bg) !important;
+			top: 0.0625rem !important;
+		}
+	}
+
+	&[data-popper-placement^='right'] {
+		.v-popper__arrow-outer {
+			border-width: 0.4375rem 0.4375rem 0.4375rem 0 !important;
+			border-right-color: var(--_popper-arrow-border) !important;
+		}
+
+		.v-popper__arrow-inner {
+			border-width: 0.375rem 0.375rem 0.375rem 0 !important;
+			border-right-color: var(--_popper-arrow-bg) !important;
+			right: -0.0625rem !important;
+			top: 0.0625rem !important;
+		}
 	}
 }
 
diff --git a/packages/blog/articles/server-access.md b/packages/blog/articles/server-access.md
new file mode 100644
index 0000000000..4951d8e92f
--- /dev/null
+++ b/packages/blog/articles/server-access.md
@@ -0,0 +1,61 @@
+---
+title: Manage servers together
+summary: Add other users to your server, assign roles, and track what’s changed.
+date: 2026-06-03T20:10:28.823Z
+authors: ['bOHH0P9Z', 'AJfd8YH6']
+---
+
+Hey everyone,
+
+With this release, you can now give other users access to your server! This has been one of the most requested features for Modrinth Hosting and we’re excited to finally get it out.
+
+![The new Access tab in the Modrinth Hosting panel, featuring a list of invited users and their permissions, invite new users, and an activity log to see what changes are being made to your server and by whom.](./server-access.webp)
+
+## TL;DR
+
+- Add users to your server
+- Set permission roles
+- View activity log
+
+## Invite your friends
+
+You can now give other users access to your server so they can help manage content, start the server, and more. To invite someone, just enter their Modrinth username and they’ll receive an invite by email or as a notification in the app if they’re signed in.
+
+Alongside this release, we’ve also improved state syncing between the website panel, app, and other users, so everything should stay up to date in real time.
+
+![A pop-up modal for adding a user to your server. Search by Modrinth username, select their role (editor or limited), and an option to also send them a friend request.](./add-user-modal.webp)
+
+## Permission roles
+
+When adding someone to your server, you can choose what level of access they have. There are three roles, with each role inheriting the permissions of the previous one:
+
+- **Owner:** Full access to the server including billing (you)
+- **Editor:** Manage content, files, backups, settings, and more
+- **Limited:** Start, stop, and view the server without making changes
+
+You can find a full permission breakdown below:
+
+| Permission               | Owner | Editor | Limited |
+| ------------------------ | ----- | ------ | ------- |
+| Start / stop server      | ✅    | ✅     | ✅      |
+| Execute commands         | ✅    | ✅     | ❌      |
+| Edit settings            | ✅    | ✅     | ❌      |
+| Edit installation        | ✅    | ✅     | ❌      |
+| Manage content           | ✅    | ✅     | ❌      |
+| Manage files             | ✅    | ✅     | ❌      |
+| Create & restore backups | ✅    | ✅     | ❌      |
+| Invite users             | ✅    | ❌     | ❌      |
+| Reset server             | ✅    | ❌     | ❌      |
+| Manage billing           | ✅    | ❌     | ❌      |
+
+## See what changed
+
+Along with adding users, we’ve introduced an activity log. This is a chronological history of actions related to your server so you can see what changed, who changed it, and when it happened. Some actions are grouped together, like updating multiple projects at once, to keep things easier to read.
+
+You can select a time timeframe and filter by user or action type if you’re looking for something specific.
+
+![The activity log section of the Access tab, where you can see the user that performed an action on the left column, the action that was performed in the center, and the time it happened on the right.](./activity-log.webp)
+
+—
+
+Thank you for your continued support! 💚
diff --git a/packages/blog/compiled/index.ts b/packages/blog/compiled/index.ts
index 02f29ff7e2..5e4d23ba0c 100644
--- a/packages/blog/compiled/index.ts
+++ b/packages/blog/compiled/index.ts
@@ -30,6 +30,7 @@ import { article as pride_campaign_2025 } from "./pride_campaign_2025";
 import { article as pride_campaign_2026 } from "./pride_campaign_2026";
 import { article as redesign } from "./redesign";
 import { article as russian_censorship } from "./russian_censorship";
+import { article as server_access } from "./server_access";
 import { article as skins_now_in_modrinth_app } from "./skins_now_in_modrinth_app";
 import { article as standing_by_our_values } from "./standing_by_our_values";
 import { article as standing_by_our_values_russian } from "./standing_by_our_values_russian";
@@ -71,6 +72,7 @@ export const articles = [
   pride_campaign_2026,
   redesign,
   russian_censorship,
+  server_access,
   skins_now_in_modrinth_app,
   standing_by_our_values,
   standing_by_our_values_russian,
diff --git a/packages/blog/compiled/server_access.content.ts b/packages/blog/compiled/server_access.content.ts
new file mode 100644
index 0000000000..d0ee380d69
--- /dev/null
+++ b/packages/blog/compiled/server_access.content.ts
@@ -0,0 +1,2 @@
+// AUTO-GENERATED FILE - DO NOT EDIT
+export const html = `<p>Hey everyone,</p><p>With this release, you can now give other users access to your server! This has been one of the most requested features for Modrinth Hosting and we’re excited to finally get it out.</p><p><img src="/news/article/server-access/server-access.webp" alt="The new Access tab in the Modrinth Hosting panel, featuring a list of invited users and their permissions, invite new users, and an activity log to see what changes are being made to your server and by whom."></p><h2>TL;DR</h2><ul><li>Add users to your server</li><li>Set permission roles</li><li>View activity log</li></ul><h2>Invite your friends</h2><p>You can now give other users access to your server so they can help manage content, start the server, and more. To invite someone, just enter their Modrinth username and they’ll receive an invite by email or as a notification in the app if they’re signed in.</p><p>Alongside this release, we’ve also improved state syncing between the website panel, app, and other users, so everything should stay up to date in real time.</p><p><img src="/news/article/server-access/add-user-modal.webp" alt="A pop-up modal for adding a user to your server. Search by Modrinth username, select their role (editor or limited), and an option to also send them a friend request."></p><h2>Permission roles</h2><p>When adding someone to your server, you can choose what level of access they have. There are three roles, with each role inheriting the permissions of the previous one:</p><ul><li><strong>Owner:</strong> Full access to the server including billing (you)</li><li><strong>Editor:</strong> Manage content, files, backups, settings, and more</li><li><strong>Limited:</strong> Start, stop, and view the server without making changes</li></ul><p>You can find a full permission breakdown below:</p><table><thead><tr><th>Permission</th><th>Owner</th><th>Editor</th><th>Limited</th></tr></thead><tbody><tr><td>Start / stop server</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><td>Execute commands</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><td>Edit settings</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><td>Edit installation</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><td>Manage content</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><td>Manage files</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><td>Create &amp; restore backups</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><td>Invite users</td><td>✅</td><td>❌</td><td>❌</td></tr><tr><td>Reset server</td><td>✅</td><td>❌</td><td>❌</td></tr><tr><td>Manage billing</td><td>✅</td><td>❌</td><td>❌</td></tr></tbody></table><h2>See what changed</h2><p>Along with adding users, we’ve introduced an activity log. This is a chronological history of actions related to your server so you can see what changed, who changed it, and when it happened. Some actions are grouped together, like updating multiple projects at once, to keep things easier to read.</p><p>You can select a time timeframe and filter by user or action type if you’re looking for something specific.</p><p><img src="/news/article/server-access/activity-log.webp" alt="The activity log section of the Access tab, where you can see the user that performed an action on the left column, the action that was performed in the center, and the time it happened on the right."></p><p>—</p><p>Thank you for your continued support! 💚</p>`;
diff --git a/packages/blog/compiled/server_access.ts b/packages/blog/compiled/server_access.ts
new file mode 100644
index 0000000000..5aa7aaf6f2
--- /dev/null
+++ b/packages/blog/compiled/server_access.ts
@@ -0,0 +1,12 @@
+// AUTO-GENERATED FILE - DO NOT EDIT
+export const article = {
+  html: () => import(`./server_access.content`).then(m => m.html),
+  title: "Manage servers together",
+  summary: "Add other users to your server, assign roles, and track what’s changed.",
+  date: "2026-06-03T20:10:28.823Z",
+  slug: "server-access",
+  authors: ["bOHH0P9Z","AJfd8YH6"],
+  unlisted: false,
+  thumbnail: true,
+  
+};
diff --git a/packages/blog/public/server-access/activity-log.webp b/packages/blog/public/server-access/activity-log.webp
new file mode 100644
index 0000000000..01847b870b
Binary files /dev/null and b/packages/blog/public/server-access/activity-log.webp differ
diff --git a/packages/blog/public/server-access/add-user-modal.webp b/packages/blog/public/server-access/add-user-modal.webp
new file mode 100644
index 0000000000..8a36a37890
Binary files /dev/null and b/packages/blog/public/server-access/add-user-modal.webp differ
diff --git a/packages/blog/public/server-access/server-access.webp b/packages/blog/public/server-access/server-access.webp
new file mode 100644
index 0000000000..5900cdefbf
Binary files /dev/null and b/packages/blog/public/server-access/server-access.webp differ
diff --git a/packages/blog/public/server-access/thumbnail.webp b/packages/blog/public/server-access/thumbnail.webp
new file mode 100644
index 0000000000..fa708ee51c
Binary files /dev/null and b/packages/blog/public/server-access/thumbnail.webp differ
diff --git a/packages/ui/.storybook/preview.scss b/packages/ui/.storybook/preview.scss
new file mode 100644
index 0000000000..b9e6de3ad7
--- /dev/null
+++ b/packages/ui/.storybook/preview.scss
@@ -0,0 +1,17 @@
+html {
+	min-height: 100%;
+	overflow: auto;
+}
+
+body {
+	position: static !important;
+	width: auto !important;
+	min-height: 100vh;
+	height: auto !important;
+	overflow: auto !important;
+}
+
+#storybook-root {
+	min-height: 100vh;
+	height: auto;
+}
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 9b340008eb..e68f912e93 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -6,6 +6,7 @@ import '../../assets/styles/defaults.scss'
 // ---
 // app-frontend css imports
 import '../../../apps/app-frontend/src/assets/stylesheets/global.scss'
+import './preview.scss'
 
 import type { Labrinth } from '@modrinth/api-client'
 import { GenericModrinthClient } from '@modrinth/api-client'
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index d266fd07ee..bb6c1ddf9a 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -26,8 +26,9 @@
 		>
 			<StyledInput
 				v-model="commandInput"
+				v-tooltip="disableInput ? disableInputTooltip : undefined"
 				:icon="TerminalSquareIcon"
-				:placeholder="disableInput ? 'Server is not running' : 'Send a command'"
+				:placeholder="disableInput ? disabledInputPlaceholder : 'Send a command'"
 				:disabled="disableInput"
 				wrapper-class="w-full"
 				input-class="!h-10"
@@ -51,6 +52,8 @@ const props = withDefaults(
 		scrollback?: number
 		showInput?: boolean
 		disableInput?: boolean
+		disableInputTooltip?: string
+		disabledInputPlaceholder?: string
 		fullscreen?: boolean
 		emptyStateType?: 'server' | 'instance'
 		loading?: boolean
@@ -59,6 +62,8 @@ const props = withDefaults(
 		scrollback: Infinity,
 		showInput: false,
 		disableInput: false,
+		disableInputTooltip: undefined,
+		disabledInputPlaceholder: 'Server is not running',
 		fullscreen: false,
 		emptyStateType: undefined,
 		loading: false,
@@ -215,6 +220,7 @@ watch(
 )
 
 const submitCommand = () => {
+	if (props.disableInput) return
 	const cmd = commandInput.value.trim()
 	if (!cmd) return
 	emit('command', cmd)
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 09ebaec1f1..f546054c16 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -349,20 +349,19 @@ const fontSize = computed(() => {
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-.btn-wrapper :deep(:is(button, a, .button-like):first-child) > svg:first-child,
-.btn-wrapper :slotted(:is(button, a, .button-like):first-child) > svg:first-child,
-.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child > svg:first-child,
-.btn-wrapper
-	:slotted(*)
-	> *:first-child
-	> :is(button, a, .button-like):first-child
-	> svg:first-child,
+.btn-wrapper :deep(:is(button, a, .button-like):first-child) > svg,
+.btn-wrapper :slotted(:is(button, a, .button-like):first-child) > svg,
+.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child > svg,
+.btn-wrapper :slotted(*) > *:first-child > :is(button, a, .button-like):first-child > svg,
 .btn-wrapper
 	:slotted(*)
 	> *:first-child
 	> *:first-child
 	> :is(button, a, .button-like):first-child
-	> svg:first-child {
+	> svg {
+	display: block;
+	width: var(--_icon-size, 1rem);
+	height: var(--_icon-size, 1rem);
 	min-width: var(--_icon-size, 1rem);
 	min-height: var(--_icon-size, 1rem);
 }
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 3d81e67914..b04a197f90 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -23,6 +23,10 @@
 				type="text"
 				:placeholder="searchPlaceholder || placeholder"
 				:disabled="disabled"
+				:autocomplete="searchAutocomplete"
+				:autocorrect="searchAutocorrect"
+				:autocapitalize="searchAutocapitalize"
+				:spellcheck="searchSpellcheck"
 				wrapper-class="w-full !bg-transparent"
 				:input-class="searchableInputClass"
 				class="relative z-[1]"
@@ -73,7 +77,7 @@
 					<slot name="selected" :label="triggerText">{{ triggerText }}</slot>
 				</span>
 			</div>
-			<div class="flex items-center gap-1">
+			<div class="flex shrink-0 items-center gap-1">
 				<slot name="suffix"></slot>
 				<ChevronLeftIcon
 					v-if="showChevron"
@@ -97,6 +101,7 @@
 					:class="[
 						props.dropdownClass,
 						openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
+						props.dropdownClass,
 					]"
 					:style="dropdownStyle"
 					:role="listbox ? 'listbox' : 'menu'"
@@ -174,7 +179,7 @@
 						</div>
 					</div>
 
-					<div v-else-if="searchQuery" class="p-4 mb-2 text-center text-sm text-secondary">
+					<div v-else-if="searchQuery" class="p-4 text-center text-sm text-secondary">
 						{{ noOptionsMessage }}
 					</div>
 
@@ -276,12 +281,19 @@ const props = withDefaults(
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		disableSearchFilter?: boolean
+		dropdownClass?: string
+		dropdownMinWidth?: string
+		minSearchLengthToOpen?: number
 		/** Keep the selected option's label in the input after selection, and show all options on focus */
 		syncWithSelection?: boolean
 		/** Select the searchable input text when the field receives focus */
 		selectSearchTextOnFocus?: boolean
 		/** Show a search icon in the searchable input */
 		showSearchIcon?: boolean
+		searchAutocomplete?: string
+		searchAutocorrect?: 'on' | 'off'
+		searchAutocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
+		searchSpellcheck?: boolean
 	}>(),
 	{
 		placeholder: 'Select an option',
@@ -293,6 +305,7 @@ const props = withDefaults(
 		showIconInSelected: false,
 		maxHeight: DEFAULT_MAX_HEIGHT,
 		noOptionsMessage: 'No results found',
+		minSearchLengthToOpen: 0,
 		syncWithSelection: true,
 		selectSearchTextOnFocus: false,
 		showSearchIcon: false,
@@ -377,6 +390,10 @@ const triggerText = computed(() => {
 	return props.placeholder
 })
 
+const hasMinimumSearchLength = computed(
+	() => !props.searchable || searchQuery.value.trim().length >= props.minSearchLengthToOpen,
+)
+
 const optionsWithKeys = computed(() => {
 	return props.options.map((opt, index) => ({
 		...opt,
@@ -413,8 +430,7 @@ function getOptionClasses(item: ComboboxOption<T> & { key: string }, _index: num
 		item.class,
 		{
 			'bg-surface-4 text-contrast hover:brightness-[115%] focus:brightness-[115%]': !isSelected,
-			'bg-highlight-green text-green !cursor-default hover:bg-highlight-green focus:bg-highlight-green':
-				isSelected,
+			'bg-highlight-green text-green hover:bg-highlight-green focus:bg-highlight-green': isSelected,
 			'cursor-not-allowed opacity-50 pointer-events-none': item.disabled,
 		},
 	]
@@ -583,7 +599,8 @@ function destroyOptionsOverlayScrollbars() {
 }
 
 async function openDropdown() {
-	if (props.disabled || isOpen.value || !hasDropdownContent.value) return
+	if (props.disabled || isOpen.value || !hasMinimumSearchLength.value || !hasDropdownContent.value)
+		return
 
 	isOpen.value = true
 	emit('open')
@@ -628,7 +645,11 @@ function handleTriggerClick(event: MouseEvent) {
 function handleOptionClick(option: ComboboxOption<T>, index: number) {
 	if (option.disabled || option.type === 'divider') return
 	const isSelected = props.listbox && option.value === props.modelValue
-	if (isSelected) return
+	if (isSelected) {
+		focusedIndex.value = index
+		if (option.type !== 'link') closeDropdown()
+		return
+	}
 
 	focusedIndex.value = index
 
@@ -782,6 +803,10 @@ function handleSearchKeydown(event: KeyboardEvent) {
 function handleSearchInput() {
 	userHasTyped.value = true
 	emit('searchInput', searchQuery.value)
+	if (!hasMinimumSearchLength.value) {
+		closeDropdown()
+		return
+	}
 	if (!isOpen.value) {
 		openDropdown()
 	}
@@ -906,10 +931,16 @@ watch(hasDropdownContent, (value) => {
 	}
 })
 
+watch(hasMinimumSearchLength, (canOpen) => {
+	if (!canOpen) {
+		closeDropdown()
+	}
+})
+
 watch(
 	[() => props.modelValue, () => props.options],
 	([val]) => {
-		if (props.searchable && props.syncWithSelection && !isOpen.value) {
+		if (props.searchable && props.syncWithSelection && !isOpen.value && !userHasTyped.value) {
 			const opt = props.options.find((o) => isDropdownOption(o) && o.value === val)
 			searchQuery.value = opt && isDropdownOption(opt) ? opt.label : ''
 		}
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 6dcf5986e2..b8f38ccf7b 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -109,7 +109,7 @@
 			<button
 				ref="addMenuTrigger"
 				type="button"
-				:class="addButtonClass"
+				:class="addButtonClass ?? '!border'"
 				:aria-expanded="isAddMenuOpen"
 				aria-haspopup="menu"
 				@click="handleAddMenuTriggerClick"
@@ -262,58 +262,82 @@
 						:style="activeCategoryOptionsListStyle"
 					>
 						<div
-							v-for="{ option, index } in renderedVisibleActiveCategoryOptions"
-							:key="`${activeCategory.key}-${option.value}`"
+							v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
+							:key="getActiveCategoryItemKey(item, index)"
 							:class="shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined"
 							:style="getActiveCategoryOptionWrapperStyle(index)"
 						>
+							<div
+								v-if="isDropdownFilterSectionHeader(item)"
+								class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-semibold text-secondary"
+								:class="item.class"
+							>
+								<span class="flex min-w-0 items-center gap-2">
+									<component
+										:is="item.icon"
+										v-if="item.icon"
+										class="size-4 shrink-0"
+										aria-hidden="true"
+									/>
+									<span class="min-w-0 truncate">{{ item.label }}</span>
+								</span>
+								<button
+									v-if="hasSelectableSectionHeaderOptions(item)"
+									type="button"
+									class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:text-contrast"
+									@click="toggleSectionHeaderOptions(item)"
+								>
+									{{ areSectionHeaderOptionsSelected(item) ? 'Clear' : 'Select all' }}
+								</button>
+							</div>
 							<button
+								v-else
 								type="button"
 								class="flex w-full cursor-pointer items-center gap-2.5 border-0 px-4 py-3.5 text-left text-contrast shadow-none transition-all duration-150 bg-surface-4 hover:brightness-[115%] focus-visible:brightness-[115%] focus-visible:outline-none"
 								:class="[
 									shouldVirtualizeActiveCategoryOptions ? 'h-12' : undefined,
 									{
-										'brightness-[115%]': option.selected,
-										'pointer-events-none cursor-not-allowed opacity-50': option.disabled,
+										'brightness-[115%]': item.selected,
+										'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
 									},
 								]"
-								:aria-disabled="option.disabled || undefined"
-								:aria-checked="option.selected"
+								:aria-disabled="item.disabled || undefined"
+								:aria-checked="item.selected"
 								role="checkbox"
-								@click="toggleFilterOption(activeCategory.key, option)"
+								@click="toggleFilterOption(activeCategory.key, item)"
 							>
 								<span
 									v-if="checkboxPosition === 'left'"
 									class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
 									:class="
-										option.selected
+										item.selected
 											? 'border-button-border bg-brand text-brand-inverted'
 											: 'border-surface-5 bg-surface-2'
 									"
 								>
-									<CheckIcon v-if="option.selected" aria-hidden="true" stroke-width="3" />
+									<CheckIcon v-if="item.selected" aria-hidden="true" stroke-width="3" />
 								</span>
 								<div class="flex min-w-0 flex-1 items-center justify-between gap-3">
 									<slot
 										v-if="$slots.option"
 										name="option"
 										:category="activeCategory"
-										:option="option"
-										:selected="option.selected"
+										:option="item"
+										:selected="item.selected"
 										:index="index"
 									></slot>
 									<template v-else>
 										<span
 											class="min-w-0 truncate font-semibold leading-tight"
-											:class="option.selected ? 'text-contrast' : 'text-primary'"
+											:class="item.selected ? 'text-contrast' : 'text-primary'"
 										>
-											{{ option.label }}
+											{{ item.label }}
 										</span>
 										<slot
 											name="option-right"
 											:category="activeCategory"
-											:option="option"
-											:selected="option.selected"
+											:option="item"
+											:selected="item.selected"
 										></slot>
 									</template>
 								</div>
@@ -321,7 +345,7 @@
 									v-if="checkboxPosition === 'right'"
 									class="flex shrink-0 items-center justify-center text-brand"
 								>
-									<CheckIcon v-if="option.selected" aria-hidden="true" class="size-5" />
+									<CheckIcon v-if="item.selected" aria-hidden="true" class="size-5" />
 								</span>
 							</button>
 						</div>
@@ -353,12 +377,12 @@ import {
 } from '@modrinth/assets'
 import { onClickOutside } from '@vueuse/core'
 import { OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'
-import type { ComponentPublicInstance, CSSProperties } from 'vue'
+import type { Component, ComponentPublicInstance, CSSProperties } from 'vue'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import { useVirtualScroll } from '../../composables/virtual-scroll'
 import ButtonStyled from './ButtonStyled.vue'
-import MultiSelect, { type MultiSelectOption } from './MultiSelect.vue'
+import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
 import StyledInput from './StyledInput.vue'
 
 export type DropdownFilterBarOption = {
@@ -368,10 +392,20 @@ export type DropdownFilterBarOption = {
 	disabled?: boolean
 }
 
+export type DropdownFilterBarSectionHeader = {
+	type: 'section-header'
+	label: string
+	key?: string
+	icon?: Component
+	class?: string
+}
+
+export type DropdownFilterBarItem = DropdownFilterBarOption | DropdownFilterBarSectionHeader
+
 export type DropdownFilterBarCategory = {
 	key: string
 	label: string
-	options: DropdownFilterBarOption[]
+	options: DropdownFilterBarItem[]
 	syntheticOptions?: DropdownFilterBarOption[]
 	searchable?: boolean
 	searchPlaceholder?: string
@@ -388,8 +422,12 @@ type RenderedDropdownFilterBarOption = DropdownFilterBarOption & {
 	selected: boolean
 }
 
+type RenderedDropdownFilterBarItem =
+	| RenderedDropdownFilterBarOption
+	| DropdownFilterBarSectionHeader
+
 type VisibleDropdownFilterBarOption = {
-	option: RenderedDropdownFilterBarOption
+	item: RenderedDropdownFilterBarItem
 	index: number
 }
 
@@ -464,6 +502,7 @@ const props = withDefaults(
 		showClear?: boolean
 		showLabel?: boolean
 		useFilterIcon?: boolean
+		applyImmediately?: boolean
 		showPreviewFilterIcon?: boolean
 		previewTriggerClass?: string
 		addButtonClass?: string
@@ -478,6 +517,7 @@ const props = withDefaults(
 		showClear: false,
 		showLabel: true,
 		useFilterIcon: false,
+		applyImmediately: false,
 		showPreviewFilterIcon: false,
 		emptyOptionsLabel: 'No options available.',
 		emptySearchLabel: 'No options found.',
@@ -519,6 +559,18 @@ let pendingCategoryTimeout: ReturnType<typeof setTimeout> | null = null
 let previousMousePosition: Point | null = null
 let addMenuPositionRafId: number | null = null
 
+function isDropdownFilterSectionHeader(
+	item: DropdownFilterBarItem | RenderedDropdownFilterBarItem,
+): item is DropdownFilterBarSectionHeader {
+	return 'type' in item && item.type === 'section-header'
+}
+
+function isDropdownFilterOption(
+	item: DropdownFilterBarItem | RenderedDropdownFilterBarItem,
+): item is DropdownFilterBarOption {
+	return !isDropdownFilterSectionHeader(item)
+}
+
 const filterCategories = computed<DropdownFilterBarCategory[]>(() => {
 	const source = isAddMenuOpen.value ? 'draft' : 'committed'
 	return props.categories.map((category) => {
@@ -569,15 +621,32 @@ const filteredActiveCategoryOptions = computed(() => {
 		return activeCategory.value.options
 	}
 
-	return activeCategory.value.options.filter((option) => {
-		if (option.label.toLowerCase().includes(query)) {
-			return true
+	const items: DropdownFilterBarItem[] = []
+	let pendingSectionHeader: DropdownFilterBarSectionHeader | null = null
+
+	for (const option of activeCategory.value.options) {
+		if (isDropdownFilterSectionHeader(option)) {
+			pendingSectionHeader = option
+			continue
+		}
+
+		const matches =
+			option.label.toLowerCase().includes(query) ||
+			option.value.toLowerCase().includes(query) ||
+			(option.searchTerms?.some((term) => term.toLowerCase().includes(query)) ?? false)
+
+		if (!matches) {
+			continue
 		}
-		if (option.value.toLowerCase().includes(query)) {
-			return true
+
+		if (pendingSectionHeader) {
+			items.push(pendingSectionHeader)
+			pendingSectionHeader = null
 		}
-		return option.searchTerms?.some((term) => term.toLowerCase().includes(query)) ?? false
-	})
+		items.push(option)
+	}
+
+	return items
 })
 
 const shouldVirtualizeActiveCategoryOptions = computed(
@@ -599,11 +668,13 @@ const {
 })
 
 const renderedVisibleActiveCategoryOptions = computed<VisibleDropdownFilterBarOption[]>(() =>
-	visibleActiveCategoryOptions.value.map((option, offset) => ({
-		option: {
-			...option,
-			selected: activeCategorySelectedValueSet.value.has(option.value),
-		},
+	visibleActiveCategoryOptions.value.map((item, offset) => ({
+		item: isDropdownFilterSectionHeader(item)
+			? item
+			: {
+					...item,
+					selected: activeCategorySelectedValueSet.value.has(item.value),
+				},
 		index: activeCategoryOptionsVisibleRange.value.start + offset,
 	})),
 )
@@ -721,14 +792,14 @@ function areSelectedFiltersEqual(
 }
 
 function getOptionsWithSelectedValues(
-	options: DropdownFilterBarOption[],
+	options: DropdownFilterBarItem[],
 	selectedValues: string[],
-): DropdownFilterBarOption[] {
+): DropdownFilterBarItem[] {
 	if (selectedValues.length === 0) {
 		return options
 	}
 
-	const knownValues = new Set(options.map((option) => option.value))
+	const knownValues = new Set(options.filter(isDropdownFilterOption).map((option) => option.value))
 	const missingSelectedOptions = selectedValues
 		.filter((value) => !knownValues.has(value))
 		.map((value) => ({
@@ -748,15 +819,17 @@ function getCategorySyntheticValues(categoryKey: string): Set<string> {
 	return category ? getCategorySyntheticValueSet(category) : new Set()
 }
 
-function getVisiblePreviewOptions(
-	category: DropdownFilterBarCategory,
-): MultiSelectOption<string>[] {
-	return category.options.map((option) => ({
-		value: option.value,
-		label: option.label,
-		searchTerms: option.searchTerms,
-		disabled: option.disabled,
-	})) as MultiSelectOption<string>[]
+function getVisiblePreviewOptions(category: DropdownFilterBarCategory): MultiSelectItem<string>[] {
+	return category.options.map((option) =>
+		isDropdownFilterSectionHeader(option)
+			? option
+			: {
+					value: option.value,
+					label: option.label,
+					searchTerms: option.searchTerms,
+					disabled: option.disabled,
+				},
+	) as MultiSelectItem<string>[]
 }
 
 function getPreviewOptionLabel(
@@ -764,7 +837,7 @@ function getPreviewOptionLabel(
 	selectedValue: string,
 ): string | undefined {
 	return [...(category.syntheticOptions ?? []), ...category.options].find(
-		(option) => option.value === selectedValue,
+		(option) => isDropdownFilterOption(option) && option.value === selectedValue,
 	)?.label
 }
 
@@ -797,6 +870,9 @@ function setSelectedValues(
 		if (isAddMenuOpen.value && activeCategoryKey.value === categoryKey) {
 			scheduleSubmenuPositionUpdate()
 		}
+		if (props.applyImmediately) {
+			emit('update:modelValue', nextFilters)
+		}
 	} else {
 		emit('update:modelValue', nextFilters)
 	}
@@ -950,6 +1026,70 @@ function toggleFilterOption(categoryKey: string, option: DropdownFilterBarOption
 	toggleFilterValue(categoryKey, option.value, !isFilterValueSelected(categoryKey, option.value))
 }
 
+function getActiveCategoryItemKey(item: RenderedDropdownFilterBarItem, index: number) {
+	return isDropdownFilterSectionHeader(item)
+		? (item.key ?? `${activeCategory.value?.key ?? 'category'}-section-${item.label}-${index}`)
+		: `${activeCategory.value?.key ?? 'category'}-${item.value}`
+}
+
+function getSectionHeaderOptions(sectionHeader: DropdownFilterBarSectionHeader) {
+	const category = activeCategory.value
+	if (!category) {
+		return []
+	}
+
+	const sectionHeaderIndex = category.options.findIndex((item) => item === sectionHeader)
+	if (sectionHeaderIndex === -1) {
+		return []
+	}
+
+	const options: DropdownFilterBarOption[] = []
+	for (let index = sectionHeaderIndex + 1; index < category.options.length; index += 1) {
+		const item = category.options[index]
+		if (!item || isDropdownFilterSectionHeader(item)) {
+			break
+		}
+		if (!item.disabled) {
+			options.push(item)
+		}
+	}
+
+	return options
+}
+
+function hasSelectableSectionHeaderOptions(sectionHeader: DropdownFilterBarSectionHeader) {
+	return getSectionHeaderOptions(sectionHeader).length > 1
+}
+
+function areSectionHeaderOptionsSelected(sectionHeader: DropdownFilterBarSectionHeader) {
+	const options = getSectionHeaderOptions(sectionHeader)
+	return (
+		options.length > 0 &&
+		options.every((option) => activeCategorySelectedValueSet.value.has(option.value))
+	)
+}
+
+function toggleSectionHeaderOptions(sectionHeader: DropdownFilterBarSectionHeader) {
+	const category = activeCategory.value
+	if (!category) {
+		return
+	}
+
+	const options = getSectionHeaderOptions(sectionHeader)
+	if (options.length === 0) {
+		return
+	}
+
+	const optionValues = options.map((option) => option.value)
+	const optionValueSet = new Set(optionValues)
+	const currentValues = activeCategorySelectedValues.value
+	const nextValues = areSectionHeaderOptionsSelected(sectionHeader)
+		? currentValues.filter((value) => !optionValueSet.has(value))
+		: [...currentValues, ...optionValues.filter((value) => !currentValues.includes(value))]
+
+	setSelectedValues(category.key, nextValues, 'draft')
+}
+
 function getActiveCategoryOptionWrapperStyle(index: number): CSSProperties | undefined {
 	if (!shouldVirtualizeActiveCategoryOptions.value) {
 		return undefined
@@ -1076,9 +1216,13 @@ function getPreviewSelectedValues(categoryKey: string): string[] {
 }
 
 function setPreviewSelectedValues(categoryKey: string, values: string[]) {
+	const normalizedValues = normalizeSelectedValues(values)
 	previewSelectedValueDrafts.value = {
 		...previewSelectedValueDrafts.value,
-		[categoryKey]: normalizeSelectedValues(values),
+		[categoryKey]: normalizedValues,
+	}
+	if (props.applyImmediately) {
+		setSelectedValues(categoryKey, normalizedValues)
 	}
 }
 
diff --git a/packages/ui/src/components/base/FloatingActionBar.vue b/packages/ui/src/components/base/FloatingActionBar.vue
index 9baab485c5..c35bf48963 100644
--- a/packages/ui/src/components/base/FloatingActionBar.vue
+++ b/packages/ui/src/components/base/FloatingActionBar.vue
@@ -31,11 +31,15 @@ const shown = computed(() => props.shown && (!props.hideWhenModalOpen || stackCo
 const floatingActionBarId = Symbol('floating-action-bar')
 const intercomBubbleClearanceRequestId = Symbol('floating-action-bar')
 const zIndex = computed(() => 100 + stackCount.value * 10 + 8 + (!props.belowModal ? 1 : 0))
-const leftOffset = computed(
-	() => pageContext?.floatingActionBarOffsets?.left.value ?? 'var(--left-bar-width, 0px)',
+const leftOffset = computed(() =>
+	stackCount.value > 0
+		? '0px'
+		: (pageContext?.floatingActionBarOffsets?.left.value ?? 'var(--left-bar-width, 0px)'),
 )
-const rightOffset = computed(
-	() => pageContext?.floatingActionBarOffsets?.right.value ?? 'var(--right-bar-width, 0px)',
+const rightOffset = computed(() =>
+	stackCount.value > 0
+		? '0px'
+		: (pageContext?.floatingActionBarOffsets?.right.value ?? 'var(--right-bar-width, 0px)'),
 )
 const barStyle = computed(() => ({
 	zIndex: zIndex.value,
diff --git a/packages/ui/src/components/base/JoinedButtons.vue b/packages/ui/src/components/base/JoinedButtons.vue
index 2c56d50414..8aab2dc96d 100644
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ b/packages/ui/src/components/base/JoinedButtons.vue
@@ -2,6 +2,7 @@
 	<div class="joined-buttons">
 		<ButtonStyled :color="color" :size="size">
 			<button
+				v-tooltip="primaryTooltip"
 				:class="{ 'joined-buttons__primary--muted': primaryMuted }"
 				:disabled="primaryDisabledResolved"
 				@click="handlePrimaryAction"
@@ -15,6 +16,7 @@
 				class="btn-dropdown-animation !w-10"
 				:options="dropdownOptions"
 				:disabled="dropdownDisabledResolved"
+				:tooltip="dropdownTooltip"
 			>
 				<DropdownIcon />
 				<template v-for="action in dropdownActions" :key="action.id" #[action.id]>
@@ -53,6 +55,8 @@ interface Props {
 	primaryDisabled?: boolean
 	dropdownDisabled?: boolean
 	primaryMuted?: boolean
+	primaryTooltip?: string
+	dropdownTooltip?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,6 +66,8 @@ const props = withDefaults(defineProps<Props>(), {
 	primaryDisabled: undefined,
 	dropdownDisabled: undefined,
 	primaryMuted: false,
+	primaryTooltip: undefined,
+	dropdownTooltip: undefined,
 })
 
 const primaryDisabledResolved = computed(() => props.primaryDisabled ?? props.disabled)
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 6fc7745050..e6c3a06718 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -74,6 +74,7 @@
 			>
 				<ButtonStyled v-if="leftButtonConfig" type="outlined">
 					<button
+						v-tooltip="leftButtonConfig.tooltip"
 						:class="leftButtonConfig.buttonClass"
 						:disabled="leftButtonConfig.disabled"
 						@click="leftButtonConfig.onClick"
@@ -84,6 +85,7 @@
 				</ButtonStyled>
 				<ButtonStyled v-if="rightButtonConfig" :color="rightButtonConfig.color">
 					<button
+						v-tooltip="rightButtonConfig.tooltip"
 						class="!shadow-none"
 						:class="rightButtonConfig.buttonClass"
 						:disabled="rightButtonConfig.disabled || rightButtonConfig.loading"
@@ -128,6 +130,7 @@ export interface StageButtonConfig {
 	color?: InstanceType<typeof ButtonStyled>['$props']['color']
 	disabled?: boolean
 	loading?: boolean
+	tooltip?: string
 	iconClass?: string | null
 	buttonClass?: string | null
 	onClick?: () => void
diff --git a/packages/ui/src/components/base/StyledInput.vue b/packages/ui/src/components/base/StyledInput.vue
index 2c0e2f00a5..75f18f3c8c 100644
--- a/packages/ui/src/components/base/StyledInput.vue
+++ b/packages/ui/src/components/base/StyledInput.vue
@@ -28,6 +28,9 @@
 			:readonly="readonly"
 			:name="name"
 			:autocomplete="autocomplete"
+			:autocorrect="autocorrect"
+			:autocapitalize="autocapitalize"
+			:spellcheck="spellcheck"
 			:maxlength="maxlength"
 			:rows="rows"
 			class="w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow bg-surface-4 border-none rounded-xl"
@@ -55,6 +58,9 @@
 			:readonly="readonly"
 			:name="name"
 			:autocomplete="autocomplete"
+			:autocorrect="autocorrect"
+			:autocapitalize="autocapitalize"
+			:spellcheck="spellcheck"
 			:inputmode="inputmode"
 			:maxlength="maxlength"
 			:min="min"
@@ -124,6 +130,9 @@ const props = withDefaults(
 		id?: string
 		name?: string
 		autocomplete?: string
+		autocorrect?: 'on' | 'off'
+		autocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
+		spellcheck?: boolean
 		inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
 		maxlength?: number
 		min?: number
diff --git a/packages/ui/src/components/base/Table.vue b/packages/ui/src/components/base/Table.vue
index ceb99dcdd8..743f6da81f 100644
--- a/packages/ui/src/components/base/Table.vue
+++ b/packages/ui/src/components/base/Table.vue
@@ -62,7 +62,56 @@
 						</th>
 					</tr>
 				</thead>
-				<tbody :ref="setListContainer">
+				<TransitionGroup
+					v-if="rowTransitionName && !virtualized"
+					:name="rowTransitionName"
+					tag="tbody"
+				>
+					<tr v-if="data.length === 0" key="empty" class="bg-surface-2">
+						<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-5 p-0">
+							<slot name="empty-state">
+								<div class="text-secondary flex h-64 items-center justify-center">
+									No data available.
+								</div>
+							</slot>
+						</td>
+					</tr>
+					<template v-else>
+						<tr
+							v-for="(row, rowIndex) in renderedRows"
+							:key="getRowRenderKey(row, getAbsoluteRowIndex(rowIndex))"
+							:class="getRowClass(getAbsoluteRowIndex(rowIndex))"
+						>
+							<td
+								v-if="showSelection"
+								class="w-12 border-solid border-0 border-t border-surface-5 focus:outline-none"
+							>
+								<Checkbox
+									:model-value="isSelected(row)"
+									class="shrink-0 p-4 -outline-offset-[14px] outline rounded-2xl"
+									@update:model-value="(selectRow, event) => toggleSelection(row, selectRow, event)"
+								/>
+							</td>
+							<td
+								v-for="column in columns"
+								:key="column.key"
+								class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
+								:class="`text-${column.align ?? 'left'}`"
+							>
+								<slot
+									:name="`cell-${column.key}`"
+									:row="row"
+									:value="row[column.key]"
+									:column="column"
+									:index="getAbsoluteRowIndex(rowIndex)"
+								>
+									{{ row[column.key] ?? '' }}
+								</slot>
+							</td>
+						</tr>
+					</template>
+				</TransitionGroup>
+				<tbody v-else :ref="setListContainer">
 					<tr v-if="data.length === 0" class="bg-surface-2">
 						<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-5 p-0">
 							<slot name="empty-state">
@@ -83,7 +132,7 @@
 						<tr
 							v-for="(row, rowIndex) in renderedRows"
 							:key="getRowRenderKey(row, getAbsoluteRowIndex(rowIndex))"
-							:class="getAbsoluteRowIndex(rowIndex) % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
+							:class="getRowClass(getAbsoluteRowIndex(rowIndex))"
 						>
 							<td
 								v-if="showSelection"
@@ -169,6 +218,7 @@ const props = withDefaults(
 		virtualized?: boolean
 		virtualRowHeight?: number
 		virtualBufferSize?: number /* The number of extra rows rendered above and below the visible viewport */
+		rowTransitionName?: string
 		/**
 		 * Sets a minimum width for the table content, allowing horizontal overflow below that width.
 		 */
@@ -269,6 +319,10 @@ function getRowRenderKey(row: T, rowIndex: number): PropertyKey {
 	return rowIndex
 }
 
+function getRowClass(rowIndex: number): string {
+	return rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'
+}
+
 function isSelected(row: T): boolean {
 	return selectedIdSet.value.has(getSelectionId(row))
 }
diff --git a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
index 0a12ee479a..2b07138226 100644
--- a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
+++ b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
@@ -96,6 +96,14 @@ const { data: regionsData } = useQuery({
 	queryFn: () => archon.servers_v1.getRegions(),
 })
 
+const PING_COUNT = 20
+const PING_INTERVAL = 200
+const MAX_PING_TIME = 1000
+
+const initialIndex = {
+	'eu-lim': 31,
+}
+
 watch(
 	customerData,
 	(newCustomer) => {
@@ -136,14 +144,6 @@ async function fetchStock(
 	return result.available
 }
 
-const PING_COUNT = 20
-const PING_INTERVAL = 200
-const MAX_PING_TIME = 1000
-
-const initialIndex = {
-	'eu-lim': 31,
-}
-
 function runPingTest(
 	region: Archon.Servers.v1.Region,
 	index = initialIndex[region.shortcode] ?? 1,
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
index 8b64a06586..e0860dd303 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
@@ -5,8 +5,10 @@
 		}}</span>
 		<Combobox
 			v-model="ctx.modpackSearchProjectId.value"
+			v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
 			:options="ctx.modpackSearchOptions.value"
 			searchable
+			:disabled="ctx.finishDisabled.value"
 			:search-placeholder="formatMessage(messages.searchModpackPlaceholder)"
 			:no-options-message="
 				searchLoading
@@ -29,13 +31,23 @@
 		</div>
 		<div class="flex gap-3">
 			<ButtonStyled type="outlined">
-				<button class="flex-1" @click="triggerFileInput">
+				<button
+					v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
+					class="flex-1"
+					:disabled="ctx.finishDisabled.value"
+					@click="triggerFileInput"
+				>
 					<ImportIcon />
 					{{ formatMessage(messages.importModpack) }}
 				</button>
 			</ButtonStyled>
 			<ButtonStyled color="brand">
-				<button class="flex-1" @click="ctx.browseModpacks()">
+				<button
+					v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
+					class="flex-1"
+					:disabled="ctx.finishDisabled.value"
+					@click="ctx.browseModpacks()"
+				>
 					<CompassIcon />
 					{{ formatMessage(messages.browseModpacks) }}
 				</button>
@@ -87,6 +99,8 @@ const messages = defineMessages({
 })
 
 function proceedWithModpack() {
+	if (ctx.finishDisabled.value) return
+
 	debug('proceedWithModpack:', {
 		flowType: ctx.flowType,
 		modpackSelection: ctx.modpackSelection.value,
@@ -196,6 +210,8 @@ watch(
 )
 
 async function triggerFileInput() {
+	if (ctx.finishDisabled.value) return
+
 	const picked = await filePicker.pickModpackFile({
 		readFile: ctx.flowType !== 'instance',
 	})
diff --git a/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts b/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts
index f48b090af8..9582c4df8a 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts
@@ -186,6 +186,8 @@ export interface CreationFlowContextValue {
 
 	// Loading state (set when finish() is called, cleared on reset)
 	loading: Ref<boolean>
+	finishDisabled: ComputedRef<boolean>
+	finishDisabledTooltip: ComputedRef<string | undefined>
 
 	// Backup state (set by InlineBackupCreator in reset-server flow)
 	isBackingUp: Ref<boolean>
@@ -232,6 +234,8 @@ export interface CreationFlowOptions {
 	searchModpacks?: (query: string, limit?: number) => Promise<ModpackSearchResult>
 	getProjectVersions?: (projectId: string) => Promise<{ id: string }[]>
 	getLoaderManifest?: LoaderManifestResolver
+	finishDisabled?: ComputedRef<boolean>
+	finishDisabledTooltip?: ComputedRef<string | undefined>
 }
 
 export function createCreationFlowContext(
@@ -257,6 +261,8 @@ export function createCreationFlowContext(
 	const searchModpacks = options.searchModpacks!
 	const getProjectVersions = options.getProjectVersions!
 	const getLoaderManifest = options.getLoaderManifest ?? null
+	const finishDisabled = options.finishDisabled ?? computed(() => false)
+	const finishDisabledTooltip = options.finishDisabledTooltip ?? computed(() => undefined)
 
 	const setupType = ref<SetupType | null>(null)
 	const isImportMode = ref(false)
@@ -502,6 +508,8 @@ export function createCreationFlowContext(
 	}
 
 	function finish() {
+		if (finishDisabled.value) return
+
 		debug('finish() called, state:', {
 			setupType: setupType.value,
 			selectedLoader: selectedLoader.value,
@@ -585,6 +593,8 @@ export function createCreationFlowContext(
 		importSearchQuery,
 		hardReset,
 		loading,
+		finishDisabled,
+		finishDisabledTooltip,
 		isBackingUp,
 		cancelBackup,
 		modal,
diff --git a/packages/ui/src/components/flows/creation-flow-modal/index.vue b/packages/ui/src/components/flows/creation-flow-modal/index.vue
index 6d2ab01b53..fed5929a08 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/index.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/index.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 import MultiStageModal from '../../base/MultiStageModal.vue'
@@ -38,6 +38,8 @@ const props = withDefaults(
 		searchModpacks?: (query: string, limit?: number) => Promise<ModpackSearchResult>
 		getProjectVersions?: (projectId: string) => Promise<{ id: string }[]>
 		getLoaderManifest?: LoaderManifestResolver
+		finishDisabled?: boolean
+		finishDisabledTooltip?: string
 	}>(),
 	{
 		type: 'world',
@@ -78,6 +80,8 @@ const ctx = createCreationFlowContext(
 		searchModpacks: props.searchModpacks,
 		getProjectVersions: props.getProjectVersions,
 		getLoaderManifest: props.getLoaderManifest,
+		finishDisabled: computed(() => props.finishDisabled ?? false),
+		finishDisabledTooltip: computed(() => props.finishDisabledTooltip),
 	},
 )
 provideCreationFlowContext(ctx)
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
index 226d809009..3f2bb9cfa4 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
@@ -46,12 +46,14 @@ export const stageConfig: StageConfigInput<CreationFlowContextValue> = {
 				icon: PlusIcon,
 				iconPosition: 'before' as const,
 				color: 'brand' as const,
-				disabled,
+				disabled: disabled || ctx.finishDisabled.value,
 				loading: ctx.loading.value,
+				tooltip: ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined,
 				onClick: () => ctx.finish(),
 			}
 		}
 
+		const finishDisabled = !goesToNextStage && ctx.finishDisabled.value
 		return {
 			label: ctx.formatMessage(
 				goesToNextStage ? commonMessages.continueButton : creationFlowMessages.finishButton,
@@ -59,7 +61,8 @@ export const stageConfig: StageConfigInput<CreationFlowContextValue> = {
 			icon: goesToNextStage ? RightArrowIcon : null,
 			iconPosition: 'after' as const,
 			color: goesToNextStage ? undefined : ('brand' as const),
-			disabled,
+			disabled: disabled || finishDisabled,
+			tooltip: finishDisabled ? ctx.finishDisabledTooltip.value : undefined,
 			onClick: () => {
 				if (goesToNextStage) {
 					ctx.modal.value?.nextStage()
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
index 1254141345..15884f6b1f 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
@@ -51,8 +51,10 @@ export const stageConfig: StageConfigInput<CreationFlowContextValue> = {
 			icon: isFinish ? PlusIcon : RightArrowIcon,
 			iconPosition: isFinish ? ('before' as const) : ('after' as const),
 			color: isReset ? ('red' as const) : isFinish ? ('brand' as const) : undefined,
-			disabled: isForwardBlocked(ctx) || ctx.isBackingUp.value,
+			disabled:
+				isForwardBlocked(ctx) || ctx.isBackingUp.value || (isFinish && ctx.finishDisabled.value),
 			loading: isFinish && ctx.loading.value,
+			tooltip: isFinish && ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined,
 			onClick: () => {
 				if (isFinish) {
 					ctx.finish()
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/import-instance-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/import-instance-stage.ts
index 6429895747..5e1afce2e3 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/stages/import-instance-stage.ts
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/import-instance-stage.ts
@@ -38,7 +38,8 @@ export const stageConfig: StageConfigInput<CreationFlowContextValue> = {
 			icon: DownloadIcon,
 			iconPosition: 'before' as const,
 			color: 'brand' as const,
-			disabled: count === 0,
+			disabled: count === 0 || ctx.finishDisabled.value,
+			tooltip: ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined,
 			onClick: () => ctx.finish(),
 		}
 	},
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 11934cb1ff..98a16429fc 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -8,6 +8,7 @@ export * from './content'
 export * from './external_files'
 export * from './modal'
 export * from './nav'
+export * from './notifications'
 export * from './page'
 export * from './project'
 export * from './search'
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index b1ff2a89fd..aa504b480c 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -136,6 +136,7 @@
 import { XIcon } from '@modrinth/assets'
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import { useVIntl } from '../../composables/i18n'
 import { useModalStack } from '../../composables/modal-stack'
 import { useScrollIndicator } from '../../composables/scroll-indicator'
@@ -144,6 +145,7 @@ import { commonMessages } from '../../utils/common-messages'
 import ButtonStyled from '../base/ButtonStyled.vue'
 
 const { formatMessage } = useVIntl()
+const debug = useDebugLogger('NewModal')
 
 const modalBehavior = injectModalBehavior(null)
 const {
@@ -233,54 +235,138 @@ function getFocusableElements(): HTMLElement[] {
 }
 
 function show(event?: MouseEvent) {
+	debug('show: start', {
+		header: props.header,
+		open: open.value,
+		visible: visible.value,
+		stackSize: modalStackSize(),
+		hasEvent: !!event,
+	})
 	props.onShow?.()
+	debug('show: after onShow', { header: props.header })
 	const wasEmpty = modalStackSize() === 0
 	stackDepth.value = modalStackSize()
+	debug('show: before open=true', {
+		header: props.header,
+		wasEmpty,
+		stackDepth: stackDepth.value,
+	})
 	open.value = true
+	debug('show: after open=true', {
+		header: props.header,
+		open: open.value,
+		modalBodyExists: !!modalBodyRef.value,
+	})
 	previousFocusEl = document.activeElement
+	debug('show: previous focus captured', {
+		header: props.header,
+		previousFocusTag: previousFocusEl instanceof HTMLElement ? previousFocusEl.tagName : null,
+		previousFocusClass: previousFocusEl instanceof HTMLElement ? previousFocusEl.className : null,
+	})
 	pushModal()
+	debug('show: after pushModal', { header: props.header, stackSize: modalStackSize() })
 	if (wasEmpty) modalBehavior?.onShow?.()
+	debug('show: after modalBehavior onShow', { header: props.header })
 
 	document.body.style.overflow = 'hidden'
 	window.addEventListener('keydown', handleWindowKeyDown)
 	window.addEventListener('mousedown', updateMousePosition)
+	debug('show: listeners attached', { header: props.header })
 	if (event) {
 		updateMousePosition(event)
 	} else {
 		mouseX.value = Math.round(window.innerWidth / 2)
 		mouseY.value = Math.round(window.innerHeight / 2)
 	}
+	debug('show: mouse position set', {
+		header: props.header,
+		mouseX: mouseX.value,
+		mouseY: mouseY.value,
+	})
 	setTimeout(() => {
+		debug('show: timeout before visible=true', {
+			header: props.header,
+			open: open.value,
+			visible: visible.value,
+			modalBodyExists: !!modalBodyRef.value,
+		})
 		visible.value = true
+		debug('show: timeout after visible=true', {
+			header: props.header,
+			open: open.value,
+			visible: visible.value,
+			modalBodyExists: !!modalBodyRef.value,
+		})
 		nextTick(() => {
+			debug('show: nextTick focus start', {
+				header: props.header,
+				modalBodyExists: !!modalBodyRef.value,
+			})
 			const focusable = getFocusableElements()
+			debug('show: focusable elements', {
+				header: props.header,
+				count: focusable.length,
+				firstTag: focusable[0]?.tagName,
+			})
 			if (focusable.length > 0) {
 				focusable[0].focus()
 			} else {
 				modalBodyRef.value?.focus()
 			}
+			debug('show: nextTick focus done', { header: props.header })
 		})
 	}, 50)
+	debug('show: end', { header: props.header })
 }
 
 function hide() {
-	if (props.disableClose) return
+	debug('hide: start', {
+		header: props.header,
+		open: open.value,
+		visible: visible.value,
+		disableClose: props.disableClose,
+		stackSize: modalStackSize(),
+	})
+	if (props.disableClose) {
+		debug('hide: ignored disableClose', { header: props.header })
+		return
+	}
 	props.onHide?.()
+	debug('hide: after onHide', { header: props.header })
 	visible.value = false
+	debug('hide: after visible=false', { header: props.header, visible: visible.value })
 	popModal()
+	debug('hide: after popModal', { header: props.header, stackSize: modalStackSize() })
 	if (modalStackSize() === 0) {
 		modalBehavior?.onHide?.()
 		document.body.style.overflow = ''
 	}
 	window.removeEventListener('keydown', handleWindowKeyDown)
 	window.removeEventListener('mousedown', updateMousePosition)
+	debug('hide: listeners removed', { header: props.header })
 	if (previousFocusEl instanceof HTMLElement) {
+		debug('hide: restoring focus', {
+			header: props.header,
+			previousFocusTag: previousFocusEl.tagName,
+			previousFocusClass: previousFocusEl.className,
+		})
 		previousFocusEl.focus()
 	}
 	previousFocusEl = null
 	setTimeout(() => {
+		debug('hide: timeout before open=false', {
+			header: props.header,
+			open: open.value,
+			visible: visible.value,
+		})
 		open.value = false
+		debug('hide: timeout after open=false', {
+			header: props.header,
+			open: open.value,
+			visible: visible.value,
+		})
 	}, 300)
+	debug('hide: end', { header: props.header })
 }
 
 defineExpose({
@@ -308,6 +394,12 @@ function updateMousePosition(event: { clientX: number; clientY: number }) {
 }
 
 onUnmounted(() => {
+	debug('unmounted', {
+		header: props.header,
+		open: open.value,
+		visible: visible.value,
+		stackSize: modalStackSize(),
+	})
 	if (open.value) {
 		popModal()
 		window.removeEventListener('keydown', handleWindowKeyDown)
diff --git a/packages/ui/src/components/nav/PopupNotificationPanel.vue b/packages/ui/src/components/nav/PopupNotificationPanel.vue
index 571ccef403..15ab6238ed 100644
--- a/packages/ui/src/components/nav/PopupNotificationPanel.vue
+++ b/packages/ui/src/components/nav/PopupNotificationPanel.vue
@@ -13,7 +13,38 @@
 				@mouseenter="stopTimer(item)"
 				@mouseleave="setNotificationTimer(item)"
 			>
+				<NotificationToast
+					v-if="item.toast"
+					:type="item.toast.type"
+					:actor-name="item.toast.actorName"
+					:actor-avatar-url="item.toast.actorAvatarUrl"
+					:entity-name="item.toast.entityName"
+					:entity-icon-url="item.toast.entityIconUrl"
+					:status-text="item.toast.statusText"
+					:progress="item.toast.progress"
+					:waiting="item.toast.waiting"
+					@accept="handleToastAction(item, item.toast.onAccept)"
+					@decline="handleToastAction(item, item.toast.onDecline)"
+					@dismiss="handleToastAction(item, item.toast.onDismiss)"
+					@launch="handleToastAction(item, item.toast.onLaunch)"
+					@open-actor="item.toast.onOpenActor?.()"
+					@open-instance="handleToastAction(item, item.toast.onOpenInstance)"
+				/>
+				<div v-else-if="isDownloadNotification(item)" class="flex flex-col gap-4">
+					<NotificationToast
+						v-for="progressItem in downloadToastItems(item)"
+						:key="progressItem.id"
+						type="instance-download"
+						:entity-name="progressItem.title || item.title"
+						:entity-icon-url="progressItem.iconUrl ?? item.iconUrl ?? MinecraftServerIcon"
+						:status-text="downloadStatusText(progressItem)"
+						:progress="progressItem.progress"
+						:waiting="progressItem.waiting"
+						@dismiss="dismiss(item.id)"
+					/>
+				</div>
 				<div
+					v-else
 					class="flex w-full flex-col gap-3 overflow-hidden rounded-2xl bg-bg-raised shadow-xl border-surface-5 border-solid border p-4"
 				>
 					<div class="flex flex-col gap-2 w-full">
@@ -118,6 +149,7 @@ import {
 	DownloadIcon,
 	InfoIcon,
 	IssuesIcon,
+	MinecraftServerIcon,
 	XCircleIcon,
 	XIcon,
 } from '@modrinth/assets'
@@ -127,9 +159,11 @@ import {
 	injectPopupNotificationManager,
 	type PopupNotification,
 	type PopupNotificationButton,
+	type PopupNotificationProgressItem,
 } from '../../providers'
 import ButtonStyled from '../base/ButtonStyled.vue'
 import ProgressBar from '../base/ProgressBar.vue'
+import NotificationToast from '../notifications/NotificationToast.vue'
 
 const popupNotificationManager = injectPopupNotificationManager()
 const notifications = computed<PopupNotification[]>(() =>
@@ -141,6 +175,34 @@ const setNotificationTimer = (n: PopupNotification) =>
 	popupNotificationManager.setNotificationTimer(n)
 const dismiss = (id: string | number) => popupNotificationManager.removeNotification(id)
 
+function isDownloadNotification(item: PopupNotification) {
+	return (
+		item.type === 'download' &&
+		(!!item.progressItems?.length || item.progress != null || item.waiting)
+	)
+}
+
+function downloadToastItems(item: PopupNotification): PopupNotificationProgressItem[] {
+	if (item.progressItems?.length) {
+		return item.progressItems
+	}
+
+	return [
+		{
+			id: `${item.id}`,
+			title: item.title,
+			text: item.text,
+			iconUrl: item.iconUrl,
+			progress: item.progress ?? 0,
+			waiting: item.waiting ?? false,
+		},
+	]
+}
+
+function downloadStatusText(progressItem: PopupNotificationProgressItem) {
+	return progressItem.text?.replace(/^\d+%\s*/, '') ?? ''
+}
+
 function handleButtonClick(id: string | number, btn: PopupNotificationButton) {
 	btn.action()
 	if (!btn.keepOpen) {
@@ -148,6 +210,11 @@ function handleButtonClick(id: string | number, btn: PopupNotificationButton) {
 	}
 }
 
+async function handleToastAction(item: PopupNotification, action?: () => void | Promise<void>) {
+	popupNotificationManager.removeNotification(item.id)
+	await action?.()
+}
+
 function progressColorForType(type: PopupNotification['type']) {
 	if (type === 'error') {
 		return 'red'
@@ -179,8 +246,9 @@ withDefaults(
 	top: calc(var(--top-bar-height, 3rem) + 1.5rem);
 	right: 1.5rem;
 	z-index: 200;
-	width: 520px;
-	max-width: calc(100vw - 3rem);
+	width: min(420px, calc(100vw - 1.5rem));
+	min-width: min(420px, calc(100vw - 1.5rem));
+	max-width: min(420px, calc(100vw - 1.5rem));
 	display: flex;
 	flex-direction: column;
 	gap: 0.75rem;
@@ -192,8 +260,6 @@ withDefaults(
 
 @media screen and (max-width: 500px) {
 	.popup-notification-group {
-		width: calc(100% - 1.5rem);
-		max-width: none;
 		right: 0.75rem;
 	}
 }
diff --git a/packages/ui/src/components/notifications/NotificationStack.vue b/packages/ui/src/components/notifications/NotificationStack.vue
new file mode 100644
index 0000000000..51c9750dc2
--- /dev/null
+++ b/packages/ui/src/components/notifications/NotificationStack.vue
@@ -0,0 +1,61 @@
+<template>
+	<div
+		class="notification-stack"
+		:class="{
+			'has-sidebar': hasSidebar,
+		}"
+	>
+		<TransitionGroup name="notification-stack-item" tag="div" class="notification-stack-items">
+			<slot />
+		</TransitionGroup>
+	</div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+	defineProps<{
+		hasSidebar?: boolean
+	}>(),
+	{
+		hasSidebar: false,
+	},
+)
+</script>
+
+<style scoped>
+.notification-stack {
+	position: fixed;
+	top: calc(var(--top-bar-height, 3rem) + 1rem);
+	right: 1rem;
+	z-index: 200;
+	width: min(420px, calc(100vw - 1.5rem));
+}
+
+.notification-stack.has-sidebar {
+	right: calc(var(--right-bar-width, 0px) + 1rem);
+}
+
+@media screen and (max-width: 500px) {
+	.notification-stack {
+		right: 0.75rem;
+	}
+}
+
+.notification-stack-items {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+:global(.notification-stack-item-enter-active),
+:global(.notification-stack-item-leave-active),
+:global(.notification-stack-item-move) {
+	transition: all 0.3s ease-in-out;
+}
+
+:global(.notification-stack-item-enter-from),
+:global(.notification-stack-item-leave-to) {
+	opacity: 0;
+	transform: translateX(100%) scale(0.95);
+}
+</style>
diff --git a/packages/ui/src/components/notifications/NotificationToast.vue b/packages/ui/src/components/notifications/NotificationToast.vue
new file mode 100644
index 0000000000..2fac7fb85e
--- /dev/null
+++ b/packages/ui/src/components/notifications/NotificationToast.vue
@@ -0,0 +1,273 @@
+<template>
+	<div
+		class="notification-toast relative overflow-hidden rounded-[20px] border border-solid border-surface-5 bg-surface-3 p-4 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.1),0px_1px_3px_0px_rgba(0,0,0,0.2)]"
+	>
+		<div v-if="isInviteNotification" class="flex w-full items-start gap-3">
+			<Avatar
+				:src="actorAvatarUrl"
+				:alt="actorLabel"
+				:tint-by="actorLabel"
+				size="44px"
+				circle
+				no-shadow
+				class="border border-solid border-surface-5"
+			/>
+			<div class="flex min-w-0 flex-1 flex-col gap-2.5">
+				<div class="flex w-full items-start gap-1">
+					<p class="m-0 min-w-0 flex-1 break-words text-lg font-normal leading-6 text-contrast/85">
+						<template v-if="type === 'friend-request'">
+							<span class="font-semibold text-contrast">{{ actorLabel }}</span>
+							<span> sent you a friend request.</span>
+						</template>
+						<template v-else>
+							<button
+								v-if="actorName"
+								type="button"
+								class="m-0 inline border-0 bg-transparent p-0 text-lg font-semibold leading-6 text-contrast hover:underline"
+								@click="$emit('open-actor')"
+							>
+								{{ actorName }}
+							</button>
+							<span v-else class="font-semibold text-contrast">Someone</span>
+							<span class="mx-1">{{ inviteActionText }}</span>
+							<template v-if="type === 'server-invite'">
+								<span class="font-semibold text-contrast">{{ entityLabel }}</span
+								>.
+							</template>
+							<template v-else>
+								<span class="inline-flex max-w-full items-center gap-[5px] align-[-4px]">
+									<Avatar
+										:src="entityIconUrl"
+										:alt="entityLabel"
+										size="24px"
+										no-shadow
+										raised
+										:tint-by="entityLabel"
+										class="!rounded-[7px]"
+									/>
+									<span class="min-w-0 truncate font-semibold text-contrast">{{
+										entityLabel
+									}}</span> </span
+								>.
+							</template>
+						</template>
+					</p>
+					<ButtonStyled size="small" type="transparent" circular>
+						<button
+							type="button"
+							class="notification-toast-dismiss"
+							aria-label="Dismiss notification"
+							@click="$emit('dismiss')"
+						>
+							<XIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+				<div class="flex items-center gap-2">
+					<ButtonStyled color="brand">
+						<button @click="$emit('accept')">Accept</button>
+					</ButtonStyled>
+					<ButtonStyled type="outlined">
+						<button @click="$emit('decline')">Decline</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</div>
+		<div v-else class="flex w-full items-start gap-3">
+			<Avatar
+				:src="entityIconUrl"
+				:alt="entityLabel"
+				size="44px"
+				no-shadow
+				raised
+				:tint-by="entityLabel"
+				class="!rounded-xl border border-solid border-surface-5"
+			/>
+			<div class="flex min-w-0 flex-1 flex-col" :class="{ 'gap-2.5': type === 'instance-ready' }">
+				<div class="flex min-w-0 flex-1 items-start gap-1">
+					<div class="flex min-w-0 flex-1 flex-col gap-[3px] text-base leading-5">
+						<p
+							ref="titleRef"
+							v-tooltip="truncatedTooltip(titleRef, entityLabel)"
+							class="m-0 min-w-0 truncate text-lg font-semibold leading-6 text-contrast"
+						>
+							{{ entityLabel }}
+						</p>
+						<p
+							ref="statusRef"
+							v-tooltip="truncatedTooltip(statusRef, statusLine)"
+							class="m-0 min-w-0 truncate font-normal leading-tight text-contrast/85"
+						>
+							{{ statusLine }}
+						</p>
+					</div>
+					<ButtonStyled size="small" type="transparent" circular>
+						<button
+							type="button"
+							class="notification-toast-dismiss"
+							aria-label="Dismiss notification"
+							@click="$emit('dismiss')"
+						>
+							<XIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+				<div v-if="type === 'instance-ready'" class="flex items-center gap-2">
+					<ButtonStyled color="brand">
+						<button @click="$emit('launch')">Launch game</button>
+					</ButtonStyled>
+					<ButtonStyled type="outlined">
+						<button @click="$emit('open-instance')">Instance</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</div>
+		<div
+			v-if="showsBottomProgress"
+			class="notification-bottom-progress-track absolute inset-x-0 bottom-0 h-1 overflow-hidden"
+			role="progressbar"
+			:aria-valuenow="isWaitingProgress ? undefined : progressPercent"
+			aria-valuemin="0"
+			aria-valuemax="100"
+		>
+			<div
+				class="h-full transition-[left,width] duration-200 ease-in-out"
+				:class="[
+					type === 'instance-ready' ? 'bg-surface-5' : 'bg-brand',
+					{ 'notification-bottom-progress--waiting': isWaitingProgress },
+				]"
+				:style="isWaitingProgress ? undefined : { width: `${progressPercent}%` }"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import { truncatedTooltip } from '../../utils/truncate'
+import Avatar from '../base/Avatar.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+
+type NotificationToastType =
+	| 'friend-request'
+	| 'server-invite'
+	| 'instance-invite'
+	| 'instance-download'
+	| 'instance-ready'
+
+const props = withDefaults(
+	defineProps<{
+		type: NotificationToastType
+		actorName?: string | null
+		actorAvatarUrl?: string | null
+		entityName?: string
+		entityIconUrl?: string | null
+		statusText?: string
+		progress?: number
+		waiting?: boolean
+	}>(),
+	{
+		actorName: null,
+		actorAvatarUrl: null,
+		entityName: '',
+		entityIconUrl: null,
+		waiting: false,
+	},
+)
+
+defineEmits<{
+	accept: []
+	decline: []
+	dismiss: []
+	launch: []
+	'open-actor': []
+	'open-instance': []
+}>()
+
+const isInviteNotification = computed(
+	() =>
+		props.type === 'friend-request' ||
+		props.type === 'server-invite' ||
+		props.type === 'instance-invite',
+)
+
+const actorLabel = computed(() => props.actorName || 'Someone')
+const entityLabel = computed(() => props.entityName || '')
+const progressValue = computed(() => Math.max(0, Math.min(1, props.progress ?? 0)))
+const progressPercent = computed(() => Math.round(progressValue.value * 100))
+const isWaitingProgress = computed(() => props.type === 'instance-download' && props.waiting)
+
+const inviteActionText = computed(() => {
+	if (props.type === 'server-invite') {
+		return 'invited you to manage the server'
+	}
+
+	return 'invited you to play the instance'
+})
+
+const resolvedStatusText = computed(() => {
+	if (props.type === 'instance-ready') {
+		return props.statusText ?? 'Installed and ready to play.'
+	}
+
+	return props.statusText ?? ''
+})
+
+const statusLine = computed(() => {
+	if (props.type !== 'instance-download' || props.waiting) {
+		return resolvedStatusText.value
+	}
+
+	const status = resolvedStatusText.value.trim()
+	return status ? `${status} ${progressPercent.value}%` : `${progressPercent.value}%`
+})
+
+const showsBottomProgress = computed(
+	() =>
+		props.type === 'instance-download' ||
+		(props.type === 'instance-ready' && props.progress != null),
+)
+
+const titleRef = ref<HTMLElement | null>(null)
+const statusRef = ref<HTMLElement | null>(null)
+</script>
+
+<style scoped>
+.notification-toast {
+	width: min(420px, calc(100vw - 1.5rem));
+}
+
+.notification-toast-dismiss {
+	--_height: 1.25rem;
+	--_width: 1.25rem;
+	--_padding-x: 0;
+	--_padding-y: 0;
+	--_icon-size: 1.25rem;
+	--_box-shadow: none;
+	--_text: var(--color-base);
+	--_hover-bg: transparent;
+	--_hover-text: var(--color-contrast);
+}
+
+.notification-bottom-progress--waiting {
+	animation: notification-bottom-progress-waiting 1s linear infinite;
+	position: relative;
+	width: 20%;
+}
+
+@keyframes notification-bottom-progress-waiting {
+	0% {
+		left: -20%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
+.notification-bottom-progress-track {
+	background-color: color-mix(in srgb, var(--surface-2) 50%, transparent);
+}
+</style>
diff --git a/packages/ui/src/components/notifications/index.ts b/packages/ui/src/components/notifications/index.ts
new file mode 100644
index 0000000000..a4d46690d2
--- /dev/null
+++ b/packages/ui/src/components/notifications/index.ts
@@ -0,0 +1,2 @@
+export { default as NotificationStack } from './NotificationStack.vue'
+export { default as NotificationToast } from './NotificationToast.vue'
diff --git a/packages/ui/src/components/servers/InstallingBanner.vue b/packages/ui/src/components/servers/InstallingBanner.vue
index 21a90df21d..cf8a901019 100644
--- a/packages/ui/src/components/servers/InstallingBanner.vue
+++ b/packages/ui/src/components/servers/InstallingBanner.vue
@@ -28,7 +28,13 @@
 		</div>
 		<template v-if="contentError" #top-right-actions>
 			<ButtonStyled color="red" type="outlined">
-				<button class="!border" type="button" @click="emit('retry')">
+				<button
+					v-tooltip="retryDisabled ? retryDisabledTooltip : undefined"
+					class="!border"
+					type="button"
+					:disabled="retryDisabled"
+					@click="emit('retry')"
+				>
 					<RotateCounterClockwiseIcon class="size-5" />
 					{{ formatMessage(commonMessages.retryButton) }}
 				</button>
@@ -62,6 +68,8 @@ const props = defineProps<{
 	fallbackPhase?: SyncProgress['phase'] | null
 	contentError?: ContentError | null
 	dismissible?: boolean
+	retryDisabled?: boolean
+	retryDisabledTooltip?: string
 }>()
 
 const emit = defineEmits<{
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index e6c07190c8..fbfe10d460 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -35,10 +35,26 @@
 			</div>
 			<ServerIcon v-else :image="image ?? undefined" :disabled="isDisabled" />
 			<div class="ml-4 flex flex-col gap-1.5">
-				<div class="flex flex-row items-center gap-2">
+				<div class="flex flex-row items-center gap-2.5">
 					<h2 class="m-0 text-xl font-bold text-contrast" :class="{ 'opacity-50': isDisabled }">
 						{{ name }}
 					</h2>
+					<div
+						v-if="owner"
+						v-tooltip="formatMessage(messages.ownerTooltip, { username: owner.username })"
+						class="flex min-w-0 items-center gap-1 rounded-full bg-surface-4 px-2 pr-2.5 py-1 text-sm font-medium text-primary !border !border-surface-5 border-solid"
+						:class="{ 'opacity-50': isDisabled }"
+					>
+						<Avatar
+							:src="owner.avatarUrl"
+							:alt="formatMessage(messages.ownerAvatarAlt, { username: owner.username })"
+							:tint-by="owner.username"
+							size="1.25rem"
+							circle
+							no-shadow
+						/>
+						<span class="max-w-32 truncate">{{ owner.username }}</span>
+					</div>
 					<div
 						v-if="isConfiguring && noticeType !== 'cancelled' && noticeType !== 'setToCancel'"
 						class="flex min-w-0 items-center gap-2 truncate text-sm font-medium text-brand rounded-full bg-brand-highlight border border-solid border-brand px-2.5 h-[28px]"
@@ -262,6 +278,7 @@ import { injectModrinthClient } from '../../providers/api-client'
 import Avatar from '../base/Avatar.vue'
 import IntlFormatted from '../base/IntlFormatted.vue'
 import ServersSpecs from '../billing/ServersSpecs.vue'
+import type { ServerListingOwner } from './access/types'
 import ServerIcon from './icons/ServerIcon.vue'
 import ServerInfoLabels from './labels/ServerInfoLabels.vue'
 
@@ -281,6 +298,14 @@ const messages = defineMessages({
 		id: 'servers.listing.using-project-label',
 		defaultMessage: 'Using {projectTitle}',
 	},
+	ownerTooltip: {
+		id: 'servers.listing.owner-tooltip',
+		defaultMessage: 'Owned by {username}',
+	},
+	ownerAvatarAlt: {
+		id: 'servers.listing.owner-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
 	provisioningNotice: {
 		id: 'servers.listing.notice.provisioning',
 		defaultMessage: 'Please wait while we set up your server. This can take up to 10 minutes.',
@@ -402,6 +427,7 @@ type ServerListingProps = {
 	cancellationDate?: string | Date | null
 	onResubscribe?: (() => void) | null
 	onDownloadBackup?: (() => void) | null
+	owner?: ServerListingOwner
 }
 
 const props = defineProps<ServerListingProps>()
diff --git a/packages/ui/src/components/servers/ServerManageStats.vue b/packages/ui/src/components/servers/ServerManageStats.vue
index b817cab303..ef3f54d31e 100644
--- a/packages/ui/src/components/servers/ServerManageStats.vue
+++ b/packages/ui/src/components/servers/ServerManageStats.vue
@@ -60,13 +60,13 @@
 
 <script setup lang="ts">
 import { CpuIcon, DatabaseIcon, FolderOpenIcon } from '@modrinth/assets'
-import type { Stats } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
 import { computed, defineAsyncComponent, onMounted, ref, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import { useFormatBytes } from '#ui/composables'
 import { injectModrinthServerContext, injectPageContext } from '#ui/providers'
+import type { ServerStats } from '#ui/providers/server-context'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
@@ -82,7 +82,7 @@ const { featureFlags } = injectPageContext()
 
 const props = withDefaults(
 	defineProps<{
-		data?: Stats
+		data?: ServerStats
 		loading?: boolean
 		showMemoryAsBytes?: boolean
 	}>(),
diff --git a/packages/ui/src/components/servers/ServerSetupModal.vue b/packages/ui/src/components/servers/ServerSetupModal.vue
index 3492954f93..bdaba6afa2 100644
--- a/packages/ui/src/components/servers/ServerSetupModal.vue
+++ b/packages/ui/src/components/servers/ServerSetupModal.vue
@@ -11,6 +11,8 @@
 		:fade="props.initialSetup ? undefined : 'danger'"
 		:search-modpacks="searchModpacks"
 		:get-project-versions="getProjectVersions"
+		:finish-disabled="!canCompleteSetup"
+		:finish-disabled-tooltip="!canCompleteSetup ? permissionDeniedMessage : undefined"
 		@create="onFlowComplete"
 		@hide="$emit('hide')"
 		@browse-modpacks="$emit('browse-modpacks')"
@@ -24,6 +26,7 @@ import type { Archon, ModrinthApiError } from '@modrinth/api-client'
 import { computed, useTemplateRef } from 'vue'
 
 import { useDebugLogger } from '#ui/composables/debug-logger'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { injectModrinthClient } from '../../providers/api-client'
@@ -60,6 +63,7 @@ const serverContext = injectModrinthServerContext()
 const { addNotification } = injectNotificationManager()
 
 const serverLoaders = ['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']
+const { canSetup, canResetServer, permissionDeniedMessage } = useServerPermissions()
 
 async function searchModpacks(query: string, limit: number = 10) {
 	return client.labrinth.projects_v2.search({
@@ -97,12 +101,20 @@ const initialLoader = computed(() => {
 })
 
 const initialGameVersion = computed(() => serverContext.server.value.mc_version ?? undefined)
+const canCompleteSetup = computed(() =>
+	props.initialSetup ? canSetup.value : canResetServer.value,
+)
 
 const creationFlowRef = useTemplateRef<InstanceType<typeof CreationFlowModal>>('creationFlowRef')
 const uploadProgressModal =
 	useTemplateRef<InstanceType<typeof UploadProgressModal>>('uploadProgressModal')
 
 async function onFlowComplete(ctx: CreationFlowContextValue) {
+	if (!canCompleteSetup.value) {
+		ctx.loading.value = false
+		return
+	}
+
 	debug('onFlowComplete:', {
 		setupType: ctx.setupType.value,
 		hasModpackFile: !!ctx.modpackFile.value,
@@ -207,6 +219,8 @@ function emitReinstall(args?: { loader: string; lVersion: string; mVersion: stri
 }
 
 function show() {
+	if (!canCompleteSetup.value) return
+
 	void creationFlowRef.value?.ctx?.fetchLoaderMetadata('paper')
 	void creationFlowRef.value?.ctx?.fetchLoaderMetadata('purpur')
 	creationFlowRef.value?.show()
diff --git a/packages/ui/src/components/servers/access/AccessTable.vue b/packages/ui/src/components/servers/access/AccessTable.vue
new file mode 100644
index 0000000000..2d0a818e37
--- /dev/null
+++ b/packages/ui/src/components/servers/access/AccessTable.vue
@@ -0,0 +1,625 @@
+<template>
+	<Table
+		v-if="members.length > 0"
+		v-model:sort-column="sortColumn"
+		v-model:sort-direction="sortDirection"
+		class="hidden sm:block"
+		:columns="columns"
+		:data="tableMembers"
+		row-key="id"
+		table-min-width="42rem"
+	>
+		<template #cell-user="{ row: member }">
+			<AutoLink
+				:to="userProfilePath(member.user.username)"
+				class="inline-flex max-w-full min-w-0 items-center gap-2"
+				:class="userProfilePath(member.user.username) ? 'text-primary hover:underline' : ''"
+			>
+				<Avatar
+					:src="member.user.avatarUrl"
+					:alt="formatMessage(messages.userAvatarAlt, { username: member.user.username })"
+					:tint-by="member.user.username"
+					size="22px"
+					circle
+					no-shadow
+				/>
+				<span class="min-w-0 truncate font-medium">
+					{{ member.user.username }}
+				</span>
+			</AutoLink>
+		</template>
+
+		<template #cell-role="{ row: member }">
+			<span
+				v-if="member.isOwner"
+				class="inline-flex h-7 items-center rounded-full border border-solid px-2.5 py-1 text-sm font-semibold leading-none"
+				:class="roleClasses(member.role)"
+			>
+				{{ formatRole(member.role) }}
+			</span>
+			<div v-else v-tooltip="accessManagementTooltip" class="w-fit">
+				<Combobox
+					:model-value="member.role"
+					:options="roleComboboxOptions"
+					:display-value="formatRole(member.role)"
+					:disabled="!canManageUsers"
+					:trigger-class="`${roleTriggerClass(member.role)} !inline-flex !w-auto !h-7 !min-h-0 !rounded-full !border !border-solid !px-2.5 !py-1 gap-1 !text-sm !font-semibold !leading-5`"
+					dropdown-class="!rounded-[24px] !bg-surface-3"
+					dropdown-min-width="18rem"
+					force-direction="down"
+					@update:model-value="(role) => handleUpdateRole(member, role)"
+				>
+					<template #selected>
+						<span class="font-semibold leading-5" :class="roleTextClass(member.role)">
+							{{ formatRole(member.role) }}
+						</span>
+					</template>
+				</Combobox>
+			</div>
+		</template>
+
+		<template #cell-joined="{ row: member }">
+			<span
+				v-if="member.pending"
+				class="inline-flex h-7 items-center rounded-full border border-surface-5 border-solid bg-surface-4 px-2.5 py-1 text-sm font-semibold text-secondary"
+			>
+				{{ formatMessage(messages.pendingLabel) }}
+			</span>
+			<span v-else-if="member.joinedAt" v-tooltip="formatDate(member.joinedAt)">
+				{{ formatRelativeTime(member.joinedAt) }}
+			</span>
+			<span v-else>{{ formatMessage(messages.unknownJoinedDate) }}</span>
+		</template>
+
+		<template #cell-actions="{ row: member }">
+			<div v-if="!member.isOwner" class="flex items-center justify-end gap-1">
+				<ButtonStyled v-if="member.pending" circular type="transparent">
+					<button
+						v-tooltip="resendInviteTooltip(member)"
+						:aria-label="resendInviteLabel(member)"
+						:disabled="resendInviteDisabled(member)"
+						class="text-secondary hover:!filter-none hover:text-contrast focus-visible:!filter-none active:!scale-100 active:!filter-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-secondary"
+						@click="handleResendInvite(member)"
+					>
+						<SendIcon aria-hidden="true" />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular type="transparent">
+					<button
+						v-tooltip="memberAccessActionTooltip(member)"
+						:aria-label="memberAccessActionLabel(member)"
+						:disabled="!canManageUsers"
+						class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none active:!scale-100 active:!filter-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-secondary"
+						@click="member.pending ? handleCancelInvite(member) : handleRemoveMember(member)"
+					>
+						<XIcon v-if="member.pending" aria-hidden="true" />
+						<UserXIcon v-else aria-hidden="true" />
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</Table>
+
+	<div
+		v-if="members.length > 0"
+		class="overflow-hidden rounded-2xl border border-solid border-surface-5 sm:hidden"
+	>
+		<div
+			class="grid min-h-14 grid-cols-[minmax(0,1.35fr)_7.75rem_minmax(6rem,0.8fr)_4rem] bg-surface-3"
+		>
+			<div class="flex items-center pl-4 font-semibold text-secondary">
+				<button
+					type="button"
+					class="flex min-w-0 cursor-pointer items-center gap-1 border-none bg-transparent p-0 font-semibold transition-colors hover:text-contrast"
+					:class="sortColumn === 'user' ? 'text-contrast' : 'text-secondary'"
+					@click="toggleSort('user')"
+				>
+					<span class="min-w-0 truncate">{{ formatMessage(messages.userColumn) }}</span>
+					<component :is="sortIcon('user')" v-if="sortIcon('user')" class="size-4" />
+				</button>
+			</div>
+			<div class="flex items-center font-semibold text-secondary">
+				<button
+					type="button"
+					class="flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 font-semibold transition-colors hover:text-contrast"
+					:class="sortColumn === 'role' ? 'text-contrast' : 'text-secondary'"
+					@click="toggleSort('role')"
+				>
+					{{ formatMessage(messages.roleColumn) }}
+					<component :is="sortIcon('role')" v-if="sortIcon('role')" class="size-4" />
+				</button>
+			</div>
+			<div class="flex items-center justify-end font-semibold text-secondary">
+				<button
+					type="button"
+					class="flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 font-semibold transition-colors hover:text-contrast"
+					:class="sortColumn === 'joined' ? 'text-contrast' : 'text-secondary'"
+					@click="toggleSort('joined')"
+				>
+					{{ formatMessage(messages.joinedColumn) }}
+					<component :is="sortIcon('joined')" v-if="sortIcon('joined')" class="size-4" />
+				</button>
+			</div>
+			<div class="flex items-center justify-end pr-4 font-semibold text-secondary">
+				<span class="sr-only">{{ formatMessage(messages.actionsColumn) }}</span>
+			</div>
+		</div>
+		<div
+			v-for="(member, index) in sortedMembers"
+			:key="member.id"
+			class="grid min-h-16 grid-cols-[minmax(0,1.35fr)_7.75rem_minmax(6rem,0.8fr)_4rem] items-center border-0 border-t border-solid border-surface-5"
+			:class="index % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
+		>
+			<div class="flex min-w-0 items-center pl-4">
+				<AutoLink
+					v-tooltip="member.user.username"
+					:to="userProfilePath(member.user.username)"
+					class="inline-flex min-w-0 items-center gap-2"
+					:class="userProfilePath(member.user.username) ? 'text-primary hover:underline' : ''"
+				>
+					<Avatar
+						:src="member.user.avatarUrl"
+						:alt="formatMessage(messages.userAvatarAlt, { username: member.user.username })"
+						:tint-by="member.user.username"
+						size="24px"
+						circle
+						no-shadow
+					/>
+					<span class="min-w-0 truncate font-medium">
+						{{ member.user.username }}
+					</span>
+				</AutoLink>
+			</div>
+			<div class="min-w-0 py-3 pr-2">
+				<span
+					v-if="member.isOwner"
+					class="inline-flex h-7 max-w-full items-center truncate rounded-full border border-solid px-2.5 py-1 text-sm font-semibold leading-none"
+					:class="roleClasses(member.role)"
+				>
+					{{ formatRole(member.role) }}
+				</span>
+				<div v-else v-tooltip="accessManagementTooltip" class="min-w-0">
+					<Combobox
+						:model-value="member.role"
+						:options="roleComboboxOptions"
+						:display-value="formatRole(member.role)"
+						:disabled="!canManageUsers"
+						:trigger-class="
+							roleTriggerClass(member.role) +
+							` !inline-flex !w-auto !max-w-full !h-7 !min-h-0 !rounded-full !border !border-solid !px-2.5 !py-1 gap-1 !text-sm !font-semibold !leading-5`
+						"
+						dropdown-class="!rounded-[24px] !bg-surface-3"
+						dropdown-min-width="18rem"
+						force-direction="down"
+						@update:model-value="(role) => handleUpdateRole(member, role)"
+					>
+						<template #selected>
+							<span
+								class="min-w-0 truncate font-semibold leading-5"
+								:class="roleTextClass(member.role)"
+							>
+								{{ formatRole(member.role) }}
+							</span>
+						</template>
+					</Combobox>
+				</div>
+			</div>
+			<div class="min-w-0 py-3 pr-2 text-right text-secondary">
+				<span
+					v-if="member.pending"
+					class="inline-flex h-7 max-w-full items-center rounded-full border border-surface-5 border-solid bg-surface-4 px-2.5 py-1 text-sm font-semibold text-secondary"
+				>
+					{{ formatMessage(messages.pendingLabel) }}
+				</span>
+				<span
+					v-else-if="member.joinedAt"
+					v-tooltip="formatDate(member.joinedAt)"
+					class="inline-block max-w-full truncate"
+				>
+					{{ formatRelativeTime(member.joinedAt) }}
+				</span>
+				<span v-else>{{ formatMessage(messages.unknownJoinedDate) }}</span>
+			</div>
+			<div class="flex min-w-0 items-center justify-end pr-4">
+				<ButtonStyled v-if="!member.isOwner" circular type="transparent">
+					<TeleportOverflowMenu
+						:options="memberActionOptions(member)"
+						btn-class="hover:!filter-none focus-visible:!filter-none active:!scale-100 active:!filter-none"
+					>
+						<MoreVerticalIcon aria-hidden="true" class="size-5" />
+						<span class="sr-only">
+							{{ formatMessage(messages.memberActionsLabel, { username: member.user.username }) }}
+						</span>
+						<template #resend-invite>
+							<SendIcon aria-hidden="true" />
+							{{ resendInviteLabel(member) }}
+						</template>
+						<template #cancel-invite>
+							<XIcon aria-hidden="true" />
+							{{ formatMessage(messages.cancelInvite) }}
+						</template>
+						<template #remove-user>
+							<UserXIcon aria-hidden="true" />
+							{{ formatMessage(messages.removeUser) }}
+						</template>
+					</TeleportOverflowMenu>
+				</ButtonStyled>
+			</div>
+		</div>
+	</div>
+
+	<div v-else class="overflow-hidden rounded-2xl border border-solid border-surface-5">
+		<div
+			class="grid min-h-14 grid-cols-[3.75rem_7.25rem_minmax(0,1fr)_2.75rem] bg-surface-3 sm:h-14 sm:grid-cols-[32%_28%_28%_12%]"
+		>
+			<div class="flex items-center pl-4 font-semibold text-secondary">
+				{{ formatMessage(messages.userColumn) }}
+			</div>
+			<div class="flex items-center font-semibold text-secondary">
+				{{ formatMessage(messages.roleColumn) }}
+			</div>
+			<div class="flex items-center font-semibold text-secondary">
+				{{ formatMessage(messages.joinedColumn) }}
+			</div>
+			<div class="flex items-center justify-end pr-4 font-semibold text-secondary">
+				{{ formatMessage(messages.actionsColumn) }}
+			</div>
+		</div>
+		<div
+			class="border-0 border-t border-solid border-surface-5 bg-surface-2 px-4 py-8 text-center text-secondary"
+		>
+			{{ formatMessage(messages.emptyState) }}
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	ChevronDownIcon,
+	ChevronUpIcon,
+	MoreVerticalIcon,
+	SendIcon,
+	UserXIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { type Component, computed, onMounted, onUnmounted, ref } from 'vue'
+
+import { useFormatDateTime, useRelativeTime } from '../../../composables'
+import { defineMessages, useVIntl } from '../../../composables/i18n'
+import { commonMessages } from '../../../utils/common-messages'
+import AutoLink from '../../base/AutoLink.vue'
+import Avatar from '../../base/Avatar.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
+import Table, { type SortDirection, type TableColumn } from '../../base/Table.vue'
+import TeleportOverflowMenu from '../../base/TeleportOverflowMenu.vue'
+import type { ServerAccessMember, ServerAccessRole, ServerAccessRoleOption } from './types'
+
+const props = withDefaults(
+	defineProps<{
+		members: ServerAccessMember[]
+		roles: ServerAccessRoleOption[]
+		canManageUsers?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		canManageUsers: true,
+	},
+)
+
+const emit = defineEmits<{
+	updateRole: [member: ServerAccessMember, role: ServerAccessRole]
+	resendInvite: [member: ServerAccessMember]
+	cancelInvite: [member: ServerAccessMember]
+	removeMember: [member: ServerAccessMember]
+}>()
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const formatDate = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+
+const messages = defineMessages({
+	userColumn: {
+		id: 'servers.access-table.column.user',
+		defaultMessage: 'User',
+	},
+	roleColumn: {
+		id: 'servers.access-table.column.role',
+		defaultMessage: 'Role',
+	},
+	joinedColumn: {
+		id: 'servers.access-table.column.joined',
+		defaultMessage: 'Joined',
+	},
+	actionsColumn: {
+		id: 'servers.access-table.column.actions',
+		defaultMessage: 'Actions',
+	},
+	memberActionsLabel: {
+		id: 'servers.access-table.member-actions-label',
+		defaultMessage: 'Actions for {username}',
+	},
+	pendingLabel: {
+		id: 'servers.access-table.pending',
+		defaultMessage: 'Pending',
+	},
+	unknownJoinedDate: {
+		id: 'servers.access-table.unknown-joined-date',
+		defaultMessage: '—',
+	},
+	resendInvite: {
+		id: 'servers.access-table.action.resend-invite',
+		defaultMessage: 'Resend invite',
+	},
+	cancelInvite: {
+		id: 'servers.access-table.action.cancel-invite',
+		defaultMessage: 'Cancel invite',
+	},
+	removeUser: {
+		id: 'servers.access-table.action.remove-user',
+		defaultMessage: 'Remove user',
+	},
+	emptyState: {
+		id: 'servers.access-table.empty',
+		defaultMessage: 'No users match your filters.',
+	},
+	userAvatarAlt: {
+		id: 'servers.access-table.user-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
+	ownerRole: {
+		id: 'servers.access-role.owner',
+		defaultMessage: 'Owner',
+	},
+	editorRole: {
+		id: 'servers.access-role.editor',
+		defaultMessage: 'Editor',
+	},
+	viewerRole: {
+		id: 'servers.access-role.viewer',
+		defaultMessage: 'Limited',
+	},
+	resendInviteCooldown: {
+		id: 'servers.access-table.action.resend-invite-cooldown',
+		defaultMessage: 'Resend in {seconds}s',
+	},
+})
+
+type AccessTableColumn = 'user' | 'role' | 'joined' | 'actions'
+type AccessTableSortableColumn = Exclude<AccessTableColumn, 'actions'>
+type AccessTableRow = ServerAccessMember & Record<string, unknown>
+type OverflowMenuOption = {
+	id: string
+	icon?: Component
+	action: () => void
+	shown?: boolean
+	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+	disabled?: boolean
+	tooltip?: string
+}
+
+const columns = computed<TableColumn<AccessTableColumn>[]>(() => [
+	{ key: 'user', label: formatMessage(messages.userColumn), width: '32%', enableSorting: true },
+	{ key: 'role', label: formatMessage(messages.roleColumn), width: '28%', enableSorting: true },
+	{ key: 'joined', label: formatMessage(messages.joinedColumn), enableSorting: true },
+	{ key: 'actions', label: formatMessage(messages.actionsColumn), align: 'right', width: '7rem' },
+])
+
+const sortColumn = ref<string | undefined>('role')
+const sortDirection = ref<SortDirection>('asc')
+const now = ref(Date.now())
+let nowInterval: ReturnType<typeof setInterval> | null = null
+const canManageUsers = computed(() => props.canManageUsers)
+const permissionDeniedMessage = computed(
+	() => props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction),
+)
+const accessManagementTooltip = computed(() =>
+	canManageUsers.value ? undefined : permissionDeniedMessage.value,
+)
+
+const roleSortOrder: Record<ServerAccessRole, number> = {
+	owner: 0,
+	editor: 1,
+	viewer: 2,
+}
+
+const sortedMembers = computed(() => {
+	const direction = sortDirection.value === 'asc' ? 1 : -1
+	const column = normalizeSortColumn(sortColumn.value)
+
+	return [...props.members].sort((a, b) => {
+		const compared = compareMembers(a, b, column)
+		if (compared !== 0) return compared * direction
+
+		return a.user.username.localeCompare(b.user.username)
+	})
+})
+
+const tableMembers = computed<AccessTableRow[]>(() => sortedMembers.value as AccessTableRow[])
+
+onMounted(() => {
+	nowInterval = setInterval(() => {
+		now.value = Date.now()
+	}, 1000)
+})
+
+onUnmounted(() => {
+	if (nowInterval) clearInterval(nowInterval)
+})
+
+function formatRole(role: ServerAccessRole): string {
+	switch (role) {
+		case 'owner':
+			return formatMessage(messages.ownerRole)
+		case 'editor':
+			return formatMessage(messages.editorRole)
+		case 'viewer':
+			return formatMessage(messages.viewerRole)
+	}
+}
+
+const roleComboboxOptions = computed<ComboboxOption<ServerAccessRole>[]>(() =>
+	props.roles
+		.filter((role) => role.value !== 'owner')
+		.map((role) => ({
+			value: role.value,
+			label: role.label,
+			subLabel: role.description,
+		})),
+)
+
+function compareMembers(
+	a: ServerAccessMember,
+	b: ServerAccessMember,
+	column: AccessTableSortableColumn,
+): number {
+	switch (column) {
+		case 'user':
+			return a.user.username.localeCompare(b.user.username)
+		case 'role':
+			return roleSortOrder[a.role] - roleSortOrder[b.role]
+		case 'joined':
+			return joinedTimestamp(a) - joinedTimestamp(b)
+	}
+}
+
+function normalizeSortColumn(column: string | undefined): AccessTableSortableColumn {
+	return column === 'user' || column === 'role' || column === 'joined' ? column : 'joined'
+}
+
+function joinedTimestamp(member: ServerAccessMember): number {
+	if (member.pending) return Number.NEGATIVE_INFINITY
+	return member.joinedAt ? new Date(member.joinedAt).getTime() : 0
+}
+
+function toggleSort(column: AccessTableSortableColumn) {
+	if (sortColumn.value === column) {
+		sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+		return
+	}
+
+	sortColumn.value = column
+	sortDirection.value = 'asc'
+}
+
+function sortIcon(column: AccessTableSortableColumn): Component | null {
+	if (sortColumn.value !== column) return null
+	return sortDirection.value === 'asc' ? ChevronUpIcon : ChevronDownIcon
+}
+
+function roleClasses(role: ServerAccessRole): string {
+	switch (role) {
+		case 'owner':
+			return 'border-orange !bg-highlight-orange !text-orange'
+		case 'editor':
+			return 'border-green !bg-highlight-green !text-brand'
+		case 'viewer':
+			return 'border-blue !bg-highlight-blue !text-blue'
+	}
+}
+
+function roleTextClass(role: ServerAccessRole): string {
+	switch (role) {
+		case 'owner':
+			return '!text-orange'
+		case 'editor':
+			return '!text-green'
+		case 'viewer':
+			return '!text-blue'
+	}
+}
+
+function roleTriggerClass(role: ServerAccessRole): string {
+	return roleClasses(role)
+}
+
+function userProfilePath(username: string): string | undefined {
+	if (!username || username.includes('@')) return undefined
+	return `/user/${encodeURIComponent(username)}`
+}
+
+function resendInviteCooldownSeconds(member: ServerAccessMember): number {
+	const availableAt = member.inviteResendAvailableAt
+		? new Date(member.inviteResendAvailableAt).getTime()
+		: 0
+	return Math.max(0, Math.ceil((availableAt - now.value) / 1000))
+}
+
+function resendInviteCooldownDisabled(member: ServerAccessMember): boolean {
+	return resendInviteCooldownSeconds(member) > 0
+}
+
+function resendInviteDisabled(member: ServerAccessMember): boolean {
+	return !canManageUsers.value || resendInviteCooldownDisabled(member)
+}
+
+function resendInviteLabel(member: ServerAccessMember): string {
+	const seconds = resendInviteCooldownSeconds(member)
+	return seconds > 0
+		? formatMessage(messages.resendInviteCooldown, { seconds })
+		: formatMessage(messages.resendInvite)
+}
+
+function resendInviteTooltip(member: ServerAccessMember): string {
+	return canManageUsers.value ? resendInviteLabel(member) : permissionDeniedMessage.value
+}
+
+function handleResendInvite(member: ServerAccessMember) {
+	if (resendInviteDisabled(member)) return
+	emit('resendInvite', member)
+}
+
+function memberAccessActionLabel(member: ServerAccessMember): string {
+	return member.pending ? formatMessage(messages.cancelInvite) : formatMessage(messages.removeUser)
+}
+
+function memberAccessActionTooltip(member: ServerAccessMember): string {
+	return canManageUsers.value ? memberAccessActionLabel(member) : permissionDeniedMessage.value
+}
+
+function handleUpdateRole(member: ServerAccessMember, role: ServerAccessRole) {
+	if (!canManageUsers.value) return
+	emit('updateRole', member, role)
+}
+
+function handleCancelInvite(member: ServerAccessMember) {
+	if (!canManageUsers.value) return
+	emit('cancelInvite', member)
+}
+
+function handleRemoveMember(member: ServerAccessMember) {
+	if (!canManageUsers.value) return
+	emit('removeMember', member)
+}
+
+function memberActionOptions(member: ServerAccessMember): OverflowMenuOption[] {
+	return [
+		{
+			id: 'resend-invite',
+			icon: SendIcon,
+			action: () => handleResendInvite(member),
+			shown: member.pending,
+			disabled: resendInviteDisabled(member),
+			tooltip: resendInviteTooltip(member),
+		},
+		{
+			id: 'cancel-invite',
+			icon: XIcon,
+			action: () => handleCancelInvite(member),
+			color: 'red',
+			shown: member.pending,
+			disabled: !canManageUsers.value,
+			tooltip: memberAccessActionTooltip(member),
+		},
+		{
+			id: 'remove-user',
+			icon: UserXIcon,
+			action: () => handleRemoveMember(member),
+			color: 'red',
+			shown: !member.pending,
+			disabled: !canManageUsers.value,
+			tooltip: memberAccessActionTooltip(member),
+		},
+	]
+}
+</script>
diff --git a/packages/ui/src/components/servers/access/AuditLogEventCell.vue b/packages/ui/src/components/servers/access/AuditLogEventCell.vue
new file mode 100644
index 0000000000..e04aef1e28
--- /dev/null
+++ b/packages/ui/src/components/servers/access/AuditLogEventCell.vue
@@ -0,0 +1,13 @@
+<template>
+	<div class="audit-log-table-event min-w-0 truncate">
+		<component :is="event.component" v-bind="event.props" class="audit-log-table-event-component" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { ParsedAuditEvent } from './events/types'
+
+defineProps<{
+	event: ParsedAuditEvent
+}>()
+</script>
diff --git a/packages/ui/src/components/servers/access/AuditLogTable.vue b/packages/ui/src/components/servers/access/AuditLogTable.vue
new file mode 100644
index 0000000000..65c2d8016c
--- /dev/null
+++ b/packages/ui/src/components/servers/access/AuditLogTable.vue
@@ -0,0 +1,706 @@
+<template>
+	<div class="@container flex flex-col gap-4">
+		<div class="flex min-w-0 flex-col items-start gap-3 @[640px]:flex-row @[640px]:items-center">
+			<TimeFramePicker
+				v-model:mode="timeframeMode"
+				v-model:preset="timeframePreset"
+				v-model:last-amount="timeframeLastAmount"
+				v-model:last-unit="timeframeLastUnit"
+				v-model:custom-start-date="timeframeCustomStartDate"
+				v-model:custom-end-date="timeframeCustomEndDate"
+				:class="timeframePickerClass"
+				:trigger-class="timeframePickerTriggerClass"
+			/>
+			<template v-if="slots.filters">
+				<div class="hidden h-8 w-[1px] shrink-0 bg-surface-5 @[640px]:ml-1 @[640px]:block"></div>
+				<div class="flex min-w-0 flex-wrap items-center gap-2">
+					<slot name="filters"></slot>
+				</div>
+			</template>
+		</div>
+
+		<div class="audit-log-content-frame relative overflow-hidden" :style="contentFrameStyle">
+			<div ref="contentBody" class="min-w-0">
+				<Table
+					v-if="filteredEntries.length > 0"
+					v-model:sort-column="sortColumn"
+					v-model:sort-direction="sortDirection"
+					class="audit-log-table hidden @[800px]:block"
+					:columns="columns"
+					:data="tableEntries"
+					row-key="id"
+					:row-transition-name="rowTransitionName"
+				>
+					<template #header-world="{ column }">
+						<span class="inline-flex min-w-0 max-w-full items-center gap-1 font-semibold">
+							<span class="min-w-0 truncate">{{ column.label }}</span>
+							<Tooltip
+								theme="dismissable-prompt"
+								class="inline-flex shrink-0"
+								:triggers="['hover', 'focus']"
+								:popper-triggers="['hover', 'focus']"
+								popper-class="v-popper--interactive"
+								placement="top"
+								:delay="{ show: 200, hide: 100 }"
+								no-auto-focus
+							>
+								<button
+									type="button"
+									:aria-label="formatMessage(messages.instanceTooltipTitle)"
+									class="inline-flex cursor-help items-center justify-center border-0 bg-transparent p-0 text-secondary transition-colors hover:text-contrast"
+								>
+									<UnknownIcon class="size-4" aria-hidden="true" />
+								</button>
+								<template #popper>
+									<div class="grid !w-64 gap-1">
+										<h3 class="m-0 whitespace-nowrap text-base w-full font-bold text-contrast">
+											{{ formatMessage(messages.instanceTooltipTitle) }}
+										</h3>
+										<p
+											class="m-0 text-wrap text-sm w-full font-medium leading-tight text-secondary"
+										>
+											{{ formatMessage(messages.instanceTooltipDescription) }}
+										</p>
+									</div>
+								</template>
+							</Tooltip>
+						</span>
+					</template>
+
+					<template #cell-user="{ row: entry }">
+						<AutoLink
+							v-tooltip="actorName(entry)"
+							:to="actorProfilePath(entry)"
+							class="flex min-w-0 items-center gap-2 whitespace-nowrap"
+							:class="actorProfilePath(entry) ? 'text-primary hover:underline' : ''"
+						>
+							<Avatar
+								:src="
+									entry.actor.id === 'support'
+										? IntercomBubbleIcon
+										: (entry.actor.avatarUrl ?? undefined)
+								"
+								:alt="formatMessage(messages.userAvatarAlt, { username: actorName(entry) })"
+								:tint-by="entry.actor.username"
+								size="22px"
+								circle
+								no-shadow
+							/>
+							<span
+								class="min-w-0 truncate font-medium"
+								:class="entry.actor.id === 'support' ? 'text-blue' : ''"
+							>
+								{{ actorName(entry) }}
+							</span>
+						</AutoLink>
+					</template>
+
+					<template #cell-event="{ row: entry }">
+						<AuditLogEventCell :event="entry.event" />
+					</template>
+
+					<template #cell-world="{ row: entry }">
+						<span
+							v-tooltip="entry.world?.name"
+							class="block min-w-0 truncate whitespace-nowrap"
+							:class="entry.world ? 'text-primary' : 'text-secondary'"
+						>
+							{{ entry.world?.name ?? '—' }}
+						</span>
+					</template>
+
+					<template #cell-time="{ row: entry }">
+						<span
+							v-tooltip="formatDate(entry.timestamp)"
+							class="inline-block whitespace-nowrap align-middle leading-6"
+						>
+							{{ formatRelativeTime(entry.timestamp) }}
+						</span>
+					</template>
+				</Table>
+
+				<TransitionGroup
+					v-if="filteredEntries.length > 0"
+					name="audit-log-card"
+					tag="div"
+					class="flex flex-col gap-3 @[800px]:hidden"
+				>
+					<div
+						v-for="entry in filteredEntries"
+						:key="entry.id"
+						class="flex min-w-0 flex-col gap-3 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-4"
+					>
+						<AutoLink
+							v-tooltip="actorName(entry)"
+							:to="actorProfilePath(entry)"
+							class="inline-flex min-w-0 items-center gap-2 self-start"
+							:class="actorProfilePath(entry) ? 'text-primary hover:underline' : 'text-primary'"
+						>
+							<Avatar
+								:src="actorAvatarSrc(entry)"
+								:alt="formatMessage(messages.userAvatarAlt, { username: actorName(entry) })"
+								:tint-by="entry.actor.username"
+								size="24px"
+								circle
+								no-shadow
+							/>
+							<span
+								class="min-w-0 truncate font-medium"
+								:class="entry.actor.id === 'support' ? 'text-blue' : ''"
+							>
+								{{ actorName(entry) }}
+							</span>
+						</AutoLink>
+						<div class="min-w-0">
+							<component :is="entry.event.component" v-bind="entry.event.props" />
+						</div>
+						<div class="flex min-w-0 items-center gap-1 text-sm text-secondary">
+							<span v-if="showWorldColumn" v-tooltip="entry.world?.name" class="min-w-0 truncate">
+								{{ entry.world?.name ?? formatMessage(messages.serverScope) }}
+							</span>
+							<BulletDivider v-if="showWorldColumn" class="shrink-0" />
+							<span v-tooltip="formatDate(entry.timestamp)" class="shrink-0">
+								{{ formatRelativeTime(entry.timestamp) }}
+							</span>
+						</div>
+					</div>
+				</TransitionGroup>
+
+				<div v-else class="overflow-hidden rounded-2xl border border-solid border-surface-5">
+					<div
+						class="hidden min-h-14 bg-surface-3 @[800px]:grid @[800px]:h-14"
+						:class="
+							showWorldColumn
+								? '@[800px]:grid-cols-[18%_52%_20%_10%]'
+								: '@[800px]:grid-cols-[26%_58%_16%]'
+						"
+					>
+						<div class="hidden items-center pl-4 pr-2 font-semibold text-secondary @[800px]:flex">
+							{{ formatMessage(messages.userColumn) }}
+						</div>
+						<div class="hidden items-center px-2 font-semibold text-secondary @[800px]:flex">
+							{{ formatMessage(messages.eventColumn) }}
+						</div>
+						<div
+							v-if="showWorldColumn"
+							class="hidden items-center px-2 font-semibold text-secondary @[800px]:flex"
+						>
+							<span class="inline-flex min-w-0 max-w-full items-center gap-1 font-semibold">
+								<span class="min-w-0 truncate">{{ formatMessage(messages.worldColumn) }}</span>
+								<Tooltip
+									theme="dismissable-prompt"
+									class="inline-flex shrink-0"
+									:triggers="['hover', 'focus']"
+									:popper-triggers="['hover', 'focus']"
+									popper-class="v-popper--interactive"
+									placement="top"
+									:delay="{ show: 200, hide: 100 }"
+									no-auto-focus
+								>
+									<button
+										type="button"
+										:aria-label="formatMessage(messages.instanceTooltipTitle)"
+										class="inline-flex cursor-help items-center justify-center border-0 bg-transparent p-0 text-secondary transition-colors hover:text-contrast"
+									>
+										<UnknownIcon class="size-4" aria-hidden="true" />
+									</button>
+									<template #popper>
+										<div class="grid !w-64 gap-1">
+											<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
+												{{ formatMessage(messages.instanceTooltipTitle) }}
+											</h3>
+											<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
+												{{ formatMessage(messages.instanceTooltipDescription) }}
+											</p>
+										</div>
+									</template>
+								</Tooltip>
+							</span>
+						</div>
+						<div
+							class="hidden items-center justify-end pl-2 pr-4 font-semibold text-secondary @[800px]:flex"
+						>
+							{{ formatMessage(messages.timeColumn) }}
+						</div>
+					</div>
+					<div
+						class="border-0 border-solid border-surface-5 bg-surface-2 px-4 py-8 text-center text-secondary @[800px]:border-t"
+					>
+						{{ formatMessage(emptyStateMessage) }}
+					</div>
+				</div>
+			</div>
+
+			<Transition name="audit-log-loading-fade">
+				<div
+					v-if="loading"
+					class="pointer-events-none absolute bottom-px left-px right-px top-0 z-20 animate-audit-log-bpulse rounded-[15px] bg-surface-3 @[800px]:top-[57px] @[800px]:rounded-t-none"
+					aria-hidden="true"
+				/>
+			</Transition>
+		</div>
+
+		<div
+			v-if="loadingMore"
+			class="h-8 animate-audit-log-bpulse rounded-xl bg-surface-3"
+			aria-hidden="true"
+		></div>
+		<div v-if="hasMore" ref="loadMoreSentinel" class="h-px"></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { IntercomBubbleIcon, UnknownIcon } from '@modrinth/assets'
+import { Tooltip } from 'floating-vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue'
+
+import { useFormatDateTime, useRelativeTime } from '../../../composables'
+import { defineMessages, useVIntl } from '../../../composables/i18n'
+import AutoLink from '../../base/AutoLink.vue'
+import Avatar from '../../base/Avatar.vue'
+import BulletDivider from '../../base/BulletDivider.vue'
+import Table, { type SortDirection, type TableColumn } from '../../base/Table.vue'
+import TimeFramePicker, {
+	type TimeFrameLastUnit,
+	type TimeFrameMode,
+	type TimeFramePreset,
+} from '../../base/TimeFramePicker.vue'
+import AuditLogEventCell from './AuditLogEventCell.vue'
+import type { ServerAuditLogEntry, ServerAuditLogFilters } from './types'
+
+const props = defineProps<{
+	entries: ServerAuditLogEntry[]
+	hasActiveExternalFilters?: boolean
+	hasMore?: boolean
+	loading?: boolean
+	loadingMore?: boolean
+	showWorldColumn?: boolean
+	suppressRowTransitions?: boolean
+}>()
+
+const emit = defineEmits<{
+	'load-more': []
+}>()
+
+const query = defineModel<string>('query', { default: '' })
+const timeframeMode = defineModel<TimeFrameMode>('timeframeMode', { default: 'preset' })
+const timeframePreset = defineModel<TimeFramePreset>('timeframePreset', { default: 'all_time' })
+const timeframeLastAmount = defineModel<number>('timeframeLastAmount', { default: 30 })
+const timeframeLastUnit = defineModel<TimeFrameLastUnit>('timeframeLastUnit', { default: 'days' })
+const timeframeCustomStartDate = defineModel<string>('timeframeCustomStartDate', { default: '' })
+const timeframeCustomEndDate = defineModel<string>('timeframeCustomEndDate', { default: '' })
+const sortDirection = defineModel<SortDirection>('sortDirection', { default: 'desc' })
+const filters = defineModel<ServerAuditLogFilters>('filters', {
+	default: () => ({
+		userId: null,
+		worldId: null,
+	}),
+})
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const formatDate = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+const slots = useSlots()
+const sortColumn = ref<string | undefined>('time')
+const suppressSortRowTransitions = ref(false)
+const loadMoreSentinel = ref<HTMLElement | null>(null)
+const contentBody = ref<HTMLElement | null>(null)
+const contentHeight = ref<number | null>(null)
+const showWorldColumn = computed(() => props.showWorldColumn === true)
+let loadMoreObserver: IntersectionObserver | null = null
+let contentResizeObserver: ResizeObserver | null = null
+let sortTransitionResetTimeout: ReturnType<typeof setTimeout> | null = null
+
+const messages = defineMessages({
+	supportActor: {
+		id: 'servers.audit-log.actor.support',
+		defaultMessage: 'Support',
+	},
+	userColumn: {
+		id: 'servers.audit-log.column.user',
+		defaultMessage: 'User',
+	},
+	worldColumn: {
+		id: 'servers.audit-log.column.world',
+		defaultMessage: 'Instance',
+	},
+	instanceTooltipTitle: {
+		id: 'servers.audit-log.column.world.tooltip-title',
+		defaultMessage: 'Coming soon!',
+	},
+	instanceTooltipDescription: {
+		id: 'servers.audit-log.column.world.tooltip-description',
+		defaultMessage:
+			'Server instances are contained environments with their own installed content and world files.',
+	},
+	eventColumn: {
+		id: 'servers.audit-log.column.event',
+		defaultMessage: 'Actions',
+	},
+	timeColumn: {
+		id: 'servers.audit-log.column.time',
+		defaultMessage: 'Time',
+	},
+	emptyState: {
+		id: 'servers.audit-log.empty',
+		defaultMessage: 'No activity matches your filters.',
+	},
+	noActivityEmptyState: {
+		id: 'servers.audit-log.empty.no-activity',
+		defaultMessage: 'Perform an action on your server and you will see it here!',
+	},
+	userAvatarAlt: {
+		id: 'servers.audit-log.user-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
+	serverScope: {
+		id: 'servers.audit-log.scope.server',
+		defaultMessage: 'Server',
+	},
+})
+
+const timeframePickerClass = computed(() =>
+	slots.filters ? '!w-full @[640px]:!w-[225px] shrink-0' : '!w-full @[640px]:!w-[225px]',
+)
+const timeframePickerTriggerClass =
+	'!h-10 !min-h-10 !w-full !rounded-[14px] !bg-surface-4 !py-2.5 !pl-4 !pr-3 !text-base shadow-[0px_1px_1px_rgba(0,0,0,0.3),0px_1px_1.5px_rgba(0,0,0,0.15)]'
+
+onMounted(() => {
+	updateLoadMoreObserver()
+	updateContentHeightObserver()
+})
+
+onBeforeUnmount(() => {
+	loadMoreObserver?.disconnect()
+	contentResizeObserver?.disconnect()
+	if (sortTransitionResetTimeout) {
+		clearTimeout(sortTransitionResetTimeout)
+	}
+})
+
+watch(
+	() => [props.hasMore, props.loadingMore, loadMoreSentinel.value] as const,
+	() => updateLoadMoreObserver(),
+	{ flush: 'post' },
+)
+
+watch(
+	sortDirection,
+	(_direction, previousDirection) => {
+		if (previousDirection === undefined) return
+		suppressSortRowTransitions.value = true
+		scheduleSortTransitionReset(1500)
+	},
+	{ flush: 'sync' },
+)
+
+watch(
+	() => props.entries,
+	() => {
+		if (suppressSortRowTransitions.value) {
+			scheduleSortTransitionReset(120)
+		}
+	},
+	{ flush: 'post' },
+)
+
+type AuditLogTableColumn = 'user' | 'event' | 'world' | 'time'
+type AuditLogTableRow = ServerAuditLogEntry & Record<string, unknown>
+
+const columns = computed<TableColumn<AuditLogTableColumn>[]>(() => {
+	const tableColumns: TableColumn<AuditLogTableColumn>[] = [
+		{
+			key: 'user',
+			label: formatMessage(messages.userColumn),
+			width: showWorldColumn.value ? '18%' : '26%',
+		},
+		{
+			key: 'event',
+			label: formatMessage(messages.eventColumn),
+			width: showWorldColumn.value ? '52%' : '58%',
+		},
+	]
+
+	if (showWorldColumn.value) {
+		tableColumns.push({
+			key: 'world',
+			label: formatMessage(messages.worldColumn),
+			width: '20%',
+		})
+	}
+
+	tableColumns.push({
+		key: 'time',
+		label: formatMessage(messages.timeColumn),
+		align: 'right',
+		enableSorting: true,
+		width: showWorldColumn.value ? '10%' : '16%',
+	})
+
+	return tableColumns
+})
+const rowTransitionName = computed(() =>
+	props.suppressRowTransitions || suppressSortRowTransitions.value ? undefined : 'audit-log-row',
+)
+
+const filteredEntries = computed(() => {
+	const normalizedQuery = query.value.trim().toLowerCase()
+
+	return props.entries
+		.filter((entry) => {
+			if (filters.value.userId && entry.actor.id !== filters.value.userId) return false
+			if (
+				showWorldColumn.value &&
+				filters.value.worldId &&
+				entry.world?.id !== filters.value.worldId
+			) {
+				return false
+			}
+
+			if (!normalizedQuery) return true
+
+			return [
+				entry.actor.username,
+				showWorldColumn.value ? entry.world?.name : undefined,
+				entry.event.searchText,
+				entry.event.key,
+			]
+				.filter((value): value is string => typeof value === 'string' && value.length > 0)
+				.some((value) => value.toLowerCase().includes(normalizedQuery))
+		})
+		.slice()
+		.sort((a, b) => {
+			const leftTimestamp = new Date(a.timestamp).getTime()
+			const rightTimestamp = new Date(b.timestamp).getTime()
+			return sortDirection.value === 'asc'
+				? leftTimestamp - rightTimestamp
+				: rightTimestamp - leftTimestamp
+		})
+})
+
+const tableEntries = computed<AuditLogTableRow[]>(() => filteredEntries.value as AuditLogTableRow[])
+const contentFrameStyle = computed(() =>
+	contentHeight.value === null ? undefined : { height: `${contentHeight.value}px` },
+)
+
+watch(
+	() => [filteredEntries.value.length, props.loading] as const,
+	() => updateContentHeight(),
+	{ flush: 'post' },
+)
+
+const hasActiveTimeframeFilter = computed(() => {
+	if (timeframeMode.value === 'preset') {
+		return timeframePreset.value !== 'all_time'
+	}
+
+	if (timeframeMode.value === 'last') {
+		return true
+	}
+
+	return Boolean(timeframeCustomStartDate.value || timeframeCustomEndDate.value)
+})
+
+const hasActiveFilters = computed(
+	() =>
+		props.hasActiveExternalFilters ||
+		query.value.trim().length > 0 ||
+		hasActiveTimeframeFilter.value ||
+		!!filters.value.userId ||
+		(showWorldColumn.value && !!filters.value.worldId),
+)
+
+const emptyStateMessage = computed(() =>
+	props.entries.length === 0 && !hasActiveFilters.value
+		? messages.noActivityEmptyState
+		: messages.emptyState,
+)
+
+function actorName(entry: ServerAuditLogEntry): string {
+	if (entry.actor.id !== 'support') return entry.actor.username
+	return entry.actor.username === 'support'
+		? formatMessage(messages.supportActor)
+		: entry.actor.username
+}
+
+function actorAvatarSrc(entry: ServerAuditLogEntry): string | undefined {
+	return entry.actor.id === 'support' ? IntercomBubbleIcon : (entry.actor.avatarUrl ?? undefined)
+}
+
+function actorProfilePath(entry: ServerAuditLogEntry): string | undefined {
+	return entry.actor.profilePath
+}
+
+function updateLoadMoreObserver() {
+	loadMoreObserver?.disconnect()
+	loadMoreObserver = null
+
+	if (!props.hasMore || typeof IntersectionObserver === 'undefined') {
+		return
+	}
+
+	nextTick(() => {
+		if (!loadMoreSentinel.value || !props.hasMore) {
+			return
+		}
+
+		loadMoreObserver?.disconnect()
+		loadMoreObserver = new IntersectionObserver(
+			(entries) => {
+				if (entries.some((entry) => entry.isIntersecting) && !props.loadingMore) {
+					emit('load-more')
+				}
+			},
+			{ rootMargin: '400px 0px' },
+		)
+		loadMoreObserver.observe(loadMoreSentinel.value)
+	})
+}
+
+function updateContentHeightObserver() {
+	contentResizeObserver?.disconnect()
+	contentResizeObserver = null
+
+	nextTick(() => {
+		updateContentHeight()
+
+		if (!contentBody.value || typeof ResizeObserver === 'undefined') {
+			return
+		}
+
+		contentResizeObserver = new ResizeObserver((entries) => {
+			const height =
+				entries[0]?.contentRect.height ?? contentBody.value?.getBoundingClientRect().height ?? 0
+			setContentHeight(height)
+		})
+		contentResizeObserver.observe(contentBody.value)
+	})
+}
+
+function updateContentHeight() {
+	nextTick(() => {
+		if (!contentBody.value) return
+		setContentHeight(contentBody.value.getBoundingClientRect().height)
+	})
+}
+
+function setContentHeight(height: number) {
+	contentHeight.value = Math.ceil(height)
+}
+
+function scheduleSortTransitionReset(delay: number) {
+	if (sortTransitionResetTimeout) {
+		clearTimeout(sortTransitionResetTimeout)
+	}
+
+	sortTransitionResetTimeout = setTimeout(() => {
+		suppressSortRowTransitions.value = false
+		sortTransitionResetTimeout = null
+	}, delay)
+}
+</script>
+
+<style>
+@media (prefers-reduced-motion: no-preference) {
+	.audit-log-content-frame {
+		transition: height 220ms ease-in-out;
+	}
+}
+
+@keyframes audit-log-bpulse {
+	50% {
+		filter: brightness(75%);
+	}
+}
+
+.animate-audit-log-bpulse {
+	animation: audit-log-bpulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.audit-log-table :is(th, td) {
+	height: 54px;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	vertical-align: middle;
+}
+
+.audit-log-table :is(th, td):first-child {
+	padding-left: 1rem;
+}
+
+.audit-log-table :is(th, td):last-child {
+	padding-right: 1rem;
+}
+
+.audit-log-table tbody tr {
+	height: 54px;
+	max-height: 54px;
+}
+
+.audit-log-table tbody td {
+	height: 54px;
+	max-height: 54px;
+	padding-bottom: 0;
+	padding-top: 0;
+}
+
+.audit-log-table-event {
+	line-height: 1.375rem;
+}
+
+.audit-log-table-event-component > span {
+	line-height: inherit;
+}
+
+@container (min-width: 1040px) {
+	.audit-log-table :is(th, td) {
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+	}
+
+	.audit-log-table :is(th, td):first-child {
+		padding-left: 1rem;
+	}
+
+	.audit-log-table :is(th, td):last-child {
+		padding-right: 1rem;
+	}
+
+	.audit-log-table-event {
+		line-height: 1.375rem;
+	}
+}
+
+.audit-log-loading-fade-enter-active,
+.audit-log-loading-fade-leave-active {
+	transition: opacity 250ms ease-in-out;
+}
+
+.audit-log-loading-fade-enter-from,
+.audit-log-loading-fade-leave-to {
+	opacity: 0;
+}
+
+.audit-log-row-enter-active,
+.audit-log-row-leave-active,
+.audit-log-row-move,
+.audit-log-card-enter-active,
+.audit-log-card-leave-active,
+.audit-log-card-move {
+	transition:
+		opacity 180ms ease-in-out,
+		transform 180ms ease-in-out;
+}
+
+.audit-log-row-enter-from,
+.audit-log-card-enter-from {
+	opacity: 0;
+	transform: translateY(-8px);
+}
+
+.audit-log-row-leave-to,
+.audit-log-card-leave-to {
+	opacity: 0;
+	transform: translateY(8px);
+}
+</style>
diff --git a/packages/ui/src/components/servers/access/GrantAccessModal.vue b/packages/ui/src/components/servers/access/GrantAccessModal.vue
new file mode 100644
index 0000000000..25251bae55
--- /dev/null
+++ b/packages/ui/src/components/servers/access/GrantAccessModal.vue
@@ -0,0 +1,459 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.header)"
+		width="min(34rem, calc(100vw - 2rem))"
+		max-width="34rem"
+	>
+		<div class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2">
+				<label class="font-semibold text-contrast" for="grant-access-target">
+					{{ formatMessage(messages.targetLabel) }}
+				</label>
+				<Combobox
+					id="grant-access-target"
+					:model-value="undefined"
+					:options="suggestionOptions"
+					:search-placeholder="formatMessage(messages.targetPlaceholder)"
+					:placeholder="formatMessage(messages.targetPlaceholder)"
+					:no-options-message="targetLookupMessage"
+					:min-search-length-to-open="suggestionMinimumLength"
+					:disable-search-filter="usesRemoteLookup"
+					searchable
+					show-search-icon
+					:show-chevron="false"
+					search-autocomplete="off"
+					search-autocorrect="off"
+					search-autocapitalize="none"
+					:search-spellcheck="false"
+					@open="targetComboboxOpen = true"
+					@close="targetComboboxOpen = false"
+					@search-input="handleTargetSearch"
+					@select="handleTargetSelect"
+				>
+					<template #option="{ item, isSelected }">
+						<div class="flex min-w-0 items-center gap-2">
+							<Avatar
+								:src="findSuggestion(item.value)?.avatarUrl"
+								:alt="formatMessage(messages.suggestionAvatarAlt, { username: item.label })"
+								:tint-by="item.label"
+								size="1.5rem"
+								circle
+								no-shadow
+							/>
+							<span
+								class="min-w-0 truncate font-semibold"
+								:class="isSelected ? 'text-contrast' : 'text-primary'"
+							>
+								{{ item.label }}
+							</span>
+						</div>
+					</template>
+				</Combobox>
+				<span class="m-0 text-base text-primary">
+					{{ formatMessage(messages.targetHelp) }}
+				</span>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">
+					{{ formatMessage(messages.roleLabel) }}
+				</span>
+				<div class="flex flex-col gap-3">
+					<button
+						v-for="role in grantableRoles"
+						:key="role.value"
+						type="button"
+						class="group flex w-full items-center gap-3 rounded-[20px] border border-solid p-3 text-left transition-all hover:brightness-110 active:scale-[0.98]"
+						:class="
+							selectedRole === role.value
+								? 'border-brand bg-brand-highlight'
+								: 'border-transparent bg-surface-4'
+						"
+						@click="selectedRole = role.value"
+					>
+						<span
+							class="flex size-12 shrink-0 items-center justify-center rounded-2xl border border-solid"
+							:class="
+								selectedRole === role.value
+									? 'border-brand bg-brand-highlight text-brand'
+									: 'border-surface-5 text-secondary'
+							"
+						>
+							<component :is="role.icon" class="size-8" stroke-width="1.5" aria-hidden="true" />
+						</span>
+						<span class="flex min-w-0 flex-1 flex-col gap-1">
+							<span class="text-base font-semibold text-contrast">{{ role.label }}</span>
+							<span class="text-sm font-medium text-primary">{{ role.description }}</span>
+						</span>
+					</button>
+				</div>
+				<p class="m-0 text-base text-primary">
+					<IntlFormatted :message-id="messages.permissionsHelp">
+						<template #link="{ children }">
+							<a
+								class="font-medium text-blue hover:underline"
+								href="/news/article/server-access/"
+								target="_blank"
+							>
+								<component :is="() => children" />
+							</a>
+						</template>
+					</IntlFormatted>
+				</p>
+				<Transition
+					enter-active-class="transition-all duration-300 ease-out"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-20"
+					leave-active-class="transition-all duration-200 ease-in"
+					leave-from-class="opacity-100 max-h-20"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<Checkbox
+						v-if="showAddAsFriend"
+						v-model="addAsFriend"
+						:label="formatMessage(messages.addAsFriend)"
+						label-class="text-base text-contrast"
+						class="mt-2"
+					/>
+				</Transition>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled type="outlined">
+					<button @click="hide">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button v-tooltip="grantPermissionTooltip" :disabled="!canSubmit" @click="submit">
+						<UserPlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.inviteButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { EyeIcon, PencilIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '../../../composables/i18n'
+import { commonMessages } from '../../../utils/common-messages'
+import Avatar from '../../base/Avatar.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import Checkbox from '../../base/Checkbox.vue'
+import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
+import IntlFormatted from '../../base/IntlFormatted.vue'
+import NewModal from '../../modal/NewModal.vue'
+import type {
+	GrantServerAccessPayload,
+	ServerAccessInviteSuggestion,
+	ServerAccessMember,
+	ServerAccessRole,
+} from './types'
+
+const props = withDefaults(
+	defineProps<{
+		members?: ServerAccessMember[]
+		suggestions?: ServerAccessInviteSuggestion[]
+		friendIds?: string[]
+		searchUsers?: (query: string) => Promise<ServerAccessInviteSuggestion[]>
+		canGrant?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		members: () => [],
+		suggestions: () => [],
+		friendIds: () => [],
+		canGrant: true,
+	},
+)
+
+const emit = defineEmits<{
+	grant: [payload: GrantServerAccessPayload]
+}>()
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const target = ref('')
+const selectedRole = ref<Exclude<ServerAccessRole, 'owner'>>('editor')
+const addAsFriend = ref(true)
+const suggestionMinimumLength = 1
+const remoteSuggestions = ref<ServerAccessInviteSuggestion[]>([])
+const targetLookupStatus = ref<'idle' | 'loading' | 'loaded'>('idle')
+const targetLookupRequestId = ref(0)
+const hasSelectedTarget = ref(false)
+const targetComboboxOpen = ref(false)
+
+const messages = defineMessages({
+	header: {
+		id: 'servers.grant-access-modal.header',
+		defaultMessage: 'Add user',
+	},
+	targetLabel: {
+		id: 'servers.grant-access-modal.target.label',
+		defaultMessage: 'Modrinth username',
+	},
+	targetPlaceholder: {
+		id: 'servers.grant-access-modal.target.placeholder',
+		defaultMessage: 'Enter Modrinth username',
+	},
+	noSuggestions: {
+		id: 'servers.grant-access-modal.target.no-suggestions',
+		defaultMessage: 'No matching users found.',
+	},
+	searching: {
+		id: 'servers.grant-access-modal.target.searching',
+		defaultMessage: 'Searching...',
+	},
+	targetHelp: {
+		id: 'servers.grant-access-modal.target.help',
+		defaultMessage: 'Do not use their Minecraft username.',
+	},
+	roleLabel: {
+		id: 'servers.grant-access-modal.role.label',
+		defaultMessage: 'Select role',
+	},
+	editorRole: {
+		id: 'servers.grant-access-modal.role.editor',
+		defaultMessage: 'Editor',
+	},
+	editorDescription: {
+		id: 'servers.grant-access-modal.role.editor-description',
+		defaultMessage: 'Manage instance content, files, backups, and other settings.',
+	},
+	viewerRole: {
+		id: 'servers.grant-access-modal.role.viewer',
+		defaultMessage: 'Limited',
+	},
+	viewerDescription: {
+		id: 'servers.grant-access-modal.role.viewer-description',
+		defaultMessage: 'Start, stop, and view the server without making changes.',
+	},
+	permissionsHelp: {
+		id: 'servers.grant-access-modal.permissions-help',
+		defaultMessage: 'View the full list of permissions for each role <link>here</link>.',
+	},
+	addAsFriend: {
+		id: 'servers.grant-access-modal.add-as-friend',
+		defaultMessage: 'Also send a friend request',
+	},
+	cancelButton: {
+		id: 'servers.grant-access-modal.cancel',
+		defaultMessage: 'Cancel',
+	},
+	inviteButton: {
+		id: 'servers.grant-access-modal.invite',
+		defaultMessage: 'Invite',
+	},
+	suggestionAvatarAlt: {
+		id: 'servers.grant-access-modal.suggestion-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
+	alreadyMemberTooltip: {
+		id: 'servers.grant-access-modal.already-member-tooltip',
+		defaultMessage: 'This user has already been invited',
+	},
+})
+
+const grantableRoles = computed(() => [
+	{
+		value: 'editor' as const,
+		label: formatMessage(messages.editorRole),
+		description: formatMessage(messages.editorDescription),
+		icon: PencilIcon,
+	},
+	{
+		value: 'viewer' as const,
+		label: formatMessage(messages.viewerRole),
+		description: formatMessage(messages.viewerDescription),
+		icon: EyeIcon,
+	},
+])
+
+const normalizedTarget = computed(() => target.value.trim())
+const usesRemoteLookup = computed(() => !!props.searchUsers)
+const matchedSuggestion = computed(() => findSuggestion(normalizedTarget.value))
+const selectedTargetUserId = computed(() => matchedSuggestion.value?.id)
+const friendIdSet = computed(() => new Set(props.friendIds.map((id) => id.toLowerCase())))
+const targetIsFriend = computed(() => {
+	const userId = selectedTargetUserId.value
+	return !!userId && friendIdSet.value.has(userId.toLowerCase())
+})
+const hasResolvedTarget = computed(() => {
+	const suggestion = matchedSuggestion.value
+	if (!suggestion) return false
+
+	const normalizedSuggestionId = suggestion.id.toLowerCase()
+	const normalizedSuggestionUsername = suggestion.username.toLowerCase()
+	const normalizedValue = normalizedTarget.value.toLowerCase()
+
+	return (
+		hasSelectedTarget.value ||
+		normalizedSuggestionId === normalizedValue ||
+		normalizedSuggestionUsername === normalizedValue
+	)
+})
+const showAddAsFriend = computed(() => canAddAsFriend.value && !targetComboboxOpen.value)
+const canAddAsFriend = computed(
+	() => hasResolvedTarget.value && !!matchedSuggestion.value && !targetIsFriend.value,
+)
+const existingMember = computed(() => findExistingMember())
+const canInvite = computed(
+	() =>
+		normalizedTarget.value.length > 0 &&
+		!!selectedRole.value &&
+		!!matchedSuggestion.value &&
+		!existingMember.value &&
+		(!usesRemoteLookup.value || (targetLookupStatus.value === 'loaded' && hasResolvedTarget.value)),
+)
+const canSubmit = computed(() => props.canGrant && canInvite.value)
+const permissionDeniedMessage = computed(
+	() => props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction),
+)
+const grantPermissionTooltip = computed(() => {
+	if (!props.canGrant) return permissionDeniedMessage.value
+	if (existingMember.value) return formatMessage(messages.alreadyMemberTooltip)
+	return undefined
+})
+const targetLookupMessage = computed(() =>
+	usesRemoteLookup.value && targetLookupStatus.value !== 'loaded'
+		? formatMessage(messages.searching)
+		: formatMessage(messages.noSuggestions),
+)
+const inviteSuggestions = computed(() => {
+	const suggestions = new Map<string, ServerAccessInviteSuggestion>()
+
+	for (const suggestion of [...remoteSuggestions.value, ...props.suggestions]) {
+		suggestions.set(suggestion.id.toLowerCase(), suggestion)
+		suggestions.set(suggestion.username.toLowerCase(), suggestion)
+	}
+
+	return [...new Set(suggestions.values())]
+})
+const suggestionOptions = computed<ComboboxOption<string>[]>(() =>
+	inviteSuggestions.value.map((suggestion) => ({
+		value: suggestion.username,
+		label: suggestion.username,
+		searchTerms: [suggestion.username, suggestion.id, suggestion.email].filter(Boolean) as string[],
+	})),
+)
+
+function findSuggestion(value: string) {
+	const normalizedValue = value.trim().toLowerCase()
+	return inviteSuggestions.value.find(
+		(suggestion) =>
+			suggestion.username.toLowerCase() === normalizedValue ||
+			suggestion.id.toLowerCase() === normalizedValue ||
+			suggestion.email?.toLowerCase() === normalizedValue,
+	)
+}
+
+function findExistingMember() {
+	const normalizedValue = normalizedTarget.value.toLowerCase()
+	if (!normalizedValue) return undefined
+
+	const suggestion = matchedSuggestion.value
+	const normalizedSuggestionId = suggestion?.id.toLowerCase()
+	const normalizedSuggestionUsername = suggestion?.username.toLowerCase()
+
+	return props.members.find((member) => {
+		const normalizedMemberId = member.user.id.toLowerCase()
+		const normalizedMemberUsername = member.user.username.toLowerCase()
+
+		return (
+			normalizedMemberId === normalizedValue ||
+			normalizedMemberUsername === normalizedValue ||
+			(!!normalizedSuggestionId && normalizedMemberId === normalizedSuggestionId) ||
+			(!!normalizedSuggestionUsername && normalizedMemberUsername === normalizedSuggestionUsername)
+		)
+	})
+}
+
+const searchTargetUsers = useDebounceFn(async (query: string, requestId: number) => {
+	const searchUsers = props.searchUsers
+	if (!searchUsers) return
+
+	try {
+		const users = await searchUsers(query)
+		if (requestId !== targetLookupRequestId.value || query !== normalizedTarget.value) return
+
+		remoteSuggestions.value = users
+	} catch {
+		if (requestId !== targetLookupRequestId.value || query !== normalizedTarget.value) return
+
+		remoteSuggestions.value = []
+	} finally {
+		if (requestId === targetLookupRequestId.value && query === normalizedTarget.value) {
+			targetLookupStatus.value = 'loaded'
+		}
+	}
+}, 250)
+
+function handleTargetSearch(value: string) {
+	target.value = value
+	remoteSuggestions.value = []
+	hasSelectedTarget.value = false
+	targetLookupRequestId.value += 1
+
+	if (!usesRemoteLookup.value) return
+
+	if (normalizedTarget.value.length < suggestionMinimumLength) {
+		targetLookupStatus.value = 'idle'
+		return
+	}
+
+	targetLookupStatus.value = 'loading'
+	void searchTargetUsers(normalizedTarget.value, targetLookupRequestId.value)
+}
+
+function handleTargetSelect(option: ComboboxOption<string>) {
+	target.value = option.value
+	hasSelectedTarget.value = true
+}
+
+function reset() {
+	target.value = ''
+	selectedRole.value = 'editor'
+	addAsFriend.value = true
+	remoteSuggestions.value = []
+	targetLookupStatus.value = 'idle'
+	targetLookupRequestId.value += 1
+	hasSelectedTarget.value = false
+	targetComboboxOpen.value = false
+}
+
+function show(event?: MouseEvent) {
+	reset()
+	modal.value?.show(event)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function submit() {
+	if (!canSubmit.value) return
+	const user = matchedSuggestion.value
+	if (!user) return
+
+	const payload: GrantServerAccessPayload = {
+		target: normalizedTarget.value,
+		user,
+		role: selectedRole.value,
+		addAsFriend: canAddAsFriend.value && addAsFriend.value,
+	}
+
+	hide()
+	emit('grant', payload)
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/components/servers/access/RemoveAccessModal.vue b/packages/ui/src/components/servers/access/RemoveAccessModal.vue
new file mode 100644
index 0000000000..4534a6054a
--- /dev/null
+++ b/packages/ui/src/components/servers/access/RemoveAccessModal.vue
@@ -0,0 +1,321 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="
+			formatMessage(modalState.shouldCancel ? messages.cancelHeader : messages.header, {
+				username: modalState.username,
+			})
+		"
+		max-width="470px"
+	>
+		<div class="flex flex-col gap-4">
+			<Admonition type="warning">
+				{{
+					formatMessage(
+						modalState.shouldCancel ? messages.cancelWarningBody : messages.warningBody,
+						{
+							username: modalState.username,
+						},
+					)
+				}}
+			</Admonition>
+
+			<div class="flex min-w-0 items-center gap-2 rounded-[20px] bg-surface-2 p-3">
+				<Avatar
+					:src="modalState.avatarUrl"
+					:alt="formatMessage(messages.userAvatarAlt, { username: modalState.username })"
+					:tint-by="modalState.username"
+					size="40px"
+					circle
+					no-shadow
+				/>
+				<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+					<div class="flex min-w-0 items-center gap-1.5">
+						<span class="min-w-0 truncate font-medium text-contrast">{{
+							modalState.username
+						}}</span>
+						<span
+							v-if="memberStatusLabel"
+							class="inline-flex h-6 shrink-0 items-center rounded-full border border-solid px-2 py-1 text-sm font-medium leading-none"
+							:class="memberStatusClasses"
+						>
+							{{ memberStatusLabel }}
+						</span>
+					</div>
+					<span class="truncate text-sm text-secondary">{{ memberSubtitle }}</span>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">{{
+					formatMessage(messages.whatHappensLabel)
+				}}</span>
+				<ul class="m-0 list-disc pl-6 text-primary">
+					<li
+						v-for="effect in effectMessages"
+						:key="effect.id"
+						class="leading-6 marker:text-secondary"
+					>
+						{{ formatMessage(effect) }}
+					</li>
+				</ul>
+			</div>
+
+			<div class="flex justify-end gap-2 pt-1">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-5" @click="hide">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="orange">
+					<button v-tooltip="removePermissionTooltip" :disabled="!canRemove" @click="confirm">
+						<TrashIcon v-if="modalState.shouldCancel" aria-hidden="true" />
+						<UserXIcon v-else aria-hidden="true" />
+						{{
+							formatMessage(modalState.shouldCancel ? messages.cancelButton : messages.removeButton)
+						}}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { TrashIcon, UserXIcon, XIcon } from '@modrinth/assets'
+import { computed, ref, watch } from 'vue'
+
+import { useRelativeTime } from '../../../composables'
+import { defineMessages, useVIntl } from '../../../composables/i18n'
+import { commonMessages } from '../../../utils/common-messages'
+import Admonition from '../../base/Admonition.vue'
+import Avatar from '../../base/Avatar.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import NewModal from '../../modal/NewModal.vue'
+import type { ServerAccessRole } from './types'
+
+const props = withDefaults(
+	defineProps<{
+		username: string
+		avatarUrl?: string
+		role?: ServerAccessRole
+		joinedAt?: string | null
+		pending?: boolean
+		shouldCancel?: boolean
+		canRemove?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		avatarUrl: undefined,
+		role: undefined,
+		joinedAt: null,
+		pending: false,
+		shouldCancel: false,
+		canRemove: true,
+	},
+)
+
+const emit = defineEmits<{
+	remove: []
+}>()
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const modal = ref<InstanceType<typeof NewModal>>()
+const cachedState = ref({
+	username: '',
+	avatarUrl: undefined as string | undefined,
+	role: undefined as ServerAccessRole | undefined,
+	joinedAt: null as string | null,
+	pending: false,
+	shouldCancel: false,
+})
+
+const messages = defineMessages({
+	header: {
+		id: 'servers.remove-access-modal.header',
+		defaultMessage: 'Remove user',
+	},
+	cancelHeader: {
+		id: 'servers.remove-access-modal.cancel-header',
+		defaultMessage: 'Cancel invite',
+	},
+	warningBody: {
+		id: 'servers.remove-access-modal.warning-body',
+		defaultMessage:
+			"If you remove a user from your server, you'll need to re-invite them to restore access.",
+	},
+	cancelWarningBody: {
+		id: 'servers.remove-access-modal.cancel-warning-body',
+		defaultMessage:
+			'If you cancel this invite, {username} will need a new invitation before they can join this server.',
+	},
+	removeButton: {
+		id: 'servers.remove-access-modal.remove-button',
+		defaultMessage: 'Remove user',
+	},
+	cancelButton: {
+		id: 'servers.remove-access-modal.cancel-button',
+		defaultMessage: 'Cancel invite',
+	},
+	userAvatarAlt: {
+		id: 'servers.remove-access-modal.user-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
+	whatHappensLabel: {
+		id: 'servers.remove-access-modal.what-happens-label',
+		defaultMessage: 'What happens?',
+	},
+	removeEffectAccess: {
+		id: 'servers.remove-access-modal.remove-effect-access',
+		defaultMessage:
+			'They will immediately lose access to the server panel and will no longer be able to edit content',
+	},
+	removeEffectJoin: {
+		id: 'servers.remove-access-modal.remove-effect-join',
+		defaultMessage:
+			'They will still be able to join and play on the server unless you make separate changes',
+	},
+	cancelEffectAccess: {
+		id: 'servers.remove-access-modal.cancel-effect-access',
+		defaultMessage: 'They will not be added to this server',
+	},
+	cancelEffectInvite: {
+		id: 'servers.remove-access-modal.cancel-effect-invite',
+		defaultMessage: 'You can send them another invite later',
+	},
+	addedLabel: {
+		id: 'servers.remove-access-modal.added-label',
+		defaultMessage: 'Added {time}',
+	},
+	invitedLabel: {
+		id: 'servers.remove-access-modal.invited-label',
+		defaultMessage: 'Invited {time}',
+	},
+	pendingInviteLabel: {
+		id: 'servers.remove-access-modal.pending-invite-label',
+		defaultMessage: 'Pending invite',
+	},
+	unknownAddedLabel: {
+		id: 'servers.remove-access-modal.unknown-added-label',
+		defaultMessage: 'Added date unknown',
+	},
+	ownerRole: {
+		id: 'servers.access-role.owner',
+		defaultMessage: 'Owner',
+	},
+	editorRole: {
+		id: 'servers.access-role.editor',
+		defaultMessage: 'Editor',
+	},
+	viewerRole: {
+		id: 'servers.access-role.viewer',
+		defaultMessage: 'Limited',
+	},
+})
+
+const modalState = computed(() => (props.username ? currentState() : cachedState.value))
+
+watch(
+	() =>
+		[
+			props.username,
+			props.avatarUrl,
+			props.role,
+			props.joinedAt,
+			props.pending,
+			props.shouldCancel,
+		] as const,
+	() => {
+		if (props.username) cachedState.value = currentState()
+	},
+	{ immediate: true },
+)
+
+const memberStatusLabel = computed(() => {
+	if (!modalState.value.role) return null
+	return formatRole(modalState.value.role)
+})
+
+const memberStatusClasses = computed(() => {
+	if (!modalState.value.role) return ''
+	return roleClasses(modalState.value.role)
+})
+
+const memberSubtitle = computed(() => {
+	if (modalState.value.shouldCancel || modalState.value.pending) {
+		return modalState.value.joinedAt
+			? formatMessage(messages.invitedLabel, {
+					time: formatRelativeTime(modalState.value.joinedAt),
+				})
+			: formatMessage(messages.pendingInviteLabel)
+	}
+
+	return modalState.value.joinedAt
+		? formatMessage(messages.addedLabel, { time: formatRelativeTime(modalState.value.joinedAt) })
+		: formatMessage(messages.unknownAddedLabel)
+})
+
+const effectMessages = computed(() =>
+	modalState.value.shouldCancel
+		? [messages.cancelEffectAccess, messages.cancelEffectInvite]
+		: [messages.removeEffectAccess, messages.removeEffectJoin],
+)
+const canRemove = computed(() => props.canRemove)
+const permissionDeniedMessage = computed(
+	() => props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction),
+)
+const removePermissionTooltip = computed(() =>
+	canRemove.value ? undefined : permissionDeniedMessage.value,
+)
+
+function currentState() {
+	return {
+		username: props.username,
+		avatarUrl: props.avatarUrl,
+		role: props.role,
+		joinedAt: props.joinedAt,
+		pending: props.pending,
+		shouldCancel: props.shouldCancel,
+	}
+}
+
+function formatRole(role: ServerAccessRole): string {
+	switch (role) {
+		case 'owner':
+			return formatMessage(messages.ownerRole)
+		case 'editor':
+			return formatMessage(messages.editorRole)
+		case 'viewer':
+			return formatMessage(messages.viewerRole)
+	}
+}
+
+function roleClasses(role: ServerAccessRole): string {
+	switch (role) {
+		case 'owner':
+			return 'border-orange bg-highlight-orange text-orange'
+		case 'editor':
+			return 'border-green bg-highlight-green text-brand'
+		case 'viewer':
+			return 'border-blue bg-highlight-blue text-blue'
+	}
+}
+
+function show() {
+	modal.value?.show()
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function confirm() {
+	if (!canRemove.value) return
+	hide()
+	emit('remove')
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/components/servers/access/events/AddonEvent.vue b/packages/ui/src/components/servers/access/events/AddonEvent.vue
new file mode 100644
index 0000000000..b77d6cedad
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/AddonEvent.vue
@@ -0,0 +1,100 @@
+<template>
+	<BaseEvent>
+		<span
+			v-if="isDeleted"
+			class="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1 whitespace-normal align-middle @[800px]:flex-nowrap @[800px]:whitespace-nowrap"
+		>
+			<span class="shrink-0">{{ formatMessage(messages.deletedLabel) }}</span>
+			<EventEntityList
+				class="min-w-0"
+				:entities="addonEntities"
+				:limit="1"
+				single-line
+				entity-text-weight="semibold"
+			/>
+		</span>
+		<IntlFormatted v-else :message-id="message">
+			<template #content>
+				<EventEntityList
+					:entities="addonEntities"
+					:single-line="true"
+					:limit="contentLimit"
+					entity-text-weight="semibold"
+				/>
+			</template>
+			<template #files>
+				<EventEntityList :entities="fileNames ?? []" :single-line="true" :limit="1" />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages, type MessageDescriptor, useVIntl } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+import EventEntityList from './EventEntityList.vue'
+import type { AuditAddonEventItem, EventEntity } from './types'
+
+const props = defineProps<{
+	kind: string
+	addons?: AuditAddonEventItem[]
+	fileNames?: EventEntity[]
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	added: {
+		id: 'servers.audit-log.event.addon-added',
+		defaultMessage: 'Added content <content></content>',
+	},
+	uploaded: {
+		id: 'servers.audit-log.event.addon-uploaded',
+		defaultMessage: 'Uploaded <files></files>',
+	},
+	disabled: {
+		id: 'servers.audit-log.event.addon-disabled',
+		defaultMessage: 'Disabled content <content></content>',
+	},
+	enabled: {
+		id: 'servers.audit-log.event.addon-enabled',
+		defaultMessage: 'Enabled content <content></content>',
+	},
+	deleted: {
+		id: 'servers.audit-log.event.addon-deleted',
+		defaultMessage: 'Deleted content <content></content>',
+	},
+	deletedLabel: {
+		id: 'servers.audit-log.event.addon-deleted-label',
+		defaultMessage: 'Deleted content',
+	},
+	updated: {
+		id: 'servers.audit-log.event.addon-updated',
+		defaultMessage: 'Updated content <content></content>',
+	},
+	changed: {
+		id: 'servers.audit-log.event.addon-changed',
+		defaultMessage: 'Changed content <content></content>',
+	},
+})
+
+const kindMessages: Record<string, MessageDescriptor> = {
+	added: messages.added,
+	uploaded: messages.uploaded,
+	disabled: messages.disabled,
+	enabled: messages.enabled,
+	deleted: messages.deleted,
+	updated: messages.updated,
+}
+
+const message = computed(() => kindMessages[props.kind] ?? messages.changed)
+const addonEntities = computed(() => props.addons?.map((addon) => addon.project) ?? [])
+const isDeleted = computed(() => props.kind === 'deleted')
+const shouldShowSingleItem = computed(() =>
+	['added', 'disabled', 'enabled', 'updated'].includes(props.kind),
+)
+const contentLimit = computed(() => (shouldShowSingleItem.value ? 1 : undefined))
+</script>
diff --git a/packages/ui/src/components/servers/access/events/BackupEvent.vue b/packages/ui/src/components/servers/access/events/BackupEvent.vue
new file mode 100644
index 0000000000..0f90585fef
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/BackupEvent.vue
@@ -0,0 +1,105 @@
+<template>
+	<BaseEvent>
+		<IntlFormatted :message-id="message">
+			<template #backup>
+				<EventEntityLink v-if="backup" :entity="backup" />
+			</template>
+			<template #renamed-backup>
+				<EventEntityLink v-if="renamedBackup" :entity="renamedBackup" />
+			</template>
+			<template #from>
+				<EventInlineText :text="from ?? ''" class="align-middle font-medium text-contrast" />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages, type MessageDescriptor } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+import EventEntityLink from './EventEntityLink.vue'
+import EventInlineText from './EventInlineText.vue'
+import type { AuditBackupEventItem } from './types'
+
+const props = defineProps<{
+	kind: string
+	backup?: AuditBackupEventItem
+	backupId?: string
+	from?: string
+	to?: string
+}>()
+
+const messages = defineMessages({
+	created: {
+		id: 'servers.audit-log.event.backup-created',
+		defaultMessage: 'Created backup <backup></backup>',
+	},
+	restored: {
+		id: 'servers.audit-log.event.backup-restored',
+		defaultMessage: 'Restored backup <backup></backup>',
+	},
+	renamed: {
+		id: 'servers.audit-log.event.backup-renamed',
+		defaultMessage: 'Renamed backup <from></from> to <renamed-backup></renamed-backup>',
+	},
+	deleted: {
+		id: 'servers.audit-log.event.backup-deleted',
+		defaultMessage: 'Deleted backup <backup></backup>',
+	},
+	changed: {
+		id: 'servers.audit-log.event.backup-changed',
+		defaultMessage: 'Changed backup <backup></backup>',
+	},
+	createdFallback: {
+		id: 'servers.audit-log.event.backup-created-fallback',
+		defaultMessage: 'Created backup',
+	},
+	restoredFallback: {
+		id: 'servers.audit-log.event.backup-restored-fallback',
+		defaultMessage: 'Restored backup',
+	},
+	renamedFallback: {
+		id: 'servers.audit-log.event.backup-renamed-fallback',
+		defaultMessage: 'Renamed backup',
+	},
+	deletedFallback: {
+		id: 'servers.audit-log.event.backup-deleted-fallback',
+		defaultMessage: 'Deleted backup',
+	},
+	changedFallback: {
+		id: 'servers.audit-log.event.backup-changed-fallback',
+		defaultMessage: 'Changed backup',
+	},
+})
+
+const kindMessages: Record<string, MessageDescriptor> = {
+	created: messages.created,
+	restored: messages.restored,
+	renamed: messages.renamed,
+	deleted: messages.deleted,
+}
+
+const fallbackMessages: Record<string, MessageDescriptor> = {
+	created: messages.createdFallback,
+	restored: messages.restoredFallback,
+	renamed: messages.renamedFallback,
+	deleted: messages.deletedFallback,
+}
+
+const message = computed(() =>
+	props.backup
+		? (kindMessages[props.kind] ?? messages.changed)
+		: (fallbackMessages[props.kind] ?? messages.changedFallback),
+)
+const renamedBackup = computed(() =>
+	props.backup
+		? {
+				...props.backup,
+				label: props.to ?? props.backup.label,
+			}
+		: undefined,
+)
+</script>
diff --git a/packages/ui/src/components/servers/access/events/BaseEvent.vue b/packages/ui/src/components/servers/access/events/BaseEvent.vue
new file mode 100644
index 0000000000..97fcbc4143
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/BaseEvent.vue
@@ -0,0 +1,9 @@
+<template>
+	<div class="min-w-0 text-primary">
+		<span
+			class="inline-flex max-w-full min-w-0 flex-wrap items-center gap-x-1 whitespace-normal align-middle leading-7 @[800px]:flex-nowrap @[800px]:whitespace-nowrap"
+		>
+			<slot />
+		</span>
+	</div>
+</template>
diff --git a/packages/ui/src/components/servers/access/events/BasicStringEvent.vue b/packages/ui/src/components/servers/access/events/BasicStringEvent.vue
new file mode 100644
index 0000000000..3915755955
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/BasicStringEvent.vue
@@ -0,0 +1,80 @@
+<template>
+	<BaseEvent>
+		{{ formatMessage(message) }}
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages, type MessageDescriptor, useVIntl } from '../../../../composables/i18n'
+import BaseEvent from './BaseEvent.vue'
+
+const props = defineProps<{
+	action: string
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	serverCreated: {
+		id: 'servers.audit-log.event.server-created',
+		defaultMessage: 'Created server',
+	},
+	serverReallocated: {
+		id: 'servers.audit-log.event.server-reallocated',
+		defaultMessage: 'Reallocated server',
+	},
+	serverRepaired: {
+		id: 'servers.audit-log.event.server-repaired',
+		defaultMessage: 'Repaired server',
+	},
+	serverReset: {
+		id: 'servers.audit-log.event.server-reset',
+		defaultMessage: 'Reset server',
+	},
+	serverStarted: {
+		id: 'servers.audit-log.event.server-started',
+		defaultMessage: 'Started server',
+	},
+	serverStopped: {
+		id: 'servers.audit-log.event.server-stopped',
+		defaultMessage: 'Stopped server',
+	},
+	serverRestarted: {
+		id: 'servers.audit-log.event.server-restarted',
+		defaultMessage: 'Restarted server',
+	},
+	serverKilled: {
+		id: 'servers.audit-log.event.server-killed',
+		defaultMessage: 'Killed server',
+	},
+	sftpLogin: {
+		id: 'servers.audit-log.event.sftp-login',
+		defaultMessage: 'Logged in via SFTP',
+	},
+	consoleCleared: {
+		id: 'servers.audit-log.event.console-cleared',
+		defaultMessage: 'Cleared console',
+	},
+	unknown: {
+		id: 'servers.audit-log.event.unknown-basic',
+		defaultMessage: 'Recorded server activity',
+	},
+})
+
+const actionMessages: Record<string, MessageDescriptor> = {
+	server_created: messages.serverCreated,
+	server_reallocated: messages.serverReallocated,
+	server_repaired: messages.serverRepaired,
+	server_reset: messages.serverReset,
+	server_started: messages.serverStarted,
+	server_stopped: messages.serverStopped,
+	server_restarted: messages.serverRestarted,
+	server_killed: messages.serverKilled,
+	sftp_login: messages.sftpLogin,
+	console_cleared: messages.consoleCleared,
+}
+
+const message = computed(() => actionMessages[props.action] ?? messages.unknown)
+</script>
diff --git a/packages/ui/src/components/servers/access/events/ConfigEvent.vue b/packages/ui/src/components/servers/access/events/ConfigEvent.vue
new file mode 100644
index 0000000000..b5361df243
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/ConfigEvent.vue
@@ -0,0 +1,142 @@
+<template>
+	<BaseEvent>
+		<span
+			v-if="props.kind === 'properties'"
+			class="inline-flex max-w-full min-w-0 flex-wrap items-center gap-1 whitespace-normal align-middle @[800px]:flex-nowrap @[800px]:whitespace-nowrap"
+		>
+			<span class="shrink-0">{{ formatMessage(messages.propertiesModifiedLabel) }}</span>
+			<EventInlineText
+				:text="propertiesLabel"
+				class="align-middle font-mono text-[0.925em] font-medium text-contrast"
+			/>
+		</span>
+		<IntlFormatted v-else :message-id="message">
+			<template #version>
+				<EventInlineText :text="newVersion ?? ''" class="align-middle font-medium text-contrast" />
+			</template>
+			<template #loader>
+				<EventInlineText :text="newLoaderLabel" class="align-middle font-medium text-contrast" />
+			</template>
+			<template #command>
+				<EventInlineText
+					:text="command ?? ''"
+					class="align-middle font-mono font-medium text-contrast"
+				/>
+			</template>
+			<template #vendor>
+				<EventInlineText :text="vendor ?? ''" class="align-middle font-medium text-contrast" />
+			</template>
+			<template #java-version>
+				<EventInlineText :text="version ?? ''" class="align-middle font-medium text-contrast" />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages, type MessageDescriptor, useVIntl } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+import EventInlineText from './EventInlineText.vue'
+import type { EventEntity } from './types'
+
+const props = defineProps<{
+	kind:
+		| 'loader_version'
+		| 'game_version'
+		| 'properties'
+		| 'startup_command'
+		| 'java_runtime'
+		| 'java_version'
+	newVersion?: string | null
+	newLoader?: string | null
+	properties?: EventEntity[]
+	command?: string
+	vendor?: string
+	version?: number
+}>()
+
+const messages = defineMessages({
+	loaderVersionChanged: {
+		id: 'servers.audit-log.event.loader-version-changed',
+		defaultMessage: 'Changed loader version to <version></version>',
+	},
+	loaderChanged: {
+		id: 'servers.audit-log.event.loader-changed',
+		defaultMessage: 'Changed loader to <loader></loader>',
+	},
+	loaderAndVersionChanged: {
+		id: 'servers.audit-log.event.loader-and-version-changed',
+		defaultMessage: 'Changed loader to <loader></loader> <version></version>',
+	},
+	loaderVersionCleared: {
+		id: 'servers.audit-log.event.loader-version-cleared',
+		defaultMessage: 'Cleared loader version',
+	},
+	gameVersionChanged: {
+		id: 'servers.audit-log.event.game-version-changed',
+		defaultMessage: 'Changed Minecraft version to <version></version>',
+	},
+	propertiesModified: {
+		id: 'servers.audit-log.event.server-properties-modified',
+		defaultMessage: 'Modified server properties <properties></properties>',
+	},
+	propertiesModifiedLabel: {
+		id: 'servers.audit-log.event.server-properties-modified-label',
+		defaultMessage: 'Modified server properties',
+	},
+	startupCommandModified: {
+		id: 'servers.audit-log.event.startup-command-modified',
+		defaultMessage: 'Changed startup command to <command></command>',
+	},
+	javaRuntimeModified: {
+		id: 'servers.audit-log.event.java-runtime-modified',
+		defaultMessage: 'Changed Java runtime to <vendor></vendor>',
+	},
+	javaVersionModified: {
+		id: 'servers.audit-log.event.java-version-modified',
+		defaultMessage: 'Changed Java version to <java-version></java-version>',
+	},
+	configChanged: {
+		id: 'servers.audit-log.event.config-changed',
+		defaultMessage: 'Changed server configuration',
+	},
+})
+
+const { formatMessage } = useVIntl()
+const propertiesLabel = computed(
+	() => props.properties?.map((property) => property.label).join(', ') ?? '',
+)
+const newLoader = computed(() =>
+	props.kind === 'loader_version' && props.newLoader == null ? 'vanilla' : props.newLoader,
+)
+const newLoaderLabel = computed(() => formatLoader(newLoader.value))
+
+const kindMessages: Record<string, MessageDescriptor> = {
+	game_version: messages.gameVersionChanged,
+	properties: messages.propertiesModified,
+	startup_command: messages.startupCommandModified,
+	java_runtime: messages.javaRuntimeModified,
+	java_version: messages.javaVersionModified,
+}
+
+const message = computed(() => {
+	if (props.kind === 'loader_version') {
+		if (newLoader.value && props.newVersion) return messages.loaderAndVersionChanged
+		if (newLoader.value) return messages.loaderChanged
+		return props.newVersion == null ? messages.loaderVersionCleared : messages.loaderVersionChanged
+	}
+	return kindMessages[props.kind] ?? messages.configChanged
+})
+
+function formatLoader(loader: string | null | undefined): string {
+	if (!loader) return ''
+	return loader
+		.split(/[-_]/)
+		.filter(Boolean)
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join(' ')
+}
+</script>
diff --git a/packages/ui/src/components/servers/access/events/ConsoleEvent.vue b/packages/ui/src/components/servers/access/events/ConsoleEvent.vue
new file mode 100644
index 0000000000..c55124461f
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/ConsoleEvent.vue
@@ -0,0 +1,27 @@
+<template>
+	<BaseEvent>
+		<IntlFormatted :message-id="messages.commandExecuted">
+			<template #command>
+				<EventInlineText :text="command" class="align-middle font-mono font-medium text-contrast" />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { defineMessages } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+import EventInlineText from './EventInlineText.vue'
+
+defineProps<{
+	command: string
+}>()
+
+const messages = defineMessages({
+	commandExecuted: {
+		id: 'servers.audit-log.event.console-command-executed',
+		defaultMessage: 'Ran console command <command></command>',
+	},
+})
+</script>
diff --git a/packages/ui/src/components/servers/access/events/EventEntityLink.vue b/packages/ui/src/components/servers/access/events/EventEntityLink.vue
new file mode 100644
index 0000000000..62b66ebeba
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/EventEntityLink.vue
@@ -0,0 +1,94 @@
+<template>
+	<AutoLink
+		:to="entity.to"
+		class="inline-flex min-w-0 max-w-full flex-wrap items-center gap-0 @[800px]:flex-nowrap"
+		:class="[
+			stackSecondary ? '!grid grid-cols-[auto_minmax(0,1fr)] items-start gap-x-2 gap-y-0.5' : '',
+			entity.to
+				? `${textWeightClass} text-contrast hover:underline`
+				: entity.muted
+					? 'text-secondary'
+					: `${textWeightClass} text-contrast`,
+			entity.mono ? 'font-mono text-[0.925em]' : '',
+			'align-middle',
+		]"
+	>
+		<span
+			v-if="showAvatar || entity.icon"
+			class="inline-flex shrink-0 items-center justify-center"
+			:class="[
+				stackSecondary ? 'row-span-2 self-center' : 'mr-1',
+				entity.icon
+					? 'size-7 rounded-lg border border-solid border-surface-5 bg-surface-4 text-secondary'
+					: '',
+			]"
+		>
+			<Avatar
+				v-if="showAvatar"
+				:src="entity.iconUrl"
+				:alt="entity.label"
+				size="1.75rem"
+				no-shadow
+				raised
+				:tint-by="entity.label || entity.id"
+				:circle="entity.iconShape === 'circle'"
+				class="inline-flex shrink-0 border border-solid border-surface-5"
+				:class="entity.iconShape === 'circle' ? '!rounded-full' : '!rounded-lg'"
+			/>
+			<component :is="entity.icon" v-else class="size-4" />
+		</span>
+		<span
+			ref="labelRef"
+			v-tooltip="truncatedTooltip(labelRef, entity.title ?? entity.label)"
+			class="min-w-0 whitespace-normal break-words leading-7 @[800px]:truncate @[800px]:whitespace-nowrap"
+			:class="stackSecondary ? 'leading-6 @[800px]:whitespace-normal @[800px]:break-words' : ''"
+		>
+			{{ entity.label }}
+		</span>
+		<span
+			v-if="entity.secondaryLabel"
+			ref="secondaryLabelRef"
+			v-tooltip="truncatedTooltip(secondaryLabelRef, entity.secondaryLabel)"
+			class="min-w-0 whitespace-normal break-words text-secondary @[800px]:truncate @[800px]:whitespace-nowrap"
+			:class="
+				stackSecondary
+					? `col-start-2 leading-5 @[800px]:whitespace-normal @[800px]:break-words ${textWeightClass}`
+					: `entity-secondary-label ${textWeightClass}`
+			"
+		>
+			<template v-if="stackSecondary">{{ entity.secondaryLabel }}</template>
+			<template v-else>&nbsp;{{ entity.secondaryLabel }}</template>
+		</span>
+	</AutoLink>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import AutoLink from '#ui/components/base/AutoLink.vue'
+import Avatar from '#ui/components/base/Avatar.vue'
+import { truncatedTooltip } from '#ui/utils/truncate'
+
+import type { EventEntity } from './types'
+
+const props = withDefaults(
+	defineProps<{
+		entity: EventEntity
+		stackSecondary?: boolean
+		textWeight?: 'medium' | 'semibold'
+	}>(),
+	{
+		stackSecondary: false,
+		textWeight: 'medium',
+	},
+)
+
+const textWeightClass = computed(() =>
+	props.textWeight === 'semibold' ? 'font-semibold' : 'font-medium',
+)
+const showAvatar = computed(
+	() => props.entity.iconUrl != null || props.entity.iconShape === 'circle',
+)
+const labelRef = ref<HTMLElement | null>(null)
+const secondaryLabelRef = ref<HTMLElement | null>(null)
+</script>
diff --git a/packages/ui/src/components/servers/access/events/EventEntityList.vue b/packages/ui/src/components/servers/access/events/EventEntityList.vue
new file mode 100644
index 0000000000..e9f014cbef
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/EventEntityList.vue
@@ -0,0 +1,147 @@
+<template>
+	<span
+		class="inline-flex max-w-full min-w-0 items-center gap-x-1 align-middle"
+		:class="
+			singleLine
+				? 'flex-wrap gap-y-0.5 whitespace-normal @[800px]:flex-nowrap @[800px]:overflow-hidden @[800px]:whitespace-nowrap'
+				: 'flex-wrap gap-y-0.5'
+		"
+	>
+		<template v-for="(entity, index) in visibleEntities" :key="entity.id">
+			<EventEntityLink
+				:entity="entity"
+				:text-weight="entityTextWeight"
+				:class="singleLine ? 'min-w-0 shrink' : ''"
+			/>
+			<span v-if="index < visibleEntities.length - 1" class="shrink-0 text-secondary">,</span>
+		</template>
+		<Tooltip
+			v-if="hiddenCount > 0"
+			theme="dismissable-prompt"
+			class="inline-flex shrink-0 items-center"
+			:triggers="['hover', 'focus']"
+			:popper-triggers="['hover', 'focus']"
+			popper-class="v-popper--interactive audit-log-entity-list-popper"
+			placement="top"
+			:delay="{ show: 200, hide: 100 }"
+			no-auto-focus
+		>
+			<button
+				type="button"
+				class="inline-flex min-w-0 cursor-help items-center rounded-full border border-solid border-surface-5 bg-surface-4 px-1.5 py-1 leading-none text-xs text-secondary"
+				:aria-label="hiddenTooltip"
+			>
+				{{ formatMessage(messages.hiddenCount, { count: hiddenCount }) }}
+			</button>
+			<template #popper>
+				<div class="relative max-w-[22rem]">
+					<Transition
+						enter-active-class="transition-all duration-200 ease-out"
+						enter-from-class="opacity-0 max-h-0"
+						enter-to-class="opacity-100 max-h-3"
+						leave-active-class="transition-all duration-200 ease-in"
+						leave-from-class="opacity-100 max-h-3"
+						leave-to-class="opacity-0 max-h-0"
+					>
+						<div
+							v-if="showTopFade"
+							class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-3 bg-gradient-to-b from-bg-raised to-transparent"
+						/>
+					</Transition>
+					<div
+						ref="hiddenEntitiesScrollContainer"
+						class="flex flex-col gap-2 overflow-y-auto overscroll-contain py-0.5"
+						:style="{ maxHeight: hiddenEntitiesMaxHeight }"
+						@scroll="checkScrollState"
+					>
+						<EventEntityLink
+							v-for="entity in hiddenEntities"
+							:key="entity.id"
+							:entity="entity"
+							:text-weight="entityTextWeight"
+							class="min-w-0 pr-4"
+							stack-secondary
+						/>
+					</div>
+					<Transition
+						enter-active-class="transition-all duration-200 ease-out"
+						enter-from-class="opacity-0 max-h-0"
+						enter-to-class="opacity-100 max-h-3"
+						leave-active-class="transition-all duration-200 ease-in"
+						leave-from-class="opacity-100 max-h-3"
+						leave-to-class="opacity-0 max-h-0"
+					>
+						<div
+							v-if="showBottomFade"
+							class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-3 bg-gradient-to-t from-bg-raised to-transparent"
+						/>
+					</Transition>
+				</div>
+			</template>
+		</Tooltip>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+import { computed, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '../../../../composables/i18n'
+import { useScrollIndicator } from '../../../../composables/scroll-indicator'
+import EventEntityLink from './EventEntityLink.vue'
+import type { EventEntity } from './types'
+
+const props = withDefaults(
+	defineProps<{
+		entities: EventEntity[]
+		limit?: number
+		singleLine?: boolean
+		entityTextWeight?: 'medium' | 'semibold'
+	}>(),
+	{
+		limit: 3,
+		singleLine: true,
+		entityTextWeight: 'medium',
+	},
+)
+
+const { formatMessage, locale } = useVIntl()
+const hiddenEntitiesScrollContainer = ref<HTMLElement | null>(null)
+const { showTopFade, showBottomFade, checkScrollState } = useScrollIndicator(
+	hiddenEntitiesScrollContainer,
+)
+
+const TOOLTIP_VISIBLE_ROWS = 8
+const TOOLTIP_ENTITY_HEIGHT_REM = 1.75
+const TOOLTIP_ENTITY_GAP_REM = 0.5
+const hiddenEntitiesMaxHeight = `${
+	TOOLTIP_VISIBLE_ROWS * TOOLTIP_ENTITY_HEIGHT_REM +
+	(TOOLTIP_VISIBLE_ROWS - 1) * TOOLTIP_ENTITY_GAP_REM
+}rem`
+
+const messages = defineMessages({
+	hiddenCount: {
+		id: 'servers.audit-log.event.entity-list.hidden-count',
+		defaultMessage: '+{count, number}',
+	},
+})
+
+const visibleEntities = computed(() => props.entities.slice(0, props.limit))
+const hiddenEntities = computed(() => props.entities.slice(props.limit))
+const hiddenCount = computed(() => hiddenEntities.value.length)
+const hiddenTooltip = computed(() => {
+	void locale.value
+	return new Intl.ListFormat(locale.value, {
+		style: 'long',
+		type: 'conjunction',
+	}).format(hiddenEntities.value.map((entity) => entity.label))
+})
+</script>
+
+<style lang="scss">
+.v-popper__popper.v-popper--theme-dismissable-prompt.audit-log-entity-list-popper {
+	.v-popper__inner {
+		padding-right: 0 !important;
+	}
+}
+</style>
diff --git a/packages/ui/src/components/servers/access/events/EventInlineText.vue b/packages/ui/src/components/servers/access/events/EventInlineText.vue
new file mode 100644
index 0000000000..5337534be3
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/EventInlineText.vue
@@ -0,0 +1,23 @@
+<template>
+	<span
+		ref="textRef"
+		v-tooltip="truncatedTooltip(textRef, tooltipText)"
+		class="max-w-full min-w-0 whitespace-normal break-words @[800px]:truncate @[800px]:whitespace-nowrap"
+	>
+		<slot>{{ text }}</slot>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { truncatedTooltip } from '#ui/utils/truncate'
+
+const props = defineProps<{
+	text: string | number
+	tooltip?: string
+}>()
+
+const textRef = ref<HTMLElement | null>(null)
+const tooltipText = computed(() => props.tooltip ?? String(props.text))
+</script>
diff --git a/packages/ui/src/components/servers/access/events/FileEvent.vue b/packages/ui/src/components/servers/access/events/FileEvent.vue
new file mode 100644
index 0000000000..5f8ac13e62
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/FileEvent.vue
@@ -0,0 +1,64 @@
+<template>
+	<BaseEvent>
+		<IntlFormatted :message-id="message">
+			<template #file>
+				<EventEntityLink v-if="file" :entity="file" />
+			</template>
+			<template #from>
+				<EventEntityLink v-if="from" :entity="from" />
+			</template>
+			<template #to>
+				<EventEntityLink v-if="to" :entity="to" />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages, type MessageDescriptor } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+import EventEntityLink from './EventEntityLink.vue'
+import type { EventEntity } from './types'
+
+const props = defineProps<{
+	kind: string
+	file?: EventEntity
+	from?: EventEntity
+	to?: EventEntity
+}>()
+
+const messages = defineMessages({
+	uploaded: {
+		id: 'servers.audit-log.event.file-uploaded',
+		defaultMessage: 'Uploaded file <file></file>',
+	},
+	deleted: {
+		id: 'servers.audit-log.event.file-deleted',
+		defaultMessage: 'Deleted file <file></file>',
+	},
+	edited: {
+		id: 'servers.audit-log.event.file-edited',
+		defaultMessage: 'Edited file <file></file>',
+	},
+	renamed: {
+		id: 'servers.audit-log.event.file-renamed',
+		defaultMessage: 'Renamed <from></from> to <to></to>',
+	},
+	changed: {
+		id: 'servers.audit-log.event.file-changed',
+		defaultMessage: 'Changed file <file></file>',
+	},
+})
+
+const kindMessages: Record<string, MessageDescriptor> = {
+	uploaded: messages.uploaded,
+	deleted: messages.deleted,
+	edited: messages.edited,
+	renamed: messages.renamed,
+}
+
+const message = computed(() => kindMessages[props.kind] ?? messages.changed)
+</script>
diff --git a/packages/ui/src/components/servers/access/events/ModpackEvent.vue b/packages/ui/src/components/servers/access/events/ModpackEvent.vue
new file mode 100644
index 0000000000..0cc5db87d7
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/ModpackEvent.vue
@@ -0,0 +1,68 @@
+<template>
+	<BaseEvent>
+		<IntlFormatted :message-id="message">
+			<template #modpack>
+				<EventEntityLink v-if="modpack" :entity="modpack" />
+			</template>
+			<template #version>
+				<EventInlineText :text="versionLabel" class="align-middle font-mono text-secondary" />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+import EventEntityLink from './EventEntityLink.vue'
+import EventInlineText from './EventInlineText.vue'
+import type { EventEntity } from './types'
+
+const props = defineProps<{
+	kind: 'changed' | 'unlinked'
+	modpack?: EventEntity | null
+	versionLabel?: string | null
+}>()
+
+const messages = defineMessages({
+	changed: {
+		id: 'servers.audit-log.event.modpack-changed',
+		defaultMessage: 'Changed modpack',
+	},
+	changedToModpack: {
+		id: 'servers.audit-log.event.modpack-changed-to-modpack',
+		defaultMessage: 'Changed modpack to <modpack></modpack>',
+	},
+	changedToVersion: {
+		id: 'servers.audit-log.event.modpack-changed-to-version',
+		defaultMessage: 'Changed modpack to version <version></version>',
+	},
+	unlinked: {
+		id: 'servers.audit-log.event.modpack-unlinked',
+		defaultMessage: 'Unlinked modpack',
+	},
+	unlinkedModpack: {
+		id: 'servers.audit-log.event.modpack-unlinked-modpack',
+		defaultMessage: 'Unlinked modpack <modpack></modpack>',
+	},
+	unlinkedVersion: {
+		id: 'servers.audit-log.event.modpack-unlinked-version',
+		defaultMessage: 'Unlinked modpack version <version></version>',
+	},
+})
+
+const message = computed(() => {
+	if (props.kind === 'unlinked') {
+		if (props.modpack) return messages.unlinkedModpack
+		return props.versionLabel ? messages.unlinkedVersion : messages.unlinked
+	}
+
+	if (props.modpack) return messages.changedToModpack
+	return props.versionLabel ? messages.changedToVersion : messages.changed
+})
+
+const versionLabel = computed(() => props.versionLabel ?? '')
+</script>
diff --git a/packages/ui/src/components/servers/access/events/NetworkEvent.vue b/packages/ui/src/components/servers/access/events/NetworkEvent.vue
new file mode 100644
index 0000000000..2e82c38542
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/NetworkEvent.vue
@@ -0,0 +1,35 @@
+<template>
+	<BaseEvent>
+		<IntlFormatted :message-id="message">
+			<template #port>
+				<span class="font-mono font-medium text-contrast">{{ port }}</span>
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+
+const props = defineProps<{
+	kind: 'added' | 'removed'
+	port: number
+}>()
+
+const messages = defineMessages({
+	added: {
+		id: 'servers.audit-log.event.port-allocation-added',
+		defaultMessage: 'Added port allocation <port></port>',
+	},
+	removed: {
+		id: 'servers.audit-log.event.port-allocation-removed',
+		defaultMessage: 'Removed port allocation <port></port>',
+	},
+})
+
+const message = computed(() => (props.kind === 'added' ? messages.added : messages.removed))
+</script>
diff --git a/packages/ui/src/components/servers/access/events/ServerMetaEvent.vue b/packages/ui/src/components/servers/access/events/ServerMetaEvent.vue
new file mode 100644
index 0000000000..3782d3c623
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/ServerMetaEvent.vue
@@ -0,0 +1,124 @@
+<template>
+	<BaseEvent>
+		<IntlFormatted :message-id="message">
+			<template #name>
+				<EventEntityLink :entity="nameEntity" />
+			</template>
+			<template #subdomain>
+				<EventEntityLink :entity="subdomainEntity" />
+			</template>
+			<template #specs>
+				<EventInlineText :text="specsLabel" class="align-middle font-medium text-contrast" />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { defineMessages, type MessageDescriptor, useVIntl } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import BaseEvent from './BaseEvent.vue'
+import EventEntityLink from './EventEntityLink.vue'
+import EventInlineText from './EventInlineText.vue'
+import type { EventEntity } from './types'
+
+const props = defineProps<{
+	kind: 'name' | 'subdomain' | 'plan'
+	name?: string
+	subdomain?: string
+	newSpecs?: Record<string, unknown>
+}>()
+
+const { formatMessage, locale } = useVIntl()
+
+const messages = defineMessages({
+	nameChanged: {
+		id: 'servers.audit-log.event.server-name-changed',
+		defaultMessage: 'Changed server name to <name></name>',
+	},
+	subdomainChanged: {
+		id: 'servers.audit-log.event.server-subdomain-changed',
+		defaultMessage: 'Changed server subdomain to <subdomain></subdomain>',
+	},
+	planChanged: {
+		id: 'servers.audit-log.event.server-plan-changed',
+		defaultMessage: 'Changed plan to <specs></specs>',
+	},
+	changed: {
+		id: 'servers.audit-log.event.server-metadata-changed',
+		defaultMessage: 'Changed server metadata',
+	},
+	cpuSpec: {
+		id: 'servers.audit-log.event.server-plan.cpu',
+		defaultMessage: '{count, plural, one {# CPU} other {# CPUs}}',
+	},
+	ramGb: {
+		id: 'servers.audit-log.event.server-plan.ram-gb',
+		defaultMessage: '{amount, number} GB RAM',
+	},
+	ramMb: {
+		id: 'servers.audit-log.event.server-plan.ram-mb',
+		defaultMessage: '{amount, number} MB RAM',
+	},
+	storageGb: {
+		id: 'servers.audit-log.event.server-plan.storage-gb',
+		defaultMessage: '{amount, number} GB storage',
+	},
+	storageMb: {
+		id: 'servers.audit-log.event.server-plan.storage-mb',
+		defaultMessage: '{amount, number} MB storage',
+	},
+	newPlan: {
+		id: 'servers.audit-log.event.server-plan.new-plan',
+		defaultMessage: 'new plan',
+	},
+})
+
+const kindMessages: Record<string, MessageDescriptor> = {
+	name: messages.nameChanged,
+	subdomain: messages.subdomainChanged,
+	plan: messages.planChanged,
+}
+
+const message = computed(() => kindMessages[props.kind] ?? messages.changed)
+const nameEntity = computed<EventEntity>(() => ({
+	id: props.name ?? '',
+	label: props.name ?? '',
+}))
+const subdomainEntity = computed<EventEntity>(() => ({
+	id: props.subdomain ?? '',
+	label: props.subdomain ?? '',
+	mono: true,
+}))
+
+const specsLabel = computed(() => {
+	void locale.value
+
+	const cpu = numberValue(props.newSpecs?.cpu)
+	const memory = numberValue(props.newSpecs?.memory_mb)
+	const storage = numberValue(props.newSpecs?.storage_mb)
+	const parts = []
+	if (cpu != null) parts.push(formatMessage(messages.cpuSpec, { count: cpu }))
+	if (memory != null) parts.push(formatMemoryMb(memory))
+	if (storage != null) parts.push(formatStorageMb(storage))
+	return parts.length > 0 ? parts.join(' / ') : formatMessage(messages.newPlan)
+})
+
+function numberValue(value: unknown): number | null {
+	return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function formatMemoryMb(value: number): string {
+	if (value >= 1024) return formatMessage(messages.ramGb, { amount: Math.round(value / 1024) })
+	return formatMessage(messages.ramMb, { amount: value })
+}
+
+function formatStorageMb(value: number): string {
+	if (value >= 1024) {
+		return formatMessage(messages.storageGb, { amount: Math.round(value / 1024) })
+	}
+	return formatMessage(messages.storageMb, { amount: value })
+}
+</script>
diff --git a/packages/ui/src/components/servers/access/events/UnknownEvent.vue b/packages/ui/src/components/servers/access/events/UnknownEvent.vue
new file mode 100644
index 0000000000..59effd1e19
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/UnknownEvent.vue
@@ -0,0 +1,25 @@
+<template>
+	<BaseEvent>
+		<span class="mr-1 text-secondary">{{ formatMessage(messages.unknownEvent) }}</span>
+		<EventInlineText :text="rawAction" class="font-mono text-secondary" />
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import { defineMessages, useVIntl } from '../../../../composables/i18n'
+import BaseEvent from './BaseEvent.vue'
+import EventInlineText from './EventInlineText.vue'
+
+defineProps<{
+	rawAction: string
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	unknownEvent: {
+		id: 'servers.audit-log.event.unknown',
+		defaultMessage: 'Unknown event',
+	},
+})
+</script>
diff --git a/packages/ui/src/components/servers/access/events/UserAccessEvent.vue b/packages/ui/src/components/servers/access/events/UserAccessEvent.vue
new file mode 100644
index 0000000000..755c1353ed
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/UserAccessEvent.vue
@@ -0,0 +1,123 @@
+<template>
+	<BaseEvent>
+		<IntlFormatted :message-id="message" :values="{ permissions: permissionLabel }">
+			<template #target-user>
+				<EventEntityLink :entity="targetUser" />
+			</template>
+			<template #permission-label="{ children }">
+				<span
+					v-if="permissionRole"
+					class="inline-flex h-7 items-center rounded-full border border-solid px-2.5 py-1 text-sm font-semibold leading-none align-middle"
+					:class="roleClasses(permissionRole)"
+				>
+					<component :is="() => children" />
+				</span>
+				<component :is="() => children" v-else />
+			</template>
+		</IntlFormatted>
+	</BaseEvent>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { computed } from 'vue'
+
+import { defineMessages, type MessageDescriptor, useVIntl } from '../../../../composables/i18n'
+import IntlFormatted from '../../../base/IntlFormatted.vue'
+import { apiPermissionsToAccessRole } from '../permissions'
+import type { ServerAccessRole } from '../types'
+import BaseEvent from './BaseEvent.vue'
+import EventEntityLink from './EventEntityLink.vue'
+import type { EventEntity } from './types'
+
+const props = defineProps<{
+	kind: 'invited' | 'invite_revoked' | 'permission_modified' | 'removed'
+	targetUser: EventEntity
+	permissions?: Archon.ServerUsers.v1.UserScope | null
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	invited: {
+		id: 'servers.audit-log.event.user-invited',
+		defaultMessage: 'Invited <target-user></target-user>',
+	},
+	invitedWithPermissions: {
+		id: 'servers.audit-log.event.user-invited-with-permissions',
+		defaultMessage:
+			'Invited <target-user></target-user> with <permission-label>{permissions}</permission-label>',
+	},
+	inviteRevoked: {
+		id: 'servers.audit-log.event.user-invite-revoked',
+		defaultMessage: 'Revoked invite for <target-user></target-user>',
+	},
+	permissionModified: {
+		id: 'servers.audit-log.event.user-permission-modified',
+		defaultMessage: 'Changed permissions for <target-user></target-user>',
+	},
+	permissionModifiedWithPermissions: {
+		id: 'servers.audit-log.event.user-permission-modified-with-permissions',
+		defaultMessage:
+			'Changed permissions for <target-user></target-user> to <permission-label>{permissions}</permission-label>',
+	},
+	removed: {
+		id: 'servers.audit-log.event.user-removed',
+		defaultMessage: 'Removed <target-user></target-user>',
+	},
+	ownerRole: {
+		id: 'servers.access-role.owner',
+		defaultMessage: 'Owner',
+	},
+	editorRole: {
+		id: 'servers.access-role.editor',
+		defaultMessage: 'Editor',
+	},
+	viewerRole: {
+		id: 'servers.access-role.viewer',
+		defaultMessage: 'Limited',
+	},
+})
+
+const roleMessages: Record<ServerAccessRole, MessageDescriptor> = {
+	owner: messages.ownerRole,
+	editor: messages.editorRole,
+	viewer: messages.viewerRole,
+}
+
+const message = computed(() => {
+	if (props.kind === 'invited') {
+		return permissionLabel.value ? messages.invitedWithPermissions : messages.invited
+	}
+	if (props.kind === 'invite_revoked') return messages.inviteRevoked
+	if (props.kind === 'permission_modified') {
+		return permissionLabel.value
+			? messages.permissionModifiedWithPermissions
+			: messages.permissionModified
+	}
+	return messages.removed
+})
+
+const permissionLabel = computed(() => {
+	const role = permissionRole.value
+	if (role) return formatMessage(roleMessages[role])
+	return ''
+})
+
+const permissionRole = computed(() =>
+	props.permissions == null || props.permissions === ''
+		? null
+		: apiPermissionsToAccessRole(props.permissions),
+)
+
+function roleClasses(role: ServerAccessRole): string {
+	switch (role) {
+		case 'owner':
+			return 'border-orange bg-highlight-orange text-orange'
+		case 'editor':
+			return 'border-green bg-highlight-green text-brand'
+		case 'viewer':
+			return 'border-blue bg-highlight-blue text-blue'
+	}
+}
+</script>
diff --git a/packages/ui/src/components/servers/access/events/index.ts b/packages/ui/src/components/servers/access/events/index.ts
new file mode 100644
index 0000000000..5c1e132022
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/index.ts
@@ -0,0 +1,16 @@
+export { default as AddonEvent } from './AddonEvent.vue'
+export { default as BackupEvent } from './BackupEvent.vue'
+export { default as BaseEvent } from './BaseEvent.vue'
+export { default as BasicStringEvent } from './BasicStringEvent.vue'
+export { default as ConfigEvent } from './ConfigEvent.vue'
+export { default as ConsoleEvent } from './ConsoleEvent.vue'
+export { default as EventEntityLink } from './EventEntityLink.vue'
+export { default as EventEntityList } from './EventEntityList.vue'
+export { default as FileEvent } from './FileEvent.vue'
+export { default as ModpackEvent } from './ModpackEvent.vue'
+export { default as NetworkEvent } from './NetworkEvent.vue'
+export * from './parser'
+export { default as ServerMetaEvent } from './ServerMetaEvent.vue'
+export * from './types'
+export { default as UnknownEvent } from './UnknownEvent.vue'
+export { default as UserAccessEvent } from './UserAccessEvent.vue'
diff --git a/packages/ui/src/components/servers/access/events/parser.ts b/packages/ui/src/components/servers/access/events/parser.ts
new file mode 100644
index 0000000000..242f8b2713
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/parser.ts
@@ -0,0 +1,609 @@
+import type { Archon } from '@modrinth/api-client'
+import { PackageIcon } from '@modrinth/assets'
+import type { Component } from 'vue'
+
+import AddonEvent from './AddonEvent.vue'
+import BackupEvent from './BackupEvent.vue'
+import BasicStringEvent from './BasicStringEvent.vue'
+import ConfigEvent from './ConfigEvent.vue'
+import ConsoleEvent from './ConsoleEvent.vue'
+import FileEvent from './FileEvent.vue'
+import ModpackEvent from './ModpackEvent.vue'
+import NetworkEvent from './NetworkEvent.vue'
+import ServerMetaEvent from './ServerMetaEvent.vue'
+import type {
+	AuditActor,
+	AuditAddonEventItem,
+	AuditBackupEventItem,
+	AuditEventLookups,
+	AuditWorld,
+	BaseEventProps,
+	EventEntity,
+	ParsedAuditEvent,
+} from './types'
+import UnknownEvent from './UnknownEvent.vue'
+import UserAccessEvent from './UserAccessEvent.vue'
+
+const basicEvents = new Set([
+	'server_created',
+	'server_reallocated',
+	'server_repaired',
+	'server_reset',
+	'server_started',
+	'server_stopped',
+	'server_restarted',
+	'server_killed',
+	'sftp_login',
+	'console_cleared',
+])
+
+export function parseAuditEvent(
+	entry: Archon.Actions.v1.ActionEntry,
+	lookups: AuditEventLookups,
+): ParsedAuditEvent {
+	const action = entry.action?.action || 'unknown'
+	const metadata = entry.action?.metadata
+	const base = baseProps(entry, lookups, action)
+
+	try {
+		if (basicEvents.has(action)) {
+			return parsed(BasicStringEvent, base, {}, actionSearchParts(action))
+		}
+
+		switch (action) {
+			case 'changed_server_name': {
+				const record = metadataRecord(metadata)
+				const name = stringField(record, 'name')
+				if (!name) return unknown(base, action)
+				return parsed(
+					ServerMetaEvent,
+					base,
+					{ kind: 'name', name },
+					actionSearchParts(action, name),
+				)
+			}
+			case 'changed_server_subdomain': {
+				const record = metadataRecord(metadata)
+				const subdomain = stringField(record, 'subdomain')
+				if (!subdomain) return unknown(base, action)
+				return parsed(ServerMetaEvent, base, { kind: 'subdomain', subdomain }, [
+					...actionSearchParts(action),
+					subdomain,
+				])
+			}
+			case 'server_plan_changed': {
+				const record = metadataRecord(metadata)
+				const newSpecs = objectField(record, 'new_specs')
+				if (!newSpecs) return unknown(base, action)
+				return parsed(ServerMetaEvent, base, { kind: 'plan', newSpecs }, [
+					...actionSearchParts(action),
+					...Object.values(newSpecs).map(String),
+				])
+			}
+			case 'user_invited':
+			case 'user_permission_modified': {
+				const actionMetadata = userPermissionsActionMetadata(metadataRecord(metadata))
+				if (!actionMetadata) return unknown(base, action)
+				const kind = action === 'user_invited' ? 'invited' : 'permission_modified'
+				const targetUser = userEntity(actionMetadata.user_id, lookups.users)
+				return parsed(
+					UserAccessEvent,
+					base,
+					{ kind, targetUser, permissions: actionMetadata.permissions },
+					[...actionSearchParts(action), targetUser.label, actionMetadata.permissions],
+				)
+			}
+			case 'user_invite_revoked':
+			case 'user_removed': {
+				const record = metadataRecord(metadata)
+				const userId = stringField(record, 'user_id')
+				if (!userId) return unknown(base, action)
+				const kind = action === 'user_invite_revoked' ? 'invite_revoked' : 'removed'
+				const targetUser = userEntity(userId, lookups.users)
+				return parsed(UserAccessEvent, base, { kind, targetUser }, [
+					...actionSearchParts(action),
+					targetUser.label,
+				])
+			}
+			case 'addon_added':
+			case 'addon_disabled':
+			case 'addon_enabled':
+			case 'addon_deleted':
+			case 'addon_updated': {
+				const addons = addonList(metadataRecord(metadata), lookups)
+				if (!addons) return unknown(base, action)
+				const kind = action.replace('addon_', '')
+				return parsed(AddonEvent, base, { kind, addons }, [
+					...actionSearchParts(action),
+					...addons.flatMap((addon) => [
+						addon.project.label,
+						addon.addonId,
+						addon.versionId,
+						addon.versionLabel,
+					]),
+				])
+			}
+			case 'addon_uploaded': {
+				const fileNames = stringArrayField(metadataRecord(metadata), 'file_names')
+				if (!fileNames) return unknown(base, action)
+				const files = fileNames.map((name) => fileEntity(name, lookups.serverId, false))
+				return parsed(AddonEvent, base, { kind: 'uploaded', fileNames: files }, [
+					...actionSearchParts(action),
+					...fileNames,
+				])
+			}
+			case 'modpack_changed': {
+				const record = metadataRecord(metadata)
+				const modpack = modpackEntityFromMetadata(record, lookups)
+				const versionLabel = modpack ? null : modpackVersionLabelFromMetadata(record, lookups)
+				return parsed(ModpackEvent, base, { kind: 'changed', modpack, versionLabel }, [
+					...actionSearchParts(action),
+					modpack?.id,
+					modpack?.label,
+					modpack?.secondaryLabel,
+					versionLabel,
+				])
+			}
+			case 'modpack_unlinked': {
+				const record = metadataRecord(metadata)
+				const modpack = modpackEntityFromMetadata(record, lookups)
+				const versionLabel = modpack ? null : modpackVersionLabelFromMetadata(record, lookups)
+				return parsed(ModpackEvent, base, { kind: 'unlinked', modpack, versionLabel }, [
+					...actionSearchParts(action),
+					modpack?.id,
+					modpack?.label,
+					modpack?.secondaryLabel,
+					versionLabel,
+				])
+			}
+			case 'port_allocation_added':
+			case 'port_allocation_removed': {
+				const port = numberField(metadataRecord(metadata), 'port')
+				if (port == null) return unknown(base, action)
+				return parsed(
+					NetworkEvent,
+					base,
+					{ kind: action === 'port_allocation_added' ? 'added' : 'removed', port },
+					[...actionSearchParts(action), String(port)],
+				)
+			}
+			case 'loader_version_edited': {
+				const record = metadataRecord(metadata)
+				if (!record || !('new_version' in record)) return unknown(base, action)
+				const newLoader = record.new_loader == null ? null : valueToString(record.new_loader)
+				const newVersion = record.new_version == null ? null : valueToString(record.new_version)
+				return parsed(ConfigEvent, base, { kind: 'loader_version', newLoader, newVersion }, [
+					...actionSearchParts(action),
+					newLoader,
+					newVersion,
+				])
+			}
+			case 'game_version_edited': {
+				const newVersion = stringField(metadataRecord(metadata), 'new_version')
+				if (!newVersion) return unknown(base, action)
+				return parsed(ConfigEvent, base, { kind: 'game_version', newVersion }, [
+					...actionSearchParts(action),
+					newVersion,
+				])
+			}
+			case 'server_properties_modified': {
+				const properties = objectField(metadataRecord(metadata), 'properties')
+				if (!properties) return unknown(base, action)
+				const items = Object.entries(properties).map(
+					([key, value]): EventEntity => ({
+						id: key,
+						label: `${key}: ${valueToString(value) ?? ''}`,
+						mono: true,
+					}),
+				)
+				return parsed(ConfigEvent, base, { kind: 'properties', properties: items }, [
+					...actionSearchParts(action),
+					...items.map((item) => item.label),
+				])
+			}
+			case 'startup_command_modified': {
+				const command = stringField(metadataRecord(metadata), 'command')
+				if (!command) return unknown(base, action)
+				return parsed(ConfigEvent, base, { kind: 'startup_command', command }, [
+					...actionSearchParts(action),
+					command,
+				])
+			}
+			case 'java_runtime_modified': {
+				const vendor = stringField(metadataRecord(metadata), 'vendor')
+				if (!vendor) return unknown(base, action)
+				return parsed(ConfigEvent, base, { kind: 'java_runtime', vendor }, [
+					...actionSearchParts(action),
+					vendor,
+				])
+			}
+			case 'java_version_modified': {
+				const version = numberField(metadataRecord(metadata), 'version')
+				if (version == null) return unknown(base, action)
+				return parsed(ConfigEvent, base, { kind: 'java_version', version }, [
+					...actionSearchParts(action),
+					String(version),
+				])
+			}
+			case 'file_uploaded':
+			case 'file_deleted':
+			case 'file_edited': {
+				const path = stringField(metadataRecord(metadata), 'path')
+				if (!path) return unknown(base, action)
+				const kind = action.replace('file_', '')
+				return parsed(FileEvent, base, { kind, file: fileEntity(path, lookups.serverId) }, [
+					...actionSearchParts(action),
+					path,
+				])
+			}
+			case 'file_renamed': {
+				const record = metadataRecord(metadata)
+				const from = stringField(record, 'from')
+				const to = stringField(record, 'to')
+				if (!from || !to) return unknown(base, action)
+				return parsed(
+					FileEvent,
+					base,
+					{
+						kind: 'renamed',
+						from: fileEntity(from, lookups.serverId),
+						to: fileEntity(to, lookups.serverId),
+					},
+					[...actionSearchParts(action), from, to],
+				)
+			}
+			case 'console_command_executed': {
+				const command = stringField(metadataRecord(metadata), 'command')
+				if (!command) return unknown(base, action)
+				return parsed(ConsoleEvent, base, { command }, [...actionSearchParts(action), command])
+			}
+			case 'backup_created':
+			case 'backup_restored':
+			case 'backup_deleted': {
+				const id = stringField(metadataRecord(metadata), 'id')
+				if (!id) return unknown(base, action)
+				const kind = action.replace('backup_', '')
+				const backup = backupEntity(id, lookups)
+				return parsed(BackupEvent, base, { kind, backup: backup ?? undefined, backupId: id }, [
+					...actionSearchParts(action),
+					backup?.label,
+					id,
+				])
+			}
+			case 'backup_renamed': {
+				const record = metadataRecord(metadata)
+				const id = stringField(record, 'id')
+				const from = stringField(record, 'from')
+				const to = stringField(record, 'to')
+				if (!id || !from || !to) return unknown(base, action)
+				const backup = backupEntity(id, lookups)
+				return parsed(
+					BackupEvent,
+					base,
+					{ kind: 'renamed', backup: backup ?? undefined, backupId: id, from, to },
+					[...actionSearchParts(action), backup?.label, from, to, id],
+				)
+			}
+			default:
+				return unknown(base, action)
+		}
+	} catch {
+		return unknown(base, action)
+	}
+}
+
+function baseProps(
+	entry: Archon.Actions.v1.ActionEntry,
+	lookups: AuditEventLookups,
+	action: string,
+): BaseEventProps {
+	return {
+		action,
+		timestamp: entry.timestamp,
+		actor: actorFromEntry(entry.actor, lookups.users),
+		world: worldFromId(entry.world_id ?? null, lookups.worldById),
+	}
+}
+
+function parsed(
+	component: Component,
+	base: BaseEventProps,
+	props: Record<string, unknown>,
+	searchParts: unknown[],
+): ParsedAuditEvent {
+	return {
+		key: base.action,
+		component,
+		props: { ...base, ...props },
+		searchText: searchParts
+			.filter((part): part is string => typeof part === 'string' && part.length > 0)
+			.join(' ')
+			.toLowerCase(),
+	}
+}
+
+function unknown(base: BaseEventProps, rawAction: string): ParsedAuditEvent {
+	return parsed(UnknownEvent, base, { rawAction }, [rawAction])
+}
+
+function actionSearchParts(action: string, ...extra: unknown[]): unknown[] {
+	return [action, action.replaceAll('_', ' '), ...extra]
+}
+
+function actorFromEntry(
+	actor: Archon.Actions.v1.ActionUser,
+	users: Record<string, Archon.Actions.v1.UserResp>,
+): AuditActor {
+	if (actor.type === 'support') {
+		const user = actor.user_id ? users[actor.user_id] : undefined
+		return {
+			id: 'support',
+			username: user?.username ? `Support (${user.username})` : 'support',
+		}
+	}
+
+	const user = users[actor.user_id]
+	return {
+		id: actor.user_id,
+		username: user?.username ?? actor.user_id,
+		avatarUrl: user?.avatar_url || undefined,
+		profilePath: user?.username ? `/user/${encodeURIComponent(user.username)}` : undefined,
+	}
+}
+
+function userPermissionsActionMetadata(
+	record: Record<string, unknown> | null,
+): Archon.Actions.v1.UserPermissionsActionMetadata | null {
+	const userId = stringField(record, 'user_id')
+	if (!userId) return null
+
+	return {
+		user_id: userId,
+		permissions: permissionField(record?.permissions),
+	}
+}
+
+function permissionField(value: unknown): Archon.ServerUsers.v1.UserScope | null {
+	if (typeof value === 'number' && Number.isFinite(value)) return value
+	if (typeof value === 'string') return value.trim() || null
+	if (Array.isArray(value)) {
+		const permissions = value
+			.filter((permission): permission is string => typeof permission === 'string')
+			.map((permission) => permission.trim())
+			.filter(Boolean)
+		return permissions.length > 0 ? permissions.join(' | ') : null
+	}
+	return null
+}
+
+function worldFromId(
+	worldId: string | null,
+	worldById: Map<string, AuditWorld>,
+): AuditWorld | null {
+	if (!worldId) return null
+	return worldById.get(worldId) ?? { id: worldId, name: worldId }
+}
+
+function userEntity(
+	userId: string,
+	users: Record<string, Archon.Actions.v1.UserResp>,
+): EventEntity {
+	const user = users[userId]
+	const label = user?.username ?? userId
+	return {
+		id: userId,
+		label,
+		iconUrl: user?.avatar_url || undefined,
+		iconShape: 'circle',
+		to: user?.username ? `/user/${encodeURIComponent(user.username)}` : undefined,
+	}
+}
+
+function addonList(
+	record: Record<string, unknown> | null,
+	lookups: AuditEventLookups,
+): AuditAddonEventItem[] | null {
+	const list = arrayField(record, 'addons')
+	if (!list) return null
+
+	const addons: AuditAddonEventItem[] = []
+	for (const item of list) {
+		const addonRecord = metadataRecord(item)
+		const addonId = stringField(addonRecord, 'addon_id')
+		const versionId = stringField(addonRecord, 'version_id')
+		if (!addonId || !versionId) return null
+		addons.push(addonEntity(addonId, versionId, lookups.addons, lookups.versions))
+	}
+	return addons
+}
+
+function addonEntity(
+	addonId: string,
+	versionId: string,
+	addons: Record<string, Archon.Actions.v1.AddonResp>,
+	versions: Record<string, Archon.Actions.v1.VersionResp>,
+): AuditAddonEventItem {
+	const addon = addons[addonId]
+	const versionLabel = resolveVersionLabel(versionId, versions)
+	const projectIdOrSlug = addon?.slug || addonId
+	return {
+		addonId,
+		versionId,
+		versionLabel,
+		project: {
+			id: addonId,
+			label: addon?.title || shortId(addonId),
+			secondaryLabel: versionLabel,
+			icon: PackageIcon,
+			iconUrl: addon?.icon_url || undefined,
+			iconShape: 'square',
+			to: `/project/${encodeURIComponent(projectIdOrSlug)}/version/${encodeURIComponent(versionId)}`,
+		},
+	}
+}
+
+function resolveVersionLabel(
+	versionId: string,
+	versions: Record<string, Archon.Actions.v1.VersionResp>,
+): string {
+	const version = versions[versionId]
+	return version?.version_number || version?.name || shortId(versionId)
+}
+
+function backupEntity(id: string, lookups: AuditEventLookups): AuditBackupEventItem | null {
+	const backup = lookups.backupById.get(id)
+	if (!backup) return null
+
+	return {
+		id,
+		backupId: id,
+		found: true,
+		label: backup.name,
+		to: {
+			path: `/hosting/manage/${lookups.serverId}/backups`,
+			query: { backup: id },
+		},
+	}
+}
+
+function fileEntity(path: string, serverId: string, link = true): EventEntity {
+	return {
+		id: path,
+		label: path,
+		mono: true,
+		to: link
+			? {
+					path: `/hosting/manage/${serverId}/files`,
+					query: {
+						path: parentPath(path),
+						editing: path,
+					},
+				}
+			: undefined,
+	}
+}
+
+function parentPath(path: string): string {
+	const normalized = path.startsWith('/') ? path : `/${path}`
+	const lastSlash = normalized.lastIndexOf('/')
+	if (lastSlash <= 0) return '/'
+	return normalized.slice(0, lastSlash)
+}
+
+function metadataRecord(value: unknown): Record<string, unknown> | null {
+	if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+	return value as Record<string, unknown>
+}
+
+function objectField(
+	record: Record<string, unknown> | null,
+	key: string,
+): Record<string, unknown> | null {
+	return metadataRecord(record?.[key])
+}
+
+function arrayField(record: Record<string, unknown> | null, key: string): unknown[] | null {
+	const value = record?.[key]
+	return Array.isArray(value) ? value : null
+}
+
+function stringArrayField(record: Record<string, unknown> | null, key: string): string[] | null {
+	const array = arrayField(record, key)
+	if (!array || !array.every((item) => typeof item === 'string')) return null
+	return array
+}
+
+function modpackEntityFromMetadata(
+	record: Record<string, unknown> | null,
+	lookups: AuditEventLookups,
+): EventEntity | null {
+	const spec = metadataRecord(record?.spec)
+	if (!spec) return null
+
+	const platform = stringField(spec, 'platform')
+	if (platform === 'modrinth') {
+		const projectId = stringField(spec, 'project_id')
+		const versionId = stringField(spec, 'version_id')
+		if (!projectId && !versionId) return null
+
+		const project = projectId ? lookups.addons[projectId] : undefined
+		const versionLabel = versionId ? resolveVersionLabel(versionId, lookups.versions) : undefined
+		const projectIdOrSlug = project?.slug || projectId
+		const label = project?.title || (projectId ? shortId(projectId) : versionLabel)
+
+		return {
+			id: projectId || versionId || 'modrinth',
+			label: label || 'Modrinth modpack',
+			secondaryLabel: versionLabel,
+			icon: PackageIcon,
+			iconUrl: project?.icon_url || undefined,
+			iconShape: 'square',
+			to: projectIdOrSlug
+				? versionId
+					? `/project/${encodeURIComponent(projectIdOrSlug)}/version/${encodeURIComponent(versionId)}`
+					: `/project/${encodeURIComponent(projectIdOrSlug)}`
+				: undefined,
+			title: project?.title ? undefined : projectId || versionId || undefined,
+		}
+	}
+
+	if (platform === 'local_file') {
+		const filename = stringField(spec, 'filename')
+		const name = stringField(spec, 'name')
+		const versionId = stringField(spec, 'version_id')
+		if (!filename && !name && !versionId) return null
+
+		return {
+			id: filename || name || versionId || 'local-file',
+			label: name || filename || versionId || 'Local modpack',
+			secondaryLabel: name && filename ? filename : versionId || undefined,
+			icon: PackageIcon,
+			iconShape: 'square',
+			mono: !name,
+			title: filename || name || undefined,
+		}
+	}
+
+	return null
+}
+
+function modpackVersionLabelFromMetadata(
+	record: Record<string, unknown> | null,
+	lookups: AuditEventLookups,
+): string | null {
+	const direct = valueToString(record?.new_version)
+	if (direct != null) return direct
+
+	const spec = metadataRecord(record?.spec)
+	if (!spec) return null
+
+	const versionId = valueToString(spec.version_id)
+	if (versionId != null) return resolveVersionLabel(versionId, lookups.versions)
+
+	if (spec.platform === 'local_file') {
+		return stringField(spec, 'name') ?? stringField(spec, 'filename')
+	}
+
+	return null
+}
+
+function stringField(record: Record<string, unknown> | null, key: string): string | null {
+	const value = record?.[key]
+	return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+function numberField(record: Record<string, unknown> | null, key: string): number | null {
+	const value = record?.[key]
+	return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function valueToString(value: unknown): string | null {
+	if (typeof value === 'string') return value
+	if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+	return null
+}
+
+function shortId(id: string): string {
+	if (id.length <= 12) return id
+	return id.slice(0, 8)
+}
diff --git a/packages/ui/src/components/servers/access/events/types.ts b/packages/ui/src/components/servers/access/events/types.ts
new file mode 100644
index 0000000000..791d97eb3f
--- /dev/null
+++ b/packages/ui/src/components/servers/access/events/types.ts
@@ -0,0 +1,69 @@
+import type { Archon } from '@modrinth/api-client'
+import type { Component } from 'vue'
+
+export interface AuditActor {
+	id: string
+	username: string
+	avatarUrl?: string
+	profilePath?: string
+}
+
+export interface AuditWorld {
+	id: string
+	name: string
+}
+
+export interface BaseEventProps {
+	action: string
+	timestamp: string
+	actor: AuditActor
+	world: AuditWorld | null
+}
+
+export type EventRoute =
+	| string
+	| {
+			path: string
+			query?: Record<string, string | undefined>
+	  }
+
+export interface EventEntity {
+	id: string
+	label: string
+	secondaryLabel?: string
+	to?: EventRoute
+	icon?: Component
+	iconUrl?: string | null
+	iconShape?: 'circle' | 'square'
+	mono?: boolean
+	muted?: boolean
+	title?: string
+}
+
+export interface AuditAddonEventItem {
+	addonId: string
+	versionId: string
+	project: EventEntity
+	versionLabel: string
+}
+
+export interface AuditBackupEventItem extends EventEntity {
+	backupId: string
+	found: boolean
+}
+
+export interface ParsedAuditEvent {
+	key: string
+	component: Component
+	props: BaseEventProps & Record<string, unknown>
+	searchText: string
+}
+
+export interface AuditEventLookups {
+	serverId: string
+	users: Record<string, Archon.Actions.v1.UserResp>
+	addons: Record<string, Archon.Actions.v1.AddonResp>
+	versions: Record<string, Archon.Actions.v1.VersionResp>
+	worldById: Map<string, AuditWorld>
+	backupById: Map<string, Archon.Backups.v1.Backup>
+}
diff --git a/packages/ui/src/components/servers/access/index.ts b/packages/ui/src/components/servers/access/index.ts
new file mode 100644
index 0000000000..d1d76e19f6
--- /dev/null
+++ b/packages/ui/src/components/servers/access/index.ts
@@ -0,0 +1,7 @@
+export { default as AccessTable } from './AccessTable.vue'
+export { default as AuditLogTable } from './AuditLogTable.vue'
+export * from './events'
+export { default as GrantAccessModal } from './GrantAccessModal.vue'
+export * from './permissions'
+export { default as RemoveAccessModal } from './RemoveAccessModal.vue'
+export * from './types'
diff --git a/packages/ui/src/components/servers/access/permissions.ts b/packages/ui/src/components/servers/access/permissions.ts
new file mode 100644
index 0000000000..7e5cd18f96
--- /dev/null
+++ b/packages/ui/src/components/servers/access/permissions.ts
@@ -0,0 +1,23 @@
+import type { Archon } from '@modrinth/api-client'
+
+import { hasServerPermission } from '../../../composables/server-permissions'
+import type { ServerAccessRole } from './types'
+
+export function apiPermissionsToAccessRole(
+	permissions: Archon.ServerUsers.v1.UserScope,
+): ServerAccessRole {
+	if (hasServerPermission(permissions, 'SERVER_ADMIN')) {
+		return 'owner'
+	}
+	if (
+		hasServerPermission(permissions, 'EXEC_COMMANDS') ||
+		hasServerPermission(permissions, 'FILES_WRITE') ||
+		hasServerPermission(permissions, 'SETUP') ||
+		hasServerPermission(permissions, 'BACKUPS') ||
+		hasServerPermission(permissions, 'ADVANCED') ||
+		hasServerPermission(permissions, 'RESET_SERVER')
+	) {
+		return 'editor'
+	}
+	return 'viewer'
+}
diff --git a/packages/ui/src/components/servers/access/types.ts b/packages/ui/src/components/servers/access/types.ts
new file mode 100644
index 0000000000..7d84e94322
--- /dev/null
+++ b/packages/ui/src/components/servers/access/types.ts
@@ -0,0 +1,57 @@
+import type { AuditActor, AuditWorld, ParsedAuditEvent } from './events/types'
+
+export type ServerAccessRole = 'owner' | 'editor' | 'viewer'
+
+export interface ServerAccessUser extends AuditActor {
+	id: string
+	username: string
+	avatarUrl?: string
+}
+
+export interface ServerAccessMember {
+	id: string
+	user: ServerAccessUser
+	role: ServerAccessRole
+	joinedAt: string | null
+	inviteResendAvailableAt?: string | null
+	pending?: boolean
+	isOwner?: boolean
+}
+
+export interface ServerAuditLogEntry {
+	id: string
+	actor: AuditActor
+	world: AuditWorld | null
+	event: ParsedAuditEvent
+	timestamp: string
+}
+
+export interface ServerAuditLogFilters {
+	userId: string | null
+	worldId: string | null
+}
+
+export interface ServerAccessRoleOption {
+	value: ServerAccessRole
+	label: string
+	description?: string
+}
+
+export interface ServerAccessInviteSuggestion {
+	id: string
+	username: string
+	avatarUrl?: string
+	email?: string
+}
+
+export interface GrantServerAccessPayload {
+	target: string
+	user: ServerAccessInviteSuggestion
+	role: Exclude<ServerAccessRole, 'owner'>
+	addAsFriend: boolean
+}
+
+export interface ServerListingOwner {
+	username: string
+	avatarUrl?: string
+}
diff --git a/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue b/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue
index e37f95715f..beac824d1f 100644
--- a/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue
+++ b/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue
@@ -32,6 +32,8 @@ defineProps<{
 	item: BackupAdmonitionEntry
 	dismissible: boolean
 	cancelling: boolean
+	canManageBackups?: boolean
+	permissionDeniedMessage?: string
 }>()
 
 defineEmits<{
@@ -278,12 +280,24 @@ function getDescription(item: BackupAdmonitionEntry): string {
 		</div>
 		<template #top-right-actions>
 			<ButtonStyled v-if="canCancel(item)" type="outlined" color="blue">
-				<button class="!border" type="button" :disabled="cancelling" @click="$emit('cancel')">
+				<button
+					v-tooltip="canManageBackups === false ? permissionDeniedMessage : undefined"
+					class="!border"
+					type="button"
+					:disabled="cancelling || canManageBackups === false"
+					@click="$emit('cancel')"
+				>
 					{{ formatMessage(commonMessages.cancelButton) }}
 				</button>
 			</ButtonStyled>
 			<ButtonStyled v-if="canRetry(item)" color="red" type="outlined">
-				<button class="!border" type="button" @click="$emit('retry')">
+				<button
+					v-tooltip="canManageBackups === false ? permissionDeniedMessage : undefined"
+					class="!border"
+					type="button"
+					:disabled="canManageBackups === false"
+					@click="$emit('retry')"
+				>
 					<RotateCounterClockwiseIcon class="size-5" />
 					{{ formatMessage(commonMessages.retryButton) }}
 				</button>
diff --git a/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue b/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue
index 4a57be09f1..8ce40296d5 100644
--- a/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue
+++ b/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue
@@ -25,7 +25,13 @@
 		</span>
 		<template v-if="op.id" #top-right-actions>
 			<ButtonStyled v-if="!isTerminal" type="outlined" color="blue">
-				<button class="!border" type="button" @click="ctx.dismissOperation(op.id!, 'cancel')">
+				<button
+					v-tooltip="!canWriteFiles ? permissionDeniedMessage : undefined"
+					class="!border"
+					type="button"
+					:disabled="!canWriteFiles"
+					@click="cancelOperation"
+				>
 					{{ formatMessage(commonMessages.cancelButton) }}
 				</button>
 			</ButtonStyled>
@@ -41,6 +47,7 @@ import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import { useFormatBytes } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 import { injectModrinthServerContext } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -55,6 +62,7 @@ const props = defineProps<{
 const { formatMessage } = useVIntl()
 const formatBytes = useFormatBytes()
 const ctx = injectModrinthServerContext()
+const { canWriteFiles, permissionDeniedMessage } = useServerPermissions()
 
 const messages = defineMessages({
 	extracting: {
@@ -97,4 +105,9 @@ const title = computed(() => {
 	}
 	return formatMessage(messages.extracting, { source: sourceName.value })
 })
+
+function cancelOperation() {
+	if (!canWriteFiles.value || !props.op.id) return
+	ctx.dismissOperation(props.op.id, 'cancel')
+}
 </script>
diff --git a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
index c932904f96..87e9a12746 100644
--- a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
+++ b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
@@ -12,6 +12,7 @@ import InstallingBanner, {
 } from '#ui/components/servers/InstallingBanner.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
 
@@ -32,6 +33,7 @@ const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const ctx = injectModrinthServerContext()
 const route = useRoute()
+const { canSetup, canManageBackups, permissionDeniedMessage } = useServerPermissions()
 
 const { activeOperations, backups, progressFor, invalidate } = useServerBackupsQueue(
 	computed(() => ctx.serverId),
@@ -311,6 +313,7 @@ async function onBackupDismiss(item: BackupAdmonitionEntry) {
 }
 
 async function onBackupCancel(item: BackupAdmonitionEntry) {
+	if (!canManageBackups.value) return
 	if (cancellingIds.has(item.key)) return
 	cancellingIds.add(item.key)
 	try {
@@ -337,6 +340,7 @@ async function onBackupCancel(item: BackupAdmonitionEntry) {
 }
 
 async function onBackupRetry(item: BackupAdmonitionEntry) {
+	if (!canManageBackups.value) return
 	await client.archon.backups_queue_v1.retry(ctx.serverId, ctx.worldId.value!, item.backupId)
 	dismissedIds.add(item.key)
 	await invalidate()
@@ -402,6 +406,8 @@ function onContentErrorDismiss() {
 				:fallback-phase="isOnContentTab && !syncProgress ? 'Addons' : null"
 				:content-error="contentError"
 				:dismissible="dismissible && !!contentError"
+				:retry-disabled="!canSetup"
+				:retry-disabled-tooltip="permissionDeniedMessage"
 				@dismiss="onContentErrorDismiss"
 				@retry="emit('content-retry')"
 			/>
@@ -422,6 +428,8 @@ function onContentErrorDismiss() {
 				:item="item.entry"
 				:dismissible="dismissible"
 				:cancelling="cancellingIds.has(item.entry.key)"
+				:can-manage-backups="canManageBackups"
+				:permission-denied-message="permissionDeniedMessage"
 				@dismiss="onBackupDismiss(item.entry)"
 				@cancel="onBackupCancel(item.entry)"
 				@retry="onBackupRetry(item.entry)"
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index bd9e53c4a1..363f428cc7 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -53,7 +53,11 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand">
-					<button :disabled="createMutation.isPending.value || nameExists" @click="createBackup">
+					<button
+						v-tooltip="createDisabledTooltip"
+						:disabled="createDisabled"
+						@click="createBackup"
+					>
 						<PlusIcon />
 						Create backup
 					</button>
@@ -69,23 +73,35 @@ import { IssuesIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
+import { useVIntl } from '../../../composables/i18n'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '../../../providers'
+import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
-const props = defineProps<{
-	backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
-}>()
+const props = withDefaults(
+	defineProps<{
+		backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
+		canCreate?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		backups: undefined,
+		canCreate: true,
+		permissionDeniedMessage: undefined,
+	},
+)
 
 const backupsQueryKey = ['backups', 'queue', ctx.serverId]
 
@@ -109,6 +125,14 @@ const nameExists = computed(() => {
 		(backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
 	)
 })
+const createDisabled = computed(
+	() => createMutation.isPending.value || nameExists.value || !props.canCreate,
+)
+const createDisabledTooltip = computed(() =>
+	props.canCreate
+		? undefined
+		: (props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction)),
+)
 
 const focusInput = () => {
 	nextTick(() => {
@@ -129,6 +153,7 @@ const hideModal = () => {
 }
 
 const createBackup = () => {
+	if (!props.canCreate) return
 	const name = trimmedName.value || `Backup #${newBackupAmount.value}`
 	isRateLimited.value = false
 
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index fcbe9bc446..d00e857aad 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -67,7 +67,11 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="red">
-					<button @click="confirmDelete">
+					<button
+						v-tooltip="deleteDisabledTooltip"
+						:disabled="!props.canDelete"
+						@click="confirmDelete"
+					>
 						<TrashIcon />
 						{{ formatMessage(messages.confirm, { count }) }}
 					</button>
@@ -92,6 +96,17 @@ import BackupItem from './BackupItem.vue'
 
 const { formatMessage } = useVIntl()
 
+const props = withDefaults(
+	defineProps<{
+		canDelete?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		canDelete: true,
+		permissionDeniedMessage: undefined,
+	},
+)
+
 const emit = defineEmits<{
 	(e: 'delete', backup: Archon.BackupsQueue.v1.BackupQueueBackup | undefined): void
 	(e: 'bulk-delete', backups: Archon.BackupsQueue.v1.BackupQueueBackup[]): void
@@ -133,6 +148,11 @@ const count = computed(() => (isBulk.value ? bulkBackups.value.length : 1))
 const displayBackups = computed(() =>
 	isBulk.value ? bulkBackups.value : singleBackup.value ? [singleBackup.value] : [],
 )
+const deleteDisabledTooltip = computed(() =>
+	props.canDelete
+		? undefined
+		: (props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction)),
+)
 
 function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	singleBackup.value = backup
@@ -149,6 +169,7 @@ function showBulk(backups: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
 }
 
 function confirmDelete() {
+	if (!props.canDelete) return
 	modal.value?.hide()
 	if (isBulk.value) {
 		emit('bulk-delete', bulkBackups.value)
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 15b29d0b67..2666be78a4 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -38,7 +38,10 @@ const props = withDefaults(
 		showCopyIdAction?: boolean
 		showDebugInfo?: boolean
 		restoreDisabled?: string
+		writeDisabled?: boolean
+		writeDisabledTooltip?: string
 		selected?: boolean
+		highlighted?: boolean
 	}>(),
 	{
 		preview: false,
@@ -47,7 +50,10 @@ const props = withDefaults(
 		showCopyIdAction: false,
 		showDebugInfo: false,
 		restoreDisabled: undefined,
+		writeDisabled: false,
+		writeDisabledTooltip: undefined,
 		selected: false,
+		highlighted: false,
 	},
 )
 
@@ -60,6 +66,12 @@ const backupIcon = computed(() => {
 	return UserRoundIcon
 })
 
+const itemBorderClass = computed(() => {
+	if (props.selected) return 'border-brand-green'
+	if (props.highlighted) return 'border-purple backup-item-highlighted'
+	return 'border-transparent'
+})
+
 const overflowMenuOptions = computed<OverflowOption[]>(() => {
 	const options: OverflowOption[] = []
 
@@ -81,13 +93,20 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 		disabled: !props.kyrosUrl || !props.jwt,
 	})
 
-	options.push({ id: 'rename', action: () => emit('rename') })
+	options.push({
+		id: 'rename',
+		action: () => emit('rename'),
+		disabled: props.writeDisabled,
+		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
+	})
 
 	options.push({ divider: true })
 	options.push({
 		id: 'delete',
 		color: 'red',
 		action: () => emit('delete'),
+		disabled: props.writeDisabled,
+		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
 	})
 
 	return options
@@ -123,7 +142,7 @@ const messages = defineMessages({
 <template>
 	<div
 		class="flex items-center gap-4 rounded-[20px] border border-solid bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
-		:class="props.selected ? 'border-brand-green' : 'border-transparent'"
+		:class="itemBorderClass"
 	>
 		<div class="flex min-w-0 flex-1 items-center gap-4">
 			<!-- Icon tile -->
@@ -215,3 +234,25 @@ const messages = defineMessages({
 		}}</pre>
 	</div>
 </template>
+
+<style scoped>
+@keyframes backup-item-highlight-pulse {
+	0%,
+	100% {
+		box-shadow:
+			0 0 0 0 var(--color-purple-highlight),
+			0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+			0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+	}
+	50% {
+		box-shadow:
+			0 0 0 3px var(--color-purple-highlight),
+			0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+			0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+	}
+}
+
+.backup-item-highlighted {
+	animation: backup-item-highlight-pulse 1.25s ease-in-out infinite;
+}
+</style>
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index eaed166ea1..54d090990a 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -29,7 +29,11 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand">
-					<button :disabled="renameMutation.isPending.value || nameExists" @click="renameBackup">
+					<button
+						v-tooltip="renameDisabledTooltip"
+						:disabled="renameDisabled"
+						@click="renameBackup"
+					>
 						<template v-if="renameMutation.isPending.value">
 							<SpinnerIcon class="animate-spin" />
 							Renaming...
@@ -51,23 +55,35 @@ import { IssuesIcon, SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
+import { useVIntl } from '../../../composables/i18n'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '../../../providers'
+import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
-const props = defineProps<{
-	backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
-}>()
+const props = withDefaults(
+	defineProps<{
+		backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
+		canRename?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		backups: undefined,
+		canRename: true,
+		permissionDeniedMessage: undefined,
+	},
+)
 
 const backupsQueryKey = ['backups', 'queue', ctx.serverId]
 
@@ -99,6 +115,14 @@ const nameExists = computed(() => {
 		(backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
 	)
 })
+const renameDisabled = computed(
+	() => renameMutation.isPending.value || nameExists.value || !props.canRename,
+)
+const renameDisabledTooltip = computed(() =>
+	props.canRename
+		? undefined
+		: (props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction)),
+)
 
 const backupNumber = computed(
 	() => (props.backups?.findIndex((b) => b.id === currentBackup.value?.id) ?? 0) + 1,
@@ -124,6 +148,7 @@ function hide() {
 }
 
 const renameBackup = () => {
+	if (!props.canRename) return
 	if (!currentBackup.value) {
 		addNotification({
 			type: 'error',
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index 975c27f654..64dc1de2c6 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -24,7 +24,11 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="red">
-					<button :disabled="isRestoring || ctx.isServerRunning.value" @click="restoreBackup">
+					<button
+						v-tooltip="restoreDisabledTooltip"
+						:disabled="restoreDisabled"
+						@click="restoreBackup"
+					>
 						<SpinnerIcon v-if="isRestoring" class="animate-spin" />
 						<RotateCounterClockwiseIcon v-else />
 						{{ isRestoring ? 'Restoring...' : 'Restore backup' }}
@@ -39,23 +43,37 @@
 import type { Archon } from '@modrinth/api-client'
 import { RotateCounterClockwiseIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import { useVIntl } from '../../../composables/i18n'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '../../../providers'
+import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
 import BackupItem from './BackupItem.vue'
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
+const props = withDefaults(
+	defineProps<{
+		canRestore?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		canRestore: true,
+		permissionDeniedMessage: undefined,
+	},
+)
+
 const backupsQueryKey = ['backups', 'queue', ctx.serverId]
 
 function safetyBackupName(backupName: string) {
@@ -72,6 +90,14 @@ const restoreMutation = useMutation({
 const modal = ref<InstanceType<typeof NewModal>>()
 const currentBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup | null>(null)
 const isRestoring = ref(false)
+const restoreDisabled = computed(
+	() => isRestoring.value || ctx.isServerRunning.value || !props.canRestore,
+)
+const restoreDisabledTooltip = computed(() =>
+	props.canRestore
+		? undefined
+		: (props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction)),
+)
 
 function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	currentBackup.value = backup
@@ -79,7 +105,7 @@ function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 }
 
 const restoreBackup = () => {
-	if (!currentBackup.value || isRestoring.value) {
+	if (!props.canRestore || !currentBackup.value || isRestoring.value) {
 		if (!currentBackup.value) {
 			addNotification({
 				type: 'error',
diff --git a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
index e3f2ab7fe1..936e415cca 100644
--- a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
+++ b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
@@ -3,17 +3,21 @@
 		<span class="text-lg font-semibold text-contrast">Icon</span>
 		<div class="group relative w-fit">
 			<OverflowMenu
-				v-tooltip="'Edit icon'"
+				v-tooltip="editIconTooltip"
 				class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
-				:disabled="isIconActionLoading"
+				:disabled="isIconActionDisabled"
 				:options="[
 					{
 						id: 'upload',
 						action: () => triggerFileInput(),
+						disabled: !props.canEdit,
+						tooltip: !props.canEdit ? editIconTooltip : undefined,
 					},
 					{
 						id: 'sync',
 						action: () => resetIcon(),
+						disabled: !props.canEdit,
+						tooltip: !props.canEdit ? editIconTooltip : undefined,
 					},
 				]"
 			>
@@ -47,19 +51,39 @@ import { computed, ref } from 'vue'
 
 import { OverflowMenu, ServerIcon } from '#ui/components'
 import { useServerImage } from '#ui/composables'
+import { useVIntl } from '#ui/composables/i18n'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
+
+const props = withDefaults(
+	defineProps<{
+		canEdit?: boolean
+		permissionDeniedMessage?: string
+	}>(),
+	{
+		canEdit: true,
+		permissionDeniedMessage: undefined,
+	},
+)
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const { serverId, server } = injectModrinthServerContext()
 const queryClient = useQueryClient()
 const isUploadingIcon = ref(false)
 const isSyncingIcon = ref(false)
 const isIconActionLoading = computed(() => isUploadingIcon.value || isSyncingIcon.value)
+const isIconActionDisabled = computed(() => isIconActionLoading.value || !props.canEdit)
+const editIconTooltip = computed(() =>
+	props.canEdit
+		? 'Edit icon'
+		: (props.permissionDeniedMessage ?? formatMessage(commonMessages.noPermissionAction)),
+)
 
 const {
 	image: displayIcon,
@@ -84,7 +108,7 @@ function isNotFound(error: unknown): boolean {
 }
 
 const uploadFile = async (e: Event) => {
-	if (isIconActionLoading.value) return
+	if (isIconActionDisabled.value) return
 
 	const file = (e.target as HTMLInputElement).files?.[0]
 	if (!file) {
@@ -194,7 +218,7 @@ const uploadFile = async (e: Event) => {
 }
 
 const resetIcon = async () => {
-	if (isIconActionLoading.value) return
+	if (isIconActionDisabled.value) return
 	isSyncingIcon.value = true
 
 	try {
@@ -234,7 +258,7 @@ const resetIcon = async () => {
 }
 
 const triggerFileInput = () => {
-	if (isIconActionLoading.value) return
+	if (isIconActionDisabled.value) return
 
 	const input = document.createElement('input')
 	input.type = 'file'
diff --git a/packages/ui/src/components/servers/icons/LoaderIcon.vue b/packages/ui/src/components/servers/icons/LoaderIcon.vue
index 02d0ae05d2..843789c608 100644
--- a/packages/ui/src/components/servers/icons/LoaderIcon.vue
+++ b/packages/ui/src/components/servers/icons/LoaderIcon.vue
@@ -224,9 +224,10 @@
 
 <script setup lang="ts">
 import { LoaderIcon } from '@modrinth/assets'
-import type { Loaders } from '@modrinth/utils'
+
+import type { ServerLoader } from '#ui/utils/loaders'
 
 defineProps<{
-	loader: Loaders
+	loader: ServerLoader
 }>()
 </script>
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index e8f4f5d45c..2b3dd1cd54 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -1,3 +1,4 @@
+export * from './access'
 export * from './admonitions'
 export * from './backups'
 export * from './flows'
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index d3e5ee06e6..9478a89a9e 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -38,6 +38,7 @@
 import { computed } from 'vue'
 
 import { injectServerSettingsModal } from '#ui/providers/server-settings-modal'
+import type { ServerLoader } from '#ui/utils/loaders'
 
 import AutoLink from '../../base/AutoLink.vue'
 import LoaderIcon from '../icons/LoaderIcon.vue'
@@ -45,7 +46,7 @@ import Separator from './Separator.vue'
 
 defineProps<{
 	noSeparator?: boolean
-	loader?: 'Fabric' | 'Quilt' | 'Forge' | 'NeoForge' | 'Paper' | 'Spigot' | 'Bukkit' | 'Vanilla'
+	loader?: ServerLoader
 	loaderVersion?: string
 	isLink?: boolean
 }>()
diff --git a/packages/ui/src/components/servers/marketing/MedalServerListing.vue b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
index 8ac6731bc1..b357dfc933 100644
--- a/packages/ui/src/components/servers/marketing/MedalServerListing.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
@@ -36,13 +36,29 @@
 			</div>
 			<Avatar v-else src="https://cdn-raw.modrinth.com/medal_icon.webp" size="64px" class="z-10" />
 			<div class="z-10 ml-4 flex min-w-0 flex-col gap-1.5">
-				<div class="flex flex-row items-center gap-2">
+				<div class="flex flex-row items-center gap-2.5">
 					<h2
 						class="m-0 truncate text-xl font-bold text-contrast"
 						:class="{ 'opacity-50': isDisabled }"
 					>
 						{{ name }}
 					</h2>
+					<div
+						v-if="owner"
+						v-tooltip="formatMessage(messages.ownerTooltip, { username: owner.username })"
+						class="flex min-w-0 items-center gap-1.5 rounded-full bg-surface-4/80 px-2 py-1 text-sm font-medium text-primary !border !border-surface-5 border-solid"
+						:class="{ 'opacity-50': isDisabled }"
+					>
+						<Avatar
+							:src="owner.avatarUrl"
+							:alt="formatMessage(messages.ownerAvatarAlt, { username: owner.username })"
+							:tint-by="owner.username"
+							size="1.25rem"
+							circle
+							no-shadow
+						/>
+						<span class="max-w-32 truncate">{{ owner.username }}</span>
+					</div>
 
 					<span class="truncate" :class="{ 'opacity-50': isDisabled }">
 						<IntlFormatted
@@ -158,6 +174,7 @@ import Avatar from '../../base/Avatar.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import CopyCode from '../../base/CopyCode.vue'
 import IntlFormatted from '../../base/IntlFormatted.vue'
+import type { ServerListingOwner } from '../access/types'
 import ServerInfoLabels from '../labels/ServerInfoLabels.vue'
 import MedalBackgroundImage from './MedalBackgroundImage.vue'
 
@@ -176,6 +193,7 @@ type MedalServerListingProps = {
 	upstream?: Archon.Servers.v0.Upstream | null
 	flows?: Archon.Servers.v0.Flows
 	medal_expires?: string
+	owner?: ServerListingOwner
 }
 
 const props = defineProps<MedalServerListingProps>()
@@ -222,6 +240,14 @@ const messages = defineMessages({
 		id: 'servers.medal-listing.using-project-label',
 		defaultMessage: 'Using {projectTitle}',
 	},
+	ownerTooltip: {
+		id: 'servers.medal-listing.owner-tooltip',
+		defaultMessage: 'Owned by {username}',
+	},
+	ownerAvatarAlt: {
+		id: 'servers.medal-listing.owner-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
 	newServerLabel: {
 		id: 'servers.medal-listing.new-server-label',
 		defaultMessage: 'New server',
diff --git a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
index fd6cd6930d..52d47effe2 100644
--- a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
+++ b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
@@ -21,6 +21,8 @@
 					:actions="stopSplitActions"
 					:primary-disabled="!canTakeAction"
 					:dropdown-disabled="!canKill"
+					:primary-tooltip="busyTooltip"
+					:dropdown-tooltip="busyTooltip"
 				>
 					<template #kill_server>
 						<SlashIcon class="h-5 w-5" />
@@ -37,6 +39,7 @@
 					:primary-disabled="true"
 					:dropdown-disabled="!canKill"
 					:primary-muted="true"
+					:dropdown-tooltip="busyTooltip"
 				>
 					<template #kill_server>
 						<SlashIcon class="h-5 w-5" />
diff --git a/packages/ui/src/components/servers/server-header/use-server-power-action.ts b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
index b8c5af4313..2c0743ce0f 100644
--- a/packages/ui/src/components/servers/server-header/use-server-power-action.ts
+++ b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
@@ -1,6 +1,7 @@
 import { computed, type Ref } from 'vue'
 
 import { useVIntl } from '#ui/composables/i18n'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -15,6 +16,7 @@ export function useServerPowerAction(options?: { disabled?: Ref<boolean> }) {
 	const { serverId, server, powerState, isSyncingContent, busyReasons } =
 		injectModrinthServerContext()
 	const { addNotification } = injectNotificationManager()
+	const { canUsePowerActions, permissionDeniedMessage } = useServerPermissions()
 
 	const isInstalling = computed(
 		() =>
@@ -34,20 +36,27 @@ export function useServerPowerAction(options?: { disabled?: Ref<boolean> }) {
 	const showStopSplit = computed(() => isRunning.value || isStarting.value || isStopping.value)
 	const showRestartButton = computed(() => isRunning.value || isStarting.value)
 
-	const isBlockedByPropsOrBusy = computed(
-		() => Boolean(options?.disabled?.value) || busyReasons.value.length > 0,
+	const isBlockedByPropsBusyOrPermission = computed(
+		() =>
+			!canUsePowerActions.value ||
+			Boolean(options?.disabled?.value) ||
+			busyReasons.value.length > 0,
 	)
 
 	const busyTooltip = computed(() => {
+		if (!canUsePowerActions.value) return permissionDeniedMessage.value
 		if (isStarting.value) return 'Your server is starting'
 		return busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined
 	})
 
-	const canTakeAction = computed(() => !isTransitioning.value && !isBlockedByPropsOrBusy.value)
+	const canTakeAction = computed(
+		() => !isTransitioning.value && !isBlockedByPropsBusyOrPermission.value,
+	)
 
 	const canKill = computed(
 		() =>
-			!isBlockedByPropsOrBusy.value && (isStopping.value || isRunning.value || isStarting.value),
+			!isBlockedByPropsBusyOrPermission.value &&
+			(isStopping.value || isRunning.value || isStarting.value),
 	)
 
 	const primaryActionText = computed(() => {
diff --git a/packages/ui/src/composables/how-ago.ts b/packages/ui/src/composables/how-ago.ts
index bd7d26cb4d..64f98875fd 100644
--- a/packages/ui/src/composables/how-ago.ts
+++ b/packages/ui/src/composables/how-ago.ts
@@ -3,9 +3,9 @@ import { LRUCache } from 'lru-cache'
 import { injectI18n } from '../providers/i18n'
 import { LOCALES } from './i18n.ts'
 
-const formatterCache = new LRUCache<string, Intl.RelativeTimeFormat>({ max: 5 })
+const formatterCache = new LRUCache<string, Intl.RelativeTimeFormat>({ max: 15 })
 
-export function useRelativeTime() {
+export function useRelativeTime(options?: Intl.RelativeTimeFormatOptions) {
 	const { locale } = injectI18n()
 
 	return (value: Date | number | string | null | undefined) => {
@@ -29,7 +29,7 @@ export function useRelativeTime() {
 		const months = Math.round(diff / 2629746000)
 		const years = Math.round(diff / 31556952000)
 
-		const rtf = getFormatter(locale.value)
+		const rtf = getFormatter(locale.value, options)
 
 		if (Math.abs(seconds) < 60) {
 			return rtf.format(seconds, 'second')
@@ -49,15 +49,22 @@ export function useRelativeTime() {
 	}
 }
 
-function getFormatter(locale: string): Intl.RelativeTimeFormat {
-	let formatter = formatterCache.get(locale)
+function getFormatter(
+	locale: string,
+	options?: Intl.RelativeTimeFormatOptions,
+): Intl.RelativeTimeFormat {
+	const localeDefinition = LOCALES.find((loc) => loc.code === locale)
+	const numeric = options?.numeric ?? localeDefinition?.numeric ?? 'auto'
+	const style = options?.style ?? 'long'
+	const cacheKey = `${locale}:${numeric}:${style}`
+	let formatter = formatterCache.get(cacheKey)
 	if (!formatter) {
-		const localeDefinition = LOCALES.find((loc) => loc.code === locale)
 		formatter = new Intl.RelativeTimeFormat(locale, {
-			numeric: localeDefinition?.numeric || 'auto',
-			style: 'long',
+			...options,
+			numeric,
+			style,
 		})
-		formatterCache.set(locale, formatter)
+		formatterCache.set(cacheKey, formatter)
 	}
 	return formatter
 }
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 1fea76d0db..c476e133e1 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -14,6 +14,7 @@ export * from './server-backup'
 export * from './server-backups-queue'
 export * from './server-console'
 export * from './server-manage-core-runtime'
+export * from './server-permissions'
 export * from './sticky-observer'
 export * from './terminal'
 export * from './use-loading-bar-token'
diff --git a/packages/ui/src/composables/server-backups-queue.ts b/packages/ui/src/composables/server-backups-queue.ts
index e05efdfe34..e05a716626 100644
--- a/packages/ui/src/composables/server-backups-queue.ts
+++ b/packages/ui/src/composables/server-backups-queue.ts
@@ -23,7 +23,7 @@ export function useServerBackupsQueue(serverId: Ref<string>, worldId: Ref<string
 		enabled: computed(() => !!worldId.value),
 		refetchInterval: (q) => {
 			const data = q.state.data as Archon.BackupsQueue.v1.BackupsQueueResponse | undefined
-			return data?.active_operations?.length ? 3000 : false
+			return data?.active_operations?.length ? 30_000 : false
 		},
 	})
 
diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
index 1df2f630c2..e74799361a 100644
--- a/packages/ui/src/composables/server-manage-core-runtime.ts
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -4,13 +4,12 @@ import {
 	setNodeAuthState,
 	type UploadState,
 } from '@modrinth/api-client'
-import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Ref } from 'vue'
 import { computed, ref } from 'vue'
 
 import type { FileOperation } from '../layouts/shared/files-tab/types'
 import { injectModrinthClient, provideModrinthServerContext } from '../providers'
-import type { BusyReason, CancelUploadHandler } from '../providers/server-context'
+import type { BusyReason, CancelUploadHandler, ServerStats } from '../providers/server-context'
 import { defineMessage } from './i18n'
 import { useModrinthServersConsole } from './server-console'
 
@@ -26,6 +25,7 @@ type UseServerManageCoreRuntimeOptions = {
 	serverId: ReadableRef<string>
 	worldId: ReadableRef<string | null>
 	server: ReadableRef<Archon.Servers.v0.Server | null | undefined>
+	serverFull?: ReadableRef<Archon.Servers.v1.ServerFull | null | undefined>
 	isSyncingContent: ReadableRef<boolean>
 	extraBusyReasons?: ComputedRef<BusyReason[]>
 	setDisconnectedOnAuthIncorrect?: boolean
@@ -35,7 +35,7 @@ type UseServerManageCoreRuntimeOptions = {
 	onStateEvent?: (data: Archon.Websocket.v0.WSStateEvent) => void
 }
 
-const createInitialStats = (): Stats => ({
+const createInitialStats = (): ServerStats => ({
 	current: {
 		cpu_percent: 0,
 		ram_usage_bytes: 0,
@@ -91,7 +91,7 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	const serverPowerState = ref<Archon.Websocket.v0.PowerState>('stopped')
 	const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>()
 	const isServerRunning = computed(() => serverPowerState.value === 'running')
-	const stats = ref<Stats>(createInitialStats())
+	const stats = ref<ServerStats>(createInitialStats())
 	const uptimeSeconds = ref(0)
 	const fsAuth = ref<{ url: string; token: string } | null>(null)
 	const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
@@ -141,7 +141,7 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		}, 1000)
 	}
 
-	const updateStats = (currentStats: Stats['current']) => {
+	const updateStats = (currentStats: ServerStats['current']) => {
 		if (!shouldProcessEvent()) return
 		if (!isConnected.value) isConnected.value = true
 		cpuData.value = appendGraphData(cpuData.value, currentStats.cpu_percent)
@@ -384,6 +384,8 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		}
 		fsAuth.value = await client.archon.servers_v0.getFilesystemAuth(options.serverId.value)
 	}
+	const currentUserPermissions = computed(() => options.server.value?.current_user_permissions ?? 0)
+	const serverFull = computed(() => options.serverFull?.value ?? null)
 
 	provideModrinthServerContext({
 		get serverId() {
@@ -391,6 +393,8 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		},
 		worldId: options.worldId as Ref<string | null>,
 		server: options.server as Ref<Archon.Servers.v0.Server>,
+		serverFull,
+		currentUserPermissions,
 		isConnected,
 		isWsAuthIncorrect,
 		powerState: serverPowerState,
diff --git a/packages/ui/src/composables/server-panel-sync.ts b/packages/ui/src/composables/server-panel-sync.ts
new file mode 100644
index 0000000000..fa9d7f9ef3
--- /dev/null
+++ b/packages/ui/src/composables/server-panel-sync.ts
@@ -0,0 +1,345 @@
+import type { Archon } from '@modrinth/api-client'
+import { useQueryClient } from '@tanstack/vue-query'
+import type { ComputedRef, Ref } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
+
+import { injectModrinthClient } from '#ui/providers'
+
+type ReadableRef<T> = Ref<T> | ComputedRef<T>
+type SyncUnsubscriber = () => void
+
+type UseServerPanelSyncOptions = {
+	serverId: ReadableRef<string>
+	worldId: ReadableRef<string | null>
+}
+
+const ACTION_LOG_INVALIDATE_DELAY_MS = 500
+
+export function useServerPanelSync(options: UseServerPanelSyncOptions) {
+	const client = injectModrinthClient()
+	const queryClient = useQueryClient()
+
+	let activeServerId: string | null = null
+	let unsubscribers: SyncUnsubscriber[] = []
+	let mounted = false
+	let actionLogInvalidateTimer: ReturnType<typeof setTimeout> | null = null
+
+	const legacyServerDetailKey = (serverId: string) => ['servers', 'detail', serverId] as const
+	const serverV1DetailKey = (serverId: string) => ['servers', 'v1', 'detail', serverId] as const
+	const contentListKey = (serverId: string) => ['content', 'list', 'v1', serverId] as const
+	const actionLogBaseKey = (serverId: string) =>
+		['servers', 'action-log', 'v1', 'infinite', serverId] as const
+
+	function connect(targetServerId: string) {
+		if (!targetServerId || activeServerId === targetServerId) return
+
+		disconnect()
+		activeServerId = targetServerId
+
+		if (!client.archon.sync.getStatus(targetServerId)?.lastEventId) {
+			void invalidateCorePanelQueries(targetServerId)
+		}
+
+		unsubscribers = [
+			client.archon.sync.onAny(targetServerId, (event) => handleSyncEvent(targetServerId, event)),
+		]
+
+		void client.archon.sync.safeConnectServer(targetServerId, { intent: 'all' }).catch((error) => {
+			console.warn(
+				`[server-panel-sync] Failed to connect sync stream for ${targetServerId}:`,
+				error,
+			)
+		})
+	}
+
+	function disconnect() {
+		if (actionLogInvalidateTimer) {
+			clearTimeout(actionLogInvalidateTimer)
+			actionLogInvalidateTimer = null
+		}
+
+		for (const unsubscribe of unsubscribers) unsubscribe()
+		unsubscribers = []
+
+		if (activeServerId) {
+			client.archon.sync.disconnect(activeServerId)
+			activeServerId = null
+		}
+	}
+
+	function handleSyncEvent(serverId: string, event: Archon.Sync.v1.SyncEvent) {
+		if (event.type === 'protocol.reset' || event.type === 'protocol.invalid') {
+			void invalidateCorePanelQueries(serverId)
+			return
+		}
+
+		if (event.type === 'protocol.error') {
+			console.warn(`[server-panel-sync] Protocol error for ${serverId}: ${event.error}`)
+			return
+		}
+
+		scheduleActionLogInvalidation(serverId)
+
+		if (event.type.startsWith('backup.')) {
+			handleBackupEvent(serverId)
+			return
+		}
+
+		switch (event.type) {
+			case 'server.patch':
+				handleServerPatch(serverId, event)
+				break
+			case 'server.network.patch':
+				handleServerNetworkPatch(serverId, event)
+				break
+			case 'server.transfer.start':
+			case 'server.transfer.done':
+				void invalidateServerDetails(serverId)
+				break
+			case 'users.patch':
+				handleUsersPatch(serverId)
+				break
+			case 'world.patch':
+				handleWorldPatch(serverId, event)
+				break
+			case 'world.startup.patch':
+				handleWorldStartupPatch(serverId, event)
+				break
+			case 'world.content.addon.patch':
+				handleWorldContentAddonPatch(serverId, event)
+				break
+			case 'world.content.base.update':
+				handleWorldContentBaseUpdate(serverId, event)
+				break
+		}
+	}
+
+	function handleServerPatch(serverId: string, event: Archon.Sync.v1.ServerPatchEvent) {
+		queryClient.setQueryData<Archon.Servers.v0.Server>(
+			legacyServerDetailKey(serverId),
+			(current) =>
+				current
+					? {
+							...current,
+							name: event.name,
+							net: {
+								...current.net,
+								domain: event.subdomain,
+							},
+						}
+					: current,
+		)
+		queryClient.setQueryData<Archon.Servers.v1.ServerFull>(
+			serverV1DetailKey(serverId),
+			(current) =>
+				current
+					? {
+							...current,
+							name: event.name,
+							subdomain: event.subdomain,
+						}
+					: current,
+		)
+	}
+
+	function handleServerNetworkPatch(
+		serverId: string,
+		event: Archon.Sync.v1.ServerNetworkPatchEvent,
+	) {
+		queryClient.setQueryData<Archon.Servers.v0.Allocation[]>(
+			['servers', 'allocations', serverId],
+			event.ports,
+		)
+		void invalidateServerDetails(serverId)
+	}
+
+	function handleUsersPatch(serverId: string) {
+		void queryClient.invalidateQueries({ queryKey: ['servers', 'users', 'v1', serverId] })
+		void invalidateServerDetails(serverId)
+	}
+
+	function handleWorldPatch(serverId: string, event: Archon.Sync.v1.WorldPatchEvent) {
+		patchServerFullWorld(serverId, event.world_id, (world) => ({
+			...world,
+			name: event.name,
+		}))
+	}
+
+	function handleWorldStartupPatch(serverId: string, event: Archon.Sync.v1.WorldStartupPatchEvent) {
+		patchServerFullWorld(serverId, event.world_id, (world) =>
+			world.content
+				? {
+						...world,
+						content: {
+							...world.content,
+							java_version: event.java_version,
+							invocation: event.invocation,
+							original_invocation: event.original_invocation,
+						},
+					}
+				: world,
+		)
+		void queryClient.invalidateQueries({ queryKey: ['servers', 'startup', 'v1', serverId] })
+	}
+
+	function handleWorldContentAddonPatch(
+		serverId: string,
+		event: Archon.Sync.v1.WorldContentAddonPatchEvent,
+	) {
+		if (event.world_id !== options.worldId.value) {
+			void invalidateContentAndServerDetails(serverId)
+			return
+		}
+
+		queryClient.setQueryData<Archon.Content.v1.Addons>(contentListKey(serverId), (current) =>
+			current
+				? {
+						...current,
+						addons: mergeAddonSpecs(current.addons ?? [], event.specs),
+					}
+				: current,
+		)
+		void queryClient.invalidateQueries({ queryKey: contentListKey(serverId) })
+	}
+
+	function handleWorldContentBaseUpdate(
+		serverId: string,
+		event: Archon.Sync.v1.WorldContentBaseUpdateEvent,
+	) {
+		if (event.world_id === options.worldId.value) {
+			queryClient.setQueryData<Archon.Content.v1.Addons>(contentListKey(serverId), (current) =>
+				current ? { ...current, ...event.spec } : event.spec,
+			)
+		} else {
+			void queryClient.invalidateQueries({ queryKey: contentListKey(serverId) })
+		}
+
+		void queryClient.invalidateQueries({ queryKey: serverV1DetailKey(serverId) })
+	}
+
+	function handleBackupEvent(serverId: string) {
+		void queryClient.invalidateQueries({ queryKey: ['backups', 'queue', serverId] })
+		void invalidateServerDetails(serverId)
+	}
+
+	function patchServerFullWorld(
+		serverId: string,
+		worldId: string,
+		patch: (world: Archon.Servers.v1.WorldFull) => Archon.Servers.v1.WorldFull,
+	) {
+		queryClient.setQueryData<Archon.Servers.v1.ServerFull>(
+			serverV1DetailKey(serverId),
+			(current) =>
+				current
+					? {
+							...current,
+							worlds: current.worlds.map((world) => (world.id === worldId ? patch(world) : world)),
+						}
+					: current,
+		)
+	}
+
+	function scheduleActionLogInvalidation(serverId: string) {
+		if (actionLogInvalidateTimer) clearTimeout(actionLogInvalidateTimer)
+
+		actionLogInvalidateTimer = setTimeout(() => {
+			actionLogInvalidateTimer = null
+			void queryClient.invalidateQueries({ queryKey: actionLogBaseKey(serverId) })
+		}, ACTION_LOG_INVALIDATE_DELAY_MS)
+	}
+
+	async function invalidateServerDetails(serverId: string) {
+		await Promise.all([
+			queryClient.invalidateQueries({ queryKey: legacyServerDetailKey(serverId) }),
+			queryClient.invalidateQueries({ queryKey: serverV1DetailKey(serverId) }),
+		])
+	}
+
+	async function invalidateContentAndServerDetails(serverId: string) {
+		await Promise.all([
+			queryClient.invalidateQueries({ queryKey: contentListKey(serverId) }),
+			invalidateServerDetails(serverId),
+		])
+	}
+
+	async function invalidateCorePanelQueries(serverId: string) {
+		await Promise.all([
+			queryClient.invalidateQueries({ queryKey: legacyServerDetailKey(serverId) }),
+			queryClient.invalidateQueries({ queryKey: serverV1DetailKey(serverId) }),
+			queryClient.invalidateQueries({ queryKey: contentListKey(serverId) }),
+			queryClient.invalidateQueries({ queryKey: ['backups', 'queue', serverId] }),
+			queryClient.invalidateQueries({ queryKey: ['servers', 'users', 'v1', serverId] }),
+			queryClient.invalidateQueries({ queryKey: actionLogBaseKey(serverId) }),
+			queryClient.invalidateQueries({ queryKey: ['servers', 'startup', 'v1', serverId] }),
+			queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] }),
+		])
+	}
+
+	function mergeAddonSpecs(
+		currentAddons: Archon.Content.v1.Addon[],
+		incomingAddons: Archon.Content.v1.Addon[],
+	): Archon.Content.v1.Addon[] {
+		const currentByFilename = new Map(
+			currentAddons.map((addon) => [normalizeAddonFilename(addon.filename), addon] as const),
+		)
+
+		return incomingAddons.map((incoming) =>
+			mergeAddonSpec(currentByFilename.get(normalizeAddonFilename(incoming.filename)), incoming),
+		)
+	}
+
+	function mergeAddonSpec(
+		current: Archon.Content.v1.Addon | undefined,
+		incoming: Archon.Content.v1.Addon,
+	): Archon.Content.v1.Addon {
+		if (!current) return incoming
+
+		return {
+			...current,
+			...incoming,
+			filesize: incoming.filesize || current.filesize,
+			name: incoming.name ?? current.name,
+			owner: incoming.owner ?? current.owner,
+			icon_url: incoming.icon_url ?? current.icon_url,
+			has_update: incoming.has_update ?? current.has_update,
+			project_id: incoming.project_id ?? current.project_id,
+			version: incoming.version
+				? {
+						...incoming.version,
+						name: incoming.version.name ?? current.version?.name ?? null,
+						environment: incoming.version.environment ?? current.version?.environment ?? null,
+					}
+				: current.version,
+		}
+	}
+
+	function normalizeAddonFilename(filename: string): string {
+		return filename.endsWith('.disabled') ? filename.slice(0, -'.disabled'.length) : filename
+	}
+
+	onMounted(() => {
+		mounted = true
+		connect(options.serverId.value)
+	})
+
+	watch(
+		() => options.serverId.value,
+		(serverId) => {
+			if (!mounted) return
+			if (serverId) {
+				connect(serverId)
+			} else {
+				disconnect()
+			}
+		},
+	)
+
+	onUnmounted(() => {
+		mounted = false
+		disconnect()
+	})
+
+	return {
+		disconnect,
+	}
+}
diff --git a/packages/ui/src/composables/server-permissions.ts b/packages/ui/src/composables/server-permissions.ts
new file mode 100644
index 0000000000..57c382ca59
--- /dev/null
+++ b/packages/ui/src/composables/server-permissions.ts
@@ -0,0 +1,118 @@
+import type { Archon } from '@modrinth/api-client'
+import { computed } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+import { injectModrinthServerContext } from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
+
+export type ServerPermissionName = keyof typeof Archon.ServerUsers.v1.UserScope
+
+type ServerPermissionValue = Archon.Servers.v0.UserScope | Archon.ServerUsers.v1.UserScope
+
+const U64_SIZE = 64n
+const U64_MODULUS = 1n << U64_SIZE
+
+export const serverPermissionBits = {
+	NONE: 0n,
+	BASE_READ: 1n << 63n,
+	POWER_ACTIONS: 1n << 62n,
+	EXEC_COMMANDS: 1n << 61n,
+	FILES_WRITE: 1n << 60n,
+	SETUP: 1n << 59n,
+	BACKUPS: 1n << 58n,
+	ADVANCED: 1n << 57n,
+	RESET_SERVER: 1n << 56n,
+	MANAGE_USERS: 1n << 55n,
+	SUPPORT_AGENT: 1n,
+	INFRA_MANAGER: 1n << 1n,
+	INFRA_MANAGER_READ: 1n << 2n,
+	INFRA_SERVERS_XFER: 1n << 3n,
+	INFRA_USERS: 1n << 4n,
+	SERVER_ADMIN: ((1n << 64n) - 1n) ^ ((1n << 15n) - 1n),
+} as const satisfies Record<ServerPermissionName, bigint>
+
+function parsePermissionNumber(value: number) {
+	const bigintValue = BigInt(value)
+	return bigintValue < 0n ? bigintValue + U64_MODULUS : bigintValue
+}
+
+function parsePermissionString(value: string) {
+	const numericValue = Number(value)
+	if (value.trim() !== '' && Number.isFinite(numericValue)) {
+		return parsePermissionNumber(numericValue)
+	}
+
+	const permissions = value
+		.split('|')
+		.map((permission) => permission.trim())
+		.filter((permission): permission is ServerPermissionName => permission in serverPermissionBits)
+
+	if (permissions.length === 0) return 0n
+
+	return permissions.reduce((mask, permission) => mask | serverPermissionBits[permission], 0n)
+}
+
+function parsePermissions(permissions: ServerPermissionValue) {
+	return typeof permissions === 'number'
+		? parsePermissionNumber(permissions)
+		: parsePermissionString(permissions)
+}
+
+function hasPermissionBit(permissions: ServerPermissionValue, scope: ServerPermissionName) {
+	const permission = serverPermissionBits[scope]
+	if (permission === 0n) return true
+
+	const permissionsMask = parsePermissions(permissions)
+	return (permissionsMask & permission) === permission
+}
+
+export function hasServerPermission(
+	permissions: ServerPermissionValue,
+	scope: ServerPermissionName,
+) {
+	if (
+		scope !== 'NONE' &&
+		scope !== 'SERVER_ADMIN' &&
+		hasPermissionBit(permissions, 'SERVER_ADMIN')
+	) {
+		return true
+	}
+	return hasPermissionBit(permissions, scope)
+}
+
+export function useServerPermissions() {
+	const { formatMessage } = useVIntl()
+	const { currentUserPermissions } = injectModrinthServerContext()
+
+	const hasCurrentUserPermission = (scope: ServerPermissionName) =>
+		hasServerPermission(currentUserPermissions.value, scope)
+
+	const permissionDeniedMessage = computed(() => formatMessage(commonMessages.noPermissionAction))
+
+	const canUsePowerActions = computed(() => hasCurrentUserPermission('POWER_ACTIONS'))
+	const canExecuteCommands = computed(() => hasCurrentUserPermission('EXEC_COMMANDS'))
+	const canWriteFiles = computed(() => hasCurrentUserPermission('FILES_WRITE'))
+	const canSetup = computed(() => hasCurrentUserPermission('SETUP'))
+	const canManageBackups = computed(() => hasCurrentUserPermission('BACKUPS'))
+	const canUseAdvancedSettings = computed(() => hasCurrentUserPermission('ADVANCED'))
+	const canResetServer = computed(() => hasCurrentUserPermission('RESET_SERVER'))
+	const canManageUsers = computed(() => hasCurrentUserPermission('MANAGE_USERS'))
+
+	const permissionTooltip = (allowed: boolean) =>
+		allowed ? undefined : permissionDeniedMessage.value
+
+	return {
+		currentUserPermissions,
+		permissionDeniedMessage,
+		hasCurrentUserPermission,
+		canUsePowerActions,
+		canExecuteCommands,
+		canWriteFiles,
+		canSetup,
+		canManageBackups,
+		canUseAdvancedSettings,
+		canResetServer,
+		canManageUsers,
+		permissionTooltip,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
index 8c4daf10d3..a720d5fb54 100644
--- a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
@@ -1,7 +1,11 @@
 <template>
 	<div class="flex items-center gap-1">
 		<ButtonStyled v-if="showClear && hasLogs" type="transparent">
-			<button @click="emit('clear')">
+			<button
+				v-tooltip="clearDisabled ? clearDisabledTooltip : undefined"
+				:disabled="clearDisabled"
+				@click="emit('clear')"
+			>
 				<XIcon />
 				Clear
 			</button>
@@ -56,6 +60,8 @@ defineProps<{
 	shareDisabledTooltip?: string
 	sharing?: boolean
 	fullscreen?: boolean
+	clearDisabled?: boolean
+	clearDisabledTooltip?: string
 	showDelete?: boolean
 	deleteDisabled?: boolean
 	deleteDisabledTooltip?: string
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index ec28059e57..73b98550a8 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -44,6 +44,8 @@
 				:share-disabled="resolvedShareDisabled"
 				:sharing="isSharing"
 				:fullscreen="isFullscreen"
+				:clear-disabled="resolvedClearDisabled"
+				:clear-disabled-tooltip="resolvedClearDisabledTooltip"
 				:show-delete="showDelete"
 				:delete-disabled="resolvedDeleteDisabled"
 				:delete-disabled-tooltip="ctx.deleteDisabledTooltip"
@@ -59,6 +61,8 @@
 			class="min-h-0 flex-1"
 			:show-input="resolvedShowInput"
 			:disable-input="resolvedInputDisabled"
+			:disable-input-tooltip="resolvedInputDisabledTooltip"
+			:disabled-input-placeholder="resolvedInputDisabledPlaceholder"
 			:fullscreen="isFullscreen"
 			:empty-state-type="ctx.emptyStateType"
 			:loading="resolvedLoading"
@@ -217,6 +221,11 @@ const resolvedDisableInput = computed(() => {
 	return isRef(v) ? v.value : v
 })
 
+function unwrapMaybeRef<T>(value: T | { value: T } | undefined): T | undefined {
+	if (value === undefined) return undefined
+	return isRef(value) ? value.value : value
+}
+
 // needs historical log start/end flags on ws to be properly useful
 const resolvedLoading = computed(() => {
 	const v = ctx.loading
@@ -226,6 +235,14 @@ const resolvedLoading = computed(() => {
 
 const resolvedInputDisabled = computed(() => resolvedDisableInput.value || resolvedLoading.value)
 
+const resolvedInputDisabledTooltip = computed(() =>
+	resolvedDisableInput.value ? unwrapMaybeRef(ctx.disableCommandInputTooltip) : undefined,
+)
+
+const resolvedInputDisabledPlaceholder = computed(() =>
+	resolvedInputDisabledTooltip.value ? 'Command input disabled' : 'Server is not running',
+)
+
 const resolvedShareDisabled = computed(() => {
 	const v = ctx.shareDisabled
 	if (!v) return false
@@ -240,6 +257,16 @@ const resolvedDeleteDisabled = computed(() => {
 	return isRef(v) ? v.value : v
 })
 
+const resolvedClearDisabled = computed(() => {
+	const v = ctx.clearDisabled
+	if (!v) return false
+	return isRef(v) ? v.value : v
+})
+
+const resolvedClearDisabledTooltip = computed(() =>
+	resolvedClearDisabled.value ? unwrapMaybeRef(ctx.clearDisabledTooltip) : undefined,
+)
+
 function handleTerminalReady(_terminal: Terminal) {
 	rewriteFiltered()
 }
@@ -360,10 +387,12 @@ watch(resolvedLoading, (loading) => {
 })
 
 function handleCommand(cmd: string) {
+	if (resolvedInputDisabled.value) return
 	ctx.sendCommand?.(cmd)
 }
 
 function handleClear() {
+	if (resolvedClearDisabled.value) return
 	const term = terminalRef.value?.terminal
 	if (term) clearSearchHighlights(term)
 	terminalRef.value?.reset()
diff --git a/packages/ui/src/layouts/shared/console/providers/console-manager.ts b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
index 5946c1dc4f..1d8da4b17c 100644
--- a/packages/ui/src/layouts/shared/console/providers/console-manager.ts
+++ b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
@@ -14,10 +14,13 @@ export interface ConsoleManagerContext {
 	sendCommand?: (cmd: string) => void
 	showCommandInput?: boolean | Ref<boolean> | ComputedRef<boolean>
 	disableCommandInput?: boolean | Ref<boolean> | ComputedRef<boolean>
+	disableCommandInputTooltip?: string | Ref<string | undefined> | ComputedRef<string | undefined>
 
 	loading?: Ref<boolean> | ComputedRef<boolean>
 
 	onClear?: () => void
+	clearDisabled?: Ref<boolean> | ComputedRef<boolean>
+	clearDisabledTooltip?: string | Ref<string | undefined> | ComputedRef<string | undefined>
 	onDelete?: () => Promise<void>
 	deleteDisabled?: Ref<boolean> | ComputedRef<boolean>
 	deleteDisabledTooltip?: string
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 d908bfb034..3a600cc760 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
@@ -55,6 +55,9 @@ interface Props {
 	hideSwitchVersion?: boolean
 	overflowOptions?: OverflowMenuOption[]
 	disabled?: boolean
+	disabledTooltip?: string | null
+	toggleDisabled?: boolean
+	toggleDisabledTooltip?: string | null
 	showCheckbox?: boolean
 	hideDelete?: boolean
 	hideActions?: boolean
@@ -73,6 +76,9 @@ const props = withDefaults(defineProps<Props>(), {
 	hideSwitchVersion: false,
 	overflowOptions: undefined,
 	disabled: false,
+	disabledTooltip: undefined,
+	toggleDisabled: false,
+	toggleDisabledTooltip: undefined,
 	showCheckbox: false,
 	hideDelete: false,
 	hideActions: false,
@@ -98,6 +104,7 @@ const versionNumberRef = ref<HTMLElement | null>(null)
 const fileNameRef = ref<HTMLElement | null>(null)
 
 const isDisabled = computed(() => props.disabled || props.installing)
+const isToggleDisabled = computed(() => isDisabled.value || props.toggleDisabled)
 
 const clientWarningMessage = computed(() => {
 	switch (props.clientWarning) {
@@ -173,8 +180,19 @@ const deleteHovered = ref(false)
 						>
 							{{ project.title }}
 						</AutoLink>
-						<Tooltip v-if="isClientOnly">
-							<TriangleAlertIcon class="size-4 shrink-0 text-orange" />
+						<Tooltip
+							v-if="isClientOnly"
+							theme="dismissable-prompt"
+							class="inline-flex shrink-0"
+							:triggers="['hover', 'focus']"
+							no-auto-focus
+						>
+							<span
+								class="inline-flex size-5 shrink-0 cursor-help items-center justify-center"
+								tabindex="0"
+							>
+								<TriangleAlertIcon class="pointer-events-none size-4 text-orange" />
+							</span>
 							<template #popper>
 								<div class="max-w-[18rem] text-sm">
 									{{ formatMessage(clientWarningMessage) }}
@@ -283,7 +301,11 @@ const deleteHovered = ref(false)
 					hover-color-fill="background"
 				>
 					<button
-						v-tooltip="formatMessage(commonMessages.updateAvailableLabel)"
+						v-tooltip="
+							isDisabled && disabledTooltip
+								? disabledTooltip
+								: formatMessage(commonMessages.updateAvailableLabel)
+						"
 						:disabled="isDisabled"
 						@click="emit('update')"
 					>
@@ -296,7 +318,11 @@ const deleteHovered = ref(false)
 					type="transparent"
 				>
 					<button
-						v-tooltip="formatMessage(commonMessages.switchVersionButton)"
+						v-tooltip="
+							isDisabled && disabledTooltip
+								? disabledTooltip
+								: formatMessage(commonMessages.switchVersionButton)
+						"
 						:disabled="isDisabled"
 						@click="emit('switchVersion')"
 					>
@@ -307,8 +333,13 @@ const deleteHovered = ref(false)
 
 			<Toggle
 				v-if="enabled !== undefined"
+				v-tooltip="
+					isToggleDisabled && (toggleDisabledTooltip || disabledTooltip)
+						? (toggleDisabledTooltip ?? disabledTooltip)
+						: undefined
+				"
 				:model-value="enabled"
-				:disabled="isDisabled"
+				:disabled="isToggleDisabled"
 				:aria-label="project.title"
 				class="my-auto"
 				@update:model-value="(val) => emit('update:enabled', val as boolean)"
@@ -317,11 +348,13 @@ const deleteHovered = ref(false)
 			<ButtonStyled v-if="hasDeleteListener && !props.hideDelete" circular type="transparent">
 				<button
 					v-tooltip="
-						formatMessage(
-							shiftHeld && deleteHovered
-								? commonMessages.deleteImmediatelyLabel
-								: commonMessages.deleteLabel,
-						)
+						isDisabled && disabledTooltip
+							? disabledTooltip
+							: formatMessage(
+									shiftHeld && deleteHovered
+										? commonMessages.deleteImmediatelyLabel
+										: commonMessages.deleteLabel,
+								)
 					"
 					:disabled="isDisabled"
 					@click="emit('delete', $event)"
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
index ee5a8c98bf..63cfccf670 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
@@ -281,6 +281,9 @@ function handleSort(column: ContentCardTableSortColumn) {
 					:hide-switch-version="item.hideSwitchVersion"
 					:overflow-options="item.overflowOptions"
 					:disabled="item.disabled"
+					:disabled-tooltip="item.disabledTooltip"
+					:toggle-disabled="item.toggleDisabled"
+					:toggle-disabled-tooltip="item.toggleDisabledTooltip"
 					:show-checkbox="showSelection"
 					:hide-delete="hideDelete"
 					:hide-actions="!hasAnyActions"
@@ -336,6 +339,9 @@ function handleSort(column: ContentCardTableSortColumn) {
 				:client-warning="item.clientWarning"
 				:overflow-options="item.overflowOptions"
 				:disabled="item.disabled"
+				:disabled-tooltip="item.disabledTooltip"
+				:toggle-disabled="item.toggleDisabled"
+				:toggle-disabled-tooltip="item.toggleDisabledTooltip"
 				:show-checkbox="showSelection"
 				:hide-delete="hideDelete"
 				:hide-actions="!hasAnyActions"
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
index fd3d71aad9..154cb27bd8 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
@@ -224,6 +224,7 @@ onUnmounted(() => {
 						<Tooltip
 							v-if="hasContentListener"
 							theme="dismissable-prompt"
+							class="inline-flex"
 							:triggers="[]"
 							:shown="showContentHint && isExpanded"
 							:auto-hide="false"
@@ -293,6 +294,7 @@ onUnmounted(() => {
 					<Tooltip
 						v-if="collapsedOptions.length"
 						theme="dismissable-prompt"
+						class="inline-flex"
 						:triggers="[]"
 						:shown="showContentHint && !isExpanded"
 						:auto-hide="false"
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue
index a3510c454f..ce5cbe70fb 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue
@@ -68,6 +68,7 @@ interface Props {
 	selectedItems: ContentItem[]
 	contentTypeLabel?: string
 	isBusy?: boolean
+	busyTooltip?: string | null
 	isBulkOperating?: boolean
 	bulkOperation?: BulkOperationType | null
 	bulkProgress?: number
@@ -80,6 +81,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
 	contentTypeLabel: undefined,
 	isBusy: false,
+	busyTooltip: undefined,
 	isBulkOperating: false,
 	bulkOperation: null,
 	bulkProgress: 0,
@@ -196,9 +198,11 @@ const bulkProgressMessage = computed(() => {
 			<ButtonStyled type="transparent">
 				<button
 					v-tooltip="
-						allEnabled
-							? formatMessage(messages.allAlreadyEnabled)
-							: formatMessage(commonMessages.enableButton)
+						isBusy && busyTooltip
+							? busyTooltip
+							: allEnabled
+								? formatMessage(messages.allAlreadyEnabled)
+								: formatMessage(commonMessages.enableButton)
 					"
 					:disabled="isBusy || allEnabled"
 					@click="emit('enable')"
@@ -210,9 +214,11 @@ const bulkProgressMessage = computed(() => {
 			<ButtonStyled type="transparent">
 				<button
 					v-tooltip="
-						allDisabled
-							? formatMessage(messages.allAlreadyDisabled)
-							: formatMessage(commonMessages.disableButton)
+						isBusy && busyTooltip
+							? busyTooltip
+							: allDisabled
+								? formatMessage(messages.allAlreadyDisabled)
+								: formatMessage(commonMessages.disableButton)
 					"
 					:disabled="isBusy || allDisabled"
 					@click="emit('disable')"
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
index 33bb748cc2..da958bdbe1 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
@@ -8,11 +8,13 @@
 	>
 		<div class="flex flex-col gap-6">
 			<Admonition type="warning" :header="formatMessage(messages.admonitionHeader)">
-				{{ formatMessage(messages.admonitionBody, { count }) }}
+				{{ formatMessage(messages.admonitionBody, { count: props.count }) }}
 			</Admonition>
 			<InlineBackupCreator
 				ref="backupCreator"
-				:backup-name="backupTip ? `Before bulk update (${backupTip})` : 'Before bulk update'"
+				:backup-name="
+					props.backupTip ? `Before bulk update (${props.backupTip})` : 'Before bulk update'
+				"
 				:shift-click-hint-override="formatMessage(messages.shiftClickHint)"
 				@update:buttons-disabled="buttonsDisabled = $event"
 			/>
@@ -27,9 +29,13 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="orange">
-					<button :disabled="buttonsDisabled" @click="confirm">
+					<button
+						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+						:disabled="buttonsDisabled || props.actionDisabled"
+						@click="confirm"
+					>
 						<DownloadIcon />
-						{{ formatMessage(messages.updateButton, { count }) }}
+						{{ formatMessage(messages.updateButton, { count: props.count }) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -76,10 +82,12 @@ const messages = defineMessages({
 	},
 })
 
-defineProps<{
+const props = defineProps<{
 	count: number
 	server?: boolean
 	backupTip?: string
+	actionDisabled?: boolean
+	actionDisabledTooltip?: string
 }>()
 
 const emit = defineEmits<{
@@ -95,6 +103,7 @@ function show() {
 }
 
 function confirm() {
+	if (props.actionDisabled) return
 	modal.value?.hide()
 	emit('update')
 }
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
index 64f0b1ad06..540bfe7a97 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
@@ -3,23 +3,23 @@
 		ref="modal"
 		:header="
 			formatMessage(messages.header, {
-				itemType: formatContentTypeSentence(formatMessage, itemType, count),
+				itemType: formatContentTypeSentence(formatMessage, props.itemType, props.count),
 			})
 		"
-		:fade="variant === 'server' ? 'warning' : 'danger'"
+		:fade="props.variant === 'server' ? 'warning' : 'danger'"
 		max-width="500px"
 		:on-hide="() => backupCreator?.cancelBackup()"
 	>
 		<div class="flex flex-col gap-6">
 			<Admonition
-				:type="variant === 'server' ? 'warning' : 'critical'"
+				:type="props.variant === 'server' ? 'warning' : 'critical'"
 				:header="formatMessage(messages.admonitionHeader)"
 			>
 				{{ formatMessage(messages.admonitionBody) }}
 			</Admonition>
 			<InlineBackupCreator
 				ref="backupCreator"
-				:backup-name="backupTip ? `Before deletion (${backupTip})` : 'Before deletion'"
+				:backup-name="props.backupTip ? `Before deletion (${props.backupTip})` : 'Before deletion'"
 				@update:buttons-disabled="buttonsDisabled = $event"
 			/>
 		</div>
@@ -32,13 +32,17 @@
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled :color="variant === 'server' ? 'orange' : 'red'">
-					<button :disabled="buttonsDisabled" @click="confirm">
+				<ButtonStyled :color="props.variant === 'server' ? 'orange' : 'red'">
+					<button
+						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+						:disabled="buttonsDisabled || props.actionDisabled"
+						@click="confirm"
+					>
 						<TrashIcon />
 						{{
 							formatMessage(messages.deleteButton, {
-								count,
-								itemType: formatContentTypeSentence(formatMessage, itemType, count),
+								count: props.count,
+								itemType: formatContentTypeSentence(formatMessage, props.itemType, props.count),
 							})
 						}}
 					</button>
@@ -82,16 +86,20 @@ const messages = defineMessages({
 	},
 })
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		count: number
 		itemType: string
 		variant?: 'instance' | 'server'
 		backupTip?: string
+		actionDisabled?: boolean
+		actionDisabledTooltip?: string
 	}>(),
 	{
 		variant: 'instance',
 		backupTip: undefined,
+		actionDisabled: false,
+		actionDisabledTooltip: undefined,
 	},
 )
 
@@ -108,6 +116,7 @@ function show() {
 }
 
 function confirm() {
+	if (props.actionDisabled) return
 	modal.value?.hide()
 	emit('delete')
 }
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
index 26be19f847..ffe36eda55 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
@@ -35,7 +35,11 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="orange">
-					<button :disabled="buttonsDisabled" @click="handleConfirm">
+					<button
+						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+						:disabled="buttonsDisabled || props.actionDisabled"
+						@click="handleConfirm"
+					>
 						<DownloadIcon />
 						{{
 							formatMessage(messages.confirmButton, { action: downgrade ? 'downgrade' : 'update' })
@@ -62,6 +66,8 @@ import InlineBackupCreator from './InlineBackupCreator.vue'
 const props = defineProps<{
 	downgrade?: boolean
 	backupTip?: string
+	actionDisabled?: boolean
+	actionDisabledTooltip?: string
 }>()
 
 const { formatMessage } = useVIntl()
@@ -106,6 +112,7 @@ function show() {
 }
 
 function handleConfirm() {
+	if (props.actionDisabled) return
 	modal.value?.hide()
 	emit('confirm')
 }
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
index 22b3c55c53..d8946e3a5e 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
@@ -43,12 +43,14 @@ import { ref } from 'vue'
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
+import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
 import InlineBackupCreator from './InlineBackupCreator.vue'
 
 const { formatMessage } = useVIntl()
+const debug = useDebugLogger('ConfirmReinstallModal')
 
 const messages = defineMessages({
 	header: {
@@ -84,12 +86,27 @@ const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 
 function show() {
+	debug('show: called', {
+		hasModalRef: !!modal.value,
+		hasBackupCreatorRef: !!backupCreator.value,
+		buttonsDisabled: buttonsDisabled.value,
+	})
 	modal.value?.show()
+	debug('show: returned from modal.show', {
+		hasModalRef: !!modal.value,
+		hasBackupCreatorRef: !!backupCreator.value,
+		buttonsDisabled: buttonsDisabled.value,
+	})
 }
 
 function confirm() {
+	debug('confirm: called', {
+		hasModalRef: !!modal.value,
+		buttonsDisabled: buttonsDisabled.value,
+	})
 	modal.value?.hide()
 	emit('reinstall')
+	debug('confirm: emitted reinstall')
 }
 
 defineExpose({
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
index e0cfe88f04..a9dedf3c30 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
@@ -37,6 +37,7 @@ import { ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
+import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -45,6 +46,7 @@ defineProps<{
 }>()
 
 const { formatMessage } = useVIntl()
+const debug = useDebugLogger('ConfirmRepairModal')
 
 const messages = defineMessages({
 	header: {
@@ -82,12 +84,16 @@ const emit = defineEmits<{
 const modal = ref<InstanceType<typeof NewModal>>()
 
 function show() {
+	debug('show: called', { hasModalRef: !!modal.value })
 	modal.value?.show()
+	debug('show: returned from modal.show', { hasModalRef: !!modal.value })
 }
 
 function confirm() {
+	debug('confirm: called', { hasModalRef: !!modal.value })
 	modal.value?.hide()
 	emit('repair')
+	debug('confirm: emitted repair')
 }
 
 defineExpose({
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
index e4f6af3aaf..6d31307e43 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
@@ -12,7 +12,7 @@
 			</Admonition>
 			<InlineBackupCreator
 				ref="backupCreator"
-				:backup-name="backupTip ? `Before unlink (${backupTip})` : 'Before unlink'"
+				:backup-name="props.backupTip ? `Before unlink (${props.backupTip})` : 'Before unlink'"
 				@update:buttons-disabled="buttonsDisabled = $event"
 			/>
 		</div>
@@ -26,9 +26,13 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="orange">
-					<button :disabled="buttonsDisabled" @click="confirm">
+					<button
+						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+						:disabled="buttonsDisabled || props.actionDisabled"
+						@click="confirm"
+					>
 						<UnlinkIcon />
-						{{ formatMessage(messages.unlinkButton) }}
+						{{ formatMessage(props.server ? messages.header : messages.unlinkButton) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -43,17 +47,21 @@ import { ref } from 'vue'
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
+import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
 import InlineBackupCreator from './InlineBackupCreator.vue'
 
-defineProps<{
+const props = defineProps<{
 	server?: boolean
 	backupTip?: string
+	actionDisabled?: boolean
+	actionDisabledTooltip?: string
 }>()
 
 const { formatMessage } = useVIntl()
+const debug = useDebugLogger('ConfirmUnlinkModal')
 
 const messages = defineMessages({
 	header: {
@@ -84,12 +92,34 @@ const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 
 function show() {
+	debug('show: called', {
+		hasModalRef: !!modal.value,
+		hasBackupCreatorRef: !!backupCreator.value,
+		buttonsDisabled: buttonsDisabled.value,
+		actionDisabled: props.actionDisabled,
+	})
 	modal.value?.show()
+	debug('show: returned from modal.show', {
+		hasModalRef: !!modal.value,
+		hasBackupCreatorRef: !!backupCreator.value,
+		buttonsDisabled: buttonsDisabled.value,
+		actionDisabled: props.actionDisabled,
+	})
 }
 
 function confirm() {
+	debug('confirm: called', {
+		hasModalRef: !!modal.value,
+		buttonsDisabled: buttonsDisabled.value,
+		actionDisabled: props.actionDisabled,
+	})
+	if (props.actionDisabled) {
+		debug('confirm: ignored actionDisabled')
+		return
+	}
 	modal.value?.hide()
 	emit('unlink')
+	debug('confirm: emitted unlink')
 }
 
 defineExpose({
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 8a351a180f..291d49171b 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
@@ -114,14 +114,14 @@
 							inst.name
 						}}</span>
 					</button>
-					<ButtonStyled v-if="inst.installed" :disabled="true">
-						<button>
+					<ButtonStyled v-if="inst.installed">
+						<button disabled>
 							<CheckIcon />
 							{{ formatMessage(messages.installedBadge) }}
 						</button>
 					</ButtonStyled>
-					<ButtonStyled v-else-if="inst.compatible" :disabled="inst.installing">
-						<button @click="emit('install', inst)">
+					<ButtonStyled v-else-if="inst.compatible">
+						<button :disabled="inst.installing" @click="emit('install', inst)">
 							{{
 								inst.installing
 									? formatMessage(commonMessages.installingLabel)
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
index ab2c933d53..bdc7398003 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
@@ -216,7 +216,10 @@
 				</ButtonStyled>
 				<ButtonStyled color="brand">
 					<button
-						:disabled="!selectedVersion || selectedVersion.id === currentVersionId"
+						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+						:disabled="
+							props.actionDisabled || !selectedVersion || selectedVersion.id === currentVersionId
+						"
 						@click="handleUpdate"
 					>
 						<DownloadIcon />
@@ -393,6 +396,8 @@ const props = withDefaults(
 		loading?: boolean
 		/** Whether changelog is being loaded for the selected version */
 		loadingChangelog?: boolean
+		actionDisabled?: boolean
+		actionDisabledTooltip?: string
 	}>(),
 	{
 		projectType: undefined,
@@ -401,6 +406,8 @@ const props = withDefaults(
 		header: undefined,
 		loading: false,
 		loadingChangelog: false,
+		actionDisabled: false,
+		actionDisabledTooltip: undefined,
 	},
 )
 
@@ -616,6 +623,7 @@ function handleVersionSelect(version: Labrinth.Versions.v2.Version) {
 }
 
 function handleUpdate(event: MouseEvent) {
+	if (props.actionDisabled) return
 	if (selectedVersion.value) {
 		const changesGameVersion = versionChangesGameVersion(
 			selectedVersion.value,
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
index 6688506bc5..f2cb95231f 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
@@ -13,13 +13,17 @@
 			<ButtonStyled v-if="!backup.backupComplete.value && !backup.backupFailed.value">
 				<button
 					v-tooltip="
-						backup.externalBackupInProgress.value
-							? formatMessage(messages.backupInProgress)
-							: undefined
+						!canManageBackups
+							? permissionDeniedMessage
+							: backup.externalBackupInProgress.value
+								? formatMessage(messages.backupInProgress)
+								: undefined
 					"
 					class="!shadow-none"
-					:disabled="backup.isBackingUp.value || backup.externalBackupInProgress.value"
-					@click="backup.startBackup()"
+					:disabled="
+						!canManageBackups || backup.isBackingUp.value || backup.externalBackupInProgress.value
+					"
+					@click="startBackup"
 				>
 					<SpinnerIcon v-if="backup.isBackingUp.value" class="size-5 animate-spin" />
 					<PlusIcon v-else class="size-5" />
@@ -55,10 +59,13 @@
 
 <script setup lang="ts">
 import { CheckCircleIcon, PlusIcon, SpinnerIcon, TriangleAlertIcon } from '@modrinth/assets'
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { hasServerPermission } from '#ui/composables/server-permissions'
+import { injectModrinthServerContext } from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
 
 import { useInlineBackup } from '../../composables/use-inline-backup'
 
@@ -73,9 +80,25 @@ const emit = defineEmits<{
 }>()
 
 const { formatMessage } = useVIntl()
+const serverCtx = injectModrinthServerContext(null)
+const canManageBackups = computed(
+	() => !serverCtx || hasServerPermission(serverCtx.currentUserPermissions.value, 'BACKUPS'),
+)
+const permissionDeniedMessage = computed(() => formatMessage(commonMessages.noPermissionAction))
 
 const backup = useInlineBackup(() => props.backupName)
 
+function startBackup() {
+	if (
+		!canManageBackups.value ||
+		backup.externalBackupInProgress.value ||
+		backup.isBackingUp.value
+	) {
+		return
+	}
+	backup.startBackup()
+}
+
 watch(
 	() => backup.isBackingUp.value,
 	(backing) => {
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
index 79a2406b41..edf1c8bb67 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
@@ -36,7 +36,8 @@ interface Props {
 	modpackName?: string
 	modpackIconUrl?: string
 	enableToggle?: boolean
-	busy?: boolean
+	actionDisabled?: boolean
+	actionDisabledTooltip?: string | null
 	getOverflowOptions?: (item: ContentItem) => OverflowMenuOption[]
 	switchVersion?: (item: ContentItem) => void
 }
@@ -45,7 +46,8 @@ const props = withDefaults(defineProps<Props>(), {
 	modpackName: undefined,
 	modpackIconUrl: undefined,
 	enableToggle: false,
-	busy: false,
+	actionDisabled: false,
+	actionDisabledTooltip: undefined,
 	getOverflowOptions: undefined,
 	switchVersion: undefined,
 })
@@ -54,6 +56,7 @@ const emit = defineEmits<{
 	'update:enabled': [item: ContentItem, value: boolean]
 	'bulk:enable': [items: ContentItem[]]
 	'bulk:disable': [items: ContentItem[]]
+	hide: []
 }>()
 
 const messages = defineMessages({
@@ -250,12 +253,16 @@ const tableItems = computed<ContentCardTableItem[]>(() =>
 			: undefined,
 		...(props.enableToggle ? { enabled: item.enabled } : {}),
 		installing: item.installing === true,
+		toggleDisabled: props.actionDisabled,
+		toggleDisabledTooltip: props.actionDisabled ? props.actionDisabledTooltip : undefined,
 		isClientOnly:
 			isClientOnlyEnvironment(item.environment) ||
 			!!item.pack_client_retained ||
 			!!item.pack_client_depends,
 		clientWarning: getClientWarningType(item),
-		disabled: props.busy || disabledIds.value.has(item.file_name) || item.installing === true,
+		disabled:
+			props.actionDisabled || disabledIds.value.has(item.file_name) || item.installing === true,
+		disabledTooltip: props.actionDisabled ? props.actionDisabledTooltip : undefined,
 		overflowOptions: [
 			...(props.switchVersion
 				? [
@@ -286,20 +293,20 @@ function getTypeIcon(type: string) {
 }
 
 function handleEnabledChange(fileName: string, value: boolean) {
-	if (props.busy) return
+	if (props.actionDisabled) return
 	const item = items.value.find((i) => i.file_name === fileName)
 	if (!item) return
 	emit('update:enabled', item, value)
 }
 
 function bulkEnable() {
-	if (props.busy) return
+	if (props.actionDisabled) return
 	emit('bulk:enable', [...selectedItems.value])
 	selectedIds.value = []
 }
 
 function bulkDisable() {
-	if (props.busy) return
+	if (props.actionDisabled) return
 	emit('bulk:disable', [...selectedItems.value])
 	selectedIds.value = []
 }
@@ -326,6 +333,10 @@ function hide() {
 	modal.value?.hide()
 }
 
+function handleHide() {
+	emit('hide')
+}
+
 function getState(): ModpackContentModalState | null {
 	if (!items.value.length) return null
 	return {
@@ -383,6 +394,7 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 		ref="modal"
 		:max-width="'min(928px, calc(95vw - 10rem))'"
 		:width="'min(928px, calc(95vw - 10rem))'"
+		:on-hide="handleHide"
 		no-padding
 	>
 		<template #title>
@@ -558,7 +570,8 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 		<ContentSelectionBar
 			v-if="props.enableToggle"
 			:selected-items="selectedItems"
-			:is-bulk-operating="props.busy"
+			:is-busy="props.actionDisabled"
+			:busy-tooltip="props.actionDisabledTooltip"
 			style="--left-bar-width: 0px; --right-bar-width: 0px"
 			@clear="selectedIds = []"
 			@enable="bulkEnable"
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index 451abe9e16..021af85340 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -272,6 +272,9 @@ const tableItems = computed<ContentCardTableItem[]>(() => {
 			id,
 			disabled:
 				isChanging(id) || ctx.isBusy.value || isBulkOperating.value || item.installing === true,
+			disabledTooltip: ctx.isBusy.value ? (ctx.busyMessage?.value ?? null) : null,
+			toggleDisabled: ctx.isBusy.value,
+			toggleDisabledTooltip: ctx.isBusy.value ? (ctx.busyMessage?.value ?? null) : null,
 			installing: item.installing === true,
 			hasUpdate: item.has_update,
 			isClientOnly:
@@ -321,7 +324,7 @@ function handleDeleteById(id: string, event?: MouseEvent) {
 	const item = ctx.items.value.find((i) => getItemId(i) === id)
 	if (item) {
 		pendingDeletionItems.value = [item]
-		if (event?.shiftKey) {
+		if (event?.shiftKey && !ctx.isBusy.value) {
 			confirmDelete()
 		} else {
 			confirmDeletionModal.value?.show()
@@ -331,7 +334,7 @@ function handleDeleteById(id: string, event?: MouseEvent) {
 
 function showBulkDeleteModal(event?: MouseEvent) {
 	pendingDeletionItems.value = [...selectedItems.value]
-	if (event?.shiftKey) {
+	if (event?.shiftKey && !ctx.isBusy.value) {
 		confirmDelete()
 	} else {
 		confirmDeletionModal.value?.show()
@@ -339,6 +342,7 @@ function showBulkDeleteModal(event?: MouseEvent) {
 }
 
 async function confirmDelete() {
+	if (ctx.isBusy.value) return
 	const itemsToDelete = [...pendingDeletionItems.value]
 	pendingDeletionItems.value = []
 	if (itemsToDelete.length === 0) return
@@ -383,6 +387,7 @@ async function confirmDelete() {
 }
 
 async function handleToggleEnabledById(id: string, _value: boolean) {
+	if (ctx.isBusy.value) return
 	const item = ctx.items.value.find((i) => getItemId(i) === id)
 	if (!item) return
 	markChanging(id)
@@ -394,6 +399,7 @@ async function handleToggleEnabledById(id: string, _value: boolean) {
 }
 
 async function bulkEnable() {
+	if (ctx.isBusy.value) return
 	const items = selectedItems.value.filter((item) => !item.enabled)
 	if (items.length === 0) return
 	if (ctx.bulkEnableItems) {
@@ -414,6 +420,7 @@ async function bulkEnable() {
 }
 
 async function bulkDisable() {
+	if (ctx.isBusy.value) return
 	const items = selectedItems.value.filter((item) => item.enabled)
 	if (items.length === 0) return
 	if (ctx.bulkDisableItems) {
@@ -455,7 +462,7 @@ function promptUpdateAll(event?: MouseEvent) {
 	const items = ctx.items.value.filter((item) => item.has_update)
 	if (items.length === 0) return
 	pendingBulkUpdateItems.value = items
-	if (event?.shiftKey) {
+	if (event?.shiftKey && !ctx.isBusy.value) {
 		confirmBulkUpdate()
 	} else {
 		confirmBulkUpdateModal.value?.show()
@@ -467,7 +474,7 @@ function promptUpdateSelected(event?: MouseEvent) {
 	const items = selectedItems.value.filter((item) => item.has_update)
 	if (items.length === 0) return
 	pendingBulkUpdateItems.value = items
-	if (event?.shiftKey) {
+	if (event?.shiftKey && !ctx.isBusy.value) {
 		confirmBulkUpdate()
 	} else {
 		confirmBulkUpdateModal.value?.show()
@@ -475,6 +482,7 @@ function promptUpdateSelected(event?: MouseEvent) {
 }
 
 async function confirmBulkUpdate() {
+	if (ctx.isBusy.value) return
 	const items = pendingBulkUpdateItems.value
 	if (items.length === 0 || !hasBulkUpdateSupport.value) return
 
@@ -525,12 +533,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 					:owner="ctx.modpack.value.owner"
 					:categories="ctx.modpack.value.categories"
 					:has-update="ctx.modpack.value.hasUpdate"
-					:disabled="ctx.modpack.value.disabled || ctx.isBusy.value"
-					:disabled-text="
-						ctx.modpack.value.disabledText ??
-						ctx.busyMessage?.value ??
-						(ctx.isBusy.value ? formatMessage(messages.pleaseWait) : undefined)
-					"
+					:disabled="ctx.modpack.value.disabled"
+					:disabled-text="ctx.modpack.value.disabledText"
 					:show-content-hint="
 						!!(ctx.showContentHint?.value && ctx.modpack.value && ctx.items.value.length === 0)
 					"
@@ -677,14 +681,18 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 									color-fill="text"
 									hover-color-fill="background"
 								>
-									<button :disabled="isBulkOperating || ctx.isBusy.value" @click="promptUpdateAll">
+									<button
+										v-tooltip="formatMessage(messages.updateAll)"
+										:disabled="isBulkOperating"
+										@click="promptUpdateAll"
+									>
 										<DownloadIcon />
 										{{ formatMessage(messages.updateAll) }}
 									</button>
 								</ButtonStyled>
 
 								<ButtonStyled type="transparent">
-									<button :disabled="refreshing || ctx.isBusy.value" @click="handleRefresh">
+									<button :disabled="refreshing" @click="handleRefresh">
 										<RefreshCwIcon :class="refreshing ? 'animate-spin' : ''" />
 										{{ formatMessage(commonMessages.refreshButton) }}
 									</button>
@@ -768,6 +776,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 			:selected-items="selectedItems"
 			:content-type-label="ctx.contentTypeLabel.value"
 			:is-busy="ctx.isBusy.value"
+			:busy-tooltip="ctx.busyMessage?.value"
 			:is-bulk-operating="isBulkOperating"
 			:bulk-operation="bulkOperation"
 			:bulk-progress="bulkProgress"
@@ -789,7 +798,6 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 				>
 					<button
 						v-tooltip="formatMessage(commonMessages.updateButton)"
-						:disabled="ctx.isBusy.value"
 						@click="promptUpdateSelected"
 					>
 						<DownloadIcon />
@@ -852,7 +860,6 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 				>
 					<button
 						v-tooltip="formatMessage(commonMessages.deleteLabel)"
-						:disabled="ctx.isBusy.value"
 						@click="showBulkDeleteModal"
 					>
 						<TrashIcon />
@@ -868,6 +875,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 			:item-type="ctx.contentTypeLabel.value"
 			:variant="ctx.deletionContext ?? 'instance'"
 			:backup-tip="pendingDeletionItems.map((i) => i.project?.title ?? i.file_name).join(', ')"
+			:action-disabled="ctx.isBusy.value"
+			:action-disabled-tooltip="ctx.busyMessage?.value ?? undefined"
 			@delete="confirmDelete"
 		/>
 		<ConfirmBulkUpdateModal
@@ -875,6 +884,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 			ref="confirmBulkUpdateModal"
 			:count="pendingBulkUpdateItems.length"
 			:server="ctx.deletionContext === 'server'"
+			:action-disabled="ctx.isBusy.value"
+			:action-disabled-tooltip="ctx.busyMessage?.value ?? undefined"
 			@update="confirmBulkUpdate"
 		/>
 		<ConfirmUnlinkModal
@@ -882,6 +893,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 			ref="confirmUnlinkModal"
 			:server="ctx.deletionContext === 'server'"
 			:backup-tip="ctx.modpack.value?.project.title"
+			:action-disabled="ctx.isBusy.value"
+			:action-disabled-tooltip="ctx.busyMessage?.value ?? undefined"
 			@unlink="ctx.unlinkModpack!()"
 		/>
 
diff --git a/packages/ui/src/layouts/shared/content-tab/types.ts b/packages/ui/src/layouts/shared/content-tab/types.ts
index c909d081ad..778d6fdc4b 100644
--- a/packages/ui/src/layouts/shared/content-tab/types.ts
+++ b/packages/ui/src/layouts/shared/content-tab/types.ts
@@ -32,6 +32,9 @@ export interface ContentCardTableItem {
 	owner?: ContentOwner
 	enabled?: boolean
 	disabled?: boolean
+	disabledTooltip?: string | null
+	toggleDisabled?: boolean
+	toggleDisabledTooltip?: string | null
 	installing?: boolean
 	hasUpdate?: boolean
 	isClientOnly?: boolean
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
index c460e8869a..1e28ffbbb7 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
@@ -10,6 +10,7 @@
 				<ButtonStyled type="transparent" circular>
 					<button
 						v-tooltip="formatMessage(messages.toggleReplace)"
+						:disabled="props.readonly"
 						:aria-label="formatMessage(messages.toggleReplace)"
 						@click="toggleReplace"
 					>
@@ -88,6 +89,7 @@
 						type="search"
 						size="small"
 						autocomplete="off"
+						:disabled="props.readonly"
 						:placeholder="formatMessage(messages.replaceInFile)"
 						wrapper-class="w-44"
 					/>
@@ -95,7 +97,7 @@
 				<ButtonStyled type="outlined">
 					<button
 						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
-						:disabled="findMatchCount === 0"
+						:disabled="props.readonly || findMatchCount === 0"
 						@click="emit('replace', replaceQuery)"
 					>
 						{{ formatMessage(messages.replace) }}
@@ -104,7 +106,7 @@
 				<ButtonStyled type="outlined">
 					<button
 						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
-						:disabled="findMatchCount === 0"
+						:disabled="props.readonly || findMatchCount === 0"
 						@click="emit('replaceAll', replaceQuery)"
 					>
 						{{ formatMessage(messages.replaceAll) }}
@@ -129,6 +131,7 @@ const props = defineProps<{
 	findMatchCount: number
 	currentFindMatch: number
 	isEditingImage: boolean
+	readonly?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -193,6 +196,7 @@ const findInputRef = ref<{ focus: () => void } | null>(null)
 const replaceInputRef = ref<{ focus: () => void } | null>(null)
 
 function toggleReplace() {
+	if (props.readonly) return
 	isReplaceOpen.value = !isReplaceOpen.value
 	if (isReplaceOpen.value) {
 		nextTick(() => replaceInputRef.value?.focus())
@@ -204,6 +208,7 @@ function focusFindInput() {
 }
 
 function openReplace() {
+	if (props.readonly) return
 	isReplaceOpen.value = true
 	nextTick(() => replaceInputRef.value?.focus())
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
index 7f8a9ebb82..cea2200a4e 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
@@ -8,6 +8,7 @@
 			v-model:is-find-open="isFindOpen"
 			v-model:find-query="inFileFindQuery"
 			:is-editing-image="isEditingImage"
+			:readonly="isEditorReadOnly"
 			:find-match-count="findMatchCount"
 			:current-find-match="currentFindMatch"
 			@find-next="findNext"
@@ -22,6 +23,7 @@
 			v-model:value="fileContent"
 			:lang="editorLanguage"
 			theme="modrinth"
+			:readonly="isEditorReadOnly"
 			:print-margin="false"
 			:style="{ height: editorHeight, fontSize: '0.875rem' }"
 			class="ace-modrinth rounded-[20px]"
@@ -144,6 +146,11 @@ const editorLanguage = computed(() => {
 	const ext = getFileExtension(props.file?.name ?? '')
 	return getEditorLanguage(ext)
 })
+const isEditorReadOnly = computed(() => ctx.isBusy?.value ?? false)
+
+watch(isEditorReadOnly, (readOnly) => {
+	editorInstance.value?.setReadOnly(readOnly)
+})
 
 watch(
 	() => props.file,
@@ -206,6 +213,7 @@ function resetState() {
 
 function onEditorInit(editor: Ace.Editor) {
 	editorInstance.value = editor
+	editor.setReadOnly(isEditorReadOnly.value)
 
 	editor.commands.addCommand({
 		name: 'save',
@@ -223,6 +231,7 @@ function onEditorInit(editor: Ace.Editor) {
 		name: 'replace',
 		bindKey: { win: 'Ctrl-H', mac: 'Command-Option-F' },
 		exec: () => {
+			if (isEditorReadOnly.value) return
 			isFindOpen.value = true
 			nextTick(() => findReplaceRef.value?.openReplace())
 		},
@@ -231,6 +240,7 @@ function onEditorInit(editor: Ace.Editor) {
 
 async function saveFileContent(exit: boolean = false) {
 	if (!props.file) return
+	if (ctx.isBusy?.value) return
 
 	try {
 		const normalizedPath = props.file.path.startsWith('/') ? props.file.path : `/${props.file.path}`
@@ -312,7 +322,7 @@ function closeFind() {
 
 function replaceOne(query: string) {
 	const editor = editorInstance.value
-	if (!editor || findMatchCount.value === 0) return
+	if (!editor || isEditorReadOnly.value || findMatchCount.value === 0) return
 	editor.replace(query)
 	nextTick(() => {
 		const count = countOccurrences(fileContent.value, inFileFindQuery.value)
@@ -323,7 +333,7 @@ function replaceOne(query: string) {
 
 function replaceAllOccurrences(query: string) {
 	const editor = editorInstance.value
-	if (!editor || findMatchCount.value === 0) return
+	if (!editor || isEditorReadOnly.value || findMatchCount.value === 0) return
 	editor.replaceAll(query)
 	nextTick(() => {
 		const count = countOccurrences(fileContent.value, inFileFindQuery.value)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
index 9e5b4f31fd..423635d6e8 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -37,6 +37,7 @@
 				</div>
 				<StyledInput
 					v-model="url"
+					v-tooltip="props.disabled ? props.disabledTooltip : undefined"
 					:icon="LinkIcon"
 					type="url"
 					:placeholder="
@@ -44,7 +45,7 @@
 							? 'https://www.curseforge.com/minecraft/modpacks/.../files/6412259'
 							: 'https://www.example.com/.../modpack-name-1.0.2.zip'
 					"
-					:disabled="submitted"
+					:disabled="submitted || props.disabled"
 					:error="touched && !!error"
 					autocomplete="off"
 					@focus="touched = true"
@@ -74,8 +75,8 @@
 				</ButtonStyled>
 				<ButtonStyled color="brand">
 					<button
-						v-tooltip="error"
-						:disabled="submitted || !!error || backupInProgress"
+						v-tooltip="submitTooltip"
+						:disabled="submitDisabled"
 						type="submit"
 						@click="handleSubmit"
 					>
@@ -118,6 +119,17 @@ const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const { formatMessage } = useVIntl()
 
+const props = withDefaults(
+	defineProps<{
+		disabled?: boolean
+		disabledTooltip?: string
+	}>(),
+	{
+		disabled: false,
+		disabledTooltip: undefined,
+	},
+)
+
 const messages = defineMessages({
 	cfHeader: {
 		id: 'files.zip-url-modal.cf-header',
@@ -239,9 +251,17 @@ const error = computed(() => {
 	return ''
 })
 
+const submitDisabled = computed(
+	() => submitted.value || props.disabled || !!error.value || backupInProgress.value,
+)
+const submitTooltip = computed(() => {
+	if (props.disabled) return props.disabledTooltip
+	return error.value || undefined
+})
+
 const handleSubmit = async () => {
 	touched.value = true
-	if (error.value) return
+	if (submitDisabled.value) return
 
 	submitted.value = true
 	try {
@@ -270,6 +290,8 @@ const handleSubmit = async () => {
 }
 
 const show = (isCf: boolean) => {
+	if (props.disabled) return
+
 	cf.value = isCf
 	url.value = ''
 	submitted.value = false
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 010b9ad4d8..a01de783af 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -3,7 +3,12 @@
 	<FileUnsavedChangesModal ref="unsavedChangesModal" />
 	<FileCreateItemModal ref="createItemModal" :type="newItemType" @create="handleCreateNewItem" />
 	<FileUploadConflictModal ref="uploadConflictModal" @proceed="handleExtractConfirm" />
-	<FileUploadZipUrlModal v-if="ctx.showInstallFromUrl" ref="uploadZipUrlModal" />
+	<FileUploadZipUrlModal
+		v-if="ctx.showInstallFromUrl"
+		ref="uploadZipUrlModal"
+		:disabled="isBusy"
+		:disabled-tooltip="busyTooltip"
+	/>
 	<FileRenameItemModal ref="renameItemModal" :item="selectedItem" @rename="handleRenameItem" />
 	<FileMoveItemModal
 		ref="moveItemModal"
@@ -156,7 +161,11 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand">
-					<button @click="fileEditorRef?.saveFileContent(false)">
+					<button
+						v-tooltip="isBusy ? busyTooltip : undefined"
+						:disabled="isBusy"
+						@click="fileEditorRef?.saveFileContent(false)"
+					>
 						<SaveIcon /> {{ formatMessage(commonMessages.saveButton) }}
 					</button>
 				</ButtonStyled>
@@ -370,6 +379,7 @@ async function confirmDiscardChanges(): Promise<boolean> {
 	if (!hasUnsavedChanges.value) return true
 	const result = await unsavedChangesModal.value?.prompt()
 	if (result === 'save') {
+		if (isBusy.value) return false
 		await fileEditorRef.value?.saveFileContent(false)
 		return true
 	}
@@ -412,10 +422,12 @@ async function handleEditorClose() {
 
 // CRUD handlers
 async function handleCreateNewItem(name: string) {
+	if (isBusy.value) return
 	await ctx.createItem(name, newItemType.value)
 }
 
 async function handleRenameItem(newName: string) {
+	if (isBusy.value) return
 	const item = selectedItem.value
 	if (!item) return
 
@@ -432,6 +444,7 @@ async function handleRenameItem(newName: string) {
 }
 
 async function handleMoveItem(destination: string) {
+	if (isBusy.value) return
 	const item = selectedItem.value
 	if (!item) return
 
@@ -450,6 +463,7 @@ async function handleMoveItem(destination: string) {
 }
 
 function handleDeleteItem() {
+	if (isBusy.value) return
 	const item = selectedItem.value
 	if (!item) return
 
@@ -513,6 +527,7 @@ async function handleExtractItem(item: { name: string; type: string; path: strin
 }
 
 async function handleExtractConfirm(path: string) {
+	if (isBusy.value) return
 	if (!ctx.extractFile) return
 	try {
 		await ctx.extractFile(path, true, false)
diff --git a/packages/ui/src/layouts/shared/installation-settings/composables/use-installation-form.ts b/packages/ui/src/layouts/shared/installation-settings/composables/use-installation-form.ts
index f8eaf328cf..d7ee17d88e 100644
--- a/packages/ui/src/layouts/shared/installation-settings/composables/use-installation-form.ts
+++ b/packages/ui/src/layouts/shared/installation-settings/composables/use-installation-form.ts
@@ -2,6 +2,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import type { Ref } from 'vue'
 import { computed, nextTick, ref, watch } from 'vue'
 
+import { useDebugLogger } from '#ui/composables/debug-logger'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
 import type { ContentUpdaterModal } from '../../content-tab'
@@ -20,6 +21,7 @@ export function useInstallationForm(
 		InstanceType<typeof IncompatibleContentModal> | null | undefined
 	>,
 ) {
+	const debug = useDebugLogger('InstallationSettingsForm')
 	const isEditing = ref(false)
 	const selectedPlatform = ctx.editingPlatformRef ?? ref(ctx.currentPlatform.value)
 	const selectedGameVersion = ctx.editingGameVersionRef ?? ref(ctx.currentGameVersion.value)
@@ -77,13 +79,50 @@ export function useInstallationForm(
 	})
 
 	watch(selectedPlatform, () => {
+		debug('selectedPlatform watch:', {
+			selectedPlatform: selectedPlatform.value,
+			selectedGameVersion: selectedGameVersion.value,
+			selectedLoaderVersion: selectedLoaderVersion.value,
+		})
 		selectedLoaderVersion.value = 0
 	})
 	watch(selectedGameVersion, () => {
+		debug('selectedGameVersion watch:', {
+			selectedPlatform: selectedPlatform.value,
+			selectedGameVersion: selectedGameVersion.value,
+			selectedLoaderVersion: selectedLoaderVersion.value,
+		})
 		selectedLoaderVersion.value = 0
 	})
 
+	watch(
+		[isEditing, isSaving, isVerifying, pendingPreview, incompatibleContentVariant],
+		(value, oldValue) => {
+			debug('state watch:', {
+				oldValue,
+				value,
+				selectedPlatform: selectedPlatform.value,
+				selectedGameVersion: selectedGameVersion.value,
+				selectedLoaderVersion: selectedLoaderVersion.value,
+				isValid: isValid.value,
+				hasChanges: hasChanges.value,
+			})
+		},
+	)
+
 	async function save() {
+		debug('save: start', {
+			isBusy: ctx.isBusy.value,
+			selectedPlatform: selectedPlatform.value,
+			selectedGameVersion: selectedGameVersion.value,
+			selectedLoaderVersion: selectedLoaderVersion.value,
+			isValid: isValid.value,
+			hasChanges: hasChanges.value,
+		})
+		if (ctx.isBusy.value) {
+			debug('save: ignored busy')
+			return
+		}
 		isSaving.value = true
 		try {
 			const platformChanged = selectedPlatform.value !== ctx.currentPlatform.value
@@ -91,22 +130,37 @@ export function useInstallationForm(
 			const gameVersionChanged = selectedGameVersion.value !== ctx.currentGameVersion.value
 
 			if (platformChanged && ctx.disableAllContent) {
+				debug('save: platform changed, showing incompatible modal', {
+					currentPlatform: ctx.currentPlatform.value,
+					selectedPlatform: selectedPlatform.value,
+				})
 				isSaving.value = false
 				incompatibleContentVariant.value = 'loader-change'
 				await nextTick()
+				debug('save: incompatible modal ref before show', {
+					hasRef: !!incompatibleContentModalRef?.value,
+				})
 				incompatibleContentModalRef?.value?.show()
 				return
 			}
 
 			if (isModded && gameVersionChanged && ctx.disableIncompatibleContent) {
+				debug('save: game version changed, showing incompatible modal', {
+					currentGameVersion: ctx.currentGameVersion.value,
+					selectedGameVersion: selectedGameVersion.value,
+				})
 				isSaving.value = false
 				incompatibleContentVariant.value = 'game-version-change'
 				await nextTick()
+				debug('save: incompatible modal ref before show', {
+					hasRef: !!incompatibleContentModalRef?.value,
+				})
 				incompatibleContentModalRef?.value?.show()
 				return
 			}
 
 			if (ctx.previewSave && isModded && gameVersionChanged) {
+				debug('save: previewSave start')
 				isVerifying.value = true
 				abortController = new AbortController()
 				const loaderVersionId =
@@ -128,8 +182,15 @@ export function useInstallationForm(
 				}
 
 				if (preview && (preview.diffs.length > 0 || preview.hasUnknownContent)) {
+					debug('save: preview returned diffs, showing content diff modal', {
+						diffs: preview.diffs.length,
+						hasUnknownContent: preview.hasUnknownContent,
+					})
 					pendingPreview.value = preview
 					await nextTick()
+					debug('save: content diff modal ref before show', {
+						hasRef: !!contentDiffModalRef?.value,
+					})
 					contentDiffModalRef?.value?.show()
 					return
 				}
@@ -137,11 +198,17 @@ export function useInstallationForm(
 
 			await performSave()
 		} catch {
+			debug('save: caught error, resetting isSaving')
 			isSaving.value = false
 		}
 	}
 
 	async function performSave() {
+		debug('performSave: start', {
+			selectedPlatform: selectedPlatform.value,
+			selectedGameVersion: selectedGameVersion.value,
+			selectedLoaderVersion: selectedLoaderVersion.value,
+		})
 		try {
 			const loaderVersionId =
 				selectedPlatform.value !== 'vanilla'
@@ -150,12 +217,19 @@ export function useInstallationForm(
 			await ctx.save(selectedPlatform.value, selectedGameVersion.value, loaderVersionId)
 			if (ctx.afterSave) await ctx.afterSave()
 			isEditing.value = false
+			debug('performSave: success')
 		} finally {
 			isSaving.value = false
+			debug('performSave: finally', { isSaving: isSaving.value, isEditing: isEditing.value })
 		}
 	}
 
 	async function confirmLoaderChange() {
+		debug('confirmLoaderChange: start', { isBusy: ctx.isBusy.value })
+		if (ctx.isBusy.value) {
+			debug('confirmLoaderChange: ignored busy')
+			return
+		}
 		try {
 			if (ctx.disableAllContent) {
 				await ctx.disableAllContent()
@@ -169,6 +243,11 @@ export function useInstallationForm(
 	}
 
 	async function confirmAutoFix() {
+		debug('confirmAutoFix: start', { isBusy: ctx.isBusy.value })
+		if (ctx.isBusy.value) {
+			debug('confirmAutoFix: ignored busy')
+			return
+		}
 		try {
 			if (ctx.previewSave) {
 				isVerifying.value = true
@@ -192,10 +271,17 @@ export function useInstallationForm(
 				}
 
 				if (preview && (preview.diffs.length > 0 || preview.hasUnknownContent)) {
+					debug('confirmAutoFix: preview returned diffs', {
+						diffs: preview.diffs.length,
+						hasUnknownContent: preview.hasUnknownContent,
+					})
 					pendingPreview.value = preview
 					incompatibleContentVariant.value = null
 					await nextTick()
 					await nextTick()
+					debug('confirmAutoFix: content diff modal ref before show', {
+						hasRef: !!contentDiffModalRef?.value,
+					})
 					contentDiffModalRef?.value?.show()
 					return
 				}
@@ -210,6 +296,11 @@ export function useInstallationForm(
 	}
 
 	async function confirmDisableConflicts() {
+		debug('confirmDisableConflicts: start', { isBusy: ctx.isBusy.value })
+		if (ctx.isBusy.value) {
+			debug('confirmDisableConflicts: ignored busy')
+			return
+		}
 		try {
 			if (ctx.disableIncompatibleContent) {
 				await ctx.disableIncompatibleContent(selectedGameVersion.value)
@@ -239,6 +330,14 @@ export function useInstallationForm(
 	}
 
 	async function confirmSave() {
+		debug('confirmSave: start', {
+			isBusy: ctx.isBusy.value,
+			hasPendingPreview: !!pendingPreview.value,
+		})
+		if (ctx.isBusy.value) {
+			debug('confirmSave: ignored busy')
+			return
+		}
 		pendingPreview.value = null
 		try {
 			await performSave()
@@ -248,12 +347,28 @@ export function useInstallationForm(
 	}
 
 	function cancelPreview() {
+		debug('cancelPreview: start', {
+			hasPendingPreview: !!pendingPreview.value,
+			incompatibleContentVariant: incompatibleContentVariant.value,
+			isSaving: isSaving.value,
+		})
 		pendingPreview.value = null
 		incompatibleContentVariant.value = null
 		isSaving.value = false
+		debug('cancelPreview: done')
 	}
 
 	function cancelEditing() {
+		debug('cancelEditing: start', {
+			selectedPlatform: selectedPlatform.value,
+			selectedGameVersion: selectedGameVersion.value,
+			selectedLoaderVersion: selectedLoaderVersion.value,
+			currentPlatform: ctx.currentPlatform.value,
+			currentGameVersion: ctx.currentGameVersion.value,
+			currentLoaderVersion: ctx.currentLoaderVersion.value,
+			isSaving: isSaving.value,
+			isVerifying: isVerifying.value,
+		})
 		abortController?.abort()
 		abortController = null
 		isVerifying.value = false
@@ -271,6 +386,13 @@ export function useInstallationForm(
 			0,
 		)
 		isEditing.value = false
+		debug('cancelEditing: done', {
+			selectedPlatform: selectedPlatform.value,
+			selectedGameVersion: selectedGameVersion.value,
+			selectedLoaderVersion: selectedLoaderVersion.value,
+			entries: entries.length,
+			isEditing: isEditing.value,
+		})
 	}
 
 	// Modpack updater state
@@ -279,35 +401,66 @@ export function useInstallationForm(
 	const loadingVersions = ref(false)
 	const loadingChangelog = ref(false)
 
+	watch([updatingModpack, loadingVersions, loadingChangelog], (value, oldValue) => {
+		debug('updater state watch:', {
+			oldValue,
+			value,
+			versions: updatingProjectVersions.value.length,
+			selectedPlatform: selectedPlatform.value,
+			selectedGameVersion: selectedGameVersion.value,
+		})
+	})
+
 	async function handleChangeModpackVersion() {
+		debug('handleChangeModpackVersion: start', {
+			isBusy: ctx.isBusy.value,
+			currentVersionId: ctx.updaterModalProps.value.currentVersionId,
+			hasUpdaterRef: !!updaterModalRef.value,
+		})
+		if (ctx.isBusy.value) {
+			debug('handleChangeModpackVersion: ignored busy')
+			return
+		}
 		updatingModpack.value = true
 		loadingChangelog.value = false
 
 		const cached = ctx.getCachedModpackVersions()
 		if (cached) {
+			debug('handleChangeModpackVersion: using cached versions', { count: cached.length })
 			updatingProjectVersions.value = [...cached].sort(
 				(a, b) => new Date(b.date_published).getTime() - new Date(a.date_published).getTime(),
 			)
 			loadingVersions.value = false
 		} else {
+			debug('handleChangeModpackVersion: no cached versions')
 			updatingProjectVersions.value = []
 			loadingVersions.value = true
 		}
 
 		await nextTick()
+		debug('handleChangeModpackVersion: showing updater modal', {
+			hasUpdaterRef: !!updaterModalRef.value,
+			versions: updatingProjectVersions.value.length,
+		})
 		updaterModalRef.value?.show(ctx.updaterModalProps.value.currentVersionId || undefined)
 
 		if (!cached) {
 			try {
+				debug('handleChangeModpackVersion: fetching versions')
 				const versions = await ctx.fetchModpackVersions()
 				versions.sort(
 					(a, b) => new Date(b.date_published).getTime() - new Date(a.date_published).getTime(),
 				)
 				updatingProjectVersions.value = versions
+				debug('handleChangeModpackVersion: fetched versions', { count: versions.length })
 			} catch {
 				// Error handled by context
 			} finally {
 				loadingVersions.value = false
+				debug('handleChangeModpackVersion: fetch done', {
+					loadingVersions: loadingVersions.value,
+					versions: updatingProjectVersions.value.length,
+				})
 			}
 		}
 	}
@@ -322,6 +475,10 @@ export function useInstallationForm(
 	}
 
 	async function handleUpdaterVersionSelect(version: Labrinth.Versions.v2.Version) {
+		debug('handleUpdaterVersionSelect:', {
+			versionId: version.id,
+			hasChangelog: !!version.changelog,
+		})
 		if (version.changelog) return
 		loadingChangelog.value = true
 		try {
@@ -333,6 +490,10 @@ export function useInstallationForm(
 	}
 
 	async function handleUpdaterVersionHover(version: Labrinth.Versions.v2.Version) {
+		debug('handleUpdaterVersionHover:', {
+			versionId: version.id,
+			hasChangelog: !!version.changelog,
+		})
 		if (version.changelog) return
 		try {
 			const full = await ctx.getVersionChangelog(version.id)
@@ -343,17 +504,30 @@ export function useInstallationForm(
 	}
 
 	function resetUpdateState() {
+		debug('resetUpdateState: start', {
+			updatingModpack: updatingModpack.value,
+			versions: updatingProjectVersions.value.length,
+			loadingVersions: loadingVersions.value,
+			loadingChangelog: loadingChangelog.value,
+		})
 		updatingModpack.value = false
 		updatingProjectVersions.value = []
 		loadingVersions.value = false
 		loadingChangelog.value = false
+		debug('resetUpdateState: done')
 	}
 
 	async function handleUpdaterConfirm(version: Labrinth.Versions.v2.Version) {
+		debug('handleUpdaterConfirm: start', { versionId: version.id, isBusy: ctx.isBusy.value })
+		if (ctx.isBusy.value) {
+			debug('handleUpdaterConfirm: ignored busy')
+			return
+		}
 		try {
 			await ctx.onModpackVersionConfirm(version)
 		} finally {
 			resetUpdateState()
+			debug('handleUpdaterConfirm: done')
 		}
 	}
 
diff --git a/packages/ui/src/layouts/shared/installation-settings/layout.vue b/packages/ui/src/layouts/shared/installation-settings/layout.vue
index fc90cef291..ab63097128 100644
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -13,7 +13,7 @@ import {
 	UnlinkIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 
 import AutoLink from '#ui/components/base/AutoLink.vue'
@@ -23,6 +23,7 @@ import Chips from '#ui/components/base/Chips.vue'
 import Combobox from '#ui/components/base/Combobox.vue'
 import PaperChannelBadge from '#ui/components/base/PaperChannelBadge.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
+import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 import { formatLoaderLabel } from '#ui/utils/loaders'
@@ -41,6 +42,7 @@ import type { LoaderVersionEntry } from './types'
 
 const { formatMessage } = useVIntl()
 const ctx = injectInstallationSettings()
+const debug = useDebugLogger('InstallationSettingsLayout')
 
 const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
 const repairModal = ref<InstanceType<typeof ConfirmRepairModal>>()
@@ -61,6 +63,67 @@ const form = useInstallationForm(
 	incompatibleContentModal,
 )
 
+function stateSnapshot() {
+	return {
+		loading: ctx.loading.value,
+		isLinked: ctx.isLinked.value,
+		isBusy: ctx.isBusy.value,
+		busyMessage: ctx.busyMessage?.value,
+		isEditing: form.isEditing.value,
+		isSaving: form.isSaving.value,
+		isVerifying: form.isVerifying.value,
+		selectedPlatform: form.selectedPlatform.value,
+		selectedGameVersion: form.selectedGameVersion.value,
+		selectedLoaderVersion: form.selectedLoaderVersion.value,
+		hasChanges: form.hasChanges.value,
+		isValid: form.isValid.value,
+		updatingModpack: form.updatingModpack.value,
+		loadingVersions: form.loadingVersions.value,
+		pendingPreview: !!form.pendingPreview.value,
+		incompatibleContentVariant: form.incompatibleContentVariant.value,
+		repairing: ctx.repairing?.value,
+		reinstalling: ctx.reinstalling?.value,
+	}
+}
+
+function modalRefsSnapshot() {
+	return {
+		confirmLeaveModal: !!confirmLeaveModal.value,
+		repairModal: !!repairModal.value,
+		reinstallModal: !!reinstallModal.value,
+		unlinkModal: !!unlinkModal.value,
+		contentUpdaterModal: !!contentUpdaterModal.value,
+		contentDiffModal: !!contentDiffModal.value,
+		incompatibleContentModal: !!incompatibleContentModal.value,
+		modpackUpdateModal: !!modpackUpdateModal.value,
+	}
+}
+
+onMounted(() => {
+	debug('mounted', stateSnapshot(), modalRefsSnapshot())
+})
+
+onUpdated(() => {
+	debug('updated', stateSnapshot(), modalRefsSnapshot())
+})
+
+watch(
+	[
+		() => ctx.loading.value,
+		() => ctx.isLinked.value,
+		() => ctx.isBusy.value,
+		() => form.isEditing.value,
+		() => form.isSaving.value,
+		() => form.isVerifying.value,
+		() => form.updatingModpack.value,
+		() => form.pendingPreview.value,
+		() => form.incompatibleContentVariant.value,
+	],
+	(value, oldValue) => {
+		debug('state watch:', { oldValue, value, snapshot: stateSnapshot() })
+	},
+)
+
 function paperLoaderChannelTag(index: number): LoaderVersionEntry['channelTag'] | null {
 	if (form.selectedPlatform.value !== 'paper') return null
 	const entries = ctx.resolveLoaderVersions(
@@ -68,6 +131,13 @@ function paperLoaderChannelTag(index: number): LoaderVersionEntry['channelTag']
 		form.selectedGameVersion.value,
 	)
 	const tag = entries[index]?.channelTag
+	debug('paperLoaderChannelTag:', {
+		index,
+		selectedPlatform: form.selectedPlatform.value,
+		selectedGameVersion: form.selectedGameVersion.value,
+		entries: entries.length,
+		tag,
+	})
 	return tag === 'ALPHA' || tag === 'BETA' ? tag : null
 }
 
@@ -82,6 +152,7 @@ if (typeof window !== 'undefined') {
 	watch(
 		() => form.isSaving.value,
 		(saving) => {
+			debug('isSaving watch:', { saving })
 			if (saving) {
 				window.addEventListener('beforeunload', handleBeforeUnload)
 			} else {
@@ -91,10 +162,12 @@ if (typeof window !== 'undefined') {
 	)
 
 	onBeforeUnmount(() => {
+		debug('beforeUnmount', stateSnapshot(), modalRefsSnapshot())
 		window.removeEventListener('beforeunload', handleBeforeUnload)
 	})
 
 	onBeforeRouteLeave(async () => {
+		debug('beforeRouteLeave:', stateSnapshot())
 		if (form.isSaving.value) {
 			return (await confirmLeaveModal.value?.prompt()) ?? false
 		}
@@ -106,6 +179,14 @@ const disabledPlatforms = computed(() => {
 	if (!ctx.lockPlatform || ctx.currentPlatform.value === 'vanilla') return []
 	return ctx.availablePlatforms.filter((p) => p !== ctx.currentPlatform.value)
 })
+const platformDisabledItems = computed(() =>
+	ctx.isBusy.value ? ctx.availablePlatforms : disabledPlatforms.value,
+)
+const platformDisabledTooltip = computed(() =>
+	ctx.isBusy.value
+		? (ctx.busyMessage?.value ?? undefined)
+		: formatMessage(messages.platformLockTooltip),
+)
 
 const showModpackVersionActions = computed(() => {
 	const val = ctx.showModpackVersionActions
@@ -120,6 +201,17 @@ const isLocalFile = computed(() => {
 })
 
 function handleModpackUpdateRequest(version: Labrinth.Versions.v2.Version, event?: MouseEvent) {
+	debug('handleModpackUpdateRequest: start', {
+		versionId: version.id,
+		versionNumber: version.version_number,
+		shiftKey: event?.shiftKey,
+		snapshot: stateSnapshot(),
+		refs: modalRefsSnapshot(),
+	})
+	if (ctx.isBusy.value) {
+		debug('handleModpackUpdateRequest: ignored busy')
+		return
+	}
 	pendingUpdateVersion.value = version
 
 	const currentVersionId = ctx.updaterModalProps.value.currentVersionId
@@ -132,41 +224,83 @@ function handleModpackUpdateRequest(version: Labrinth.Versions.v2.Version, event
 		versionChangesGameVersion(version, ctx.updaterModalProps.value.currentGameVersion)
 
 	if (event?.shiftKey || !shouldShowWarning) {
+		debug('handleModpackUpdateRequest: confirming without warning', {
+			isUpdateDowngrade: isUpdateDowngrade.value,
+			shouldShowWarning,
+		})
 		handleModpackUpdateConfirm()
 		return
 	}
 
+	debug('handleModpackUpdateRequest: showing confirm modal', {
+		isUpdateDowngrade: isUpdateDowngrade.value,
+		shouldShowWarning,
+		refs: modalRefsSnapshot(),
+	})
 	modpackUpdateModal.value?.show()
 }
 
 function handleModpackUpdateConfirm() {
+	debug('handleModpackUpdateConfirm: start', {
+		pendingVersionId: pendingUpdateVersion.value?.id,
+		snapshot: stateSnapshot(),
+		refs: modalRefsSnapshot(),
+	})
+	if (ctx.isBusy.value) {
+		debug('handleModpackUpdateConfirm: ignored busy')
+		return
+	}
 	const version = pendingUpdateVersion.value
 	if (version) {
+		debug('handleModpackUpdateConfirm: hiding updater and closing settings')
 		contentUpdaterModal.value?.hide()
 		form.cancelEditing()
 		ctx.closeSettings?.()
 		form.handleUpdaterConfirm(version)
 		pendingUpdateVersion.value = null
+		debug('handleModpackUpdateConfirm: done')
 	}
 }
 
 function handleModpackUpdateCancel() {
+	debug('handleModpackUpdateCancel', {
+		pendingVersionId: pendingUpdateVersion.value?.id,
+		snapshot: stateSnapshot(),
+	})
 	pendingUpdateVersion.value = null
 }
 
 function handleRepair() {
+	debug('handleRepair: start', { snapshot: stateSnapshot(), refs: modalRefsSnapshot() })
+	if (ctx.isBusy.value) {
+		debug('handleRepair: ignored busy')
+		return
+	}
 	form.cancelEditing()
 	ctx.repair()
+	debug('handleRepair: invoked ctx.repair')
 }
 
 function handleReinstall() {
+	debug('handleReinstall: start', { snapshot: stateSnapshot(), refs: modalRefsSnapshot() })
+	if (ctx.isBusy.value) {
+		debug('handleReinstall: ignored busy')
+		return
+	}
 	form.cancelEditing()
 	ctx.reinstallModpack()
+	debug('handleReinstall: invoked ctx.reinstallModpack')
 }
 
 function handleUnlink() {
+	debug('handleUnlink: start', { snapshot: stateSnapshot(), refs: modalRefsSnapshot() })
+	if (ctx.isBusy.value) {
+		debug('handleUnlink: ignored busy')
+		return
+	}
 	form.cancelEditing()
 	ctx.unlinkModpack()
+	debug('handleUnlink: invoked ctx.unlinkModpack')
 }
 
 const emit = defineEmits<{
@@ -174,9 +308,90 @@ const emit = defineEmits<{
 }>()
 
 function handleIncompatibleResetServer() {
+	debug('handleIncompatibleResetServer: start', { snapshot: stateSnapshot() })
+	if (ctx.isBusy.value) {
+		debug('handleIncompatibleResetServer: ignored busy')
+		return
+	}
 	form.cancelPreview()
 	form.cancelEditing()
 	emit('reset-server')
+	debug('handleIncompatibleResetServer: emitted reset-server')
+}
+
+function handleStartEditing() {
+	debug('handleStartEditing: before', stateSnapshot())
+	form.isEditing.value = true
+	nextTick(() => {
+		debug('handleStartEditing: after nextTick', stateSnapshot())
+	})
+}
+
+function handleCancelEditing() {
+	debug('handleCancelEditing: before', stateSnapshot())
+	form.cancelEditing()
+	nextTick(() => {
+		debug('handleCancelEditing: after nextTick', stateSnapshot())
+	})
+}
+
+function handleSave() {
+	debug('handleSave: before', stateSnapshot())
+	void form.save().finally(() => {
+		debug('handleSave: after promise', stateSnapshot())
+	})
+}
+
+function handleShowRepairModal() {
+	debug('handleShowRepairModal: before show', {
+		snapshot: stateSnapshot(),
+		refs: modalRefsSnapshot(),
+	})
+	repairModal.value?.show()
+	nextTick(() => {
+		debug('handleShowRepairModal: after nextTick', {
+			snapshot: stateSnapshot(),
+			refs: modalRefsSnapshot(),
+		})
+	})
+}
+
+function handleShowUnlinkModal(event: MouseEvent) {
+	debug('handleShowUnlinkModal: before', {
+		shiftKey: event.shiftKey,
+		snapshot: stateSnapshot(),
+		refs: modalRefsSnapshot(),
+	})
+	if (event.shiftKey) {
+		handleUnlink()
+		return
+	}
+	unlinkModal.value?.show()
+	nextTick(() => {
+		debug('handleShowUnlinkModal: after nextTick', {
+			snapshot: stateSnapshot(),
+			refs: modalRefsSnapshot(),
+		})
+	})
+}
+
+function handleShowReinstallModal(event: MouseEvent) {
+	debug('handleShowReinstallModal: before', {
+		shiftKey: event.shiftKey,
+		snapshot: stateSnapshot(),
+		refs: modalRefsSnapshot(),
+	})
+	if (event.shiftKey) {
+		handleReinstall()
+		return
+	}
+	reinstallModal.value?.show()
+	nextTick(() => {
+		debug('handleShowReinstallModal: after nextTick', {
+			snapshot: stateSnapshot(),
+			refs: modalRefsSnapshot(),
+		})
+	})
 }
 
 defineExpose({
@@ -413,6 +628,7 @@ const messages = defineMessages({
 					<div class="flex flex-wrap gap-2">
 						<ButtonStyled v-if="showModpackVersionActions">
 							<button
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								class="!shadow-none"
 								:disabled="ctx.isBusy.value"
 								@click="form.handleChangeModpackVersion()"
@@ -438,9 +654,10 @@ const messages = defineMessages({
 					<div>
 						<ButtonStyled color="orange">
 							<button
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								class="!shadow-none"
 								:disabled="ctx.isBusy.value"
-								@click="(e: MouseEvent) => (e.shiftKey ? handleUnlink() : unlinkModal?.show())"
+								@click="handleShowUnlinkModal"
 							>
 								<UnlinkIcon class="size-5" />
 								{{
@@ -473,11 +690,10 @@ const messages = defineMessages({
 					<div>
 						<ButtonStyled color="red">
 							<button
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								class="!shadow-none"
 								:disabled="ctx.isBusy.value"
-								@click="
-									(e: MouseEvent) => (e.shiftKey ? handleReinstall() : reinstallModal?.show())
-								"
+								@click="handleShowReinstallModal"
 							>
 								<SpinnerIcon v-if="ctx.reinstalling?.value" class="animate-spin" />
 								<DownloadIcon v-else class="size-5" />
@@ -512,9 +728,10 @@ const messages = defineMessages({
 					<div>
 						<ButtonStyled>
 							<button
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								class="!shadow-none"
 								:disabled="ctx.isBusy.value"
-								@click="repairModal?.show()"
+								@click="handleShowRepairModal"
 							>
 								<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
 								<HammerIcon v-else class="size-5" />
@@ -555,8 +772,8 @@ const messages = defineMessages({
 								:items="ctx.availablePlatforms"
 								:format-label="formatLoaderLabel"
 								:capitalize="false"
-								:disabled-items="disabledPlatforms"
-								:disabled-tooltip="formatMessage(messages.platformLockTooltip)"
+								:disabled-items="platformDisabledItems"
+								:disabled-tooltip="platformDisabledTooltip"
 								:aria-label="formatMessage(messages.selectPlatformAriaLabel)"
 							/>
 						</div>
@@ -567,6 +784,7 @@ const messages = defineMessages({
 							</span>
 							<Combobox
 								v-model="form.selectedGameVersion.value"
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								:options="form.gameVersionOptions.value"
 								searchable
 								sync-with-selection
@@ -577,11 +795,14 @@ const messages = defineMessages({
 									formatMessage(commonMessages.selectVersionPlaceholder)
 								"
 								:aria-label="formatMessage(messages.selectGameVersionAriaLabel)"
+								:disabled="ctx.isBusy.value"
 								@option-hover="ctx.onGameVersionHover?.($event)"
 							>
 								<template v-if="form.hasSnapshots.value" #dropdown-footer>
 									<button
+										v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 										class="flex w-full cursor-pointer items-center justify-center gap-1.5 border-0 border-t border-solid border-surface-5 bg-transparent py-3 text-center text-sm font-semibold text-secondary transition-colors hover:text-contrast"
+										:disabled="ctx.isBusy.value"
 										@mousedown.prevent
 										@click="form.showSnapshots.value = !form.showSnapshots.value"
 									>
@@ -610,6 +831,7 @@ const messages = defineMessages({
 							</span>
 							<Combobox
 								v-model="form.selectedLoaderVersion.value"
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								searchable
 								sync-with-selection
 								:placeholder="
@@ -627,6 +849,7 @@ const messages = defineMessages({
 										loader: form.formattedLoaderName.value,
 									})
 								"
+								:disabled="ctx.isBusy.value"
 							>
 								<template
 									v-if="form.selectedPlatform.value === 'paper'"
@@ -659,9 +882,15 @@ const messages = defineMessages({
 						<div class="flex flex-wrap gap-2">
 							<ButtonStyled color="brand">
 								<button
+									v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 									class="!shadow-none"
-									:disabled="!form.isValid.value || !form.hasChanges.value || form.isSaving.value"
-									@click="form.save()"
+									:disabled="
+										!form.isValid.value ||
+										!form.hasChanges.value ||
+										form.isSaving.value ||
+										ctx.isBusy.value
+									"
+									@click="handleSave"
 								>
 									<SpinnerIcon v-if="form.isSaving.value" class="animate-spin" />
 									<SaveIcon v-else />
@@ -675,7 +904,7 @@ const messages = defineMessages({
 								</button>
 							</ButtonStyled>
 							<ButtonStyled type="outlined">
-								<button @click="form.cancelEditing()">
+								<button @click="handleCancelEditing">
 									<XIcon />
 									{{ formatMessage(commonMessages.cancelButton) }}
 								</button>
@@ -702,9 +931,10 @@ const messages = defineMessages({
 					<div class="flex flex-wrap gap-2">
 						<ButtonStyled color="orange">
 							<button
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								class="!shadow-none"
 								:disabled="ctx.isBusy.value"
-								@click="form.isEditing.value = true"
+								@click="handleStartEditing"
 							>
 								<PencilIcon class="size-5" />
 								{{ formatMessage(commonMessages.editButton) }}
@@ -736,9 +966,10 @@ const messages = defineMessages({
 					<div>
 						<ButtonStyled>
 							<button
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
 								class="!shadow-none"
 								:disabled="ctx.isBusy.value"
-								@click="repairModal?.show()"
+								@click="handleShowRepairModal"
 							>
 								<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
 								<HammerIcon v-else class="size-5" />
diff --git a/packages/ui/src/layouts/shared/installation-settings/providers/installation-settings.ts b/packages/ui/src/layouts/shared/installation-settings/providers/installation-settings.ts
index 0b543d6f66..6d63f69bea 100644
--- a/packages/ui/src/layouts/shared/installation-settings/providers/installation-settings.ts
+++ b/packages/ui/src/layouts/shared/installation-settings/providers/installation-settings.ts
@@ -16,6 +16,7 @@ export interface InstallationSettingsContext {
 	installationInfo: ComputedRef<InstallationInfoRow[]>
 	isLinked: ComputedRef<boolean>
 	isBusy: Ref<boolean> | ComputedRef<boolean>
+	busyMessage?: Ref<string | null> | ComputedRef<string | null>
 
 	modpack: Ref<InstallationModpackData | null> | ComputedRef<InstallationModpackData | null>
 
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
index d28cd9650a..133342ce11 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -8,10 +8,13 @@
 						<span class="text-lg font-semibold text-contrast">SFTP</span>
 						<ButtonStyled>
 							<a
-								v-tooltip="'This button only works with compatible SFTP clients (e.g. WinSCP)'"
+								v-tooltip="sftpActionTooltip"
 								class="!w-full sm:!w-auto"
-								:href="sftpUrl"
+								:class="{ 'opacity-60': !canWriteFiles }"
+								:href="canWriteFiles ? sftpUrl : undefined"
+								:aria-disabled="!canWriteFiles"
 								target="_blank"
+								@click="handleSftpLaunchClick"
 							>
 								<ExternalIcon class="h-5 w-5" />
 								Launch SFTP
@@ -22,8 +25,9 @@
 					<div class="flex flex-col gap-2.5 rounded-2xl bg-surface-2 p-4">
 						<span class="text-lg font-semibold text-contrast">Server Address</span>
 						<div
-							v-tooltip="'Copy SFTP server address'"
+							v-tooltip="sftpCopyTooltip('Copy SFTP server address')"
 							class="copy-field hover:bg-button-bg-hover"
+							:class="{ 'opacity-60': !canWriteFiles }"
 							@click="copyToClipboard('Server address', server?.sftp_host)"
 						>
 							<span class="cursor-pointer font-semibold text-primary">
@@ -37,8 +41,9 @@
 							<div class="flex w-full flex-col justify-center gap-2">
 								<span class="text-lg font-semibold text-contrast">Username</span>
 								<div
-									v-tooltip="'Copy SFTP username'"
+									v-tooltip="sftpCopyTooltip('Copy SFTP username')"
 									class="copy-field hover:bg-button-bg-hover"
+									:class="{ 'opacity-60': !canWriteFiles }"
 									@click="copyToClipboard('Username', server?.sftp_username)"
 								>
 									<div class="truncate font-semibold">
@@ -53,11 +58,12 @@
 								<span class="text-lg font-semibold text-contrast">Password</span>
 								<div
 									class="copy-field-has-button [&:hover:not(:has(button:hover))]:bg-button-bg-hover"
+									:class="{ 'opacity-60': !canWriteFiles }"
 									@click="copyToClipboard('Password', server?.sftp_password)"
 								>
 									<div class="flex items-center gap-1.5 h-full w-full">
 										<div
-											v-tooltip="'Copy SFTP Password'"
+											v-tooltip="sftpCopyTooltip('Copy SFTP Password')"
 											class="h-full flex justify-between grow items-center"
 										>
 											<div class="truncate font-semibold">
@@ -72,9 +78,16 @@
 
 										<ButtonStyled type="transparent" circular>
 											<button
-												v-tooltip="showPassword ? 'Hide password' : 'Show password'"
+												v-tooltip="
+													canWriteFiles
+														? showPassword
+															? 'Hide password'
+															: 'Show password'
+														: permissionDeniedMessage
+												"
 												class="hover:bg-button-bg-hover grid h-10 w-10 place-content-center rounded-lg"
-												@click.stop="showPassword = !showPassword"
+												:disabled="!canWriteFiles"
+												@click.stop="togglePasswordVisibility"
 											>
 												<!-- look into doing stop propagation here -->
 												<EyeIcon v-if="showPassword" class="h-5 w-5" />
@@ -96,7 +109,12 @@
 						</label>
 						<ButtonStyled v-if="startupCommand !== defaultStartupCommand" type="transparent">
 							<button
-								:disabled="isStartupLoading || startupCommand === defaultStartupCommand"
+								v-tooltip="advancedActionTooltip"
+								:disabled="
+									isStartupLoading ||
+									startupCommand === defaultStartupCommand ||
+									!canUseAdvancedSettings
+								"
 								class="relative !w-full sm:!w-auto"
 								@click="resetToDefault"
 							>
@@ -109,10 +127,11 @@
 						<StyledInput
 							id="startup-command-field"
 							v-model="startupCommand"
+							v-tooltip="advancedActionTooltip"
 							multiline
 							resize="vertical"
 							input-class="font-mono field-sizing-content"
-							:disabled="isStartupLoading"
+							:disabled="isStartupLoading || !canUseAdvancedSettings"
 						/>
 						<div
 							v-if="isStartupLoading"
@@ -133,10 +152,11 @@
 						<Combobox
 							:id="'java-version-field'"
 							v-model="javaVersion"
+							v-tooltip="advancedActionTooltip"
 							name="java-version"
 							:options="displayedJavaVersions"
 							:display-value="javaVersionLabel ?? 'Java Version'"
-							:disabled="isStartupLoading"
+							:disabled="isStartupLoading || !canUseAdvancedSettings"
 						>
 							<template #dropdown-footer>
 								<button
@@ -169,10 +189,11 @@
 						<Combobox
 							:id="'runtime-field'"
 							v-model="jreVendor"
+							v-tooltip="advancedActionTooltip"
 							name="runtime"
 							:options="JRE_VENDORS"
 							:display-value="jreVendorLabel ?? 'Runtime'"
-							:disabled="isStartupLoading"
+							:disabled="isStartupLoading || !canUseAdvancedSettings"
 						/>
 						<div
 							v-if="isStartupLoading"
@@ -189,7 +210,7 @@
 			:is-visible="!!hasUnsavedChanges || isPending"
 			:server-id="serverId"
 			:is-updating="isPending"
-			:save="() => saveStartup()"
+			:save="saveStartup"
 			:reset="resetStartup"
 		/>
 	</div>
@@ -210,6 +231,7 @@ import { computed, ref, watch } from 'vue'
 
 import { ButtonStyled, Combobox, StyledInput } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -220,12 +242,29 @@ const { addNotification } = injectNotificationManager()
 const { server, serverId, worldId } = injectModrinthServerContext()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
+const { canUseAdvancedSettings, canWriteFiles, permissionDeniedMessage } = useServerPermissions()
 
 // SFTP state
 const showPassword = ref(false)
 const sftpUrl = computed(() => `sftp://${server.value?.sftp_username}@${server.value?.sftp_host}`)
+const advancedActionTooltip = computed(() =>
+	canUseAdvancedSettings.value ? undefined : permissionDeniedMessage.value,
+)
+const sftpActionTooltip = computed(() =>
+	canWriteFiles.value
+		? 'This button only works with compatible SFTP clients (e.g. WinSCP)'
+		: permissionDeniedMessage.value,
+)
+const sftpCopyTooltip = (label: string) =>
+	canWriteFiles.value ? label : permissionDeniedMessage.value
+
+function handleSftpLaunchClick(event: MouseEvent) {
+	if (canWriteFiles.value) return
+	event.preventDefault()
+}
 
 const copyToClipboard = (name: string, textToCopy?: string) => {
+	if (!canWriteFiles.value) return
 	navigator.clipboard.writeText(textToCopy || '')
 	addNotification({
 		type: 'success',
@@ -242,6 +281,11 @@ const { data: startupData, isLoading: isStartupLoading } = useQuery({
 	enabled: computed(() => worldId.value !== null),
 })
 
+function togglePasswordVisibility() {
+	if (!canWriteFiles.value) return
+	showPassword.value = !showPassword.value
+}
+
 const JAVA_VERSIONS = [
 	{ value: 8, label: 'Java 8' },
 	{ value: 11, label: 'Java 11' },
@@ -343,7 +387,7 @@ const hasUnsavedChanges = computed(
 		jreVendor.value !== savedJreVendor.value,
 )
 
-const { mutate: saveStartup, isPending } = useMutation({
+const { mutate: saveStartupMutation, isPending } = useMutation({
 	mutationFn: () =>
 		client.archon.options_v1.patchStartup(serverId, worldId.value!, {
 			startup_command: startupCommand.value || null,
@@ -369,11 +413,17 @@ const { mutate: saveStartup, isPending } = useMutation({
 	},
 })
 
+function saveStartup() {
+	if (!canUseAdvancedSettings.value) return
+	saveStartupMutation()
+}
+
 function resetStartup() {
 	syncFormFromData()
 }
 
 function resetToDefault() {
+	if (!canUseAdvancedSettings.value) return
 	startupCommand.value = defaultStartupCommand.value
 }
 </script>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index 9dbf021341..675eb1b203 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -13,8 +13,10 @@
 								<StyledInput
 									id="server-name-field"
 									v-model="serverName"
+									v-tooltip="advancedActionTooltip"
 									wrapper-class="w-full"
 									:maxlength="48"
+									:disabled="!canUseAdvancedSettings"
 									@keyup.enter="!serverName && saveGeneral"
 								/>
 								<span>This name is only visible on Modrinth.</span>
@@ -39,9 +41,11 @@
 										>
 										<input
 											id="server-subdomain"
+											v-tooltip="advancedActionTooltip"
 											:value="serverSubdomain"
 											placeholder="Enter subdomain..."
 											:maxlength="32"
+											:disabled="!canUseAdvancedSettings"
 											class="absolute left-px inset-0 bg-transparent !p-0 text-base font-medium text-primary !shadow-none transition-colors placeholder:text-secondary focus:text-contrast"
 											autocomplete="off"
 											@input="serverSubdomain = ($event.target as HTMLInputElement).value"
@@ -68,7 +72,11 @@
 						</div>
 					</div>
 
-					<EditServerIcon v-if="!data.is_medal" />
+					<EditServerIcon
+						v-if="!data.is_medal"
+						:can-edit="canWriteFiles"
+						:permission-denied-message="permissionDeniedMessage"
+					/>
 				</div>
 
 				<!-- preferences -->
@@ -145,6 +153,7 @@ import { computed, ref, watch } from 'vue'
 import { CopyCode, StyledInput, Toggle } from '#ui/components'
 import EditServerIcon from '#ui/components/servers/edit-server-icon/EditServerIcon.vue'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -157,6 +166,10 @@ const client = injectModrinthClient()
 const { server: data, serverId, busyReasons } = injectModrinthServerContext()
 const { featureFlags } = injectPageContext()
 const queryClient = useQueryClient()
+const { canUseAdvancedSettings, canWriteFiles, permissionDeniedMessage } = useServerPermissions()
+const advancedActionTooltip = computed(() =>
+	canUseAdvancedSettings.value ? undefined : permissionDeniedMessage.value,
+)
 
 const serverName = ref(data.value?.name)
 const serverSubdomain = ref(data.value?.net?.domain ?? '')
@@ -176,12 +189,6 @@ const isValidSubdomain = computed(() => isValidLengthSubdomain.value && isValidC
 const isUpdating = ref(false)
 const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0)
 
-watch(serverName, (newValue, oldValue) => {
-	if (!(newValue?.length ?? 0)) {
-		serverName.value = oldValue
-	}
-})
-
 // Preferences
 const preferences = {
 	hideSubdomainLabel: {
@@ -334,15 +341,21 @@ const infoProperties = computed<InfoProperty[]>(() => [
 ])
 
 // Unsaved changes tracking (API fields + preferences)
-const hasUnsavedChanges = computed(
+const hasServerSettingsChanges = computed(
 	() =>
 		(serverName.value && serverName.value !== data.value?.name) ||
-		serverSubdomain.value !== data.value?.net?.domain ||
-		JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value),
+		serverSubdomain.value !== data.value?.net?.domain,
+)
+const hasPreferenceChanges = computed(
+	() => JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value),
+)
+const hasUnsavedChanges = computed(
+	() => hasServerSettingsChanges.value || hasPreferenceChanges.value,
 )
 
 const saveGeneral = async () => {
 	if (!isValidServerName.value || !isValidSubdomain.value) return
+	if (hasServerSettingsChanges.value && !canUseAdvancedSettings.value) return
 
 	try {
 		isUpdating.value = true
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
index 0485246432..15035cd77a 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -12,7 +12,10 @@
 			</div>
 		</Teleport>
 
-		<InstallationSettingsLayout ref="installationSettingsLayout" @reset-server="setupModal?.show()">
+		<InstallationSettingsLayout
+			ref="installationSettingsLayout"
+			@reset-server="showResetServerModal"
+		>
 			<template #extra>
 				<div class="flex flex-col gap-2.5">
 					<span class="text-lg font-semibold text-contrast">{{
@@ -20,7 +23,12 @@
 					}}</span>
 					<div>
 						<ButtonStyled color="red">
-							<button class="!shadow-none" :disabled="isInstalling" @click="setupModal?.show()">
+							<button
+								v-tooltip="resetServerDisabledTooltip"
+								class="!shadow-none"
+								:disabled="resetServerDisabled"
+								@click="showResetServerModal"
+							>
 								<RotateCounterClockwiseIcon class="size-5" />
 								{{ formatMessage(commonMessages.resetServerButton) }}
 							</button>
@@ -53,9 +61,10 @@
 			<div>
 				<ButtonStyled color="red">
 					<button
+						v-tooltip="supportResetToOnboardingTooltip"
 						class="!shadow-none"
-						:disabled="!worldId || isResettingToOnboarding"
-						@click="resetToOnboardingModal?.show()"
+						:disabled="supportResetToOnboardingDisabled"
+						@click="showResetToOnboardingModal"
 					>
 						<RotateCounterClockwiseIcon class="size-5" />
 						{{ formatMessage(messages.resetToOnboardingButton) }}
@@ -88,6 +97,7 @@ import {
 	UploadProgressModal,
 	useDebugLogger,
 	useModrinthServersConsole,
+	useServerPermissions,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
@@ -105,6 +115,7 @@ const { formatMessage } = useVIntl()
 const serverSettings = injectServerSettings()
 const filePicker = injectFilePicker()
 const modrinthServersConsole = useModrinthServersConsole()
+const { canSetup, canResetServer, permissionDeniedMessage } = useServerPermissions()
 
 const uploadProgressModal =
 	useTemplateRef<InstanceType<typeof UploadProgressModal>>('uploadProgressModal')
@@ -204,9 +215,24 @@ const isInstalling = computed(() => {
 	)
 	return val
 })
+const setupActionDisabled = computed(() => !canSetup.value || isInstalling.value)
+const setupActionDisabledMessage = computed(() => {
+	if (!canSetup.value) return permissionDeniedMessage.value
+	return busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : null
+})
+const resetServerDisabled = computed(() => !canResetServer.value || isInstalling.value)
+const resetServerDisabledTooltip = computed(() => {
+	if (!canResetServer.value) return permissionDeniedMessage.value
+	return busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined
+})
 const installationSettingsLayout = ref<InstanceType<typeof InstallationSettingsLayout>>()
 const setupModal = ref<InstanceType<typeof ServerSetupModal>>()
 
+function showResetServerModal() {
+	if (resetServerDisabled.value) return
+	setupModal.value?.show()
+}
+
 async function invalidateServerState() {
 	debug('invalidateServerState: starting')
 	await Promise.all([
@@ -245,6 +271,17 @@ const editingPlatform = ref(server.value?.loader?.toLowerCase() ?? 'vanilla')
 const editingGameVersion = ref(server.value?.mc_version ?? '')
 const resetToOnboardingModal = ref<InstanceType<typeof ConfirmModal>>()
 const isResettingToOnboarding = ref(false)
+const supportResetToOnboardingDisabled = computed(
+	() => !worldId.value || isResettingToOnboarding.value || !canResetServer.value,
+)
+const supportResetToOnboardingTooltip = computed(() =>
+	!canResetServer.value ? permissionDeniedMessage.value : undefined,
+)
+
+function showResetToOnboardingModal() {
+	if (supportResetToOnboardingDisabled.value) return
+	resetToOnboardingModal.value?.show()
+}
 
 const modLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
 
@@ -396,7 +433,8 @@ provideInstallationSettings({
 		debug('isLinked:', val, 'modpack:', modpackProjectId.value)
 		return val
 	}),
-	isBusy: isInstalling,
+	isBusy: setupActionDisabled,
+	busyMessage: setupActionDisabledMessage,
 	modpack: computed(() => {
 		if (!modpack.value) return null
 		const isLocal = modpack.value.spec.platform === 'local_file'
@@ -499,6 +537,7 @@ provideInstallationSettings({
 	},
 
 	async save(platform, gameVersion, loaderVersionId) {
+		if (setupActionDisabled.value) return
 		debug('save: called with', { platform, gameVersion, loaderVersionId })
 		const currentPlatform = server.value?.loader?.toLowerCase() ?? 'vanilla'
 		const platformChanged = platform !== currentPlatform
@@ -548,6 +587,7 @@ provideInstallationSettings({
 	},
 
 	async repair() {
+		if (setupActionDisabled.value) return
 		debug('repair: called')
 		try {
 			await client.archon.content_v1.repair(serverId, worldId.value!)
@@ -568,6 +608,7 @@ provideInstallationSettings({
 	},
 
 	async reinstallModpack() {
+		if (setupActionDisabled.value) return
 		if (!modpack.value) return
 		if (modpack.value.spec.platform === 'local_file') {
 			debug('reinstallModpack: local file, opening file picker')
@@ -624,6 +665,7 @@ provideInstallationSettings({
 	},
 
 	async unlinkModpack() {
+		if (setupActionDisabled.value) return
 		debug('unlinkModpack: called')
 		const previousData = addonsQuery.data.value
 		if (previousData) {
@@ -695,6 +737,7 @@ provideInstallationSettings({
 	},
 
 	async onModpackVersionConfirm(version) {
+		if (setupActionDisabled.value) return
 		if (!modpackProjectId.value) return
 		debug('onModpackVersionConfirm: called, version:', version.id)
 		debug('onModpackVersionConfirm: emitting reinstall before API call')
@@ -741,6 +784,7 @@ provideInstallationSettings({
 	hideLoaderVersion: false,
 
 	async disableAllContent() {
+		if (setupActionDisabled.value) return
 		debug('disableAllContent: fetching all addons')
 		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
 		const items = (addons.addons ?? [])
@@ -754,6 +798,7 @@ provideInstallationSettings({
 	},
 
 	async disableIncompatibleContent(targetGameVersion) {
+		if (setupActionDisabled.value) return
 		debug('disableIncompatibleContent: fetching addons')
 		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
 		const activeAddons = (addons.addons ?? []).filter((a) => !a.disabled)
@@ -785,6 +830,7 @@ provideInstallationSettings({
 	},
 
 	async saveWithoutAutoFix(platform, gameVersion, loaderVersionId) {
+		if (setupActionDisabled.value) return
 		debug('saveWithoutAutoFix: called with', { platform, gameVersion, loaderVersionId })
 		let resolvedLoaderVersion = loaderVersionId
 		if (!resolvedLoaderVersion && platform !== 'vanilla') {
@@ -816,6 +862,7 @@ provideInstallationSettings({
 	},
 
 	async previewSave(_platform, gameVersion, _loaderVersionId, signal) {
+		if (setupActionDisabled.value) return null
 		const result = await client.archon.content_v1.getUpdateGameVersionPreview(
 			serverId,
 			worldId.value!,
@@ -855,6 +902,7 @@ watch(
 )
 
 function onReinstall(event?: unknown) {
+	if (resetServerDisabled.value) return
 	installationSettingsLayout.value?.cancelEditing()
 	modrinthServersConsole.clear()
 	queryClient.removeQueries({ queryKey: ['servers', 'ws-state', serverId] })
@@ -863,6 +911,7 @@ function onReinstall(event?: unknown) {
 }
 
 function onBrowseModpacks() {
+	if (resetServerDisabled.value) return
 	debug('onBrowseModpacks: navigating to modpack discovery')
 	serverSettings.browseModpacks({
 		serverId,
@@ -872,7 +921,7 @@ function onBrowseModpacks() {
 }
 
 async function confirmResetToOnboarding() {
-	if (!worldId.value) return
+	if (supportResetToOnboardingDisabled.value || !worldId.value) return
 
 	try {
 		isResettingToOnboarding.value = true
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index 64906262f5..dd8091b289 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -9,8 +9,10 @@
 							id="edit-allocation-name"
 							ref="editAllocationInput"
 							v-model="editAllocationName"
+							v-tooltip="advancedActionTooltip"
 							wrapper-class="w-full"
 							:maxlength="32"
+							:disabled="!canUseAdvancedSettings"
 							placeholder="e.g. Secondary allocation"
 						/>
 						<div class="mb-1 mt-4 flex justify-end gap-2.5">
@@ -18,7 +20,11 @@
 								<button @click="editAllocationModal?.hide()">Cancel</button>
 							</ButtonStyled>
 							<ButtonStyled color="brand">
-								<button :disabled="!editAllocationName || creatingAllocation" type="submit">
+								<button
+									v-tooltip="advancedActionTooltip"
+									:disabled="!editAllocationName || creatingAllocation || !canUseAdvancedSettings"
+									type="submit"
+								>
 									<SaveIcon /> Update allocation
 								</button>
 							</ButtonStyled>
@@ -70,15 +76,17 @@
 						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
 							<StyledInput
 								v-model="createAllocationName"
+								v-tooltip="advancedActionTooltip"
 								wrapper-class="grow max-w-[400px]"
 								:maxlength="32"
+								:disabled="!canUseAdvancedSettings"
 								placeholder="e.g. Secondary allocation"
 							/>
 
 							<ButtonStyled color="brand">
 								<button
-									v-tooltip="!createAllocationName ? 'Enter a name to create an allocation' : ''"
-									:disabled="!createAllocationName || creatingAllocation"
+									v-tooltip="createAllocationTooltip"
+									:disabled="!createAllocationName || creatingAllocation || !canUseAdvancedSettings"
 									@click="addNewAllocation"
 								>
 									<PlusIcon />
@@ -104,12 +112,20 @@
 									</ButtonStyled>
 									<template v-if="!row.primary">
 										<ButtonStyled type="transparent" circular>
-											<button @click="showEditAllocationModal(row.port)">
+											<button
+												v-tooltip="advancedActionTooltip"
+												:disabled="!canUseAdvancedSettings"
+												@click="showEditAllocationModal(row.port)"
+											>
 												<PencilIcon />
 											</button>
 										</ButtonStyled>
 										<ButtonStyled type="outlined" circular color="red">
-											<button @click="showConfirmDeleteModal(row.port)">
+											<button
+												v-tooltip="advancedActionTooltip"
+												:disabled="!canUseAdvancedSettings"
+												@click="showConfirmDeleteModal(row.port)"
+											>
 												<TrashIcon />
 											</button>
 										</ButtonStyled>
@@ -209,6 +225,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import { ButtonStyled, ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
 import type { TableColumn } from '#ui/components/base'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -219,6 +236,7 @@ const { addNotification } = injectNotificationManager()
 const { server, serverId } = injectModrinthServerContext()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
+const { canUseAdvancedSettings, permissionDeniedMessage } = useServerPermissions()
 
 const data = server
 
@@ -271,8 +289,17 @@ const editAllocationName = ref('')
 const newAllocationPort = ref(0)
 const allocationToDelete = ref<number | null>(null)
 const creatingAllocation = ref(false)
+const advancedActionTooltip = computed(() =>
+	canUseAdvancedSettings.value ? undefined : permissionDeniedMessage.value,
+)
+const createAllocationTooltip = computed(() => {
+	if (!canUseAdvancedSettings.value) return permissionDeniedMessage.value
+	if (!createAllocationName.value) return 'Enter a name to create an allocation'
+	return undefined
+})
 
 const addNewAllocation = async () => {
+	if (!canUseAdvancedSettings.value) return
 	if (!createAllocationName.value) return
 	creatingAllocation.value = true
 
@@ -295,6 +322,7 @@ const addNewAllocation = async () => {
 }
 
 const showEditAllocationModal = (port: number) => {
+	if (!canUseAdvancedSettings.value) return
 	newAllocationPort.value = port
 	editAllocationName.value = allocations.value?.find((a) => a.port === port)?.name ?? ''
 	editAllocationModal.value?.show()
@@ -306,11 +334,13 @@ const showEditAllocationModal = (port: number) => {
 }
 
 const showConfirmDeleteModal = (port: number) => {
+	if (!canUseAdvancedSettings.value) return
 	allocationToDelete.value = port
 	confirmDeleteModal.value?.show()
 }
 
 const confirmDeleteAllocation = async () => {
+	if (!canUseAdvancedSettings.value) return
 	if (allocationToDelete.value === null) return
 
 	await client.archon.servers_v0.deleteAllocation(serverId, allocationToDelete.value)
@@ -326,6 +356,7 @@ const confirmDeleteAllocation = async () => {
 }
 
 const editAllocation = async () => {
+	if (!canUseAdvancedSettings.value) return
 	if (!editAllocationName.value) return
 	creatingAllocation.value = true
 
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index 721d97fa22..e40efe2538 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -56,6 +56,8 @@
 										v-model="combinedGamemode"
 										:items="gamemodeItems"
 										:format-label="capitalize"
+										:disabled-items="canUseAdvancedSettings ? [] : gamemodeItems"
+										:disabled-tooltip="permissionDeniedMessage"
 									/>
 								</div>
 
@@ -68,6 +70,8 @@
 										v-model="selectedDifficulty"
 										:items="difficultyItems"
 										:format-label="capitalize"
+										:disabled-items="canUseAdvancedSettings ? [] : difficultyItems"
+										:disabled-tooltip="permissionDeniedMessage"
 									/>
 								</div>
 
@@ -75,10 +79,12 @@
 									<span class="font-semibold text-contrast">Max players</span>
 									<StyledInput
 										id="server-property-max-players"
+										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.max_players"
 										type="number"
 										placeholder="20"
 										wrapper-class="w-full max-w-[450px]"
+										:disabled="!canUseAdvancedSettings"
 										@update:model-value="liveProperties.max_players = String($event)"
 									/>
 								</div>
@@ -88,8 +94,10 @@
 									<StyledInput
 										id="server-property-motd"
 										v-model="liveProperties.motd"
+										v-tooltip="advancedActionTooltip"
 										placeholder="A Minecraft Server"
 										wrapper-class="w-full max-w-[450px]"
+										:disabled="!canUseAdvancedSettings"
 									/>
 								</div>
 
@@ -100,7 +108,9 @@
 									<span class="font-semibold text-contrast">Allow flight</span>
 									<Toggle
 										id="server-property-allow-flight"
+										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.allow_flight === 'true'"
+										:disabled="!canUseAdvancedSettings"
 										@update:model-value="liveProperties.allow_flight = $event ? 'true' : 'false'"
 									/>
 								</div>
@@ -112,7 +122,9 @@
 									<span class="font-semibold text-contrast">Allow cheats</span>
 									<Toggle
 										id="server-property-allow-cheats"
+										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.allow_cheats === 'true'"
+										:disabled="!canUseAdvancedSettings"
 										@update:model-value="liveProperties.allow_cheats = $event ? 'true' : 'false'"
 									/>
 								</div>
@@ -122,7 +134,12 @@
 									class="flex flex-row items-center justify-between gap-4 h-10"
 								>
 									<span class="font-semibold text-contrast">Enable whitelist</span>
-									<Toggle id="server-property-whitelist" v-model="whitelistEnabled" />
+									<Toggle
+										id="server-property-whitelist"
+										v-model="whitelistEnabled"
+										v-tooltip="advancedActionTooltip"
+										:disabled="!canUseAdvancedSettings"
+									/>
 								</div>
 
 								<div
@@ -133,6 +150,8 @@
 									<Toggle
 										id="server-property-spawn-protection-toggle"
 										v-model="spawnProtectionEnabled"
+										v-tooltip="advancedActionTooltip"
+										:disabled="!canUseAdvancedSettings"
 									/>
 								</div>
 
@@ -143,10 +162,12 @@
 									<span class="font-semibold text-contrast">Protection radius</span>
 									<StyledInput
 										id="server-property-spawn-protection-radius"
+										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.spawn_protection"
 										type="number"
 										wrapper-class="w-full sm:w-[100px]"
 										input-class="text-right"
+										:disabled="!canUseAdvancedSettings"
 										@update:model-value="liveProperties.spawn_protection = String($event)"
 									/>
 								</div>
@@ -188,8 +209,10 @@
 												>
 													<Toggle
 														:id="`server-property-${key}`"
+														v-tooltip="advancedActionTooltip"
 														:model-value="liveProperties[key] === 'true'"
 														:aria-labelledby="`property-label-${key}`"
+														:disabled="!canUseAdvancedSettings"
 														@update:model-value="liveProperties[key] = $event ? 'true' : 'false'"
 													/>
 												</div>
@@ -199,11 +222,13 @@
 												>
 													<StyledInput
 														:id="`server-property-${key}`"
+														v-tooltip="advancedActionTooltip"
 														:model-value="liveProperties[key]"
 														type="number"
 														placeholder="Type here..."
 														wrapper-class="w-full"
 														:aria-labelledby="`property-label-${key}`"
+														:disabled="!canUseAdvancedSettings"
 														@update:model-value="liveProperties[key] = String($event)"
 													/>
 												</div>
@@ -211,9 +236,11 @@
 													<StyledInput
 														:id="`server-property-${key}`"
 														v-model="liveProperties[key]"
+														v-tooltip="advancedActionTooltip"
 														placeholder="Type here..."
 														wrapper-class="w-full"
 														:aria-labelledby="`property-label-${key}`"
+														:disabled="!canUseAdvancedSettings"
 													/>
 												</div>
 											</div>
@@ -253,7 +280,7 @@
 			:is-visible="hasUnsavedChanges || isUpdating"
 			:server-id="serverId"
 			:is-updating="isUpdating || busyReasons.length > 0"
-			restart
+			:restart="canUsePowerActions"
 			:save="
 				async () => {
 					await saveProperties()
@@ -273,6 +300,7 @@ import { computed, ref, watch } from 'vue'
 
 import { Accordion, Admonition, AutoLink, Chips, StyledInput, Toggle } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import { injectServerSettings } from '#ui/layouts/shared/server-settings'
 import {
 	injectModrinthClient,
@@ -284,6 +312,11 @@ const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const { serverId, worldId, powerState, busyReasons } = injectModrinthServerContext()
 const queryClient = useQueryClient()
+const { canUseAdvancedSettings, canUsePowerActions, permissionDeniedMessage } =
+	useServerPermissions()
+const advancedActionTooltip = computed(() =>
+	canUseAdvancedSettings.value ? undefined : permissionDeniedMessage.value,
+)
 const filesTabLink = computed(
 	() => `/hosting/manage/${encodeURIComponent(serverId)}/files?path=/&editing=server.properties`,
 )
@@ -486,7 +519,7 @@ function buildPatch(): Archon.Content.v1.PatchPropertiesFields {
 	return patch
 }
 
-const { mutateAsync: saveProperties, isPending: isUpdating } = useMutation({
+const { mutateAsync: savePropertiesMutation, isPending: isUpdating } = useMutation({
 	mutationFn: () =>
 		client.archon.properties_v1.patchProperties(serverId, worldId.value!, buildPatch()),
 	onSuccess: async () => {
@@ -507,6 +540,11 @@ const { mutateAsync: saveProperties, isPending: isUpdating } = useMutation({
 	},
 })
 
+async function saveProperties() {
+	if (!canUseAdvancedSettings.value) return
+	await savePropertiesMutation()
+}
+
 function resetProperties() {
 	syncFormFromData()
 }
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
new file mode 100644
index 0000000000..993e9f08f4
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
@@ -0,0 +1,644 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-2 md:flex-row">
+			<StyledInput
+				v-model="memberSearch"
+				:icon="SearchIcon"
+				:placeholder="formatMessage(messages.searchUsersPlaceholder, { count: members.length })"
+				wrapper-class="min-w-0 flex-1"
+				input-class="!h-10"
+				clearable
+			/>
+			<div class="flex shrink-0 items-center gap-2 flex-wrap md:flex-nowrap">
+				<Combobox
+					v-model="roleFilter"
+					:options="roleFilterOptions"
+					:display-value="selectedRoleFilterLabel"
+					trigger-class="min-w-[225px] !h-10 !min-h-10 !py-0"
+				>
+					<template #prefix>
+						<FilterIcon class="size-5 text-secondary" aria-hidden="true" />
+					</template>
+				</Combobox>
+				<ButtonStyled color="brand">
+					<button
+						v-tooltip="manageUsersActionTooltip"
+						class="!h-10 w-full md:w-fit"
+						:disabled="!canManageUsers"
+						@click="grantAccessModal?.show($event)"
+					>
+						<UserPlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.inviteFriends) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<AccessTable
+			:members="filteredMembers"
+			:roles="roleOptions"
+			:can-manage-users="canManageUsers"
+			:permission-denied-message="permissionDeniedMessage"
+			@update-role="updateMemberRole"
+			@resend-invite="resendInvite"
+			@cancel-invite="requestCancelInvite"
+			@remove-member="requestRemoveMember"
+		/>
+
+		<div class="flex flex-col gap-4">
+			<span class="m-0 text-2xl font-semibold text-contrast">
+				{{ formatMessage(messages.activityLogTitle) }}
+			</span>
+			<AuditLogTable
+				v-model:sort-direction="auditLogSortDirection"
+				v-model:timeframe-mode="auditLogTimeframeMode"
+				v-model:timeframe-preset="auditLogTimeframePreset"
+				v-model:timeframe-last-amount="auditLogTimeframeLastAmount"
+				v-model:timeframe-last-unit="auditLogTimeframeLastUnit"
+				v-model:timeframe-custom-start-date="auditLogTimeframeCustomStartDate"
+				v-model:timeframe-custom-end-date="auditLogTimeframeCustomEndDate"
+				:entries="auditEntries"
+				:has-active-external-filters="hasActiveAuditLogFilters"
+				:has-more="hasMoreActionLogEntries"
+				:loading="isActionLogFiltering"
+				:loading-more="isLoadingMoreActionLogEntries"
+				:show-world-column="showAuditLogInstances"
+				:suppress-row-transitions="isActionLogSortTransitioning"
+				@load-more="loadMoreActionLogEntries"
+			>
+				<template #filters>
+					<DropdownFilterBar
+						v-model="auditLogFilters"
+						:categories="auditLogFilterCategories"
+						:add-label="formatMessage(messages.addFilter)"
+						:clear-label="formatMessage(messages.clearFilters)"
+						:empty-options-label="formatMessage(messages.emptyFilterOptions)"
+						:empty-search-label="formatMessage(messages.emptyFilterSearch)"
+						apply-immediately
+						use-filter-icon
+						checkbox-position="right"
+					/>
+				</template>
+			</AuditLogTable>
+		</div>
+
+		<GrantAccessModal
+			ref="grantAccessModal"
+			:members="members"
+			:friend-ids="friendIds"
+			:search-users="searchInviteUsers"
+			:can-grant="canManageUsers"
+			:permission-denied-message="permissionDeniedMessage"
+			@grant="grantAccess"
+		/>
+		<RemoveAccessModal
+			ref="removeMemberConfirmModal"
+			:username="pendingRemovalMember?.user.username ?? ''"
+			:avatar-url="pendingRemovalMember?.user.avatarUrl"
+			:role="pendingRemovalMember?.role"
+			:joined-at="pendingRemovalMember?.joinedAt"
+			:pending="pendingRemovalMember?.pending"
+			:should-cancel="shouldCancelInvite"
+			:can-remove="canManageUsers"
+			:permission-denied-message="permissionDeniedMessage"
+			@remove="confirmAccessRemoval"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import { FilterIcon, SearchIcon, UserPlusIcon } from '@modrinth/assets'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import DropdownFilterBar from '#ui/components/base/DropdownFilterBar.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import {
+	AccessTable,
+	apiPermissionsToAccessRole,
+	AuditLogTable,
+	GrantAccessModal,
+	type GrantServerAccessPayload,
+	RemoveAccessModal,
+	type ServerAccessInviteSuggestion,
+	type ServerAccessMember,
+	type ServerAccessRole,
+	type ServerAccessRoleOption,
+} from '#ui/components/servers/access'
+import { useVIntl } from '#ui/composables/i18n'
+import { useServerPermissions } from '#ui/composables/server-permissions'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+import { useAccessAuditLog } from './audit-log'
+import { accessMessages } from './messages'
+
+type RoleFilter = ServerAccessRole | 'all'
+
+const props = withDefaults(
+	defineProps<{
+		showAuditLogInstances?: boolean
+	}>(),
+	{
+		showAuditLogInstances: false,
+	},
+)
+const showAuditLogInstances = computed(() => props.showAuditLogInstances)
+
+const INVITE_RESEND_COOLDOWN_SECONDS = 2 * 60
+
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const { serverId, serverFull } = injectModrinthServerContext()
+const { addNotification } = injectNotificationManager()
+const queryClient = useQueryClient()
+const grantAccessModal = ref<InstanceType<typeof GrantAccessModal> | null>(null)
+const removeMemberConfirmModal = ref<InstanceType<typeof RemoveAccessModal> | null>(null)
+const pendingRemovalMember = ref<ServerAccessMember | null>(null)
+const shouldCancelInvite = ref(false)
+const reinviteCooldownUntilByUserId = ref<Record<string, number | undefined>>({})
+const editorScopes = [
+	'BASE_READ',
+	'POWER_ACTIONS',
+	'EXEC_COMMANDS',
+	'FILES_WRITE',
+	'SETUP',
+	'BACKUPS',
+	'ADVANCED',
+] as const
+const viewerScopes = ['BASE_READ', 'POWER_ACTIONS'] as const
+
+const { canManageUsers, permissionDeniedMessage } = useServerPermissions()
+const manageUsersActionTooltip = computed(() =>
+	canManageUsers.value ? undefined : permissionDeniedMessage.value,
+)
+
+const messages = accessMessages
+
+const roleOptions = computed<ServerAccessRoleOption[]>(() => [
+	{
+		value: 'owner',
+		label: formatMessage(messages.ownerRole),
+		description: formatMessage(messages.ownerDescription),
+	},
+	{
+		value: 'editor',
+		label: formatMessage(messages.editorRole),
+		description: formatMessage(messages.editorDescription),
+	},
+	{
+		value: 'viewer',
+		label: formatMessage(messages.viewerRole),
+		description: formatMessage(messages.viewerDescription),
+	},
+])
+
+const roleFilterOptions = computed<ComboboxOption<RoleFilter>[]>(() => [
+	{ value: 'all', label: formatMessage(messages.allRoles) },
+	...roleOptions.value.map((role) => ({
+		value: role.value,
+		label: role.label,
+	})),
+])
+
+const selectedRoleFilterLabel = computed(() =>
+	formatMessage(messages.selectedRoleFilter, {
+		role:
+			roleFilterOptions.value.find((option) => option.value === roleFilter.value)?.label ??
+			formatMessage(messages.allRoles),
+	}),
+)
+
+const serverUsersQueryKey = ['servers', 'users', 'v1', serverId]
+const serverUsersQuery = useQuery({
+	queryKey: serverUsersQueryKey,
+	queryFn: () => client.archon.server_users_v1.list(serverId),
+})
+
+const friendsQueryKey = ['user', 'friends', 'v3']
+const friendsQuery = useQuery({
+	queryKey: friendsQueryKey,
+	queryFn: () => client.labrinth.friends_v3.list(),
+	staleTime: 30_000,
+})
+const friendIds = computed(() => getFriendRelationshipUserIds(friendsQuery.data.value ?? []))
+
+const members = computed<ServerAccessMember[]>(() =>
+	(serverUsersQuery.data.value ?? [])
+		.map((serverUser) => {
+			const userId = serverUser.user.id
+			const username = serverUser.user.username || userId
+			const role = apiPermissionsToAccessRole(serverUser.permissions)
+			const nowReinviteAvailableAt = reinviteCooldownUntilByUserId.value[userId]
+			const apiReinviteAvailableAt = getInviteResendAvailableAt(serverUser.last_invite_sent)
+			const reinviteAvailableAt = [nowReinviteAvailableAt, apiReinviteAvailableAt].reduce(
+				(candidate, current) =>
+					candidate === undefined || (current !== undefined && current > candidate)
+						? current
+						: candidate,
+			)
+
+			return {
+				id: `${serverId}-${userId}`,
+				user: {
+					id: userId,
+					username,
+					avatarUrl: serverUser.user.avatar_url || undefined,
+				},
+				role,
+				joinedAt: serverUser.added_on ?? null,
+				pending: !serverUser.added_on,
+				inviteResendAvailableAt: reinviteAvailableAt
+					? new Date(reinviteAvailableAt).toISOString()
+					: undefined,
+				isOwner: role === 'owner',
+			}
+		})
+		.sort((a, b) => {
+			const ownerSort = Number(b.isOwner) - Number(a.isOwner)
+			return ownerSort === 0 ? a.user.username.localeCompare(b.user.username) : ownerSort
+		}),
+)
+
+const memberSearch = ref('')
+const roleFilter = ref<RoleFilter>('all')
+const {
+	auditEntries,
+	auditLogFilterCategories,
+	auditLogFilters,
+	auditLogSortDirection,
+	auditLogTimeframeCustomEndDate,
+	auditLogTimeframeCustomStartDate,
+	auditLogTimeframeLastAmount,
+	auditLogTimeframeLastUnit,
+	auditLogTimeframeMode,
+	auditLogTimeframePreset,
+	hasActiveAuditLogFilters,
+	hasMoreActionLogEntries,
+	invalidateActionLog,
+	isActionLogFiltering,
+	isActionLogSortTransitioning,
+	isLoadingMoreActionLogEntries,
+	loadMoreActionLogEntries,
+} = useAccessAuditLog({
+	client,
+	serverId,
+	serverFull,
+	showAuditLogInstances,
+	addNotification,
+})
+
+const filteredMembers = computed(() => {
+	const normalizedSearch = memberSearch.value.trim().toLowerCase()
+	return members.value.filter((member) => {
+		if (roleFilter.value !== 'all' && member.role !== roleFilter.value) return false
+		if (!normalizedSearch) return true
+
+		const roleLabel = formatRole(member.role)
+		const pendingLabel = member.pending ? 'pending' : ''
+		return [member.user.username, roleLabel, pendingLabel].some((value) =>
+			value.toLowerCase().includes(normalizedSearch),
+		)
+	})
+})
+
+function formatRole(role: ServerAccessRole) {
+	return roleOptions.value.find((option) => option.value === role)?.label ?? role
+}
+
+const hasShownLoadError = ref(false)
+
+watch(
+	() => serverUsersQuery.error.value,
+	(serverUsersError) => {
+		if (hasShownLoadError.value || !serverUsersError) return
+
+		hasShownLoadError.value = true
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.loadFailedTitle),
+			text: formatErrorMessage(serverUsersError) ?? formatMessage(messages.loadFailedText),
+		})
+	},
+)
+
+function accessRoleToApiRole(
+	role: Exclude<ServerAccessRole, 'owner'>,
+): Archon.ServerUsers.v1.AssignableServerUserRole {
+	switch (role) {
+		case 'editor':
+			return 'Editor'
+		case 'viewer':
+			return 'Viewer'
+	}
+}
+
+function accessRoleToApiPermissions(role: Exclude<ServerAccessRole, 'owner'>) {
+	switch (role) {
+		case 'editor':
+			return serializeUserScope(editorScopes)
+		case 'viewer':
+			return serializeUserScope(viewerScopes)
+	}
+}
+
+function serializeUserScope(scopes: readonly string[]): Archon.ServerUsers.v1.UserScope {
+	return scopes.join(' | ')
+}
+
+function formatErrorMessage(error: unknown): string | undefined {
+	return error instanceof Error ? error.message : undefined
+}
+
+function isSuppressedFriendRequestError(error: unknown) {
+	return getErrorMessageParts(error).some((message) => {
+		const normalizedMessage = message.toLowerCase()
+		return (
+			normalizedMessage.includes('you are already friends with this user') ||
+			normalizedMessage.includes('you cannot add yourself as a friend') ||
+			normalizedMessage.includes('you cannot accept your own friend request')
+		)
+	})
+}
+
+function getErrorMessageParts(error: unknown): string[] {
+	const errorMessages: string[] = []
+
+	if (error instanceof Error) {
+		errorMessages.push(error.message)
+	}
+
+	if (!error || typeof error !== 'object') return errorMessages
+
+	const record = error as Record<string, unknown>
+	pushErrorDescription(errorMessages, record.responseData)
+	pushErrorDescription(errorMessages, record.v1Error)
+
+	return errorMessages
+}
+
+function pushErrorDescription(errorMessages: string[], value: unknown) {
+	if (!value || typeof value !== 'object') return
+
+	const record = value as Record<string, unknown>
+	if (typeof record.description === 'string') {
+		errorMessages.push(record.description)
+	}
+}
+
+async function invalidateServerUsers() {
+	await queryClient.invalidateQueries({ queryKey: serverUsersQueryKey })
+}
+
+function setCachedMemberRole(member: ServerAccessMember, role: Exclude<ServerAccessRole, 'owner'>) {
+	const normalizedUserId = member.user.id.toLowerCase()
+	const normalizedUsername = member.user.username.toLowerCase()
+
+	queryClient.setQueryData<Archon.ServerUsers.v1.ServerUser[]>(serverUsersQueryKey, (serverUsers) =>
+		serverUsers?.map((serverUser) => {
+			const isTargetUser =
+				serverUser.user.id.toLowerCase() === normalizedUserId ||
+				serverUser.user.username.toLowerCase() === normalizedUsername
+
+			return isTargetUser
+				? { ...serverUser, permissions: accessRoleToApiPermissions(role) }
+				: serverUser
+		}),
+	)
+}
+
+function findMemberByTarget(target: string) {
+	const normalizedTarget = target.trim().toLowerCase()
+	return members.value.find(
+		(member) =>
+			member.user.username.toLowerCase() === normalizedTarget ||
+			member.user.id.toLowerCase() === normalizedTarget,
+	)
+}
+
+async function searchInviteUsers(query: string): Promise<ServerAccessInviteSuggestion[]> {
+	const users = await client.labrinth.users_v3.search(query)
+	return users.map((user) => ({
+		id: user.id,
+		username: user.username,
+		avatarUrl: user.avatar_url || undefined,
+	}))
+}
+
+function resolveMemberUserId(member: ServerAccessMember): string {
+	return member.user.id
+}
+
+function getInviteResendAvailableAt(lastInviteSent: string | null | undefined): number | undefined {
+	if (!lastInviteSent) return undefined
+	const lastInviteSentAt = new Date(lastInviteSent).getTime()
+	if (Number.isNaN(lastInviteSentAt)) return undefined
+	return lastInviteSentAt + INVITE_RESEND_COOLDOWN_SECONDS * 1000
+}
+
+function setReinviteCooldown(member: ServerAccessMember, cooldownSeconds: number | null) {
+	if (!cooldownSeconds) {
+		reinviteCooldownUntilByUserId.value[member.user.id] = undefined
+		return
+	}
+
+	reinviteCooldownUntilByUserId.value[member.user.id] = Date.now() + cooldownSeconds * 1000
+}
+
+async function updateMemberRole(member: ServerAccessMember, role: ServerAccessRole) {
+	if (!canManageUsers.value || member.isOwner || member.role === role || role === 'owner') return
+	const previousRole = member.role
+	if (previousRole === 'owner') return
+
+	await queryClient.cancelQueries({ queryKey: serverUsersQueryKey })
+	setCachedMemberRole(member, role)
+
+	try {
+		const userId = await resolveMemberUserId(member)
+		await client.archon.server_users_v1.update(serverId, userId, accessRoleToApiRole(role))
+	} catch (error) {
+		setCachedMemberRole(member, previousRole)
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.roleUpdateFailedTitle),
+			text: formatErrorMessage(error),
+		})
+		return
+	}
+
+	await invalidateServerUsers()
+	await invalidateActionLog()
+}
+
+async function resendInvite(member: ServerAccessMember) {
+	if (!canManageUsers.value || !member.pending || member.role === 'owner') return
+
+	try {
+		const result = await client.archon.server_users_v1.reinvite(serverId, member.user.id)
+		setReinviteCooldown(member, result.cooldown_seconds)
+
+		if (!result.sent) return
+
+		await invalidateServerUsers()
+		await invalidateActionLog()
+		addNotification({
+			type: 'success',
+			title: formatMessage(messages.inviteResentTitle),
+			text: formatMessage(messages.inviteResentText, {
+				target: member.user.username,
+			}),
+		})
+	} catch (error) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.inviteFailedTitle),
+			text: formatErrorMessage(error),
+		})
+	}
+}
+
+async function cancelInvite(member: ServerAccessMember) {
+	await removeMemberAccess(member, true)
+}
+
+function requestRemoveMember(member: ServerAccessMember) {
+	if (!canManageUsers.value) return
+	pendingRemovalMember.value = member
+	shouldCancelInvite.value = false
+	removeMemberConfirmModal.value?.show()
+}
+
+function requestCancelInvite(member: ServerAccessMember) {
+	if (!canManageUsers.value) return
+	pendingRemovalMember.value = member
+	shouldCancelInvite.value = true
+	removeMemberConfirmModal.value?.show()
+}
+
+async function confirmAccessRemoval() {
+	const member = pendingRemovalMember.value
+	const shouldCancel = shouldCancelInvite.value
+	pendingRemovalMember.value = null
+	shouldCancelInvite.value = false
+	if (!member) return
+	if (!canManageUsers.value) return
+
+	if (shouldCancel) {
+		await cancelInvite(member)
+		return
+	}
+
+	await removeMember(member)
+}
+
+async function removeMember(member: ServerAccessMember) {
+	await removeMemberAccess(member, false)
+}
+
+async function removeMemberAccess(member: ServerAccessMember, shouldCancel: boolean) {
+	if (!canManageUsers.value) return
+
+	try {
+		const userId = await resolveMemberUserId(member)
+		await client.archon.server_users_v1.delete(serverId, userId)
+		await invalidateServerUsers()
+		await invalidateActionLog()
+		addNotification({
+			type: 'success',
+			title: formatMessage(
+				shouldCancel ? messages.inviteCancelledTitle : messages.memberRemovedTitle,
+			),
+			text: formatMessage(
+				shouldCancel ? messages.inviteCancelledText : messages.memberRemovedText,
+				{
+					target: member.user.username,
+				},
+			),
+		})
+	} catch (error) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.removeFailedTitle),
+			text: formatErrorMessage(error),
+		})
+	}
+}
+
+async function grantAccess(payload: GrantServerAccessPayload) {
+	if (!canManageUsers.value) return
+
+	const target = payload.target.trim()
+	if (!target) return
+
+	const user = payload.user
+	const existingMember =
+		findMemberByTarget(user.id) ?? findMemberByTarget(user.username) ?? findMemberByTarget(target)
+	if (existingMember) {
+		await updateMemberRole(existingMember, payload.role)
+		if (payload.addAsFriend) {
+			await sendFriendRequest(user.id)
+		}
+		return
+	}
+
+	try {
+		await client.archon.server_users_v1.add(serverId, {
+			user_id: user.id,
+			role: accessRoleToApiRole(payload.role),
+		})
+		await invalidateServerUsers()
+		await invalidateActionLog()
+		addNotification({
+			type: 'success',
+			title: formatMessage(messages.inviteSentTitle),
+			text: formatMessage(messages.inviteSentText, {
+				target: user.username,
+				role: formatRole(payload.role),
+			}),
+		})
+		if (payload.addAsFriend) await sendFriendRequest(user.id)
+	} catch (error) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.inviteFailedTitle),
+			text: formatErrorMessage(error),
+		})
+	}
+}
+
+async function sendFriendRequest(userIdOrUsername: string) {
+	const friends = await queryClient.ensureQueryData({
+		queryKey: friendsQueryKey,
+		queryFn: () => client.labrinth.friends_v3.list(),
+	})
+
+	if (hasFriendRelationship(friends, userIdOrUsername)) return
+
+	try {
+		await client.labrinth.friends_v3.add(userIdOrUsername)
+		await queryClient.invalidateQueries({ queryKey: friendsQueryKey })
+	} catch (error) {
+		if (isSuppressedFriendRequestError(error)) return
+
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.friendRequestFailedTitle),
+			text: formatErrorMessage(error),
+		})
+	}
+}
+
+function hasFriendRelationship(friends: Labrinth.Friends.v3.UserFriend[], userId: string) {
+	return friends.some((friend) => friend.id === userId || friend.friend_id === userId)
+}
+
+function getFriendRelationshipUserIds(friends: Labrinth.Friends.v3.UserFriend[]) {
+	return [...new Set(friends.flatMap((friend) => [friend.id, friend.friend_id]))]
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/audit-log-utils.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/audit-log-utils.ts
new file mode 100644
index 0000000000..7505647446
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/audit-log-utils.ts
@@ -0,0 +1,348 @@
+import type { Archon } from '@modrinth/api-client'
+import type { IconComponent } from '@modrinth/assets'
+import {
+	DatabaseBackupIcon,
+	FileIcon,
+	PackageIcon,
+	PowerIcon,
+	ServerIcon,
+	SettingsIcon,
+	UsersIcon,
+} from '@modrinth/assets'
+
+import type { DropdownFilterBarOption } from '#ui/components/base/DropdownFilterBar.vue'
+import type {
+	TimeFrameLastUnit,
+	TimeFrameMode,
+	TimeFramePreset,
+} from '#ui/components/base/TimeFramePicker.vue'
+import { defineMessage, type MessageDescriptor } from '#ui/composables/i18n'
+
+export const SUPPORT_ACTION_LOG_USER_FILTER = 'support'
+export const SERVER_SCOPED_ACTION_LOG_WORLD_FILTER = '__server_scoped__'
+
+export const actionLogActionNames = [
+	'server_created',
+	'changed_server_name',
+	'changed_server_subdomain',
+	'server_reallocated',
+	'server_plan_changed',
+	'user_invited',
+	'user_invite_revoked',
+	'user_permission_modified',
+	'user_removed',
+	'addon_added',
+	'addon_uploaded',
+	'addon_disabled',
+	'addon_enabled',
+	'addon_deleted',
+	'addon_updated',
+	'modpack_changed',
+	'modpack_unlinked',
+	'server_repaired',
+	'server_reset',
+	'server_started',
+	'server_stopped',
+	'server_restarted',
+	'server_killed',
+	'port_allocation_added',
+	'port_allocation_removed',
+	'loader_version_edited',
+	'game_version_edited',
+	'server_properties_modified',
+	'file_uploaded',
+	'file_deleted',
+	'file_renamed',
+	'file_edited',
+	'sftp_login',
+	'console_command_executed',
+	'console_cleared',
+	'backup_created',
+	'backup_renamed',
+	'backup_restored',
+	'backup_deleted',
+	'startup_command_modified',
+	'java_runtime_modified',
+	'java_version_modified',
+] as const satisfies readonly Archon.Actions.v1.ActionName[]
+
+export type ActionLogFilterActionName = (typeof actionLogActionNames)[number]
+
+const actionLogActionNameSet = new Set<string>(actionLogActionNames)
+
+export const actionLogActionGroups = [
+	{
+		key: 'server',
+		label: defineMessage({
+			id: 'servers.access-page.activity-log-filter.action-group.server',
+			defaultMessage: 'Server',
+		}),
+		icon: ServerIcon,
+		actions: [
+			'server_created',
+			'server_reallocated',
+			'server_plan_changed',
+			'server_repaired',
+			'server_reset',
+		],
+	},
+	{
+		key: 'power-console',
+		label: defineMessage({
+			id: 'servers.access-page.activity-log-filter.action-group.power-console',
+			defaultMessage: 'Power and console',
+		}),
+		icon: PowerIcon,
+		actions: [
+			'server_started',
+			'server_stopped',
+			'server_restarted',
+			'server_killed',
+			'console_command_executed',
+			'console_cleared',
+		],
+	},
+	{
+		key: 'users',
+		label: defineMessage({
+			id: 'servers.access-page.activity-log-filter.action-group.users',
+			defaultMessage: 'Users and invites',
+		}),
+		icon: UsersIcon,
+		actions: ['user_invited', 'user_invite_revoked', 'user_permission_modified', 'user_removed'],
+	},
+	{
+		key: 'content',
+		label: defineMessage({
+			id: 'servers.access-page.activity-log-filter.action-group.content',
+			defaultMessage: 'Content and modpack',
+		}),
+		icon: PackageIcon,
+		actions: [
+			'addon_added',
+			'addon_uploaded',
+			'addon_disabled',
+			'addon_enabled',
+			'addon_updated',
+			'addon_deleted',
+			'modpack_changed',
+			'modpack_unlinked',
+		],
+	},
+	{
+		key: 'files',
+		label: defineMessage({
+			id: 'servers.access-page.activity-log-filter.action-group.files',
+			defaultMessage: 'Files and SFTP',
+		}),
+		icon: FileIcon,
+		actions: ['file_uploaded', 'file_edited', 'file_renamed', 'file_deleted', 'sftp_login'],
+	},
+	{
+		key: 'backups',
+		label: defineMessage({
+			id: 'servers.access-page.activity-log-filter.action-group.backups',
+			defaultMessage: 'Backups',
+		}),
+		icon: DatabaseBackupIcon,
+		actions: ['backup_created', 'backup_renamed', 'backup_restored', 'backup_deleted'],
+	},
+	{
+		key: 'settings',
+		label: defineMessage({
+			id: 'servers.access-page.activity-log-filter.action-group.settings',
+			defaultMessage: 'Settings and runtime',
+		}),
+		icon: SettingsIcon,
+		actions: [
+			'changed_server_name',
+			'changed_server_subdomain',
+			'port_allocation_added',
+			'port_allocation_removed',
+			'loader_version_edited',
+			'game_version_edited',
+			'server_properties_modified',
+			'startup_command_modified',
+			'java_runtime_modified',
+			'java_version_modified',
+		],
+	},
+] as const satisfies readonly {
+	key: string
+	label: MessageDescriptor
+	icon: IconComponent
+	actions: readonly ActionLogFilterActionName[]
+}[]
+
+export type AuditLogTimeframeSelection = {
+	mode: TimeFrameMode
+	preset: TimeFramePreset
+	lastAmount: number
+	lastUnit: TimeFrameLastUnit
+	customStartDate: string
+	customEndDate: string
+}
+
+export function isActionLogActionName(action: string): action is ActionLogFilterActionName {
+	return actionLogActionNameSet.has(action)
+}
+
+export function compareFilterOptions(
+	left: DropdownFilterBarOption,
+	right: DropdownFilterBarOption,
+) {
+	return left.label.localeCompare(right.label)
+}
+
+export function getAuditLogTimeframeRange(
+	selection: AuditLogTimeframeSelection,
+): { start: Date; end: Date } | null {
+	const now = getRoundedNow()
+
+	if (selection.mode === 'last') {
+		return getLastAuditLogTimeframeRange(selection.lastAmount, selection.lastUnit, now)
+	}
+
+	if (selection.mode === 'custom_range') {
+		const startDate = parseDateInputValue(selection.customStartDate)
+		const endDate = parseDateInputValue(selection.customEndDate)
+		if (!startDate || !endDate) return null
+
+		const [minDate, maxDate] =
+			startDate.getTime() > endDate.getTime() ? [endDate, startDate] : [startDate, endDate]
+
+		return {
+			start: startOfDay(minDate),
+			end: endOfDay(maxDate),
+		}
+	}
+
+	if (selection.mode !== 'preset') {
+		return null
+	}
+
+	return getPresetAuditLogTimeframeRange(selection.preset, now)
+}
+
+export function getActionLogEntryId(entry: Archon.Actions.v1.ActionEntry) {
+	return JSON.stringify([
+		entry.timestamp,
+		entry.actor.type,
+		entry.actor.type === 'user' ? entry.actor.user_id : (entry.actor.user_id ?? 'support'),
+		entry.server_id,
+		entry.world_id ?? null,
+		entry.action.action,
+		stableStringify(entry.action.metadata),
+	])
+}
+
+function parseDateInputValue(value: string) {
+	const [yearValue, monthValue, dayValue] = value.split('-').map(Number)
+	if (!yearValue || !monthValue || !dayValue) return null
+
+	const date = new Date(yearValue, monthValue - 1, dayValue)
+	if (
+		date.getFullYear() !== yearValue ||
+		date.getMonth() !== monthValue - 1 ||
+		date.getDate() !== dayValue
+	) {
+		return null
+	}
+
+	return date
+}
+
+function addDays(date: Date, days: number) {
+	const nextDate = new Date(date)
+	nextDate.setDate(nextDate.getDate() + days)
+	return nextDate
+}
+
+function subtractCalendarMonths(date: Date, months: number) {
+	const nextDate = new Date(date)
+	const day = nextDate.getDate()
+	nextDate.setDate(1)
+	nextDate.setMonth(nextDate.getMonth() - months)
+	const daysInMonth = new Date(nextDate.getFullYear(), nextDate.getMonth() + 1, 0).getDate()
+	nextDate.setDate(Math.min(day, daysInMonth))
+	return nextDate
+}
+
+function getRoundedNow() {
+	const now = Date.now()
+	return new Date(Math.floor(now / 60000) * 60000)
+}
+
+function getPresetAuditLogTimeframeRange(
+	preset: TimeFramePreset,
+	now: Date,
+): { start: Date; end: Date } | null {
+	switch (preset) {
+		case 'today':
+			return { start: startOfDay(now), end: endOfDay(now) }
+		case 'yesterday': {
+			const yesterday = addDays(now, -1)
+			return { start: startOfDay(yesterday), end: endOfDay(yesterday) }
+		}
+		case 'last_7_days':
+			return { start: startOfDay(addDays(now, -6)), end: endOfDay(now) }
+		case 'last_14_days':
+			return { start: startOfDay(addDays(now, -13)), end: endOfDay(now) }
+		case 'last_30_days':
+			return { start: startOfDay(addDays(now, -29)), end: endOfDay(now) }
+		case 'last_90_days':
+			return { start: startOfDay(addDays(now, -89)), end: endOfDay(now) }
+		case 'last_180_days':
+			return { start: startOfDay(addDays(now, -179)), end: endOfDay(now) }
+		case 'year_to_date':
+			return { start: new Date(now.getFullYear(), 0, 1), end: endOfDay(now) }
+		case 'all_time':
+			return null
+	}
+}
+
+function getLastAuditLogTimeframeRange(
+	amountValue: number,
+	unit: TimeFrameLastUnit,
+	now: Date,
+): { start: Date; end: Date } {
+	const amount = Math.max(1, Math.floor(amountValue))
+
+	switch (unit) {
+		case 'hours':
+			return { start: new Date(now.getTime() - amount * 60 * 60 * 1000), end: now }
+		case 'days':
+			return { start: new Date(now.getTime() - amount * 24 * 60 * 60 * 1000), end: now }
+		case 'weeks':
+			return { start: new Date(now.getTime() - amount * 7 * 24 * 60 * 60 * 1000), end: now }
+		case 'months':
+			return { start: subtractCalendarMonths(now, amount), end: now }
+	}
+}
+
+function startOfDay(date: Date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+function endOfDay(date: Date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999)
+}
+
+function stableStringify(value: unknown): string {
+	if (value === undefined) {
+		return 'undefined'
+	}
+
+	if (value === null || typeof value !== 'object') {
+		return JSON.stringify(value) ?? String(value)
+	}
+
+	if (Array.isArray(value)) {
+		return `[${value.map((item) => stableStringify(item)).join(',')}]`
+	}
+
+	return `{${Object.entries(value as Record<string, unknown>)
+		.sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
+		.map(([key, item]) => `${JSON.stringify(key)}:${stableStringify(item)}`)
+		.join(',')}}`
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/audit-log.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/audit-log.ts
new file mode 100644
index 0000000000..9c8ad53549
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/audit-log.ts
@@ -0,0 +1,496 @@
+import type { AbstractModrinthClient, Archon } from '@modrinth/api-client'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
+import type { ComputedRef } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import type {
+	DropdownFilterBarCategory,
+	DropdownFilterBarItem,
+	DropdownFilterBarOption,
+} from '#ui/components/base/DropdownFilterBar.vue'
+import type {
+	TimeFrameLastUnit,
+	TimeFrameMode,
+	TimeFramePreset,
+} from '#ui/components/base/TimeFramePicker.vue'
+import type { ServerAuditLogEntry } from '#ui/components/servers/access'
+import { parseAuditEvent } from '#ui/components/servers/access/events'
+import { useVIntl } from '#ui/composables/i18n'
+import type { AbstractWebNotificationManager } from '#ui/providers/web-notifications'
+
+import {
+	actionLogActionGroups,
+	type ActionLogFilterActionName,
+	compareFilterOptions,
+	getActionLogEntryId,
+	getAuditLogTimeframeRange,
+	isActionLogActionName,
+	SERVER_SCOPED_ACTION_LOG_WORLD_FILTER,
+	SUPPORT_ACTION_LOG_USER_FILTER,
+} from './audit-log-utils'
+import { accessMessages, actionLogActionMessages } from './messages'
+
+type AuditLogFilterKey = 'users' | 'worlds' | 'actions'
+
+type UseAccessAuditLogOptions = {
+	client: AbstractModrinthClient
+	serverId: string
+	serverFull: ComputedRef<Archon.Servers.v1.ServerFull | null>
+	showAuditLogInstances: ComputedRef<boolean>
+	addNotification: AbstractWebNotificationManager['addNotification']
+}
+
+const ACTION_LOG_PAGE_SIZE = 200
+const ACTION_LOG_FILTER_OVERLAY_MS = 750
+
+export function useAccessAuditLog({
+	client,
+	serverId,
+	serverFull,
+	showAuditLogInstances,
+	addNotification,
+}: UseAccessAuditLogOptions) {
+	const { formatMessage } = useVIntl()
+	const queryClient = useQueryClient()
+	const auditLogFilters = ref<Record<string, string[]>>({
+		users: [],
+		worlds: [],
+		actions: [],
+	})
+	const auditLogTimeframeMode = ref<TimeFrameMode>('preset')
+	const auditLogTimeframePreset = ref<TimeFramePreset>('last_7_days')
+	const auditLogTimeframeLastAmount = ref(30)
+	const auditLogTimeframeLastUnit = ref<TimeFrameLastUnit>('days')
+	const auditLogTimeframeCustomStartDate = ref('')
+	const auditLogTimeframeCustomEndDate = ref('')
+	const auditLogSortDirection = ref<Archon.Actions.v1.SortOrder>('desc')
+
+	const worldOptions = computed(
+		() => serverFull.value?.worlds.map((world) => ({ id: world.id, name: world.name })) ?? [],
+	)
+	const isAuditLogWorldFilterVisible = computed(
+		() => showAuditLogInstances.value && worldOptions.value.length > 0,
+	)
+
+	const worldById = computed(
+		() => new Map(worldOptions.value.map((world) => [world.id, world] as const)),
+	)
+
+	const backupById = computed(() => {
+		const backups = new Map<string, Archon.Backups.v1.Backup>()
+		for (const world of serverFull.value?.worlds ?? []) {
+			for (const backup of world.backups ?? []) {
+				backups.set(backup.id, backup)
+			}
+		}
+		return backups
+	})
+
+	const actionLogDateFilter = computed(() => {
+		const range = getAuditLogTimeframeRange({
+			mode: auditLogTimeframeMode.value,
+			preset: auditLogTimeframePreset.value,
+			lastAmount: auditLogTimeframeLastAmount.value,
+			lastUnit: auditLogTimeframeLastUnit.value,
+			customStartDate: auditLogTimeframeCustomStartDate.value,
+			customEndDate: auditLogTimeframeCustomEndDate.value,
+		})
+
+		return {
+			min_datetime: range?.start.toISOString(),
+			max_datetime: range?.end.toISOString(),
+		}
+	})
+
+	const actionLogEndpointFilter = computed<Archon.Actions.v1.ActionLogFilter | undefined>(() => {
+		const users = selectedAuditLogFilterValues('users')
+		const worlds = isAuditLogWorldFilterVisible.value ? selectedAuditLogWorldFilterValues() : []
+		const actions = selectedAuditLogFilterValues('actions').filter(isActionLogActionName)
+		const filter: Archon.Actions.v1.ActionLogFilter = {}
+
+		if (users.length > 0) filter.users = users
+		if (worlds.length > 0) filter.worlds = worlds
+		if (actions.length > 0) filter.actions = actions
+
+		return Object.keys(filter).length > 0 ? filter : undefined
+	})
+	const actionLogBaseQueryKey = ['servers', 'action-log', 'v1', 'infinite', serverId] as const
+	const actionLogQueryKey = computed(() => {
+		const filter = actionLogEndpointFilter.value
+		const dateFilter = actionLogDateFilter.value
+
+		return [
+			...actionLogBaseQueryKey,
+			filter ?? null,
+			dateFilter.min_datetime ?? null,
+			dateFilter.max_datetime ?? null,
+			auditLogSortDirection.value,
+		]
+	})
+	const actionLogQuery = useInfiniteQuery({
+		queryKey: actionLogQueryKey,
+		queryFn: ({ pageParam = 0 }) => {
+			const offset = typeof pageParam === 'number' ? pageParam : 0
+			return client.archon.actions_v1.list(serverId, {
+				limit: ACTION_LOG_PAGE_SIZE,
+				offset,
+				order: auditLogSortDirection.value,
+				filter: actionLogEndpointFilter.value,
+				...actionLogDateFilter.value,
+			})
+		},
+		getNextPageParam: (lastPage) =>
+			typeof lastPage.next_offset === 'number' ? lastPage.next_offset : undefined,
+		initialPageParam: 0,
+		placeholderData: (previousData) => previousData,
+		staleTime: 30_000,
+	})
+	const actionLogFilterSignature = computed(() =>
+		JSON.stringify([
+			actionLogEndpointFilter.value ?? null,
+			actionLogDateFilter.value.min_datetime ?? null,
+			actionLogDateFilter.value.max_datetime ?? null,
+		]),
+	)
+	const isActionLogFilterTransitioning = ref(false)
+	const isActionLogSortTransitioning = ref(false)
+	let actionLogFilterTransitionTimeout: ReturnType<typeof setTimeout> | null = null
+	let actionLogSortTransitionTimeout: ReturnType<typeof setTimeout> | null = null
+
+	watch(actionLogFilterSignature, (_signature, previousSignature) => {
+		if (previousSignature === undefined) return
+		startActionLogFilterTransition()
+	})
+
+	watch(
+		auditLogSortDirection,
+		(_direction, previousDirection) => {
+			if (previousDirection === undefined) return
+			startActionLogSortTransition()
+		},
+		{ flush: 'sync' },
+	)
+
+	watch(
+		() => actionLogQuery.isFetching.value,
+		(isFetching) => {
+			if (!isFetching && isActionLogSortTransitioning.value) {
+				finishActionLogSortTransition()
+			}
+		},
+		{ flush: 'post' },
+	)
+
+	onBeforeUnmount(() => {
+		if (actionLogFilterTransitionTimeout) {
+			clearTimeout(actionLogFilterTransitionTimeout)
+		}
+		if (actionLogSortTransitionTimeout) {
+			clearTimeout(actionLogSortTransitionTimeout)
+		}
+	})
+
+	const auditEntries = computed<ServerAuditLogEntry[]>(() => {
+		const pages = actionLogQuery.data.value?.pages ?? []
+		const entryIdCounts = new Map<string, number>()
+
+		return pages.flatMap((actionLog) =>
+			actionLog.data.map((entry) => {
+				const entryId = getActionLogEntryId(entry)
+				const entryIdCount = entryIdCounts.get(entryId) ?? 0
+				entryIdCounts.set(entryId, entryIdCount + 1)
+
+				return apiActionLogEntryToAuditEntry(
+					entry,
+					actionLog,
+					entryIdCount === 0 ? entryId : `${entryId}-${entryIdCount}`,
+				)
+			}),
+		)
+	})
+	const hasShownActionLogLoadError = ref(false)
+	const hasMoreActionLogEntries = computed(
+		() => !actionLogQuery.isPlaceholderData.value && actionLogQuery.hasNextPage.value,
+	)
+	const isLoadingMoreActionLogEntries = computed(() => actionLogQuery.isFetchingNextPage.value)
+	const isActionLogFiltering = computed(() => isActionLogFilterTransitioning.value)
+	const initialAuditLogUserFilterOptions = ref<DropdownFilterBarOption[]>([])
+
+	watch(
+		() => actionLogQuery.data.value?.pages ?? [],
+		(pages) => {
+			if (actionLogEndpointFilter.value) return
+
+			initialAuditLogUserFilterOptions.value = mergeAuditLogUserFilterOptions(
+				initialAuditLogUserFilterOptions.value,
+				extractAuditLogUserFilterOptions(pages),
+			)
+		},
+		{ immediate: true },
+	)
+
+	const auditLogUserFilterOptions = computed<DropdownFilterBarOption[]>(() => {
+		if (initialAuditLogUserFilterOptions.value.length > 0) {
+			return initialAuditLogUserFilterOptions.value
+		}
+
+		return extractAuditLogUserFilterOptions(actionLogQuery.data.value?.pages ?? [])
+	})
+
+	const auditLogWorldFilterOptions = computed<DropdownFilterBarOption[]>(() => [
+		{
+			value: SERVER_SCOPED_ACTION_LOG_WORLD_FILTER,
+			label: formatMessage(accessMessages.serverScopedInstance),
+			searchTerms: [
+				SERVER_SCOPED_ACTION_LOG_WORLD_FILTER,
+				formatMessage(accessMessages.serverScopedInstance),
+			],
+		},
+		...worldOptions.value.map((world) => ({
+			value: world.id,
+			label: world.name,
+			searchTerms: [world.id, world.name],
+		})),
+	])
+
+	const auditLogActionFilterOptions = computed<DropdownFilterBarItem[]>(() =>
+		actionLogActionGroups.flatMap((group) => [
+			{
+				type: 'section-header' as const,
+				key: group.key,
+				label: formatMessage(group.label),
+				icon: group.icon,
+			},
+			...group.actions.map((action) => ({
+				value: action,
+				label: formatActionLogAction(action),
+				searchTerms: [action, action.replaceAll('_', ' ')],
+			})),
+		]),
+	)
+
+	const auditLogFilterCategories = computed<DropdownFilterBarCategory[]>(() => {
+		const categories: DropdownFilterBarCategory[] = [
+			{
+				key: 'users',
+				label: formatMessage(accessMessages.userFilter),
+				options: auditLogUserFilterOptions.value,
+			},
+		]
+
+		if (isAuditLogWorldFilterVisible.value) {
+			categories.push({
+				key: 'worlds',
+				label: formatMessage(accessMessages.instanceFilter),
+				options: auditLogWorldFilterOptions.value,
+			})
+		}
+
+		categories.push({
+			key: 'actions',
+			label: formatMessage(accessMessages.actionTypeFilter),
+			options: auditLogActionFilterOptions.value,
+			searchable: true,
+			searchPlaceholder: formatMessage(accessMessages.actionTypeFilterSearch),
+			submenuClass: 'w-[22rem]',
+			previewDropdownMinWidth: '20rem',
+		})
+
+		return categories
+	})
+
+	const hasActiveAuditLogDateFilter = computed(
+		() => !!actionLogDateFilter.value.min_datetime || !!actionLogDateFilter.value.max_datetime,
+	)
+
+	const hasActiveAuditLogFilters = computed(
+		() =>
+			hasActiveAuditLogDateFilter.value ||
+			(isAuditLogWorldFilterVisible.value
+				? (['users', 'worlds', 'actions'] satisfies AuditLogFilterKey[])
+				: (['users', 'actions'] satisfies AuditLogFilterKey[])
+			).some((key) => selectedAuditLogFilterValues(key).length > 0),
+	)
+
+	watch(
+		() => actionLogQuery.error.value,
+		(actionLogError) => {
+			if (hasShownActionLogLoadError.value || !actionLogError) return
+
+			hasShownActionLogLoadError.value = true
+			addNotification({
+				type: 'error',
+				title: formatMessage(accessMessages.loadFailedTitle),
+				text: formatErrorMessage(actionLogError) ?? formatMessage(accessMessages.loadFailedText),
+			})
+		},
+	)
+
+	function selectedAuditLogFilterValues(key: AuditLogFilterKey): string[] {
+		const values = auditLogFilters.value[key]
+		return values ? [...values] : []
+	}
+
+	function selectedAuditLogWorldFilterValues(): Array<string | null> {
+		return selectedAuditLogFilterValues('worlds').map((world) =>
+			world === SERVER_SCOPED_ACTION_LOG_WORLD_FILTER ? null : world,
+		)
+	}
+
+	function extractAuditLogUserFilterOptions(
+		pages: Archon.Actions.v1.ActionLogResponse[],
+	): DropdownFilterBarOption[] {
+		const options = new Map<string, DropdownFilterBarOption>()
+
+		for (const page of pages) {
+			for (const entry of page.data) {
+				if (entry.actor.type === 'support') {
+					const userId = entry.actor.user_id ?? null
+					const user = userId ? page.users[userId] : undefined
+					if (!options.has(SUPPORT_ACTION_LOG_USER_FILTER)) {
+						options.set(SUPPORT_ACTION_LOG_USER_FILTER, {
+							value: SUPPORT_ACTION_LOG_USER_FILTER,
+							label: formatMessage(accessMessages.supportActor),
+							searchTerms: [
+								SUPPORT_ACTION_LOG_USER_FILTER,
+								formatMessage(accessMessages.supportActor),
+								userId,
+								user?.username,
+							].filter(Boolean) as string[],
+						})
+					}
+					continue
+				}
+
+				const id = entry.actor.user_id
+				const user = page.users[id]
+				if (!options.has(id)) {
+					options.set(id, {
+						value: id,
+						label: user?.username ?? id,
+						searchTerms: [id, user?.username].filter(Boolean) as string[],
+					})
+				}
+			}
+		}
+
+		return [...options.values()].sort(compareFilterOptions)
+	}
+
+	function mergeAuditLogUserFilterOptions(
+		existingOptions: DropdownFilterBarOption[],
+		nextOptions: DropdownFilterBarOption[],
+	): DropdownFilterBarOption[] {
+		const options = new Map(existingOptions.map((option) => [option.value, option] as const))
+
+		for (const option of nextOptions) {
+			options.set(option.value, option)
+		}
+
+		return [...options.values()].sort(compareFilterOptions)
+	}
+
+	function formatActionLogAction(action: ActionLogFilterActionName): string {
+		return formatMessage(actionLogActionMessages[action])
+	}
+
+	function loadMoreActionLogEntries() {
+		if (
+			isActionLogFilterTransitioning.value ||
+			actionLogQuery.isPlaceholderData.value ||
+			!actionLogQuery.hasNextPage.value ||
+			actionLogQuery.isFetchingNextPage.value
+		) {
+			return
+		}
+		void actionLogQuery.fetchNextPage()
+	}
+
+	function startActionLogFilterTransition() {
+		isActionLogFilterTransitioning.value = true
+
+		if (actionLogFilterTransitionTimeout) {
+			clearTimeout(actionLogFilterTransitionTimeout)
+		}
+
+		actionLogFilterTransitionTimeout = setTimeout(() => {
+			isActionLogFilterTransitioning.value = false
+			actionLogFilterTransitionTimeout = null
+		}, ACTION_LOG_FILTER_OVERLAY_MS)
+	}
+
+	function startActionLogSortTransition() {
+		isActionLogSortTransitioning.value = true
+
+		if (actionLogSortTransitionTimeout) {
+			clearTimeout(actionLogSortTransitionTimeout)
+		}
+
+		actionLogSortTransitionTimeout = setTimeout(() => {
+			isActionLogSortTransitioning.value = false
+			actionLogSortTransitionTimeout = null
+		}, 2500)
+	}
+
+	function finishActionLogSortTransition() {
+		if (actionLogSortTransitionTimeout) {
+			clearTimeout(actionLogSortTransitionTimeout)
+		}
+
+		actionLogSortTransitionTimeout = setTimeout(() => {
+			isActionLogSortTransitioning.value = false
+			actionLogSortTransitionTimeout = null
+		}, 120)
+	}
+
+	function apiActionLogEntryToAuditEntry(
+		entry: Archon.Actions.v1.ActionEntry,
+		actionLog: Archon.Actions.v1.ActionLogResponse,
+		id: string,
+	): ServerAuditLogEntry {
+		const event = parseAuditEvent(entry, {
+			serverId,
+			users: actionLog.users,
+			addons: actionLog.addons,
+			worldById: worldById.value,
+			backupById: backupById.value,
+			versions: actionLog.versions ?? {},
+		})
+
+		return {
+			id,
+			actor: event.props.actor,
+			world: event.props.world,
+			event,
+			timestamp: entry.timestamp,
+		}
+	}
+
+	async function invalidateActionLog() {
+		await queryClient.invalidateQueries({ queryKey: actionLogBaseQueryKey })
+	}
+
+	return {
+		auditEntries,
+		auditLogFilterCategories,
+		auditLogFilters,
+		auditLogSortDirection,
+		auditLogTimeframeCustomEndDate,
+		auditLogTimeframeCustomStartDate,
+		auditLogTimeframeLastAmount,
+		auditLogTimeframeLastUnit,
+		auditLogTimeframeMode,
+		auditLogTimeframePreset,
+		hasActiveAuditLogFilters,
+		hasMoreActionLogEntries,
+		invalidateActionLog,
+		isActionLogFiltering,
+		isActionLogSortTransitioning,
+		isLoadingMoreActionLogEntries,
+		loadMoreActionLogEntries,
+	}
+}
+
+function formatErrorMessage(error: unknown): string | undefined {
+	return error instanceof Error ? error.message : undefined
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/messages.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/messages.ts
new file mode 100644
index 0000000000..cc5c107efd
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/messages.ts
@@ -0,0 +1,315 @@
+import { defineMessages } from '#ui/composables/i18n'
+
+export const accessMessages = defineMessages({
+	searchUsersPlaceholder: {
+		id: 'servers.access-page.search-users-placeholder',
+		defaultMessage: 'Search {count} {count, plural, one {user} other {users}}...',
+	},
+	inviteFriends: {
+		id: 'servers.access-page.invite-friends',
+		defaultMessage: 'Add user',
+	},
+	activityLogTitle: {
+		id: 'servers.access-page.activity-log-title',
+		defaultMessage: 'Activity log',
+	},
+	addFilter: {
+		id: 'servers.access-page.activity-log-filter.add',
+		defaultMessage: 'Add filter',
+	},
+	clearFilters: {
+		id: 'servers.access-page.activity-log-filter.clear',
+		defaultMessage: 'Clear filters',
+	},
+	emptyFilterOptions: {
+		id: 'servers.access-page.activity-log-filter.empty-options',
+		defaultMessage: 'No options available.',
+	},
+	emptyFilterSearch: {
+		id: 'servers.access-page.activity-log-filter.empty-search',
+		defaultMessage: 'No options found.',
+	},
+	userFilter: {
+		id: 'servers.access-page.activity-log-filter.users',
+		defaultMessage: 'User',
+	},
+	supportActor: {
+		id: 'servers.access-page.activity-log-filter.support-actor',
+		defaultMessage: 'Support',
+	},
+	instanceFilter: {
+		id: 'servers.access-page.activity-log-filter.instances',
+		defaultMessage: 'Instances',
+	},
+	serverScopedInstance: {
+		id: 'servers.access-page.activity-log-filter.server-scoped-instance',
+		defaultMessage: 'Server',
+	},
+	actionTypeFilter: {
+		id: 'servers.access-page.activity-log-filter.action-types',
+		defaultMessage: 'Actions',
+	},
+	actionTypeFilterSearch: {
+		id: 'servers.access-page.activity-log-filter.action-types-search',
+		defaultMessage: 'Search actions...',
+	},
+	allRoles: {
+		id: 'servers.access-page.role-filter.all',
+		defaultMessage: 'All',
+	},
+	selectedRoleFilter: {
+		id: 'servers.access-page.role-filter.selected',
+		defaultMessage: 'Role: {role}',
+	},
+	ownerRole: {
+		id: 'servers.access-page.role.owner',
+		defaultMessage: 'Owner',
+	},
+	ownerDescription: {
+		id: 'servers.access-page.role.owner-description',
+		defaultMessage: 'Full access including billing, members, and destructive actions.',
+	},
+	editorRole: {
+		id: 'servers.access-page.role.editor',
+		defaultMessage: 'Editor',
+	},
+	editorDescription: {
+		id: 'servers.access-page.role.editor-description',
+		defaultMessage: 'Manage instance content, files, backups, and other settings.',
+	},
+	viewerRole: {
+		id: 'servers.access-page.role.viewer',
+		defaultMessage: 'Limited',
+	},
+	viewerDescription: {
+		id: 'servers.access-page.role.viewer-description',
+		defaultMessage: 'Start, stop, and view the server without making changes.',
+	},
+	inviteSentTitle: {
+		id: 'servers.access-page.notification.invite-sent.title',
+		defaultMessage: 'Invite sent',
+	},
+	inviteSentText: {
+		id: 'servers.access-page.notification.invite-sent.text',
+		defaultMessage: 'Invited {target} as {role}.',
+	},
+	inviteResentTitle: {
+		id: 'servers.access-page.notification.invite-resent.title',
+		defaultMessage: 'Invite resent',
+	},
+	inviteResentText: {
+		id: 'servers.access-page.notification.invite-resent.text',
+		defaultMessage: 'Sent another invite to {target}.',
+	},
+	inviteCancelledTitle: {
+		id: 'servers.access-page.notification.invite-cancelled.title',
+		defaultMessage: 'Invite cancelled',
+	},
+	inviteCancelledText: {
+		id: 'servers.access-page.notification.invite-cancelled.text',
+		defaultMessage: 'Cancelled the invite for {target}.',
+	},
+	memberRemovedTitle: {
+		id: 'servers.access-page.notification.member-removed.title',
+		defaultMessage: 'Access removed',
+	},
+	memberRemovedText: {
+		id: 'servers.access-page.notification.member-removed.text',
+		defaultMessage: 'Removed {target} from this server.',
+	},
+	loadFailedTitle: {
+		id: 'servers.access-page.notification.load-failed.title',
+		defaultMessage: 'Access could not be loaded',
+	},
+	loadFailedText: {
+		id: 'servers.access-page.notification.load-failed.text',
+		defaultMessage: 'Refresh the page to try again.',
+	},
+	inviteFailedTitle: {
+		id: 'servers.access-page.notification.invite-failed.title',
+		defaultMessage: 'Invite could not be sent',
+	},
+	friendRequestFailedTitle: {
+		id: 'servers.access-page.notification.friend-request-failed.title',
+		defaultMessage: 'Friend request could not be sent',
+	},
+	removeFailedTitle: {
+		id: 'servers.access-page.notification.remove-failed.title',
+		defaultMessage: 'Access could not be removed',
+	},
+	roleUpdateFailedTitle: {
+		id: 'servers.access-page.notification.role-update-failed.title',
+		defaultMessage: 'Role could not be updated',
+	},
+})
+
+export const actionLogActionMessages = defineMessages({
+	server_created: {
+		id: 'servers.access-page.activity-log-filter.action.server-created',
+		defaultMessage: 'Created server',
+	},
+	changed_server_name: {
+		id: 'servers.access-page.activity-log-filter.action.changed-server-name',
+		defaultMessage: 'Changed server name',
+	},
+	changed_server_subdomain: {
+		id: 'servers.access-page.activity-log-filter.action.changed-server-subdomain',
+		defaultMessage: 'Changed server subdomain',
+	},
+	server_reallocated: {
+		id: 'servers.access-page.activity-log-filter.action.server-reallocated',
+		defaultMessage: 'Reallocated server',
+	},
+	server_plan_changed: {
+		id: 'servers.access-page.activity-log-filter.action.server-plan-changed',
+		defaultMessage: 'Changed plan',
+	},
+	user_invited: {
+		id: 'servers.access-page.activity-log-filter.action.user-invited',
+		defaultMessage: 'Invited user',
+	},
+	user_invite_revoked: {
+		id: 'servers.access-page.activity-log-filter.action.user-invite-revoked',
+		defaultMessage: 'Revoked user invite',
+	},
+	user_permission_modified: {
+		id: 'servers.access-page.activity-log-filter.action.user-permission-modified',
+		defaultMessage: 'Changed user permissions',
+	},
+	user_removed: {
+		id: 'servers.access-page.activity-log-filter.action.user-removed',
+		defaultMessage: 'Removed user',
+	},
+	addon_added: {
+		id: 'servers.access-page.activity-log-filter.action.addon-added',
+		defaultMessage: 'Added content',
+	},
+	addon_uploaded: {
+		id: 'servers.access-page.activity-log-filter.action.addon-uploaded',
+		defaultMessage: 'Uploaded content',
+	},
+	addon_disabled: {
+		id: 'servers.access-page.activity-log-filter.action.addon-disabled',
+		defaultMessage: 'Disabled content',
+	},
+	addon_enabled: {
+		id: 'servers.access-page.activity-log-filter.action.addon-enabled',
+		defaultMessage: 'Enabled content',
+	},
+	addon_deleted: {
+		id: 'servers.access-page.activity-log-filter.action.addon-deleted',
+		defaultMessage: 'Deleted content',
+	},
+	addon_updated: {
+		id: 'servers.access-page.activity-log-filter.action.addon-updated',
+		defaultMessage: 'Updated content',
+	},
+	modpack_changed: {
+		id: 'servers.access-page.activity-log-filter.action.modpack-changed',
+		defaultMessage: 'Changed modpack',
+	},
+	modpack_unlinked: {
+		id: 'servers.access-page.activity-log-filter.action.modpack-unlinked',
+		defaultMessage: 'Unlinked modpack',
+	},
+	server_repaired: {
+		id: 'servers.access-page.activity-log-filter.action.server-repaired',
+		defaultMessage: 'Repaired server',
+	},
+	server_reset: {
+		id: 'servers.access-page.activity-log-filter.action.server-reset',
+		defaultMessage: 'Reset server',
+	},
+	server_started: {
+		id: 'servers.access-page.activity-log-filter.action.server-started',
+		defaultMessage: 'Started server',
+	},
+	server_stopped: {
+		id: 'servers.access-page.activity-log-filter.action.server-stopped',
+		defaultMessage: 'Stopped server',
+	},
+	server_restarted: {
+		id: 'servers.access-page.activity-log-filter.action.server-restarted',
+		defaultMessage: 'Restarted server',
+	},
+	server_killed: {
+		id: 'servers.access-page.activity-log-filter.action.server-killed',
+		defaultMessage: 'Killed server',
+	},
+	port_allocation_added: {
+		id: 'servers.access-page.activity-log-filter.action.port-allocation-added',
+		defaultMessage: 'Added port allocation',
+	},
+	port_allocation_removed: {
+		id: 'servers.access-page.activity-log-filter.action.port-allocation-removed',
+		defaultMessage: 'Removed port allocation',
+	},
+	loader_version_edited: {
+		id: 'servers.access-page.activity-log-filter.action.loader-version-edited',
+		defaultMessage: 'Changed loader version',
+	},
+	game_version_edited: {
+		id: 'servers.access-page.activity-log-filter.action.game-version-edited',
+		defaultMessage: 'Changed Minecraft version',
+	},
+	server_properties_modified: {
+		id: 'servers.access-page.activity-log-filter.action.server-properties-modified',
+		defaultMessage: 'Modified server properties',
+	},
+	file_uploaded: {
+		id: 'servers.access-page.activity-log-filter.action.file-uploaded',
+		defaultMessage: 'Uploaded file',
+	},
+	file_deleted: {
+		id: 'servers.access-page.activity-log-filter.action.file-deleted',
+		defaultMessage: 'Deleted file',
+	},
+	file_renamed: {
+		id: 'servers.access-page.activity-log-filter.action.file-renamed',
+		defaultMessage: 'Renamed file',
+	},
+	file_edited: {
+		id: 'servers.access-page.activity-log-filter.action.file-edited',
+		defaultMessage: 'Edited file',
+	},
+	sftp_login: {
+		id: 'servers.access-page.activity-log-filter.action.sftp-login',
+		defaultMessage: 'Logged in via SFTP',
+	},
+	console_command_executed: {
+		id: 'servers.access-page.activity-log-filter.action.console-command-executed',
+		defaultMessage: 'Ran console command',
+	},
+	console_cleared: {
+		id: 'servers.access-page.activity-log-filter.action.console-cleared',
+		defaultMessage: 'Cleared console',
+	},
+	backup_created: {
+		id: 'servers.access-page.activity-log-filter.action.backup-created',
+		defaultMessage: 'Created backup',
+	},
+	backup_renamed: {
+		id: 'servers.access-page.activity-log-filter.action.backup-renamed',
+		defaultMessage: 'Renamed backup',
+	},
+	backup_restored: {
+		id: 'servers.access-page.activity-log-filter.action.backup-restored',
+		defaultMessage: 'Restored backup',
+	},
+	backup_deleted: {
+		id: 'servers.access-page.activity-log-filter.action.backup-deleted',
+		defaultMessage: 'Deleted backup',
+	},
+	startup_command_modified: {
+		id: 'servers.access-page.activity-log-filter.action.startup-command-modified',
+		defaultMessage: 'Changed startup command',
+	},
+	java_runtime_modified: {
+		id: 'servers.access-page.activity-log-filter.action.java-runtime-modified',
+		defaultMessage: 'Changed Java runtime',
+	},
+	java_version_modified: {
+		id: 'servers.access-page.activity-log-filter.action.java-version-modified',
+		defaultMessage: 'Changed Java version',
+	},
+})
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
index c1ad2947f1..bcdebf6392 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
@@ -49,7 +49,12 @@
 				</button>
 			</ButtonStyled>
 			<ButtonStyled v-else color="brand" size="large">
-				<button class="ml-auto" @click="openModal">
+				<button
+					v-tooltip="!canSetup ? permissionDeniedMessage : undefined"
+					class="ml-auto"
+					:disabled="!canSetup"
+					@click="openModal"
+				>
 					{{ formatMessage(messages.setupServerButton) }} <RightArrowIcon />
 				</button>
 			</ButtonStyled>
@@ -62,6 +67,8 @@
 			:show-snapshot-toggle="true"
 			:search-modpacks="searchModpacks"
 			:get-project-versions="getProjectVersions"
+			:finish-disabled="!canSetup"
+			:finish-disabled-tooltip="!canSetup ? permissionDeniedMessage : undefined"
 			@hide="() => {}"
 			@browse-modpacks="onBrowseModpacks"
 			@create="onCreate"
@@ -77,6 +84,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
+	useServerPermissions,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -90,6 +98,7 @@ import { injectModrinthServerContext } from '#ui/providers'
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+const { canSetup, permissionDeniedMessage } = useServerPermissions()
 
 const messages = defineMessages({
 	welcomeTitle: {
@@ -196,11 +205,16 @@ const uploadPercent = computed(() =>
 	totalBytes.value > 0 ? Math.round((uploadedBytes.value / totalBytes.value) * 100) : 0,
 )
 
-const openModal = () => modalRef.value?.show()
+const openModal = () => {
+	if (!canSetup.value) return
+	modalRef.value?.show()
+}
 
 onBeforeUnmount(() => modalRef.value?.hide())
 
 function onBrowseModpacks() {
+	if (!canSetup.value) return
+
 	if (props.browseModpacks) {
 		props.browseModpacks({
 			serverId,
@@ -217,6 +231,11 @@ function onBrowseModpacks() {
 }
 
 onMounted(async () => {
+	if (!canSetup.value && route.query.resumeModal) {
+		router.replace({ query: {} })
+		return
+	}
+
 	if (route.query.resumeModal === 'setup-type') {
 		router.replace({ query: {} })
 		openModal()
@@ -263,6 +282,11 @@ function toApiLoader(loader: string): Archon.Content.v1.Modloader {
 }
 
 const onCreate = async (config: CreationFlowContextValue) => {
+	if (!canSetup.value) {
+		config.loading.value = false
+		return
+	}
+
 	// Handle mrpack file upload
 	if (config.setupType.value === 'modpack' && config.modpackFile.value) {
 		modalRef.value?.hide()
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index d59b25e5f9..fc97dcbde0 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -28,11 +28,27 @@
 
 		<div v-else key="content" class="contents">
 			<ReadyTransition :pending="backupsReadyPending">
-				<BackupCreateModal ref="createBackupModal" :backups="completedBackups" />
-				<BackupRenameModal ref="renameBackupModal" :backups="completedBackups" />
-				<BackupRestoreModal ref="restoreBackupModal" />
+				<BackupCreateModal
+					ref="createBackupModal"
+					:backups="completedBackups"
+					:can-create="canManageBackups"
+					:permission-denied-message="permissionDeniedMessage"
+				/>
+				<BackupRenameModal
+					ref="renameBackupModal"
+					:backups="completedBackups"
+					:can-rename="canManageBackups"
+					:permission-denied-message="permissionDeniedMessage"
+				/>
+				<BackupRestoreModal
+					ref="restoreBackupModal"
+					:can-restore="canManageBackups"
+					:permission-denied-message="permissionDeniedMessage"
+				/>
 				<BackupDeleteModal
 					ref="deleteBackupModal"
+					:can-delete="canManageBackups"
+					:permission-denied-message="permissionDeniedMessage"
 					@delete="deleteBackup"
 					@bulk-delete="bulkDelete"
 				/>
@@ -122,6 +138,7 @@
 									v-for="(backup, backupIndex) in group.backups"
 									:key="`backup-${backup.id}`"
 									class="flex gap-2"
+									:data-backup-id="backup.id"
 								>
 									<div class="flex w-5 flex-col items-center">
 										<div
@@ -140,17 +157,20 @@
 										class="my-1.5 min-w-0 flex-1"
 										:backup="backup"
 										:selected="selectedIds.has(backup.id)"
+										:highlighted="highlightedBackupId === backup.id"
 										:restore-disabled="backupRestoreDisabled"
+										:write-disabled="!canManageBackups"
+										:write-disabled-tooltip="permissionDeniedMessage"
 										:kyros-url="server.node?.instance"
 										:jwt="server.node?.token"
 										:show-copy-id-action="showCopyIdAction"
 										:show-debug-info="showDebugInfo"
 										@download="() => triggerDownloadAnimation()"
-										@rename="() => renameBackupModal?.show(backup)"
-										@restore="() => restoreBackupModal?.show(backup)"
+										@rename="() => showRenameBackupModal(backup)"
+										@restore="() => showRestoreBackupModal(backup)"
 										@delete="
 											(skipConfirmation?: boolean) =>
-												skipConfirmation ? deleteBackup(backup) : deleteBackupModal?.show(backup)
+												skipConfirmation ? deleteBackup(backup) : showDeleteBackupModal(backup)
 										"
 									/>
 								</div>
@@ -191,7 +211,12 @@
 
 					<div v-if="!isBulkOperating" class="ml-auto flex items-center gap-0.5">
 						<ButtonStyled type="transparent" color="red" hover-color-fill="background">
-							<button type="button" @click="confirmBulkDelete">
+							<button
+								v-tooltip="!canManageBackups ? permissionDeniedMessage : undefined"
+								type="button"
+								:disabled="!canManageBackups"
+								@click="confirmBulkDelete"
+							>
 								<TrashIcon />
 								<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
 							</button>
@@ -244,7 +269,7 @@ import { CalendarIcon, DownloadIcon, IssuesIcon, PlusIcon, TrashIcon } from '@mo
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import type { Component } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
@@ -261,6 +286,7 @@ import BackupRestoreModal from '#ui/components/servers/backups/BackupRestoreModa
 import { useBackupsSelection } from '#ui/composables/hosting/backups-selection'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import { useBulkOperation } from '#ui/layouts/shared/content-tab/composables/bulk-operations'
 import {
 	injectModrinthClient,
@@ -327,6 +353,7 @@ const messages = defineMessages({
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+const { canManageBackups, permissionDeniedMessage } = useServerPermissions()
 
 const filterPillOptions = computed<FilterPillOption[]>(() => [
 	{ id: 'manual', label: formatMessage(messages.filterManual) },
@@ -344,6 +371,7 @@ const props = defineProps<{
 
 const route = useRoute()
 const serverId = route.params.id as string
+const BACKUP_HIGHLIGHT_DURATION_MS = 5_000
 
 defineEmits(['onDownload'])
 
@@ -476,6 +504,72 @@ const groupedBackups = computed((): BackupGroup[] => {
 })
 
 const displayOrderedBackups = computed(() => groupedBackups.value.flatMap((g) => g.backups))
+const focusedBackupId = computed(() =>
+	typeof route.query.backup === 'string' ? route.query.backup : null,
+)
+const highlightedBackupId = ref<string | null>(null)
+let highlightedBackupTimeout: ReturnType<typeof setTimeout> | null = null
+let lastHighlightedFocusedBackupId: string | null = null
+let lastScrolledFocusedBackupId: string | null = null
+
+watch(
+	[focusedBackupId, displayOrderedBackups],
+	async ([backupId]) => {
+		if (!backupId) {
+			lastHighlightedFocusedBackupId = null
+			lastScrolledFocusedBackupId = null
+			clearHighlightedBackup()
+			return
+		}
+		if (!displayOrderedBackups.value.some((backup) => backup.id === backupId)) return
+
+		if (lastHighlightedFocusedBackupId !== backupId) {
+			lastHighlightedFocusedBackupId = backupId
+			highlightBackup(backupId)
+		}
+		if (lastScrolledFocusedBackupId === backupId) return
+		if (typeof document === 'undefined') return
+
+		lastScrolledFocusedBackupId = backupId
+		await nextTick()
+		const escapedBackupId =
+			typeof CSS !== 'undefined' && CSS.escape
+				? CSS.escape(backupId)
+				: backupId.replaceAll('"', '\\"')
+		document
+			.querySelector(`[data-backup-id="${escapedBackupId}"]`)
+			?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+	},
+	{ immediate: true },
+)
+
+onBeforeUnmount(() => {
+	if (highlightedBackupTimeout) {
+		clearTimeout(highlightedBackupTimeout)
+	}
+})
+
+function highlightBackup(backupId: string) {
+	highlightedBackupId.value = backupId
+
+	if (highlightedBackupTimeout) {
+		clearTimeout(highlightedBackupTimeout)
+	}
+
+	highlightedBackupTimeout = setTimeout(() => {
+		highlightedBackupId.value = null
+		highlightedBackupTimeout = null
+	}, BACKUP_HIGHLIGHT_DURATION_MS)
+}
+
+function clearHighlightedBackup() {
+	highlightedBackupId.value = null
+
+	if (highlightedBackupTimeout) {
+		clearTimeout(highlightedBackupTimeout)
+		highlightedBackupTimeout = null
+	}
+}
 
 const {
 	selectedIds,
@@ -496,6 +590,9 @@ const restoreBackupModal = ref<InstanceType<typeof BackupRestoreModal>>()
 const deleteBackupModal = ref<InstanceType<typeof BackupDeleteModal>>()
 
 const backupRestoreDisabled = computed(() => {
+	if (!canManageBackups.value) {
+		return permissionDeniedMessage.value
+	}
 	if (props.isServerRunning) {
 		return 'Cannot restore backup while server is running'
 	}
@@ -509,6 +606,9 @@ const backupRestoreDisabled = computed(() => {
 })
 
 const backupCreationDisabled = computed(() => {
+	if (!canManageBackups.value) {
+		return permissionDeniedMessage.value
+	}
 	const quota = server.value.backup_quota
 	if (quota !== undefined) {
 		const usedCount = backups.value.length ?? server.value.used_backup_quota ?? 0
@@ -526,19 +626,37 @@ const backupCreationDisabled = computed(() => {
 })
 
 const showCreateModel = () => {
+	if (backupCreationDisabled.value) return
 	createBackupModal.value?.show()
 }
 
+function showRenameBackupModal(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
+	if (!canManageBackups.value) return
+	renameBackupModal.value?.show(backup)
+}
+
+function showRestoreBackupModal(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
+	if (backupRestoreDisabled.value) return
+	restoreBackupModal.value?.show(backup)
+}
+
+function showDeleteBackupModal(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
+	if (!canManageBackups.value) return
+	deleteBackupModal.value?.show(backup)
+}
+
 function clearBackupFilters() {
 	selectedFilters.value = []
 }
 
 function confirmBulkDelete() {
+	if (!canManageBackups.value) return
 	if (!selectedBackups.value.length) return
 	deleteBackupModal.value?.showBulk(selectedBackups.value)
 }
 
 async function bulkDelete(toRemove: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
+	if (!canManageBackups.value) return
 	if (!toRemove.length) return
 
 	isBulkOperating.value = true
@@ -569,6 +687,7 @@ function useQueueDeleteFor(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 }
 
 function deleteBackup(backup?: Archon.BackupsQueue.v1.BackupQueueBackup) {
+	if (!canManageBackups.value) return
 	if (!backup) {
 		addNotification({
 			type: 'error',
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
index 46f44fc4e7..09814deaff 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
@@ -9,6 +9,7 @@ import { useRoute, useRouter } from 'vue-router'
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import { useUploadSessionUpload } from '#ui/composables/hosting/kyros-session-upload'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -123,6 +124,7 @@ const contentUploadSession = useUploadSessionUpload({
 })
 const { addNotification } = injectNotificationManager()
 const { openServerSettings, browseServerContent } = injectServerSettingsModal()
+const { canSetup, permissionDeniedMessage } = useServerPermissions()
 const route = useRoute()
 const router = useRouter()
 const queryClient = useQueryClient()
@@ -136,6 +138,7 @@ const type = computed(() => {
 })
 
 const queryKey = computed(() => ['content', 'list', 'v1', serverId])
+const modpackContentQueryKey = computed(() => ['content', 'list', 'v1', serverId, 'modpack'])
 
 function getContentOwnerAvatarUrl(owner: ContentOwnerAvatarSource) {
 	const ownerId = owner.type === 'user' ? owner.name || owner.id : owner.id
@@ -150,6 +153,44 @@ const contentQuery = useQuery({
 	staleTime: 0,
 })
 
+const isModpackContentModalOpen = ref(false)
+const modpackContentQuery = useQuery({
+	queryKey: modpackContentQueryKey,
+	queryFn: () =>
+		client.archon.content_v1.getAddons(serverId, worldId.value!, {
+			from_modpack: true,
+		}),
+	enabled: computed(() => isModpackContentModalOpen.value && worldId.value !== null),
+	staleTime: 0,
+})
+
+const setupActionDisabled = computed(() => !canSetup.value || busyReasons.value.length > 0)
+const setupActionBusyMessage = computed(() => {
+	if (!canSetup.value) return permissionDeniedMessage.value
+
+	const bannerCoversInstalling =
+		server.value?.status === 'installing' ||
+		isSyncingContent.value ||
+		busyReasons.value.some(
+			(r) =>
+				r.reason.id === 'servers.busy.installing' || r.reason.id === 'servers.busy.syncing-content',
+		)
+	const filteredReasons = busyReasons.value.filter((r) => {
+		if (
+			bannerCoversInstalling &&
+			(r.reason.id === 'servers.busy.installing' || r.reason.id === 'servers.busy.syncing-content')
+		)
+			return false
+		if (
+			r.reason.id === 'servers.busy.backup-creating' ||
+			r.reason.id === 'servers.busy.backup-restoring'
+		)
+			return false
+		return true
+	})
+	return filteredReasons.length > 0 ? formatMessage(filteredReasons[0].reason) : null
+})
+
 const modpackProjectId = computed(() => {
 	const spec = contentQuery.data.value?.modpack?.spec
 	return spec?.platform === 'modrinth' ? spec.project_id : null
@@ -688,12 +729,14 @@ const toggleMutation = useMutation({
 })
 
 async function handleToggleEnabled(item: ContentItem) {
+	if (setupActionDisabled.value) return
 	const addon = addonLookup.value.get(item.file_name)
 	if (!addon) return
 	await toggleMutation.mutateAsync({ addon })
 }
 
 async function handleDeleteItem(item: ContentItem) {
+	if (setupActionDisabled.value) return
 	const addon = addonLookup.value.get(item.file_name)
 	if (!addon) return
 	await deleteMutation.mutateAsync({ addon })
@@ -708,6 +751,7 @@ function itemsToAddonRequests(items: ContentItem[]): Archon.Content.v1.RemoveAdd
 }
 
 async function handleBulkDelete(items: ContentItem[]) {
+	if (setupActionDisabled.value) return
 	const requests = itemsToAddonRequests(items)
 	if (requests.length === 0) return
 	try {
@@ -723,6 +767,7 @@ async function handleBulkDelete(items: ContentItem[]) {
 }
 
 async function handleBulkEnable(items: ContentItem[]) {
+	if (setupActionDisabled.value) return
 	const requests = itemsToAddonRequests(items)
 	if (requests.length === 0) return
 	try {
@@ -738,6 +783,7 @@ async function handleBulkEnable(items: ContentItem[]) {
 }
 
 async function handleBulkDisable(items: ContentItem[]) {
+	if (setupActionDisabled.value) return
 	const requests = itemsToAddonRequests(items)
 	if (requests.length === 0) return
 	try {
@@ -760,6 +806,15 @@ const updatingProject = ref<ContentItem | null>(null)
 const updatingModpack = ref(false)
 const loadingChangelog = ref(false)
 
+watch(
+	() => modpackContentQuery.data.value?.addons,
+	(addons) => {
+		if (!isModpackContentModalOpen.value || !addons) return
+		modpackAddons.value = addons
+		modpackContentModal.value?.setItems(addons.map(addonToContentItem))
+	},
+)
+
 const updatingProjectId = computed(() => updatingProject.value?.project?.id ?? null)
 
 const projectVersionsQuery = useQuery({
@@ -797,6 +852,7 @@ const currentLoader = computed(
 )
 
 function handleBrowseContent() {
+	if (setupActionDisabled.value) return
 	const contentType = type.value
 	if (browseServerContent && ['mod', 'plugin', 'datapack'].includes(contentType)) {
 		browseServerContent({
@@ -814,6 +870,7 @@ function handleBrowseContent() {
 }
 
 function handleUploadFiles() {
+	if (setupActionDisabled.value) return
 	const input = document.createElement('input')
 	input.type = 'file'
 	input.multiple = true
@@ -876,15 +933,16 @@ function addonToContentItem(addon: AddonWithUiState): ContentItem {
 }
 
 async function handleViewModpackContent() {
+	isModpackContentModalOpen.value = true
 	modpackContentModal.value?.showLoading()
 	try {
-		const data = await client.archon.content_v1.getAddons(serverId, worldId.value!, {
-			from_modpack: true,
-		})
+		const { data } = await modpackContentQuery.refetch()
+		if (!data) throw new Error('Failed to load modpack content')
 		modpackAddons.value = data.addons ?? []
 		const items = (data.addons ?? []).map(addonToContentItem)
 		modpackContentModal.value?.show(items)
 	} catch (err) {
+		isModpackContentModalOpen.value = false
 		modpackContentModal.value?.hide()
 		addNotification({
 			type: 'error',
@@ -895,6 +953,7 @@ async function handleViewModpackContent() {
 }
 
 async function handleModpackContentToggle(item: ContentItem) {
+	if (setupActionDisabled.value) return
 	const addon = addonLookup.value.get(item.file_name)
 	if (!addon) return
 	modpackContentModal.value?.updateItem(item.file_name, { disabled: true })
@@ -903,6 +962,18 @@ async function handleModpackContentToggle(item: ContentItem) {
 		modpackAddons.value = modpackAddons.value.map((a) =>
 			a.filename === addon.filename ? { ...a, disabled: !addon.disabled } : a,
 		)
+		queryClient.setQueryData(
+			modpackContentQueryKey.value,
+			(oldData: Archon.Content.v1.Addons | undefined) =>
+				oldData
+					? {
+							...oldData,
+							addons: (oldData.addons ?? []).map((a) =>
+								a.filename === addon.filename ? { ...a, disabled: !addon.disabled } : a,
+							),
+						}
+					: oldData,
+		)
 		modpackContentModal.value?.updateItem(item.file_name, {
 			enabled: !item.enabled,
 			disabled: false,
@@ -913,6 +984,7 @@ async function handleModpackContentToggle(item: ContentItem) {
 }
 
 async function handleModpackBulkToggle(items: ContentItem[], enable: boolean) {
+	if (setupActionDisabled.value) return
 	const requests = itemsToAddonRequests(items)
 	if (requests.length === 0) return
 
@@ -930,6 +1002,20 @@ async function handleModpackBulkToggle(items: ContentItem[], enable: boolean) {
 		} else {
 			await client.archon.content_v1.disableAddons(serverId, worldId.value!, requests)
 		}
+		queryClient.setQueryData(
+			modpackContentQueryKey.value,
+			(oldData: Archon.Content.v1.Addons | undefined) =>
+				oldData
+					? {
+							...oldData,
+							addons: (oldData.addons ?? []).map((addon) =>
+								items.some((item) => item.file_name === addon.filename)
+									? { ...addon, disabled: !enable }
+									: addon,
+							),
+						}
+					: oldData,
+		)
 		await queryClient.invalidateQueries({ queryKey: queryKey.value })
 	} catch (err) {
 		for (const item of items) {
@@ -951,6 +1037,7 @@ function handleModpackUnlink() {
 }
 
 async function handleModpackUnlinkConfirm() {
+	if (setupActionDisabled.value) return
 	try {
 		await client.archon.content_v1.unlinkModpack(serverId, worldId.value!)
 		await contentQuery.refetch()
@@ -964,6 +1051,7 @@ async function handleModpackUnlinkConfirm() {
 }
 
 async function handleBulkUpdate(items: ContentItem[]) {
+	if (setupActionDisabled.value) return
 	const addons = items
 		.filter((item) => item.has_update)
 		.map((item) => ({
@@ -1063,6 +1151,7 @@ function resetUpdateState() {
 }
 
 function handleModalUpdate(selectedVersion: Labrinth.Versions.v2.Version, event?: MouseEvent) {
+	if (setupActionDisabled.value) return
 	if (updatingModpack.value) {
 		pendingModpackUpdateVersion.value = selectedVersion
 
@@ -1100,6 +1189,7 @@ function setAddonInstalling(filename: string, installing: boolean) {
 }
 
 async function performUpdate(selectedVersion: Labrinth.Versions.v2.Version) {
+	if (setupActionDisabled.value) return
 	const item = updatingProject.value
 	if (item) {
 		setAddonInstalling(item.file_name, true)
@@ -1142,6 +1232,7 @@ async function performUpdate(selectedVersion: Labrinth.Versions.v2.Version) {
 }
 
 function handleModpackUpdateConfirm() {
+	if (setupActionDisabled.value) return
 	if (pendingModpackUpdateVersion.value) {
 		contentUpdaterModal.value?.hide()
 		performUpdate(pendingModpackUpdateVersion.value)
@@ -1177,32 +1268,10 @@ provideContentManager({
 	error: computed(() => contentQuery.error.value ?? null),
 	modpack,
 	isPackLocked: ref(false),
-	isBusy: computed(() => busyReasons.value.length > 0),
-	busyMessage: computed(() => {
-		const bannerCoversInstalling =
-			server.value?.status === 'installing' ||
-			isSyncingContent.value ||
-			busyReasons.value.some(
-				(r) =>
-					r.reason.id === 'servers.busy.installing' ||
-					r.reason.id === 'servers.busy.syncing-content',
-			)
-		const filteredReasons = busyReasons.value.filter((r) => {
-			if (
-				bannerCoversInstalling &&
-				(r.reason.id === 'servers.busy.installing' ||
-					r.reason.id === 'servers.busy.syncing-content')
-			)
-				return false
-			if (
-				r.reason.id === 'servers.busy.backup-creating' ||
-				r.reason.id === 'servers.busy.backup-restoring'
-			)
-				return false
-			return true
-		})
-		return filteredReasons.length > 0 ? formatMessage(filteredReasons[0].reason) : null
-	}),
+	isBusy: setupActionDisabled,
+	busyMessage: setupActionBusyMessage,
+	disableAddContent: computed(() => !canSetup.value),
+	disableAddContentTooltip: permissionDeniedMessage.value,
 	contentTypeLabel: type,
 	toggleEnabled: handleToggleEnabled,
 	deleteItem: handleDeleteItem,
@@ -1253,15 +1322,24 @@ provideContentManager({
 	<ReadyTransition :pending="contentReadyPending">
 		<ContentPageLayout :bottom-padding="false">
 			<template #modals>
-				<ConfirmUnlinkModal ref="modpackUnlinkModal" server @unlink="handleModpackUnlinkConfirm" />
+				<ConfirmUnlinkModal
+					ref="modpackUnlinkModal"
+					server
+					:action-disabled="setupActionDisabled"
+					:action-disabled-tooltip="setupActionBusyMessage ?? undefined"
+					@unlink="handleModpackUnlinkConfirm"
+				/>
 				<ModpackContentModal
 					ref="modpackContentModal"
 					:modpack-name="modpack?.project.title"
 					:modpack-icon-url="modpack?.project.icon_url"
 					enable-toggle
+					:action-disabled="setupActionDisabled"
+					:action-disabled-tooltip="setupActionBusyMessage ?? undefined"
 					@update:enabled="handleModpackContentToggle"
 					@bulk:enable="handleModpackBulkToggle($event, true)"
 					@bulk:disable="handleModpackBulkToggle($event, false)"
+					@hide="isModpackContentModalOpen = false"
 				/>
 				<ContentUpdaterModal
 					v-if="updatingProject || updatingModpack"
@@ -1288,6 +1366,8 @@ provideContentManager({
 					"
 					:loading="loadingVersions"
 					:loading-changelog="loadingChangelog"
+					:action-disabled="setupActionDisabled"
+					:action-disabled-tooltip="setupActionBusyMessage ?? undefined"
 					@update="handleModalUpdate"
 					@cancel="resetUpdateState"
 					@version-select="handleVersionSelect"
@@ -1305,6 +1385,8 @@ provideContentManager({
 				.join(' ')
 		"
 		server
+		:action-disabled="setupActionDisabled"
+		:action-disabled-tooltip="setupActionBusyMessage ?? undefined"
 		@confirm="handleModpackUpdateConfirm"
 		@cancel="handleModpackUpdateCancel"
 	/>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 66b5e099fa..b62fe58237 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -8,6 +8,7 @@ import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import { useReadyState } from '#ui/composables'
 import { useUploadSessionUpload } from '#ui/composables/hosting/kyros-session-upload'
 import { useVIntl } from '#ui/composables/i18n'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -43,6 +44,7 @@ const fileUploadSession = useUploadSessionUpload({
 })
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+const { canWriteFiles, canUsePowerActions, permissionDeniedMessage } = useServerPermissions()
 
 const route = useRoute()
 const router = useRouter()
@@ -52,6 +54,10 @@ const serverBusy = computed(() => busyReasons.value.length > 0)
 const busyTooltip = computed(() =>
 	busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
 )
+const fileWriteDisabled = computed(() => !canWriteFiles.value || serverBusy.value)
+const fileWriteDisabledTooltip = computed(() =>
+	canWriteFiles.value ? busyTooltip.value : permissionDeniedMessage.value,
+)
 const nonBackupBusyReasons = computed(() =>
 	busyReasons.value.filter(
 		(r) =>
@@ -325,6 +331,7 @@ const createMutation = useMutation({
 
 // Extraction
 async function extractFile(path: string, override: boolean, dry: boolean) {
+	if (fileWriteDisabled.value) return
 	if (dry) {
 		return await client.kyros.files_v0.extractFile(path, override, true)
 	}
@@ -346,6 +353,7 @@ async function readFileAsBlob(path: string): Promise<Blob> {
 }
 
 async function writeFile(path: string, content: string): Promise<void> {
+	if (fileWriteDisabled.value) return
 	await client.kyros.files_v0.updateFile(path, content)
 	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
 }
@@ -383,6 +391,7 @@ onMounted(async () => {
 
 // Restart
 async function restartServer() {
+	if (!canUsePowerActions.value) return
 	await client.archon.servers_v0.power(serverId, 'Restart')
 }
 
@@ -392,7 +401,7 @@ function getSessionUploadFilename(fileName: string) {
 }
 
 async function uploadFiles(files: File[]) {
-	if (files.length === 0) return
+	if (fileWriteDisabled.value || files.length === 0) return
 
 	try {
 		const result = await fileUploadSession.uploadFiles(
@@ -426,16 +435,20 @@ provideFileManager({
 	startEditing,
 	stopEditing,
 	createItem: async (name, type) => {
+		if (fileWriteDisabled.value) return
 		const path = `${currentPath.value}/${name}`.replace('//', '/')
 		await createMutation.mutateAsync({ path, type })
 	},
 	renameItem: async (path, newName) => {
+		if (fileWriteDisabled.value) return
 		await renameMutation.mutateAsync({ path, newName })
 	},
 	moveItem: async (source, destination) => {
+		if (fileWriteDisabled.value) return
 		await moveMutation.mutateAsync({ source, destination })
 	},
 	deleteItem: async (path, recursive) => {
+		if (fileWriteDisabled.value) return
 		await deleteMutation.mutateAsync({ path, recursive })
 	},
 	readFile,
@@ -446,14 +459,14 @@ provideFileManager({
 	cancelUpload,
 	uploadState,
 	refresh: refreshList,
-	isBusy: serverBusy,
-	busyTooltip,
+	isBusy: fileWriteDisabled,
+	busyTooltip: fileWriteDisabledTooltip,
 	busyWarning,
 	extractFile,
 	prefetchDirectory,
 	prefetchFile,
 	showInstallFromUrl: true,
-	canRestart: true,
+	canRestart: canUsePowerActions.value,
 	restartServer,
 	canShareToMclogs: true,
 })
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index c599dc2c8a..d7fc38b464 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -68,7 +68,7 @@
 						<li v-if="fetchError" class="text-red">
 							<p>{{ formatMessage(messages.errorDetails) }}</p>
 							<CopyCode
-								:text="(fetchError as ModrinthServersFetchError).message || 'Unknown error'"
+								:text="formatFetchError(fetchError)"
 								:copyable="false"
 								:selectable="false"
 								:language="'json'"
@@ -143,7 +143,7 @@
 					/>
 				</div>
 
-				<div v-else key="list">
+				<div v-else key="list" class="flex flex-col gap-6">
 					<Transition
 						enter-active-class="transition-all duration-300 ease-out"
 						enter-from-class="opacity-0 max-h-0"
@@ -161,29 +161,67 @@
 						</div>
 					</Transition>
 
-					<TransitionGroup
-						v-if="filteredData.length > 0 || isPollingForNewServers"
-						name="list"
-						tag="ul"
-						class="m-0 flex flex-col gap-3 p-0"
-					>
-						<MedalServerListing
-							v-for="server in filteredData.filter((s) => s.is_medal)"
-							:key="server.server_id"
-							v-bind="server"
-							@upgrade="openMedalUpgradeModal"
-						/>
-						<ServerListing
-							v-for="server in filteredData.filter((s) => !s.is_medal)"
-							:key="server.server_id"
-							v-bind="server"
-							:cancellation-date="serverBillingMap.get(server.server_id)?.cancellationDate"
-							:is-provisioning="serverBillingMap.get(server.server_id)?.isProvisioning"
-							:on-resubscribe="serverBillingMap.get(server.server_id)?.onResubscribe"
-							:on-download-backup="serverBillingMap.get(server.server_id)?.onDownloadBackup"
-						/>
-					</TransitionGroup>
-					<div v-else>{{ formatMessage(messages.noServersFound) }}</div>
+					<section v-if="ownedServerList.length > 0" class="flex flex-col gap-3">
+						<h2 class="m-0 text-xl font-semibold text-primary">
+							{{ formatMessage(messages.yourServersTitle) }}
+						</h2>
+						<TransitionGroup
+							v-if="ownedFilteredData.length > 0"
+							name="list"
+							tag="ul"
+							class="m-0 flex flex-col gap-3 p-0"
+						>
+							<MedalServerListing
+								v-for="server in ownedFilteredData.filter((s) => s.is_medal)"
+								:key="`owned-medal-${server.server_id}`"
+								v-bind="server"
+								@upgrade="openMedalUpgradeModal"
+							/>
+							<ServerListing
+								v-for="server in ownedFilteredData.filter((s) => !s.is_medal)"
+								:key="`owned-${server.server_id}`"
+								v-bind="server"
+								:cancellation-date="serverBillingMap.get(server.server_id)?.cancellationDate"
+								:is-provisioning="serverBillingMap.get(server.server_id)?.isProvisioning"
+								:on-resubscribe="serverBillingMap.get(server.server_id)?.onResubscribe"
+								:on-download-backup="serverBillingMap.get(server.server_id)?.onDownloadBackup"
+							/>
+						</TransitionGroup>
+						<div v-else class="text-secondary">
+							{{ formatMessage(messages.noOwnedServersFound) }}
+						</div>
+					</section>
+
+					<section v-if="sharedServerList.length > 0" class="flex flex-col gap-3">
+						<h2 class="m-0 text-xl font-semibold text-primary">
+							{{ formatMessage(messages.sharedServersTitle) }}
+						</h2>
+						<TransitionGroup
+							v-if="sharedFilteredData.length > 0"
+							name="list"
+							tag="ul"
+							class="m-0 flex flex-col gap-3 p-0"
+						>
+							<MedalServerListing
+								v-for="server in sharedFilteredData.filter((s) => s.is_medal)"
+								:key="`shared-medal-${server.server_id}`"
+								v-bind="server"
+								@upgrade="openMedalUpgradeModal"
+							/>
+							<ServerListing
+								v-for="server in sharedFilteredData.filter((s) => !s.is_medal)"
+								:key="`shared-${server.server_id}`"
+								v-bind="server"
+							/>
+						</TransitionGroup>
+						<div v-else class="text-secondary">
+							{{ formatMessage(messages.noSharedServersFound) }}
+						</div>
+					</section>
+
+					<div v-if="filteredData.length === 0 && !isPollingForNewServers">
+						{{ formatMessage(messages.noServersFound) }}
+					</div>
 				</div>
 			</Transition>
 		</template>
@@ -210,7 +248,6 @@ import {
 	useServerBackupDownload,
 	useVIntl,
 } from '@modrinth/ui'
-import type { ModrinthServersFetchError } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useIntervalFn } from '@vueuse/core'
 import dayjs from 'dayjs'
@@ -220,6 +257,7 @@ import { type ComponentPublicInstance, computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import ServersUpgradeModalWrapper from '#ui/components/billing/ServersUpgradeModalWrapper.vue'
+import type { ServerListingOwner } from '#ui/components/servers/access'
 import MedalServerListing from '#ui/components/servers/marketing/MedalServerListing.vue'
 import ServerListing from '#ui/components/servers/ServerListing.vue'
 import { createHostingPurchaseIntentContext, provideHostingPurchaseIntent } from '#ui/providers'
@@ -270,11 +308,27 @@ const messages = defineMessages({
 		defaultMessage: 'Search {count} {count, plural, one {server} other {servers}}...',
 	},
 	newServerButton: { id: 'servers.manage.new-server-button', defaultMessage: 'New server' },
+	yourServersTitle: {
+		id: 'servers.manage.your-servers-title',
+		defaultMessage: 'Your servers',
+	},
+	sharedServersTitle: {
+		id: 'servers.manage.shared-servers-title',
+		defaultMessage: 'Shared servers',
+	},
 	checkingForNewServers: {
 		id: 'servers.manage.checking-for-new-servers',
 		defaultMessage: 'Checking for new servers...',
 	},
 	noServersFound: { id: 'servers.manage.no-servers-found', defaultMessage: 'No servers found.' },
+	noOwnedServersFound: {
+		id: 'servers.manage.no-owned-servers-found',
+		defaultMessage: 'No servers you own match your search.',
+	},
+	noSharedServersFound: {
+		id: 'servers.manage.no-shared-servers-found',
+		defaultMessage: 'No shared servers match your search.',
+	},
 	handleErrorTitle: {
 		id: 'servers.manage.handle-error.title',
 		defaultMessage: 'An error occurred',
@@ -399,6 +453,14 @@ const { data: regions, isLoading: regionsLoading } = useQuery({
 	enabled: loggedIn,
 })
 
+const PING_COUNT = 20
+const PING_INTERVAL = 200
+const MAX_PING_TIME = 1000
+
+const initialIndex = {
+	'eu-lim': 31,
+}
+
 watch(
 	regions,
 	(newRegions) => {
@@ -424,14 +486,6 @@ async function fetchStock(
 	return result.available
 }
 
-const PING_COUNT = 20
-const PING_INTERVAL = 200
-const MAX_PING_TIME = 1000
-
-const initialIndex = {
-	'eu-lim': 31,
-}
-
 function runPingTest(
 	region: Archon.Servers.v1.Region,
 	index = initialIndex[region.shortcode] ?? 1,
@@ -568,19 +622,15 @@ const serverList = computed<Archon.Servers.v0.Server[]>(() => {
 
 const showEmptyState = computed(
 	() =>
-		!showServersListLoading.value && serverList.value.length === 0 && !isPollingForNewServers.value,
+		!showServersListLoading.value &&
+		ownedServerList.value.length === 0 &&
+		sharedServerList.value.length === 0 &&
+		!isPollingForNewServers.value,
 )
 
 const searchInput = ref('')
 
-const fuse = computed(() => {
-	if (serverList.value.length === 0) return null
-	return new Fuse(serverList.value, {
-		keys: ['name', 'loader', 'mc_version', 'game', 'state'],
-		includeScore: true,
-		threshold: 0.4,
-	})
-})
+type ServerWithOwner = Archon.Servers.v0.Server & { owner?: ServerListingOwner }
 
 function isSetToCancel(server: Archon.Servers.v0.Server): boolean {
 	return (
@@ -617,14 +667,56 @@ function filesExpired(server: Archon.Servers.v0.Server): boolean {
 	return new Date() > thirtyDaysLater
 }
 
-const filteredData = computed<Archon.Servers.v0.Server[]>(() => {
-	const base = !searchInput.value.trim()
-		? sortServers(serverList.value)
-		: fuse.value
-			? sortServers(fuse.value.search(searchInput.value).map((result) => result.item))
-			: []
-	return base.filter((server) => !filesExpired(server))
-})
+function isServerOwnedByCurrentUser(server: Archon.Servers.v0.Server): boolean {
+	return server.owner_id === auth.user.value?.id
+}
+
+function getServerOwner(server: Archon.Servers.v0.Server): ServerListingOwner | undefined {
+	const owner = serverResponse.value?.users?.[server.owner_id]
+	if (!owner) return undefined
+
+	return {
+		username: owner.username,
+		avatarUrl: owner.avatar_url ?? undefined,
+	}
+}
+
+const ownedServerList = computed<ServerWithOwner[]>(() =>
+	serverList.value.filter((server) => !filesExpired(server) && isServerOwnedByCurrentUser(server)),
+)
+const sharedServerList = computed<ServerWithOwner[]>(() =>
+	serverList.value
+		.filter((server) => !filesExpired(server) && !isServerOwnedByCurrentUser(server))
+		.map((server) => ({
+			...server,
+			owner: getServerOwner(server),
+		})),
+)
+
+function filterServersBySearch(servers: ServerWithOwner[]): ServerWithOwner[] {
+	const normalizedSearch = searchInput.value.trim()
+	if (!normalizedSearch) return sortServers(servers) as ServerWithOwner[]
+
+	const fuse = new Fuse(servers, {
+		keys: ['name', 'loader', 'mc_version', 'game', 'state', 'owner.username'],
+		includeScore: true,
+		threshold: 0.4,
+	})
+	return sortServers(
+		fuse.search(normalizedSearch).map((result) => result.item),
+	) as ServerWithOwner[]
+}
+
+const ownedFilteredData = computed<ServerWithOwner[]>(() =>
+	filterServersBySearch(ownedServerList.value),
+)
+const sharedFilteredData = computed<ServerWithOwner[]>(() =>
+	filterServersBySearch(sharedServerList.value),
+)
+const filteredData = computed<ServerWithOwner[]>(() => [
+	...ownedFilteredData.value,
+	...sharedFilteredData.value,
+])
 
 // Start polling only after initial data is available so the baseline is correct
 watch(serverResponse, (response) => {
@@ -688,6 +780,10 @@ function handleError(err: unknown) {
 	})
 }
 
+function formatFetchError(error: unknown) {
+	return error instanceof Error && error.message ? error.message : 'Unknown error'
+}
+
 function handleSignIn() {
 	void auth.requestSignIn('/hosting/manage')
 }
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
index e8e6c8463f..a644f2c4e9 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
@@ -41,6 +41,7 @@ import { computed, ref, watch } from 'vue'
 
 import ServerManageStats from '#ui/components/servers/ServerManageStats.vue'
 import { useModrinthServersConsole } from '#ui/composables'
+import { useServerPermissions } from '#ui/composables/server-permissions'
 import { ConsolePageLayout, provideConsoleManager } from '#ui/layouts/shared/console'
 import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
 
@@ -64,6 +65,7 @@ const {
 	powerStateDetails: _powerStateDetails,
 } = injectModrinthServerContext()
 const modrinthServersConsole = useModrinthServersConsole()
+const { canUsePowerActions, permissionDeniedMessage } = useServerPermissions()
 
 watch(
 	() => props.showAdvancedDebugInfo,
@@ -107,6 +109,7 @@ const dismissCrash = () => {
 provideConsoleManager({
 	logLines: modrinthServersConsole.output,
 	sendCommand: (cmd: string) => {
+		if (!canUsePowerActions.value) return
 		try {
 			client.archon.sockets.send(serverId, { event: 'command', cmd })
 		} catch (error) {
@@ -114,7 +117,12 @@ provideConsoleManager({
 		}
 	},
 	showCommandInput: true,
-	disableCommandInput: computed(() => serverPowerState.value !== 'running'),
+	disableCommandInput: computed(
+		() => !canUsePowerActions.value || serverPowerState.value !== 'running',
+	),
+	disableCommandInputTooltip: computed(() =>
+		canUsePowerActions.value ? undefined : permissionDeniedMessage.value,
+	),
 	loading: computed(
 		() =>
 			!isConnected.value ||
@@ -122,6 +130,7 @@ provideConsoleManager({
 			isWsAuthIncorrect.value,
 	),
 	onClear: async () => {
+		if (!canUsePowerActions.value) return
 		modrinthServersConsole.clear()
 		try {
 			await client.kyros.logs_v1.clear()
@@ -129,6 +138,10 @@ provideConsoleManager({
 			console.error('Failed to clear server logs:', error)
 		}
 	},
+	clearDisabled: computed(() => !canUsePowerActions.value),
+	clearDisabledTooltip: computed(() =>
+		canUsePowerActions.value ? undefined : permissionDeniedMessage.value,
+	),
 	shareDisabled: computed(() => !isConnected.value),
 	emptyStateType: 'server',
 	crashAnalysis,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 36bf2a3e63..281d2f90e9 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -3,7 +3,7 @@
 		v-if="filteredNotices.length > 0"
 		class="relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
 		:class="{
-			'max-w-[1280px]': isNuxt,
+			'max-w-[1280px]': constrainWidth,
 		}"
 	>
 		<ServerNotice
@@ -107,7 +107,7 @@
 		}"
 		:class="[
 			'server-panel-' + revealState,
-			isNuxt ? 'min-h-[100svh] max-w-[1280px] pb-16' : 'min-h-[calc(100svh-100px)] pb-6',
+			constrainWidth ? 'min-h-[100svh] max-w-[1280px] pb-16' : 'min-h-[calc(100svh-100px)] pb-6',
 		]"
 	>
 		<template v-if="revealState !== 'pending' || isOnboarding">
@@ -344,7 +344,7 @@
 
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
-import { ModrinthApiError, NuxtModrinthClient } from '@modrinth/api-client'
+import { ModrinthApiError } from '@modrinth/api-client'
 import {
 	BoxesIcon,
 	CheckIcon,
@@ -360,9 +360,9 @@ import {
 	SettingsIcon,
 	TransferIcon,
 	TriangleAlertIcon,
+	UsersIcon,
 	XIcon,
 } from '@modrinth/assets'
-import type { Stats } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage, useTimeoutFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
@@ -384,6 +384,7 @@ import {
 } from '#ui/components/servers/server-header'
 import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'
 import {
+	hasServerPermission,
 	useDebugLogger,
 	useLoadingBarToken,
 	useModrinthServersConsole,
@@ -394,6 +395,7 @@ import {
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
 import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
+import { useServerPanelSync } from '#ui/composables/server-panel-sync'
 import type { LogLine } from '#ui/layouts/shared/console'
 import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
 import {
@@ -401,6 +403,8 @@ import {
 	injectNotificationManager,
 	provideServerSettingsModal,
 } from '#ui/providers'
+import type { ServerStats } from '#ui/providers/server-context'
+import { commonMessages } from '#ui/utils/common-messages'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 import {
 	pendingServerContentInstallsEvent,
@@ -442,6 +446,7 @@ const props = withDefaults(
 			worldId: string | null
 			type: 'mod' | 'plugin' | 'datapack'
 		}) => void | Promise<void>
+		constrainWidth?: boolean
 	}>(),
 	{
 		showCopyIdAction: false,
@@ -456,6 +461,7 @@ const props = withDefaults(
 		navigateToServers: undefined,
 		browseModpacks: undefined,
 		browseContent: undefined,
+		constrainWidth: false,
 	},
 )
 
@@ -492,7 +498,7 @@ const DISABLE_LOADING_ANIM = true
 
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
-const isNuxt = computed(() => client instanceof NuxtModrinthClient)
+const constrainWidth = computed(() => props.constrainWidth)
 const queryClient = useQueryClient()
 const route = useRoute()
 const router = useRouter()
@@ -561,6 +567,11 @@ const { handleWsBackupProgress, busyReasons: backupsBusy } = useServerBackupsQue
 	worldId,
 )
 
+const { disconnect: disconnectPanelSync } = useServerPanelSync({
+	serverId: computed(() => props.serverId),
+	worldId,
+})
+
 const { image: serverImage } = useServerImage(
 	props.serverId,
 	computed(() => serverData.value?.upstream ?? null),
@@ -672,6 +683,7 @@ const {
 	serverId: computed(() => props.serverId),
 	worldId,
 	server: serverData,
+	serverFull,
 	isSyncingContent,
 	extraBusyReasons: backupsBusy,
 	setDisconnectedOnAuthIncorrect: false,
@@ -682,6 +694,10 @@ const {
 })
 
 const isUploading = computed(() => uploadState.value.isUploading)
+const canSetup = computed(() =>
+	hasServerPermission(serverData.value?.current_user_permissions ?? 0, 'SETUP'),
+)
+const permissionDeniedMessage = computed(() => formatMessage(commonMessages.noPermissionAction))
 
 function handleBeforeUnload(e: BeforeUnloadEvent) {
 	if (isUploading.value) {
@@ -714,7 +730,7 @@ if (typeof window !== 'undefined') {
 }
 
 type CachedWsState = {
-	stats: Stats
+	stats: ServerStats
 	cpuData: number[]
 	ramData: number[]
 	powerState: Archon.Websocket.v0.PowerState
@@ -822,6 +838,12 @@ const navLinks = computed<Tab[]>(() => [
 		icon: DatabaseBackupIcon,
 		subpages: [],
 	},
+	{
+		label: 'Access',
+		href: `/hosting/manage/${props.serverId}/access`,
+		icon: UsersIcon,
+		subpages: [],
+	},
 	...props.additionalTabs,
 ])
 
@@ -932,6 +954,13 @@ function loadTallyScript() {
 
 async function handleContentRetry() {
 	if (!worldId.value) return
+	if (!canSetup.value) {
+		addNotification({
+			type: 'error',
+			text: permissionDeniedMessage.value,
+		})
+		return
+	}
 	try {
 		await client.archon.content_v1.repair(props.serverId, worldId.value)
 	} catch (err) {
@@ -1361,6 +1390,7 @@ const cleanup = () => {
 	saveWsStateToCache()
 
 	cleanupCoreRuntime(props.serverId)
+	disconnectPanelSync()
 
 	isReconnecting.value = false
 	isLoading.value = true
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index d91f53ee78..0690e1a3c0 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -1,3 +1,4 @@
+export { default as ServersManageAccessPage } from './hosting/manage/[id]/access/access.vue'
 export { default as ServerOnboardingPanelPage } from './hosting/manage/[id]/onboarding.vue'
 export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'
 export { default as ServersManageContentPage } from './hosting/manage/content.vue'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 16f4663e2e..52faa3251f 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1,4 +1,7 @@
 {
+  "action.no-permission": {
+    "defaultMessage": "You do not have permission."
+  },
   "affiliate.create.button": {
     "defaultMessage": "Create affiliate link"
   },
@@ -3260,9 +3263,558 @@
   "search.server_content_type.vanilla": {
     "defaultMessage": "Vanilla"
   },
+  "servers.access-page.activity-log-filter.action-group.backups": {
+    "defaultMessage": "Backups"
+  },
+  "servers.access-page.activity-log-filter.action-group.content": {
+    "defaultMessage": "Content and modpack"
+  },
+  "servers.access-page.activity-log-filter.action-group.files": {
+    "defaultMessage": "Files and SFTP"
+  },
+  "servers.access-page.activity-log-filter.action-group.power-console": {
+    "defaultMessage": "Power and console"
+  },
+  "servers.access-page.activity-log-filter.action-group.server": {
+    "defaultMessage": "Server"
+  },
+  "servers.access-page.activity-log-filter.action-group.settings": {
+    "defaultMessage": "Settings and runtime"
+  },
+  "servers.access-page.activity-log-filter.action-group.users": {
+    "defaultMessage": "Users and invites"
+  },
+  "servers.access-page.activity-log-filter.action-types": {
+    "defaultMessage": "Actions"
+  },
+  "servers.access-page.activity-log-filter.action-types-search": {
+    "defaultMessage": "Search actions..."
+  },
+  "servers.access-page.activity-log-filter.action.addon-added": {
+    "defaultMessage": "Added content"
+  },
+  "servers.access-page.activity-log-filter.action.addon-deleted": {
+    "defaultMessage": "Deleted content"
+  },
+  "servers.access-page.activity-log-filter.action.addon-disabled": {
+    "defaultMessage": "Disabled content"
+  },
+  "servers.access-page.activity-log-filter.action.addon-enabled": {
+    "defaultMessage": "Enabled content"
+  },
+  "servers.access-page.activity-log-filter.action.addon-updated": {
+    "defaultMessage": "Updated content"
+  },
+  "servers.access-page.activity-log-filter.action.addon-uploaded": {
+    "defaultMessage": "Uploaded content"
+  },
+  "servers.access-page.activity-log-filter.action.backup-created": {
+    "defaultMessage": "Created backup"
+  },
+  "servers.access-page.activity-log-filter.action.backup-deleted": {
+    "defaultMessage": "Deleted backup"
+  },
+  "servers.access-page.activity-log-filter.action.backup-renamed": {
+    "defaultMessage": "Renamed backup"
+  },
+  "servers.access-page.activity-log-filter.action.backup-restored": {
+    "defaultMessage": "Restored backup"
+  },
+  "servers.access-page.activity-log-filter.action.changed-server-name": {
+    "defaultMessage": "Changed server name"
+  },
+  "servers.access-page.activity-log-filter.action.changed-server-subdomain": {
+    "defaultMessage": "Changed server subdomain"
+  },
+  "servers.access-page.activity-log-filter.action.console-cleared": {
+    "defaultMessage": "Cleared console"
+  },
+  "servers.access-page.activity-log-filter.action.console-command-executed": {
+    "defaultMessage": "Ran console command"
+  },
+  "servers.access-page.activity-log-filter.action.file-deleted": {
+    "defaultMessage": "Deleted file"
+  },
+  "servers.access-page.activity-log-filter.action.file-edited": {
+    "defaultMessage": "Edited file"
+  },
+  "servers.access-page.activity-log-filter.action.file-renamed": {
+    "defaultMessage": "Renamed file"
+  },
+  "servers.access-page.activity-log-filter.action.file-uploaded": {
+    "defaultMessage": "Uploaded file"
+  },
+  "servers.access-page.activity-log-filter.action.game-version-edited": {
+    "defaultMessage": "Changed Minecraft version"
+  },
+  "servers.access-page.activity-log-filter.action.java-runtime-modified": {
+    "defaultMessage": "Changed Java runtime"
+  },
+  "servers.access-page.activity-log-filter.action.java-version-modified": {
+    "defaultMessage": "Changed Java version"
+  },
+  "servers.access-page.activity-log-filter.action.loader-version-edited": {
+    "defaultMessage": "Changed loader version"
+  },
+  "servers.access-page.activity-log-filter.action.modpack-changed": {
+    "defaultMessage": "Changed modpack"
+  },
+  "servers.access-page.activity-log-filter.action.modpack-unlinked": {
+    "defaultMessage": "Unlinked modpack"
+  },
+  "servers.access-page.activity-log-filter.action.port-allocation-added": {
+    "defaultMessage": "Added port allocation"
+  },
+  "servers.access-page.activity-log-filter.action.port-allocation-removed": {
+    "defaultMessage": "Removed port allocation"
+  },
+  "servers.access-page.activity-log-filter.action.server-created": {
+    "defaultMessage": "Created server"
+  },
+  "servers.access-page.activity-log-filter.action.server-killed": {
+    "defaultMessage": "Killed server"
+  },
+  "servers.access-page.activity-log-filter.action.server-plan-changed": {
+    "defaultMessage": "Changed plan"
+  },
+  "servers.access-page.activity-log-filter.action.server-properties-modified": {
+    "defaultMessage": "Modified server properties"
+  },
+  "servers.access-page.activity-log-filter.action.server-reallocated": {
+    "defaultMessage": "Reallocated server"
+  },
+  "servers.access-page.activity-log-filter.action.server-repaired": {
+    "defaultMessage": "Repaired server"
+  },
+  "servers.access-page.activity-log-filter.action.server-reset": {
+    "defaultMessage": "Reset server"
+  },
+  "servers.access-page.activity-log-filter.action.server-restarted": {
+    "defaultMessage": "Restarted server"
+  },
+  "servers.access-page.activity-log-filter.action.server-started": {
+    "defaultMessage": "Started server"
+  },
+  "servers.access-page.activity-log-filter.action.server-stopped": {
+    "defaultMessage": "Stopped server"
+  },
+  "servers.access-page.activity-log-filter.action.sftp-login": {
+    "defaultMessage": "Logged in via SFTP"
+  },
+  "servers.access-page.activity-log-filter.action.startup-command-modified": {
+    "defaultMessage": "Changed startup command"
+  },
+  "servers.access-page.activity-log-filter.action.user-invite-revoked": {
+    "defaultMessage": "Revoked user invite"
+  },
+  "servers.access-page.activity-log-filter.action.user-invited": {
+    "defaultMessage": "Invited user"
+  },
+  "servers.access-page.activity-log-filter.action.user-permission-modified": {
+    "defaultMessage": "Changed user permissions"
+  },
+  "servers.access-page.activity-log-filter.action.user-removed": {
+    "defaultMessage": "Removed user"
+  },
+  "servers.access-page.activity-log-filter.add": {
+    "defaultMessage": "Add filter"
+  },
+  "servers.access-page.activity-log-filter.clear": {
+    "defaultMessage": "Clear filters"
+  },
+  "servers.access-page.activity-log-filter.empty-options": {
+    "defaultMessage": "No options available."
+  },
+  "servers.access-page.activity-log-filter.empty-search": {
+    "defaultMessage": "No options found."
+  },
+  "servers.access-page.activity-log-filter.instances": {
+    "defaultMessage": "Instances"
+  },
+  "servers.access-page.activity-log-filter.server-scoped-instance": {
+    "defaultMessage": "Server"
+  },
+  "servers.access-page.activity-log-filter.support-actor": {
+    "defaultMessage": "Support"
+  },
+  "servers.access-page.activity-log-filter.users": {
+    "defaultMessage": "User"
+  },
+  "servers.access-page.activity-log-title": {
+    "defaultMessage": "Activity log"
+  },
+  "servers.access-page.invite-friends": {
+    "defaultMessage": "Add user"
+  },
+  "servers.access-page.notification.friend-request-failed.title": {
+    "defaultMessage": "Friend request could not be sent"
+  },
+  "servers.access-page.notification.invite-cancelled.text": {
+    "defaultMessage": "Cancelled the invite for {target}."
+  },
+  "servers.access-page.notification.invite-cancelled.title": {
+    "defaultMessage": "Invite cancelled"
+  },
+  "servers.access-page.notification.invite-failed.title": {
+    "defaultMessage": "Invite could not be sent"
+  },
+  "servers.access-page.notification.invite-resent.text": {
+    "defaultMessage": "Sent another invite to {target}."
+  },
+  "servers.access-page.notification.invite-resent.title": {
+    "defaultMessage": "Invite resent"
+  },
+  "servers.access-page.notification.invite-sent.text": {
+    "defaultMessage": "Invited {target} as {role}."
+  },
+  "servers.access-page.notification.invite-sent.title": {
+    "defaultMessage": "Invite sent"
+  },
+  "servers.access-page.notification.load-failed.text": {
+    "defaultMessage": "Refresh the page to try again."
+  },
+  "servers.access-page.notification.load-failed.title": {
+    "defaultMessage": "Access could not be loaded"
+  },
+  "servers.access-page.notification.member-removed.text": {
+    "defaultMessage": "Removed {target} from this server."
+  },
+  "servers.access-page.notification.member-removed.title": {
+    "defaultMessage": "Access removed"
+  },
+  "servers.access-page.notification.remove-failed.title": {
+    "defaultMessage": "Access could not be removed"
+  },
+  "servers.access-page.notification.role-update-failed.title": {
+    "defaultMessage": "Role could not be updated"
+  },
+  "servers.access-page.role-filter.all": {
+    "defaultMessage": "All"
+  },
+  "servers.access-page.role-filter.selected": {
+    "defaultMessage": "Role: {role}"
+  },
+  "servers.access-page.role.editor": {
+    "defaultMessage": "Editor"
+  },
+  "servers.access-page.role.editor-description": {
+    "defaultMessage": "Manage instance content, files, backups, and other settings."
+  },
+  "servers.access-page.role.owner": {
+    "defaultMessage": "Owner"
+  },
+  "servers.access-page.role.owner-description": {
+    "defaultMessage": "Full access including billing, members, and destructive actions."
+  },
+  "servers.access-page.role.viewer": {
+    "defaultMessage": "Limited"
+  },
+  "servers.access-page.role.viewer-description": {
+    "defaultMessage": "Start, stop, and view the server without making changes."
+  },
+  "servers.access-page.search-users-placeholder": {
+    "defaultMessage": "Search {count} {count, plural, one {user} other {users}}..."
+  },
+  "servers.access-role.editor": {
+    "defaultMessage": "Editor"
+  },
+  "servers.access-role.owner": {
+    "defaultMessage": "Owner"
+  },
+  "servers.access-role.viewer": {
+    "defaultMessage": "Limited"
+  },
+  "servers.access-table.action.cancel-invite": {
+    "defaultMessage": "Cancel invite"
+  },
+  "servers.access-table.action.remove-user": {
+    "defaultMessage": "Remove user"
+  },
+  "servers.access-table.action.resend-invite": {
+    "defaultMessage": "Resend invite"
+  },
+  "servers.access-table.action.resend-invite-cooldown": {
+    "defaultMessage": "Resend in {seconds}s"
+  },
+  "servers.access-table.column.actions": {
+    "defaultMessage": "Actions"
+  },
+  "servers.access-table.column.joined": {
+    "defaultMessage": "Joined"
+  },
+  "servers.access-table.column.role": {
+    "defaultMessage": "Role"
+  },
+  "servers.access-table.column.user": {
+    "defaultMessage": "User"
+  },
+  "servers.access-table.empty": {
+    "defaultMessage": "No users match your filters."
+  },
+  "servers.access-table.member-actions-label": {
+    "defaultMessage": "Actions for {username}"
+  },
+  "servers.access-table.pending": {
+    "defaultMessage": "Pending"
+  },
+  "servers.access-table.unknown-joined-date": {
+    "defaultMessage": "—"
+  },
+  "servers.access-table.user-avatar-alt": {
+    "defaultMessage": "{username}'s avatar"
+  },
   "servers.admonitions.background-task-running": {
     "defaultMessage": "Background task running"
   },
+  "servers.audit-log.actor.support": {
+    "defaultMessage": "Support"
+  },
+  "servers.audit-log.column.event": {
+    "defaultMessage": "Actions"
+  },
+  "servers.audit-log.column.time": {
+    "defaultMessage": "Time"
+  },
+  "servers.audit-log.column.user": {
+    "defaultMessage": "User"
+  },
+  "servers.audit-log.column.world": {
+    "defaultMessage": "Instance"
+  },
+  "servers.audit-log.column.world.tooltip-description": {
+    "defaultMessage": "Server instances are contained environments with their own installed content and world files."
+  },
+  "servers.audit-log.column.world.tooltip-title": {
+    "defaultMessage": "Coming soon!"
+  },
+  "servers.audit-log.empty": {
+    "defaultMessage": "No activity matches your filters."
+  },
+  "servers.audit-log.empty.no-activity": {
+    "defaultMessage": "Perform an action on your server and you will see it here!"
+  },
+  "servers.audit-log.event.addon-added": {
+    "defaultMessage": "Added content <content></content>"
+  },
+  "servers.audit-log.event.addon-changed": {
+    "defaultMessage": "Changed content <content></content>"
+  },
+  "servers.audit-log.event.addon-deleted": {
+    "defaultMessage": "Deleted content <content></content>"
+  },
+  "servers.audit-log.event.addon-deleted-label": {
+    "defaultMessage": "Deleted content"
+  },
+  "servers.audit-log.event.addon-disabled": {
+    "defaultMessage": "Disabled content <content></content>"
+  },
+  "servers.audit-log.event.addon-enabled": {
+    "defaultMessage": "Enabled content <content></content>"
+  },
+  "servers.audit-log.event.addon-updated": {
+    "defaultMessage": "Updated content <content></content>"
+  },
+  "servers.audit-log.event.addon-uploaded": {
+    "defaultMessage": "Uploaded <files></files>"
+  },
+  "servers.audit-log.event.backup-changed": {
+    "defaultMessage": "Changed backup <backup></backup>"
+  },
+  "servers.audit-log.event.backup-changed-fallback": {
+    "defaultMessage": "Changed backup"
+  },
+  "servers.audit-log.event.backup-created": {
+    "defaultMessage": "Created backup <backup></backup>"
+  },
+  "servers.audit-log.event.backup-created-fallback": {
+    "defaultMessage": "Created backup"
+  },
+  "servers.audit-log.event.backup-deleted": {
+    "defaultMessage": "Deleted backup <backup></backup>"
+  },
+  "servers.audit-log.event.backup-deleted-fallback": {
+    "defaultMessage": "Deleted backup"
+  },
+  "servers.audit-log.event.backup-renamed": {
+    "defaultMessage": "Renamed backup <from></from> to <renamed-backup></renamed-backup>"
+  },
+  "servers.audit-log.event.backup-renamed-fallback": {
+    "defaultMessage": "Renamed backup"
+  },
+  "servers.audit-log.event.backup-restored": {
+    "defaultMessage": "Restored backup <backup></backup>"
+  },
+  "servers.audit-log.event.backup-restored-fallback": {
+    "defaultMessage": "Restored backup"
+  },
+  "servers.audit-log.event.config-changed": {
+    "defaultMessage": "Changed server configuration"
+  },
+  "servers.audit-log.event.console-cleared": {
+    "defaultMessage": "Cleared console"
+  },
+  "servers.audit-log.event.console-command-executed": {
+    "defaultMessage": "Ran console command <command></command>"
+  },
+  "servers.audit-log.event.entity-list.hidden-count": {
+    "defaultMessage": "+{count, number}"
+  },
+  "servers.audit-log.event.file-changed": {
+    "defaultMessage": "Changed file <file></file>"
+  },
+  "servers.audit-log.event.file-deleted": {
+    "defaultMessage": "Deleted file <file></file>"
+  },
+  "servers.audit-log.event.file-edited": {
+    "defaultMessage": "Edited file <file></file>"
+  },
+  "servers.audit-log.event.file-renamed": {
+    "defaultMessage": "Renamed <from></from> to <to></to>"
+  },
+  "servers.audit-log.event.file-uploaded": {
+    "defaultMessage": "Uploaded file <file></file>"
+  },
+  "servers.audit-log.event.game-version-changed": {
+    "defaultMessage": "Changed Minecraft version to <version></version>"
+  },
+  "servers.audit-log.event.java-runtime-modified": {
+    "defaultMessage": "Changed Java runtime to <vendor></vendor>"
+  },
+  "servers.audit-log.event.java-version-modified": {
+    "defaultMessage": "Changed Java version to <java-version></java-version>"
+  },
+  "servers.audit-log.event.loader-and-version-changed": {
+    "defaultMessage": "Changed loader to <loader></loader> <version></version>"
+  },
+  "servers.audit-log.event.loader-changed": {
+    "defaultMessage": "Changed loader to <loader></loader>"
+  },
+  "servers.audit-log.event.loader-version-changed": {
+    "defaultMessage": "Changed loader version to <version></version>"
+  },
+  "servers.audit-log.event.loader-version-cleared": {
+    "defaultMessage": "Cleared loader version"
+  },
+  "servers.audit-log.event.modpack-changed": {
+    "defaultMessage": "Changed modpack"
+  },
+  "servers.audit-log.event.modpack-changed-to-modpack": {
+    "defaultMessage": "Changed modpack to <modpack></modpack>"
+  },
+  "servers.audit-log.event.modpack-changed-to-version": {
+    "defaultMessage": "Changed modpack to version <version></version>"
+  },
+  "servers.audit-log.event.modpack-unlinked": {
+    "defaultMessage": "Unlinked modpack"
+  },
+  "servers.audit-log.event.modpack-unlinked-modpack": {
+    "defaultMessage": "Unlinked modpack <modpack></modpack>"
+  },
+  "servers.audit-log.event.modpack-unlinked-version": {
+    "defaultMessage": "Unlinked modpack version <version></version>"
+  },
+  "servers.audit-log.event.port-allocation-added": {
+    "defaultMessage": "Added port allocation <port></port>"
+  },
+  "servers.audit-log.event.port-allocation-removed": {
+    "defaultMessage": "Removed port allocation <port></port>"
+  },
+  "servers.audit-log.event.server-created": {
+    "defaultMessage": "Created server"
+  },
+  "servers.audit-log.event.server-killed": {
+    "defaultMessage": "Killed server"
+  },
+  "servers.audit-log.event.server-metadata-changed": {
+    "defaultMessage": "Changed server metadata"
+  },
+  "servers.audit-log.event.server-name-changed": {
+    "defaultMessage": "Changed server name to <name></name>"
+  },
+  "servers.audit-log.event.server-plan-changed": {
+    "defaultMessage": "Changed plan to <specs></specs>"
+  },
+  "servers.audit-log.event.server-plan.cpu": {
+    "defaultMessage": "{count, plural, one {# CPU} other {# CPUs}}"
+  },
+  "servers.audit-log.event.server-plan.new-plan": {
+    "defaultMessage": "new plan"
+  },
+  "servers.audit-log.event.server-plan.ram-gb": {
+    "defaultMessage": "{amount, number} GB RAM"
+  },
+  "servers.audit-log.event.server-plan.ram-mb": {
+    "defaultMessage": "{amount, number} MB RAM"
+  },
+  "servers.audit-log.event.server-plan.storage-gb": {
+    "defaultMessage": "{amount, number} GB storage"
+  },
+  "servers.audit-log.event.server-plan.storage-mb": {
+    "defaultMessage": "{amount, number} MB storage"
+  },
+  "servers.audit-log.event.server-properties-modified": {
+    "defaultMessage": "Modified server properties <properties></properties>"
+  },
+  "servers.audit-log.event.server-properties-modified-label": {
+    "defaultMessage": "Modified server properties"
+  },
+  "servers.audit-log.event.server-reallocated": {
+    "defaultMessage": "Reallocated server"
+  },
+  "servers.audit-log.event.server-repaired": {
+    "defaultMessage": "Repaired server"
+  },
+  "servers.audit-log.event.server-reset": {
+    "defaultMessage": "Reset server"
+  },
+  "servers.audit-log.event.server-restarted": {
+    "defaultMessage": "Restarted server"
+  },
+  "servers.audit-log.event.server-started": {
+    "defaultMessage": "Started server"
+  },
+  "servers.audit-log.event.server-stopped": {
+    "defaultMessage": "Stopped server"
+  },
+  "servers.audit-log.event.server-subdomain-changed": {
+    "defaultMessage": "Changed server subdomain to <subdomain></subdomain>"
+  },
+  "servers.audit-log.event.sftp-login": {
+    "defaultMessage": "Logged in via SFTP"
+  },
+  "servers.audit-log.event.startup-command-modified": {
+    "defaultMessage": "Changed startup command to <command></command>"
+  },
+  "servers.audit-log.event.unknown": {
+    "defaultMessage": "Unknown event"
+  },
+  "servers.audit-log.event.unknown-basic": {
+    "defaultMessage": "Recorded server activity"
+  },
+  "servers.audit-log.event.user-invite-revoked": {
+    "defaultMessage": "Revoked invite for <target-user></target-user>"
+  },
+  "servers.audit-log.event.user-invited": {
+    "defaultMessage": "Invited <target-user></target-user>"
+  },
+  "servers.audit-log.event.user-invited-with-permissions": {
+    "defaultMessage": "Invited <target-user></target-user> with <permission-label>{permissions}</permission-label>"
+  },
+  "servers.audit-log.event.user-permission-modified": {
+    "defaultMessage": "Changed permissions for <target-user></target-user>"
+  },
+  "servers.audit-log.event.user-permission-modified-with-permissions": {
+    "defaultMessage": "Changed permissions for <target-user></target-user> to <permission-label>{permissions}</permission-label>"
+  },
+  "servers.audit-log.event.user-removed": {
+    "defaultMessage": "Removed <target-user></target-user>"
+  },
+  "servers.audit-log.scope.server": {
+    "defaultMessage": "Server"
+  },
+  "servers.audit-log.user-avatar-alt": {
+    "defaultMessage": "{username}'s avatar"
+  },
   "servers.backups.admonition.backup-cancelled.description": {
     "defaultMessage": "Backup {backupName} was cancelled."
   },
@@ -3419,6 +3971,57 @@
   "servers.busy.syncing-content": {
     "defaultMessage": "Content sync in progress"
   },
+  "servers.grant-access-modal.add-as-friend": {
+    "defaultMessage": "Also send a friend request"
+  },
+  "servers.grant-access-modal.already-member-tooltip": {
+    "defaultMessage": "This user has already been invited"
+  },
+  "servers.grant-access-modal.cancel": {
+    "defaultMessage": "Cancel"
+  },
+  "servers.grant-access-modal.header": {
+    "defaultMessage": "Add user"
+  },
+  "servers.grant-access-modal.invite": {
+    "defaultMessage": "Invite"
+  },
+  "servers.grant-access-modal.permissions-help": {
+    "defaultMessage": "View the full list of permissions for each role <link>here</link>."
+  },
+  "servers.grant-access-modal.role.editor": {
+    "defaultMessage": "Editor"
+  },
+  "servers.grant-access-modal.role.editor-description": {
+    "defaultMessage": "Manage instance content, files, backups, and other settings."
+  },
+  "servers.grant-access-modal.role.label": {
+    "defaultMessage": "Select role"
+  },
+  "servers.grant-access-modal.role.viewer": {
+    "defaultMessage": "Limited"
+  },
+  "servers.grant-access-modal.role.viewer-description": {
+    "defaultMessage": "Start, stop, and view the server without making changes."
+  },
+  "servers.grant-access-modal.suggestion-avatar-alt": {
+    "defaultMessage": "{username}'s avatar"
+  },
+  "servers.grant-access-modal.target.help": {
+    "defaultMessage": "Do not use their Minecraft username."
+  },
+  "servers.grant-access-modal.target.label": {
+    "defaultMessage": "Modrinth username"
+  },
+  "servers.grant-access-modal.target.no-suggestions": {
+    "defaultMessage": "No matching users found."
+  },
+  "servers.grant-access-modal.target.placeholder": {
+    "defaultMessage": "Enter Modrinth username"
+  },
+  "servers.grant-access-modal.target.searching": {
+    "defaultMessage": "Searching..."
+  },
   "servers.installing-banner.error.header": {
     "defaultMessage": "Installation failed"
   },
@@ -3563,6 +4166,12 @@
   "servers.listing.notice.upgrading": {
     "defaultMessage": "Your server's hardware is currently being upgraded and will be back online shortly."
   },
+  "servers.listing.owner-avatar-alt": {
+    "defaultMessage": "{username}'s avatar"
+  },
+  "servers.listing.owner-tooltip": {
+    "defaultMessage": "Owned by {username}"
+  },
   "servers.listing.resubscribe-label": {
     "defaultMessage": "Resubscribe"
   },
@@ -3611,9 +4220,15 @@
   "servers.manage.new-server-button": {
     "defaultMessage": "New server"
   },
+  "servers.manage.no-owned-servers-found": {
+    "defaultMessage": "No servers you own match your search."
+  },
   "servers.manage.no-servers-found": {
     "defaultMessage": "No servers found."
   },
+  "servers.manage.no-shared-servers-found": {
+    "defaultMessage": "No shared servers match your search."
+  },
   "servers.manage.purchase-unavailable.text": {
     "defaultMessage": "Payment information is still loading. Opening checkout as soon as it is ready."
   },
@@ -3656,6 +4271,12 @@
   "servers.manage.settings-hint.title": {
     "defaultMessage": "Your server settings have moved"
   },
+  "servers.manage.shared-servers-title": {
+    "defaultMessage": "Shared servers"
+  },
+  "servers.manage.your-servers-title": {
+    "defaultMessage": "Your servers"
+  },
   "servers.medal-listing.countdown.remaining": {
     "defaultMessage": "<days-count>{days}</days-count> {days, plural, one {day} other {days}} <hours-count>{hours}</hours-count> {hours, plural, one {hour} other {hours}} <minutes-count>{minutes}</minutes-count> {minutes, plural, one {minute} other {minutes}} <seconds-count>{seconds}</seconds-count> {seconds, plural, one {second} other {seconds}} remaining..."
   },
@@ -3674,6 +4295,12 @@
   "servers.medal-listing.notice.upgrading": {
     "defaultMessage": "Your server's hardware is currently being upgraded and will be back online shortly."
   },
+  "servers.medal-listing.owner-avatar-alt": {
+    "defaultMessage": "{username}'s avatar"
+  },
+  "servers.medal-listing.owner-tooltip": {
+    "defaultMessage": "Owned by {username}"
+  },
   "servers.medal-listing.server-icon-alt": {
     "defaultMessage": "Server icon"
   },
@@ -3809,6 +4436,54 @@
   "servers.region.western-europe": {
     "defaultMessage": "Western Europe"
   },
+  "servers.remove-access-modal.added-label": {
+    "defaultMessage": "Added {time}"
+  },
+  "servers.remove-access-modal.cancel-button": {
+    "defaultMessage": "Cancel invite"
+  },
+  "servers.remove-access-modal.cancel-effect-access": {
+    "defaultMessage": "They will not be added to this server"
+  },
+  "servers.remove-access-modal.cancel-effect-invite": {
+    "defaultMessage": "You can send them another invite later"
+  },
+  "servers.remove-access-modal.cancel-header": {
+    "defaultMessage": "Cancel invite"
+  },
+  "servers.remove-access-modal.cancel-warning-body": {
+    "defaultMessage": "If you cancel this invite, {username} will need a new invitation before they can join this server."
+  },
+  "servers.remove-access-modal.header": {
+    "defaultMessage": "Remove user"
+  },
+  "servers.remove-access-modal.invited-label": {
+    "defaultMessage": "Invited {time}"
+  },
+  "servers.remove-access-modal.pending-invite-label": {
+    "defaultMessage": "Pending invite"
+  },
+  "servers.remove-access-modal.remove-button": {
+    "defaultMessage": "Remove user"
+  },
+  "servers.remove-access-modal.remove-effect-access": {
+    "defaultMessage": "They will immediately lose access to the server panel and will no longer be able to edit content"
+  },
+  "servers.remove-access-modal.remove-effect-join": {
+    "defaultMessage": "They will still be able to join and play on the server unless you make separate changes"
+  },
+  "servers.remove-access-modal.unknown-added-label": {
+    "defaultMessage": "Added date unknown"
+  },
+  "servers.remove-access-modal.user-avatar-alt": {
+    "defaultMessage": "{username}'s avatar"
+  },
+  "servers.remove-access-modal.warning-body": {
+    "defaultMessage": "If you remove a user from your server, you'll need to re-invite them to restore access."
+  },
+  "servers.remove-access-modal.what-happens-label": {
+    "defaultMessage": "What happens?"
+  },
   "servers.setup.onboarding.installation-failed.text": {
     "defaultMessage": "An unexpected error occurred while installing. Please try again later."
   },
diff --git a/packages/ui/src/providers/popup-notifications.ts b/packages/ui/src/providers/popup-notifications.ts
index f9dff9bf54..0b677d63c3 100644
--- a/packages/ui/src/providers/popup-notifications.ts
+++ b/packages/ui/src/providers/popup-notifications.ts
@@ -14,10 +14,35 @@ export interface PopupNotificationProgressItem {
 	id: string
 	title: string
 	text?: string
+	iconUrl?: string | null
 	progress: number
 	waiting: boolean
 }
 
+export type PopupNotificationToastType =
+	| 'friend-request'
+	| 'server-invite'
+	| 'instance-invite'
+	| 'instance-download'
+	| 'instance-ready'
+
+export interface PopupNotificationToast {
+	type: PopupNotificationToastType
+	actorName?: string | null
+	actorAvatarUrl?: string | null
+	entityName?: string
+	entityIconUrl?: string | null
+	statusText?: string
+	progress?: number
+	waiting?: boolean
+	onAccept?: () => void | Promise<void>
+	onDecline?: () => void | Promise<void>
+	onDismiss?: () => void | Promise<void>
+	onLaunch?: () => void | Promise<void>
+	onOpenActor?: () => void | Promise<void>
+	onOpenInstance?: () => void | Promise<void>
+}
+
 export interface PopupNotification {
 	id: string | number
 	title: string
@@ -25,11 +50,13 @@ export interface PopupNotification {
 	bodyComponent?: Component
 	bodyProps?: Record<string, unknown>
 	text?: string
+	iconUrl?: string | null
 	type?: 'error' | 'warning' | 'success' | 'info' | 'download'
 	progress?: number
 	waiting?: boolean
 	progressItems?: PopupNotificationProgressItem[]
 	buttons?: PopupNotificationButton[]
+	toast?: PopupNotificationToast
 	autoCloseMs?: number | null
 	timer?: NodeJS.Timeout
 }
diff --git a/packages/ui/src/providers/server-context.ts b/packages/ui/src/providers/server-context.ts
index 040135d26c..7431839807 100644
--- a/packages/ui/src/providers/server-context.ts
+++ b/packages/ui/src/providers/server-context.ts
@@ -1,5 +1,4 @@
 import type { Archon, UploadState } from '@modrinth/api-client'
-import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Ref } from 'vue'
 
 import type { MessageDescriptor } from '#ui/composables/i18n'
@@ -18,10 +17,29 @@ export interface FilesystemAuth {
 
 export type CancelUploadHandler = () => void | Promise<void>
 
+export interface ServerStatsSample {
+	cpu_percent: number
+	ram_usage_bytes: number
+	ram_total_bytes: number
+	storage_usage_bytes: number
+	storage_total_bytes: number
+}
+
+export interface ServerStats {
+	current: ServerStatsSample
+	past: ServerStatsSample
+	graph: {
+		cpu: number[]
+		ram: number[]
+	}
+}
+
 export interface ModrinthServerContext {
 	readonly serverId: string
 	readonly worldId: Ref<string | null>
 	readonly server: Ref<Archon.Servers.v0.Server>
+	readonly serverFull: ComputedRef<Archon.Servers.v1.ServerFull | null>
+	readonly currentUserPermissions: ComputedRef<Archon.Servers.v0.UserScope>
 
 	// Websocket state
 	readonly isConnected: Ref<boolean>
@@ -29,7 +47,7 @@ export interface ModrinthServerContext {
 	readonly powerState: Ref<Archon.Websocket.v0.PowerState>
 	readonly powerStateDetails: Ref<{ oom_killed?: boolean; exit_code?: number } | undefined>
 	readonly isServerRunning: ComputedRef<boolean>
-	readonly stats: Ref<Stats>
+	readonly stats: Ref<ServerStats>
 	readonly uptimeSeconds: Ref<number>
 
 	// Content sync state
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 07bf9a7f15..39f62b1bbc 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -176,6 +176,17 @@ export const WithSubLabel: Story = {
 	},
 }
 
+export const LongSelectedLabel: Story = {
+	args: {
+		modelValue: 'long',
+		options: [
+			{ value: 'short', label: 'Short label' },
+			{ value: 'long', label: 'A much longer selected value that should truncate cleanly' },
+		],
+		triggerClass: 'w-64',
+	},
+}
+
 export const MixedSubLabels: Story = {
 	args: {
 		options: [
@@ -203,6 +214,35 @@ export const SearchableNoFilter: Story = {
 	},
 }
 
+export const SearchableMinimumLength: Story = {
+	args: {
+		options: [
+			{ value: 'fetch', label: 'Fetch' },
+			{ value: 'emma', label: 'Emma' },
+			{ value: 'boris', label: 'Boris' },
+			{ value: 'coolbot', label: 'Coolbot' },
+		],
+		searchable: true,
+		searchPlaceholder: 'Enter a username or email',
+		minSearchLengthToOpen: 2,
+		noOptionsMessage: 'No matching users found.',
+	},
+}
+
+export const SearchableModpacks: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+		],
+		searchable: true,
+		searchPlaceholder: 'Search modpacks...',
+		noOptionsMessage: 'No modpacks found',
+	},
+}
+
 export const WithDropdownFooter: StoryObj = {
 	render: () => ({
 		components: { Combobox, EyeIcon, EyeOffIcon },
diff --git a/packages/ui/src/stories/base/DatePicker.stories.ts b/packages/ui/src/stories/base/DatePicker.stories.ts
index 98945a7bf3..eb6240219a 100644
--- a/packages/ui/src/stories/base/DatePicker.stories.ts
+++ b/packages/ui/src/stories/base/DatePicker.stories.ts
@@ -114,6 +114,37 @@ export const Range: Story = {
 	}),
 }
 
+export const RangeWithTime: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref(['2026-04-13 09:00', '2026-04-29 17:30'])
+			const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				datePicker.value?.open()
+			})
+
+			return { datePicker, value }
+		},
+		template: /* html */ `
+			<div class="flex h-[500px] max-w-sm flex-col gap-2">
+				<DatePicker
+					ref="datePicker"
+					v-model="value"
+					wrapperClass="w-[350px]"
+					mode="range"
+					enable-time
+					default-view-date="2026-04-01"
+					placeholder="Select a date and time range..."
+				/>
+				<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
 export const SameDayRange: Story = {
 	render: () => ({
 		components: { DatePicker },
diff --git a/packages/ui/src/stories/base/DropdownFilterBar.stories.ts b/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
index 4b4fd9c5a7..f10065247e 100644
--- a/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
+++ b/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
@@ -183,6 +183,29 @@ export const WithAppliedFilters: Story = {
 	},
 }
 
+export const ImmediateApply: Story = {
+	render: () => ({
+		components: { DropdownFilterBar },
+		setup() {
+			const selected = ref<Record<string, string[]>>({})
+			return { categories: defaultCategories, selected }
+		},
+		template: /* html */ `
+			<div class="flex flex-col items-start gap-3">
+				<div class="flex flex-wrap items-center gap-2">
+					<DropdownFilterBar v-model="selected" :categories="categories" apply-immediately />
+				</div>
+				<pre class="m-0 rounded-lg bg-surface-2 px-3 py-2 text-sm text-secondary">{{ selected }}</pre>
+			</div>
+		`,
+	}),
+	args: {
+		modelValue: {},
+		categories: defaultCategories,
+		applyImmediately: true,
+	},
+}
+
 export const WithRightCheckmarks: Story = {
 	render: () => ({
 		components: { DropdownFilterBar },
diff --git a/packages/ui/src/stories/base/Table.stories.ts b/packages/ui/src/stories/base/Table.stories.ts
index 73025f3f49..1406de8d38 100644
--- a/packages/ui/src/stories/base/Table.stories.ts
+++ b/packages/ui/src/stories/base/Table.stories.ts
@@ -199,6 +199,13 @@ export const WithSelectionIds: StoryObj = {
 
 export const WithSorting: StoryObj = {
 	args: {},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Sortable header hover and click targets are scoped to the label and sort icon.',
+			},
+		},
+	},
 	render: () => ({
 		components: { Table },
 		setup() {
diff --git a/packages/ui/src/stories/notifications/NotificationToasts.stories.ts b/packages/ui/src/stories/notifications/NotificationToasts.stories.ts
new file mode 100644
index 0000000000..e2a271e7d5
--- /dev/null
+++ b/packages/ui/src/stories/notifications/NotificationToasts.stories.ts
@@ -0,0 +1,159 @@
+import { MinecraftServerIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { NotificationToast } from '../../components/notifications'
+
+const avatarUrl =
+	'https://cdn.modrinth.com/user/6Qo4A5QT/9d81be1a9fb1afd163b7f2f05a791955e7693c90.png'
+
+const meta = {
+	title: 'Notifications/Toasts',
+	parameters: {
+		layout: 'centered',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template:
+				'<div class="dark-mode flex w-[436px] flex-col gap-4 bg-surface-1 p-2"><story /></div>',
+		}),
+	],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const noop = () => console.log('Notification action')
+
+export const FigmaExamples: Story = {
+	render: () => ({
+		components: { NotificationToast },
+		setup() {
+			return {
+				avatarUrl,
+				instanceIconUrl: MinecraftServerIcon,
+				noop,
+			}
+		},
+		template: /* html */ `
+			<div class="flex flex-col gap-4">
+				<NotificationToast
+					type="friend-request"
+					actor-name="Fetch"
+					:actor-avatar-url="avatarUrl"
+					@accept="noop"
+					@decline="noop"
+					@dismiss="noop"
+				/>
+				<NotificationToast
+					type="server-invite"
+					actor-name="Fetch"
+					:actor-avatar-url="avatarUrl"
+					entity-name="Modrinth SMP"
+					@accept="noop"
+					@decline="noop"
+					@dismiss="noop"
+					@open-actor="noop"
+				/>
+				<NotificationToast
+					type="instance-invite"
+					actor-name="Fetch"
+					:actor-avatar-url="avatarUrl"
+					entity-name="New Creation"
+					:entity-icon-url="instanceIconUrl"
+					@accept="noop"
+					@decline="noop"
+					@dismiss="noop"
+					@open-actor="noop"
+				/>
+				<NotificationToast
+					type="instance-download"
+					entity-name="New Creation"
+					:entity-icon-url="instanceIconUrl"
+					status-text="Downloading Minecraft..."
+					:progress="0.5"
+					@dismiss="noop"
+				/>
+				<NotificationToast
+					type="instance-ready"
+					entity-name="New Creation"
+					:entity-icon-url="instanceIconUrl"
+					:progress="0.75"
+					@launch="noop"
+					@open-instance="noop"
+					@dismiss="noop"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const ServerInvite: Story = {
+	render: () => ({
+		components: { NotificationToast },
+		setup() {
+			return {
+				avatarUrl,
+				instanceIconUrl: MinecraftServerIcon,
+				noop,
+			}
+		},
+		template: /* html */ `
+			<NotificationToast
+				type="server-invite"
+				actor-name="Fetch"
+				:actor-avatar-url="avatarUrl"
+				entity-name="Modrinth SMP"
+				@accept="noop"
+				@decline="noop"
+				@dismiss="noop"
+				@open-actor="noop"
+			/>
+		`,
+	}),
+}
+
+export const MissingAvatarFallback: Story = {
+	render: () => ({
+		components: { NotificationToast },
+		setup() {
+			return {
+				instanceIconUrl: MinecraftServerIcon,
+				noop,
+			}
+		},
+		template: /* html */ `
+			<NotificationToast
+				type="server-invite"
+				actor-name="Fetch"
+				entity-name="Modrinth SMP"
+				@accept="noop"
+				@decline="noop"
+				@dismiss="noop"
+				@open-actor="noop"
+			/>
+		`,
+	}),
+}
+
+export const WaitingDownload: Story = {
+	render: () => ({
+		components: { NotificationToast },
+		setup() {
+			return {
+				instanceIconUrl: MinecraftServerIcon,
+				noop,
+			}
+		},
+		template: /* html */ `
+			<NotificationToast
+				type="instance-download"
+				entity-name="New Creation"
+				:entity-icon-url="instanceIconUrl"
+				status-text="Preparing files..."
+				waiting
+				@dismiss="noop"
+			/>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/servers/AccessTable.stories.ts b/packages/ui/src/stories/servers/AccessTable.stories.ts
new file mode 100644
index 0000000000..e91412693f
--- /dev/null
+++ b/packages/ui/src/stories/servers/AccessTable.stories.ts
@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import AccessTable from '../../components/servers/access/AccessTable.vue'
+import type {
+	ServerAccessMember,
+	ServerAccessRole,
+	ServerAccessRoleOption,
+} from '../../components/servers/access/types'
+
+const roleOptions: ServerAccessRoleOption[] = [
+	{
+		value: 'owner',
+		label: 'Owner',
+		description: 'Full access including billing, members, and destructive actions.',
+	},
+	{
+		value: 'editor',
+		label: 'Editor',
+		description: 'Manage instance content, files, backups, and other settings.',
+	},
+	{
+		value: 'viewer',
+		label: 'Limited',
+		description: 'Start, stop, and view the server without making changes.',
+	},
+]
+
+const members: ServerAccessMember[] = [
+	{
+		id: 'owner',
+		user: { id: 'prospector', username: 'Prospector' },
+		role: 'owner',
+		joinedAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
+		isOwner: true,
+	},
+	{
+		id: 'editor',
+		user: { id: 'geometrically', username: 'Geometrically' },
+		role: 'editor',
+		joinedAt: new Date(Date.now() - 21 * 24 * 60 * 60 * 1000).toISOString(),
+	},
+	{
+		id: 'pending',
+		user: { id: 'imb', username: 'IMB' },
+		role: 'viewer',
+		joinedAt: null,
+		pending: true,
+	},
+]
+
+const meta = {
+	title: 'Servers/AccessTable',
+	component: AccessTable,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div style="max-width: 960px;"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof AccessTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	render: () => ({
+		components: { AccessTable },
+		setup() {
+			const rows = ref([...members])
+			function updateRole(member: ServerAccessMember, role: ServerAccessRole) {
+				rows.value = rows.value.map((row) => (row.id === member.id ? { ...row, role } : row))
+			}
+			function removeMember(member: ServerAccessMember) {
+				rows.value = rows.value.filter((row) => row.id !== member.id)
+			}
+			return { rows, roleOptions, updateRole, removeMember }
+		},
+		template: /* html */ `
+			<AccessTable
+				:members="rows"
+				:roles="roleOptions"
+				@update-role="updateRole"
+				@resend-invite="() => {}"
+				@cancel-invite="removeMember"
+				@remove-member="removeMember"
+			/>
+		`,
+	}),
+}
+
+export const PendingInvite: Story = {
+	args: {
+		members: [members[2]],
+		roles: roleOptions,
+	},
+}
+
+export const PendingInviteCooldown: Story = {
+	args: {
+		members: [
+			{
+				...members[2],
+				inviteResendAvailableAt: new Date(Date.now() + 45 * 1000).toISOString(),
+			},
+		],
+		roles: roleOptions,
+	},
+}
+
+export const OwnerFixed: Story = {
+	args: {
+		members: [members[0]],
+		roles: roleOptions,
+	},
+}
+
+export const MobileCompact: Story = {
+	render: () => ({
+		components: { AccessTable },
+		setup() {
+			const rows = ref([...members])
+			function updateRole(member: ServerAccessMember, role: ServerAccessRole) {
+				rows.value = rows.value.map((row) => (row.id === member.id ? { ...row, role } : row))
+			}
+			function removeMember(member: ServerAccessMember) {
+				rows.value = rows.value.filter((row) => row.id !== member.id)
+			}
+			return { rows, roleOptions, updateRole, removeMember }
+		},
+		template: /* html */ `
+			<div style="max-width: 390px;">
+				<AccessTable
+					:members="rows"
+					:roles="roleOptions"
+					@update-role="updateRole"
+					@resend-invite="() => {}"
+					@cancel-invite="removeMember"
+					@remove-member="removeMember"
+				/>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/servers/AuditLogTable.stories.ts b/packages/ui/src/stories/servers/AuditLogTable.stories.ts
new file mode 100644
index 0000000000..646b108703
--- /dev/null
+++ b/packages/ui/src/stories/servers/AuditLogTable.stories.ts
@@ -0,0 +1,929 @@
+import type { Archon } from '@modrinth/api-client'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import DropdownFilterBar from '../../components/base/DropdownFilterBar.vue'
+import type {
+	TimeFrameLastUnit,
+	TimeFrameMode,
+	TimeFramePreset,
+} from '../../components/base/TimeFramePicker.vue'
+import AuditLogTable from '../../components/servers/access/AuditLogTable.vue'
+import { type AuditEventLookups, parseAuditEvent } from '../../components/servers/access/events'
+import type {
+	ServerAuditLogEntry,
+	ServerAuditLogFilters,
+} from '../../components/servers/access/types'
+import auditLogEntryExamplesJson from './audit-log-entry-examples.json?raw'
+
+const serverId = 'story-server'
+const createWorldId = 'create-smp'
+const activeWorldId = 'smp-season-4'
+const backupId = '00000000-0000-4000-8000-000000000001'
+
+type AuditLogEntryExamplesFixture = Archon.Actions.v1.ActionLogResponse & {
+	server_id: string
+	server: {
+		id: string
+		name: string
+		subdomain: string
+	}
+	worlds: Array<{
+		id: string
+		name: string
+	}>
+	backups: Archon.Backups.v1.Backup[]
+}
+
+const auditLogEntryExamples = JSON.parse(auditLogEntryExamplesJson) as AuditLogEntryExamplesFixture
+
+const userIds = {
+	geometrically: 'MpxzqsyW',
+	modmuss: 'JZA4dW8o',
+	prospector: 'Dc7EYhxG',
+}
+
+const filterBarCategories = [
+	{
+		key: 'users',
+		label: 'Users',
+		searchable: true,
+		searchPlaceholder: 'Search users...',
+		options: [
+			{ value: userIds.geometrically, label: 'Geometrically' },
+			{ value: userIds.modmuss, label: 'modmuss50' },
+			{ value: userIds.prospector, label: 'Prospector' },
+		],
+	},
+	{
+		key: 'worlds',
+		label: 'Instances',
+		options: [
+			{ value: createWorldId, label: 'Create SMP' },
+			{ value: activeWorldId, label: 'SMP Season 4' },
+		],
+	},
+	{
+		key: 'actions',
+		label: 'Actions',
+		options: [
+			{ value: 'server_started', label: 'Started server' },
+			{ value: 'console_command_executed', label: 'Ran console command' },
+			{ value: 'backup_restored', label: 'Restored backup' },
+		],
+	},
+]
+
+const serverFullResponse: Archon.Servers.v1.ServerFull = {
+	id: serverId,
+	name: 'Stoneblock Lab',
+	subdomain: 'stoneblock-lab',
+	specs: {
+		cpu: 4,
+		memory_mb: 8192,
+		storage_mb: 65536,
+		swap_mb: 1024,
+	},
+	sftp_username: 'story-server',
+	sftp_password: 'temporary-password',
+	tags: ['medal'],
+	location: {
+		status: 'assigned',
+		location_metadata: {
+			region: 'us-east',
+			region_should_be_user_displayed: true,
+			hostname: 'ashburn-01',
+			is_decommissioned_node: false,
+		},
+	},
+	worlds: [
+		{
+			id: createWorldId,
+			name: 'Create SMP',
+			created_at: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString(),
+			is_active: false,
+			backups: [],
+			content: {
+				modloader: 'fabric',
+				modloader_version: '0.16.10',
+				game_version: '1.21.1',
+				java_version: 21,
+				invocation: 'java -Xmx8G -jar server.jar nogui',
+				original_invocation: 'java -jar server.jar nogui',
+			},
+			readiness: {
+				data_synchronized_fetched: true,
+			},
+		},
+		{
+			id: activeWorldId,
+			name: 'SMP Season 4',
+			created_at: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
+			is_active: true,
+			backups: [
+				{
+					id: backupId,
+					physical_id: backupId,
+					name: 'Before modpack update',
+					created_at: new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString(),
+					automated: false,
+					status: 'done',
+					interrupted: false,
+					ongoing: false,
+					locked: false,
+				},
+			],
+			content: {
+				modloader: 'fabric',
+				modloader_version: '0.16.10',
+				game_version: '1.21.1',
+				java_version: 21,
+				invocation: 'java -Xmx8G -jar server.jar nogui',
+				original_invocation: 'java -jar server.jar nogui',
+			},
+			readiness: {
+				data_synchronized_fetched: true,
+			},
+		},
+	],
+}
+
+const auditLogEntryExamplesServerFullResponse: Archon.Servers.v1.ServerFull = {
+	...serverFullResponse,
+	id: auditLogEntryExamples.server_id,
+	name: auditLogEntryExamples.server.name,
+	subdomain: auditLogEntryExamples.server.subdomain,
+	worlds: auditLogEntryExamples.worlds.map((world, index) => ({
+		...serverFullResponse.worlds[Math.min(index, serverFullResponse.worlds.length - 1)],
+		id: world.id,
+		name: world.name,
+		backups: index === 0 ? auditLogEntryExamples.backups : [],
+	})),
+}
+
+const actionLogResponse: Archon.Actions.v1.ActionLogResponse = {
+	next_offset: null,
+	users: {
+		[userIds.geometrically]: {
+			username: 'Geometrically',
+			avatar_url:
+				'https://cdn.modrinth.com/data/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613_96.webp',
+		},
+		[userIds.modmuss]: {
+			username: 'modmuss50',
+			avatar_url: 'https://avatars2.githubusercontent.com/u/4324090?v=4',
+		},
+		[userIds.prospector]: {
+			username: 'Prospector',
+			avatar_url:
+				'https://cdn.modrinth.com/user/Dc7EYhxG/32e8b1f7d18288262d1ed92cbdf43272d21b4fcd.png',
+		},
+	},
+	addons: {
+		oWaK0Q19: {
+			title: 'Create Aeronautics',
+			slug: 'create-aeronautics',
+			icon_url:
+				'https://cdn.modrinth.com/data/oWaK0Q19/f66b5589924884ffd81acb27f3ccb775867a962e_96.webp',
+			version: null,
+		},
+		AANobbMI: {
+			title: 'Sodium',
+			slug: 'sodium',
+			icon_url:
+				'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+			version: null,
+		},
+		P7dR8mSH: {
+			title: 'Fabric API',
+			slug: 'fabric-api',
+			icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+			version: null,
+		},
+		'project-modpack-001': {
+			title: 'Vault Hunters',
+			slug: 'vault-hunters',
+			icon_url: null,
+			version: null,
+		},
+	},
+	versions: {
+		HY8u0JqC: { name: 'Create Aeronautics 1.0.0', version_number: '1.0.0' },
+		yaoBL9D9: { name: 'Sodium 0.6.0', version_number: '0.6.0' },
+		KZS9tylY: { name: 'Fabric API 0.116.0', version_number: '0.116.0' },
+		'version-modpack-001': { name: 'Vault Hunters 3.15.1', version_number: '3.15.1' },
+	},
+	data: [
+		rawEntry({ action: 'server_created', worldId: null, minutesAgo: 5 }),
+		rawEntry({
+			action: 'changed_server_name',
+			metadata: { name: 'Stoneblock Lab' },
+			worldId: null,
+			minutesAgo: 10,
+		}),
+		rawEntry({
+			action: 'changed_server_subdomain',
+			metadata: { subdomain: 'stoneblock-lab' },
+			worldId: null,
+			minutesAgo: 15,
+		}),
+		rawEntry({ action: 'server_reallocated', worldId: null, minutesAgo: 20 }),
+		rawEntry({
+			action: 'server_plan_changed',
+			metadata: { new_specs: { cpu: 4, memory_mb: 8192, storage_mb: 65536, swap_mb: 1024 } },
+			worldId: null,
+			minutesAgo: 25,
+		}),
+		rawEntry({
+			action: 'user_invited',
+			metadata: { user_id: userIds.modmuss, permissions: -4611686018427387904 },
+			worldId: null,
+			minutesAgo: 30,
+		}),
+		rawEntry({
+			action: 'user_invite_revoked',
+			metadata: { user_id: userIds.modmuss },
+			worldId: null,
+			minutesAgo: 35,
+		}),
+		rawEntry({
+			action: 'user_permission_modified',
+			metadata: {
+				user_id: userIds.modmuss,
+				permissions: -288230376151711744,
+			},
+			worldId: null,
+			minutesAgo: 40,
+		}),
+		rawEntry({
+			action: 'user_removed',
+			metadata: { user_id: userIds.modmuss },
+			worldId: null,
+			minutesAgo: 45,
+		}),
+		rawEntry({
+			action: 'addon_added',
+			metadata: { addons: [{ addon_id: 'oWaK0Q19', version_id: 'HY8u0JqC' }] },
+			minutesAgo: 50,
+		}),
+		rawEntry({
+			action: 'addon_uploaded',
+			metadata: { file_names: ['custom-tweaks.jar', 'server-rules.datapack.zip'] },
+			minutesAgo: 55,
+		}),
+		rawEntry({
+			action: 'addon_disabled',
+			metadata: { addons: [{ addon_id: 'AANobbMI', version_id: 'yaoBL9D9' }] },
+			minutesAgo: 60,
+		}),
+		rawEntry({
+			action: 'addon_enabled',
+			metadata: { addons: [{ addon_id: 'AANobbMI', version_id: 'yaoBL9D9' }] },
+			minutesAgo: 65,
+		}),
+		rawEntry({
+			action: 'addon_deleted',
+			metadata: { addons: [{ addon_id: 'P7dR8mSH', version_id: 'KZS9tylY' }] },
+			minutesAgo: 70,
+		}),
+		rawEntry({
+			action: 'addon_updated',
+			metadata: {
+				addons: [
+					{ addon_id: 'AANobbMI', version_id: 'YAGZ1cCS' },
+					{ addon_id: 'P7dR8mSH', version_id: 'EW33COvi' },
+				],
+			},
+			minutesAgo: 75,
+		}),
+		rawEntry({
+			action: 'modpack_changed',
+			metadata: {
+				spec: {
+					platform: 'modrinth',
+					project_id: 'project-modpack-001',
+					version_id: 'version-modpack-001',
+				},
+			},
+			minutesAgo: 80,
+		}),
+		rawEntry({
+			action: 'modpack_unlinked',
+			metadata: {
+				spec: {
+					platform: 'modrinth',
+					project_id: 'project-modpack-001',
+					version_id: 'version-modpack-001',
+				},
+			},
+			minutesAgo: 85,
+		}),
+		rawEntry({ action: 'server_repaired', minutesAgo: 90 }),
+		rawEntry({ action: 'server_reset', minutesAgo: 95 }),
+		rawEntry({ action: 'server_started', minutesAgo: 100 }),
+		rawEntry({ action: 'server_stopped', minutesAgo: 105 }),
+		rawEntry({ action: 'server_restarted', minutesAgo: 110 }),
+		rawEntry({ action: 'server_killed', minutesAgo: 115 }),
+		rawEntry({
+			action: 'port_allocation_added',
+			metadata: { port: 25565 },
+			worldId: null,
+			minutesAgo: 120,
+		}),
+		rawEntry({
+			action: 'port_allocation_removed',
+			metadata: { port: 24454 },
+			worldId: null,
+			minutesAgo: 125,
+		}),
+		rawEntry({
+			action: 'loader_version_edited',
+			metadata: { new_loader: 'fabric', new_version: '0.16.10' },
+			minutesAgo: 130,
+		}),
+		rawEntry({
+			action: 'game_version_edited',
+			metadata: { new_version: '1.21.1' },
+			minutesAgo: 135,
+		}),
+		rawEntry({
+			action: 'server_properties_modified',
+			metadata: { properties: { difficulty: 'hard', 'max-players': '20' } },
+			minutesAgo: 140,
+		}),
+		rawEntry({ action: 'file_uploaded', metadata: { path: '/mods/custom.jar' }, minutesAgo: 145 }),
+		rawEntry({ action: 'file_deleted', metadata: { path: '/config/old.toml' }, minutesAgo: 150 }),
+		rawEntry({
+			action: 'file_renamed',
+			metadata: { from: '/world/old.dat', to: '/world/new.dat' },
+			minutesAgo: 155,
+		}),
+		rawEntry({ action: 'file_edited', metadata: { path: '/server.properties' }, minutesAgo: 160 }),
+		rawEntry({ action: 'sftp_login', minutesAgo: 165 }),
+		rawEntry({
+			action: 'console_command_executed',
+			metadata: { command: 'whitelist add Prospector' },
+			minutesAgo: 170,
+		}),
+		rawEntry({ action: 'console_cleared', minutesAgo: 175 }),
+		rawEntry({
+			action: 'backup_created',
+			metadata: { id: backupId },
+			minutesAgo: 180,
+		}),
+		rawEntry({
+			action: 'backup_renamed',
+			metadata: {
+				id: backupId,
+				from: 'Manual backup 1',
+				to: 'Before modpack update',
+			},
+			minutesAgo: 185,
+		}),
+		rawEntry({
+			action: 'backup_restored',
+			metadata: { id: backupId },
+			minutesAgo: 190,
+		}),
+		rawEntry({
+			action: 'backup_deleted',
+			metadata: { id: '00000000-0000-4000-8000-000000000099' },
+			minutesAgo: 195,
+		}),
+		rawEntry({
+			action: 'startup_command_modified',
+			metadata: { command: 'java -Xmx8G -jar server.jar nogui' },
+			minutesAgo: 200,
+		}),
+		rawEntry({
+			action: 'java_runtime_modified',
+			metadata: { vendor: 'temurin' },
+			minutesAgo: 205,
+		}),
+		rawEntry({
+			action: 'java_version_modified',
+			metadata: { version: 21 },
+			minutesAgo: 210,
+		}),
+	],
+}
+
+const missingLookupActionLogResponse: Archon.Actions.v1.ActionLogResponse = {
+	next_offset: null,
+	users: {},
+	addons: {},
+	versions: {},
+	data: [
+		rawEntry({
+			action: 'user_permission_modified',
+			metadata: { user_id: 'unknown-user', permissions: -9223372036854775808 },
+			worldId: 'unknown-world',
+			minutesAgo: 5,
+		}),
+		rawEntry({
+			action: 'addon_updated',
+			metadata: { addons: [{ addon_id: 'unknown-addon', version_id: 'unknown-version' }] },
+			minutesAgo: 10,
+		}),
+		rawEntry({
+			action: 'modpack_changed',
+			metadata: {
+				spec: {
+					platform: 'local_file',
+					filename: 'example-modpack-v1.20.mrpack',
+				},
+			},
+			minutesAgo: 15,
+		}),
+		rawEntry({
+			action: 'backup_deleted',
+			metadata: { id: '00000000-0000-4000-8000-000000000099' },
+			minutesAgo: 20,
+		}),
+		rawEntry({
+			action: 'changed_server_name',
+			metadata: { bad: true },
+			minutesAgo: 25,
+		}),
+		rawEntry({
+			action: 'backend_added_this_later',
+			metadata: { value: true },
+			actor: { type: 'support', user_id: userIds.prospector },
+			worldId: null,
+			minutesAgo: 30,
+		}),
+	],
+}
+
+const overflowAddonNames = [
+	"Alpha's Rise",
+	'Bookshelf',
+	'Diagonal Fences',
+	'Dragon Compass',
+	'Dragon Feed',
+	'Dragons of the Cosmos',
+	"Farmer's Delight",
+	'Fastload',
+	'Friendly Fire',
+	'Isle of Berk Addons',
+	'Jade',
+	'Kiwi',
+	"Nature's Compass",
+	'Off the Grid Dragons',
+	'Patchouli',
+	'Puzzles Lib',
+	'Resourceful Config',
+	'Waystones',
+]
+
+const overflowActionLogResponse: Archon.Actions.v1.ActionLogResponse = {
+	next_offset: null,
+	users: actionLogResponse.users,
+	addons: {
+		...Object.fromEntries(
+			overflowAddonNames.map((title, index) => [
+				`overflow-addon-${index}`,
+				{
+					title,
+					slug: `overflow-addon-${index}`,
+					icon_url: null,
+					version: null,
+				},
+			]),
+		),
+		'overflow-sodium': {
+			title: 'Sodium',
+			slug: 'sodium',
+			icon_url: null,
+			version: null,
+		},
+		'overflow-iris': {
+			title: 'Iris Shaders',
+			slug: 'iris',
+			icon_url: null,
+			version: null,
+		},
+	} as Record<string, Archon.Actions.v1.AddonResp>,
+	versions: {
+		...Object.fromEntries(
+			overflowAddonNames.map((title, index) => [
+				`overflow-version-${index}`,
+				{
+					name: `${title} 1.${index}.0`,
+					version_number: `1.${index}.0`,
+				},
+			]),
+		),
+		'overflow-sodium-version': {
+			name: 'Sodium mc1.21.1-0.6.13-fabric',
+			version_number: 'mc1.21.1-0.6.13-fabric',
+		},
+		'overflow-iris-version': {
+			name: 'Iris Shaders 1.8.8+1.21.1-fabric',
+			version_number: '1.8.8+1.21.1-fabric',
+		},
+	} as Record<string, Archon.Actions.v1.VersionResp>,
+	data: [
+		rawEntry({
+			action: 'addon_uploaded',
+			metadata: {
+				file_names: ['fabric-api-0.116.12+1.21.1.jar', 'lithium-fabric-0.15.3+mc1.21.1.jar'],
+			},
+			minutesAgo: 1,
+		}),
+		rawEntry({
+			action: 'addon_added',
+			metadata: {
+				addons: [
+					{ addon_id: 'overflow-sodium', version_id: 'overflow-sodium-version' },
+					{ addon_id: 'overflow-iris', version_id: 'overflow-iris-version' },
+				],
+			},
+			minutesAgo: 2,
+		}),
+		rawEntry({
+			action: 'addon_enabled',
+			metadata: {
+				addons: [
+					{ addon_id: 'overflow-sodium', version_id: 'overflow-sodium-version' },
+					{ addon_id: 'overflow-iris', version_id: 'overflow-iris-version' },
+				],
+			},
+			minutesAgo: 3,
+		}),
+		rawEntry({
+			action: 'addon_disabled',
+			metadata: {
+				addons: [
+					{ addon_id: 'overflow-sodium', version_id: 'overflow-sodium-version' },
+					{ addon_id: 'overflow-iris', version_id: 'overflow-iris-version' },
+				],
+			},
+			minutesAgo: 4,
+		}),
+		rawEntry({
+			action: 'addon_deleted',
+			metadata: {
+				addons: overflowAddonNames.map((_, index) => ({
+					addon_id: `overflow-addon-${index}`,
+					version_id: `overflow-version-${index}`,
+				})),
+			},
+			minutesAgo: 5,
+		}),
+		rawEntry({
+			action: 'startup_command_modified',
+			metadata: {
+				command:
+					'java -Xmx8192M -XX:+UseG1GC -XX:+UnlockExperimentalVMOptions -jar fabric-server-launch.jar nogui',
+			},
+			minutesAgo: 6,
+		}),
+		rawEntry({
+			action: 'server_properties_modified',
+			metadata: {
+				properties: {
+					difficulty: 'hard',
+					'enforce-whitelist': 'true',
+					'max-players': '20',
+					'resource-pack': 'https://cdn.example.invalid/very-long-resource-pack-name.zip',
+				},
+			},
+			minutesAgo: 7,
+		}),
+	],
+}
+
+type RawEntryInput = {
+	action: Archon.Actions.v1.ActionName | string
+	metadata?: unknown
+	actor?: Archon.Actions.v1.ActionUser
+	worldId?: string | null
+	minutesAgo: number
+}
+
+function rawEntry(input: RawEntryInput): Archon.Actions.v1.ActionEntry {
+	return {
+		actor: input.actor ?? { type: 'user', user_id: userIds.geometrically },
+		action:
+			input.metadata === undefined
+				? { action: input.action }
+				: { action: input.action, metadata: input.metadata },
+		server_id: serverId,
+		world_id: input.worldId ?? activeWorldId,
+		timestamp: new Date(Date.now() - input.minutesAgo * 60 * 1000).toISOString(),
+	}
+}
+
+function lookupsFromResponse(
+	response: Archon.Actions.v1.ActionLogResponse,
+	serverFull: Archon.Servers.v1.ServerFull,
+): AuditEventLookups {
+	const backups = new Map<string, Archon.Backups.v1.Backup>()
+	for (const world of serverFull.worlds) {
+		for (const backup of world.backups) {
+			backups.set(backup.id, backup)
+		}
+	}
+
+	return {
+		serverId: serverFull.id,
+		users: response.users,
+		addons: response.addons,
+		worldById: new Map(
+			serverFull.worlds.map((world) => [world.id, { id: world.id, name: world.name }]),
+		),
+		backupById: backups,
+		versions: response.versions,
+	}
+}
+
+function toAuditEntries(
+	response: Archon.Actions.v1.ActionLogResponse,
+	serverFull = serverFullResponse,
+): ServerAuditLogEntry[] {
+	const lookups = lookupsFromResponse(response, serverFull)
+	return response.data.map((entry, index) => {
+		const event = parseAuditEvent(entry, lookups)
+		return {
+			id: `${entry.timestamp}-${entry.actor.type}-${entry.world_id ?? 'server'}-${index}`,
+			actor: event.props.actor,
+			world: event.props.world,
+			event,
+			timestamp: entry.timestamp,
+		}
+	})
+}
+
+const everyActionEntries = toAuditEntries(
+	auditLogEntryExamples,
+	auditLogEntryExamplesServerFullResponse,
+)
+const sampleEntries = toAuditEntries(actionLogResponse)
+const permissionBadgeEntries = sampleEntries.filter((entry) =>
+	['user_invited', 'user_permission_modified'].includes(entry.event.key),
+)
+const loaderVersionEntries = toAuditEntries({
+	...actionLogResponse,
+	data: [
+		rawEntry({
+			action: 'loader_version_edited',
+			metadata: { new_loader: 'fabric', new_version: '0.19.2' },
+			minutesAgo: 1,
+		}),
+		rawEntry({
+			action: 'loader_version_edited',
+			metadata: { new_loader: null, new_version: '0.30.0-beta.7' },
+			minutesAgo: 2,
+		}),
+		rawEntry({
+			action: 'loader_version_edited',
+			metadata: { new_loader: null, new_version: null },
+			minutesAgo: 3,
+		}),
+	],
+})
+const fallbackEntries = toAuditEntries(missingLookupActionLogResponse, {
+	...serverFullResponse,
+	worlds: [],
+})
+const overflowEntries = toAuditEntries(overflowActionLogResponse)
+
+const meta = {
+	title: 'Servers/AuditLogTable',
+	component: AuditLogTable,
+	parameters: {
+		layout: 'padded',
+		docs: {
+			description: {
+				component: 'Audit entries render backend action-log events through typed event components.',
+			},
+		},
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div style="max-width: 1120px;"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof AuditLogTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function createTimeframeState(
+	initial: Partial<{
+		mode: TimeFrameMode
+		preset: TimeFramePreset
+		lastAmount: number
+		lastUnit: TimeFrameLastUnit
+		customStartDate: string
+		customEndDate: string
+	}> = {},
+) {
+	return {
+		timeframeCustomEndDate: ref(initial.customEndDate ?? ''),
+		timeframeCustomStartDate: ref(initial.customStartDate ?? ''),
+		timeframeLastAmount: ref(initial.lastAmount ?? 30),
+		timeframeLastUnit: ref<TimeFrameLastUnit>(initial.lastUnit ?? 'days'),
+		timeframeMode: ref<TimeFrameMode>(initial.mode ?? 'preset'),
+		timeframePreset: ref<TimeFramePreset>(initial.preset ?? 'all_time'),
+	}
+}
+
+function renderStory(entries: ServerAuditLogEntry[], initialQuery = '') {
+	return () => ({
+		components: { AuditLogTable },
+		setup() {
+			const query = ref(initialQuery)
+			const filters = ref<ServerAuditLogFilters>({
+				userId: null,
+				worldId: null,
+			})
+			return { entries, filters, query, ...createTimeframeState() }
+		},
+		template: /* html */ `
+			<AuditLogTable
+				v-model:query="query"
+				v-model:timeframe-mode="timeframeMode"
+				v-model:timeframe-preset="timeframePreset"
+				v-model:timeframe-last-amount="timeframeLastAmount"
+				v-model:timeframe-last-unit="timeframeLastUnit"
+				v-model:timeframe-custom-start-date="timeframeCustomStartDate"
+				v-model:timeframe-custom-end-date="timeframeCustomEndDate"
+				v-model:filters="filters"
+				:entries="entries"
+			/>
+		`,
+	})
+}
+
+export const AllEvents: Story = {
+	render: renderStory(everyActionEntries),
+}
+
+export const PermissionBadges: Story = {
+	render: renderStory(permissionBadgeEntries),
+}
+
+export const LoaderVersionEvents: Story = {
+	render: renderStory(loaderVersionEntries),
+}
+
+export const LongOverflowTooltip: Story = {
+	render: renderStory(overflowEntries),
+}
+
+export const MissingLookupsAndFallbacks: Story = {
+	render: renderStory(fallbackEntries),
+}
+
+export const Filtered: Story = {
+	render: renderStory(sampleEntries, 'Create Aeronautics'),
+}
+
+export const WithExternalFilterControls: Story = {
+	render: () => ({
+		components: { AuditLogTable, DropdownFilterBar },
+		setup() {
+			const query = ref('')
+			const filters = ref<ServerAuditLogFilters>({
+				userId: null,
+				worldId: null,
+			})
+			const externalFilters = ref<Record<string, string[]>>({
+				users: [userIds.geometrically],
+				worlds: [],
+				actions: [],
+			})
+			return {
+				categories: filterBarCategories,
+				entries: sampleEntries,
+				externalFilters,
+				filters,
+				query,
+				...createTimeframeState(),
+			}
+		},
+		template: /* html */ `
+			<AuditLogTable
+				v-model:query="query"
+				v-model:timeframe-mode="timeframeMode"
+				v-model:timeframe-preset="timeframePreset"
+				v-model:timeframe-last-amount="timeframeLastAmount"
+				v-model:timeframe-last-unit="timeframeLastUnit"
+				v-model:timeframe-custom-start-date="timeframeCustomStartDate"
+				v-model:timeframe-custom-end-date="timeframeCustomEndDate"
+				v-model:filters="filters"
+				:entries="entries"
+				has-active-external-filters
+			>
+				<template #filters>
+					<DropdownFilterBar
+						v-model="externalFilters"
+						:categories="categories"
+						add-label="Add filter"
+						clear-label="Clear"
+						use-filter-icon
+					/>
+				</template>
+			</AuditLogTable>
+		`,
+	}),
+}
+
+export const EmptyExternalFilters: Story = {
+	render: () => ({
+		components: { AuditLogTable },
+		setup() {
+			const query = ref('')
+			const filters = ref<ServerAuditLogFilters>({
+				userId: null,
+				worldId: null,
+			})
+			return { entries: [], filters, query, ...createTimeframeState() }
+		},
+		template: /* html */ `
+			<AuditLogTable
+				v-model:query="query"
+				v-model:timeframe-mode="timeframeMode"
+				v-model:timeframe-preset="timeframePreset"
+				v-model:timeframe-last-amount="timeframeLastAmount"
+				v-model:timeframe-last-unit="timeframeLastUnit"
+				v-model:timeframe-custom-start-date="timeframeCustomStartDate"
+				v-model:timeframe-custom-end-date="timeframeCustomEndDate"
+				v-model:filters="filters"
+				:entries="entries"
+				has-active-external-filters
+			/>
+		`,
+	}),
+}
+
+export const MediumAppWindow: Story = {
+	render: () => ({
+		components: { AuditLogTable },
+		setup() {
+			const query = ref('')
+			const filters = ref<ServerAuditLogFilters>({
+				userId: null,
+				worldId: null,
+			})
+			return {
+				entries: everyActionEntries.slice(0, 8),
+				filters,
+				query,
+				...createTimeframeState(),
+			}
+		},
+		template: /* html */ `
+			<div style="max-width: 860px;">
+				<AuditLogTable
+					v-model:query="query"
+					v-model:timeframe-mode="timeframeMode"
+					v-model:timeframe-preset="timeframePreset"
+					v-model:timeframe-last-amount="timeframeLastAmount"
+					v-model:timeframe-last-unit="timeframeLastUnit"
+					v-model:timeframe-custom-start-date="timeframeCustomStartDate"
+					v-model:timeframe-custom-end-date="timeframeCustomEndDate"
+					v-model:filters="filters"
+					:entries="entries"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const MobileCompact: Story = {
+	render: () => ({
+		components: { AuditLogTable },
+		setup() {
+			const query = ref('')
+			const filters = ref<ServerAuditLogFilters>({
+				userId: null,
+				worldId: null,
+			})
+			return {
+				entries: everyActionEntries.slice(0, 8),
+				filters,
+				query,
+				...createTimeframeState(),
+			}
+		},
+		template: /* html */ `
+			<div style="max-width: 390px;">
+				<AuditLogTable
+					v-model:query="query"
+					v-model:timeframe-mode="timeframeMode"
+					v-model:timeframe-preset="timeframePreset"
+					v-model:timeframe-last-amount="timeframeLastAmount"
+					v-model:timeframe-last-unit="timeframeLastUnit"
+					v-model:timeframe-custom-start-date="timeframeCustomStartDate"
+					v-model:timeframe-custom-end-date="timeframeCustomEndDate"
+					v-model:filters="filters"
+					:entries="entries"
+				/>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/servers/EditServerIcon.stories.ts b/packages/ui/src/stories/servers/EditServerIcon.stories.ts
index 698cc2a33b..04d05a15f9 100644
--- a/packages/ui/src/stories/servers/EditServerIcon.stories.ts
+++ b/packages/ui/src/stories/servers/EditServerIcon.stories.ts
@@ -1,11 +1,14 @@
 import type { Archon, UploadState } from '@modrinth/api-client'
-import type { Stats } from '@modrinth/utils'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { computed, ref } from 'vue'
 
 import EditServerIcon from '../../components/servers/edit-server-icon/EditServerIcon.vue'
 import { provideModrinthServerContext } from '../../providers'
-import type { CancelUploadHandler, ModrinthServerContext } from '../../providers/server-context'
+import type {
+	CancelUploadHandler,
+	ModrinthServerContext,
+	ServerStats,
+} from '../../providers/server-context'
 
 const meta = {
 	title: 'Servers/EditServerIcon',
@@ -22,7 +25,7 @@ const meta = {
 					upstream: null,
 				} as Archon.Servers.v0.Server)
 
-				const stats = ref<Stats>({
+				const stats = ref<ServerStats>({
 					current: {
 						cpu_percent: 0,
 						ram_usage_bytes: 0,
@@ -59,6 +62,8 @@ const meta = {
 					},
 					worldId: ref(null),
 					server,
+					serverFull: computed(() => null),
+					currentUserPermissions: computed(() => 0),
 					isConnected: ref(true),
 					isWsAuthIncorrect: ref(false),
 					powerState: ref('running'),
diff --git a/packages/ui/src/stories/servers/GrantAccessModal.stories.ts b/packages/ui/src/stories/servers/GrantAccessModal.stories.ts
new file mode 100644
index 0000000000..af99dfc773
--- /dev/null
+++ b/packages/ui/src/stories/servers/GrantAccessModal.stories.ts
@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import GrantAccessModal from '../../components/servers/access/GrantAccessModal.vue'
+import type {
+	GrantServerAccessPayload,
+	ServerAccessMember,
+} from '../../components/servers/access/types'
+
+const meta = {
+	title: 'Servers/GrantAccessModal',
+	component: GrantAccessModal,
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component:
+					'Role descriptions use the same instance-focused copy as the access page. The username field searches users asynchronously before showing the empty state.',
+			},
+		},
+	},
+} satisfies Meta<typeof GrantAccessModal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	render: () => ({
+		components: { ButtonStyled, GrantAccessModal },
+		setup() {
+			const modalRef = ref<InstanceType<typeof GrantAccessModal> | null>(null)
+			const lastAddedUser = ref('')
+			const users = [
+				{ id: 'fetch', username: 'Fetch' },
+				{ id: 'emma', username: 'Emma' },
+			]
+			async function searchUsers(query: string) {
+				await new Promise((resolve) => setTimeout(resolve, 250))
+				const normalizedQuery = query.trim().toLowerCase()
+				return users.filter((user) => user.username.toLowerCase().startsWith(normalizedQuery))
+			}
+			function handleGrant(payload: GrantServerAccessPayload) {
+				lastAddedUser.value = `${payload.target} as ${payload.role}${
+					payload.addAsFriend ? ' with friend request' : ''
+				}`
+			}
+			return { modalRef, searchUsers, lastAddedUser, handleGrant }
+		},
+		template: /* html */ `
+			<div class="flex flex-col items-center gap-4">
+				<ButtonStyled color="brand">
+					<button @click="modalRef?.show($event)">Add user</button>
+				</ButtonStyled>
+				<p v-if="lastAddedUser" class="m-0 text-sm text-secondary">Last added: {{ lastAddedUser }}</p>
+				<GrantAccessModal ref="modalRef" :search-users="searchUsers" @grant="handleGrant" />
+			</div>
+		`,
+	}),
+}
+
+export const ExistingMember: Story = {
+	render: () => ({
+		components: { ButtonStyled, GrantAccessModal },
+		setup() {
+			const modalRef = ref<InstanceType<typeof GrantAccessModal> | null>(null)
+			const users = [
+				{ id: 'josh11', username: 'josh11' },
+				{ id: 'emma', username: 'Emma' },
+			]
+			const members: ServerAccessMember[] = [
+				{
+					id: 'story-josh11',
+					user: {
+						id: 'josh11',
+						username: 'josh11',
+					},
+					role: 'editor',
+					joinedAt: new Date().toISOString(),
+				},
+			]
+			async function searchUsers(query: string) {
+				await new Promise((resolve) => setTimeout(resolve, 250))
+				const normalizedQuery = query.trim().toLowerCase()
+				return users.filter((user) => user.username.toLowerCase().startsWith(normalizedQuery))
+			}
+			return { modalRef, members, searchUsers }
+		},
+		template: /* html */ `
+			<div class="flex flex-col items-center gap-4">
+				<ButtonStyled color="brand">
+					<button @click="modalRef?.show($event)">Add existing user</button>
+				</ButtonStyled>
+				<GrantAccessModal ref="modalRef" :members="members" :search-users="searchUsers" />
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/servers/MedalServerListing.stories.ts b/packages/ui/src/stories/servers/MedalServerListing.stories.ts
index 9073f55465..b404f9ef13 100644
--- a/packages/ui/src/stories/servers/MedalServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/MedalServerListing.stories.ts
@@ -41,6 +41,16 @@ export const Default: Story = {
 	},
 }
 
+export const SharedWithOwner: Story = {
+	args: {
+		...baseMedalServer,
+		name: 'Medal Co-op Server',
+		owner: {
+			username: 'Prospector',
+		},
+	},
+}
+
 export const ConfiguringNewServer: Story = {
 	args: {
 		...baseMedalServer,
diff --git a/packages/ui/src/stories/servers/RemoveAccessModal.stories.ts b/packages/ui/src/stories/servers/RemoveAccessModal.stories.ts
new file mode 100644
index 0000000000..6b81a8495d
--- /dev/null
+++ b/packages/ui/src/stories/servers/RemoveAccessModal.stories.ts
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import RemoveAccessModal from '../../components/servers/access/RemoveAccessModal.vue'
+
+const meta = {
+	title: 'Servers/RemoveAccessModal',
+	component: RemoveAccessModal,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof RemoveAccessModal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	render: () => ({
+		components: { ButtonStyled, RemoveAccessModal },
+		setup() {
+			const modalRef = ref<InstanceType<typeof RemoveAccessModal> | null>(null)
+			const removed = ref(false)
+			function handleRemove() {
+				removed.value = true
+			}
+			return { modalRef, removed, handleRemove }
+		},
+		template: /* html */ `
+			<div class="flex flex-col items-center gap-4">
+				<ButtonStyled color="red">
+					<button @click="modalRef?.show()">Remove user</button>
+				</ButtonStyled>
+				<p v-if="removed" class="m-0 text-sm text-secondary">User removed</p>
+				<RemoveAccessModal
+					ref="modalRef"
+					username="Geometrically"
+					role="editor"
+					:joined-at="new Date(Date.now() - 21 * 24 * 60 * 60 * 1000).toISOString()"
+					@remove="handleRemove"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const CancelInvite: Story = {
+	render: () => ({
+		components: { ButtonStyled, RemoveAccessModal },
+		setup() {
+			const modalRef = ref<InstanceType<typeof RemoveAccessModal> | null>(null)
+			const cancelled = ref(false)
+			function handleCancel() {
+				cancelled.value = true
+			}
+			return { modalRef, cancelled, handleCancel }
+		},
+		template: /* html */ `
+			<div class="flex flex-col items-center gap-4">
+				<ButtonStyled color="red">
+					<button @click="modalRef?.show()">Cancel invite</button>
+				</ButtonStyled>
+				<p v-if="cancelled" class="m-0 text-sm text-secondary">Invite cancelled</p>
+				<RemoveAccessModal
+					ref="modalRef"
+					username="Geometrically"
+					role="viewer"
+					:joined-at="null"
+					pending
+					should-cancel
+					@remove="handleCancel"
+				/>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index d1fff61904..c890a6fba3 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -50,6 +50,16 @@ export const Default: Story = {
 	},
 }
 
+export const SharedWithOwner: Story = {
+	args: {
+		...baseServer,
+		name: 'Cobbletown',
+		owner: {
+			username: 'Prospector',
+		},
+	},
+}
+
 export const ConfiguringNewServer: Story = {
 	args: {
 		...baseServer,
diff --git a/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts b/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts
index b96d21ba89..aeccb82689 100644
--- a/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts
+++ b/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts
@@ -1,5 +1,4 @@
 import type { Archon, UploadState } from '@modrinth/api-client'
-import type { Stats } from '@modrinth/utils'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -8,7 +7,11 @@ import ServerPanelAdmonitions from '../../components/servers/admonitions/ServerP
 import { defineMessage } from '../../composables/i18n'
 import type { FileOperation } from '../../layouts/shared/files-tab/types'
 import { provideModrinthServerContext } from '../../providers'
-import type { CancelUploadHandler, ModrinthServerContext } from '../../providers/server-context'
+import type {
+	CancelUploadHandler,
+	ModrinthServerContext,
+	ServerStats,
+} from '../../providers/server-context'
 
 const meta = {
 	title: 'Servers/ServerPanelAdmonitions',
@@ -31,7 +34,7 @@ const meta = {
 					upstream: null,
 				} as Archon.Servers.v0.Server)
 
-				const stats = ref<Stats>({
+				const stats = ref<ServerStats>({
 					current: {
 						cpu_percent: 0,
 						ram_usage_bytes: 0,
@@ -76,6 +79,8 @@ const meta = {
 					},
 					worldId: ref(null),
 					server,
+					serverFull: computed(() => null),
+					currentUserPermissions: computed(() => 0),
 					isConnected: ref(true),
 					isWsAuthIncorrect: ref(false),
 					powerState: ref('running'),
diff --git a/packages/ui/src/stories/servers/audit-log-entry-examples.json b/packages/ui/src/stories/servers/audit-log-entry-examples.json
new file mode 100644
index 0000000000..78ac23eab0
--- /dev/null
+++ b/packages/ui/src/stories/servers/audit-log-entry-examples.json
@@ -0,0 +1,930 @@
+{
+	"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+	"server": {
+		"id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+		"name": "CaffeineMC Fabric SMP",
+		"subdomain": "caffeine-smp"
+	},
+	"worlds": [
+		{
+			"id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"name": "Overworld"
+		},
+		{
+			"id": "ba1a5666-96fc-4de5-9b91-977dd7b58d09",
+			"name": "Creative testing"
+		}
+	],
+	"backups": [
+		{
+			"id": "142f5ee6-a239-4824-bc69-5db0e9564c24",
+			"physical_id": "restic:4f3d5df7/142f5ee6-a239-4824-bc69-5db0e9564c24",
+			"name": "Pre-1.21.1 upgrade",
+			"created_at": "2026-05-20T11:40:00Z",
+			"automated": false,
+			"status": "done",
+			"interrupted": false,
+			"ongoing": false,
+			"locked": false
+		},
+		{
+			"id": "2f9c9471-baba-45ff-a2c1-23c9962095ec",
+			"physical_id": "restic:4f3d5df7/2f9c9471-baba-45ff-a2c1-23c9962095ec",
+			"name": "Before Nether reset",
+			"created_at": "2026-05-20T13:55:00Z",
+			"automated": false,
+			"status": "done",
+			"interrupted": false,
+			"ongoing": false,
+			"locked": false
+		},
+		{
+			"id": "6f2ef8ef-3329-4c77-bb06-8a1b6b1db0f0",
+			"physical_id": "restic:4f3d5df7/6f2ef8ef-3329-4c77-bb06-8a1b6b1db0f0",
+			"name": "Rollback after datapack test",
+			"created_at": "2026-05-20T14:15:00Z",
+			"automated": false,
+			"status": "done",
+			"interrupted": false,
+			"ongoing": false,
+			"locked": true
+		}
+	],
+	"next_offset": null,
+	"data": [
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "server_created"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:00:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "changed_server_name",
+				"metadata": {
+					"name": "CaffeineMC Fabric SMP"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:05:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "changed_server_subdomain",
+				"metadata": {
+					"subdomain": "caffeine-smp"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:10:00Z"
+		},
+		{
+			"actor": {
+				"type": "support",
+				"user_id": "JZA4dW8o"
+			},
+			"action": {
+				"action": "server_reallocated"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:15:00Z"
+		},
+		{
+			"actor": {
+				"type": "support",
+				"user_id": "JZA4dW8o"
+			},
+			"action": {
+				"action": "server_plan_changed",
+				"metadata": {
+					"new_specs": {
+						"cpu": 4,
+						"memory_mb": 8192,
+						"storage_mb": 40960,
+						"swap_mb": 1024
+					}
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:20:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "user_invited",
+				"metadata": {
+					"user_id": "JZA4dW8o",
+					"permissions": "BASE_READ | POWER_ACTIONS"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:25:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "user_invite_revoked",
+				"metadata": {
+					"user_id": "DzLrfrbK"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:30:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "user_permission_modified",
+				"metadata": {
+					"user_id": "JZA4dW8o",
+					"permissions": "BASE_READ | FILES_WRITE | SETUP | BACKUPS"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:35:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "user_removed",
+				"metadata": {
+					"user_id": "DzLrfrbK"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T09:40:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_added",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "AANobbMI",
+							"version_id": "u1OEbNKx"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T09:45:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_added",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "P7dR8mSH",
+							"version_id": "Lwt6YYHL"
+						},
+						{
+							"addon_id": "gvQqBUqZ",
+							"version_id": "XQJtuOTA"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T09:50:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_uploaded",
+				"metadata": {
+					"file_names": ["sodium-fabric-0.6.13+mc1.21.1.jar"]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T09:55:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_uploaded",
+				"metadata": {
+					"file_names": ["fabric-api-0.116.12+1.21.1.jar", "lithium-fabric-0.15.3+mc1.21.1.jar"]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:00:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_disabled",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "YL57xq9U",
+							"version_id": "zsoi0dso"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:05:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_disabled",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "AANobbMI",
+							"version_id": "u1OEbNKx"
+						},
+						{
+							"addon_id": "YL57xq9U",
+							"version_id": "zsoi0dso"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:10:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_enabled",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "YL57xq9U",
+							"version_id": "zsoi0dso"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:15:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_enabled",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "AANobbMI",
+							"version_id": "u1OEbNKx"
+						},
+						{
+							"addon_id": "YL57xq9U",
+							"version_id": "zsoi0dso"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:20:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_deleted",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "YL57xq9U",
+							"version_id": "zsoi0dso"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:25:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_deleted",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "AANobbMI",
+							"version_id": "u1OEbNKx"
+						},
+						{
+							"addon_id": "P7dR8mSH",
+							"version_id": "Lwt6YYHL"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:30:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_updated",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "AANobbMI",
+							"version_id": "u1OEbNKx"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:35:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "addon_updated",
+				"metadata": {
+					"addons": [
+						{
+							"addon_id": "P7dR8mSH",
+							"version_id": "Lwt6YYHL"
+						},
+						{
+							"addon_id": "gvQqBUqZ",
+							"version_id": "XQJtuOTA"
+						}
+					]
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:40:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "uk2lIMmm"
+			},
+			"action": {
+				"action": "modpack_changed",
+				"metadata": {
+					"spec": {
+						"platform": "modrinth",
+						"project_id": "BYN9yKrV",
+						"version_id": "w0KHzZ43",
+						"mrpack_sha1": "6b277e2f6e3a9a1acef3342bd154ade25031ad70"
+					}
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:45:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "uk2lIMmm"
+			},
+			"action": {
+				"action": "modpack_unlinked",
+				"metadata": {
+					"spec": {
+						"platform": "modrinth",
+						"project_id": "BYN9yKrV",
+						"version_id": "w0KHzZ43",
+						"mrpack_sha1": "6b277e2f6e3a9a1acef3342bd154ade25031ad70"
+					}
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:50:00Z"
+		},
+		{
+			"actor": {
+				"type": "support",
+				"user_id": "JZA4dW8o"
+			},
+			"action": {
+				"action": "server_repaired"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T10:55:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "server_reset"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "ba1a5666-96fc-4de5-9b91-977dd7b58d09",
+			"timestamp": "2026-05-20T11:00:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "server_started"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T11:05:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "server_stopped"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T11:10:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "server_restarted"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T11:15:00Z"
+		},
+		{
+			"actor": {
+				"type": "support",
+				"user_id": "JZA4dW8o"
+			},
+			"action": {
+				"action": "server_killed"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T11:20:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "port_allocation_added",
+				"metadata": {
+					"port": 25565
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T11:25:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "port_allocation_removed",
+				"metadata": {
+					"port": 24454
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T11:30:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "loader_version_edited",
+				"metadata": {
+					"new_loader": "fabric",
+					"new_version": "0.16.14"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T11:35:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "game_version_edited",
+				"metadata": {
+					"new_version": "1.21.1"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T11:40:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "server_properties_modified",
+				"metadata": {
+					"properties": {
+						"difficulty": "hard"
+					}
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T11:45:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "server_properties_modified",
+				"metadata": {
+					"properties": {
+						"max-players": "20",
+						"simulation-distance": "8",
+						"view-distance": "10"
+					}
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T11:50:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "file_uploaded",
+				"metadata": {
+					"path": "/mods/lithium-fabric-0.15.3+mc1.21.1.jar"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T11:55:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "file_deleted",
+				"metadata": {
+					"path": "/mods/old-performance-patch.jar"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:00:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "file_renamed",
+				"metadata": {
+					"from": "/world/datapacks/trial-test.zip",
+					"to": "/world/datapacks/trial-test.zip.disabled"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:05:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "file_edited",
+				"metadata": {
+					"path": "/server.properties"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:10:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "sftp_login"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": null,
+			"timestamp": "2026-05-20T12:15:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "console_command_executed",
+				"metadata": {
+					"command": "say Maintenance in 5 minutes"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:20:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "console_cleared"
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:25:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "backup_created",
+				"metadata": {
+					"id": "142f5ee6-a239-4824-bc69-5db0e9564c24"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:30:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "backup_renamed",
+				"metadata": {
+					"id": "2f9c9471-baba-45ff-a2c1-23c9962095ec",
+					"from": "Before Nether test",
+					"to": "Before Nether reset"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:35:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "backup_restored",
+				"metadata": {
+					"id": "6f2ef8ef-3329-4c77-bb06-8a1b6b1db0f0"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:40:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "backup_deleted",
+				"metadata": {
+					"id": "0dd0eb1e-f0e0-46d1-b32f-5245e18bf563"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "ba1a5666-96fc-4de5-9b91-977dd7b58d09",
+			"timestamp": "2026-05-20T12:45:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "startup_command_modified",
+				"metadata": {
+					"command": "java -Xms4G -Xmx8G -jar fabric-server-launch.jar nogui"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:50:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "java_runtime_modified",
+				"metadata": {
+					"vendor": "temurin"
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T12:55:00Z"
+		},
+		{
+			"actor": {
+				"type": "user",
+				"user_id": "TEZXhE2U"
+			},
+			"action": {
+				"action": "java_version_modified",
+				"metadata": {
+					"version": 21
+				}
+			},
+			"server_id": "4f3d5df7-4e75-4f08-a1f5-fc472fb7b7bd",
+			"world_id": "7dd2f1a9-2a94-41fb-a0c7-92653ec980ab",
+			"timestamp": "2026-05-20T13:00:00Z"
+		}
+	],
+	"users": {
+		"TEZXhE2U": {
+			"username": "jellysquid3",
+			"avatar_url": "https://cdn.modrinth.com/user/TEZXhE2U/f4705a5f2388c65029ae2e59f1434b3e6e4de23a.png"
+		},
+		"JZA4dW8o": {
+			"username": "modmuss50",
+			"avatar_url": "https://avatars2.githubusercontent.com/u/4324090?v=4"
+		},
+		"DzLrfrbK": {
+			"username": "IMS",
+			"avatar_url": "https://avatars3.githubusercontent.com/u/31803019?v=4"
+		},
+		"uk2lIMmm": {
+			"username": "devin",
+			"avatar_url": "https://cdn.modrinth.com/user/uk2lIMmm/9ceb45272fef68343dcbc01696eb1c6856acb701.png"
+		}
+	},
+	"addons": {
+		"AANobbMI": {
+			"title": "Sodium",
+			"slug": "sodium",
+			"icon_url": "https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp",
+			"version": null
+		},
+		"P7dR8mSH": {
+			"title": "Fabric API",
+			"slug": "fabric-api",
+			"icon_url": "https://cdn.modrinth.com/data/P7dR8mSH/icon.png",
+			"version": null
+		},
+		"YL57xq9U": {
+			"title": "Iris Shaders",
+			"slug": "iris",
+			"icon_url": "https://cdn.modrinth.com/data/YL57xq9U/18d0e7f076d3d6ed5bedd472b853909aac5da202_96.webp",
+			"version": null
+		},
+		"gvQqBUqZ": {
+			"title": "Lithium",
+			"slug": "lithium",
+			"icon_url": "https://cdn.modrinth.com/data/gvQqBUqZ/bcc8686c13af0143adf4285d741256af824f70b7_96.webp",
+			"version": null
+		},
+		"BYN9yKrV": {
+			"title": "Adrenaline",
+			"slug": "adrenaline",
+			"icon_url": "https://cdn.modrinth.com/data/BYN9yKrV/98f14519960b17418d5ba5ebfdc46c85154ad87b_96.webp",
+			"version": null
+		}
+	},
+	"versions": {
+		"u1OEbNKx": {
+			"name": "Sodium 0.6.13 for Fabric 1.21.1",
+			"version_number": "mc1.21.1-0.6.13-fabric"
+		},
+		"Lwt6YYHL": {
+			"name": "[1.21.1] Fabric API 0.116.12+1.21.1",
+			"version_number": "0.116.12+1.21.1"
+		},
+		"zsoi0dso": {
+			"name": "Iris 1.8.8 for Fabric 1.21.1",
+			"version_number": "1.8.8+1.21.1-fabric"
+		},
+		"XQJtuOTA": {
+			"name": "Lithium 0.15.3 for Fabric",
+			"version_number": "mc1.21.1-0.15.3-fabric"
+		},
+		"w0KHzZ43": {
+			"name": "26.1.4+mc1.21.1.fabric",
+			"version_number": "26.1.4+mc1.21.1.fabric"
+		}
+	}
+}
diff --git a/packages/ui/src/utils/billing.ts b/packages/ui/src/utils/billing.ts
index f2dac64d06..c3934a8341 100644
--- a/packages/ui/src/utils/billing.ts
+++ b/packages/ui/src/utils/billing.ts
@@ -1,6 +1,7 @@
-import type { Loaders } from '@modrinth/utils'
 import type Stripe from 'stripe'
 
+import type { ServerLoader } from './loaders'
+
 export type ServerBillingInterval = 'monthly' | 'yearly' | 'quarterly'
 
 export const monthsInInterval: Record<ServerBillingInterval, number> = {
@@ -82,7 +83,7 @@ export type CreatePaymentIntentRequest = PaymentRequestType & {
 		affiliate_code?: string
 		source:
 			| {
-					loader: Loaders
+					loader: ServerLoader
 					game_version?: string
 					loader_version?: string
 			  }
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 762f4209ea..e3350f2e1c 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -189,6 +189,10 @@ export const commonMessages = defineMessages({
 		id: 'label.no',
 		defaultMessage: 'No',
 	},
+	noPermissionAction: {
+		id: 'action.no-permission',
+		defaultMessage: 'You do not have permission.',
+	},
 	notificationsLabel: {
 		id: 'label.notifications',
 		defaultMessage: 'Notifications',
diff --git a/packages/ui/src/utils/loaders.ts b/packages/ui/src/utils/loaders.ts
index e590abc3e2..fc7ada93b3 100644
--- a/packages/ui/src/utils/loaders.ts
+++ b/packages/ui/src/utils/loaders.ts
@@ -1,3 +1,7 @@
+import type { Archon } from '@modrinth/api-client'
+
+export type ServerLoader = Archon.Servers.v0.Loader | 'Bukkit'
+
 export const loaderDisplayNames: Record<string, string> = {
 	fabric: 'Fabric',
 	neoforge: 'NeoForge',
@@ -6,6 +10,7 @@ export const loaderDisplayNames: Record<string, string> = {
 	quilt: 'Quilt',
 	paper: 'Paper',
 	purpur: 'Purpur',
+	bukkit: 'Bukkit',
 	vanilla: 'Vanilla',
 }
 
diff --git a/packages/ui/src/utils/truncate.ts b/packages/ui/src/utils/truncate.ts
index a38dc03f46..9d44261414 100644
--- a/packages/ui/src/utils/truncate.ts
+++ b/packages/ui/src/utils/truncate.ts
@@ -22,6 +22,9 @@ export function truncatedTooltip(
 ): string | undefined {
 	const el = unref(element)
 	if (!el) return undefined
+	if (!tooltipText) return undefined
 
-	return el.scrollWidth > el.clientWidth ? tooltipText : undefined
+	return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight
+		? tooltipText
+		: undefined
 }
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index cf9bd68e76..5f466af486 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -3,7 +3,6 @@ export * from './highlightjs'
 export * from './licenses'
 export * from './parse'
 export * from './projects'
-export * from './servers'
 export * from './types'
 export * from './users'
 export * from './utils'
diff --git a/packages/utils/servers/errors/index.ts b/packages/utils/servers/errors/index.ts
deleted file mode 100644
index 251b762eed..0000000000
--- a/packages/utils/servers/errors/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './modrinth-server-error'
-export * from './modrinth-servers-fetch-error'
-export * from './modrinth-servers-multi-error'
diff --git a/packages/utils/servers/errors/modrinth-server-error.ts b/packages/utils/servers/errors/modrinth-server-error.ts
deleted file mode 100644
index b5ced9ff22..0000000000
--- a/packages/utils/servers/errors/modrinth-server-error.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { FetchError } from 'ofetch'
-
-import type { V1ErrorInfo } from '../types'
-
-export class ModrinthServerError extends Error {
-	constructor(
-		message: string,
-		public readonly statusCode?: number,
-		public readonly originalError?: Error,
-		public readonly module?: string,
-		public readonly v1Error?: V1ErrorInfo,
-		public readonly responseData?: unknown,
-	) {
-		let errorMessage = message
-		let method = 'GET'
-		let path = ''
-
-		if (originalError instanceof FetchError) {
-			const matches = message.match(/\[([A-Z]+)\]\s+"([^"]+)":/)
-			if (matches) {
-				method = matches[1]
-				path = matches[2].replace(/https?:\/\/[^/]+\/[^/]+\/v\d+\//, '')
-			}
-
-			const statusMessage = (() => {
-				if (!statusCode) return 'Unknown Error'
-				switch (statusCode) {
-					case 400:
-						return 'Bad Request'
-					case 401:
-						return 'Unauthorized'
-					case 403:
-						return 'Forbidden'
-					case 404:
-						return 'Not Found'
-					case 408:
-						return 'Request Timeout'
-					case 429:
-						return 'Too Many Requests'
-					case 500:
-						return 'Internal Server Error'
-					case 502:
-						return 'Bad Gateway'
-					case 503:
-						return 'Service Unavailable'
-					case 504:
-						return 'Gateway Timeout'
-					default:
-						return `HTTP ${statusCode}`
-				}
-			})()
-
-			errorMessage = `[${method}] ${statusMessage} (${statusCode}) while fetching ${path}${module ? ` in ${module}` : ''}`
-		} else {
-			errorMessage = `${message}${statusCode ? ` (${statusCode})` : ''}${module ? ` in ${module}` : ''}`
-		}
-
-		super(errorMessage)
-		this.name = 'ModrinthServersFetchError'
-	}
-}
diff --git a/packages/utils/servers/errors/modrinth-servers-fetch-error.ts b/packages/utils/servers/errors/modrinth-servers-fetch-error.ts
deleted file mode 100644
index 098e702f9b..0000000000
--- a/packages/utils/servers/errors/modrinth-servers-fetch-error.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export class ModrinthServersFetchError extends Error {
-	constructor(
-		message: string,
-		public statusCode?: number,
-		public originalError?: Error,
-	) {
-		super(message)
-		this.name = 'ModrinthFetchError'
-	}
-}
diff --git a/packages/utils/servers/errors/modrinth-servers-multi-error.ts b/packages/utils/servers/errors/modrinth-servers-multi-error.ts
deleted file mode 100644
index 1fd7356fb9..0000000000
--- a/packages/utils/servers/errors/modrinth-servers-multi-error.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export class ModrinthServersMultiError extends Error {
-	public readonly errors: Map<string, Error> = new Map()
-	public readonly timestamp: number = Date.now()
-
-	constructor(message?: string) {
-		super(message || 'Multiple errors occurred')
-		this.name = 'MultipleErrors'
-	}
-
-	addError(module: string, error: Error) {
-		this.errors.set(module, error)
-		this.message = this.buildErrorMessage()
-	}
-
-	hasErrors() {
-		return this.errors.size > 0
-	}
-
-	private buildErrorMessage(): string {
-		return Array.from(this.errors.entries())
-
-			.map(([_module, error]) => error.message)
-			.join('\n')
-	}
-}
diff --git a/packages/utils/servers/index.ts b/packages/utils/servers/index.ts
deleted file mode 100644
index 9794930298..0000000000
--- a/packages/utils/servers/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './errors'
-export * from './types'
diff --git a/packages/utils/servers/types/api.ts b/packages/utils/servers/types/api.ts
deleted file mode 100644
index d589d6034d..0000000000
--- a/packages/utils/servers/types/api.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ModrinthServerError } from '../errors'
-
-export interface V1ErrorInfo {
-	context?: string
-	error: string
-	description: string
-}
-
-export interface JWTAuth {
-	url: string
-	token: string
-}
-
-export interface ModuleError {
-	error: ModrinthServerError
-	timestamp: number
-}
-
-export type ModuleName = 'general' | 'network' | 'startup'
diff --git a/packages/utils/servers/types/common.ts b/packages/utils/servers/types/common.ts
deleted file mode 100644
index 5c033a084b..0000000000
--- a/packages/utils/servers/types/common.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type ServerNotice = {
-	id: number
-	message: string
-	title?: string
-	level: 'info' | 'warn' | 'critical' | 'survey'
-	dismissable: boolean
-	announce_at: string
-	expires: string
-	assigned: {
-		kind: 'server' | 'node'
-		id: string
-		name: string
-	}[]
-	dismissed_by: {
-		server: string
-		dismissed_on: string
-	}[]
-}
diff --git a/packages/utils/servers/types/content.ts b/packages/utils/servers/types/content.ts
deleted file mode 100644
index 0802e76488..0000000000
--- a/packages/utils/servers/types/content.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface Mod {
-	filename: string
-	project_id: string | undefined
-	version_id: string | undefined
-	name: string | undefined
-	version_number: string | undefined
-	icon_url: string | undefined
-	owner: string | undefined
-	disabled: boolean
-	installing: boolean
-}
-
-export type ContentType = 'mod' | 'plugin'
diff --git a/packages/utils/servers/types/filesystem.ts b/packages/utils/servers/types/filesystem.ts
deleted file mode 100644
index c8c7ad198a..0000000000
--- a/packages/utils/servers/types/filesystem.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { JWTAuth } from './api'
-import type { FilesystemOp, FSQueuedOp } from './websocket'
-
-export interface DirectoryItem {
-	name: string
-	type: 'directory' | 'file'
-	count?: number
-	modified: number
-	created: number
-	path: string
-}
-
-export interface FileUploadQuery {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	promise: Promise<any>
-	onProgress: (
-		callback: (progress: { loaded: number; total: number; progress: number }) => void,
-	) => void
-	cancel: () => void
-}
-
-export interface DirectoryResponse {
-	items: DirectoryItem[]
-	total: number
-	current?: number
-}
-
-export interface FSModule {
-	auth: JWTAuth
-	ops: FilesystemOp[]
-	queuedOps: FSQueuedOp[]
-	opsQueuedForModification: string[]
-}
diff --git a/packages/utils/servers/types/index.ts b/packages/utils/servers/types/index.ts
deleted file mode 100644
index ef322a5991..0000000000
--- a/packages/utils/servers/types/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './api'
-export * from './common'
-export * from './content'
-export * from './filesystem'
-export * from './server'
-export * from './stats'
-export * from './websocket'
diff --git a/packages/utils/servers/types/server.ts b/packages/utils/servers/types/server.ts
deleted file mode 100644
index e0b8a22438..0000000000
--- a/packages/utils/servers/types/server.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { Project } from '../../types'
-import type { ServerNotice } from './common'
-
-export interface ServerGeneral {
-	server_id: string
-	name: string
-	net: {
-		ip: string
-		port: number
-		domain: string
-	}
-	game: string
-	backup_quota: number
-	used_backup_quota: number
-	status: string
-	suspension_reason: 'moderated' | 'paymentfailed' | 'cancelled' | 'upgrading' | 'other' | string
-	loader: string
-	loader_version: string
-	mc_version: string
-	upstream: {
-		kind: 'modpack' | 'mod' | 'resourcepack'
-		version_id: string
-		project_id: string
-	} | null
-	motd?: string
-	image?: string
-	project?: Project
-	sftp_username: string
-	sftp_password: string
-	sftp_host: string
-	datacenter?: string
-	notices?: ServerNotice[]
-	node: {
-		token: string
-		instance: string
-	}
-	flows?: {
-		intro?: boolean
-	}
-	is_medal?: boolean
-}
-
-export interface Allocation {
-	port: number
-	name: string
-}
-
-export interface Startup {
-	invocation: string
-	original_invocation: string
-	jdk_version: 'lts8' | 'lts11' | 'lts17' | 'lts21'
-	jdk_build: 'corretto' | 'temurin' | 'graal'
-}
-
-export type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
-export type JDKVersion = 'lts8' | 'lts11' | 'lts17' | 'lts21'
-export type JDKBuild = 'corretto' | 'temurin' | 'graal'
-
-export type Loaders =
-	| 'Fabric'
-	| 'Quilt'
-	| 'Forge'
-	| 'NeoForge'
-	| 'Paper'
-	| 'Spigot'
-	| 'Bukkit'
-	| 'Vanilla'
-	| 'Purpur'
-
-export type ServerState =
-	| 'starting'
-	| 'running'
-	| 'restarting'
-	| 'stopping'
-	| 'stopped'
-	| 'crashed'
-	| 'unknown'
diff --git a/packages/utils/servers/types/stats.ts b/packages/utils/servers/types/stats.ts
deleted file mode 100644
index 8f53161f28..0000000000
--- a/packages/utils/servers/types/stats.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export interface Stats {
-	current: {
-		cpu_percent: number
-		ram_usage_bytes: number
-		ram_total_bytes: number
-		storage_usage_bytes: number
-		storage_total_bytes: number
-	}
-	past: {
-		cpu_percent: number
-		ram_usage_bytes: number
-		ram_total_bytes: number
-		storage_usage_bytes: number
-		storage_total_bytes: number
-	}
-	graph: {
-		cpu: number[]
-		ram: number[]
-	}
-}
diff --git a/packages/utils/servers/types/websocket.ts b/packages/utils/servers/types/websocket.ts
deleted file mode 100644
index 3ecdf8b1ba..0000000000
--- a/packages/utils/servers/types/websocket.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { ServerState } from './server'
-import type { Stats } from './stats'
-
-export interface WSAuth {
-	url: string
-	token: string
-}
-
-export interface WSLogEvent {
-	event: 'log'
-	message: string
-}
-
-type CurrentStats = Stats['current']
-
-export interface WSStatsEvent extends CurrentStats {
-	event: 'stats'
-}
-
-export interface WSAuthExpiringEvent {
-	event: 'auth-expiring'
-}
-
-export interface WSPowerStateEvent {
-	event: 'power-state'
-	state: ServerState
-	// if state "crashed"
-	oom_killed?: boolean
-	exit_code?: number
-}
-
-export interface WSAuthIncorrectEvent {
-	event: 'auth-incorrect'
-}
-
-export interface WSInstallationResultOkEvent {
-	event: 'installation-result'
-	result: 'ok'
-}
-
-export interface WSInstallationResultErrEvent {
-	event: 'installation-result'
-	result: 'err'
-	reason: string
-}
-
-export type WSInstallationResultEvent = WSInstallationResultOkEvent | WSInstallationResultErrEvent
-
-export interface WSAuthOkEvent {
-	event: 'auth-ok'
-}
-
-export interface WSUptimeEvent {
-	event: 'uptime'
-	uptime: number // seconds
-}
-
-export interface WSNewModEvent {
-	event: 'new-mod'
-}
-
-export type FSQueuedOpUnarchive = {
-	op: 'unarchive'
-	src: string
-}
-
-export type FSQueuedOp = FSQueuedOpUnarchive
-
-export type FSOpUnarchive = {
-	op: 'unarchive'
-	progress: number // Note: 1 does not mean it's done
-	id: string // UUID
-
-	mime: string
-	src: string
-	state:
-		| 'queued'
-		| 'ongoing'
-		| 'cancelled'
-		| 'done'
-		| 'failed-corrupted'
-		| 'failed-invalid-path'
-		| 'failed-cf-no-serverpack'
-		| 'failed-cf-not-available'
-		| 'failed-not-reachable'
-
-	current_file: string | null
-	failed_path?: string
-	bytes_processed: number
-	files_processed: number
-	started: string
-}
-
-export type FilesystemOp = FSOpUnarchive
-
-export interface WSFilesystemOpsEvent {
-	event: 'filesystem-ops'
-	all: FilesystemOp[]
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 442dd9c93c..65d8a252d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -173,7 +173,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
+        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -182,22 +182,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.2(jiti@1.21.7)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -215,7 +215,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -283,7 +283,7 @@ importers:
         version: link:../../packages/utils
       '@sentry/nuxt':
         specifier: ^10.33.0
-        version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
+        version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
       '@tanstack/vue-query':
         specifier: 5.90.7
         version: 5.90.7(vue@3.5.27(typescript@5.9.3))
@@ -409,8 +409,8 @@ importers:
         specifier: ^10.2.7
         version: 10.5.0
       nuxt:
-        specifier: ^3.20.2
-        version: 3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+        specifier: '=3.20.2'
+        version: 3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -781,7 +781,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1214,8 +1214,8 @@ packages:
     resolution: {integrity: sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==}
     engines: {node: '>=14'}
 
-  '@dxup/nuxt@0.3.2':
-    resolution: {integrity: sha512-2f2usP4oLNsIGjPprvABe3f3GWuIhIDp0169pGLFxTDRI5A4d4sBbGpR+tD9bGZCT+1Btb6Q2GKlyv3LkDCW5g==}
+  '@dxup/nuxt@0.2.2':
+    resolution: {integrity: sha512-RNpJjDZs9+JcT9N87AnOuHsNM75DEd58itADNd/s1LIF6BZbTLZV0xxilJZb55lntn4TYvscTaXLCBX2fq9CXg==}
 
   '@dxup/unimport@0.1.2':
     resolution: {integrity: sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==}
@@ -2607,6 +2607,10 @@ packages:
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
+  '@nuxt/kit@3.20.2':
+    resolution: {integrity: sha512-laqfmMcWWNV1FsVmm1+RQUoGY8NIJvCRl0z0K8ikqPukoEry0LXMqlQ+xaf8xJRvoH2/78OhZmsEEsUBTXipcw==}
+    engines: {node: '>=18.12.0'}
+
   '@nuxt/kit@3.21.0':
     resolution: {integrity: sha512-KMTLK/dsGaQioZzkYUvgfN9le4grNW54aNcA1jqzgVZLcFVy4jJfrJr5WZio9NT2EMfajdoZ+V28aD7BRr4Zfw==}
     engines: {node: '>=18.12.0'}
@@ -2615,14 +2619,14 @@ packages:
     resolution: {integrity: sha512-cD/0UU9RQmlnTbmyJTDyzN8f6CzpziDLv3tFQCnwl0Aoxt3KmFu4k/XA4Sogxqj7jJ/3cdX1kL+Lnsh34sxcQQ==}
     engines: {node: '>=18.12.0'}
 
-  '@nuxt/nitro-server@3.21.0':
-    resolution: {integrity: sha512-lM+PPyJf6NpWC7EqcttnNgkh1aGFlb2q1YnyHX/C9OSvF2XUXbSkNKhVclZtYSyZ6aUQSek9P1MRKcaEh7bgpw==}
+  '@nuxt/nitro-server@3.20.2':
+    resolution: {integrity: sha512-IX43Fy0/7jjYve1D7hdkR/rfvww6u8aEbsdTVfh7wH14GGKJtsAn3DJlRb3CCKwtbo0dp25e3qLM4hOO5hZTCg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      nuxt: ^3.21.0
+      nuxt: ^3.20.2
 
-  '@nuxt/schema@3.21.0':
-    resolution: {integrity: sha512-s4cDCQrlG3RbUXowTDlQVR/tsWW2Wd2PQ0Pw/QV5x2Mzp26VH0XyGZ3zYkaDPt23BsjrbF/XA4Bhut5YREfxbg==}
+  '@nuxt/schema@3.20.2':
+    resolution: {integrity: sha512-fp584AiXON7vI6NDDpNTjxiJ485iM/ztJSPX9CqptKUNjULhBy9qlacF9+NiwQqxlEs3zvbxHpo/1qLPNSb4MQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
   '@nuxt/telemetry@2.6.6':
@@ -2630,11 +2634,11 @@ packages:
     engines: {node: '>=18.12.0'}
     hasBin: true
 
-  '@nuxt/vite-builder@3.21.0':
-    resolution: {integrity: sha512-XxwadSMlpvtjDstTtUHdXhLAGldZlWNmPhfAGo5PhsrXhidrjHcODXTGnh9iC1mbVu8xML78/m2rhB9MFHSCyw==}
+  '@nuxt/vite-builder@3.20.2':
+    resolution: {integrity: sha512-xsWMn13mxTlwLKyZc67lNwOIS0Ih8L+wQnsLaAt/4jkkypRiQ09+oIljF6n7vVmnqIvuGXFL0e97ZIbyrkEBQw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      nuxt: 3.21.0
+      nuxt: 3.20.2
       rolldown: ^1.0.0-beta.38
       vue: ^3.3.4
     peerDependenciesMeta:
@@ -2893,389 +2897,293 @@ packages:
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
-  '@oxc-minify/binding-android-arm-eabi@0.110.0':
-    resolution: {integrity: sha512-43fMTO8/5bMlqfOiNSZNKUzIqeLIYuB9Hr1Ohyf58B1wU11S2dPGibTXOGNaWsfgHy99eeZ1bSgeIHy/fEYqbw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxc-minify/binding-android-arm64@0.110.0':
-    resolution: {integrity: sha512-5oQrnn9eK/ccOp80PTrNj0Vq893NPNNRryjGpOIVsYNgWFuoGCfpnKg68oEFcN8bArizYAqw4nvgHljEnar69w==}
+  '@oxc-minify/binding-android-arm64@0.102.0':
+    resolution: {integrity: sha512-pknM+ttJTwRr7ezn1v5K+o2P4RRjLAzKI10bjVDPybwWQ544AZW6jxm7/YDgF2yUbWEV9o7cAQPkIUOmCiW8vg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-minify/binding-darwin-arm64@0.110.0':
-    resolution: {integrity: sha512-dqBDgTG9tF2z2lrZp9E8wU+Godz1i8gCGSei2eFKS2hRploBOD5dmOLp1j4IMornkPvSQmbwB3uSjPq7fjx4EA==}
+  '@oxc-minify/binding-darwin-arm64@0.102.0':
+    resolution: {integrity: sha512-BDLiH41ZctNND38+GCEL3ZxFn9j7qMZJLrr6SLWMt8xlG4Sl64xTkZ0zeUy4RdVEatKKZdrRIhFZ2e5wPDQT6Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-minify/binding-darwin-x64@0.110.0':
-    resolution: {integrity: sha512-U0AqabqaooDOpYmeeOye8wClv8PSScELXgOfYqyqgrwH9J9KrpCE1jL8Rlqgz68QbL4mPw3V6sKiiHssI4CLeQ==}
+  '@oxc-minify/binding-darwin-x64@0.102.0':
+    resolution: {integrity: sha512-AcB8ZZ711w4hTDhMfMHNjT2d+hekTQ2XmNSUBqJdXB+a2bJbE50UCRq/nxXl44zkjaQTit3lcQbFvhk2wwKcpw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-minify/binding-freebsd-x64@0.110.0':
-    resolution: {integrity: sha512-H0w8o/Wo1072WSdLfhwwrpFpwZnPpjQODlHuRYkTfsSSSJbTxQtjJd4uxk7YJsRv5RQp69y0I7zvdH6f8Xueyw==}
+  '@oxc-minify/binding-freebsd-x64@0.102.0':
+    resolution: {integrity: sha512-UlLEN9mR5QaviYVMWZQsN9DgAH3qyV67XUXDEzSrbVMLsqHsVHhFU8ZIeO0fxWTQW/cgpvldvKp9/+RdrggqWw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-minify/binding-linux-arm-gnueabihf@0.110.0':
-    resolution: {integrity: sha512-qd6sW0AvEVYZhbVVMGtmKZw3b1zDYGIW+54Uh42moWRAj6i4Jhk/LGr6r9YNZpOINeuvZfkFuEeDD/jbu7xPUA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-minify/binding-linux-arm-musleabihf@0.110.0':
-    resolution: {integrity: sha512-7WXP0aXMrWSn0ScppUBi3jf68ebfBG0eri8kxLmBOVSBj6jw1repzkHMITJMBeLr5d0tT/51qFEptiAk2EP2iA==}
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.102.0':
+    resolution: {integrity: sha512-CWyCwedZrUt47n56/RwHSwKXxVI3p98hB0ntLaBNeH5qjjBujs9uOh4bQ0aAlzUWunT77b3/Y+xcQnmV42HN4A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-minify/binding-linux-arm64-gnu@0.110.0':
-    resolution: {integrity: sha512-LYfADrq5x1W5gs+u9OIbMbDQNYkAECTXX0ufnAuf3oGmO51rF98kGFR5qJqC/6/csokDyT3wwTpxhE0TkcF/Og==}
+  '@oxc-minify/binding-linux-arm64-gnu@0.102.0':
+    resolution: {integrity: sha512-W/DCw+Ys8rXj4j38ylJ2l6Kvp6SV+eO5SUWA11imz7yCWntNL001KJyGQ9PJNUFHg0jbxe3yqm4M50v6miWzeA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-minify/binding-linux-arm64-musl@0.110.0':
-    resolution: {integrity: sha512-53GjCVY8kvymk9P6qNDh6zyblcehF5QHstq9QgCjv13ONGRnSHjeds0PxIwiihD7h295bxsWs84DN39syLPH4Q==}
+  '@oxc-minify/binding-linux-arm64-musl@0.102.0':
+    resolution: {integrity: sha512-DyH/t/zSZHuX4Nn239oBteeMC4OP7B13EyXWX18Qg8aJoZ+lZo90WPGOvhP04zII33jJ7di+vrtAUhsX64lp+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-minify/binding-linux-ppc64-gnu@0.110.0':
-    resolution: {integrity: sha512-li8XcN81dxbJDMBESnTgGhoiAQ+CNIdM0QGscZ4duVPjCry1RpX+5FJySFbGqG3pk4s9ZzlL/vtQtbRzZIZOzg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-minify/binding-linux-riscv64-gnu@0.110.0':
-    resolution: {integrity: sha512-SweKfsnLKShu6UFV8mwuj1d1wmlNoL/FlAxPUzwjEBgwiT2HQkY24KnjBH+TIA+//1O83kzmWKvvs4OuEhdIEQ==}
+  '@oxc-minify/binding-linux-riscv64-gnu@0.102.0':
+    resolution: {integrity: sha512-CMvzrmOg+Gs44E7TRK/IgrHYp+wwVJxVV8niUrDR2b3SsrCO3NQz5LI+7bM1qDbWnuu5Cl1aiitoMfjRY61dSg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-minify/binding-linux-riscv64-musl@0.110.0':
-    resolution: {integrity: sha512-oH8G4aFMP8XyTsEpdANC5PQyHgSeGlopHZuW1rpyYcaErg5YaK0vXjQ4EM5HVvPm+feBV24JjxgakTnZoF3aOQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxc-minify/binding-linux-s390x-gnu@0.110.0':
-    resolution: {integrity: sha512-W9na+Vza7XVUlpf8wMt4QBfH35KeTENEmnpPUq3NSlbQHz8lSlSvhAafvo43NcKvHAXV3ckD/mUf2VkqSdbklg==}
+  '@oxc-minify/binding-linux-s390x-gnu@0.102.0':
+    resolution: {integrity: sha512-tZWr6j2s0ddm9MTfWTI3myaAArg9GDy4UgvpF00kMQAjLcGUNhEEQbB9Bd9KtCvDQzaan8HQs0GVWUp+DWrymw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-minify/binding-linux-x64-gnu@0.110.0':
-    resolution: {integrity: sha512-XJdA4mmmXOjJxSRgNJXsDP7Xe8h3gQhmb56hUcCrvq5d+h5UcEi2pR8rxsdIrS8QmkLuBA3eHkGK8E27D7DTgQ==}
+  '@oxc-minify/binding-linux-x64-gnu@0.102.0':
+    resolution: {integrity: sha512-0YEKmAIun1bS+Iy5Shx6WOTSj3GuilVuctJjc5/vP8/EMTZ/RI8j0eq0Mu3UFPoT/bMULL3MBXuHuEIXmq7Ddg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-minify/binding-linux-x64-musl@0.110.0':
-    resolution: {integrity: sha512-QqzvALuOTtSckI8x467R4GNArzYDb/yEh6aNzLoeaY1O7vfT7SPDwlOEcchaTznutpeS9Dy8gUS/AfqtUHaufw==}
+  '@oxc-minify/binding-linux-x64-musl@0.102.0':
+    resolution: {integrity: sha512-Ew4QDpEsXoV+pG5+bJpheEy3GH436GBe6ASPB0X27Hh9cQ2gb1NVZ7cY7xJj68+fizwS/PtT8GHoG3uxyH17Pg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-minify/binding-openharmony-arm64@0.110.0':
-    resolution: {integrity: sha512-gAMssLs2Q3+uhLZxanh1DF+27Kaug3cf4PXb9AB7XK81DR+LVcKySXaoGYoOs20Co0fFSphd6rRzKge2qDK3dA==}
+  '@oxc-minify/binding-openharmony-arm64@0.102.0':
+    resolution: {integrity: sha512-wYPXS8IOu/sXiP3CGHJNPzZo4hfPAwJKevcFH2syvU2zyqUxym7hx6smfcK/mgJBiX7VchwArdGRwrEQKcBSaQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-minify/binding-wasm32-wasi@0.110.0':
-    resolution: {integrity: sha512-7Wqi5Zjl022bs2zXq+ICdalDPeDuCH/Nhbi8q2isLihAonMVIT0YH2hqqnNEylRNGYck+FJ6gRZwMpGCgrNxPg==}
+  '@oxc-minify/binding-wasm32-wasi@0.102.0':
+    resolution: {integrity: sha512-52SepCb9e+8cVisGa9S/F14K8PxW0AnbV1j4KEYi8uwfkUIxeDNKRHVHzPoBXNrr0yxW0EHLn/3i8J7a2YCpWw==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-minify/binding-win32-arm64-msvc@0.110.0':
-    resolution: {integrity: sha512-ZPx+0Tj4dqn41ecyoGotlvekQKy6JxJCixn9Rw7h/dafZ3eDuBcEVh3c2ZoldXXsyMIt5ywI8IWzFZsjNedd5Q==}
+  '@oxc-minify/binding-win32-arm64-msvc@0.102.0':
+    resolution: {integrity: sha512-kLs6H1y6sDBKcIimkNwu5th28SLkyvFpHNxdLtCChda0KIGeIXNSiupy5BqEutY+VlWJivKT1OV3Ev3KC5Euzg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-minify/binding-win32-ia32-msvc@0.110.0':
-    resolution: {integrity: sha512-H0Oyd3RWBfpEyvJIrFK94RYiY7KKSQl11Ym7LMDwLEagelIAfRCkt1amHZhFa/S3ZRoaOJFXzEw4YKeSsjVFsg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxc-minify/binding-win32-x64-msvc@0.110.0':
-    resolution: {integrity: sha512-Hr3nK90+qXKJ2kepXwFIcNfQQIOBecB4FFCyaMMypthoEEhVP08heRynj4eSXZ8NL9hLjs3fQzH8PJXfpznRnQ==}
+  '@oxc-minify/binding-win32-x64-msvc@0.102.0':
+    resolution: {integrity: sha512-XdyJZdSMN8rbBXH10CrFuU+Q9jIP2+MnxHmNzjK4+bldbTI1UxqwjUMS9bKVC5VCaIEZhh8IE8x4Vf8gmCgrKQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@oxc-parser/binding-android-arm-eabi@0.110.0':
-    resolution: {integrity: sha512-g6+kHTI/BRDJszaZkSgyu0pGuMIVYJ7/v0I4C9BkTeGn1LxF9GWI6jE22dBEELXMWbG7FTyNlD9RCuWlStAx6w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxc-parser/binding-android-arm64@0.110.0':
-    resolution: {integrity: sha512-tbr+uWFVUN6p9LYlR0cPyFA24HWlnRYU+oldWlEGis/tdMtya3BubQcKdylhFhhDLaW6ChCJfxogQranElGVsw==}
+  '@oxc-parser/binding-android-arm64@0.102.0':
+    resolution: {integrity: sha512-pD2if3w3cxPvYbsBSTbhxAYGDaG6WVwnqYG0mYRQ142D6SJ6BpNs7YVQrqpRA2AJQCmzaPP5TRp/koFLebagfQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-parser/binding-darwin-arm64@0.110.0':
-    resolution: {integrity: sha512-jPBsXPc8hwmsUQyLMg7a5Ll/j/8rWCDFoB8WzLP6C0qQKX0zWQxbfSdLFg9GGNPuRo8J8ma9WfBQN5RmbFxNJA==}
+  '@oxc-parser/binding-darwin-arm64@0.102.0':
+    resolution: {integrity: sha512-RzMN6f6MrjjpQC2Dandyod3iOscofYBpHaTecmoRRbC5sJMwsurkqUMHzoJX9F6IM87kn8m/JcClnoOfx5Sesw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-parser/binding-darwin-x64@0.110.0':
-    resolution: {integrity: sha512-jt5G1eZj4sdMGc7Q0c6kfPRmqY1Mn3yzo6xuRr8EXozkh93O8KGFflABY7t56WIrmP+cloaCQkLcjlm6vdhzcQ==}
+  '@oxc-parser/binding-darwin-x64@0.102.0':
+    resolution: {integrity: sha512-Sr2/3K6GEcejY+HgWp5HaxRPzW5XHe9IfGKVn9OhLt8fzVLnXbK5/GjXj7JjMCNKI3G3ZPZDG2Dgm6CX3MaHCA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-parser/binding-freebsd-x64@0.110.0':
-    resolution: {integrity: sha512-VJ7Hwf4dg7uf8b/DrLEhE6lgnNTfBZbTqXQBG3n0oCBoreE1c5aWf1la+o7fJjjTpACRts/vAZ2ngFNNqEFpJw==}
+  '@oxc-parser/binding-freebsd-x64@0.102.0':
+    resolution: {integrity: sha512-s9F2N0KJCGEpuBW6ChpFfR06m2Id9ReaHSl8DCca4HvFNt8SJFPp8fq42n2PZy68rtkremQasM0JDrK2BoBeBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.110.0':
-    resolution: {integrity: sha512-w3OZ0pLKktM7k4qEbVj3dHnCvSMFnWugYxHfhpwncYUOxwDNL3mw++EOIrw997QYiEuJ+H6Od8K6mbj1p6Ae8w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.110.0':
-    resolution: {integrity: sha512-BIaoW4W6QKb8Q6p3DErDtsAuDRAnr0W+gtwo7fQQkbAJpoPII0ZJXZn+tcQGCyNGKWSsilRNWHyd/XZfXXXpzw==}
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.102.0':
+    resolution: {integrity: sha512-zRCIOWzLbqhfY4g8KIZDyYfO2Fl5ltxdQI1v2GlePj66vFWRl8cf4qcBGzxKfsH3wCZHAhmWd1Ht59mnrfH/UQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.110.0':
-    resolution: {integrity: sha512-3EQDJze28t0HdxXjMKBU6utNscXJePg2YV0Kd/ZnHx24VcIyfkNH6NKzBh0NeaWHovDTkpzYHPtF2tOevtbbfw==}
+  '@oxc-parser/binding-linux-arm64-gnu@0.102.0':
+    resolution: {integrity: sha512-5n5RbHgfjulRhKB0pW5p0X/NkQeOpI4uI9WHgIZbORUDATGFC8yeyPA6xYGEs+S3MyEAFxl4v544UEIWwqAgsA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-arm64-musl@0.110.0':
-    resolution: {integrity: sha512-5xwm1hPrGGvjCVtTWNGJ39MmQGnyipoIDShneGBgSrnDh0XX+COAO7AZKajgNipqgNq5rGEItpzFkMtSDyx0bQ==}
+  '@oxc-parser/binding-linux-arm64-musl@0.102.0':
+    resolution: {integrity: sha512-/XWcmglH/VJ4yKAGTLRgPKSSikh3xciNxkwGiURt8dS30b+3pwc4ZZmudMu0tQ3mjSu0o7V9APZLMpbHK8Bp5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.110.0':
-    resolution: {integrity: sha512-I8Xop7z+enuvW1xe0AcRQ9XqFNkUYgeXusyGjCyW6TstRb62P90h+nL1AoGaUMy0E0518DJam5vRYVRgXaAzYg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.110.0':
-    resolution: {integrity: sha512-XPM0jpght/AuHnweNaIo0twpId6rWFs8NrTkMijxcsRQMzNBeSQQgYm9ErrutmKQS6gb8XNAEIkYXHgPmhdDPg==}
+  '@oxc-parser/binding-linux-riscv64-gnu@0.102.0':
+    resolution: {integrity: sha512-2jtIq4nswvy6xdqv1ndWyvVlaRpS0yqomLCvvHdCFx3pFXo5Aoq4RZ39kgvFWrbAtpeYSYeAGFnwgnqjx9ftdw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.110.0':
-    resolution: {integrity: sha512-ylJIuJyMzAqR191QeCwZLEkyo4Sx817TNILjNhT0W1EDQusGicOYKSsGXM/2DHCNYGcidV+MQ8pUVzNeVmuM6g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.110.0':
-    resolution: {integrity: sha512-DL6oR0PfYor9tBX9xlAxMUVwfm6+sKTL4H+KiQ6JKP3xkJTwBIdDCgeN2AjMht1D3N40uUwVq3v8/2fqnZRgLQ==}
+  '@oxc-parser/binding-linux-s390x-gnu@0.102.0':
+    resolution: {integrity: sha512-Yp6HX/574mvYryiqj0jNvNTJqo4pdAsNP2LPBTxlDQ1cU3lPd7DUA4MQZadaeLI8+AGB2Pn50mPuPyEwFIxeFg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-gnu@0.110.0':
-    resolution: {integrity: sha512-+e6ws5JLpFehdK+wh6q8icx1iM3Ao+9dtItVWFcRiXxSvGcIlS9viWcMvXKrmcsyVDUf81dnvuMSBigNslxhIQ==}
+  '@oxc-parser/binding-linux-x64-gnu@0.102.0':
+    resolution: {integrity: sha512-R4b0xZpDRhoNB2XZy0kLTSYm0ZmWeKjTii9fcv1Mk3/SIGPrrglwt4U6zEtwK54Dfi4Bve5JnQYduigR/gyDzw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-musl@0.110.0':
-    resolution: {integrity: sha512-6DiYhVdXKOzB01+j/tyrB6/d2o6b4XYFQvcbBRNbVHIimS6nl992y3V3mGG3NaA+uCZAzhT3M3btTdKAxE4A3A==}
+  '@oxc-parser/binding-linux-x64-musl@0.102.0':
+    resolution: {integrity: sha512-xM5A+03Ti3jvWYZoqaBRS3lusvnvIQjA46Fc9aBE/MHgvKgHSkrGEluLWg/33QEwBwxupkH25Pxc1yu97oZCtg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-openharmony-arm64@0.110.0':
-    resolution: {integrity: sha512-U9KEK7tXdHrXl2eZpoHYGWj31ZSvdGiaXwjkJzeRN0elt89PXi+VcryRh6BAFbEz1EQpTteyMDwDXMgJVWM85A==}
+  '@oxc-parser/binding-openharmony-arm64@0.102.0':
+    resolution: {integrity: sha512-AieLlsliblyaTFq7Iw9Nc618tgwV02JT4fQ6VIUd/3ZzbluHIHfPjIXa6Sds+04krw5TvCS8lsegtDYAyzcyhg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-parser/binding-wasm32-wasi@0.110.0':
-    resolution: {integrity: sha512-cK2j/GbXGxP7k4qDM0OGjkbPrIOj8n9+U/27joH/M19z+jrQ5u1lvlvbAK/Aw2LnqE0waADnnuAc0MFab+Ea8w==}
+  '@oxc-parser/binding-wasm32-wasi@0.102.0':
+    resolution: {integrity: sha512-w6HRyArs1PBb9rDsQSHlooe31buUlUI2iY8sBzp62jZ1tmvaJo9EIVTQlRNDkwJmk9DF9uEyIJ82EkZcCZTs9A==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.110.0':
-    resolution: {integrity: sha512-ZW393ysGT5oZeGJRyw2JAz4tIfyTjVCSxuZoh8e+7J7e0QPDH/SAmyxJXb/aMxarIVa3OcYZ5p/Q6eooHZ0i1Q==}
+  '@oxc-parser/binding-win32-arm64-msvc@0.102.0':
+    resolution: {integrity: sha512-pqP5UuLiiFONQxqGiUFMdsfybaK1EOK4AXiPlvOvacLaatSEPObZGpyCkAcj9aZcvvNwYdeY9cxGM9IT3togaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.110.0':
-    resolution: {integrity: sha512-NM50LT1PEnlMlw+z/TFVkWaDOF/s5DRHbU3XhEESNhDDT9qYA8N9B1V/FYxVr1ngu28JGK2HtkjpWKlKoF4E2Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxc-parser/binding-win32-x64-msvc@0.110.0':
-    resolution: {integrity: sha512-w1SzoXNaY59tbTz8/YhImByuj7kXP5EfPtv4+PPwPrvLrOWt8BOpK0wN8ysXqyWCdHv9vS1UBRrNd/aSp4Dy8A==}
+  '@oxc-parser/binding-win32-x64-msvc@0.102.0':
+    resolution: {integrity: sha512-ntMcL35wuLR1A145rLSmm7m7j8JBZGkROoB9Du0KFIFcfi/w1qk75BdCeiTl3HAKrreAnuhW3QOGs6mJhntowA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@oxc-project/types@0.110.0':
-    resolution: {integrity: sha512-6Ct21OIlrEnFEJk5LT4e63pk3btsI6/TusD/GStLi7wYlGJNOl1GI9qvXAnRAxQU9zqA2Oz+UwhfTOU2rPZVow==}
+  '@oxc-project/types@0.102.0':
+    resolution: {integrity: sha512-8Skrw405g+/UJPKWJ1twIk3BIH2nXdiVlVNtYT23AXVwpsd79es4K+KYt06Fbnkc5BaTvk/COT2JuCLYdwnCdA==}
 
   '@oxc-project/types@0.122.0':
     resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==}
 
-  '@oxc-transform/binding-android-arm-eabi@0.110.0':
-    resolution: {integrity: sha512-sE9dxvqqAax1YYJ3t7j+h5ZSI9jl6dYuDfngl6ieZUrIy5P89/8JKVgAzgp8o3wQSo7ndpJvYsi1K4ZqrmbP7w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxc-transform/binding-android-arm64@0.110.0':
-    resolution: {integrity: sha512-nqtbP4aMCtsCZ6qpHlHaQoWVHSBtlKzwaAgwEOvR+9DWqHjk31BHvpGiDXlMeed6CVNpl3lCbWgygb3RcSjcfw==}
+  '@oxc-transform/binding-android-arm64@0.102.0':
+    resolution: {integrity: sha512-JLBT7EiExsGmB6LuBBnm6qTfg0rLSxBU+F7xjqy6UXYpL7zhqelGJL7IAq6Pu5UYFT55zVlXXmgzLOXQfpQjXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-transform/binding-darwin-arm64@0.110.0':
-    resolution: {integrity: sha512-oeSeHnL4Z4cMXtc8V0/rwoVn0dgwlS9q0j6LcHn9dIhtFEdp3W0iSBF8YmMQA+E7sILeLDjsHmHE4Kp0sOScXw==}
+  '@oxc-transform/binding-darwin-arm64@0.102.0':
+    resolution: {integrity: sha512-xmsBCk/NwE0khy8h6wLEexiS5abCp1ZqJUNHsAovJdGgIW21oGwhiC3VYg1vNLbq+zEXwOHuphVuNEYfBwyNTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-transform/binding-darwin-x64@0.110.0':
-    resolution: {integrity: sha512-nL9K5x7OuZydobAGPylsEW9d4APs2qEkIBLMgQPA+kY8dtVD3IR87QsTbs4l4DBQYyun/+ay6qVCDlxqxdX2Jg==}
+  '@oxc-transform/binding-darwin-x64@0.102.0':
+    resolution: {integrity: sha512-EhBsiq8hSd5BRjlWACB9MxTUiZT2He1s1b3tRP8k3lB8ZTt6sXnDXIWhxRmmM0h//xe6IJ2HuMlbvjXPo/tATg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-transform/binding-freebsd-x64@0.110.0':
-    resolution: {integrity: sha512-GS29zXXirDQhZEUq8xKJ1azAWMuUy3Ih3W5Bc5ddk12LRthO5wRLFcKIyeHpAXCoXymQ+LmxbMtbPf84GPxouw==}
+  '@oxc-transform/binding-freebsd-x64@0.102.0':
+    resolution: {integrity: sha512-eujvuYf0x7BFgKyFecbXUa2JBEXT4Ss6vmyrrhVdN07jaeJRiobaKAmeNXBkanoWL2KQLELJbSBgs1ykWYTkzg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-transform/binding-linux-arm-gnueabihf@0.110.0':
-    resolution: {integrity: sha512-glzDHak8ISyZJemCUi7RCvzNSl+MQ1ly9RceT2qRufhUsvNZ4C/2QLJ1HJwd2N6E88bO4laYn+RofdRzNnGGEA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-transform/binding-linux-arm-musleabihf@0.110.0':
-    resolution: {integrity: sha512-8JThvgJ2FRoTVfbp7e4wqeZqCZbtudM06SfZmNzND9kPNu/LVYygIR+72RWs+xm4bWkuYHg/islo/boNPtMT5Q==}
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.102.0':
+    resolution: {integrity: sha512-2x7Ro356PHBVp1SS/dOsHBSnrfs5MlPYwhdKg35t6qixt2bv1kzEH0tDmn4TNEbdjOirmvOXoCTEWUvh8A4f4Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-transform/binding-linux-arm64-gnu@0.110.0':
-    resolution: {integrity: sha512-IRh21Ub/g4bkHoErZ0AUWMlWfoZaS0A6EaOVtbcY70RSYIMlrsbjiFwJCzM+b/1DD1rXbH5tsGcH7GweTbfRqg==}
+  '@oxc-transform/binding-linux-arm64-gnu@0.102.0':
+    resolution: {integrity: sha512-Rz/RbPvT4QwcHKIQ/cOt6Lwl4c7AhK2b6whZfyL6oJ7Uz8UiVl1BCwk8thedrB5h+FEykmaPHoriW1hmBev60g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-transform/binding-linux-arm64-musl@0.110.0':
-    resolution: {integrity: sha512-e5JN94/oy+wevk76q+LMr+2klTTcO60uXa+Wkq558Ms7mdF2TvkKFI++d/JeiuIwJLTi/BxQ4qdT5FWcsHM/ug==}
+  '@oxc-transform/binding-linux-arm64-musl@0.102.0':
+    resolution: {integrity: sha512-I08iWABrN7zakn3wuNIBWY3hALQGsDLPQbZT1mXws7tyiQqJNGe49uS0/O50QhX3KXj+mbRGsmjVXLXGJE1CVQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-transform/binding-linux-ppc64-gnu@0.110.0':
-    resolution: {integrity: sha512-Y3/Tnnz1GvDpmv8FXBIKtdZPsdZklOEPdrL6NHrN5i2u54BOkybFaDSptgWF53wOrJlTrcmAVSE6fRKK9XCM2Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxc-transform/binding-linux-riscv64-gnu@0.110.0':
-    resolution: {integrity: sha512-Y0E35iA9/v9jlkNcP6tMJ+ZFOS0rLsWDqG6rU9z+X2R3fBFJBO9UARIK6ngx8upxk81y1TFR2CmBFhupfYdH6Q==}
+  '@oxc-transform/binding-linux-riscv64-gnu@0.102.0':
+    resolution: {integrity: sha512-9+SYW1ARAF6Oj/82ayoqKRe8SI7O1qvzs3Y0kijvhIqAaaZWcFRjI5DToyWRAbnzTtHlMcSllZLXNYdmxBjFxA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-transform/binding-linux-riscv64-musl@0.110.0':
-    resolution: {integrity: sha512-JOUSYFfHjBUs7xp2FHmZHb8eTYD/oEu0NklS6JgUauqnoXZHiTLPLVW2o2uVCqldnabYHcomuwI2iqVFYJNhTw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxc-transform/binding-linux-s390x-gnu@0.110.0':
-    resolution: {integrity: sha512-7blgoXF9D3Ngzb7eun23pNrHJpoV/TtE6LObwlZ3Nmb4oZ6Z+yMvBVaoW68NarbmvNGfZ95zrOjgm6cVETLYBA==}
+  '@oxc-transform/binding-linux-s390x-gnu@0.102.0':
+    resolution: {integrity: sha512-HV9nTyQw0TTKYPu+gBhaJBioomiM9O4LcGXi+s5IylCGG6imP0/U13q/9xJnP267QFmiWWqnnSFcv0QAWCyh8A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-transform/binding-linux-x64-gnu@0.110.0':
-    resolution: {integrity: sha512-YQ2joGWCVDZVEU2cD/r/w49hVjDm/Qu1BvC/7zs8LvprzdLS/HyMXGF2oA0puw0b+AqgYaz3bhwKB2xexHyITQ==}
+  '@oxc-transform/binding-linux-x64-gnu@0.102.0':
+    resolution: {integrity: sha512-4wcZ08mmdFk8OjsnglyeYGu5PW3TDh87AmcMOi7tZJ3cpJjfzwDfY27KTEUx6G880OpjAiF36OFSPwdKTKgp2g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-transform/binding-linux-x64-musl@0.110.0':
-    resolution: {integrity: sha512-fkjr5qE632ULmNgvFXWDR/8668WxERz3tU7TQFp6JebPBneColitjSkdx6VKNVXEoMmQnOvBIGeP5tUNT384oA==}
+  '@oxc-transform/binding-linux-x64-musl@0.102.0':
+    resolution: {integrity: sha512-rUHZSZBw0FUnUgOhL/Rs7xJz9KjH2eFur/0df6Lwq/isgJc/ggtBtFoZ+y4Fb8ON87a3Y2gS2LT7SEctX0XdPQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-transform/binding-openharmony-arm64@0.110.0':
-    resolution: {integrity: sha512-HWH9Zj+lMrdSTqFRCZsvDWMz7OnMjbdGsm3xURXWfRZpuaz0bVvyuZNDQXc4FyyhRDsemICaJbU1bgeIpUJDGw==}
+  '@oxc-transform/binding-openharmony-arm64@0.102.0':
+    resolution: {integrity: sha512-98y4tccTQ/pA+r2KA/MEJIZ7J8TNTJ4aCT4rX8kWK4pGOko2YsfY3Ru9DVHlLDwmVj7wP8Z4JNxdBrAXRvK+0g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-transform/binding-wasm32-wasi@0.110.0':
-    resolution: {integrity: sha512-ejdxHmYfIcHDPhZUe3WklViLt9mDEJE5BzcW7+R1vc5i/5JFA8D0l7NUSsHBJ7FB8Bu9gF+5iMDm6cXGAgaghw==}
+  '@oxc-transform/binding-wasm32-wasi@0.102.0':
+    resolution: {integrity: sha512-M6myOXxHty3L2TJEB1NlJPtQm0c0LmivAxcGv/+DSDadOoB/UnOUbjM8W2Utlh5IYS9ARSOjqHtBiPYLWJ15XA==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-transform/binding-win32-arm64-msvc@0.110.0':
-    resolution: {integrity: sha512-9VTwpXCZs7xkV+mKhQ62dVk7KLnLXtEUxNS2T4nLz3iMl1IJbA4h5oltK0JoobtiUAnbkV53QmMVGW8+Nh3bDQ==}
+  '@oxc-transform/binding-win32-arm64-msvc@0.102.0':
+    resolution: {integrity: sha512-jzaA1lLiMXiJs4r7E0BHRxTPiwAkpoCfSNRr8npK/SqL4UQE4cSz3WDTX5wJWRrN2U+xqsDGefeYzH4reI8sgw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-transform/binding-win32-ia32-msvc@0.110.0':
-    resolution: {integrity: sha512-5y0fzuNON7/F2hh2P94vANFaRPJ/3DI1hVl5rseCT8VUVqOGIjWaza0YS/D1g6t1WwycW2LWDMi2raOKoWU5GQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxc-transform/binding-win32-x64-msvc@0.110.0':
-    resolution: {integrity: sha512-QROrowwlrApI1fEScMknGWKM6GTM/Z2xwMnDqvSaEmzNazBsDUlE08Jasw610hFEsYAVU2K5sp/YaCa9ORdP4A==}
+  '@oxc-transform/binding-win32-x64-msvc@0.102.0':
+    resolution: {integrity: sha512-eYOm6mch+1cP9qlNkMdorfBFY8aEOxY/isqrreLmEWqF/hyXA0SbLKDigTbvh3JFKny/gXlHoCKckqfua4cwtg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -7721,8 +7629,8 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  nuxt@3.21.0:
-    resolution: {integrity: sha512-K3vX68M0lXbqzvehWb+y6/YqAF+m7MEQQ3mtbcm34ynzB6OpFOJoZV9scBzFd5LehLoYl55CSNpY5vsupyJw7Q==}
+  nuxt@3.20.2:
+    resolution: {integrity: sha512-DoayekzYjYmGj7A5iI7crBiLRTq1K8U1DLgAR/vGADh1IQfOLagn5Klg1Jn1xxIyN8x0iiFDf3dGd2JWyiKBLA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -7802,20 +7710,20 @@ packages:
   overlayscrollbars@2.15.1:
     resolution: {integrity: sha512-glX26JwjL+Tkzv0JNOWdW4VozP5dGXO+Wx8+TPrdTEJTSYT/8eJS8yXM+fewjU0nFq/JeCa+X+BqABNjC4YZSA==}
 
-  oxc-minify@0.110.0:
-    resolution: {integrity: sha512-KWGTzPo83QmGrXC4ml83PM9HDwUPtZFfasiclUvTV4i3/0j7xRRqINVkrL77CbQnoWura3CMxkRofjQKVDuhBw==}
+  oxc-minify@0.102.0:
+    resolution: {integrity: sha512-FphAHDyTCNepQbiQTSyWFMbNc9zdUmj1WBsoLwvZhWm7rEe/IeIKYKRhy75lWOjwFsi5/i4Qucq43hgs3n2Exw==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  oxc-parser@0.110.0:
-    resolution: {integrity: sha512-GijUR3K1Ln/QwMyYXRsBtOyzqGaCs9ce5pOug1UtrMg8dSiE7VuuRuIcyYD4nyJbasat3K0YljiKt/PSFPdSBA==}
+  oxc-parser@0.102.0:
+    resolution: {integrity: sha512-xMiyHgr2FZsphQ12ZCsXRvSYzmKXCm1ejmyG4GDZIiKOmhyt5iKtWq0klOfFsEQ6jcgbwrUdwcCVYzr1F+h5og==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  oxc-transform@0.110.0:
-    resolution: {integrity: sha512-/fymQNzzUoKZweH0nC5yvbI2eR0yWYusT9TEKDYVgOgYrf9Qmdez9lUFyvxKR9ycx+PTHi/reIOzqf3wkShQsw==}
+  oxc-transform@0.102.0:
+    resolution: {integrity: sha512-MR5ohiBS6/kvxRpmUZ3LIDTTJBEC4xLAEZXfYr7vrA0eP7WHewQaNQPFDgT4Bee89TdmVQ5ZKrifGwxLjSyHHw==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  oxc-walker@0.7.0:
-    resolution: {integrity: sha512-54B4KUhrzbzc4sKvKwVYm7E2PgeROpGba0/2nlNZMqfDyca+yOor5IMb4WLGBatGDT0nkzYdYuzylg7n3YfB7A==}
+  oxc-walker@0.6.0:
+    resolution: {integrity: sha512-BA3hlxq5+Sgzp7TCQF52XDXCK5mwoIZuIuxv/+JuuTzOs2RXkLqWZgZ69d8pJDDjnL7wiREZTWHBzFp/UWH88Q==}
     peerDependencies:
       oxc-parser: '>=0.98.0'
 
@@ -8718,9 +8626,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rou3@0.7.12:
-    resolution: {integrity: sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg==}
-
   rss@1.2.2:
     resolution: {integrity: sha512-xUhRTgslHeCBeHAqaWSbOYTydN2f0tAzNXvzh3stjz7QDhQMzdgHf3pfgNIngeytQflrFPfy6axHilTETr6gDg==}
 
@@ -9893,8 +9798,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-component-type-helpers@3.3.1:
-    resolution: {integrity: sha512-pu58kqxmVyEH6VfNYW1UyEfR3XAnJ27ZXT3yzXxxpjLxVzAbyC35Zk/nm/RMs7ijWnJNSd9fWkeex2OhUsx3MA==}
+  vue-component-type-helpers@3.3.2:
+    resolution: {integrity: sha512-l4Z2Y34m7nFMlx8vrslJaVtXxUpzgDMSESC7TakG/c5kwjYT/do+E0NcT2/vWDzaoIhsShg/2OKwX7Q4nbzC0g==}
 
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
@@ -10732,11 +10637,11 @@ snapshots:
 
   '@ctrl/tinycolor@4.2.0': {}
 
-  '@dxup/nuxt@0.3.2(magicast@0.5.1)':
+  '@dxup/nuxt@0.2.2(magicast@0.5.1)':
     dependencies:
       '@dxup/unimport': 0.1.2
       '@nuxt/kit': 4.3.0(magicast@0.5.1)
-      chokidar: 5.0.0
+      chokidar: 4.0.3
       pathe: 2.0.3
       tinyglobby: 0.2.15
     transitivePeerDependencies:
@@ -11184,6 +11089,12 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
+  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
+    dependencies:
+      '@eslint/core': 0.17.0
+    optionalDependencies:
+      eslint: 9.39.2(jiti@1.21.7)
+
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -11236,8 +11147,8 @@ snapshots:
       hast-util-to-html: 9.0.5
       hast-util-to-text: 4.0.2
       hastscript: 9.0.1
-      postcss: 8.5.6
-      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss: 8.5.8
+      postcss-nested: 6.2.0(postcss@8.5.8)
       unist-util-visit: 5.1.0
       unist-util-visit-parents: 6.0.2
 
@@ -11650,7 +11561,7 @@ snapshots:
       https-proxy-agent: 7.0.6
       node-fetch: 2.7.0
       nopt: 8.1.0
-      semver: 7.7.3
+      semver: 7.7.4
       tar: 7.5.7
     transitivePeerDependencies:
       - encoding
@@ -11737,7 +11648,7 @@ snapshots:
       perfect-debounce: 2.1.0
       pkg-types: 2.3.0
       scule: 1.3.0
-      semver: 7.7.3
+      semver: 7.7.4
       srvx: 0.10.1
       std-env: 3.10.0
       tinyexec: 1.0.2
@@ -11768,7 +11679,7 @@ snapshots:
       pathe: 2.0.3
       pkg-types: 2.3.0
       prompts: 2.4.2
-      semver: 7.7.3
+      semver: 7.7.4
 
   '@nuxt/devtools@3.1.1(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
@@ -11795,7 +11706,7 @@ snapshots:
       pathe: 2.0.3
       perfect-debounce: 2.1.0
       pkg-types: 2.3.0
-      semver: 7.7.3
+      semver: 7.7.4
       simple-git: 3.30.0
       sirv: 3.0.2
       structured-clone-es: 1.0.0
@@ -11811,6 +11722,31 @@ snapshots:
       - utf-8-validate
       - vue
 
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint/js': 9.39.2
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-flat-config-utils: 0.4.0
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
+      globals: 15.15.0
+      local-pkg: 0.5.1
+      pathe: 1.1.2
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - eslint-import-resolver-node
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
@@ -11836,6 +11772,15 @@ snapshots:
       - supports-color
       - typescript
 
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -11845,6 +11790,32 @@ snapshots:
       - supports-color
       - typescript
 
+  '@nuxt/kit@3.20.2(magicast@0.5.1)':
+    dependencies:
+      c12: 3.3.3(magicast@0.5.1)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.8
+      ignore: 7.0.5
+      jiti: 2.6.1
+      klona: 2.0.6
+      knitwork: 1.3.0
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      ufo: 1.6.3
+      unctx: 2.5.0
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxt/kit@3.21.0(magicast@0.5.1)':
     dependencies:
       c12: 3.3.3(magicast@0.5.1)
@@ -11863,7 +11834,7 @@ snapshots:
       pkg-types: 2.3.0
       rc9: 2.1.2
       scule: 1.3.0
-      semver: 7.7.3
+      semver: 7.7.4
       tinyglobby: 0.2.15
       ufo: 1.6.3
       unctx: 2.5.0
@@ -11888,7 +11859,7 @@ snapshots:
       pkg-types: 2.3.0
       rc9: 2.1.2
       scule: 1.3.0
-      semver: 7.7.3
+      semver: 7.7.4
       tinyglobby: 0.2.15
       ufo: 1.6.3
       unctx: 2.5.0
@@ -11896,10 +11867,10 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/nitro-server@3.21.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)':
+  '@nuxt/nitro-server@3.20.2(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)':
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/kit': 3.21.0(magicast@0.5.1)
+      '@nuxt/kit': 3.20.2(magicast@0.5.1)
       '@unhead/vue': 2.1.2(vue@3.5.27(typescript@5.9.3))
       '@vue/shared': 3.5.27
       consola: 3.4.2
@@ -11914,11 +11885,10 @@ snapshots:
       klona: 2.0.6
       mocked-exports: 0.1.1
       nitropack: 2.13.1(rolldown@1.0.0-rc.12)(xml2js@0.6.2)
-      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
-      ohash: 2.0.11
+      nuxt: 3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       pathe: 2.0.3
       pkg-types: 2.3.0
-      rou3: 0.7.12
+      radix3: 1.1.2
       std-env: 3.10.0
       ufo: 1.6.3
       unctx: 2.5.0
@@ -11961,7 +11931,7 @@ snapshots:
       - uploadthing
       - xml2js
 
-  '@nuxt/schema@3.21.0':
+  '@nuxt/schema@3.20.2':
     dependencies:
       '@vue/shared': 3.5.27
       defu: 6.1.4
@@ -11986,32 +11956,33 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/vite-builder@3.21.0(@types/node@24.12.2)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)':
+  '@nuxt/vite-builder@3.20.2(@types/node@24.12.2)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)':
     dependencies:
-      '@nuxt/kit': 3.21.0(magicast@0.5.1)
+      '@nuxt/kit': 3.20.2(magicast@0.5.1)
       '@rollup/plugin-replace': 6.0.3(rollup@4.57.1)
       '@vitejs/plugin-vue': 6.0.4(vite@7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx': 5.1.4(vite@7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
-      autoprefixer: 10.4.24(postcss@8.5.6)
+      autoprefixer: 10.4.24(postcss@8.5.8)
       consola: 3.4.2
-      cssnano: 7.1.2(postcss@8.5.6)
+      cssnano: 7.1.2(postcss@8.5.8)
       defu: 6.1.4
       esbuild: 0.27.2
       escape-string-regexp: 5.0.0
       exsolve: 1.0.8
       externality: 1.0.2
       get-port-please: 3.2.0
+      h3: 1.15.5
       jiti: 2.6.1
       knitwork: 1.3.0
       magic-string: 0.30.21
       mlly: 1.8.0
       mocked-exports: 0.1.1
-      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+      nuxt: 3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       ohash: 2.0.11
       pathe: 2.0.3
       perfect-debounce: 2.1.0
       pkg-types: 2.3.0
-      postcss: 8.5.6
+      postcss: 8.5.8
       rollup-plugin-visualizer: 6.0.5(rolldown@1.0.0-rc.12)(rollup@4.57.1)
       seroval: 1.5.0
       std-env: 3.10.0
@@ -12364,194 +12335,149 @@ snapshots:
 
   '@oslojs/encoding@1.1.0': {}
 
-  '@oxc-minify/binding-android-arm-eabi@0.110.0':
-    optional: true
-
-  '@oxc-minify/binding-android-arm64@0.110.0':
-    optional: true
-
-  '@oxc-minify/binding-darwin-arm64@0.110.0':
+  '@oxc-minify/binding-android-arm64@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-darwin-x64@0.110.0':
+  '@oxc-minify/binding-darwin-arm64@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-freebsd-x64@0.110.0':
+  '@oxc-minify/binding-darwin-x64@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-arm-gnueabihf@0.110.0':
+  '@oxc-minify/binding-freebsd-x64@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-arm-musleabihf@0.110.0':
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-arm64-gnu@0.110.0':
+  '@oxc-minify/binding-linux-arm64-gnu@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-arm64-musl@0.110.0':
+  '@oxc-minify/binding-linux-arm64-musl@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-ppc64-gnu@0.110.0':
+  '@oxc-minify/binding-linux-riscv64-gnu@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-riscv64-gnu@0.110.0':
+  '@oxc-minify/binding-linux-s390x-gnu@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-riscv64-musl@0.110.0':
+  '@oxc-minify/binding-linux-x64-gnu@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-s390x-gnu@0.110.0':
+  '@oxc-minify/binding-linux-x64-musl@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-x64-gnu@0.110.0':
+  '@oxc-minify/binding-openharmony-arm64@0.102.0':
     optional: true
 
-  '@oxc-minify/binding-linux-x64-musl@0.110.0':
-    optional: true
-
-  '@oxc-minify/binding-openharmony-arm64@0.110.0':
-    optional: true
-
-  '@oxc-minify/binding-wasm32-wasi@0.110.0':
+  '@oxc-minify/binding-wasm32-wasi@0.102.0':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
-  '@oxc-minify/binding-win32-arm64-msvc@0.110.0':
-    optional: true
-
-  '@oxc-minify/binding-win32-ia32-msvc@0.110.0':
-    optional: true
-
-  '@oxc-minify/binding-win32-x64-msvc@0.110.0':
+  '@oxc-minify/binding-win32-arm64-msvc@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-android-arm-eabi@0.110.0':
+  '@oxc-minify/binding-win32-x64-msvc@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-android-arm64@0.110.0':
+  '@oxc-parser/binding-android-arm64@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.110.0':
+  '@oxc-parser/binding-darwin-arm64@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-x64@0.110.0':
+  '@oxc-parser/binding-darwin-x64@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-freebsd-x64@0.110.0':
+  '@oxc-parser/binding-freebsd-x64@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.110.0':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.110.0':
+  '@oxc-parser/binding-linux-arm64-gnu@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.110.0':
+  '@oxc-parser/binding-linux-arm64-musl@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-musl@0.110.0':
+  '@oxc-parser/binding-linux-riscv64-gnu@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.110.0':
+  '@oxc-parser/binding-linux-s390x-gnu@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.110.0':
+  '@oxc-parser/binding-linux-x64-gnu@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.110.0':
+  '@oxc-parser/binding-linux-x64-musl@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.110.0':
+  '@oxc-parser/binding-openharmony-arm64@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-gnu@0.110.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-musl@0.110.0':
-    optional: true
-
-  '@oxc-parser/binding-openharmony-arm64@0.110.0':
-    optional: true
-
-  '@oxc-parser/binding-wasm32-wasi@0.110.0':
+  '@oxc-parser/binding-wasm32-wasi@0.102.0':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.110.0':
-    optional: true
-
-  '@oxc-parser/binding-win32-ia32-msvc@0.110.0':
+  '@oxc-parser/binding-win32-arm64-msvc@0.102.0':
     optional: true
 
-  '@oxc-parser/binding-win32-x64-msvc@0.110.0':
+  '@oxc-parser/binding-win32-x64-msvc@0.102.0':
     optional: true
 
-  '@oxc-project/types@0.110.0': {}
+  '@oxc-project/types@0.102.0': {}
 
   '@oxc-project/types@0.122.0': {}
 
-  '@oxc-transform/binding-android-arm-eabi@0.110.0':
-    optional: true
-
-  '@oxc-transform/binding-android-arm64@0.110.0':
-    optional: true
-
-  '@oxc-transform/binding-darwin-arm64@0.110.0':
-    optional: true
-
-  '@oxc-transform/binding-darwin-x64@0.110.0':
+  '@oxc-transform/binding-android-arm64@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-freebsd-x64@0.110.0':
+  '@oxc-transform/binding-darwin-arm64@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-arm-gnueabihf@0.110.0':
+  '@oxc-transform/binding-darwin-x64@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-arm-musleabihf@0.110.0':
+  '@oxc-transform/binding-freebsd-x64@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-arm64-gnu@0.110.0':
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-arm64-musl@0.110.0':
+  '@oxc-transform/binding-linux-arm64-gnu@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-ppc64-gnu@0.110.0':
+  '@oxc-transform/binding-linux-arm64-musl@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-riscv64-gnu@0.110.0':
+  '@oxc-transform/binding-linux-riscv64-gnu@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-riscv64-musl@0.110.0':
+  '@oxc-transform/binding-linux-s390x-gnu@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-s390x-gnu@0.110.0':
+  '@oxc-transform/binding-linux-x64-gnu@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-x64-gnu@0.110.0':
+  '@oxc-transform/binding-linux-x64-musl@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-linux-x64-musl@0.110.0':
+  '@oxc-transform/binding-openharmony-arm64@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-openharmony-arm64@0.110.0':
-    optional: true
-
-  '@oxc-transform/binding-wasm32-wasi@0.110.0':
+  '@oxc-transform/binding-wasm32-wasi@0.102.0':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
-  '@oxc-transform/binding-win32-arm64-msvc@0.110.0':
-    optional: true
-
-  '@oxc-transform/binding-win32-ia32-msvc@0.110.0':
+  '@oxc-transform/binding-win32-arm64-msvc@0.102.0':
     optional: true
 
-  '@oxc-transform/binding-win32-x64-msvc@0.110.0':
+  '@oxc-transform/binding-win32-x64-msvc@0.102.0':
     optional: true
 
   '@pagefind/darwin-arm64@1.4.0':
@@ -12607,7 +12533,7 @@ snapshots:
   '@parcel/watcher-wasm@2.5.6':
     dependencies:
       is-glob: 4.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   '@parcel/watcher-win32-arm64@2.5.6':
     optional: true
@@ -12790,10 +12716,10 @@ snapshots:
       '@rollup/pluginutils': 5.3.0(rollup@4.57.1)
       commondir: 1.0.1
       estree-walker: 2.0.2
-      fdir: 6.5.0(picomatch@4.0.3)
+      fdir: 6.5.0(picomatch@4.0.4)
       is-reference: 1.2.1
       magic-string: 0.30.21
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       rollup: 4.57.1
 
@@ -13101,7 +13027,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sentry/nuxt@10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))':
+  '@sentry/nuxt@10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 3.21.0(magicast@0.5.1)
       '@sentry/browser': 10.38.0
@@ -13112,7 +13038,7 @@ snapshots:
       '@sentry/rollup-plugin': 4.9.0(rollup@4.57.1)
       '@sentry/vite-plugin': 4.9.0
       '@sentry/vue': 10.38.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
-      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+      nuxt: 3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@cloudflare/workers-types'
       - '@opentelemetry/api'
@@ -13306,10 +13232,22 @@ snapshots:
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.27(typescript@5.9.3)
-      vue-component-type-helpers: 3.3.1
+      vue-component-type-helpers: 3.3.2
 
   '@stripe/stripe-js@7.9.0': {}
 
+  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -13722,6 +13660,22 @@ snapshots:
     dependencies:
       '@types/node': 24.12.2
 
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -13738,6 +13692,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -13768,6 +13734,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13790,7 +13768,7 @@ snapshots:
       '@typescript-eslint/visitor-keys': 8.54.0
       debug: 4.4.3
       minimatch: 9.0.5
-      semver: 7.7.3
+      semver: 7.7.4
       tinyglobby: 0.2.15
       ts-api-utils: 2.4.0(typescript@5.9.3)
       typescript: 5.9.3
@@ -13903,7 +13881,7 @@ snapshots:
       glob: 13.0.1
       graceful-fs: 4.2.11
       node-gyp-build: 4.8.4
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       resolve-from: 5.0.0
     transitivePeerDependencies:
       - encoding
@@ -13920,7 +13898,7 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
       '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
-      '@rolldown/pluginutils': 1.0.0-rc.2
+      '@rolldown/pluginutils': 1.0.0-rc.12
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.0)
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
@@ -13938,6 +13916,12 @@ snapshots:
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
+  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-rc.2
+      vite: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vue: 3.5.27(typescript@5.9.3)
+
   '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
@@ -14292,7 +14276,7 @@ snapshots:
       alien-signals: 3.1.2
       muggle-string: 0.4.1
       path-browserify: 1.0.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   '@vue/reactivity@3.5.27':
     dependencies:
@@ -14667,6 +14651,15 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
+  autoprefixer@10.4.24(postcss@8.5.8):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001767
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.8
+      postcss-value-parser: 4.2.0
+
   axe-core@4.11.1: {}
 
   axios@1.16.1:
@@ -15045,9 +15038,9 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
-  css-declaration-sorter@7.3.1(postcss@8.5.6):
+  css-declaration-sorter@7.3.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
 
   css-select@5.2.2:
     dependencies:
@@ -15082,49 +15075,49 @@ snapshots:
 
   cssfilter@0.0.10: {}
 
-  cssnano-preset-default@7.0.10(postcss@8.5.6):
+  cssnano-preset-default@7.0.10(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
-      css-declaration-sorter: 7.3.1(postcss@8.5.6)
-      cssnano-utils: 5.0.1(postcss@8.5.6)
-      postcss: 8.5.6
-      postcss-calc: 10.1.1(postcss@8.5.6)
-      postcss-colormin: 7.0.5(postcss@8.5.6)
-      postcss-convert-values: 7.0.8(postcss@8.5.6)
-      postcss-discard-comments: 7.0.5(postcss@8.5.6)
-      postcss-discard-duplicates: 7.0.2(postcss@8.5.6)
-      postcss-discard-empty: 7.0.1(postcss@8.5.6)
-      postcss-discard-overridden: 7.0.1(postcss@8.5.6)
-      postcss-merge-longhand: 7.0.5(postcss@8.5.6)
-      postcss-merge-rules: 7.0.7(postcss@8.5.6)
-      postcss-minify-font-values: 7.0.1(postcss@8.5.6)
-      postcss-minify-gradients: 7.0.1(postcss@8.5.6)
-      postcss-minify-params: 7.0.5(postcss@8.5.6)
-      postcss-minify-selectors: 7.0.5(postcss@8.5.6)
-      postcss-normalize-charset: 7.0.1(postcss@8.5.6)
-      postcss-normalize-display-values: 7.0.1(postcss@8.5.6)
-      postcss-normalize-positions: 7.0.1(postcss@8.5.6)
-      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.6)
-      postcss-normalize-string: 7.0.1(postcss@8.5.6)
-      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.6)
-      postcss-normalize-unicode: 7.0.5(postcss@8.5.6)
-      postcss-normalize-url: 7.0.1(postcss@8.5.6)
-      postcss-normalize-whitespace: 7.0.1(postcss@8.5.6)
-      postcss-ordered-values: 7.0.2(postcss@8.5.6)
-      postcss-reduce-initial: 7.0.5(postcss@8.5.6)
-      postcss-reduce-transforms: 7.0.1(postcss@8.5.6)
-      postcss-svgo: 7.1.0(postcss@8.5.6)
-      postcss-unique-selectors: 7.0.4(postcss@8.5.6)
-
-  cssnano-utils@5.0.1(postcss@8.5.6):
+      css-declaration-sorter: 7.3.1(postcss@8.5.8)
+      cssnano-utils: 5.0.1(postcss@8.5.8)
+      postcss: 8.5.8
+      postcss-calc: 10.1.1(postcss@8.5.8)
+      postcss-colormin: 7.0.5(postcss@8.5.8)
+      postcss-convert-values: 7.0.8(postcss@8.5.8)
+      postcss-discard-comments: 7.0.5(postcss@8.5.8)
+      postcss-discard-duplicates: 7.0.2(postcss@8.5.8)
+      postcss-discard-empty: 7.0.1(postcss@8.5.8)
+      postcss-discard-overridden: 7.0.1(postcss@8.5.8)
+      postcss-merge-longhand: 7.0.5(postcss@8.5.8)
+      postcss-merge-rules: 7.0.7(postcss@8.5.8)
+      postcss-minify-font-values: 7.0.1(postcss@8.5.8)
+      postcss-minify-gradients: 7.0.1(postcss@8.5.8)
+      postcss-minify-params: 7.0.5(postcss@8.5.8)
+      postcss-minify-selectors: 7.0.5(postcss@8.5.8)
+      postcss-normalize-charset: 7.0.1(postcss@8.5.8)
+      postcss-normalize-display-values: 7.0.1(postcss@8.5.8)
+      postcss-normalize-positions: 7.0.1(postcss@8.5.8)
+      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.8)
+      postcss-normalize-string: 7.0.1(postcss@8.5.8)
+      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.8)
+      postcss-normalize-unicode: 7.0.5(postcss@8.5.8)
+      postcss-normalize-url: 7.0.1(postcss@8.5.8)
+      postcss-normalize-whitespace: 7.0.1(postcss@8.5.8)
+      postcss-ordered-values: 7.0.2(postcss@8.5.8)
+      postcss-reduce-initial: 7.0.5(postcss@8.5.8)
+      postcss-reduce-transforms: 7.0.1(postcss@8.5.8)
+      postcss-svgo: 7.1.0(postcss@8.5.8)
+      postcss-unique-selectors: 7.0.4(postcss@8.5.8)
+
+  cssnano-utils@5.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
 
-  cssnano@7.1.2(postcss@8.5.6):
+  cssnano@7.1.2(postcss@8.5.8):
     dependencies:
-      cssnano-preset-default: 7.0.10(postcss@8.5.6)
+      cssnano-preset-default: 7.0.10(postcss@8.5.8)
       lilconfig: 3.1.3
-      postcss: 8.5.6
+      postcss: 8.5.8
 
   csso@5.0.5:
     dependencies:
@@ -15261,7 +15254,7 @@ snapshots:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.1
-      semver: 7.7.3
+      semver: 7.7.4
 
   ee-first@1.1.1: {}
 
@@ -15496,6 +15489,12 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
+  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      find-up-simple: 1.0.1
+
   eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
@@ -15517,6 +15516,23 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      comment-parser: 1.4.5
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 10.1.2
+      semver: 7.7.4
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -15534,6 +15550,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.50.2
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.39.2(jiti@1.21.7)
+      espree: 10.4.0
+      esquery: 1.7.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.4
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
@@ -15559,6 +15591,17 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/regexpp': 4.12.2
+      comment-parser: 1.4.5
+      eslint: 9.39.2(jiti@1.21.7)
+      jsdoc-type-pratt-parser: 4.8.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
   eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -15574,21 +15617,47 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
+  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
+    dependencies:
+      dotenv: 16.0.3
+      eslint: 9.39.2(jiti@1.21.7)
+      turbo: 2.8.2
+
   eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
       eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.8.2
 
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      ci-info: 4.4.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.48.0
+      eslint: 9.39.2(jiti@1.21.7)
+      esquery: 1.7.0
+      globals: 15.15.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.1
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.27
+      regjsparser: 0.10.0
+      semver: 7.7.4
+      strip-indent: 3.0.0
+
   eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -15623,6 +15692,20 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
+  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.4
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -17620,7 +17703,7 @@ snapshots:
       rollup: 4.57.1
       rollup-plugin-visualizer: 6.0.5(rolldown@1.0.0-rc.12)(rollup@4.57.1)
       scule: 1.3.0
-      semver: 7.7.3
+      semver: 7.7.4
       serve-placeholder: 2.0.2
       serve-static: 2.2.1
       source-map: 0.7.6
@@ -17728,16 +17811,16 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2):
+  nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2):
     dependencies:
-      '@dxup/nuxt': 0.3.2(magicast@0.5.1)
+      '@dxup/nuxt': 0.2.2(magicast@0.5.1)
       '@nuxt/cli': 3.32.0(cac@6.7.14)(magicast@0.5.1)
       '@nuxt/devtools': 3.1.1(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
-      '@nuxt/kit': 3.21.0(magicast@0.5.1)
-      '@nuxt/nitro-server': 3.21.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)
-      '@nuxt/schema': 3.21.0
+      '@nuxt/kit': 3.20.2(magicast@0.5.1)
+      '@nuxt/nitro-server': 3.20.2(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)
+      '@nuxt/schema': 3.20.2
       '@nuxt/telemetry': 2.6.6(magicast@0.5.1)
-      '@nuxt/vite-builder': 3.21.0(@types/node@24.12.2)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)
+      '@nuxt/vite-builder': 3.20.2(@types/node@24.12.2)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)
       '@unhead/vue': 2.1.2(vue@3.5.27(typescript@5.9.3))
       '@vue/shared': 3.5.27
       c12: 3.3.3(magicast@0.5.1)
@@ -17765,16 +17848,16 @@ snapshots:
       ofetch: 1.5.1
       ohash: 2.0.11
       on-change: 6.0.2
-      oxc-minify: 0.110.0
-      oxc-parser: 0.110.0
-      oxc-transform: 0.110.0
-      oxc-walker: 0.7.0(oxc-parser@0.110.0)
+      oxc-minify: 0.102.0
+      oxc-parser: 0.102.0
+      oxc-transform: 0.102.0
+      oxc-walker: 0.6.0(oxc-parser@0.102.0)
       pathe: 2.0.3
       perfect-debounce: 2.1.0
       pkg-types: 2.3.0
-      rou3: 0.7.12
+      radix3: 1.1.2
       scule: 1.3.0
-      semver: 7.7.3
+      semver: 7.7.4
       std-env: 3.10.0
       tinyglobby: 0.2.15
       ufo: 1.6.3
@@ -17927,81 +18010,66 @@ snapshots:
 
   overlayscrollbars@2.15.1: {}
 
-  oxc-minify@0.110.0:
+  oxc-minify@0.102.0:
     optionalDependencies:
-      '@oxc-minify/binding-android-arm-eabi': 0.110.0
-      '@oxc-minify/binding-android-arm64': 0.110.0
-      '@oxc-minify/binding-darwin-arm64': 0.110.0
-      '@oxc-minify/binding-darwin-x64': 0.110.0
-      '@oxc-minify/binding-freebsd-x64': 0.110.0
-      '@oxc-minify/binding-linux-arm-gnueabihf': 0.110.0
-      '@oxc-minify/binding-linux-arm-musleabihf': 0.110.0
-      '@oxc-minify/binding-linux-arm64-gnu': 0.110.0
-      '@oxc-minify/binding-linux-arm64-musl': 0.110.0
-      '@oxc-minify/binding-linux-ppc64-gnu': 0.110.0
-      '@oxc-minify/binding-linux-riscv64-gnu': 0.110.0
-      '@oxc-minify/binding-linux-riscv64-musl': 0.110.0
-      '@oxc-minify/binding-linux-s390x-gnu': 0.110.0
-      '@oxc-minify/binding-linux-x64-gnu': 0.110.0
-      '@oxc-minify/binding-linux-x64-musl': 0.110.0
-      '@oxc-minify/binding-openharmony-arm64': 0.110.0
-      '@oxc-minify/binding-wasm32-wasi': 0.110.0
-      '@oxc-minify/binding-win32-arm64-msvc': 0.110.0
-      '@oxc-minify/binding-win32-ia32-msvc': 0.110.0
-      '@oxc-minify/binding-win32-x64-msvc': 0.110.0
-
-  oxc-parser@0.110.0:
-    dependencies:
-      '@oxc-project/types': 0.110.0
+      '@oxc-minify/binding-android-arm64': 0.102.0
+      '@oxc-minify/binding-darwin-arm64': 0.102.0
+      '@oxc-minify/binding-darwin-x64': 0.102.0
+      '@oxc-minify/binding-freebsd-x64': 0.102.0
+      '@oxc-minify/binding-linux-arm-gnueabihf': 0.102.0
+      '@oxc-minify/binding-linux-arm64-gnu': 0.102.0
+      '@oxc-minify/binding-linux-arm64-musl': 0.102.0
+      '@oxc-minify/binding-linux-riscv64-gnu': 0.102.0
+      '@oxc-minify/binding-linux-s390x-gnu': 0.102.0
+      '@oxc-minify/binding-linux-x64-gnu': 0.102.0
+      '@oxc-minify/binding-linux-x64-musl': 0.102.0
+      '@oxc-minify/binding-openharmony-arm64': 0.102.0
+      '@oxc-minify/binding-wasm32-wasi': 0.102.0
+      '@oxc-minify/binding-win32-arm64-msvc': 0.102.0
+      '@oxc-minify/binding-win32-x64-msvc': 0.102.0
+
+  oxc-parser@0.102.0:
+    dependencies:
+      '@oxc-project/types': 0.102.0
     optionalDependencies:
-      '@oxc-parser/binding-android-arm-eabi': 0.110.0
-      '@oxc-parser/binding-android-arm64': 0.110.0
-      '@oxc-parser/binding-darwin-arm64': 0.110.0
-      '@oxc-parser/binding-darwin-x64': 0.110.0
-      '@oxc-parser/binding-freebsd-x64': 0.110.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.110.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.110.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.110.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.110.0
-      '@oxc-parser/binding-linux-ppc64-gnu': 0.110.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.110.0
-      '@oxc-parser/binding-linux-riscv64-musl': 0.110.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.110.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.110.0
-      '@oxc-parser/binding-linux-x64-musl': 0.110.0
-      '@oxc-parser/binding-openharmony-arm64': 0.110.0
-      '@oxc-parser/binding-wasm32-wasi': 0.110.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.110.0
-      '@oxc-parser/binding-win32-ia32-msvc': 0.110.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.110.0
-
-  oxc-transform@0.110.0:
+      '@oxc-parser/binding-android-arm64': 0.102.0
+      '@oxc-parser/binding-darwin-arm64': 0.102.0
+      '@oxc-parser/binding-darwin-x64': 0.102.0
+      '@oxc-parser/binding-freebsd-x64': 0.102.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.102.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.102.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.102.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.102.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.102.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.102.0
+      '@oxc-parser/binding-linux-x64-musl': 0.102.0
+      '@oxc-parser/binding-openharmony-arm64': 0.102.0
+      '@oxc-parser/binding-wasm32-wasi': 0.102.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.102.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.102.0
+
+  oxc-transform@0.102.0:
     optionalDependencies:
-      '@oxc-transform/binding-android-arm-eabi': 0.110.0
-      '@oxc-transform/binding-android-arm64': 0.110.0
-      '@oxc-transform/binding-darwin-arm64': 0.110.0
-      '@oxc-transform/binding-darwin-x64': 0.110.0
-      '@oxc-transform/binding-freebsd-x64': 0.110.0
-      '@oxc-transform/binding-linux-arm-gnueabihf': 0.110.0
-      '@oxc-transform/binding-linux-arm-musleabihf': 0.110.0
-      '@oxc-transform/binding-linux-arm64-gnu': 0.110.0
-      '@oxc-transform/binding-linux-arm64-musl': 0.110.0
-      '@oxc-transform/binding-linux-ppc64-gnu': 0.110.0
-      '@oxc-transform/binding-linux-riscv64-gnu': 0.110.0
-      '@oxc-transform/binding-linux-riscv64-musl': 0.110.0
-      '@oxc-transform/binding-linux-s390x-gnu': 0.110.0
-      '@oxc-transform/binding-linux-x64-gnu': 0.110.0
-      '@oxc-transform/binding-linux-x64-musl': 0.110.0
-      '@oxc-transform/binding-openharmony-arm64': 0.110.0
-      '@oxc-transform/binding-wasm32-wasi': 0.110.0
-      '@oxc-transform/binding-win32-arm64-msvc': 0.110.0
-      '@oxc-transform/binding-win32-ia32-msvc': 0.110.0
-      '@oxc-transform/binding-win32-x64-msvc': 0.110.0
-
-  oxc-walker@0.7.0(oxc-parser@0.110.0):
+      '@oxc-transform/binding-android-arm64': 0.102.0
+      '@oxc-transform/binding-darwin-arm64': 0.102.0
+      '@oxc-transform/binding-darwin-x64': 0.102.0
+      '@oxc-transform/binding-freebsd-x64': 0.102.0
+      '@oxc-transform/binding-linux-arm-gnueabihf': 0.102.0
+      '@oxc-transform/binding-linux-arm64-gnu': 0.102.0
+      '@oxc-transform/binding-linux-arm64-musl': 0.102.0
+      '@oxc-transform/binding-linux-riscv64-gnu': 0.102.0
+      '@oxc-transform/binding-linux-s390x-gnu': 0.102.0
+      '@oxc-transform/binding-linux-x64-gnu': 0.102.0
+      '@oxc-transform/binding-linux-x64-musl': 0.102.0
+      '@oxc-transform/binding-openharmony-arm64': 0.102.0
+      '@oxc-transform/binding-wasm32-wasi': 0.102.0
+      '@oxc-transform/binding-win32-arm64-msvc': 0.102.0
+      '@oxc-transform/binding-win32-x64-msvc': 0.102.0
+
+  oxc-walker@0.6.0(oxc-parser@0.102.0):
     dependencies:
       magic-regexp: 0.10.0
-      oxc-parser: 0.110.0
+      oxc-parser: 0.102.0
 
   p-finally@1.0.0: {}
 
@@ -18198,42 +18266,42 @@ snapshots:
 
   pluralize@8.0.0: {}
 
-  postcss-calc@10.1.1(postcss@8.5.6):
+  postcss-calc@10.1.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@7.0.5(postcss@8.5.6):
+  postcss-colormin@7.0.5(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@7.0.8(postcss@8.5.6):
+  postcss-convert-values@7.0.8(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-discard-comments@7.0.5(postcss@8.5.6):
+  postcss-discard-comments@7.0.5(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-selector-parser: 7.1.1
 
-  postcss-discard-duplicates@7.0.2(postcss@8.5.6):
+  postcss-discard-duplicates@7.0.2(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
 
-  postcss-discard-empty@7.0.1(postcss@8.5.6):
+  postcss-discard-empty@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
 
-  postcss-discard-overridden@7.0.1(postcss@8.5.6):
+  postcss-discard-overridden@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
 
   postcss-import@15.1.0(postcss@8.5.6):
     dependencies:
@@ -18255,43 +18323,43 @@ snapshots:
       postcss: 8.5.6
       yaml: 2.8.2
 
-  postcss-merge-longhand@7.0.5(postcss@8.5.6):
+  postcss-merge-longhand@7.0.5(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
-      stylehacks: 7.0.7(postcss@8.5.6)
+      stylehacks: 7.0.7(postcss@8.5.8)
 
-  postcss-merge-rules@7.0.7(postcss@8.5.6):
+  postcss-merge-rules@7.0.7(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
       caniuse-api: 3.0.0
-      cssnano-utils: 5.0.1(postcss@8.5.6)
-      postcss: 8.5.6
+      cssnano-utils: 5.0.1(postcss@8.5.8)
+      postcss: 8.5.8
       postcss-selector-parser: 7.1.1
 
-  postcss-minify-font-values@7.0.1(postcss@8.5.6):
+  postcss-minify-font-values@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@7.0.1(postcss@8.5.6):
+  postcss-minify-gradients@7.0.1(postcss@8.5.8):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 5.0.1(postcss@8.5.6)
-      postcss: 8.5.6
+      cssnano-utils: 5.0.1(postcss@8.5.8)
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@7.0.5(postcss@8.5.6):
+  postcss-minify-params@7.0.5(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
-      cssnano-utils: 5.0.1(postcss@8.5.6)
-      postcss: 8.5.6
+      cssnano-utils: 5.0.1(postcss@8.5.8)
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-minify-selectors@7.0.5(postcss@8.5.6):
+  postcss-minify-selectors@7.0.5(postcss@8.5.8):
     dependencies:
       cssesc: 3.0.0
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-selector-parser: 7.1.1
 
   postcss-nested@6.2.0(postcss@8.5.6):
@@ -18299,66 +18367,71 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 6.1.2
 
-  postcss-normalize-charset@7.0.1(postcss@8.5.6):
+  postcss-nested@6.2.0(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
+      postcss-selector-parser: 6.1.2
 
-  postcss-normalize-display-values@7.0.1(postcss@8.5.6):
+  postcss-normalize-charset@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
+
+  postcss-normalize-display-values@7.0.1(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@7.0.1(postcss@8.5.6):
+  postcss-normalize-positions@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@7.0.1(postcss@8.5.6):
+  postcss-normalize-repeat-style@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@7.0.1(postcss@8.5.6):
+  postcss-normalize-string@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@7.0.1(postcss@8.5.6):
+  postcss-normalize-timing-functions@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@7.0.5(postcss@8.5.6):
+  postcss-normalize-unicode@7.0.5(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@7.0.1(postcss@8.5.6):
+  postcss-normalize-url@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@7.0.1(postcss@8.5.6):
+  postcss-normalize-whitespace@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@7.0.2(postcss@8.5.6):
+  postcss-ordered-values@7.0.2(postcss@8.5.8):
     dependencies:
-      cssnano-utils: 5.0.1(postcss@8.5.6)
-      postcss: 8.5.6
+      cssnano-utils: 5.0.1(postcss@8.5.8)
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-initial@7.0.5(postcss@8.5.6):
+  postcss-reduce-initial@7.0.5(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
       caniuse-api: 3.0.0
-      postcss: 8.5.6
+      postcss: 8.5.8
 
-  postcss-reduce-transforms@7.0.1(postcss@8.5.6):
+  postcss-reduce-transforms@7.0.1(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
   postcss-selector-parser@6.1.2:
@@ -18371,15 +18444,15 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-svgo@7.1.0(postcss@8.5.6):
+  postcss-svgo@7.1.0(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
       svgo: 4.0.0
 
-  postcss-unique-selectors@7.0.4(postcss@8.5.6):
+  postcss-unique-selectors@7.0.4(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-selector-parser: 7.1.1
 
   postcss-value-parser@4.2.0: {}
@@ -18937,7 +19010,7 @@ snapshots:
   rollup-plugin-visualizer@6.0.5(rolldown@1.0.0-rc.12)(rollup@4.57.1):
     dependencies:
       open: 8.4.2
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
@@ -18975,8 +19048,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.57.1
       fsevents: 2.3.3
 
-  rou3@0.7.12: {}
-
   rss@1.2.2:
     dependencies:
       mime-types: 2.1.13
@@ -19100,7 +19171,7 @@ snapshots:
     dependencies:
       '@img/colour': 1.0.0
       detect-libc: 2.1.2
-      semver: 7.7.3
+      semver: 7.7.4
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.34.5
       '@img/sharp-darwin-x64': 0.34.5
@@ -19403,10 +19474,10 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
-  stylehacks@7.0.7(postcss@8.5.6):
+  stylehacks@7.0.7(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-selector-parser: 7.1.1
 
   sucrase@3.35.1:
@@ -19654,7 +19725,7 @@ snapshots:
 
   typescript-auto-import-cache@0.3.6:
     dependencies:
-      semver: 7.7.3
+      semver: 7.7.4
 
   typescript-eslint@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
@@ -19727,7 +19798,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.0
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       pkg-types: 2.3.0
       scule: 1.3.0
       strip-literal: 3.1.0
@@ -19784,12 +19855,12 @@ snapshots:
   unplugin-utils@0.2.5:
     dependencies:
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   unplugin-vue-router@0.19.2(@vue/compiler-sfc@3.5.27)(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -19805,7 +19876,7 @@ snapshots:
       mlly: 1.8.0
       muggle-string: 0.4.1
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       scule: 1.3.0
       tinyglobby: 0.2.15
       unplugin: 2.3.11
@@ -19827,7 +19898,7 @@ snapshots:
     dependencies:
       '@jridgewell/remapping': 2.3.5
       acorn: 8.15.0
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       webpack-virtual-modules: 0.6.2
 
   unrs-resolver@1.11.1:
@@ -19967,7 +20038,7 @@ snapshots:
       chokidar: 4.0.3
       npm-run-path: 6.0.0
       picocolors: 1.1.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.15
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
@@ -20042,9 +20113,9 @@ snapshots:
   vite@7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.2
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.8
       rollup: 4.57.1
       tinyglobby: 0.2.15
     optionalDependencies:
@@ -20056,6 +20127,22 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
+  vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.8
+      rolldown: 1.0.0-rc.12
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.12.2
+      esbuild: 0.27.3
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      sass: 1.97.3
+      terser: 5.46.0
+      yaml: 2.8.2
+
   vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -20119,7 +20206,7 @@ snapshots:
   volar-service-typescript@0.0.68(@volar/language-service@2.4.28):
     dependencies:
       path-browserify: 1.0.1
-      semver: 7.7.3
+      semver: 7.7.4
       typescript-auto-import-cache: 0.3.6
       vscode-languageserver-textdocument: 1.0.12
       vscode-nls: 5.2.0
@@ -20192,7 +20279,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-component-type-helpers@3.3.1: {}
+  vue-component-type-helpers@3.3.2: {}
 
   vue-confetti-explosion@1.0.2(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -20232,6 +20319,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.7.0
+      lodash: 4.17.23
+      semver: 7.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3