diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index c7561a588b..2352839df3 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -28,17 +28,18 @@
 		"@tauri-apps/plugin-updater": "^2.7.1",
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
-		"intl-messageformat": "^10.7.7",
-		"vue-i18n": "^10.0.0",
 		"@vueuse/core": "^11.1.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
+		"fuse.js": "^6.6.2",
+		"intl-messageformat": "^10.7.7",
 		"ofetch": "^1.3.4",
 		"pinia": "^3.0.0",
 		"posthog-js": "^1.158.2",
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue": "^3.5.13",
+		"vue-i18n": "^10.0.0",
 		"vue-multiselect": "3.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"
diff --git a/apps/app-frontend/src/pages/instance/Mods.vue b/apps/app-frontend/src/pages/instance/Mods.vue
index e91b43f0bd..6c915c63a4 100644
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -1,241 +1,228 @@
 <template>
-	<div>
-		<template v-if="projects?.length > 0">
-			<div class="flex items-center gap-2 mb-4">
-				<div class="iconified-input flex-grow">
-					<SearchIcon />
+	<div class="flex flex-col gap-4">
+		<!-- Loading state -->
+		<div
+			v-if="loading"
+			class="flex min-h-[50vh] w-full flex-col items-center justify-center gap-2 text-center text-secondary"
+		>
+			<SpinnerIcon class="animate-spin" />
+			Loading content...
+		</div>
+
+		<!-- Content loaded -->
+		<template v-else-if="projects.length > 0">
+			<!-- Search + Add Content row -->
+			<div class="flex flex-col gap-2 lg:flex-row lg:items-center">
+				<div class="iconified-input flex-1 lg:max-w-lg">
+					<SearchIcon aria-hidden="true" class="text-lg" />
 					<input
-						v-model="searchFilter"
-						type="text"
-						:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
-						class="text-input search-input"
+						v-model="searchQuery"
+						class="!h-10"
 						autocomplete="off"
+						spellcheck="false"
+						type="text"
+						:placeholder="`Search ${projects.length} project${projects.length === 1 ? '' : 's'}...`"
 					/>
-					<Button class="r-btn" @click="() => (searchFilter = '')">
-						<XIcon />
-					</Button>
+					<ButtonStyled v-if="searchQuery" circular type="transparent" class="r-btn">
+						<button @click="searchQuery = ''">
+							<XIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<div class="flex gap-2">
+					<ButtonStyled color="brand">
+						<button class="!h-10 flex items-center gap-2" @click="handleBrowseContent">
+							<CompassIcon class="size-5" />
+							<span>Browse content</span>
+						</button>
+					</ButtonStyled>
+					<ButtonStyled type="outlined">
+						<button class="!h-10 !border-button-bg !border-[1px]" @click="handleUploadFiles">
+							<FolderOpenIcon class="size-5" />
+							Upload files
+						</button>
+					</ButtonStyled>
 				</div>
-				<AddContentButton :instance="instance" />
 			</div>
-			<div class="flex items-center justify-between">
-				<div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
-					<FilterIcon class="text-secondary h-5 w-5 mr-1" />
+
+			<!-- Filter + Sort row -->
+			<div class="flex flex-col justify-between gap-2 lg:flex-row lg:items-center">
+				<div class="flex flex-wrap items-center gap-1.5">
+					<FilterIcon class="size-5 text-secondary" />
+					<button
+						class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors"
+						:class="
+							selectedFilters.length === 0
+								? 'border-green bg-brand-highlight text-brand'
+								: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5'
+						"
+						@click="selectedFilters = []"
+					>
+						All
+					</button>
 					<button
-						v-for="filter in filterOptions"
-						:key="`content-filter-${filter.id}`"
-						:class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
-						@click="toggleArray(selectedFilters, filter.id)"
+						v-for="option in filterOptions"
+						:key="option.id"
+						class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors duration-200"
+						:class="
+							selectedFilters.includes(option.id)
+								? 'border-green bg-brand-highlight text-brand'
+								: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5'
+						"
+						@click="toggleFilter(option.id)"
 					>
-						{{ filter.formattedName }}
+						{{ option.label }}
 					</button>
 				</div>
-				<Pagination
-					v-if="search.length > 0"
-					:page="currentPage"
-					:count="Math.ceil(search.length / 20)"
-					:link-function="(page) => `?page=${page}`"
-					@switch-page="(page) => (currentPage = page)"
-				/>
-			</div>
-
-			<ContentListPanel
-				v-model="selectedFiles"
-				:locked="isPackLocked"
-				:items="
-					search.map((x) => {
-						const item: ContentItem<any> = {
-							path: x.path,
-							disabled: x.disabled,
-							filename: x.file_name,
-							icon: x.icon ?? undefined,
-							title: x.name,
-							data: x,
-						}
-
-						if (x.version) {
-							item.version = x.version
-							item.versionId = x.version
-						}
-
-						if (x.id) {
-							item.project = {
-								id: x.id,
-								link: {
-									path: `/project/${x.id}`,
-									query: { i: props.instance.path },
-								},
-								linkProps: {},
-							}
-						}
-
-						if (x.author) {
-							item.creator = {
-								name: x.author.name,
-								type: x.author.type,
-								id: x.author.slug,
-								link: `https://modrinth.com/${x.author.type}/${x.author.slug}`,
-								linkProps: { target: '_blank' },
-							}
-						}
 
-						return item
-					})
-				"
-				:sort-column="sortColumn"
-				:sort-ascending="ascending"
-				:update-sort="sortProjects"
-				:current-page="currentPage"
-			>
-				<template v-if="selectedProjects.length > 0" #headers>
-					<div class="flex gap-2">
-						<ButtonStyled
-							v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
-							color="brand"
-							color-fill="text"
-							hover-color-fill="text"
-						>
-							<button @click="updateSelected()"><DownloadIcon /> Update</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<OverflowMenu
-								:options="[
-									{
-										id: 'share-names',
-										action: () => shareNames(),
-									},
-									{
-										id: 'share-file-names',
-										action: () => shareFileNames(),
-									},
-									{
-										id: 'share-urls',
-										action: () => shareUrls(),
-									},
-									{
-										id: 'share-markdown',
-										action: () => shareMarkdown(),
-									},
-								]"
-							>
-								<ShareIcon /> Share <DropdownIcon />
-								<template #share-names> <TextInputIcon /> Project names </template>
-								<template #share-file-names> <FileIcon /> File names </template>
-								<template #share-urls> <LinkIcon /> Project links </template>
-								<template #share-markdown> <CodeIcon /> Markdown links </template>
-							</OverflowMenu>
-						</ButtonStyled>
-						<ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
-							<button @click="enableAll()"><CheckCircleIcon /> Enable</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
-							<button @click="disableAll()"><SlashIcon /> Disable</button>
-						</ButtonStyled>
-						<ButtonStyled color="red">
-							<button @click="deleteSelected()"><TrashIcon /> Remove</button>
-						</ButtonStyled>
-					</div>
-				</template>
-				<template #header-actions>
-					<ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
-						<button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
-							<UpdatedIcon />
-							Refresh
-						</button>
-					</ButtonStyled>
+				<div class="flex items-center gap-2">
 					<ButtonStyled
-						v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
-						type="transparent"
+						v-if="!isPackLocked && hasOutdatedProjects"
 						color="brand"
-						color-fill="text"
-						hover-color-fill="text"
-						@click="updateAll"
-					>
-						<button class="w-max"><DownloadIcon /> Update all</button>
-					</ButtonStyled>
-					<ButtonStyled
-						v-if="canUpdatePack"
 						type="transparent"
-						color="brand"
-						color-fill="text"
-						hover-color-fill="text"
+						hover-color-fill="none"
 					>
-						<button class="w-max" :disabled="installing" @click="modpackVersionModal?.show()">
-							<DownloadIcon /> Update pack
+						<button :disabled="isBulkOperating" @click="updateAll">
+							<DownloadIcon />
+							Update all
 						</button>
 					</ButtonStyled>
-				</template>
-				<template #actions="{ item }">
+
+					<ButtonStyled type="transparent" hover-color-fill="none">
+						<button :disabled="refreshingProjects" @click="refreshProjects">
+							<RefreshCwIcon :class="refreshingProjects ? 'animate-spin' : ''" />
+							Refresh
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+
+			<!-- Content table -->
+			<ContentCardTable
+				v-model:selected-ids="selectedIds"
+				:items="tableItems"
+				:show-selection="true"
+				@update:enabled="handleToggleEnabled"
+				@delete="handleDelete"
+				@update="handleUpdate"
+			>
+				<template #empty>No content found.</template>
+			</ContentCardTable>
+		</template>
+
+		<!-- Empty state -->
+		<div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
+			<RadialHeader>
+				<div class="flex items-center gap-6 w-[32rem] mx-auto">
+					<img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
+					<span class="text-contrast font-bold text-xl">
+						You haven't added any content to this instance yet.
+					</span>
+				</div>
+			</RadialHeader>
+			<div class="flex gap-2 mt-4 mx-auto">
+				<ButtonStyled color="brand">
+					<button class="!h-10 flex items-center gap-2" @click="handleBrowseContent">
+						<CompassIcon class="size-5" />
+						<span>Browse content</span>
+					</button>
+				</ButtonStyled>
+				<ButtonStyled type="outlined">
+					<button class="!h-10 !border-button-bg !border-[1px]" @click="handleUploadFiles">
+						<FolderOpenIcon class="size-5" />
+						Upload files
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<!-- Floating action bar for batch operations -->
+		<FloatingActionBar :shown="selectedItems.length > 0 || isBulkOperating">
+			<template v-if="!isBulkOperating">
+				<span class="text-sm font-medium text-contrast">{{ selectedItems.length }} selected</span>
+				<div class="ml-auto flex items-center gap-2">
 					<ButtonStyled
-						v-if="!isPackLocked && (item.data as any).outdated"
-						type="transparent"
+						v-if="!isPackLocked && selectedItems.some((m) => m.outdated)"
 						color="brand"
-						circular
+						color-fill="text"
+						hover-color-fill="text"
 					>
-						<button
-							v-tooltip="`Update`"
-							:disabled="(item.data as ProjectListEntry).updating"
-							@click="updateProject(item.data)"
-						>
+						<button @click="updateSelected">
 							<DownloadIcon />
+							Update
 						</button>
 					</ButtonStyled>
-					<div v-else class="w-[36px]"></div>
-					<Toggle
-						class="!mx-2"
-						:model-value="!item.data.disabled"
-						@update:model-value="toggleDisableMod(item.data)"
-					/>
-					<ButtonStyled type="transparent" circular>
-						<button v-tooltip="'Remove'" @click="removeMod(item)">
-							<TrashIcon />
-						</button>
-					</ButtonStyled>
-
-					<ButtonStyled type="transparent" circular>
+					<ButtonStyled>
 						<OverflowMenu
 							:options="[
-								{
-									id: 'show-file',
-									action: () => highlightModInProfile(instance.path, item.path),
-								},
-								{
-									id: 'copy-link',
-									shown: item.data !== undefined && item.data.slug !== undefined,
-									action: () => copyModLink(item),
-								},
+								{ id: 'share-names', action: shareNames },
+								{ id: 'share-file-names', action: shareFileNames },
+								{ id: 'share-urls', action: shareUrls },
+								{ id: 'share-markdown', action: shareMarkdown },
 							]"
-							direction="left"
 						>
-							<MoreVerticalIcon />
-							<template #show-file> <ExternalIcon /> Show file </template>
-							<template #copy-link> <ClipboardCopyIcon /> Copy link </template>
+							<ShareIcon />
+							Share
+							<DropdownIcon />
+							<template #share-names>
+								<TextInputIcon />
+								Project names
+							</template>
+							<template #share-file-names>
+								<FileIcon />
+								File names
+							</template>
+							<template #share-urls>
+								<LinkIcon />
+								Project links
+							</template>
+							<template #share-markdown>
+								<CodeIcon />
+								Markdown links
+							</template>
 						</OverflowMenu>
 					</ButtonStyled>
-				</template>
-			</ContentListPanel>
-			<div class="flex justify-end mt-4">
-				<Pagination
-					v-if="search.length > 0"
-					:page="currentPage"
-					:count="Math.ceil(search.length / 20)"
-					:link-function="(page) => `?page=${page}`"
-					@switch-page="(page) => (currentPage = page)"
-				/>
-			</div>
-		</template>
-		<div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
-			<RadialHeader class="">
-				<div class="flex items-center gap-6 w-[32rem] mx-auto">
-					<img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
-					<span class="text-contrast font-bold text-xl"
-						>You haven't added any content to this instance yet.</span
-					>
+					<ButtonStyled v-if="selectedItems.some((m) => m.disabled)">
+						<button @click="bulkEnable">
+							<CheckCircleIcon />
+							Enable
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="selectedItems.some((m) => !m.disabled)">
+						<button @click="bulkDisable">
+							<SlashIcon />
+							Disable
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="red">
+						<button @click="bulkDelete">
+							<TrashIcon />
+							Remove
+						</button>
+					</ButtonStyled>
 				</div>
-			</RadialHeader>
-			<div class="flex mt-4 mx-auto">
-				<AddContentButton :instance="instance" />
-			</div>
-		</div>
+			</template>
+			<template v-else>
+				<div class="flex flex-1 flex-col gap-2">
+					<span class="text-sm font-medium text-contrast">
+						{{
+							bulkOperation === 'enable'
+								? 'Enabling'
+								: bulkOperation === 'disable'
+									? 'Disabling'
+									: bulkOperation === 'update'
+										? 'Updating'
+										: 'Removing'
+						}}
+						content... ({{ bulkProgress }}/{{ bulkTotal }})
+					</span>
+					<ProgressBar full-width :progress="bulkProgress" :max="bulkTotal" color="brand" />
+				</div>
+			</template>
+		</FloatingActionBar>
+
+		<!-- Modals -->
 		<ShareModalWrapper
 			ref="shareModal"
 			share-title="Sharing modpack content"
@@ -244,56 +231,62 @@
 		/>
 		<ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
 		<ModpackVersionModal
-			v-if="instance.linked_data"
+			v-if="instance?.linked_data"
 			ref="modpackVersionModal"
 			:instance="instance"
 			:versions="props.versions"
 		/>
 	</div>
 </template>
+
 <script setup lang="ts">
 import {
 	CheckCircleIcon,
-	ClipboardCopyIcon,
 	CodeIcon,
+	CompassIcon,
 	DownloadIcon,
 	DropdownIcon,
-	ExternalIcon,
 	FileIcon,
 	FilterIcon,
+	FolderOpenIcon,
 	LinkIcon,
-	MoreVerticalIcon,
+	RefreshCwIcon,
 	SearchIcon,
 	ShareIcon,
 	SlashIcon,
+	SpinnerIcon,
 	TrashIcon,
-	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
-	ContentListPanel,
-	defineMessages,
+	type ContentCardProject,
+	ContentCardTable,
+	type ContentCardTableItem,
+	type ContentCardVersion,
+	type ContentOwner,
+	FloatingActionBar,
 	injectNotificationManager,
 	OverflowMenu,
-	Pagination,
+	type OverflowMenuOption,
+	ProgressBar,
 	RadialHeader,
-	Toggle,
-	useVIntl,
 } from '@modrinth/ui'
-import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
-import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
-import { formatProjectType } from '@modrinth/utils'
+import {
+	formatProjectType,
+	type Organization,
+	type Project,
+	type TeamMember,
+	type Version,
+} from '@modrinth/utils'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
-import { useStorage } from '@vueuse/core'
+import { open } from '@tauri-apps/plugin-dialog'
 import dayjs from 'dayjs'
-import type { ComputedRef } from 'vue'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import Fuse from 'fuse.js'
+import { computed, onBeforeUnmount, onUnmounted, ref, watch, watchSyncEffect } from 'vue'
+import { onBeforeRouteLeave, useRouter } from 'vue-router'
 
 import { TextInputIcon } from '@/assets/icons'
-import AddContentButton from '@/components/ui/AddContentButton.vue'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
@@ -312,7 +305,6 @@ import {
 	get_projects,
 	remove_project,
 	toggle_disable_project,
-	update_all,
 	update_project,
 } from '@/helpers/profile.js'
 import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
@@ -320,16 +312,35 @@ import { highlightModInProfile } from '@/helpers/utils.js'
 import { installVersionDependencies } from '@/store/install'
 
 const { handleError } = injectNotificationManager()
+const router = useRouter()
 
 const props = defineProps<{
 	instance: GameInstance
-	options: InstanceType<typeof ContextMenu>
-	offline: boolean
-	playing: boolean
 	versions: Version[]
-	installed: boolean
 }>()
 
+async function handleBrowseContent() {
+	if (!props.instance) return
+	await router.push({
+		path: `/browse/${props.instance.loader === 'vanilla' ? 'resourcepack' : 'mod'}`,
+		query: { i: props.instance.path },
+	})
+}
+
+async function handleUploadFiles() {
+	if (!props.instance) return
+	const files = await open({ multiple: true })
+	if (!files) return
+
+	for (const file of files) {
+		await add_project_from_path(
+			props.instance.path,
+			(file as { path?: string }).path ?? file,
+		).catch(handleError)
+	}
+	await initProjects()
+}
+
 type ProjectListEntryAuthor = {
 	name: string
 	slug: string
@@ -351,382 +362,265 @@ type ProjectListEntry = {
 	project_type: string
 	id?: string
 	updating?: boolean
-	selected?: boolean
 }
 
-const isPackLocked = computed(() => {
-	return props.instance.linked_data && props.instance.linked_data.locked
-})
-const canUpdatePack = computed(() => {
-	if (!props.instance.linked_data || !props.versions || !props.versions[0]) return false
-	return props.instance.linked_data.version_id !== props.versions[0].id
-})
-const exportModal = ref(null)
-
+const loading = ref(true)
 const projects = ref<ProjectListEntry[]>([])
-const selectedFiles = ref<string[]>([])
-const selectedProjects = computed(() =>
-	projects.value.filter((x) => selectedFiles.value.includes(x.file_name)),
-)
-
-const selectionMap = ref(new Map())
-
-const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
-	const newProjects: ProjectListEntry[] = []
-
-	const profileProjects = (await get_projects(props.instance.path, cacheBehaviour)) as Record<
-		string,
-		ContentFile
-	>
-	const fetchProjects = []
-	const fetchVersions = []
-
-	for (const value of Object.values(profileProjects)) {
-		if (value.metadata) {
-			fetchProjects.push(value.metadata.project_id)
-			fetchVersions.push(value.metadata.version_id)
-		}
-	}
-
-	const [modrinthProjects, modrinthVersions] = await Promise.all([
-		(await get_project_many(fetchProjects).catch(handleError)) as Project[],
-		(await get_version_many(fetchVersions).catch(handleError)) as Version[],
-	])
-
-	const [modrinthTeams, modrinthOrganizations] = await Promise.all([
-		(await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError)) as TeamMember[][],
-		(await get_organization_many(
-			modrinthProjects.map((x) => x.organization).filter((x) => !!x),
-		).catch(handleError)) as Organization[],
-	])
-
-	for (const [path, file] of Object.entries(profileProjects)) {
-		if (file.metadata) {
-			const project = modrinthProjects.find((x) => file.metadata?.project_id === x.id)
-			const version = modrinthVersions.find((x) => file.metadata?.version_id === x.id)
-
-			if (project && version) {
-				const org = project.organization
-					? modrinthOrganizations.find((x) => x.id === project.organization)
-					: null
-
-				const team = modrinthTeams.find((x) => x[0].team_id === project.team)
+const searchQuery = ref('')
+const selectedFilters = ref<string[]>([])
+const refreshingProjects = ref(false)
 
-				let author: ProjectListEntryAuthor | null = null
-				if (org) {
-					author = {
-						name: org.name,
-						slug: org.slug,
-						type: 'organization',
-					}
-				} else if (team) {
-					const teamMember = team.find((x) => x.is_owner)
-					if (teamMember) {
-						author = {
-							name: teamMember.user.username,
-							slug: teamMember.user.username,
-							type: 'user',
-						}
-					}
-				}
+// Selection state
+const selectedIds = ref<string[]>([])
+const changingMods = ref(new Set<string>())
 
-				newProjects.push({
-					path,
-					name: project.title,
-					slug: project.slug,
-					author,
-					version: version.version_number,
-					file_name: file.file_name,
-					icon: project.icon_url,
-					disabled: file.file_name.endsWith('.disabled'),
-					updateVersion: file.update_version_id,
-					updated: dayjs(version.date_published),
-					outdated: !!file.update_version_id,
-					project_type: project.project_type,
-					id: project.id,
-				})
-			}
+// Bulk operations state
+const isBulkOperating = ref(false)
+const bulkProgress = ref(0)
+const bulkTotal = ref(0)
+const bulkOperation = ref<'enable' | 'disable' | 'delete' | 'update' | null>(null)
 
-			continue
-		}
+const shareModal = ref<InstanceType<typeof ShareModalWrapper> | null>()
+const exportModal = ref(null)
+const modpackVersionModal = ref<InstanceType<typeof ModpackVersionModal> | null>()
 
-		newProjects.push({
-			path,
-			name: file.file_name.replace('.disabled', ''),
-			author: null,
-			version: null,
-			file_name: file.file_name,
-			icon: undefined,
-			disabled: file.file_name.endsWith('.disabled'),
-			outdated: false,
-			updated: dayjs(0),
-			project_type: file.project_type === 'shaderpack' ? 'shader' : file.project_type,
-		})
-	}
+const refreshInterval: ReturnType<typeof setInterval> | null = null
 
-	projects.value = newProjects ?? []
-
-	const newSelectionMap = new Map()
-	for (const project of projects.value) {
-		newSelectionMap.set(
-			project.path,
-			selectionMap.value.get(project.path) ??
-				selectionMap.value.get(project.path.slice(0, -9)) ??
-				selectionMap.value.get(project.path + '.disabled') ??
-				false,
-		)
-	}
-	selectionMap.value = newSelectionMap
-}
-await initProjects()
+const isPackLocked = computed(() => props.instance?.linked_data?.locked ?? false)
 
-const modpackVersionModal = ref<InstanceType<typeof ModpackVersionModal> | null>()
-const installing = computed(() => props.instance.install_stage !== 'installed')
+const hasOutdatedProjects = computed(() => projects.value.some((p) => p.outdated))
 
-const vintl = useVIntl()
-const { formatMessage } = vintl
+const selectedItems = computed(() =>
+	projects.value.filter((item) => selectedIds.value.includes(item.file_name)),
+)
 
+// Dynamic filter options based on project types
 type FilterOption = {
 	id: string
-	formattedName: string
+	label: string
 }
 
-const messages = defineMessages({
-	updatesAvailableFilter: {
-		id: 'instance.filter.updates-available',
-		defaultMessage: 'Updates available',
-	},
-	disabledFilter: {
-		id: 'instance.filter.disabled',
-		defaultMessage: 'Disabled projects',
-	},
-})
-
-const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
+const filterOptions = computed<FilterOption[]>(() => {
 	const options: FilterOption[] = []
 
+	// Get frequency of each project type
 	const frequency = projects.value.reduce((map: Record<string, number>, item) => {
 		map[item.project_type] = (map[item.project_type] || 0) + 1
 		return map
 	}, {})
 
+	// Sort types by frequency (most common first)
 	const types = Object.keys(frequency).sort((a, b) => frequency[b] - frequency[a])
 
-	types.forEach((type) => {
+	// Add type filters
+	for (const type of types) {
 		options.push({
 			id: type,
-			formattedName: formatProjectType(type) + 's',
+			label: formatProjectType(type) + 's',
 		})
-	})
+	}
 
+	// Add "Updates" filter if there are outdated mods and pack is not locked
 	if (!isPackLocked.value && projects.value.some((m) => m.outdated)) {
 		options.push({
 			id: 'updates',
-			formattedName: formatMessage(messages.updatesAvailableFilter),
+			label: 'Updates',
 		})
 	}
 
+	// Add "Disabled" filter if there are disabled mods
 	if (projects.value.some((m) => m.disabled)) {
 		options.push({
 			id: 'disabled',
-			formattedName: formatMessage(messages.disabledFilter),
+			label: 'Disabled',
 		})
 	}
 
 	return options
 })
 
-const selectedFilters = useStorage<string[]>(
-	`${props.instance.name}-mod-selected-filters`,
-	[],
-	sessionStorage,
-	{ mergeDefaults: true },
-)
+function toggleFilter(filterId: string) {
+	const index = selectedFilters.value.indexOf(filterId)
+	if (index === -1) {
+		selectedFilters.value.push(filterId)
+	} else {
+		selectedFilters.value.splice(index, 1)
+	}
+}
 
-const filteredProjects = computed(() => {
-	const updatesFilter = selectedFilters.value.includes('updates')
-	const disabledFilter = selectedFilters.value.includes('disabled')
+async function refreshProjects() {
+	if (refreshingProjects.value) return
+	refreshingProjects.value = true
+	try {
+		await initProjects('must_revalidate')
+	} finally {
+		refreshingProjects.value = false
+	}
+}
 
-	const typeFilters = selectedFilters.value.filter(
-		(filter) => filter !== 'updates' && filter !== 'disabled',
-	)
+async function updateAll() {
+	const itemsToUpdate = projects.value.filter((item) => item.outdated)
+	if (itemsToUpdate.length === 0) return
 
-	return projects.value.filter((project) => {
-		return (
-			(typeFilters.length === 0 || typeFilters.includes(project.project_type)) &&
-			(!updatesFilter || project.outdated) &&
-			(!disabledFilter || project.disabled)
-		)
-	})
-})
+	isBulkOperating.value = true
+	bulkOperation.value = 'update'
+	bulkTotal.value = itemsToUpdate.length
+	bulkProgress.value = 0
 
-watch(filterOptions, () => {
-	for (let i = 0; i < selectedFilters.value.length; i++) {
-		const option = selectedFilters.value[i]
-		if (!filterOptions.value.some((x) => x.id === option)) {
-			selectedFilters.value.splice(i, 1)
-		}
+	for (const item of itemsToUpdate) {
+		await updateProject(item)
+		bulkProgress.value++
 	}
-})
 
-function toggleArray<T>(array: T[], value: T) {
-	if (array.includes(value)) {
-		array.splice(array.indexOf(value), 1)
-	} else {
-		array.push(value)
-	}
-}
+	isBulkOperating.value = false
+	bulkOperation.value = null
 
-const searchFilter = ref('')
-const selectAll = ref(false)
-const shareModal = ref<InstanceType<typeof ShareModalWrapper> | null>()
-const ascending = ref(true)
-const sortColumn = ref('Name')
-const currentPage = ref(1)
-
-const selected = computed(() =>
-	Array.from(selectionMap.value)
-		.filter((args) => {
-			return args[1]
-		})
-		.map((args) => {
-			return projects.value.find((x) => x.path === args[0])
-		}),
-)
+	trackEvent('InstanceUpdateAll', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		count: itemsToUpdate.length,
+		selected: false,
+	})
+}
 
-const functionValues = computed(() =>
-	selectedProjects.value.length > 0 ? selectedProjects.value : Array.from(projects.value.values()),
-)
+// Clean up invalid filters when options change
+watch(filterOptions, () => {
+	selectedFilters.value = selectedFilters.value.filter((f) =>
+		filterOptions.value.some((opt) => opt.id === f),
+	)
+})
 
-const search = computed(() => {
-	const filtered = filteredProjects.value.filter((mod) => {
-		return mod.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-	})
+const fuse = new Fuse<ProjectListEntry>([], {
+	keys: ['name', 'author.name', 'file_name'],
+	threshold: 0.4,
+	distance: 100,
+})
 
-	switch (sortColumn.value) {
-		case 'Updated':
-			return filtered.slice().sort((a, b) => {
-				const updated = a.updated.isAfter(b.updated) ? 1 : -1
-				return ascending.value ? -updated : updated
-			})
-		default:
-			return filtered
-				.slice()
-				.sort((a, b) =>
-					ascending.value ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name),
-				)
-	}
+const sortedProjects = computed(() => {
+	const items = [...projects.value]
+	// Sort by newest first
+	return items.sort((a, b) => (a.updated.isAfter(b.updated) ? -1 : 1))
 })
 
-watch([sortColumn, ascending, selectedFilters.value, searchFilter], () => (currentPage.value = 1))
+watchSyncEffect(() => fuse.setCollection(sortedProjects.value))
 
-const sortProjects = (filter: string) => {
-	if (sortColumn.value === filter) {
-		ascending.value = !ascending.value
-	} else {
-		sortColumn.value = filter
-		ascending.value = true
-	}
-}
+const filteredProjects = computed(() => {
+	const query = searchQuery.value.trim()
 
-const updateAll = async () => {
-	const setProjects = []
-	const outdatedProjects = []
+	let items: ProjectListEntry[]
 
-	for (const [i, project] of projects.value.entries()) {
-		if (project.outdated) {
-			project.updating = true
-			setProjects.push(i)
-			if (project.updateVersion) {
-				outdatedProjects.push(project.updateVersion)
+	if (query) {
+		items = fuse.search(query).map(({ item }) => item)
+	} else {
+		items = sortedProjects.value
+	}
+
+	// Apply filters if any are selected
+	if (selectedFilters.value.length > 0) {
+		items = items.filter((item) => {
+			// Check if item matches any of the selected filters
+			for (const filter of selectedFilters.value) {
+				// Special filters
+				if (filter === 'updates' && item.outdated) return true
+				if (filter === 'disabled' && item.disabled) return true
+				// Type filters (mod, shader, resourcepack, etc.)
+				if (item.project_type === filter) return true
 			}
-		}
+			return false
+		})
 	}
 
-	const paths = (await update_all(props.instance.path).catch(handleError)) as Record<string, string>
-
-	for (const [oldVal, newVal] of Object.entries(paths)) {
-		const index = projects.value.findIndex((x) => x.path === oldVal)
-		projects.value[index].path = newVal
-		projects.value[index].outdated = false
+	return items
+})
 
-		if (projects.value[index].updateVersion) {
-			projects.value[index].version = projects.value[index].updateVersion.version_number
-			projects.value[index].updateVersion = undefined
-		}
+function mapProject(item: ProjectListEntry): ContentCardProject {
+	return {
+		id: item.id ?? item.file_name,
+		slug: item.slug ?? item.file_name,
+		title: item.name,
+		icon_url: item.icon,
 	}
+}
 
-	if (outdatedProjects.length > 0) {
-		const profile = await get(props.instance.path).catch(handleError)
-
-		if (profile) {
-			for (const versionId of outdatedProjects) {
-				const versionData = await get_version(versionId, 'must_revalidate').catch(handleError)
-
-				if (versionData) {
-					await installVersionDependencies(profile, versionData).catch(handleError)
-				}
-			}
-		}
+function mapVersion(item: ProjectListEntry): ContentCardVersion {
+	return {
+		id: item.file_name,
+		version_number: item.version ?? 'Unknown',
+		file_name: item.file_name,
 	}
+}
 
-	for (const project of setProjects) {
-		projects.value[project].updating = false
+function mapOwner(item: ProjectListEntry): ContentOwner | undefined {
+	if (!item.author) return undefined
+	return {
+		id: item.author.slug ?? item.author.name,
+		name: item.author.name,
+		type: item.author.type,
+		// @ts-expect-error it will exist in the future
+		avatar_url: item.author?.avatar_url,
+		link: `https://modrinth.com/${item.author.type}/${item.author.slug}`,
 	}
-
-	trackEvent('InstanceUpdateAll', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-		count: setProjects.length,
-		selected: selected.value.length > 1,
-	})
 }
 
-const updateProject = async (mod: ProjectListEntry) => {
-	mod.updating = true
-	await new Promise((resolve) => setTimeout(resolve, 0))
-	mod.path = await update_project(props.instance.path, mod.path).catch(handleError)
-
-	if (mod.updateVersion) {
-		const versionData = await get_version(mod.updateVersion, 'must_revalidate').catch(handleError)
+function getOverflowOptions(item: ProjectListEntry): OverflowMenuOption[] {
+	const options: OverflowMenuOption[] = [
+		{
+			id: 'Show file',
+			action: () => highlightModInProfile(props.instance.path, item.path),
+		},
+	]
 
-		if (versionData) {
-			const profile = await get(props.instance.path).catch(handleError)
-
-			if (profile) {
-				await installVersionDependencies(profile, versionData).catch(handleError)
-			}
-		}
+	if (item.slug) {
+		options.push({
+			id: 'Copy link',
+			action: async () => {
+				await navigator.clipboard.writeText(
+					`https://modrinth.com/${item.project_type}/${item.slug}`,
+				)
+			},
+		})
 	}
 
-	mod.updating = false
+	return options
+}
 
-	mod.outdated = false
-	mod.version = mod.updateVersion?.version_number
-	mod.updateVersion = undefined
+// Table items for ContentCardTable
+const tableItems = computed<ContentCardTableItem[]>(() =>
+	filteredProjects.value.map((item) => ({
+		id: item.file_name,
+		project: mapProject(item),
+		projectLink: item.id ? `/project/${item.id}` : undefined,
+		version: mapVersion(item),
+		owner: mapOwner(item),
+		enabled: !item.disabled,
+		disabled: changingMods.value.has(item.file_name),
+		hasUpdate: !isPackLocked.value && item.outdated,
+		overflowOptions: getOverflowOptions(item),
+	})),
+)
 
-	trackEvent('InstanceProjectUpdate', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-		id: mod.id,
-		name: mod.name,
-		project_type: mod.project_type,
-	})
+// ID-based event handlers for ContentCardTable
+function handleToggleEnabled(id: string, _value: boolean) {
+	const item = projects.value.find((p) => p.file_name === id)
+	if (item) toggleDisableMod(item)
 }
 
-const locks: Record<string, string | null> = {}
+function handleDelete(id: string) {
+	const item = projects.value.find((p) => p.file_name === id)
+	if (item) removeMod(item)
+}
 
-const toggleDisableMod = async (mod: ProjectListEntry) => {
-	// Use mod's id as the key for the lock. If mod doesn't have a unique id, replace `mod.id` with some unique property.
-	const lock = locks[mod.file_name]
+function handleUpdate(id: string) {
+	const item = projects.value.find((p) => p.file_name === id)
+	if (item?.outdated) updateProject(item)
+}
 
-	while (lock) {
-		await new Promise((resolve) => {
-			setTimeout((value: unknown) => resolve(value), 100)
-		})
-	}
+// Project operations
+async function toggleDisableMod(mod: ProjectListEntry) {
+	// Skip if already processing this mod
+	if (changingMods.value.has(mod.file_name)) return
 
-	locks[mod.file_name] = 'lock'
+	changingMods.value.add(mod.file_name)
 
 	try {
 		mod.path = await toggle_disable_project(props.instance.path, mod.path)
@@ -741,443 +635,346 @@ const toggleDisableMod = async (mod: ProjectListEntry) => {
 			disabled: mod.disabled,
 		})
 	} catch (err) {
-		handleError(err)
+		handleError(err as Error)
 	}
 
-	locks[mod.file_name] = null
+	changingMods.value.delete(mod.file_name)
 }
 
-const removeMod = async (mod: ContentItem<ProjectListEntry>) => {
+async function removeMod(mod: ProjectListEntry) {
 	await remove_project(props.instance.path, mod.path).catch(handleError)
 	projects.value = projects.value.filter((x) => mod.path !== x.path)
+	selectedIds.value = selectedIds.value.filter((id) => id !== mod.file_name)
 
 	trackEvent('InstanceProjectRemove', {
 		loader: props.instance.loader,
 		game_version: props.instance.game_version,
-		id: mod.data.id,
-		name: mod.data.name,
-		project_type: mod.data.project_type,
+		id: mod.id,
+		name: mod.name,
+		project_type: mod.project_type,
 	})
 }
 
-const copyModLink = async (mod: ContentItem<ProjectListEntry>) => {
-	await navigator.clipboard.writeText(
-		`https://modrinth.com/${mod.data.project_type}/${mod.data.slug}`,
-	)
-}
-
-const deleteSelected = async () => {
-	for (const project of functionValues.value) {
-		await remove_project(props.instance.path, project.path).catch(handleError)
-	}
-
-	projects.value = projects.value.filter((x) => !x.selected)
-}
+async function updateProject(mod: ProjectListEntry) {
+	mod.updating = true
+	changingMods.value.add(mod.file_name)
 
-const shareNames = async () => {
-	await shareModal.value?.show(functionValues.value.map((x) => x.name).join('\n'))
-}
+	try {
+		mod.path = await update_project(props.instance.path, mod.path).catch(handleError)
 
-const shareFileNames = async () => {
-	await shareModal.value?.show(functionValues.value.map((x) => x.file_name).join('\n'))
-}
+		if (mod.updateVersion) {
+			const versionData = await get_version(mod.updateVersion, 'must_revalidate').catch(handleError)
 
-const shareUrls = async () => {
-	await shareModal.value?.show(
-		functionValues.value
-			.filter((x) => x.slug)
-			.map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
-			.join('\n'),
-	)
-}
+			if (versionData) {
+				const profile = await get(props.instance.path).catch(handleError)
 
-const shareMarkdown = async () => {
-	await shareModal.value?.show(
-		functionValues.value
-			.map((x) => {
-				if (x.slug) {
-					return `[${x.name}](https://modrinth.com/${x.project_type}/${x.slug})`
+				if (profile) {
+					await installVersionDependencies(profile, versionData).catch(handleError)
 				}
-				return x.name
-			})
-			.join('\n'),
-	)
-}
-
-const updateSelected = async () => {
-	const promises = []
-	for (const project of functionValues.value) {
-		if (project.outdated) promises.push(updateProject(project))
-	}
-	await Promise.all(promises).catch(handleError)
-}
-
-const enableAll = async () => {
-	const promises = []
-	for (const project of functionValues.value) {
-		if (project.disabled) {
-			promises.push(toggleDisableMod(project))
+			}
 		}
-	}
-	await Promise.all(promises).catch(handleError)
-}
 
-const disableAll = async () => {
-	const promises = []
-	for (const project of functionValues.value) {
-		if (!project.disabled) {
-			promises.push(toggleDisableMod(project))
-		}
-	}
-	await Promise.all(promises).catch(handleError)
-}
+		mod.outdated = false
+		mod.version = mod.updateVersion ?? null
+		mod.updateVersion = undefined
 
-watch(selectAll, () => {
-	for (const [key, value] of Array.from(selectionMap.value)) {
-		if (value !== selectAll.value) {
-			selectionMap.value.set(key, selectAll.value)
-		}
+		trackEvent('InstanceProjectUpdate', {
+			loader: props.instance.loader,
+			game_version: props.instance.game_version,
+			id: mod.id,
+			name: mod.name,
+			project_type: mod.project_type,
+		})
+	} catch (err) {
+		handleError(err as Error)
 	}
-})
 
-const refreshingProjects = ref(false)
-async function refreshProjects() {
-	refreshingProjects.value = true
-	await initProjects('bypass')
-	refreshingProjects.value = false
+	mod.updating = false
+	changingMods.value.delete(mod.file_name)
 }
 
-const unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
-	if (event.payload.type !== 'drop') return
-
-	for (const file of event.payload.paths) {
-		if (file.endsWith('.mrpack')) continue
-		await add_project_from_path(props.instance.path, file).catch(handleError)
-	}
-	await initProjects()
-})
+// Bulk operations
+async function bulkEnable() {
+	const itemsToToggle = selectedItems.value.filter((item) => item.disabled)
+	if (itemsToToggle.length === 0) return
 
-const unlistenProfiles = await profile_listener(
-	async (event: { event: string; profile_path_id: string }) => {
-		if (
-			event.profile_path_id === props.instance.path &&
-			event.event === 'synced' &&
-			props.instance.install_stage !== 'pack_installing'
-		) {
-			await initProjects()
-		}
-	},
-)
-
-onUnmounted(() => {
-	unlisten()
-	unlistenProfiles()
-})
-</script>
+	isBulkOperating.value = true
+	bulkOperation.value = 'enable'
+	bulkTotal.value = itemsToToggle.length
+	bulkProgress.value = 0
 
-<style scoped lang="scss">
-.text-input {
-	width: 100%;
-}
-
-.manage {
-	display: flex;
-	gap: 0.5rem;
-}
+	for (const item of itemsToToggle) {
+		await toggleDisableMod(item)
+		bulkProgress.value++
+	}
 
-.table {
-	margin-block-start: 0;
-	border-radius: var(--radius-lg);
-	border: 2px solid var(--color-bg);
+	clearSelection()
+	isBulkOperating.value = false
+	bulkOperation.value = null
 }
 
-.table-row {
-	grid-template-columns: min-content 2fr 1fr 13.25rem;
+async function bulkDisable() {
+	const itemsToToggle = selectedItems.value.filter((item) => !item.disabled)
+	if (itemsToToggle.length === 0) return
 
-	&.show-options {
-		grid-template-columns: min-content auto;
+	isBulkOperating.value = true
+	bulkOperation.value = 'disable'
+	bulkTotal.value = itemsToToggle.length
+	bulkProgress.value = 0
 
-		.options {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: var(--gap-md);
-		}
+	for (const item of itemsToToggle) {
+		await toggleDisableMod(item)
+		bulkProgress.value++
 	}
+
+	clearSelection()
+	isBulkOperating.value = false
+	bulkOperation.value = null
 }
 
-.static {
-	.table-row {
-		grid-template-areas: 'manage name version';
-		grid-template-columns: 4.25rem 1fr 1fr;
-	}
+async function bulkDelete() {
+	const itemsToDelete = [...selectedItems.value]
+	if (itemsToDelete.length === 0) return
 
-	.name-cell {
-		grid-area: name;
-	}
+	isBulkOperating.value = true
+	bulkOperation.value = 'delete'
+	bulkTotal.value = itemsToDelete.length
+	bulkProgress.value = 0
 
-	.version {
-		grid-area: version;
+	for (const item of itemsToDelete) {
+		await removeMod(item)
+		bulkProgress.value++
 	}
 
-	.manage {
-		justify-content: center;
-		grid-area: manage;
-	}
+	isBulkOperating.value = false
+	bulkOperation.value = null
 }
 
-.table-cell {
-	align-items: center;
-}
-
-.card-row {
-	display: flex;
-	align-items: center;
-	gap: var(--gap-md);
-	justify-content: space-between;
-	background-color: var(--color-raised-bg);
-}
+async function updateSelected() {
+	const itemsToUpdate = selectedItems.value.filter((item) => item.outdated)
+	if (itemsToUpdate.length === 0) return
 
-.mod-card {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--gap-sm);
-	justify-content: flex-start;
-	margin-bottom: 0.5rem;
-	white-space: nowrap;
-	align-items: center;
-
-	:deep(.dropdown-row) {
-		.btn {
-			height: 2.5rem !important;
-		}
-	}
+	isBulkOperating.value = true
+	bulkOperation.value = 'update'
+	bulkTotal.value = itemsToUpdate.length
+	bulkProgress.value = 0
 
-	:deep(.btn) {
-		height: 2.5rem;
+	for (const item of itemsToUpdate) {
+		await updateProject(item)
+		bulkProgress.value++
 	}
 
-	.dropdown-input {
-		flex-grow: 1;
-
-		.animated-dropdown {
-			width: unset;
-
-			:deep(.selected) {
-				border-radius: var(--radius-md) 0 0 var(--radius-md);
-			}
-		}
-
-		.iconified-input {
-			width: 100%;
-
-			input {
-				flex-basis: unset;
-			}
-		}
-
-		:deep(.animated-dropdown) {
-			.render-down {
-				border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
-			}
-
-			.options-wrapper {
-				margin-top: 0.25rem;
-				width: unset;
-				border-radius: var(--radius-md);
-			}
+	clearSelection()
+	isBulkOperating.value = false
+	bulkOperation.value = null
 
-			.options {
-				border-radius: var(--radius-md);
-				border: 1px solid var(--color);
-			}
-		}
-	}
+	trackEvent('InstanceUpdateAll', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		count: itemsToUpdate.length,
+		selected: true,
+	})
 }
 
-.list-card {
-	margin-top: 0.5rem;
+function clearSelection() {
+	selectedIds.value = []
 }
 
-.text-combo {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
+// Share functions
+async function shareNames() {
+	const items = selectedItems.value.length > 0 ? selectedItems.value : projects.value
+	await shareModal.value?.show(items.map((x) => x.name).join('\n'))
 }
 
-.name-cell {
-	padding-left: 0;
-
-	.btn {
-		margin-left: var(--gap-sm);
-		min-width: unset;
-	}
+async function shareFileNames() {
+	const items = selectedItems.value.length > 0 ? selectedItems.value : projects.value
+	await shareModal.value?.show(items.map((x) => x.file_name).join('\n'))
 }
 
-.dropdown {
-	width: 7rem !important;
+async function shareUrls() {
+	const items = selectedItems.value.length > 0 ? selectedItems.value : projects.value
+	await shareModal.value?.show(
+		items
+			.filter((x) => x.slug)
+			.map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
+			.join('\n'),
+	)
 }
 
-.sort {
-	padding-left: 0.5rem;
+async function shareMarkdown() {
+	const items = selectedItems.value.length > 0 ? selectedItems.value : projects.value
+	await shareModal.value?.show(
+		items
+			.map((x) => {
+				if (x.slug) {
+					return `[${x.name}](https://modrinth.com/${x.project_type}/${x.slug})`
+				}
+				return x.name
+			})
+			.join('\n'),
+	)
 }
 
-.second-row {
-	display: flex;
-	align-items: flex-start;
-	flex-wrap: wrap;
-	gap: var(--gap-sm);
+// Initialize projects
+async function initProjects(cacheBehaviour?: CacheBehaviour) {
+	if (!props.instance) return
 
-	.chips {
-		flex-grow: 1;
-	}
-}
+	const newProjects: ProjectListEntry[] = []
 
-.modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	padding: var(--gap-lg);
+	const profileProjects = (await get_projects(props.instance.path, cacheBehaviour)) as Record<
+		string,
+		ContentFile
+	>
+	const fetchProjects: string[] = []
+	const fetchVersions: string[] = []
 
-	.button-group {
-		display: flex;
-		justify-content: flex-end;
-		gap: 0.5rem;
+	for (const value of Object.values(profileProjects)) {
+		if (value.metadata) {
+			fetchProjects.push(value.metadata.project_id)
+			fetchVersions.push(value.metadata.version_id)
+		}
 	}
 
-	strong {
-		color: var(--color-contrast);
-	}
-}
+	const [modrinthProjects, modrinthVersions] = await Promise.all([
+		(await get_project_many(fetchProjects).catch(handleError)) as Project[],
+		(await get_version_many(fetchVersions).catch(handleError)) as Version[],
+	])
 
-.mod-content {
-	display: flex;
-	align-items: center;
-	gap: 1rem;
+	const [modrinthTeams, modrinthOrganizations] = await Promise.all([
+		(await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError)) as TeamMember[][],
+		(await get_organization_many(
+			modrinthProjects.map((x) => x.organization).filter((x) => !!x),
+		).catch(handleError)) as Organization[],
+	])
 
-	.mod-text {
-		display: flex;
-		flex-direction: column;
-	}
+	for (const [path, file] of Object.entries(profileProjects)) {
+		if (file.metadata) {
+			const project = modrinthProjects.find((x) => file.metadata?.project_id === x.id)
+			const version = modrinthVersions.find((x) => file.metadata?.version_id === x.id)
 
-	.title {
-		color: var(--color-contrast);
-		font-weight: bolder;
-	}
-}
+			if (project && version) {
+				const org = project.organization
+					? modrinthOrganizations.find((x) => x.id === project.organization)
+					: null
 
-.actions-cell {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
+				const team = modrinthTeams.find((x) => x[0]?.team_id === project.team)
 
-	.btn {
-		height: unset;
-		width: unset;
-		padding: 0;
+				let author: ProjectListEntryAuthor | null = null
+				if (org) {
+					author = {
+						name: org.name,
+						slug: org.slug,
+						type: 'organization',
+					}
+				} else if (team) {
+					const teamMember = team.find((x) => x.is_owner)
+					if (teamMember) {
+						author = {
+							name: teamMember.user.username,
+							slug: teamMember.user.username,
+							type: 'user',
+						}
+					}
+				}
 
-		&.trash {
-			color: var(--color-red);
-		}
+				newProjects.push({
+					path,
+					name: project.title,
+					slug: project.slug,
+					author,
+					version: version.version_number,
+					file_name: file.file_name,
+					icon: project.icon_url,
+					disabled: file.file_name.endsWith('.disabled'),
+					updateVersion: file.update_version_id,
+					updated: dayjs(version.date_published),
+					outdated: !!file.update_version_id,
+					project_type: project.project_type,
+					id: project.id,
+				})
 
-		&.update {
-			color: var(--color-green);
+				continue
+			}
 		}
 
-		&.share {
-			color: var(--color-blue);
-		}
+		newProjects.push({
+			path,
+			name: file.file_name.replace('.disabled', ''),
+			author: null,
+			version: null,
+			file_name: file.file_name,
+			icon: undefined,
+			disabled: file.file_name.endsWith('.disabled'),
+			outdated: false,
+			updated: dayjs(0),
+			project_type: file.project_type === 'shaderpack' ? 'shader' : file.project_type,
+		})
 	}
-}
 
-.more-box {
-	display: flex;
-	background-color: var(--color-bg);
-	padding: var(--gap-lg);
-
-	.options {
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: row;
-		gap: var(--gap-md);
-		flex-grow: 1;
-	}
+	projects.value = newProjects
+	loading.value = false
 }
 
-.btn {
-	&.transparent {
-		height: unset;
-		width: unset;
-		padding: 0;
-		color: var(--color-base);
-		gap: var(--gap-xs);
-		white-space: nowrap;
-
-		svg {
-			margin-right: 0 !important;
-			transition: transform 0.2s ease-in-out;
-
-			&.open {
-				transform: rotate(90deg);
-			}
+// Lifecycle
+await initProjects()
 
-			&.down {
-				transform: rotate(180deg);
-			}
-		}
+// Drag & drop
+const unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
+	if (event.payload.type !== 'drop' || !props.instance) return
+
+	for (const file of event.payload.paths) {
+		if (file.endsWith('.mrpack')) continue
+		await add_project_from_path(props.instance.path, file).catch(handleError)
 	}
-}
-.empty-prompt {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--gap-md);
-	height: 100%;
-	width: 100%;
-	margin: auto;
-
-	.empty-icon {
-		svg {
-			width: 10rem;
-			height: 10rem;
-			color: var(--color-contrast);
+	await initProjects()
+})
+
+// Profile listener
+const unlistenProfiles = await profile_listener(
+	async (event: { event: string; profile_path_id: string }) => {
+		if (
+			props.instance &&
+			event.profile_path_id === props.instance.path &&
+			event.event === 'synced' &&
+			props.instance.install_stage !== 'pack_installing'
+		) {
+			await initProjects()
 		}
-	}
+	},
+)
 
-	p,
-	h3 {
-		margin: 0;
+// Navigation guard for bulk operations
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+	if (isBulkOperating.value) {
+		e.preventDefault()
+		return ''
 	}
 }
-</style>
 
-<style lang="scss">
-.select-checkbox {
-	button.checkbox {
-		border: none;
-		margin: 0;
+watch(isBulkOperating, (operating) => {
+	if (operating) {
+		window.addEventListener('beforeunload', handleBeforeUnload)
+	} else {
+		window.removeEventListener('beforeunload', handleBeforeUnload)
 	}
-}
+})
 
-.search-input {
-	min-height: 2.25rem;
-	background-color: var(--color-raised-bg);
-}
+onBeforeUnmount(() => {
+	window.removeEventListener('beforeunload', handleBeforeUnload)
+})
 
-.top-box {
-	background-image: radial-gradient(
-		50% 100% at 50% 100%,
-		var(--color-brand-highlight) 10%,
-		#ffffff00 100%
-	);
-}
+onBeforeRouteLeave(() => {
+	if (isBulkOperating.value) {
+		return window.confirm('A bulk operation is in progress. Are you sure you want to leave?')
+	}
+	return true
+})
 
-.top-box-divider {
-	background-image: linear-gradient(90deg, #ffffff00 0%, var(--color-brand) 50%, #ffffff00 100%);
-	width: 100%;
-	height: 1px;
-	opacity: 0.8;
-}
-</style>
+onUnmounted(() => {
+	unlisten()
+	unlistenProfiles()
+	if (refreshInterval) {
+		clearInterval(refreshInterval)
+	}
+})
+</script>
diff --git a/apps/app-frontend/src/pages/instance/Mods_old.vue b/apps/app-frontend/src/pages/instance/Mods_old.vue
new file mode 100644
index 0000000000..e91b43f0bd
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/Mods_old.vue
@@ -0,0 +1,1183 @@
+<template>
+	<div>
+		<template v-if="projects?.length > 0">
+			<div class="flex items-center gap-2 mb-4">
+				<div class="iconified-input flex-grow">
+					<SearchIcon />
+					<input
+						v-model="searchFilter"
+						type="text"
+						:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+						class="text-input search-input"
+						autocomplete="off"
+					/>
+					<Button class="r-btn" @click="() => (searchFilter = '')">
+						<XIcon />
+					</Button>
+				</div>
+				<AddContentButton :instance="instance" />
+			</div>
+			<div class="flex items-center justify-between">
+				<div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
+					<FilterIcon class="text-secondary h-5 w-5 mr-1" />
+					<button
+						v-for="filter in filterOptions"
+						:key="`content-filter-${filter.id}`"
+						:class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
+						@click="toggleArray(selectedFilters, filter.id)"
+					>
+						{{ filter.formattedName }}
+					</button>
+				</div>
+				<Pagination
+					v-if="search.length > 0"
+					:page="currentPage"
+					:count="Math.ceil(search.length / 20)"
+					:link-function="(page) => `?page=${page}`"
+					@switch-page="(page) => (currentPage = page)"
+				/>
+			</div>
+
+			<ContentListPanel
+				v-model="selectedFiles"
+				:locked="isPackLocked"
+				:items="
+					search.map((x) => {
+						const item: ContentItem<any> = {
+							path: x.path,
+							disabled: x.disabled,
+							filename: x.file_name,
+							icon: x.icon ?? undefined,
+							title: x.name,
+							data: x,
+						}
+
+						if (x.version) {
+							item.version = x.version
+							item.versionId = x.version
+						}
+
+						if (x.id) {
+							item.project = {
+								id: x.id,
+								link: {
+									path: `/project/${x.id}`,
+									query: { i: props.instance.path },
+								},
+								linkProps: {},
+							}
+						}
+
+						if (x.author) {
+							item.creator = {
+								name: x.author.name,
+								type: x.author.type,
+								id: x.author.slug,
+								link: `https://modrinth.com/${x.author.type}/${x.author.slug}`,
+								linkProps: { target: '_blank' },
+							}
+						}
+
+						return item
+					})
+				"
+				:sort-column="sortColumn"
+				:sort-ascending="ascending"
+				:update-sort="sortProjects"
+				:current-page="currentPage"
+			>
+				<template v-if="selectedProjects.length > 0" #headers>
+					<div class="flex gap-2">
+						<ButtonStyled
+							v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
+							color="brand"
+							color-fill="text"
+							hover-color-fill="text"
+						>
+							<button @click="updateSelected()"><DownloadIcon /> Update</button>
+						</ButtonStyled>
+						<ButtonStyled>
+							<OverflowMenu
+								:options="[
+									{
+										id: 'share-names',
+										action: () => shareNames(),
+									},
+									{
+										id: 'share-file-names',
+										action: () => shareFileNames(),
+									},
+									{
+										id: 'share-urls',
+										action: () => shareUrls(),
+									},
+									{
+										id: 'share-markdown',
+										action: () => shareMarkdown(),
+									},
+								]"
+							>
+								<ShareIcon /> Share <DropdownIcon />
+								<template #share-names> <TextInputIcon /> Project names </template>
+								<template #share-file-names> <FileIcon /> File names </template>
+								<template #share-urls> <LinkIcon /> Project links </template>
+								<template #share-markdown> <CodeIcon /> Markdown links </template>
+							</OverflowMenu>
+						</ButtonStyled>
+						<ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
+							<button @click="enableAll()"><CheckCircleIcon /> Enable</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
+							<button @click="disableAll()"><SlashIcon /> Disable</button>
+						</ButtonStyled>
+						<ButtonStyled color="red">
+							<button @click="deleteSelected()"><TrashIcon /> Remove</button>
+						</ButtonStyled>
+					</div>
+				</template>
+				<template #header-actions>
+					<ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
+						<button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
+							<UpdatedIcon />
+							Refresh
+						</button>
+					</ButtonStyled>
+					<ButtonStyled
+						v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
+						type="transparent"
+						color="brand"
+						color-fill="text"
+						hover-color-fill="text"
+						@click="updateAll"
+					>
+						<button class="w-max"><DownloadIcon /> Update all</button>
+					</ButtonStyled>
+					<ButtonStyled
+						v-if="canUpdatePack"
+						type="transparent"
+						color="brand"
+						color-fill="text"
+						hover-color-fill="text"
+					>
+						<button class="w-max" :disabled="installing" @click="modpackVersionModal?.show()">
+							<DownloadIcon /> Update pack
+						</button>
+					</ButtonStyled>
+				</template>
+				<template #actions="{ item }">
+					<ButtonStyled
+						v-if="!isPackLocked && (item.data as any).outdated"
+						type="transparent"
+						color="brand"
+						circular
+					>
+						<button
+							v-tooltip="`Update`"
+							:disabled="(item.data as ProjectListEntry).updating"
+							@click="updateProject(item.data)"
+						>
+							<DownloadIcon />
+						</button>
+					</ButtonStyled>
+					<div v-else class="w-[36px]"></div>
+					<Toggle
+						class="!mx-2"
+						:model-value="!item.data.disabled"
+						@update:model-value="toggleDisableMod(item.data)"
+					/>
+					<ButtonStyled type="transparent" circular>
+						<button v-tooltip="'Remove'" @click="removeMod(item)">
+							<TrashIcon />
+						</button>
+					</ButtonStyled>
+
+					<ButtonStyled type="transparent" circular>
+						<OverflowMenu
+							:options="[
+								{
+									id: 'show-file',
+									action: () => highlightModInProfile(instance.path, item.path),
+								},
+								{
+									id: 'copy-link',
+									shown: item.data !== undefined && item.data.slug !== undefined,
+									action: () => copyModLink(item),
+								},
+							]"
+							direction="left"
+						>
+							<MoreVerticalIcon />
+							<template #show-file> <ExternalIcon /> Show file </template>
+							<template #copy-link> <ClipboardCopyIcon /> Copy link </template>
+						</OverflowMenu>
+					</ButtonStyled>
+				</template>
+			</ContentListPanel>
+			<div class="flex justify-end mt-4">
+				<Pagination
+					v-if="search.length > 0"
+					:page="currentPage"
+					:count="Math.ceil(search.length / 20)"
+					:link-function="(page) => `?page=${page}`"
+					@switch-page="(page) => (currentPage = page)"
+				/>
+			</div>
+		</template>
+		<div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
+			<RadialHeader class="">
+				<div class="flex items-center gap-6 w-[32rem] mx-auto">
+					<img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
+					<span class="text-contrast font-bold text-xl"
+						>You haven't added any content to this instance yet.</span
+					>
+				</div>
+			</RadialHeader>
+			<div class="flex mt-4 mx-auto">
+				<AddContentButton :instance="instance" />
+			</div>
+		</div>
+		<ShareModalWrapper
+			ref="shareModal"
+			share-title="Sharing modpack content"
+			share-text="Check out the projects I'm using in my modpack!"
+			:open-in-new-tab="false"
+		/>
+		<ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
+		<ModpackVersionModal
+			v-if="instance.linked_data"
+			ref="modpackVersionModal"
+			:instance="instance"
+			:versions="props.versions"
+		/>
+	</div>
+</template>
+<script setup lang="ts">
+import {
+	CheckCircleIcon,
+	ClipboardCopyIcon,
+	CodeIcon,
+	DownloadIcon,
+	DropdownIcon,
+	ExternalIcon,
+	FileIcon,
+	FilterIcon,
+	LinkIcon,
+	MoreVerticalIcon,
+	SearchIcon,
+	ShareIcon,
+	SlashIcon,
+	TrashIcon,
+	UpdatedIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
+	ButtonStyled,
+	ContentListPanel,
+	defineMessages,
+	injectNotificationManager,
+	OverflowMenu,
+	Pagination,
+	RadialHeader,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
+import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
+import { formatProjectType } from '@modrinth/utils'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { useStorage } from '@vueuse/core'
+import dayjs from 'dayjs'
+import type { ComputedRef } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+import { TextInputIcon } from '@/assets/icons'
+import AddContentButton from '@/components/ui/AddContentButton.vue'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import ExportModal from '@/components/ui/ExportModal.vue'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import {
+	get_organization_many,
+	get_project_many,
+	get_team_many,
+	get_version,
+	get_version_many,
+} from '@/helpers/cache.js'
+import { profile_listener } from '@/helpers/events.js'
+import {
+	add_project_from_path,
+	get,
+	get_projects,
+	remove_project,
+	toggle_disable_project,
+	update_all,
+	update_project,
+} from '@/helpers/profile.js'
+import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
+import { highlightModInProfile } from '@/helpers/utils.js'
+import { installVersionDependencies } from '@/store/install'
+
+const { handleError } = injectNotificationManager()
+
+const props = defineProps<{
+	instance: GameInstance
+	options: InstanceType<typeof ContextMenu>
+	offline: boolean
+	playing: boolean
+	versions: Version[]
+	installed: boolean
+}>()
+
+type ProjectListEntryAuthor = {
+	name: string
+	slug: string
+	type: 'user' | 'organization'
+}
+
+type ProjectListEntry = {
+	path: string
+	name: string
+	slug?: string
+	author: ProjectListEntryAuthor | null
+	version: string | null
+	file_name: string
+	icon: string | undefined
+	disabled: boolean
+	updateVersion?: string
+	outdated: boolean
+	updated: dayjs.Dayjs
+	project_type: string
+	id?: string
+	updating?: boolean
+	selected?: boolean
+}
+
+const isPackLocked = computed(() => {
+	return props.instance.linked_data && props.instance.linked_data.locked
+})
+const canUpdatePack = computed(() => {
+	if (!props.instance.linked_data || !props.versions || !props.versions[0]) return false
+	return props.instance.linked_data.version_id !== props.versions[0].id
+})
+const exportModal = ref(null)
+
+const projects = ref<ProjectListEntry[]>([])
+const selectedFiles = ref<string[]>([])
+const selectedProjects = computed(() =>
+	projects.value.filter((x) => selectedFiles.value.includes(x.file_name)),
+)
+
+const selectionMap = ref(new Map())
+
+const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
+	const newProjects: ProjectListEntry[] = []
+
+	const profileProjects = (await get_projects(props.instance.path, cacheBehaviour)) as Record<
+		string,
+		ContentFile
+	>
+	const fetchProjects = []
+	const fetchVersions = []
+
+	for (const value of Object.values(profileProjects)) {
+		if (value.metadata) {
+			fetchProjects.push(value.metadata.project_id)
+			fetchVersions.push(value.metadata.version_id)
+		}
+	}
+
+	const [modrinthProjects, modrinthVersions] = await Promise.all([
+		(await get_project_many(fetchProjects).catch(handleError)) as Project[],
+		(await get_version_many(fetchVersions).catch(handleError)) as Version[],
+	])
+
+	const [modrinthTeams, modrinthOrganizations] = await Promise.all([
+		(await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError)) as TeamMember[][],
+		(await get_organization_many(
+			modrinthProjects.map((x) => x.organization).filter((x) => !!x),
+		).catch(handleError)) as Organization[],
+	])
+
+	for (const [path, file] of Object.entries(profileProjects)) {
+		if (file.metadata) {
+			const project = modrinthProjects.find((x) => file.metadata?.project_id === x.id)
+			const version = modrinthVersions.find((x) => file.metadata?.version_id === x.id)
+
+			if (project && version) {
+				const org = project.organization
+					? modrinthOrganizations.find((x) => x.id === project.organization)
+					: null
+
+				const team = modrinthTeams.find((x) => x[0].team_id === project.team)
+
+				let author: ProjectListEntryAuthor | null = null
+				if (org) {
+					author = {
+						name: org.name,
+						slug: org.slug,
+						type: 'organization',
+					}
+				} else if (team) {
+					const teamMember = team.find((x) => x.is_owner)
+					if (teamMember) {
+						author = {
+							name: teamMember.user.username,
+							slug: teamMember.user.username,
+							type: 'user',
+						}
+					}
+				}
+
+				newProjects.push({
+					path,
+					name: project.title,
+					slug: project.slug,
+					author,
+					version: version.version_number,
+					file_name: file.file_name,
+					icon: project.icon_url,
+					disabled: file.file_name.endsWith('.disabled'),
+					updateVersion: file.update_version_id,
+					updated: dayjs(version.date_published),
+					outdated: !!file.update_version_id,
+					project_type: project.project_type,
+					id: project.id,
+				})
+			}
+
+			continue
+		}
+
+		newProjects.push({
+			path,
+			name: file.file_name.replace('.disabled', ''),
+			author: null,
+			version: null,
+			file_name: file.file_name,
+			icon: undefined,
+			disabled: file.file_name.endsWith('.disabled'),
+			outdated: false,
+			updated: dayjs(0),
+			project_type: file.project_type === 'shaderpack' ? 'shader' : file.project_type,
+		})
+	}
+
+	projects.value = newProjects ?? []
+
+	const newSelectionMap = new Map()
+	for (const project of projects.value) {
+		newSelectionMap.set(
+			project.path,
+			selectionMap.value.get(project.path) ??
+				selectionMap.value.get(project.path.slice(0, -9)) ??
+				selectionMap.value.get(project.path + '.disabled') ??
+				false,
+		)
+	}
+	selectionMap.value = newSelectionMap
+}
+await initProjects()
+
+const modpackVersionModal = ref<InstanceType<typeof ModpackVersionModal> | null>()
+const installing = computed(() => props.instance.install_stage !== 'installed')
+
+const vintl = useVIntl()
+const { formatMessage } = vintl
+
+type FilterOption = {
+	id: string
+	formattedName: string
+}
+
+const messages = defineMessages({
+	updatesAvailableFilter: {
+		id: 'instance.filter.updates-available',
+		defaultMessage: 'Updates available',
+	},
+	disabledFilter: {
+		id: 'instance.filter.disabled',
+		defaultMessage: 'Disabled projects',
+	},
+})
+
+const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
+	const options: FilterOption[] = []
+
+	const frequency = projects.value.reduce((map: Record<string, number>, item) => {
+		map[item.project_type] = (map[item.project_type] || 0) + 1
+		return map
+	}, {})
+
+	const types = Object.keys(frequency).sort((a, b) => frequency[b] - frequency[a])
+
+	types.forEach((type) => {
+		options.push({
+			id: type,
+			formattedName: formatProjectType(type) + 's',
+		})
+	})
+
+	if (!isPackLocked.value && projects.value.some((m) => m.outdated)) {
+		options.push({
+			id: 'updates',
+			formattedName: formatMessage(messages.updatesAvailableFilter),
+		})
+	}
+
+	if (projects.value.some((m) => m.disabled)) {
+		options.push({
+			id: 'disabled',
+			formattedName: formatMessage(messages.disabledFilter),
+		})
+	}
+
+	return options
+})
+
+const selectedFilters = useStorage<string[]>(
+	`${props.instance.name}-mod-selected-filters`,
+	[],
+	sessionStorage,
+	{ mergeDefaults: true },
+)
+
+const filteredProjects = computed(() => {
+	const updatesFilter = selectedFilters.value.includes('updates')
+	const disabledFilter = selectedFilters.value.includes('disabled')
+
+	const typeFilters = selectedFilters.value.filter(
+		(filter) => filter !== 'updates' && filter !== 'disabled',
+	)
+
+	return projects.value.filter((project) => {
+		return (
+			(typeFilters.length === 0 || typeFilters.includes(project.project_type)) &&
+			(!updatesFilter || project.outdated) &&
+			(!disabledFilter || project.disabled)
+		)
+	})
+})
+
+watch(filterOptions, () => {
+	for (let i = 0; i < selectedFilters.value.length; i++) {
+		const option = selectedFilters.value[i]
+		if (!filterOptions.value.some((x) => x.id === option)) {
+			selectedFilters.value.splice(i, 1)
+		}
+	}
+})
+
+function toggleArray<T>(array: T[], value: T) {
+	if (array.includes(value)) {
+		array.splice(array.indexOf(value), 1)
+	} else {
+		array.push(value)
+	}
+}
+
+const searchFilter = ref('')
+const selectAll = ref(false)
+const shareModal = ref<InstanceType<typeof ShareModalWrapper> | null>()
+const ascending = ref(true)
+const sortColumn = ref('Name')
+const currentPage = ref(1)
+
+const selected = computed(() =>
+	Array.from(selectionMap.value)
+		.filter((args) => {
+			return args[1]
+		})
+		.map((args) => {
+			return projects.value.find((x) => x.path === args[0])
+		}),
+)
+
+const functionValues = computed(() =>
+	selectedProjects.value.length > 0 ? selectedProjects.value : Array.from(projects.value.values()),
+)
+
+const search = computed(() => {
+	const filtered = filteredProjects.value.filter((mod) => {
+		return mod.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	})
+
+	switch (sortColumn.value) {
+		case 'Updated':
+			return filtered.slice().sort((a, b) => {
+				const updated = a.updated.isAfter(b.updated) ? 1 : -1
+				return ascending.value ? -updated : updated
+			})
+		default:
+			return filtered
+				.slice()
+				.sort((a, b) =>
+					ascending.value ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name),
+				)
+	}
+})
+
+watch([sortColumn, ascending, selectedFilters.value, searchFilter], () => (currentPage.value = 1))
+
+const sortProjects = (filter: string) => {
+	if (sortColumn.value === filter) {
+		ascending.value = !ascending.value
+	} else {
+		sortColumn.value = filter
+		ascending.value = true
+	}
+}
+
+const updateAll = async () => {
+	const setProjects = []
+	const outdatedProjects = []
+
+	for (const [i, project] of projects.value.entries()) {
+		if (project.outdated) {
+			project.updating = true
+			setProjects.push(i)
+			if (project.updateVersion) {
+				outdatedProjects.push(project.updateVersion)
+			}
+		}
+	}
+
+	const paths = (await update_all(props.instance.path).catch(handleError)) as Record<string, string>
+
+	for (const [oldVal, newVal] of Object.entries(paths)) {
+		const index = projects.value.findIndex((x) => x.path === oldVal)
+		projects.value[index].path = newVal
+		projects.value[index].outdated = false
+
+		if (projects.value[index].updateVersion) {
+			projects.value[index].version = projects.value[index].updateVersion.version_number
+			projects.value[index].updateVersion = undefined
+		}
+	}
+
+	if (outdatedProjects.length > 0) {
+		const profile = await get(props.instance.path).catch(handleError)
+
+		if (profile) {
+			for (const versionId of outdatedProjects) {
+				const versionData = await get_version(versionId, 'must_revalidate').catch(handleError)
+
+				if (versionData) {
+					await installVersionDependencies(profile, versionData).catch(handleError)
+				}
+			}
+		}
+	}
+
+	for (const project of setProjects) {
+		projects.value[project].updating = false
+	}
+
+	trackEvent('InstanceUpdateAll', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		count: setProjects.length,
+		selected: selected.value.length > 1,
+	})
+}
+
+const updateProject = async (mod: ProjectListEntry) => {
+	mod.updating = true
+	await new Promise((resolve) => setTimeout(resolve, 0))
+	mod.path = await update_project(props.instance.path, mod.path).catch(handleError)
+
+	if (mod.updateVersion) {
+		const versionData = await get_version(mod.updateVersion, 'must_revalidate').catch(handleError)
+
+		if (versionData) {
+			const profile = await get(props.instance.path).catch(handleError)
+
+			if (profile) {
+				await installVersionDependencies(profile, versionData).catch(handleError)
+			}
+		}
+	}
+
+	mod.updating = false
+
+	mod.outdated = false
+	mod.version = mod.updateVersion?.version_number
+	mod.updateVersion = undefined
+
+	trackEvent('InstanceProjectUpdate', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		id: mod.id,
+		name: mod.name,
+		project_type: mod.project_type,
+	})
+}
+
+const locks: Record<string, string | null> = {}
+
+const toggleDisableMod = async (mod: ProjectListEntry) => {
+	// Use mod's id as the key for the lock. If mod doesn't have a unique id, replace `mod.id` with some unique property.
+	const lock = locks[mod.file_name]
+
+	while (lock) {
+		await new Promise((resolve) => {
+			setTimeout((value: unknown) => resolve(value), 100)
+		})
+	}
+
+	locks[mod.file_name] = 'lock'
+
+	try {
+		mod.path = await toggle_disable_project(props.instance.path, mod.path)
+		mod.disabled = !mod.disabled
+
+		trackEvent('InstanceProjectDisable', {
+			loader: props.instance.loader,
+			game_version: props.instance.game_version,
+			id: mod.id,
+			name: mod.name,
+			project_type: mod.project_type,
+			disabled: mod.disabled,
+		})
+	} catch (err) {
+		handleError(err)
+	}
+
+	locks[mod.file_name] = null
+}
+
+const removeMod = async (mod: ContentItem<ProjectListEntry>) => {
+	await remove_project(props.instance.path, mod.path).catch(handleError)
+	projects.value = projects.value.filter((x) => mod.path !== x.path)
+
+	trackEvent('InstanceProjectRemove', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		id: mod.data.id,
+		name: mod.data.name,
+		project_type: mod.data.project_type,
+	})
+}
+
+const copyModLink = async (mod: ContentItem<ProjectListEntry>) => {
+	await navigator.clipboard.writeText(
+		`https://modrinth.com/${mod.data.project_type}/${mod.data.slug}`,
+	)
+}
+
+const deleteSelected = async () => {
+	for (const project of functionValues.value) {
+		await remove_project(props.instance.path, project.path).catch(handleError)
+	}
+
+	projects.value = projects.value.filter((x) => !x.selected)
+}
+
+const shareNames = async () => {
+	await shareModal.value?.show(functionValues.value.map((x) => x.name).join('\n'))
+}
+
+const shareFileNames = async () => {
+	await shareModal.value?.show(functionValues.value.map((x) => x.file_name).join('\n'))
+}
+
+const shareUrls = async () => {
+	await shareModal.value?.show(
+		functionValues.value
+			.filter((x) => x.slug)
+			.map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
+			.join('\n'),
+	)
+}
+
+const shareMarkdown = async () => {
+	await shareModal.value?.show(
+		functionValues.value
+			.map((x) => {
+				if (x.slug) {
+					return `[${x.name}](https://modrinth.com/${x.project_type}/${x.slug})`
+				}
+				return x.name
+			})
+			.join('\n'),
+	)
+}
+
+const updateSelected = async () => {
+	const promises = []
+	for (const project of functionValues.value) {
+		if (project.outdated) promises.push(updateProject(project))
+	}
+	await Promise.all(promises).catch(handleError)
+}
+
+const enableAll = async () => {
+	const promises = []
+	for (const project of functionValues.value) {
+		if (project.disabled) {
+			promises.push(toggleDisableMod(project))
+		}
+	}
+	await Promise.all(promises).catch(handleError)
+}
+
+const disableAll = async () => {
+	const promises = []
+	for (const project of functionValues.value) {
+		if (!project.disabled) {
+			promises.push(toggleDisableMod(project))
+		}
+	}
+	await Promise.all(promises).catch(handleError)
+}
+
+watch(selectAll, () => {
+	for (const [key, value] of Array.from(selectionMap.value)) {
+		if (value !== selectAll.value) {
+			selectionMap.value.set(key, selectAll.value)
+		}
+	}
+})
+
+const refreshingProjects = ref(false)
+async function refreshProjects() {
+	refreshingProjects.value = true
+	await initProjects('bypass')
+	refreshingProjects.value = false
+}
+
+const unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
+	if (event.payload.type !== 'drop') return
+
+	for (const file of event.payload.paths) {
+		if (file.endsWith('.mrpack')) continue
+		await add_project_from_path(props.instance.path, file).catch(handleError)
+	}
+	await initProjects()
+})
+
+const unlistenProfiles = await profile_listener(
+	async (event: { event: string; profile_path_id: string }) => {
+		if (
+			event.profile_path_id === props.instance.path &&
+			event.event === 'synced' &&
+			props.instance.install_stage !== 'pack_installing'
+		) {
+			await initProjects()
+		}
+	},
+)
+
+onUnmounted(() => {
+	unlisten()
+	unlistenProfiles()
+})
+</script>
+
+<style scoped lang="scss">
+.text-input {
+	width: 100%;
+}
+
+.manage {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.table {
+	margin-block-start: 0;
+	border-radius: var(--radius-lg);
+	border: 2px solid var(--color-bg);
+}
+
+.table-row {
+	grid-template-columns: min-content 2fr 1fr 13.25rem;
+
+	&.show-options {
+		grid-template-columns: min-content auto;
+
+		.options {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: var(--gap-md);
+		}
+	}
+}
+
+.static {
+	.table-row {
+		grid-template-areas: 'manage name version';
+		grid-template-columns: 4.25rem 1fr 1fr;
+	}
+
+	.name-cell {
+		grid-area: name;
+	}
+
+	.version {
+		grid-area: version;
+	}
+
+	.manage {
+		justify-content: center;
+		grid-area: manage;
+	}
+}
+
+.table-cell {
+	align-items: center;
+}
+
+.card-row {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-md);
+	justify-content: space-between;
+	background-color: var(--color-raised-bg);
+}
+
+.mod-card {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--gap-sm);
+	justify-content: flex-start;
+	margin-bottom: 0.5rem;
+	white-space: nowrap;
+	align-items: center;
+
+	:deep(.dropdown-row) {
+		.btn {
+			height: 2.5rem !important;
+		}
+	}
+
+	:deep(.btn) {
+		height: 2.5rem;
+	}
+
+	.dropdown-input {
+		flex-grow: 1;
+
+		.animated-dropdown {
+			width: unset;
+
+			:deep(.selected) {
+				border-radius: var(--radius-md) 0 0 var(--radius-md);
+			}
+		}
+
+		.iconified-input {
+			width: 100%;
+
+			input {
+				flex-basis: unset;
+			}
+		}
+
+		:deep(.animated-dropdown) {
+			.render-down {
+				border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
+			}
+
+			.options-wrapper {
+				margin-top: 0.25rem;
+				width: unset;
+				border-radius: var(--radius-md);
+			}
+
+			.options {
+				border-radius: var(--radius-md);
+				border: 1px solid var(--color);
+			}
+		}
+	}
+}
+
+.list-card {
+	margin-top: 0.5rem;
+}
+
+.text-combo {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.name-cell {
+	padding-left: 0;
+
+	.btn {
+		margin-left: var(--gap-sm);
+		min-width: unset;
+	}
+}
+
+.dropdown {
+	width: 7rem !important;
+}
+
+.sort {
+	padding-left: 0.5rem;
+}
+
+.second-row {
+	display: flex;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	gap: var(--gap-sm);
+
+	.chips {
+		flex-grow: 1;
+	}
+}
+
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: var(--gap-lg);
+
+	.button-group {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+	}
+
+	strong {
+		color: var(--color-contrast);
+	}
+}
+
+.mod-content {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+
+	.mod-text {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.title {
+		color: var(--color-contrast);
+		font-weight: bolder;
+	}
+}
+
+.actions-cell {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+
+	.btn {
+		height: unset;
+		width: unset;
+		padding: 0;
+
+		&.trash {
+			color: var(--color-red);
+		}
+
+		&.update {
+			color: var(--color-green);
+		}
+
+		&.share {
+			color: var(--color-blue);
+		}
+	}
+}
+
+.more-box {
+	display: flex;
+	background-color: var(--color-bg);
+	padding: var(--gap-lg);
+
+	.options {
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: row;
+		gap: var(--gap-md);
+		flex-grow: 1;
+	}
+}
+
+.btn {
+	&.transparent {
+		height: unset;
+		width: unset;
+		padding: 0;
+		color: var(--color-base);
+		gap: var(--gap-xs);
+		white-space: nowrap;
+
+		svg {
+			margin-right: 0 !important;
+			transition: transform 0.2s ease-in-out;
+
+			&.open {
+				transform: rotate(90deg);
+			}
+
+			&.down {
+				transform: rotate(180deg);
+			}
+		}
+	}
+}
+.empty-prompt {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--gap-md);
+	height: 100%;
+	width: 100%;
+	margin: auto;
+
+	.empty-icon {
+		svg {
+			width: 10rem;
+			height: 10rem;
+			color: var(--color-contrast);
+		}
+	}
+
+	p,
+	h3 {
+		margin: 0;
+	}
+}
+</style>
+
+<style lang="scss">
+.select-checkbox {
+	button.checkbox {
+		border: none;
+		margin: 0;
+	}
+}
+
+.search-input {
+	min-height: 2.25rem;
+	background-color: var(--color-raised-bg);
+}
+
+.top-box {
+	background-image: radial-gradient(
+		50% 100% at 50% 100%,
+		var(--color-brand-highlight) 10%,
+		#ffffff00 100%
+	);
+}
+
+.top-box-divider {
+	background-image: linear-gradient(90deg, #ffffff00 0%, var(--color-brand) 50%, #ffffff00 100%);
+	width: 100%;
+	height: 1px;
+	opacity: 0.8;
+}
+</style>
diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index 357e33a3c1..21a5ccbf3d 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -223,10 +223,7 @@
 	:where(input) {
 		box-sizing: border-box;
 		max-height: 40px;
-
-		&:not(.stylized-toggle) {
-			max-width: 100%;
-		}
+		max-width: 100%;
 	}
 
 	:where(.adjacent-input, &.adjacent-input) {
@@ -271,10 +268,6 @@
 			&:not(&.small) {
 				flex-direction: column;
 				align-items: flex-start;
-
-				.stylized-toggle {
-					flex-basis: 0;
-				}
 			}
 		}
 	}
@@ -650,64 +643,6 @@ tr.button-transparent {
 	}
 }
 
-.switch {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	-webkit-tap-highlight-color: transparent;
-	cursor: pointer;
-
-	&:focus {
-		//outline: 0; Bad for accessibility
-	}
-}
-
-.stylized-toggle {
-	@extend .button-base;
-
-	box-sizing: content-box;
-	min-height: 32px;
-	height: 32px;
-	width: 52px;
-	max-width: 52px;
-	border-radius: var(--size-rounded-max);
-	display: inline-block;
-	position: relative;
-	margin: 0;
-	transition: all 0.2s ease;
-	background: var(--color-button-bg);
-
-	&:after {
-		content: '';
-		position: absolute;
-		top: 7px;
-		left: 7px;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: var(--color-toggle-handle);
-		transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
-		outline: 2px solid transparent;
-
-		@media (prefers-reduced-motion) {
-			transition: none;
-		}
-	}
-
-	&:checked {
-		background-color: var(--color-brand);
-
-		&:after {
-			transform: translatex(20px);
-			background: var(--color-brand-inverted);
-		}
-	}
-
-	&:hover &:focus {
-		background: var(--color-button-bg);
-	}
-}
-
 .textarea-wrapper {
 	display: flex;
 	flex-direction: column;
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index 51c554d8d7..a01337a9a4 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -60,8 +60,6 @@ html {
 	--color-button-bg-active: #c3c6cb;
 	--color-button-text-active: var(--color-button-text-hover);
 
-	--color-toggle-handle: var(--color-icon);
-
 	--color-dropdown-bg: var(--color-button-bg);
 	--color-dropdown-text: var(--color-button-text);
 
@@ -177,8 +175,6 @@ html {
 	--color-button-bg-active: #616570;
 	--color-button-text-active: var(--color-button-text-hover);
 
-	--color-toggle-handle: var(--color-button-text);
-
 	--color-dropdown-bg: var(--color-button-bg);
 	--color-dropdown-text: var(--color-button-text);
 
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
index 0b31fce762..2c9072a731 100644
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
@@ -32,12 +32,7 @@
 						<label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
 							Erase all data
 						</label>
-						<input
-							id="modpack-hard-reset"
-							v-model="hardReset"
-							class="switch stylized-toggle shrink-0"
-							type="checkbox"
-						/>
+						<Toggle id="modpack-hard-reset" v-model="hardReset" class="shrink-0" />
 					</div>
 					<div>
 						If enabled, existing mods, worlds, and configurations, will be deleted before installing
@@ -69,7 +64,7 @@
 
 <script setup lang="ts">
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager, NewModal } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, NewModal, Toggle } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
@@ -158,9 +153,3 @@ const hide = () => modal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
index 436b938f80..d3d76f60f6 100644
--- a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
@@ -53,12 +53,7 @@
 								<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
 									Erase all data
 								</label>
-								<input
-									id="hard-reset"
-									v-model="hardReset"
-									class="switch stylized-toggle shrink-0"
-									type="checkbox"
-								/>
+								<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
 							</div>
 							<div>
 								Removes all data on your server, including your worlds, mods, and configuration
@@ -128,6 +123,7 @@ import {
 	ButtonStyled,
 	injectNotificationManager,
 	NewModal,
+	Toggle,
 } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 import { onMounted, onUnmounted } from 'vue'
@@ -255,9 +251,3 @@ const hide = () => mrpackModal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
index 71b5609f89..c465180bb2 100644
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -143,12 +143,7 @@
 						<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
 							Erase all data
 						</label>
-						<input
-							id="hard-reset"
-							v-model="hardReset"
-							class="switch stylized-toggle shrink-0"
-							type="checkbox"
-						/>
+						<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
 					</div>
 					<div>
 						Removes all data on your server, including your worlds, mods, and configuration files,
@@ -542,9 +537,3 @@ const hide = () => versionSelectModal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/ServerInstallation.vue b/apps/frontend/src/components/ui/servers/ServerInstallation.vue
index 56ac895f4d..88a7db3ffe 100644
--- a/apps/frontend/src/components/ui/servers/ServerInstallation.vue
+++ b/apps/frontend/src/components/ui/servers/ServerInstallation.vue
@@ -274,10 +274,6 @@ watch(
 </script>
 
 <style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-
 .button-base:active {
 	scale: none !important;
 }
diff --git a/apps/frontend/src/composables/servers/modrinth-servers.ts b/apps/frontend/src/composables/servers/modrinth-servers.ts
index 2b02457a28..b7987ee3fa 100644
--- a/apps/frontend/src/composables/servers/modrinth-servers.ts
+++ b/apps/frontend/src/composables/servers/modrinth-servers.ts
@@ -2,7 +2,7 @@ import type { AbstractWebNotificationManager } from '@modrinth/ui'
 import type { JWTAuth, ModuleError, ModuleName } from '@modrinth/utils'
 import { ModrinthServerError } from '@modrinth/utils'
 
-import { ContentModule, GeneralModule, NetworkModule, StartupModule } from './modules/index.ts'
+import { GeneralModule, NetworkModule, StartupModule } from './modules/index.ts'
 import { useServersFetch } from './servers-fetch.ts'
 
 export function handleServersError(err: any, notifications: AbstractWebNotificationManager) {
@@ -27,7 +27,6 @@ export class ModrinthServer {
 	private errors: Partial<Record<ModuleName, ModuleError>> = {}
 
 	readonly general: GeneralModule
-	readonly content: ContentModule
 	readonly network: NetworkModule
 	readonly startup: StartupModule
 
@@ -35,7 +34,6 @@ export class ModrinthServer {
 		this.serverId = serverId
 
 		this.general = new GeneralModule(this)
-		this.content = new ContentModule(this)
 		this.network = new NetworkModule(this)
 		this.startup = new StartupModule(this)
 	}
@@ -209,7 +207,7 @@ export class ModrinthServer {
 		},
 	): Promise<void> {
 		const modulesToRefresh =
-			modules.length > 0 ? modules : (['general', 'content', 'network', 'startup'] as ModuleName[])
+			modules.length > 0 ? modules : (['general', 'network', 'startup'] as ModuleName[])
 
 		for (const module of modulesToRefresh) {
 			this.errors[module] = undefined
@@ -238,9 +236,6 @@ export class ModrinthServer {
 						}
 						break
 					}
-					case 'content':
-						await this.content.fetch()
-						break
 					case 'network':
 						await this.network.fetch()
 						break
@@ -250,11 +245,6 @@ export class ModrinthServer {
 				}
 			} catch (error) {
 				if (error instanceof ModrinthServerError) {
-					if (error.statusCode === 404 && module === 'content') {
-						console.debug(`Optional ${module} resource not found:`, error.message)
-						continue
-					}
-
 					if (error.statusCode && error.statusCode >= 500) {
 						console.debug(`Temporary ${module} unavailable:`, error.message)
 						continue
diff --git a/apps/frontend/src/composables/servers/modules/content.ts b/apps/frontend/src/composables/servers/modules/content.ts
deleted file mode 100644
index 2db34b7691..0000000000
--- a/apps/frontend/src/composables/servers/modules/content.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ContentType, Mod } from '@modrinth/utils'
-
-import { useServersFetch } from '../servers-fetch.ts'
-import { ServerModule } from './base.ts'
-
-export class ContentModule extends ServerModule {
-	data: Mod[] = []
-
-	async fetch(): Promise<void> {
-		const mods = await useServersFetch<Mod[]>(`servers/${this.serverId}/mods`, {}, 'content')
-		this.data = mods.sort((a, b) => (a?.name ?? '').localeCompare(b?.name ?? ''))
-	}
-
-	async install(contentType: ContentType, projectId: string, versionId: string): Promise<void> {
-		await useServersFetch(`servers/${this.serverId}/mods`, {
-			method: 'POST',
-			body: {
-				rinth_ids: { project_id: projectId, version_id: versionId },
-				install_as: contentType,
-			},
-		})
-	}
-
-	async remove(path: string): Promise<void> {
-		await useServersFetch(`servers/${this.serverId}/deleteMod`, {
-			method: 'POST',
-			body: { path },
-		})
-	}
-
-	async reinstall(replace: string, projectId: string, versionId: string): Promise<void> {
-		await useServersFetch(`servers/${this.serverId}/mods/update`, {
-			method: 'POST',
-			body: { replace, project_id: projectId, version_id: versionId },
-		})
-	}
-}
diff --git a/apps/frontend/src/composables/servers/modules/index.ts b/apps/frontend/src/composables/servers/modules/index.ts
index 62fe2c45f8..ea54fce52d 100644
--- a/apps/frontend/src/composables/servers/modules/index.ts
+++ b/apps/frontend/src/composables/servers/modules/index.ts
@@ -1,6 +1,5 @@
 export * from './backups.ts'
 export * from './base.ts'
-export * from './content.ts'
 export * from './general.ts'
 export * from './network.ts'
 export * from './startup.ts'
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/members.vue b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
index 6892f3838f..0d8cce9895 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
@@ -353,11 +353,9 @@
 							monetization weights to this user on the project.
 						</span>
 					</label>
-					<input
+					<Toggle
 						:id="`member-${allOrgMembers[index].user.username}-override-perms`"
 						v-model="allOrgMembers[index].override"
-						class="switch stylized-toggle"
-						type="checkbox"
 						:disabled="(props.currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
 					/>
 				</div>
@@ -536,6 +534,7 @@ import {
 	Checkbox,
 	ConfirmModal,
 	injectNotificationManager,
+	Toggle,
 } from '@modrinth/ui'
 import { Multiselect } from 'vue-multiselect'
 
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 777025dd24..e436e48724 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -12,22 +12,26 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@modrinth/ui'
 import {
 	Avatar,
 	Button,
 	ButtonStyled,
 	Checkbox,
+	defineMessages,
 	DropdownSelect,
+	injectModrinthClient,
 	injectNotificationManager,
 	NewProjectCard,
 	Pagination,
 	SearchFilterControl,
 	SearchSidebarFilter,
 	type SortType,
+	Toggle,
 	useSearch,
+	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString, cycleValue, type Mod as InstallableMod } from '@modrinth/utils'
+import { capitalizeString, cycleValue } from '@modrinth/utils'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useThrottleFn } from '@vueuse/core'
 import { computed, type Reactive, watch } from 'vue'
 
@@ -40,10 +44,13 @@ import type { DisplayLocation, DisplayMode } from '~/plugins/cosmetics.ts'
 
 const { formatMessage } = useVIntl()
 
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
 const filtersMenuOpen = ref(false)
 
-const route = useNativeRoute()
-const router = useNativeRouter()
+const route = useRoute()
+const router = useRouter()
 
 const cosmetics = useCosmetics()
 const tags = useGeneratedState()
@@ -72,6 +79,48 @@ const server = ref<Reactive<ModrinthServer>>()
 const serverHideInstalled = ref(false)
 const eraseDataOnInstall = ref(false)
 
+const currentServerId = computed(() => queryAsString(route.query.sid) || null)
+
+// TanStack Query for server content list
+const contentQueryKey = computed(() => ['content', 'list', currentServerId.value ?? ''] as const)
+const { data: serverContentData, error: serverContentError } = useQuery({
+	queryKey: contentQueryKey,
+	queryFn: () => client.archon.content_v0.list(currentServerId.value!),
+	enabled: computed(() => !!currentServerId.value),
+})
+
+// Watch for errors and notify user
+watch(serverContentError, (error) => {
+	if (error) {
+		console.error('Failed to load server content:', error)
+		handleError(error)
+	}
+})
+
+// Install content mutation
+const installContentMutation = useMutation({
+	mutationFn: ({
+		serverId,
+		type,
+		projectId,
+		versionId,
+	}: {
+		serverId: string
+		type: 'mod' | 'plugin'
+		projectId: string
+		versionId: string
+	}) =>
+		client.archon.content_v0.install(serverId, {
+			rinth_ids: { project_id: projectId, version_id: versionId },
+			install_as: type,
+		}),
+	onSuccess: () => {
+		if (currentServerId.value) {
+			queryClient.invalidateQueries({ queryKey: ['content', 'list', currentServerId.value] })
+		}
+	},
+})
+
 const PERSISTENT_QUERY_PARAMS = ['sid', 'shi']
 
 async function updateServerContext() {
@@ -89,7 +138,7 @@ async function updateServerContext() {
 		}
 
 		if (!server.value || server.value.serverId !== serverId) {
-			server.value = await useModrinthServers(serverId, ['general', 'content'])
+			server.value = await useModrinthServers(serverId, ['general'])
 		}
 
 		if (route.query.shi && projectType.value?.id !== 'modpack' && server.value) {
@@ -147,10 +196,10 @@ const serverFilters = computed(() => {
 			})
 		}
 
-		if (serverHideInstalled.value) {
-			const installedMods = server.value.content?.data
-				.filter((x: InstallableMod) => x.project_id)
-				.map((x: InstallableMod) => x.project_id)
+		if (serverHideInstalled.value && serverContentData.value) {
+			const installedMods = serverContentData.value
+				.filter((x) => x.project_id)
+				.map((x) => x.project_id)
 				.filter((id): id is string => id !== undefined)
 
 			installedMods
@@ -251,12 +300,20 @@ async function serverInstall(project: InstallableSearchResult) {
 			project.installed = true
 			navigateTo(`/hosting/manage/${server.value.serverId}/options/loader`)
 		} else if (projectType.value?.id === 'mod') {
-			await server.value.content.install('mod', version.project_id, version.id)
-			await server.value.refresh(['content'])
+			await installContentMutation.mutateAsync({
+				serverId: server.value.serverId,
+				type: 'mod',
+				projectId: version.project_id,
+				versionId: version.id,
+			})
 			project.installed = true
 		} else if (projectType.value?.id === 'plugin') {
-			await server.value.content.install('plugin', version.project_id, version.id)
-			await server.value.refresh(['content'])
+			await installContentMutation.mutateAsync({
+				serverId: server.value.serverId,
+				type: 'plugin',
+				projectId: version.project_id,
+				versionId: version.id,
+			})
 			project.installed = true
 		}
 	} catch (e) {
@@ -460,13 +517,7 @@ useSeoMeta({
 				</div>
 				<div class="flex flex-row items-center justify-between gap-2 px-6">
 					<label for="erase-data-on-install"> Erase all data on install </label>
-					<input
-						id="erase-data-on-install"
-						v-model="eraseDataOnInstall"
-						label="Erase all data on install"
-						class="switch stylized-toggle flex-none"
-						type="checkbox"
-					/>
+					<Toggle id="erase-data-on-install" v-model="eraseDataOnInstall" class="flex-none" />
 				</div>
 				<div class="px-6 py-4 text-sm">
 					If enabled, existing mods, worlds, and configurations, will be deleted before installing
@@ -643,10 +694,8 @@ useSeoMeta({
 								<button
 									v-if="
 										(result as InstallableSearchResult).installed ||
-										(server?.content?.data &&
-											server.content.data.find(
-												(x: InstallableMod) => x.project_id === result.project_id,
-											)) ||
+										(serverContentData &&
+											serverContentData.find((x) => x.project_id === result.project_id)) ||
 										server.general?.project?.id === result.project_id
 									"
 									disabled
@@ -909,8 +958,4 @@ useSeoMeta({
 	mask-image: linear-gradient(to bottom, black, transparent);
 	opacity: 0.25;
 }
-
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
 </style>
diff --git a/apps/frontend/src/pages/flags.vue b/apps/frontend/src/pages/flags.vue
index 8c7376c253..18536bc08a 100644
--- a/apps/frontend/src/pages/flags.vue
+++ b/apps/frontend/src/pages/flags.vue
@@ -1,67 +1,76 @@
 <script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import { Toggle } from '@modrinth/ui'
+import Fuse from 'fuse.js'
+import { computed, ref, shallowReactive } from 'vue'
+
 import {
 	DEFAULT_FEATURE_FLAGS,
 	type FeatureFlag,
 	saveFeatureFlags,
+	useFeatureFlags,
 } from '~/composables/featureFlags.ts'
 
 const flags = shallowReactive(useFeatureFlags().value)
+const searchQuery = ref('')
+
+const allFlags = computed(() => Object.keys(flags) as FeatureFlag[])
+
+const fuse = computed(
+	() =>
+		new Fuse(allFlags.value, {
+			threshold: 0.4,
+		}),
+)
+
+const filteredFlags = computed(() => {
+	if (!searchQuery.value.trim()) {
+		return allFlags.value
+	}
+	return fuse.value.search(searchQuery.value).map((result) => result.item)
+})
 </script>
 
 <template>
-	<div class="page">
-		<h1>Feature flags</h1>
-		<div class="flags">
+	<div class="mx-auto my-4 box-border w-[calc(100%-2rem)] max-w-[800px]">
+		<h1 class="mb-4 text-2xl font-bold text-contrast">Feature flags</h1>
+		<div class="relative mb-2">
+			<SearchIcon
+				class="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-secondary"
+			/>
+			<input
+				v-model="searchQuery"
+				type="search"
+				placeholder="Search flags..."
+				class="w-full rounded-xl bg-bg-raised py-2 pl-10 pr-4"
+			/>
+		</div>
+		<div class="flex flex-col gap-2">
 			<div
-				v-for="flag in Object.keys(flags) as FeatureFlag[]"
+				v-for="flag in filteredFlags"
 				:key="`flag-${flag}`"
-				class="adjacent-input small card"
+				class="flex flex-row flex-wrap items-center gap-2 rounded-2xl bg-bg-raised p-4"
 			>
-				<label :for="`toggle-${flag}`">
-					<span class="label__title">
+				<label :for="`toggle-${flag}`" class="flex-1">
+					<span class="block font-semibold capitalize">
 						{{ flag.replaceAll('_', ' ') }}
 					</span>
-					<span class="label__description">
-						<p>
-							Default:
-							<span
-								:style="`color:var(--color-${
-									DEFAULT_FEATURE_FLAGS[flag] === false ? 'red' : 'green'
-								})`"
-								>{{ DEFAULT_FEATURE_FLAGS[flag] }}</span
-							>
-						</p>
-					</span>
+					<p class="m-0 text-secondary">
+						Default:
+						<span :class="DEFAULT_FEATURE_FLAGS[flag] === false ? 'text-red' : 'text-green'">
+							{{ DEFAULT_FEATURE_FLAGS[flag] }}
+						</span>
+					</p>
 				</label>
-				<input
+				<Toggle
 					:id="`toggle-${flag}`"
 					v-model="flags[flag]"
-					class="switch stylized-toggle"
-					type="checkbox"
-					@change="() => saveFeatureFlags()"
+					@update:model-value="() => saveFeatureFlags()"
 				/>
 			</div>
+			<p v-if="filteredFlags.length === 0" class="text-center text-secondary">
+				No flags found matching "{{ searchQuery }}"
+			</p>
 		</div>
 	</div>
 </template>
-
-<style lang="scss" scoped>
-.page {
-	width: calc(100% - 2 * var(--spacing-card-md));
-	max-width: 800px;
-	margin-inline: auto;
-	box-sizing: border-box;
-	margin-block: var(--spacing-card-md);
-}
-
-.flags {
-}
-
-.label__title {
-	text-transform: capitalize;
-}
-
-.label__description p {
-	margin: 0;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content.vue b/apps/frontend/src/pages/hosting/manage/[id]/content.vue
index 5a0bb5d922..2cf5866be1 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/content.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/content.vue
@@ -1,21 +1,13 @@
-<template>
-	<div class="flex h-full w-full flex-col">
-		<NuxtPage :route="route" :server="props.server" />
-	</div>
-</template>
-
 <script setup lang="ts">
-import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
-
-const route = useNativeRoute()
+import { injectModrinthServerContext, ServersManageContentPage } from '@modrinth/ui'
 
-const props = defineProps<{
-	server: ModrinthServer
-}>()
-
-const data = computed(() => props.server.general)
+const { server } = injectModrinthServerContext()
 
 useHead({
-	title: `Content - ${data.value?.name ?? 'Server'} - Modrinth`,
+	title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,
 })
 </script>
+
+<template>
+	<ServersManageContentPage />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
deleted file mode 100644
index f4bdc02862..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
+++ /dev/null
@@ -1,706 +0,0 @@
-<template>
-	<ContentVersionEditModal
-		v-if="!invalidModal"
-		ref="versionEditModal"
-		:type="type"
-		:mod-pack="Boolean(props.server.general?.upstream)"
-		:game-version="props.server.general?.mc_version ?? ''"
-		:loader="props.server.general?.loader?.toLowerCase() ?? ''"
-		:server-id="props.server.serverId"
-		@change-version="changeModVersion($event)"
-	/>
-
-	<div
-		v-if="server.moduleErrors.content"
-		class="flex w-full flex-col items-center justify-center gap-4 p-4"
-	>
-		<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-			<div class="flex flex-col items-center text-center">
-				<div class="flex flex-col items-center gap-4">
-					<div class="grid place-content-center rounded-full bg-bg-orange p-4">
-						<IssuesIcon class="size-12 text-orange" />
-					</div>
-					<h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load content</h1>
-				</div>
-				<p class="text-lg text-secondary">
-					We couldn't load your server's {{ type.toLowerCase() }}s. Here's what we know:
-					<span class="break-all font-mono">{{
-						JSON.stringify(server.moduleErrors.content.error)
-					}}</span>
-				</p>
-				<ButtonStyled size="large" color="brand" @click="() => server.refresh(['content'])">
-					<button class="mt-6 !w-full">Retry</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</div>
-
-	<div v-else-if="server.general && localMods" class="relative isolate flex h-full w-full flex-col">
-		<div ref="pyroContentSentinel" class="sentinel" data-pyro-content-sentinel />
-		<div class="relative flex h-full w-full flex-col">
-			<div class="sticky top-0 z-20 -mt-3 flex items-center justify-between bg-bg py-3">
-				<div class="flex w-full flex-col-reverse items-center gap-2 sm:flex-row">
-					<div class="flex w-full items-center gap-2">
-						<div class="relative flex-1 text-sm">
-							<label class="sr-only" for="search">Search</label>
-							<SearchIcon
-								class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-								aria-hidden="true"
-							/>
-							<input
-								id="search"
-								v-model="searchInput"
-								class="!h-9 !min-h-0 w-full border-[1px] border-solid border-button-border pl-9"
-								type="search"
-								name="search"
-								autocomplete="off"
-								:placeholder="`Search ${localMods.length} ${type.toLocaleLowerCase()}s...`"
-								@input="debouncedSearch"
-							/>
-						</div>
-						<ButtonStyled>
-							<TeleportOverflowMenu
-								position="bottom"
-								direction="left"
-								:aria-label="`Filter ${type}s`"
-								:options="[
-									{ id: 'all', action: () => (filterMethod = 'all') },
-									{ id: 'enabled', action: () => (filterMethod = 'enabled') },
-									{ id: 'disabled', action: () => (filterMethod = 'disabled') },
-								]"
-							>
-								<span class="hidden whitespace-pre sm:block">
-									{{ filterMethodLabel }}
-								</span>
-								<FilterIcon aria-hidden="true" />
-								<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-								<template #all> All {{ type.toLocaleLowerCase() }}s </template>
-								<template #enabled> Only enabled </template>
-								<template #disabled> Only disabled </template>
-							</TeleportOverflowMenu></ButtonStyled
-						>
-					</div>
-					<div v-if="hasMods" class="flex w-full items-center gap-2 sm:w-fit">
-						<ButtonStyled>
-							<button class="w-full text-nowrap sm:w-fit" @click="initiateFileUpload">
-								<FileIcon />
-								Add file
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<nuxt-link
-								class="w-full text-nowrap sm:w-fit"
-								:to="`/discover/${type.toLocaleLowerCase()}s?sid=${props.server.serverId}`"
-							>
-								<PlusIcon />
-								Add {{ type.toLocaleLowerCase() }}
-							</nuxt-link>
-						</ButtonStyled>
-					</div>
-				</div>
-			</div>
-			<FilesUploadDropdown
-				ref="uploadDropdownRef"
-				class="rounded-xl bg-bg-raised"
-				:margin-bottom="16"
-				:file-type="type"
-				:current-path="`/${type.toLocaleLowerCase()}s`"
-				:accepted-types="acceptFileFromProjectType(type.toLocaleLowerCase()).split(',')"
-				@upload-complete="() => props.server.refresh(['content'])"
-			/>
-			<FilesUploadDragAndDrop
-				v-if="server.general && localMods"
-				class="relative min-h-[50vh]"
-				overlay-class="rounded-xl border-2 border-dashed border-secondary"
-				:type="type"
-				@files-dropped="handleDroppedFiles"
-			>
-				<div v-if="hasFilteredMods" class="flex flex-col gap-2 transition-all">
-					<div ref="listContainer" class="relative w-full">
-						<div :style="{ position: 'relative', height: `${totalHeight}px` }">
-							<div
-								:style="{
-									position: 'absolute',
-									top: `${visibleTop}px`,
-									width: '100%',
-								}"
-							>
-								<template v-for="mod in visibleItems.items" :key="getStableModKey(mod)">
-									<div
-										class="relative mb-2 flex w-full items-center justify-between rounded-xl bg-bg-raised"
-										:class="mod.disabled ? 'bg-table-alternateRow text-secondary' : ''"
-										style="height: 64px"
-									>
-										<NuxtLink
-											:to="
-												mod.project_id
-													? `/project/${mod.project_id}/version/${mod.version_id}`
-													: `files?path=${type.toLocaleLowerCase()}s`
-											"
-											class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
-											draggable="false"
-										>
-											<Avatar
-												:src="mod.icon_url"
-												size="sm"
-												alt="Server Icon"
-												:class="mod.disabled ? 'opacity-75 grayscale' : ''"
-											/>
-											<div class="flex min-w-0 flex-col gap-1">
-												<span class="text-md flex min-w-0 items-center gap-2 font-bold">
-													<span class="truncate text-contrast">{{ friendlyModName(mod) }}</span>
-													<span
-														v-if="mod.disabled"
-														class="hidden rounded-full bg-button-bg p-1 px-2 text-xs text-contrast sm:block"
-														>Disabled</span
-													>
-												</span>
-												<div class="min-w-0 text-xs text-secondary">
-													<span v-if="mod.owner" class="hidden sm:block"> by {{ mod.owner }} </span>
-													<span class="block font-semibold sm:hidden">
-														{{ mod.version_number || `External ${type.toLocaleLowerCase()}` }}
-													</span>
-												</div>
-											</div>
-										</NuxtLink>
-										<div class="ml-2 hidden min-w-0 flex-1 flex-col text-sm sm:flex">
-											<div class="truncate font-semibold text-contrast">
-												<span v-tooltip="`${type} version`">{{
-													mod.version_number || `External ${type.toLocaleLowerCase()}`
-												}}</span>
-											</div>
-											<div class="truncate">
-												<span v-tooltip="`${type} file name`">
-													{{ mod.filename }}
-												</span>
-											</div>
-										</div>
-										<div
-											class="flex items-center justify-end gap-2 pr-4 font-semibold text-contrast sm:min-w-44"
-										>
-											<ButtonStyled color="red" type="transparent">
-												<button
-													v-tooltip="`Delete ${type.toLocaleLowerCase()}`"
-													:disabled="mod.changing"
-													class="!hidden sm:!block"
-													@click="removeMod(mod)"
-												>
-													<TrashIcon />
-												</button>
-											</ButtonStyled>
-											<ButtonStyled type="transparent">
-												<button
-													v-tooltip="
-														mod.project_id
-															? `Edit ${type.toLocaleLowerCase()} version`
-															: `External ${type.toLocaleLowerCase()}s cannot be edited`
-													"
-													:disabled="mod.changing || !mod.project_id"
-													class="!hidden sm:!block"
-													@click="showVersionModal(mod)"
-												>
-													<template v-if="mod.changing">
-														<LoadingIcon class="animate-spin" />
-													</template>
-													<template v-else>
-														<EditIcon />
-													</template>
-												</button>
-											</ButtonStyled>
-
-											<!-- Dropdown for mobile -->
-											<div class="mr-2 flex items-center sm:hidden">
-												<LoadingIcon
-													v-if="mod.changing"
-													class="mr-2 h-5 w-5 animate-spin"
-													style="color: var(--color-base)"
-												/>
-												<ButtonStyled v-else circular type="transparent">
-													<TeleportOverflowMenu
-														:options="[
-															{
-																id: 'edit',
-																action: () => showVersionModal(mod),
-																shown: !!(mod.project_id && !mod.changing),
-															},
-															{
-																id: 'delete',
-																action: () => removeMod(mod),
-															},
-														]"
-													>
-														<MoreVerticalIcon aria-hidden="true" />
-														<template #edit>
-															<EditIcon class="h-5 w-5" />
-															<span>Edit</span>
-														</template>
-														<template #delete>
-															<TrashIcon class="h-5 w-5" />
-															<span>Delete</span>
-														</template>
-													</TeleportOverflowMenu></ButtonStyled
-												>
-											</div>
-
-											<input
-												:id="`toggle-${getStableModKey(mod)}`"
-												:checked="!mod.disabled"
-												:disabled="mod.changing"
-												class="switch stylized-toggle"
-												type="checkbox"
-												@change="toggleMod(mod)"
-											/>
-										</div>
-									</div>
-								</template>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- no mods has platform -->
-				<div
-					v-else-if="
-						props.server.general?.loader &&
-						props.server.general?.loader.toLocaleLowerCase() !== 'vanilla'
-					"
-					class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
-				>
-					<div
-						v-if="!hasFilteredMods && hasMods"
-						class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
-					>
-						<SearchIcon class="size-24" />
-						<p class="m-0 font-bold text-contrast">
-							No {{ type.toLocaleLowerCase() }}s found for your query!
-						</p>
-						<p class="m-0">Try another query, or show everything.</p>
-						<ButtonStyled>
-							<button @click="showAll">
-								<ListIcon />
-								Show everything
-							</button>
-						</ButtonStyled>
-					</div>
-					<div
-						v-else
-						class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
-					>
-						<PackageClosedIcon class="size-24" />
-						<p class="m-0 font-bold text-contrast">No {{ type.toLocaleLowerCase() }}s found!</p>
-						<p class="m-0">
-							Add some {{ type.toLocaleLowerCase() }}s to your server to manage them here.
-						</p>
-						<div class="flex flex-row items-center gap-4">
-							<ButtonStyled type="outlined">
-								<button class="w-full text-nowrap sm:w-fit" @click="initiateFileUpload">
-									<FileIcon />
-									Add file
-								</button>
-							</ButtonStyled>
-							<ButtonStyled color="brand">
-								<nuxt-link
-									class="w-full text-nowrap sm:w-fit"
-									:to="`/discover/${type.toLocaleLowerCase()}s?sid=${props.server.serverId}`"
-								>
-									<PlusIcon />
-									Add {{ type.toLocaleLowerCase() }}
-								</nuxt-link>
-							</ButtonStyled>
-						</div>
-					</div>
-				</div>
-				<div v-else class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center">
-					<LoaderIcon loader="Vanilla" class="size-24" />
-					<p class="m-0 pt-3 font-bold text-contrast">Your server is running Vanilla Minecraft</p>
-					<p class="m-0">
-						Add content to your server by installing a modpack or choosing a different platform that
-						supports {{ type }}s.
-					</p>
-					<div class="flex flex-row items-center gap-4">
-						<ButtonStyled class="mt-8">
-							<NuxtLink :to="`/discover/modpacks?sid=${props.server.serverId}`">
-								<CompassIcon />
-								Find a modpack
-							</NuxtLink>
-						</ButtonStyled>
-						<div>or</div>
-						<ButtonStyled class="mt-8">
-							<NuxtLink :to="`/hosting/manage/${props.server.serverId}/options/loader`">
-								<WrenchIcon />
-								Change platform
-							</NuxtLink>
-						</ButtonStyled>
-					</div>
-				</div>
-			</FilesUploadDragAndDrop>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	CompassIcon,
-	DropdownIcon,
-	EditIcon,
-	FileIcon,
-	FilterIcon,
-	IssuesIcon,
-	ListIcon,
-	MoreVerticalIcon,
-	PackageClosedIcon,
-	PlusIcon,
-	SearchIcon,
-	TrashIcon,
-	WrenchIcon,
-} from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
-import type { Mod } from '@modrinth/utils'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import ContentVersionEditModal from '~/components/ui/servers/ContentVersionEditModal.vue'
-import FilesUploadDragAndDrop from '~/components/ui/servers/FilesUploadDragAndDrop.vue'
-import FilesUploadDropdown from '~/components/ui/servers/FilesUploadDropdown.vue'
-import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
-import LoadingIcon from '~/components/ui/servers/icons/LoadingIcon.vue'
-import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
-import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
-import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
-
-const { addNotification } = injectNotificationManager()
-const client = injectModrinthClient()
-
-const props = defineProps<{
-	server: ModrinthServer
-}>()
-
-const type = computed(() => {
-	const loader = props.server.general?.loader?.toLowerCase()
-	return loader === 'paper' || loader === 'purpur' ? 'Plugin' : 'Mod'
-})
-
-interface ContentItem extends Mod {
-	changing?: boolean
-}
-
-const ITEM_HEIGHT = 72
-const BUFFER_SIZE = 5
-
-const listContainer = ref<HTMLElement | null>(null)
-const windowScrollY = ref(0)
-const windowHeight = ref(0)
-
-const localMods = ref<ContentItem[]>([])
-
-const searchInput = ref('')
-const modSearchInput = ref('')
-const filterMethod = ref('all')
-
-const uploadDropdownRef = ref()
-
-const versionEditModal = ref()
-const currentEditMod = ref<ContentItem | null>(null)
-const invalidModal = computed(
-	() => !props.server.general?.mc_version || !props.server.general?.loader,
-)
-async function changeModVersion(event: string) {
-	const mod = currentEditMod.value
-
-	if (mod) mod.changing = true
-
-	try {
-		versionEditModal.value.hide()
-
-		// This will be used instead once backend implementation is done
-		// await props.server.content?.reinstall(
-		//   `/${type.value.toLowerCase()}s/${event.fileName}`,
-		//   currentMod.value.project_id,
-		//   currentVersion.value.id,
-		// );
-
-		await props.server.content?.install(
-			type.value.toLowerCase() as 'mod' | 'plugin',
-			mod?.project_id || '',
-			event,
-		)
-
-		await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod?.filename}`)
-
-		await props.server.refresh(['general', 'content'])
-	} catch (error) {
-		const errmsg = `Error changing mod version: ${error}`
-		console.error(errmsg)
-		addNotification({
-			text: errmsg,
-			type: 'error',
-		})
-		return
-	}
-	if (mod) mod.changing = false
-}
-
-function showVersionModal(mod: ContentItem) {
-	if (invalidModal.value || !mod?.project_id || !mod?.filename) {
-		const errmsg = invalidModal.value
-			? 'Data required for changing mod version was not found.'
-			: `${!mod?.project_id ? 'No mod project ID found' : 'No mod filename found'} for ${friendlyModName(mod!)}`
-		console.error(errmsg)
-		addNotification({
-			text: errmsg,
-			type: 'error',
-		})
-		return
-	}
-
-	currentEditMod.value = mod
-	versionEditModal.value.show(mod)
-}
-
-const handleDroppedFiles = (files: File[]) => {
-	files.forEach((file) => {
-		uploadDropdownRef.value?.uploadFile(file)
-	})
-}
-
-const initiateFileUpload = () => {
-	const input = document.createElement('input')
-	input.type = 'file'
-	input.accept = acceptFileFromProjectType(type.value.toLowerCase())
-	input.multiple = true
-	input.onchange = () => {
-		if (input.files) {
-			Array.from(input.files).forEach((file) => {
-				uploadDropdownRef.value?.uploadFile(file)
-			})
-		}
-	}
-	input.click()
-}
-
-const showAll = () => {
-	searchInput.value = ''
-	modSearchInput.value = ''
-	filterMethod.value = 'all'
-}
-
-const filterMethodLabel = computed(() => {
-	switch (filterMethod.value) {
-		case 'disabled':
-			return 'Only disabled'
-		case 'enabled':
-			return 'Only enabled'
-		default:
-			return `All ${type.value.toLocaleLowerCase()}s`
-	}
-})
-
-const totalHeight = computed(() => {
-	const itemsHeight = filteredMods.value.length * ITEM_HEIGHT
-	return itemsHeight
-})
-
-const getVisibleRange = () => {
-	if (!listContainer.value) return { start: 0, end: 0 }
-
-	const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY
-	const scrollTop = Math.max(0, windowScrollY.value - containerTop)
-
-	const start = Math.floor(scrollTop / ITEM_HEIGHT)
-	const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT)
-
-	return {
-		start: Math.max(0, start - BUFFER_SIZE),
-		end: Math.min(filteredMods.value.length, start + visibleCount + BUFFER_SIZE * 2),
-	}
-}
-
-const visibleTop = computed(() => {
-	const range = getVisibleRange()
-	return range.start * ITEM_HEIGHT
-})
-
-const visibleItems = computed(() => {
-	const range = getVisibleRange()
-	const items = filteredMods.value
-
-	return {
-		items: items.slice(Math.max(0, range.start), Math.min(items.length, range.end)),
-	}
-})
-
-const handleScroll = () => {
-	windowScrollY.value = window.scrollY
-}
-
-const handleResize = () => {
-	windowHeight.value = window.innerHeight
-}
-
-onMounted(() => {
-	windowHeight.value = window.innerHeight
-	window.addEventListener('scroll', handleScroll, { passive: true })
-	window.addEventListener('resize', handleResize, { passive: true })
-	handleScroll()
-})
-
-onUnmounted(() => {
-	window.removeEventListener('scroll', handleScroll)
-	window.removeEventListener('resize', handleResize)
-})
-
-watch(
-	() => props.server.content?.data,
-	(newMods) => {
-		if (newMods) {
-			localMods.value = [...newMods]
-		}
-	},
-	{ immediate: true },
-)
-
-const debounce = <T extends (...args: any[]) => void>(
-	func: T,
-	wait: number,
-): ((...args: Parameters<T>) => void) => {
-	let timeout: ReturnType<typeof setTimeout>
-	return function (...args: Parameters<T>): void {
-		clearTimeout(timeout)
-		timeout = setTimeout(() => func(...args), wait)
-	}
-}
-
-const pyroContentSentinel = ref<HTMLElement | null>(null)
-const debouncedSearch = debounce(() => {
-	modSearchInput.value = searchInput.value
-
-	if (pyroContentSentinel.value) {
-		const sentinelRect = pyroContentSentinel.value.getBoundingClientRect()
-		if (sentinelRect.top < 0 || sentinelRect.bottom > window.innerHeight) {
-			pyroContentSentinel.value.scrollIntoView({
-				// behavior: "smooth",
-				block: 'start',
-			})
-		}
-	}
-}, 300)
-
-function friendlyModName(mod: ContentItem) {
-	if (mod.name) return mod.name
-
-	// remove .disabled if at the end of the filename
-	let cleanName = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
-
-	// remove everything after the last dot
-	const lastDotIndex = cleanName.lastIndexOf('.')
-	if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex)
-	return cleanName
-}
-
-function getStableModKey(mod: ContentItem): string {
-	if (mod.project_id) {
-		return `project-${mod.project_id}`
-	}
-
-	// external file
-	const baseFilename = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
-	return `file-${baseFilename}`
-}
-
-async function toggleMod(mod: ContentItem) {
-	mod.changing = true
-
-	const originalFilename = mod.filename
-	try {
-		const newFilename = mod.filename.endsWith('.disabled')
-			? mod.filename.slice(0, -9)
-			: `${mod.filename}.disabled`
-
-		const folder = `${type.value.toLocaleLowerCase()}s`
-		const sourcePath = `/${folder}/${mod.filename}`
-		const destinationPath = `/${folder}/${newFilename}`
-
-		mod.disabled = newFilename.endsWith('.disabled')
-		mod.filename = newFilename
-
-		await client.kyros.files_v0.moveFileOrFolder(sourcePath, destinationPath)
-
-		await props.server.refresh(['general', 'content'])
-	} catch (error) {
-		mod.filename = originalFilename
-		mod.disabled = originalFilename.endsWith('.disabled')
-
-		console.error('Error toggling mod:', error)
-		addNotification({
-			text: `Something went wrong toggling ${friendlyModName(mod)}`,
-			type: 'error',
-		})
-	}
-
-	mod.changing = false
-}
-
-async function removeMod(mod: ContentItem) {
-	mod.changing = true
-
-	try {
-		await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod.filename}`)
-		await props.server.refresh(['general', 'content'])
-	} catch (error) {
-		console.error('Error removing mod:', error)
-
-		addNotification({
-			text: `couldn't remove ${mod.name || mod.filename}`,
-			type: 'error',
-		})
-	}
-
-	mod.changing = false
-}
-
-const hasMods = computed(() => {
-	return localMods.value?.length > 0
-})
-
-const hasFilteredMods = computed(() => {
-	return filteredMods.value?.length > 0
-})
-
-const filteredMods = computed(() => {
-	const mods = modSearchInput.value.trim()
-		? localMods.value.filter(
-				(mod) =>
-					mod.name?.toLowerCase().includes(modSearchInput.value.toLowerCase()) ||
-					mod.filename.toLowerCase().includes(modSearchInput.value.toLowerCase()),
-			)
-		: localMods.value
-
-	const statusFilteredMods = (() => {
-		switch (filterMethod.value) {
-			case 'disabled':
-				return mods.filter((mod) => mod.disabled)
-			case 'enabled':
-				return mods.filter((mod) => !mod.disabled)
-			default:
-				return mods
-		}
-	})()
-
-	return statusFilteredMods.sort((a, b) => {
-		return friendlyModName(a).localeCompare(friendlyModName(b))
-	})
-})
-</script>
-
-<style scoped>
-.sentinel {
-	position: absolute;
-	top: -1rem;
-	left: 0;
-	right: 0;
-	height: 1px;
-	visibility: hidden;
-}
-
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content_old.vue b/apps/frontend/src/pages/hosting/manage/[id]/content_old.vue
new file mode 100644
index 0000000000..6e3098125a
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/content_old.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { injectModrinthServerContext, ServersManageContentOldPage } from '@modrinth/ui'
+
+import { useGeneratedState } from '~/composables/generated'
+
+const { server } = injectModrinthServerContext()
+const generatedState = useGeneratedState()
+
+useHead({
+	title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,
+})
+
+const tags = computed(() => ({
+	gameVersions: generatedState.value.gameVersions,
+	loaders: generatedState.value.loaders,
+}))
+</script>
+
+<template>
+	<ServersManageContentOldPage :tags="tags" />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
index bb81742597..4102a6b5c7 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
@@ -21,11 +21,10 @@
 						</div>
 						<span>{{ prefConfig.description }}</span>
 					</label>
-					<input
+					<Toggle
 						:id="`pref-${key}`"
 						v-model="newUserPreferences[key]"
-						class="switch stylized-toggle flex-none"
-						type="checkbox"
+						class="flex-none"
 						:disabled="prefConfig.implemented === false"
 					/>
 				</div>
@@ -42,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { injectNotificationManager } from '@modrinth/ui'
+import { injectNotificationManager, Toggle } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
@@ -117,9 +116,3 @@ const resetPreferences = () => {
 	newUserPreferences.value = { ...userPreferences.value }
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
index 73f552282a..16c57e7ace 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
@@ -62,11 +62,9 @@
 							/>
 						</div>
 						<div v-else-if="typeof property === 'boolean'" class="flex justify-end">
-							<input
+							<Toggle
 								:id="`server-property-${index}`"
 								v-model="liveProperties[index]"
-								class="switch stylized-toggle"
-								type="checkbox"
 								:aria-labelledby="`property-label-${index}`"
 							/>
 						</div>
@@ -134,7 +132,7 @@
 
 <script setup lang="ts">
 import { EyeIcon, SearchIcon } from '@modrinth/assets'
-import { Combobox, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
+import { Combobox, injectModrinthClient, injectNotificationManager, Toggle } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, inject, ref, watch } from 'vue'
 
@@ -331,9 +329,3 @@ const isComplexProperty = (property: any): boolean => {
 	)
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
index c9699c2f28..50ff0fb78b 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
@@ -69,12 +69,7 @@
 							</span>
 						</div>
 						<div class="flex items-center gap-2">
-							<input
-								id="show-all-versions"
-								v-model="showAllVersions"
-								class="switch stylized-toggle flex-none"
-								type="checkbox"
-							/>
+							<Toggle id="show-all-versions" v-model="showAllVersions" class="flex-none" />
 							<label for="show-all-versions" class="text-sm">Show all Java versions</label>
 						</div>
 						<Combobox
@@ -113,7 +108,7 @@
 
 <script setup lang="ts">
 import { IssuesIcon, UpdatedIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, Toggle } from '@modrinth/ui'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
@@ -232,9 +227,3 @@ function resetToDefault() {
 	invocation.value = originalInvocation.value ?? ''
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index ad93ccbec6..a737dbc3bc 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -119,85 +119,78 @@
 		<section class="universal-card">
 			<h2 class="text-2xl">{{ formatMessage(toggleFeatures.title) }}</h2>
 			<p class="mb-4">{{ formatMessage(toggleFeatures.description) }}</p>
-			<div class="adjacent-input small">
-				<label for="advanced-rendering">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.advancedRenderingTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.advancedRenderingDescription) }}
-					</span>
-				</label>
-				<input
-					id="advanced-rendering"
-					v-model="cosmetics.advancedRendering"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div class="adjacent-input small">
-				<label for="external-links-new-tab">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.externalLinksNewTabTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.externalLinksNewTabDescription) }}
-					</span>
-				</label>
-				<input
-					id="external-links-new-tab"
-					v-model="cosmetics.externalLinksNewTab"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div v-if="false" class="adjacent-input small">
-				<label for="modrinth-app-promos">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.hideModrinthAppPromosDescription) }}
-					</span>
-				</label>
-				<input
-					id="modrinth-app-promos"
-					v-model="cosmetics.hideModrinthAppPromos"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div class="adjacent-input small">
-				<label for="search-layout-toggle">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarDescription) }}
-					</span>
-				</label>
-				<input
-					id="search-layout-toggle"
-					v-model="cosmetics.rightSearchLayout"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div class="adjacent-input small">
-				<label for="project-layout-toggle">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.leftAlignedContentSidebarTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.leftAlignedContentSidebarDescription) }}
-					</span>
-				</label>
-				<input
-					id="project-layout-toggle"
-					v-model="cosmetics.leftContentLayout"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="advanced-rendering" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.advancedRenderingTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.advancedRenderingDescription) }}
+						</span>
+					</label>
+					<Toggle id="advanced-rendering" v-model="cosmetics.advancedRendering" class="shrink-0" />
+				</div>
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="external-links-new-tab" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.externalLinksNewTabTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.externalLinksNewTabDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="external-links-new-tab"
+						v-model="cosmetics.externalLinksNewTab"
+						class="shrink-0"
+					/>
+				</div>
+				<div v-if="false" class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="modrinth-app-promos" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.hideModrinthAppPromosDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="modrinth-app-promos"
+						v-model="cosmetics.hideModrinthAppPromos"
+						class="shrink-0"
+					/>
+				</div>
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="search-layout-toggle" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="search-layout-toggle"
+						v-model="cosmetics.rightSearchLayout"
+						class="shrink-0"
+					/>
+				</div>
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="project-layout-toggle" class="">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.leftAlignedContentSidebarTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.leftAlignedContentSidebarDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="project-layout-toggle"
+						v-model="cosmetics.leftContentLayout"
+						class="shrink-0"
+					/>
+				</div>
 			</div>
 		</section>
 	</div>
@@ -212,6 +205,7 @@ import {
 	IntlFormatted,
 	normalizeChildren,
 	ThemeSelector,
+	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 82880a682d..7827bbcf4f 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -7,7 +7,7 @@ import { ArchonServersV0Module } from './archon/servers/v0'
 import { ArchonServersV1Module } from './archon/servers/v1'
 import { ISO3166Module } from './iso3166'
 import { KyrosFilesV0Module } from './kyros/files/v0'
-import { LabrinthVersionsV3Module } from './labrinth'
+import { LabrinthVersionsV2Module, LabrinthVersionsV3Module } from './labrinth'
 import { LabrinthBillingInternalModule } from './labrinth/billing/internal'
 import { LabrinthCollectionsModule } from './labrinth/collections'
 import { LabrinthProjectsV2Module } from './labrinth/projects/v2'
@@ -40,6 +40,7 @@ export const MODULE_REGISTRY = {
 	labrinth_projects_v3: LabrinthProjectsV3Module,
 	labrinth_state: LabrinthStateModule,
 	labrinth_tech_review_internal: LabrinthTechReviewInternalModule,
+	labrinth_versions_v2: LabrinthVersionsV2Module,
 	labrinth_versions_v3: LabrinthVersionsV3Module,
 } as const satisfies Record<string, ModuleConstructor>
 
diff --git a/packages/api-client/src/modules/labrinth/index.ts b/packages/api-client/src/modules/labrinth/index.ts
index 38bc3f22b6..c11216dfe6 100644
--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -4,4 +4,5 @@ export * from './projects/v2'
 export * from './projects/v3'
 export * from './state'
 export * from './tech-review/internal'
+export * from './versions/v2'
 export * from './versions/v3'
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index c36e1cb1c1..16546fea30 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -423,6 +423,12 @@ export namespace Labrinth {
 				game_versions: string[]
 				loaders: string[]
 			}
+
+			export interface GetProjectVersionsParams {
+				game_versions?: string[]
+				loaders?: string[]
+				include_changelog?: boolean
+			}
 		}
 
 		// TODO: consolidate duplicated types between v2 and v3 versions
@@ -437,6 +443,7 @@ export namespace Labrinth {
 			export interface GetProjectVersionsParams {
 				game_versions?: string[]
 				loaders?: string[]
+				include_changelog?: boolean
 			}
 
 			export type VersionChannel = 'release' | 'beta' | 'alpha'
diff --git a/packages/api-client/src/modules/labrinth/versions/v2.ts b/packages/api-client/src/modules/labrinth/versions/v2.ts
new file mode 100644
index 0000000000..750d91d53d
--- /dev/null
+++ b/packages/api-client/src/modules/labrinth/versions/v2.ts
@@ -0,0 +1,135 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Labrinth } from '../types'
+
+export class LabrinthVersionsV2Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'labrinth_versions_v2'
+	}
+
+	/**
+	 * Get versions for a project (v2)
+	 *
+	 * @param id - Project ID or slug (e.g., 'sodium' or 'AANobbMI')
+	 * @param options - Optional query parameters to filter versions
+	 * @returns Promise resolving to an array of v2 versions
+	 *
+	 * @example
+	 * ```typescript
+	 * const versions = await client.labrinth.versions_v2.getProjectVersions('sodium')
+	 * const filteredVersions = await client.labrinth.versions_v2.getProjectVersions('sodium', {
+	 *   game_versions: ['1.20.1'],
+	 *   loaders: ['fabric'],
+	 *   include_changelog: false
+	 * })
+	 * console.log(versions[0].version_number)
+	 * ```
+	 */
+	public async getProjectVersions(
+		id: string,
+		options?: Labrinth.Versions.v2.GetProjectVersionsParams,
+	): Promise<Labrinth.Versions.v2.Version[]> {
+		const params: Record<string, string> = {}
+		if (options?.game_versions?.length) {
+			params.game_versions = JSON.stringify(options.game_versions)
+		}
+		if (options?.loaders?.length) {
+			params.loaders = JSON.stringify(options.loaders)
+		}
+		if (options?.include_changelog === false) {
+			params.include_changelog = 'false'
+		}
+
+		return this.client.request<Labrinth.Versions.v2.Version[]>(`/project/${id}/version`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'GET',
+			params: Object.keys(params).length > 0 ? params : undefined,
+		})
+	}
+
+	/**
+	 * Get a specific version by ID (v2)
+	 *
+	 * @param id - Version ID
+	 * @returns Promise resolving to the v2 version data
+	 *
+	 * @example
+	 * ```typescript
+	 * const version = await client.labrinth.versions_v2.getVersion('DXtmvS8i')
+	 * console.log(version.version_number)
+	 * ```
+	 */
+	public async getVersion(id: string): Promise<Labrinth.Versions.v2.Version> {
+		return this.client.request<Labrinth.Versions.v2.Version>(`/version/${id}`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'GET',
+		})
+	}
+
+	/**
+	 * Get multiple versions by IDs (v2)
+	 *
+	 * @param ids - Array of version IDs
+	 * @returns Promise resolving to an array of v2 versions
+	 *
+	 * @example
+	 * ```typescript
+	 * const versions = await client.labrinth.versions_v2.getVersions(['DXtmvS8i', 'abc123'])
+	 * console.log(versions[0].version_number)
+	 * ```
+	 */
+	public async getVersions(ids: string[]): Promise<Labrinth.Versions.v2.Version[]> {
+		return this.client.request<Labrinth.Versions.v2.Version[]>(`/versions`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'GET',
+			params: { ids: JSON.stringify(ids) },
+		})
+	}
+
+	/**
+	 * Get a version from a project by version ID or number (v2)
+	 *
+	 * @param projectId - Project ID or slug
+	 * @param versionId - Version ID or version number
+	 * @returns Promise resolving to the v2 version data
+	 *
+	 * @example
+	 * ```typescript
+	 * const version = await client.labrinth.versions_v2.getVersionFromIdOrNumber('sodium', 'DXtmvS8i')
+	 * const versionByNumber = await client.labrinth.versions_v2.getVersionFromIdOrNumber('sodium', '0.4.12')
+	 * ```
+	 */
+	public async getVersionFromIdOrNumber(
+		projectId: string,
+		versionId: string,
+	): Promise<Labrinth.Versions.v2.Version> {
+		return this.client.request<Labrinth.Versions.v2.Version>(
+			`/project/${projectId}/version/${versionId}`,
+			{
+				api: 'labrinth',
+				version: 2,
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Delete a version by ID (v2)
+	 *
+	 * @param versionId - Version ID
+	 *
+	 * @example
+	 * ```typescript
+	 * await client.labrinth.versions_v2.deleteVersion('DXtmvS8i')
+	 * ```
+	 */
+	public async deleteVersion(versionId: string): Promise<void> {
+		return this.client.request(`/version/${versionId}`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'DELETE',
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/labrinth/versions/v3.ts b/packages/api-client/src/modules/labrinth/versions/v3.ts
index 914b030de7..e3ef64abd5 100644
--- a/packages/api-client/src/modules/labrinth/versions/v3.ts
+++ b/packages/api-client/src/modules/labrinth/versions/v3.ts
@@ -35,6 +35,9 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		if (options?.loaders?.length) {
 			params.loaders = JSON.stringify(options.loaders)
 		}
+		if (options?.include_changelog === false) {
+			params.include_changelog = 'false'
+		}
 
 		return this.client.request<Labrinth.Versions.v3.Version[]>(`/project/${id}/version`, {
 			api: 'labrinth',
diff --git a/packages/api-client/src/platform/nuxt.ts b/packages/api-client/src/platform/nuxt.ts
index 15a3613399..b74fd0bd4f 100644
--- a/packages/api-client/src/platform/nuxt.ts
+++ b/packages/api-client/src/platform/nuxt.ts
@@ -13,27 +13,32 @@ import { XHRUploadClient } from './xhr-upload-client'
  *
  * This provides cross-request persistence in SSR while also working in client-side.
  * State is shared between requests in the same Nuxt context.
+ *
+ * Note: useState must be called during initialization (in setup context) and cached,
+ * as it won't work during async operations when the Nuxt context may be lost.
  */
 export class NuxtCircuitBreakerStorage implements CircuitBreakerStorage {
-	private getState(): Map<string, CircuitBreakerState> {
+	private state: Map<string, CircuitBreakerState>
+
+	constructor() {
 		// @ts-expect-error - useState is provided by Nuxt runtime
-		const state = useState<Map<string, CircuitBreakerState>>(
+		const stateRef = useState<Map<string, CircuitBreakerState>>(
 			'circuit-breaker-state',
 			() => new Map(),
 		)
-		return state.value
+		this.state = stateRef.value
 	}
 
 	get(key: string): CircuitBreakerState | undefined {
-		return this.getState().get(key)
+		return this.state.get(key)
 	}
 
 	set(key: string, state: CircuitBreakerState): void {
-		this.getState().set(key, state)
+		this.state.set(key, state)
 	}
 
 	clear(key: string): void {
-		this.getState().delete(key)
+		this.state.delete(key)
 	}
 }
 
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index d4d6a72c0a..a0d62bf970 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -70,10 +70,7 @@
 	:where(input) {
 		box-sizing: border-box;
 		max-height: 40px;
-
-		&:not(.stylized-toggle) {
-			max-width: 100%;
-		}
+		max-width: 100%;
 	}
 
 	:where(.adjacent-input, &.adjacent-input) {
@@ -118,10 +115,6 @@
 			&:not(&.small) {
 				flex-direction: column;
 				align-items: start;
-
-				.stylized-toggle {
-					flex-basis: 0;
-				}
 			}
 		}
 	}
@@ -766,60 +759,6 @@ a,
 	}
 }
 
-.switch {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	-webkit-tap-highlight-color: transparent;
-	cursor: pointer;
-}
-
-.stylized-toggle {
-	@extend .button-base;
-
-	box-sizing: content-box;
-	min-height: 32px;
-	height: 32px;
-	min-width: 52px;
-	max-width: 52px;
-	border-radius: var(--radius-max);
-	display: inline-block;
-	position: relative;
-	margin: 0;
-	transition: all 0.2s ease;
-	background: var(--color-button-bg);
-
-	&:after {
-		content: '';
-		position: absolute;
-		top: 7px;
-		left: 7px;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: var(--color-gray);
-		transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
-		outline: 2px solid transparent;
-
-		@media (prefers-reduced-motion) {
-			transition: none;
-		}
-	}
-
-	&:checked {
-		background-color: var(--color-brand);
-
-		&:after {
-			transform: translatex(20px);
-			background: var(--color-accent-contrast);
-		}
-	}
-
-	&:hover &:focus {
-		background: var(--color-button-bg);
-	}
-}
-
 // TOOLTIPS
 
 .v-popper--theme-dropdown,
diff --git a/packages/tooling-config/tailwind/tailwind-preset.ts b/packages/tooling-config/tailwind/tailwind-preset.ts
index 3c6ca2a69e..e566b3f8ac 100644
--- a/packages/tooling-config/tailwind/tailwind-preset.ts
+++ b/packages/tooling-config/tailwind/tailwind-preset.ts
@@ -224,7 +224,7 @@ const config: Config = {
 				hr: 'var(--color-hr)',
 				table: {
 					border: 'var(--color-table-border)',
-					alternateRow: ' var(--color-table-alternate-row)',
+					alternateRow: 'var(--color-table-alternate-row)',
 				},
 			},
 			backgroundImage: {
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 2c3f329bcb..53ae7e64c1 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -2,6 +2,7 @@ import '@modrinth/assets/omorphia.scss'
 import 'floating-vue/dist/style.css'
 import '../src/styles/tailwind.css'
 
+import { GenericModrinthClient } from '@modrinth/api-client'
 import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
@@ -17,7 +18,10 @@ import {
 } from '../src/composables/i18n'
 import {
 	AbstractWebNotificationManager,
+	I18N_INJECTION_KEY,
+	type I18nContext,
 	type NotificationPanelLocation,
+	provideModrinthClient,
 	provideNotificationManager,
 	type WebNotification,
 } from '../src/providers'
@@ -77,6 +81,17 @@ class StorybookNotificationManager extends AbstractWebNotificationManager {
 
 setup((app) => {
 	app.use(i18n)
+
+	// Provide the custom I18nContext for components using injectI18n()
+	const i18nContext: I18nContext = {
+		locale: i18n.global.locale,
+		t: (key, values) => i18n.global.t(key, values ?? {}) as string,
+		setLocale: (newLocale) => {
+			i18n.global.locale.value = newLocale
+		},
+	}
+	app.provide(I18N_INJECTION_KEY, i18nContext)
+
 	app.use(FloatingVue, {
 		themes: {
 			'ribbit-popout': {
@@ -100,10 +115,15 @@ setup((app) => {
 	}
 })
 
-// Wrapper component that provides notification manager context
-const NotificationManagerProvider = defineComponent({
+const StorybookProvider = defineComponent({
 	setup(_, { slots }) {
 		provideNotificationManager(new StorybookNotificationManager())
+
+		const modrinthClient = new GenericModrinthClient({
+			userAgent: 'modrinth-storybook/1.0.0',
+		})
+		provideModrinthClient(modrinthClient)
+
 		return () => slots.default?.()
 	},
 })
@@ -126,14 +146,13 @@ const preview: Preview = {
 			},
 			defaultTheme: 'dark',
 		}),
-		// Wrap stories with notification manager provider
 		(story) => ({
-			components: { story, NotificationManagerProvider, NotificationPanel },
+			components: { story, StorybookProvider, NotificationPanel },
 			template: /*html*/ `
-				<NotificationManagerProvider>
+				<StorybookProvider>
 					<NotificationPanel />
 					<story />
-				</NotificationManagerProvider>
+				</StorybookProvider>
 			`,
 		}),
 	],
diff --git a/packages/ui/src/components/base/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index 06c42f8775..90a2bd40e6 100644
--- a/packages/ui/src/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
 	<img
-		v-if="src"
+		v-if="src && !failed"
 		ref="img"
 		class="`experimental-styles-within avatar shrink-0"
 		:style="`--_size: ${cssSize}`"
@@ -14,6 +14,7 @@
 		:alt="alt"
 		:loading="loading"
 		@load="updatePixelated"
+		@error="onError"
 	/>
 	<svg
 		v-else
@@ -45,10 +46,11 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const pixelated = ref(false)
 const img = ref(null)
+const failed = ref(false)
 
 const props = defineProps({
 	src: {
@@ -95,6 +97,18 @@ const LEGACY_PRESETS = {
 
 const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
 
+watch(
+	() => props.src,
+	() => {
+		failed.value = false
+	}
+)
+
+function onError(e) {
+	console.log('Avatar image failed to load:', props.src, e)
+	failed.value = true
+}
+
 function updatePixelated() {
 	if (img.value && img.value.naturalWidth && img.value.naturalWidth < 32) {
 		pixelated.value = true
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 41954c1773..9047296aad 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -22,6 +22,11 @@
 		>
 			<div class="flex items-center gap-2">
 				<slot name="prefix"></slot>
+				<component
+					:is="selectedOption?.icon"
+					v-if="showIconInSelected && selectedOption?.icon"
+					class="h-5 w-5"
+				/>
 				<span class="text-primary font-semibold leading-tight">
 					<slot name="selected">{{ triggerText }}</slot>
 				</span>
@@ -164,6 +169,7 @@ const props = withDefaults(
 		searchPlaceholder?: string
 		listbox?: boolean
 		showChevron?: boolean
+		showIconInSelected?: boolean
 		maxHeight?: number
 		displayValue?: string
 		extraPosition?: 'top' | 'bottom'
@@ -179,6 +185,7 @@ const props = withDefaults(
 		searchPlaceholder: 'Search...',
 		listbox: true,
 		showChevron: true,
+		showIconInSelected: false,
 		maxHeight: DEFAULT_MAX_HEIGHT,
 		extraPosition: 'bottom',
 		noOptionsMessage: 'No results found',
diff --git a/packages/ui/src/components/base/FloatingActionBar.vue b/packages/ui/src/components/base/FloatingActionBar.vue
index 3585aa9395..3671b8a5f6 100644
--- a/packages/ui/src/components/base/FloatingActionBar.vue
+++ b/packages/ui/src/components/base/FloatingActionBar.vue
@@ -6,9 +6,9 @@ defineProps<{
 
 <template>
 	<Transition name="floating-action-bar" appear>
-		<div v-if="shown" class="floating-action-bar fixed w-full z-10 left-0 p-4 bottom-0">
+		<div v-if="shown" class="floating-action-bar drop-shadow-2xl fixed z-10 p-4 bottom-0">
 			<div
-				class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
+				class="flex items-center gap-2 rounded-2xl bg-surface-3 border-2 border-surface-4 border-solid mx-auto max-w-[77rem] p-4"
 			>
 				<slot />
 			</div>
@@ -18,6 +18,8 @@ defineProps<{
 
 <style scoped>
 .floating-action-bar {
+	left: var(--left-bar-width, 0px);
+	right: var(--right-bar-width, 0px);
 	transition: bottom 0.25s ease-in-out;
 }
 
@@ -53,3 +55,9 @@ defineProps<{
 	}
 }
 </style>
+
+<style>
+.intercom-lightweight-app-launcher {
+	z-index: 9 !important;
+}
+</style>
diff --git a/packages/ui/src/components/base/Toggle.vue b/packages/ui/src/components/base/Toggle.vue
index 831c3d326c..fd49647ae5 100644
--- a/packages/ui/src/components/base/Toggle.vue
+++ b/packages/ui/src/components/base/Toggle.vue
@@ -1,19 +1,44 @@
 <template>
-	<input
+	<button
 		:id="id"
-		type="checkbox"
-		class="switch stylized-toggle"
+		type="button"
+		role="switch"
+		:aria-checked="modelValue"
 		:disabled="disabled"
-		:checked="checked"
-		@change="checked = !checked"
-	/>
+		class="relative inline-flex shrink-0 rounded-full m-0 transition-all duration-200 cursor-pointer border-none"
+		:class="[
+			small ? 'h-5 !w-[38px]' : 'h-8 !w-[52px]',
+			modelValue ? 'bg-brand' : 'bg-button-bg',
+			disabled ? 'opacity-50 cursor-not-allowed' : 'btn-wrapper',
+		]"
+		@click="toggle"
+	>
+		<span
+			class="absolute rounded-full transition-all duration-200"
+			:class="[
+				small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[18px] h-[18px] top-[7px] left-[7px]',
+				modelValue
+					? small
+						? 'translate-x-[18px] bg-black/90'
+						: 'translate-x-5 bg-black/90'
+					: 'bg-gray',
+			]"
+		/>
+	</button>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
 	id?: string
 	disabled?: boolean
+	small?: boolean
 }>()
 
-const checked = defineModel<boolean>()
+const modelValue = defineModel<boolean>()
+
+function toggle() {
+	if (!props.disabled) {
+		modelValue.value = !modelValue.value
+	}
+}
 </script>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 1f00fa63a7..7204b200dc 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -5,6 +5,7 @@ export * from './brand'
 export * from './changelog'
 export * from './chart'
 export * from './content'
+export * from './instances'
 export * from './modal'
 export * from './nav'
 export * from './page'
diff --git a/packages/ui/src/components/instances/ContentCardItem.vue b/packages/ui/src/components/instances/ContentCardItem.vue
new file mode 100644
index 0000000000..5a30f28757
--- /dev/null
+++ b/packages/ui/src/components/instances/ContentCardItem.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { DownloadIcon, MoreVerticalIcon, OrganizationIcon, TrashIcon } from '@modrinth/assets'
+import { computed, getCurrentInstance } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import AutoLink from '../base/AutoLink.vue'
+import Avatar from '../base/Avatar.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import Checkbox from '../base/Checkbox.vue'
+import { type Option as OverflowMenuOption } from '../base/OverflowMenu.vue'
+import Toggle from '../base/Toggle.vue'
+import TeleportOverflowMenu from '../servers/files/explorer/TeleportOverflowMenu.vue'
+import type { ContentCardProject, ContentCardVersion, ContentOwner } from './types'
+
+interface Props {
+	project: ContentCardProject
+	projectLink?: string | RouteLocationRaw
+	version?: ContentCardVersion
+	owner?: ContentOwner
+	enabled?: boolean
+	hasUpdate?: boolean
+	overflowOptions?: OverflowMenuOption[]
+	disabled?: boolean
+	showCheckbox?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+	projectLink: undefined,
+	version: undefined,
+	owner: undefined,
+	enabled: undefined,
+	hasUpdate: false,
+	overflowOptions: undefined,
+	disabled: false,
+	showCheckbox: false,
+})
+
+const selected = defineModel<boolean>('selected')
+
+const emit = defineEmits<{
+	'update:enabled': [value: boolean]
+	delete: []
+	update: []
+}>()
+
+const instance = getCurrentInstance()
+const hasDeleteListener = computed(() => typeof instance?.vnode.props?.onDelete === 'function')
+const hasUpdateListener = computed(() => typeof instance?.vnode.props?.onUpdate === 'function')
+
+const MAX_FILENAME_LENGTH = 42
+
+function truncateMiddle(str: string, maxLength: number): string {
+	if (str.length <= maxLength) return str
+	const ellipsis = '...'
+	const charsToShow = maxLength - ellipsis.length
+	const frontChars = Math.ceil(charsToShow / 2)
+	const backChars = Math.floor(charsToShow / 2)
+	return str.slice(0, frontChars) + ellipsis + str.slice(-backChars)
+}
+</script>
+
+<template>
+	<div
+		class="flex h-[74px] items-center justify-between gap-4 px-4"
+		:class="{ 'opacity-50': disabled }"
+	>
+		<div class="flex min-w-0 shrink-0 items-center gap-4" :class="showCheckbox ? 'w-[350px]' : ''">
+			<Checkbox
+				v-if="showCheckbox"
+				:model-value="selected ?? false"
+				:disabled="disabled"
+				class="shrink-0"
+				@update:model-value="selected = $event"
+			/>
+
+			<div class="flex min-w-0 items-center gap-3">
+				<Avatar
+					:src="project.icon_url"
+					:alt="project.title"
+					size="3rem"
+					no-shadow
+					class="shrink-0 rounded-2xl border border-surface-5"
+				/>
+				<div class="flex min-w-0 flex-col gap-0.5">
+					<AutoLink
+						:target="
+							typeof projectLink === 'string' && projectLink.startsWith('http')
+								? '_blank'
+								: undefined
+						"
+						:to="projectLink"
+						class="truncate font-semibold leading-6 text-contrast !decoration-contrast"
+						:class="{ 'hover:underline': projectLink }"
+					>
+						{{ project.title }}
+					</AutoLink>
+
+					<AutoLink
+						v-if="owner"
+						:target="
+							typeof owner.link === 'string' && owner.link.startsWith('http') ? '_blank' : undefined
+						"
+						:to="owner.link"
+						class="flex items-center gap-1 !decoration-secondary"
+						:class="{ 'hover:underline': owner.link }"
+					>
+						<Avatar
+							:src="owner.avatar_url"
+							:alt="owner.name"
+							size="1.5rem"
+							:circle="owner.type === 'user'"
+							no-shadow
+							class="shrink-0"
+						/>
+						<OrganizationIcon v-if="owner.type === 'organization'" class="size-4 text-secondary" />
+						<span class="text-sm leading-5 text-secondary">{{ owner.name }}</span>
+					</AutoLink>
+				</div>
+			</div>
+		</div>
+
+		<div class="hidden w-[335px] shrink-0 flex-col gap-0.5 md:flex">
+			<template v-if="version">
+				<span class="font-medium leading-6 text-contrast">{{ version.version_number }}</span>
+				<span
+					v-tooltip="version.file_name.length > MAX_FILENAME_LENGTH ? version.file_name : undefined"
+					class="leading-6 text-secondary"
+				>
+					{{ truncateMiddle(version.file_name, MAX_FILENAME_LENGTH) }}
+				</span>
+			</template>
+		</div>
+
+		<div class="flex shrink-0 items-center gap-2">
+			<slot name="additionalButtonsLeft" />
+
+			<ButtonStyled
+				v-if="hasUpdate && hasUpdateListener"
+				circular
+				type="transparent"
+				color="green"
+				color-fill="text"
+				hover-color-fill="background"
+			>
+				<button v-tooltip="'Update available'" :disabled="disabled" @click="emit('update')">
+					<DownloadIcon class="size-5" />
+				</button>
+			</ButtonStyled>
+
+			<Toggle
+				v-if="enabled !== undefined"
+				:model-value="enabled"
+				:disabled="disabled"
+				small
+				@update:model-value="(val) => emit('update:enabled', val as boolean)"
+			/>
+
+			<ButtonStyled v-if="hasDeleteListener" circular type="transparent">
+				<button v-tooltip="'Delete'" :disabled="disabled" @click="emit('delete')">
+					<TrashIcon class="size-5 text-secondary" />
+				</button>
+			</ButtonStyled>
+
+			<slot name="additionalButtonsRight" />
+
+			<ButtonStyled circular type="transparent">
+				<TeleportOverflowMenu
+					v-if="overflowOptions?.length"
+					:options="overflowOptions"
+					:disabled="disabled"
+				>
+					<MoreVerticalIcon class="size-5" />
+				</TeleportOverflowMenu>
+			</ButtonStyled>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/instances/ContentCardTable.vue b/packages/ui/src/components/instances/ContentCardTable.vue
new file mode 100644
index 0000000000..cb462c4233
--- /dev/null
+++ b/packages/ui/src/components/instances/ContentCardTable.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import Checkbox from '../base/Checkbox.vue'
+import ContentCardItem from './ContentCardItem.vue'
+import type {
+	ContentCardTableItem,
+	ContentCardTableSortColumn,
+	ContentCardTableSortDirection,
+} from './types'
+
+const BUFFER_SIZE = 5
+
+interface Props {
+	items: ContentCardTableItem[]
+	showSelection?: boolean
+	sortable?: boolean
+	sortBy?: ContentCardTableSortColumn
+	sortDirection?: ContentCardTableSortDirection
+	virtualized?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	showSelection: false,
+	sortable: false,
+	sortBy: undefined,
+	sortDirection: 'asc',
+	virtualized: true,
+})
+
+const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
+
+const emit = defineEmits<{
+	'update:enabled': [id: string, value: boolean]
+	delete: [id: string]
+	update: [id: string]
+	sort: [column: ContentCardTableSortColumn, direction: ContentCardTableSortDirection]
+}>()
+
+// Virtualization state
+const listContainer = ref<HTMLElement | null>(null)
+const scrollContainer = ref<HTMLElement | Window | null>(null)
+const scrollTop = ref(0)
+const viewportHeight = ref(0)
+const itemHeight = 74
+
+const totalHeight = computed(() => props.items.length * itemHeight)
+
+// Find the nearest scrollable ancestor
+function findScrollableAncestor(element: HTMLElement | null): HTMLElement | Window {
+	if (!element) return window
+
+	let current: HTMLElement | null = element.parentElement
+	while (current) {
+		const style = getComputedStyle(current)
+		const overflowY = style.overflowY
+		const isScrollable =
+			(overflowY === 'auto' || overflowY === 'scroll') &&
+			current.scrollHeight > current.clientHeight
+
+		if (isScrollable) {
+			return current
+		}
+		current = current.parentElement
+	}
+	return window
+}
+
+function getScrollTop(container: HTMLElement | Window): number {
+	if (container instanceof Window) {
+		return window.scrollY
+	}
+	return container.scrollTop
+}
+
+function getViewportHeight(container: HTMLElement | Window): number {
+	if (container instanceof Window) {
+		return window.innerHeight
+	}
+	return container.clientHeight
+}
+
+function getContainerOffset(listEl: HTMLElement, container: HTMLElement | Window): number {
+	if (container instanceof Window) {
+		return listEl.getBoundingClientRect().top + window.scrollY
+	}
+	// For element containers, get the offset relative to the scroll container
+	const listRect = listEl.getBoundingClientRect()
+	const containerRect = container.getBoundingClientRect()
+	return listRect.top - containerRect.top + container.scrollTop
+}
+
+const visibleRange = computed(() => {
+	if (!props.virtualized) {
+		return { start: 0, end: props.items.length }
+	}
+
+	if (!listContainer.value || !scrollContainer.value) return { start: 0, end: 0 }
+
+	const containerOffset = getContainerOffset(listContainer.value, scrollContainer.value)
+	const relativeScrollTop = Math.max(0, scrollTop.value - containerOffset)
+
+	const start = Math.floor(relativeScrollTop / itemHeight)
+	const visibleCount = Math.ceil(viewportHeight.value / itemHeight)
+
+	return {
+		start: Math.max(0, start - BUFFER_SIZE),
+		end: Math.min(props.items.length, start + visibleCount + BUFFER_SIZE * 2),
+	}
+})
+
+const visibleTop = computed(() => (props.virtualized ? visibleRange.value.start * itemHeight : 0))
+
+const visibleItems = computed(() =>
+	props.items.slice(visibleRange.value.start, visibleRange.value.end),
+)
+
+// Expose for perf monitoring
+defineExpose({
+	visibleRange,
+	visibleItems,
+})
+
+function handleScroll() {
+	if (scrollContainer.value) {
+		scrollTop.value = getScrollTop(scrollContainer.value)
+	}
+}
+
+function handleResize() {
+	if (scrollContainer.value) {
+		viewportHeight.value = getViewportHeight(scrollContainer.value)
+	}
+}
+
+onMounted(() => {
+	scrollContainer.value = findScrollableAncestor(listContainer.value)
+	viewportHeight.value = getViewportHeight(scrollContainer.value)
+	scrollTop.value = getScrollTop(scrollContainer.value)
+
+	scrollContainer.value.addEventListener('scroll', handleScroll, { passive: true })
+	window.addEventListener('resize', handleResize, { passive: true })
+})
+
+onUnmounted(() => {
+	if (scrollContainer.value) {
+		scrollContainer.value.removeEventListener('scroll', handleScroll)
+	}
+	window.removeEventListener('resize', handleResize)
+})
+
+// Selection logic
+const allSelected = computed(() => {
+	if (props.items.length === 0) return false
+	return props.items.every((item) => selectedIds.value.includes(item.id))
+})
+
+const someSelected = computed(() => {
+	return props.items.some((item) => selectedIds.value.includes(item.id)) && !allSelected.value
+})
+
+function toggleSelectAll() {
+	if (allSelected.value) {
+		selectedIds.value = []
+	} else {
+		selectedIds.value = props.items.map((item) => item.id)
+	}
+}
+
+function toggleItemSelection(itemId: string, selected: boolean) {
+	if (selected) {
+		if (!selectedIds.value.includes(itemId)) {
+			selectedIds.value = [...selectedIds.value, itemId]
+		}
+	} else {
+		selectedIds.value = selectedIds.value.filter((id) => id !== itemId)
+	}
+}
+
+function isItemSelected(itemId: string): boolean {
+	return selectedIds.value.includes(itemId)
+}
+
+function handleSort(column: ContentCardTableSortColumn) {
+	if (!props.sortable) return
+
+	const newDirection: ContentCardTableSortDirection =
+		props.sortBy === column && props.sortDirection === 'asc' ? 'desc' : 'asc'
+
+	emit('sort', column, newDirection)
+}
+</script>
+
+<template>
+	<div class="overflow-hidden rounded-[20px] border border-solid border-[1px] border-surface-3">
+		<div
+			class="flex h-12 items-center justify-between gap-4 bg-surface-3 px-4"
+			:class="showSelection ? '' : ''"
+		>
+			<div class="flex shrink-0 items-center gap-4" :class="showSelection ? 'w-[350px]' : ''">
+				<Checkbox
+					v-if="showSelection"
+					:model-value="allSelected"
+					:indeterminate="someSelected"
+					class="shrink-0"
+					@update:model-value="toggleSelectAll"
+				/>
+
+				<button
+					v-if="sortable"
+					class="flex items-center gap-1.5 font-semibold text-contrast"
+					@click="handleSort('project')"
+				>
+					Project
+					<ChevronUpIcon v-if="sortBy === 'project' && sortDirection === 'asc'" class="size-4" />
+					<ChevronDownIcon
+						v-else-if="sortBy === 'project' && sortDirection === 'desc'"
+						class="size-4"
+					/>
+				</button>
+				<span v-else class="font-semibold text-contrast">Project</span>
+			</div>
+
+			<div class="hidden w-[335px] shrink-0 md:block">
+				<button
+					v-if="sortable"
+					class="flex items-center gap-1.5 font-semibold text-secondary"
+					@click="handleSort('version')"
+				>
+					Version
+					<ChevronUpIcon v-if="sortBy === 'version' && sortDirection === 'asc'" class="size-4" />
+					<ChevronDownIcon
+						v-else-if="sortBy === 'version' && sortDirection === 'desc'"
+						class="size-4"
+					/>
+				</button>
+				<span v-else class="font-semibold text-secondary">Version</span>
+			</div>
+
+			<div class="shrink-0 text-right">
+				<span class="font-semibold text-secondary">Actions</span>
+			</div>
+		</div>
+
+		<div
+			v-if="items.length > 0 && virtualized"
+			ref="listContainer"
+			class="relative w-full rounded-b-[20px]"
+			:style="{ minHeight: `${totalHeight}px` }"
+		>
+			<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
+				<ContentCardItem
+					v-for="(item, idx) in visibleItems"
+					:key="item.id"
+					data-content-card-item
+					:project="item.project"
+					:project-link="item.projectLink"
+					:version="item.version"
+					:owner="item.owner"
+					:enabled="item.enabled"
+					:has-update="item.hasUpdate"
+					:overflow-options="item.overflowOptions"
+					:disabled="item.disabled"
+					:show-checkbox="showSelection"
+					:selected="isItemSelected(item.id)"
+					:class="[
+						(visibleRange.start + idx) % 2 === 1 ? 'bg-surface-1' : 'bg-surface-2',
+						'border-t border-solid border-[1px] border-surface-3',
+						visibleRange.start + idx === items.length - 1 ? 'rounded-b-[20px] !border-none' : '',
+					]"
+					@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+					@update:enabled="(val) => emit('update:enabled', item.id, val)"
+					@delete="emit('delete', item.id)"
+					@update="emit('update', item.id)"
+				>
+					<template #additionalButtonsLeft>
+						<slot name="itemButtonsLeft" :item="item" :index="visibleRange.start + idx" />
+					</template>
+					<template #additionalButtonsRight>
+						<slot name="itemButtonsRight" :item="item" :index="visibleRange.start + idx" />
+					</template>
+				</ContentCardItem>
+			</div>
+		</div>
+
+		<div v-else-if="items.length > 0" ref="listContainer" class="rounded-b-[20px]">
+			<ContentCardItem
+				v-for="(item, index) in items"
+				:key="item.id"
+				data-content-card-item
+				:project="item.project"
+				:project-link="item.projectLink"
+				:version="item.version"
+				:owner="item.owner"
+				:enabled="item.enabled"
+				:has-update="item.hasUpdate"
+				:overflow-options="item.overflowOptions"
+				:disabled="item.disabled"
+				:show-checkbox="showSelection"
+				:selected="isItemSelected(item.id)"
+				:class="[
+					index % 2 === 1 ? 'bg-surface-1' : 'bg-surface-2',
+					'border-t border-solid border-surface-3',
+					index === items.length - 1 ? 'rounded-b-[20px] !border-none' : '',
+				]"
+				@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+				@update:enabled="(val) => emit('update:enabled', item.id, val)"
+				@delete="emit('delete', item.id)"
+				@update="emit('update', item.id)"
+			>
+				<template #additionalButtonsLeft>
+					<slot name="itemButtonsLeft" :item="item" :index="index" />
+				</template>
+				<template #additionalButtonsRight>
+					<slot name="itemButtonsRight" :item="item" :index="index" />
+				</template>
+			</ContentCardItem>
+		</div>
+
+		<div v-else class="flex items-center justify-center rounded-b-[20px] py-12">
+			<slot name="empty">
+				<span class="text-secondary">No items</span>
+			</slot>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/instances/ContentModpackCard.vue b/packages/ui/src/components/instances/ContentModpackCard.vue
new file mode 100644
index 0000000000..40369e7a3b
--- /dev/null
+++ b/packages/ui/src/components/instances/ContentModpackCard.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import {
+	ClockIcon,
+	DownloadIcon,
+	HeartIcon,
+	MoreVerticalIcon,
+	OrganizationIcon,
+	UnlinkIcon,
+} from '@modrinth/assets'
+import { computed, getCurrentInstance } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import { useRelativeTime } from '../../composables/how-ago'
+import AutoLink from '../base/AutoLink.vue'
+import Avatar from '../base/Avatar.vue'
+import BulletDivider from '../base/BulletDivider.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import OverflowMenu, { type Option as OverflowMenuOption } from '../base/OverflowMenu.vue'
+import TagItem from '../base/TagItem.vue'
+import type {
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+	ContentOwner,
+} from './types'
+
+interface Props {
+	project: ContentModpackCardProject
+	projectLink?: string | RouteLocationRaw
+	version?: ContentModpackCardVersion
+	owner?: ContentOwner
+	categories?: ContentModpackCardCategory[]
+	disabled?: boolean
+	overflowOptions?: OverflowMenuOption[]
+}
+
+withDefaults(defineProps<Props>(), {
+	projectLink: undefined,
+	version: undefined,
+	owner: undefined,
+	categories: undefined,
+	disabled: false,
+	overflowOptions: undefined,
+})
+
+const emit = defineEmits<{
+	update: []
+	content: []
+	unlink: []
+}>()
+
+const instance = getCurrentInstance()
+const hasUpdateListener = computed(() => typeof instance?.vnode.props?.onUpdate === 'function')
+const hasContentListener = computed(() => typeof instance?.vnode.props?.onContent === 'function')
+const hasUnlinkListener = computed(() => typeof instance?.vnode.props?.onUnlink === 'function')
+
+const formatTimeAgo = useRelativeTime()
+
+const formatCompact = (n: number | undefined) => {
+	if (n === undefined) return ''
+	return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 }).format(n)
+}
+</script>
+
+<template>
+	<div
+		class="flex flex-col gap-4 rounded-[20px] bg-bg-raised p-6 shadow-md"
+		:class="{ 'opacity-50': disabled }"
+	>
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
+				<Avatar
+					:src="project.icon_url"
+					:alt="project.title"
+					size="5rem"
+					no-shadow
+					raised
+					class="shrink-0"
+				/>
+				<div class="flex flex-col gap-1.5">
+					<AutoLink
+						:to="projectLink"
+						class="text-2xl font-semibold leading-8 text-contrast hover:underline"
+					>
+						{{ project.title }}
+					</AutoLink>
+					<div class="flex flex-wrap items-center gap-2 text-secondary">
+						<template v-if="owner">
+							<AutoLink :to="owner.link" class="flex items-center gap-1.5 hover:underline">
+								<Avatar
+									:src="owner.avatar_url"
+									:alt="owner.name"
+									size="2rem"
+									:circle="owner.type === 'user'"
+									no-shadow
+								/>
+								<OrganizationIcon v-if="owner.type === 'organization'" class="size-4" />
+								<span class="font-medium">{{ owner.name }}</span>
+							</AutoLink>
+						</template>
+						<template v-if="owner && version">
+							<BulletDivider />
+						</template>
+						<template v-if="version">
+							<span class="font-medium">v{{ version.version_number }}</span>
+						</template>
+						<template v-if="version?.date_published">
+							<BulletDivider />
+							<div class="flex items-center gap-2">
+								<ClockIcon class="size-5" />
+								<span>{{ formatTimeAgo(new Date(version.date_published)) }}</span>
+							</div>
+						</template>
+					</div>
+				</div>
+			</div>
+
+			<div class="flex shrink-0 items-center gap-2">
+				<ButtonStyled v-if="hasUpdateListener" type="transparent" color="green" color-fill="text">
+					<button class="flex items-center gap-2" @click="emit('update')">
+						<DownloadIcon class="!text-green size-5" />
+						<span class="font-semibold">Update</span>
+					</button>
+				</ButtonStyled>
+
+				<ButtonStyled v-if="hasContentListener">
+					<button class="!shadow-none" @click="emit('content')">Content</button>
+				</ButtonStyled>
+
+				<ButtonStyled v-if="hasUnlinkListener" circular type="outlined">
+					<button
+						v-tooltip="'Unlink modpack'"
+						class="!border-surface-4 !border-[1px]"
+						@click="emit('unlink')"
+					>
+						<UnlinkIcon class="size-5" />
+					</button>
+				</ButtonStyled>
+
+				<ButtonStyled v-if="overflowOptions?.length" circular type="transparent">
+					<OverflowMenu :options="overflowOptions">
+						<MoreVerticalIcon class="size-5" />
+					</OverflowMenu>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<span v-if="project.description" class="text-secondary">
+			{{ project.description }}
+		</span>
+
+		<div class="flex flex-wrap items-center gap-3">
+			<div v-if="project.downloads !== undefined" class="flex items-center gap-2 text-secondary">
+				<DownloadIcon class="size-5" />
+				<span class="font-medium">{{ formatCompact(project.downloads) }}</span>
+			</div>
+
+			<div v-if="project.followers !== undefined" class="flex items-center gap-2 text-secondary">
+				<HeartIcon class="size-5" />
+				<span class="font-medium">{{ formatCompact(project.followers) }}</span>
+			</div>
+
+			<div v-if="categories?.length" class="flex flex-wrap gap-2">
+				<TagItem v-for="cat in categories" :key="cat.name" :action="cat.action">
+					{{ cat.name }}
+				</TagItem>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/instances/index.ts b/packages/ui/src/components/instances/index.ts
new file mode 100644
index 0000000000..b6bf41cd10
--- /dev/null
+++ b/packages/ui/src/components/instances/index.ts
@@ -0,0 +1,19 @@
+export { default as ContentCardItem } from './ContentCardItem.vue'
+export { default as ContentCardTable } from './ContentCardTable.vue'
+/**
+ * @deprecated Use `ContentCardTable` with `ContentCardItem` instead.
+ * This alias is kept for backwards compatibility and will be removed in a future version.
+ */
+export { default as ContentCard } from './ContentCardItem.vue'
+export { default as ContentModpackCard } from './ContentModpackCard.vue'
+export type {
+	ContentCardProject,
+	ContentCardTableItem,
+	ContentCardTableSortColumn,
+	ContentCardTableSortDirection,
+	ContentCardVersion,
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+	ContentOwner,
+} from './types'
diff --git a/packages/ui/src/components/instances/modals/ConfirmDeletionModal.vue b/packages/ui/src/components/instances/modals/ConfirmDeletionModal.vue
new file mode 100644
index 0000000000..4fa9d62141
--- /dev/null
+++ b/packages/ui/src/components/instances/modals/ConfirmDeletionModal.vue
@@ -0,0 +1,70 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="`Delete ${itemType}${count > 1 ? 's' : ''}`"
+		fade="danger"
+		max-width="500px"
+	>
+		<div class="flex flex-col gap-6">
+			<Admonition type="warning" header="Deletion warning">
+				Deleting a mod from a world that's already been played on can cause corruption.
+			</Admonition>
+
+			<span class="text-primary">
+				We will automatically create a backup
+				<!--  of your world -->
+				if you continue.
+			</span>
+		</div>
+
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled>
+					<button @click="modal?.hide()">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="confirm">
+						<TrashIcon />
+						Delete
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { TrashIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import Admonition from '../../base/Admonition.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import NewModal from '../../modal/NewModal.vue'
+
+defineProps<{
+	count: number
+	itemType: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'delete'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+function show() {
+	modal.value?.show()
+}
+
+function confirm() {
+	modal.value?.hide()
+	emit('delete')
+}
+
+defineExpose({
+	show,
+})
+</script>
diff --git a/packages/ui/src/components/instances/modals/ModpackUnlinkModal.vue b/packages/ui/src/components/instances/modals/ModpackUnlinkModal.vue
new file mode 100644
index 0000000000..9c431dcf51
--- /dev/null
+++ b/packages/ui/src/components/instances/modals/ModpackUnlinkModal.vue
@@ -0,0 +1,63 @@
+<template>
+	<NewModal ref="modal" header="Unlink modpack" fade="danger" max-width="500px">
+		<div class="flex flex-col gap-6">
+			<Admonition type="warning" header="Unlink warning">
+				<!-- Unlinking will turn this modpack world into a mod world and merge the modpack's
+				mods with your own. -->
+				Unlinking will merge all mods, resource packs and or plugins associated with this modpack
+				with your own mods.
+			</Admonition>
+
+			<span class="text-primary">
+				We will automatically create a backup
+				<!--of your world-->
+				if you continue.
+			</span>
+		</div>
+
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled>
+					<button @click="modal?.hide()">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="unlink">
+						<UnlinkIcon />
+						Unlink modpack
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { UnlinkIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import Admonition from '../../base/Admonition.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import NewModal from '../../modal/NewModal.vue'
+
+const emit = defineEmits<{
+	(e: 'unlink'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+function show() {
+	modal.value?.show()
+}
+
+function unlink() {
+	modal.value?.hide()
+	emit('unlink')
+}
+
+defineExpose({
+	show,
+})
+</script>
diff --git a/packages/ui/src/components/instances/types.ts b/packages/ui/src/components/instances/types.ts
new file mode 100644
index 0000000000..91757f9492
--- /dev/null
+++ b/packages/ui/src/components/instances/types.ts
@@ -0,0 +1,50 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { RouteLocationRaw } from 'vue-router'
+
+import type { Option as OverflowMenuOption } from '../base/OverflowMenu.vue'
+
+export type ContentCardProject = Pick<
+	Labrinth.Projects.v2.Project,
+	'id' | 'slug' | 'title' | 'icon_url'
+>
+
+export type ContentCardVersion = Pick<Labrinth.Versions.v2.Version, 'id' | 'version_number'> & {
+	file_name: string
+}
+
+export interface ContentOwner {
+	id: string
+	name: string
+	avatar_url?: string
+	type: 'user' | 'organization'
+	link?: string | RouteLocationRaw
+}
+
+export interface ContentCardTableItem {
+	id: string
+	project: ContentCardProject
+	projectLink?: string | RouteLocationRaw
+	version?: ContentCardVersion
+	owner?: ContentOwner
+	enabled?: boolean
+	disabled?: boolean
+	hasUpdate?: boolean
+	overflowOptions?: OverflowMenuOption[]
+}
+
+export type ContentCardTableSortColumn = 'project' | 'version'
+export type ContentCardTableSortDirection = 'asc' | 'desc'
+
+export type ContentModpackCardProject = Pick<
+	Labrinth.Projects.v2.Project,
+	'id' | 'slug' | 'title' | 'icon_url' | 'description' | 'downloads' | 'followers'
+>
+
+export type ContentModpackCardVersion = Pick<
+	Labrinth.Versions.v2.Version,
+	'id' | 'version_number' | 'date_published'
+>
+
+export type ContentModpackCardCategory = Labrinth.Tags.v2.Category & {
+	action?: (event: MouseEvent) => void
+}
diff --git a/packages/ui/src/components/modal/InstallToPlayModal.vue b/packages/ui/src/components/modal/InstallToPlayModal.vue
new file mode 100644
index 0000000000..e96512ade8
--- /dev/null
+++ b/packages/ui/src/components/modal/InstallToPlayModal.vue
@@ -0,0 +1,109 @@
+<template>
+	<NewModal ref="modal" header="Install to play" :closable="true">
+		<div class="flex flex-col gap-4 max-w-[500px]">
+			<Admonition type="info" header="Shared server instance">
+				This server requires modded content to play. Accept to install the needed files from
+				Modrinth.
+			</Admonition>
+
+			<div v-if="sharedBy?.name" class="flex items-center gap-2 text-sm text-secondary">
+				<Avatar
+					v-if="sharedBy?.icon_url"
+					:src="sharedBy.icon_url"
+					:alt="sharedBy.name"
+					size="24px"
+				/>
+				<span>
+					<span class="font-semibold text-contrast">{{ sharedBy.name }}</span>
+					shared this instance with you today.
+				</span>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<span class="text-sm font-semibold text-secondary">Shared instance</span>
+				<div class="flex items-center gap-3 rounded-xl bg-surface-4 p-3">
+					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />
+					<div class="flex flex-col gap-0.5">
+						<span class="font-semibold text-contrast">{{ project.title }}</span>
+						<span class="text-sm text-secondary">
+							{{ loaderDisplay }} {{ project.game_versions?.[0] }}
+							<template v-if="modCount"> · {{ modCount }} mods </template>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<button @click="handleDecline">
+						<XIcon />
+						Decline
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleAccept">
+						<CheckIcon />
+						Accept
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import type { Project } from '@modrinth/utils'
+import { formatCategory } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+
+import Admonition from '../base/Admonition.vue'
+import Avatar from '../base/Avatar.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import NewModal from './NewModal.vue'
+
+const props = defineProps<{
+	project: Project
+	sharedBy?: {
+		name: string
+		icon_url?: string
+	}
+	modCount?: number
+}>()
+
+const emit = defineEmits<{
+	accept: []
+	decline: []
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+const loaderDisplay = computed(() => {
+	const loader = props.project.loaders?.[0]
+	if (!loader) return ''
+	return formatCategory(loader)
+})
+
+function handleAccept() {
+	// TODO: Implement accept logic
+	emit('accept')
+	modal.value?.hide()
+}
+
+function handleDecline() {
+	emit('decline')
+	modal.value?.hide()
+}
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index aaaa274d90..5511a1105a 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -36,7 +36,7 @@
 				>
 					<div class="flex text-wrap break-words items-center gap-3 min-w-0">
 						<slot name="title">
-							<span v-if="header" class="text-lg font-extrabold text-contrast">
+							<span v-if="header" class="text-2xl font-semibold text-contrast">
 								{{ header }}
 							</span>
 						</slot>
diff --git a/packages/ui/src/components/modal/index.ts b/packages/ui/src/components/modal/index.ts
index 89c4cf0266..eb28a6569b 100644
--- a/packages/ui/src/components/modal/index.ts
+++ b/packages/ui/src/components/modal/index.ts
@@ -1,4 +1,5 @@
 export { default as ConfirmModal } from './ConfirmModal.vue'
+export { default as InstallToPlayModal } from './InstallToPlayModal.vue'
 export { default as Modal } from './Modal.vue'
 export { default as NewModal } from './NewModal.vue'
 export { default as ShareModal } from './ShareModal.vue'
diff --git a/packages/ui/src/components/project/ProjectCombobox.vue b/packages/ui/src/components/project/ProjectCombobox.vue
new file mode 100644
index 0000000000..b2ace5384d
--- /dev/null
+++ b/packages/ui/src/components/project/ProjectCombobox.vue
@@ -0,0 +1,183 @@
+<template>
+	<Combobox
+		v-model="projectId"
+		:placeholder="placeholder"
+		:options="options"
+		:searchable="true"
+		:search-placeholder="searchPlaceholder"
+		:no-options-message="searchLoading ? loadingMessage : noResultsMessage"
+		:disable-search-filter="true"
+		:disabled="disabled"
+		show-icon-in-selected
+		@search-input="(query) => handleSearch(query)"
+	/>
+</template>
+
+<script lang="ts" setup>
+import { useDebounceFn } from '@vueuse/core'
+import { defineAsyncComponent, h, ref, watch } from 'vue'
+
+import { injectModrinthClient, injectNotificationManager } from '../../providers'
+import type { ComboboxOption } from '../base/Combobox.vue'
+import Combobox from '../base/Combobox.vue'
+
+export type ProjectType =
+	| 'mod'
+	| 'modpack'
+	| 'resourcepack'
+	| 'shader'
+	| 'datapack'
+	| 'plugin'
+	| 'server'
+
+interface SearchHit {
+	project_id: string
+	title: string
+	icon_url?: string
+	project_type: string
+	slug: string
+}
+
+const props = withDefaults(
+	defineProps<{
+		/** Filter by project types */
+		projectTypes?: ProjectType[]
+		/** Placeholder text for the combobox */
+		placeholder?: string
+		/** Placeholder text for the search input */
+		searchPlaceholder?: string
+		/** Message shown when loading */
+		loadingMessage?: string
+		/** Message shown when no results found */
+		noResultsMessage?: string
+		/** Whether the combobox is disabled */
+		disabled?: boolean
+		/** Maximum number of results to show */
+		limit?: number
+	}>(),
+	{
+		placeholder: 'Select project',
+		searchPlaceholder: 'Search by name or paste ID...',
+		loadingMessage: 'Loading...',
+		noResultsMessage: 'No results found',
+		disabled: false,
+		limit: 20,
+	},
+)
+
+const { addNotification } = injectNotificationManager()
+const projectId = defineModel<string>()
+
+const searchLoading = ref(false)
+const options = ref<ComboboxOption<string>[]>([])
+const selectedProject = ref<SearchHit | null>(null)
+const searchResultsCache = ref<Map<string, SearchHit>>(new Map())
+
+const { labrinth } = injectModrinthClient()
+
+// Watch for external changes to projectId to update selectedProject
+watch(
+	projectId,
+	async (newId) => {
+		if (!newId) {
+			selectedProject.value = null
+			return
+		}
+
+		if (searchResultsCache.value.has(newId)) {
+			selectedProject.value = searchResultsCache.value.get(newId) || null
+			return
+		}
+
+		try {
+			const project = await labrinth.projects_v2.get(newId)
+			if (project) {
+				const hit: SearchHit = {
+					project_id: project.id,
+					title: project.title,
+					icon_url: project.icon_url ?? undefined,
+					project_type: project.project_type,
+					slug: project.slug,
+				}
+				searchResultsCache.value.set(project.id, hit)
+				selectedProject.value = hit
+			}
+		} catch {
+			selectedProject.value = null
+		}
+	},
+	{ immediate: true },
+)
+
+const search = async (query: string) => {
+	query = query.trim()
+	if (!query) {
+		searchLoading.value = false
+		options.value = []
+		return
+	}
+
+	try {
+		const projectTypeFacets = props.projectTypes?.map((type) => `project_type:${type}`)
+
+		const results = await labrinth.projects_v2.search({
+			query: query,
+			limit: props.limit,
+			facets: projectTypeFacets ? [projectTypeFacets] : undefined,
+		})
+
+		const resultsByProjectId = await labrinth.projects_v2.search({
+			query: '',
+			limit: props.limit,
+			facets: [[`project_id:${query.replace(/[^a-zA-Z0-9]/g, '')}`]],
+		})
+
+		const allHits = [...resultsByProjectId.hits, ...results.hits]
+		const seenIds = new Set<string>()
+		const uniqueHits: SearchHit[] = []
+
+		for (const hit of allHits) {
+			if (!seenIds.has(hit.project_id)) {
+				seenIds.add(hit.project_id)
+				uniqueHits.push(hit)
+				// Cache the hit for later lookup
+				searchResultsCache.value.set(hit.project_id, hit)
+			}
+		}
+
+		options.value = uniqueHits.map((hit) => ({
+			label: hit.title,
+			value: hit.project_id,
+			icon: defineAsyncComponent(() =>
+				Promise.resolve({
+					setup: () => () =>
+						h('img', {
+							src: hit.icon_url,
+							alt: hit.title,
+							class: 'h-5 w-5 rounded',
+						}),
+				}),
+			),
+		}))
+	} catch (error: unknown) {
+		const err = error as { data?: { description?: string } }
+		addNotification({
+			title: 'An error occurred',
+			text: err.data ? err.data.description : String(error),
+			type: 'error',
+		})
+	}
+	searchLoading.value = false
+}
+
+const throttledSearch = useDebounceFn(search, 250)
+
+const handleSearch = async (query: string) => {
+	searchLoading.value = true
+	await throttledSearch(query)
+}
+
+defineExpose({
+	selectedProject,
+})
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/packages/ui/src/components/servers/content/ContentVersionEditModal.vue
similarity index 86%
rename from apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
rename to packages/ui/src/components/servers/content/ContentVersionEditModal.vue
index a87db5e837..9db92267e9 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/packages/ui/src/components/servers/content/ContentVersionEditModal.vue
@@ -27,13 +27,13 @@
 					<div class="flex justify-between">
 						<div class="flex items-center gap-2">
 							<div class="font-semibold text-contrast">{{ type }} version</div>
-							<NuxtLink
+							<a
 								class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
 								@click="
 									versionFilter &&
-									(unlockFilterAccordion.isOpen
+									(unlockFilterAccordion?.isOpen
 										? unlockFilterAccordion.close()
-										: unlockFilterAccordion.open())
+										: unlockFilterAccordion?.open())
 								"
 							>
 								<TagItem
@@ -53,11 +53,11 @@
 								<DropdownIcon
 									:class="[
 										'transition-all duration-200 ease-in-out',
-										{ 'rotate-180': unlockFilterAccordion.isOpen },
+										{ 'rotate-180': unlockFilterAccordion?.isOpen },
 										{ 'opacity-0': !versionFilter },
 									]"
 								/>
-							</NuxtLink>
+							</a>
 						</div>
 					</div>
 					<Combobox
@@ -127,9 +127,9 @@
 					@vue:mounted="updateFiltersToUi"
 				>
 					<template #platform>
-						<LoaderIcon
+						<ServerLoaderIcon
 							v-if="filtersRef?.selectedPlatforms.length === 0"
-							:loader="'Vanilla'"
+							loader="Vanilla"
 							class="size-5 flex-none"
 						/>
 						<svg
@@ -199,26 +199,26 @@
 			</Admonition>
 
 			<Admonition
-				v-else-if="props.modPack"
+				v-else-if="hasModpack"
 				type="warning"
 				header="Changing version may cause issues"
 				class="mb-2"
 			>
 				Your server was created using a modpack. It's recommended to use the modpack's version of
 				the mod.
-				<NuxtLink
+				<a
 					class="mt-2 flex items-center gap-1"
-					:to="`/hosting/manage/${props.serverId}/options/loader`"
+					:href="`/hosting/manage/${serverId}/options/loader`"
 					target="_blank"
 				>
 					<ExternalIcon class="size-5 flex-none"></ExternalIcon> Modify modpack version
-				</NuxtLink>
+				</a>
 			</Admonition>
 
 			<div class="flex flex-row items-center gap-4">
 				<ButtonStyled color="brand">
 					<button
-						:disabled="versionsLoading || selectedVersion.id === modDetails?.version_id"
+						:disabled="versionsLoading || selectedVersion?.id === modDetails?.version_id"
 						@click="emitChangeModVersion"
 					>
 						<CheckIcon />
@@ -226,7 +226,7 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled>
-					<button @click="modModal.hide()">
+					<button @click="modModal?.hide()">
 						<XIcon />
 						Cancel
 					</button>
@@ -237,6 +237,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Archon, Labrinth } from '@modrinth/api-client'
 import {
 	CheckIcon,
 	DropdownIcon,
@@ -245,55 +246,63 @@ import {
 	LockOpenIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {
-	Admonition,
-	Avatar,
-	ButtonStyled,
-	Checkbox,
-	Combobox,
-	CopyCode,
-	NewModal,
-} from '@modrinth/ui'
-import TagItem from '@modrinth/ui/src/components/base/TagItem.vue'
-import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
-import { computed, ref } from 'vue'
-
-import Accordion from '~/components/ui/Accordion.vue'
+import { computed, type Ref, ref } from 'vue'
+
+import { injectModrinthClient } from '../../../providers'
+import { formatCategory, formatVersionsForDisplay } from '../../../utils/formatting'
+import Accordion from '../../base/Accordion.vue'
+import Admonition from '../../base/Admonition.vue'
+import Avatar from '../../base/Avatar.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import Checkbox from '../../base/Checkbox.vue'
+import Combobox from '../../base/Combobox.vue'
+import CopyCode from '../../base/CopyCode.vue'
+import TagItem from '../../base/TagItem.vue'
+import NewModal from '../../modal/NewModal.vue'
+import ServerLoaderIcon from '../icons/LoaderIcon.vue'
 import ContentVersionFilter, {
 	type ListedGameVersion,
 	type ListedPlatform,
-} from '~/components/ui/servers/ContentVersionFilter.vue'
-import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
+} from './ContentVersionFilter.vue'
+
+export interface Tags {
+	gameVersions: Labrinth.Tags.v2.GameVersion[]
+	loaders: Labrinth.Tags.v2.Loader[]
+}
 
 const props = defineProps<{
 	type: 'Mod' | 'Plugin'
 	loader: string
 	gameVersion: string
-	modPack: boolean
+	hasModpack: boolean
 	serverId: string
+	tags: Tags
 }>()
 
-interface ContentItem extends Mod {
+type ContentItem = Archon.Content.v0.Mod & {
 	changing?: boolean
 }
 
-interface EditVersion extends Version {
+type EditVersion = Labrinth.Versions.v2.Version & {
 	installed: boolean
 	upgrade?: boolean
 }
 
-const modModal = ref()
+const client = injectModrinthClient()
+
+const modModal = ref<InstanceType<typeof NewModal>>()
 const modDetails = ref<ContentItem>()
 const currentVersions = ref<EditVersion[] | null>(null)
 const versionsLoading = ref(false)
 const versionsError = ref('')
 const showBetaAlphaReleases = ref(false)
-const unlockFilterAccordion = ref()
+const unlockFilterAccordion = ref<InstanceType<typeof Accordion>>()
 const versionFilter = ref(true)
-const tags = useGeneratedState()
 const noCompatibleVersions = ref(false)
 
-const { pluginLoaders, modLoaders } = tags.value.loaders.reduce(
+const tags = computed(() => props.tags)
+
+const { pluginLoaders, modLoaders } = props.tags.loaders.reduce(
 	(acc, tag) => {
 		if (tag.supported_project_types.includes('plugin')) {
 			acc.pluginLoaders.push(tag.name)
@@ -306,7 +315,7 @@ const { pluginLoaders, modLoaders } = tags.value.loaders.reduce(
 	{ pluginLoaders: [] as string[], modLoaders: [] as string[] },
 )
 
-const selectedVersion = ref()
+const selectedVersion = ref<EditVersion>()
 const filtersRef: Ref<InstanceType<typeof ContentVersionFilter> | null> = ref(null)
 interface SelectedContentFilters {
 	selectedGameVersions: string[]
@@ -317,7 +326,7 @@ const selectedFilters = ref<SelectedContentFilters>({
 	selectedPlatforms: [],
 })
 
-const backwardCompatPlatformMap = {
+const backwardCompatPlatformMap: Record<string, string[]> = {
 	purpur: ['purpur', 'paper', 'spigot', 'bukkit'],
 	paper: ['paper', 'spigot', 'bukkit'],
 	spigot: ['spigot', 'bukkit'],
@@ -360,11 +369,9 @@ const filteredVersions = computed(() => {
 		if (version.installed) return true
 		return (
 			filtersRef.value?.selectedPlatforms.every((platform) =>
-				(
-					backwardCompatPlatformMap[platform as keyof typeof backwardCompatPlatformMap] || [
-						platform,
-					]
-				).some((loader) => version.loaders.includes(loader)),
+				(backwardCompatPlatformMap[platform] || [platform]).some((loader) =>
+					version.loaders.includes(loader),
+				),
 			) &&
 			filtersRef.value?.selectedGameVersions.every((gameVersion) =>
 				version.game_versions.includes(gameVersion),
@@ -412,9 +419,7 @@ const formattedVersions = computed(() => {
 		),
 		loaders: (selectedVersion.value?.loaders || [])
 			.sort((firstLoader: string, secondLoader: string) => {
-				const loaderList = backwardCompatPlatformMap[
-					props.loader as keyof typeof backwardCompatPlatformMap
-				] || [props.loader]
+				const loaderList = backwardCompatPlatformMap[props.loader] || [props.loader]
 
 				const firstLoaderPosition = loaderList.indexOf(firstLoader.toLowerCase())
 				const secondLoaderPosition = loaderList.indexOf(secondLoader.toLowerCase())
@@ -430,14 +435,17 @@ const formattedVersions = computed(() => {
 
 async function show(mod: ContentItem) {
 	versionFilter.value = true
-	modModal.value.show()
+	modModal.value?.show()
 	versionsLoading.value = true
 	modDetails.value = mod
 	versionsError.value = ''
 	currentVersions.value = null
 
 	try {
-		const result = await useBaseFetch(`project/${mod.project_id}/version`, {}, false)
+		const result = await client.labrinth.versions_v2.getProjectVersions(mod.project_id!, {
+			include_changelog: false,
+		})
+
 		if (
 			Array.isArray(result) &&
 			result.every(
@@ -508,9 +516,7 @@ async function show(mod: ContentItem) {
 		initPlatform.value = platformSet.has(props.loader)
 			? props.loader
 			: props.loader in backwardCompatPlatformMap
-				? backwardCompatPlatformMap[props.loader as keyof typeof backwardCompatPlatformMap].find(
-						(p) => platformSet.has(p),
-					) || defaultPlatform
+				? backwardCompatPlatformMap[props.loader].find((p) => platformSet.has(p)) || defaultPlatform
 				: defaultPlatform
 
 		// check if there's nothing compatible with the server config
@@ -519,7 +525,7 @@ async function show(mod: ContentItem) {
 			!gameVersions.value.some((v) => v.name === props.gameVersion)
 
 		if (noCompatibleVersions.value) {
-			unlockFilterAccordion.value.open()
+			unlockFilterAccordion.value?.open()
 			versionFilter.value = false
 		}
 
@@ -542,6 +548,6 @@ function emitChangeModVersion() {
 
 defineExpose({
 	show,
-	hide: () => modModal.value.hide(),
+	hide: () => modModal.value?.hide(),
 })
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue b/packages/ui/src/components/servers/content/ContentVersionFilter.vue
similarity index 84%
rename from apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
rename to packages/ui/src/components/servers/content/ContentVersionFilter.vue
index 4e2a503a1a..3ae2a72ab8 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
+++ b/packages/ui/src/components/servers/content/ContentVersionFilter.vue
@@ -57,12 +57,13 @@
 </template>
 
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { FilterIcon } from '@modrinth/assets'
-import Checkbox from '@modrinth/ui/src/components/base/Checkbox.vue'
-import ManySelect from '@modrinth/ui/src/components/base/ManySelect.vue'
-import { formatCategory, type GameVersionTag, type Version } from '@modrinth/utils'
 import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
+
+import { formatCategory } from '../../../utils/formatting'
+import Checkbox from '../../base/Checkbox.vue'
+import ManySelect from '../../base/ManySelect.vue'
 
 export type ListedGameVersion = {
 	name: string
@@ -75,8 +76,8 @@ export type ListedPlatform = {
 }
 
 const props = defineProps<{
-	versions: Version[]
-	gameVersions: GameVersionTag[]
+	versions: Labrinth.Versions.v2.Version[]
+	gameVersions: Labrinth.Tags.v2.GameVersion[]
 	listedGameVersions: ListedGameVersion[]
 	listedPlatforms: ListedPlatform[]
 	baseId?: string
@@ -89,7 +90,6 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['update:query'])
-const route = useRoute()
 
 const showSnapshots = ref(false)
 const hasAnySnapshots = computed(() => {
@@ -145,9 +145,6 @@ const filterOptions = computed(() => {
 const selectedGameVersions = ref<string[]>([])
 const selectedPlatforms = ref<string[]>([])
 
-selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : []
-selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : []
-
 function updateFilters() {
 	emit('update:query', {
 		g: selectedGameVersions.value,
@@ -159,14 +156,4 @@ defineExpose({
 	selectedGameVersions,
 	selectedPlatforms,
 })
-
-function getArrayOrString(x: string | (string | null)[]): string[] {
-	if (typeof x === 'string') {
-		return [x]
-	} else {
-		return x.filter((item): item is string => item !== null)
-	}
-}
 </script>
-
-<style></style>
diff --git a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
index 5c1140f996..92021126fe 100644
--- a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
@@ -95,7 +95,7 @@ interface Option {
 }
 
 type Divider = {
-	divider: true
+	divider?: boolean
 	shown?: boolean
 }
 
diff --git a/packages/ui/src/pages/hosting/manage/content.vue b/packages/ui/src/pages/hosting/manage/content.vue
new file mode 100644
index 0000000000..d8eaea0102
--- /dev/null
+++ b/packages/ui/src/pages/hosting/manage/content.vue
@@ -0,0 +1,698 @@
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { CompassIcon, FilterIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import Fuse from 'fuse.js'
+import { computed, onBeforeUnmount, ref, watch, watchSyncEffect } from 'vue'
+import { onBeforeRouteLeave, useRoute } from 'vue-router'
+
+import ButtonStyled from '../../../components/base/ButtonStyled.vue'
+import FloatingActionBar from '../../../components/base/FloatingActionBar.vue'
+import ProgressBar from '../../../components/base/ProgressBar.vue'
+import ContentCardTable from '../../../components/instances/ContentCardTable.vue'
+import ContentModpackCard from '../../../components/instances/ContentModpackCard.vue'
+import ConfirmDeletionModal from '../../../components/instances/modals/ConfirmDeletionModal.vue'
+import ModpackUnlinkModal from '../../../components/instances/modals/ModpackUnlinkModal.vue'
+import type {
+	ContentCardProject,
+	ContentCardTableItem,
+	ContentCardVersion,
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+	ContentOwner,
+} from '../../../components/instances/types'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '../../../providers'
+
+const client = injectModrinthClient()
+const { server } = injectModrinthServerContext()
+const { addNotification } = injectNotificationManager()
+const route = useRoute()
+const queryClient = useQueryClient()
+const serverId = route.params.id as string
+
+const type = computed(() => {
+	const loader = server.value?.loader?.toLowerCase()
+	return loader === 'paper' || loader === 'purpur' ? 'Plugin' : 'Mod'
+})
+
+const hasModpack = computed(() => server.value?.upstream?.kind === 'modpack')
+
+const { data: modpackProject } = useQuery({
+	queryKey: computed(() => ['project', server.value?.upstream?.project_id]),
+	queryFn: () => client.labrinth.projects_v3.get(server.value!.upstream!.project_id),
+	enabled: hasModpack,
+})
+
+const { data: modpackVersion } = useQuery({
+	queryKey: computed(() => ['version', server.value?.upstream?.version_id]),
+	queryFn: () => client.labrinth.versions_v3.getVersion(server.value!.upstream!.version_id),
+	enabled: hasModpack,
+})
+
+const modpack = computed(() => {
+	if (!hasModpack.value || !modpackProject.value) return null
+
+	return {
+		project: {
+			id: modpackProject.value.id,
+			slug: modpackProject.value.slug,
+			title: modpackProject.value.title,
+			icon_url: modpackProject.value.icon_url ?? undefined,
+			description: modpackProject.value.description,
+			downloads: modpackProject.value.downloads,
+			followers: modpackProject.value.followers,
+		} as ContentModpackCardProject,
+		version: modpackVersion.value
+			? ({
+					id: modpackVersion.value.id,
+					version_number: modpackVersion.value.version_number,
+					date_published: modpackVersion.value.date_published,
+				} as ContentModpackCardVersion)
+			: undefined,
+		owner: undefined as ContentOwner | undefined, // TODO: fetch team/user for owner
+		categories: (modpackProject.value.categories?.map((cat) => ({
+			name: cat,
+			header: 'Categories',
+		})) ?? []) as ContentModpackCardCategory[],
+	}
+})
+
+// Fetch content list from Archon
+const contentQueryKey = computed(() => ['content', 'list', serverId])
+const {
+	data: contentData,
+	error: contentError,
+	refetch,
+	isLoading: isLoadingContent,
+} = useQuery({
+	queryKey: contentQueryKey,
+	queryFn: () => client.archon.content_v0.list(serverId),
+})
+
+// Track mods currently being changed
+const changingMods = ref(new Set<string>())
+
+// Helper to get stable key for a mod
+function getStableModKey(mod: Archon.Content.v0.Mod): string {
+	if (mod.project_id) {
+		return `project-${mod.project_id}`
+	}
+	const baseFilename = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
+	return `file-${baseFilename}`
+}
+
+// Helper to get friendly mod name
+function friendlyModName(mod: Archon.Content.v0.Mod): string {
+	if (mod.name) return mod.name
+	let cleanName = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
+	const lastDotIndex = cleanName.lastIndexOf('.')
+	if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex)
+	return cleanName
+}
+
+// Map Archon Mod to ContentItem for display
+interface ContentItem {
+	project: ContentCardProject
+	version?: ContentCardVersion
+	owner?: ContentOwner
+	enabled: boolean
+	hasUpdate?: boolean
+	_mod: Archon.Content.v0.Mod // Keep reference to original mod
+}
+
+const contentItems = computed<ContentItem[]>(() => {
+	if (!contentData.value) return []
+
+	return contentData.value.map((mod) => ({
+		project: {
+			id: mod.project_id ?? mod.filename,
+			slug: mod.project_id ?? mod.filename,
+			title: friendlyModName(mod),
+			icon_url: mod.icon_url,
+		},
+		version: {
+			id: mod.version_id ?? mod.filename,
+			version_number: mod.version_number ?? 'Unknown',
+			file_name: mod.filename,
+		},
+		owner: mod.owner
+			? {
+					id: mod.owner,
+					name: mod.owner,
+					type: 'user' as const,
+					link: `/user/${mod.owner}`,
+				}
+			: undefined,
+		enabled: !mod.disabled,
+		hasUpdate: false, // TODO: implement update checking
+		_mod: mod,
+	}))
+})
+
+const searchQuery = ref('')
+const selectedFilters = ref<string[]>([])
+
+// Fuse.js instance for fuzzy search
+const fuse = new Fuse<ContentItem>([], {
+	keys: ['project.title', 'version.file_name'],
+	threshold: 0.4,
+	distance: 100,
+})
+
+watchSyncEffect(() => fuse.setCollection(contentItems.value))
+
+// Selection state
+const selectedIds = ref<string[]>([])
+
+// Bulk operations state
+const isBulkOperating = ref(false)
+const bulkProgress = ref(0)
+const bulkTotal = ref(0)
+const bulkOperation = ref<'enable' | 'disable' | 'delete' | null>(null)
+
+const selectedItems = computed(() =>
+	contentItems.value.filter((item) => selectedIds.value.includes(getStableModKey(item._mod))),
+)
+
+const _modpackUnlinkModal = ref<InstanceType<typeof ModpackUnlinkModal>>()
+const confirmDeletionModal = ref<InstanceType<typeof ConfirmDeletionModal>>()
+const pendingDeletionItems = ref<ContentItem[]>([])
+
+// Dynamic filter options
+type FilterOption = {
+	id: string
+	label: string
+}
+
+const filterOptions = computed<FilterOption[]>(() => {
+	const options: FilterOption[] = []
+
+	// Add "Disabled" filter if there are disabled items
+	if (contentItems.value.some((item) => !item.enabled)) {
+		options.push({
+			id: 'disabled',
+			label: 'Disabled',
+		})
+	}
+
+	return options
+})
+
+function toggleFilter(filterId: string) {
+	const index = selectedFilters.value.indexOf(filterId)
+	if (index === -1) {
+		selectedFilters.value.push(filterId)
+	} else {
+		selectedFilters.value.splice(index, 1)
+	}
+}
+
+const filteredItems = computed(() => {
+	const query = searchQuery.value.trim()
+
+	let items: ContentItem[]
+
+	// Use Fuse.js for fuzzy search
+	if (query) {
+		items = fuse.search(query).map(({ item }) => item)
+	} else {
+		items = contentItems.value
+	}
+
+	// Apply filters if any are selected
+	if (selectedFilters.value.length > 0) {
+		items = items.filter((item) => {
+			for (const filter of selectedFilters.value) {
+				if (filter === 'disabled' && !item.enabled) return true
+			}
+			return false
+		})
+	}
+
+	return items
+})
+
+const totalModsCount = computed(() => contentItems.value.length)
+
+// Table items for ContentCardTable
+const tableItems = computed<ContentCardTableItem[]>(() =>
+	filteredItems.value.map((item) => ({
+		id: getStableModKey(item._mod),
+		project: item.project,
+		projectLink: item._mod.project_id ? `/mod/${item._mod.project_id}` : undefined,
+		version: item.version,
+		owner: item.owner,
+		enabled: item.enabled,
+		disabled: changingMods.value.has(getStableModKey(item._mod)),
+	})),
+)
+
+function handleSearch() {
+	// Debounce is handled externally if needed
+}
+
+const deleteMutation = useMutation({
+	mutationFn: ({ path }: { path: string; modKey: string }) =>
+		client.archon.content_v0.delete(serverId, { path }),
+	onMutate: async ({ modKey }) => {
+		// Cancel any outgoing refetches
+		await queryClient.cancelQueries({ queryKey: contentQueryKey.value })
+
+		// Snapshot previous value
+		const previousData = queryClient.getQueryData<Archon.Content.v0.Mod[]>(contentQueryKey.value)
+
+		// Optimistically remove the item
+		queryClient.setQueryData(
+			contentQueryKey.value,
+			(oldData: Archon.Content.v0.Mod[] | undefined) => {
+				if (!oldData) return oldData
+				return oldData.filter((m) => getStableModKey(m) !== modKey)
+			},
+		)
+
+		// Clear selection for deleted item
+		selectedIds.value = selectedIds.value.filter((id) => id !== modKey)
+
+		return { previousData }
+	},
+	onSuccess: () => {
+		queryClient.invalidateQueries({ queryKey: contentQueryKey.value })
+	},
+	onError: (err, { modKey }, context) => {
+		// Rollback to previous data
+		if (context?.previousData) {
+			queryClient.setQueryData(contentQueryKey.value, context.previousData)
+		}
+		addNotification({
+			type: 'error',
+			text: err instanceof Error ? err.message : 'Failed to remove content',
+		})
+		changingMods.value.delete(modKey)
+	},
+})
+
+const toggleMutation = useMutation({
+	mutationFn: async ({ mod, modKey }: { mod: Archon.Content.v0.Mod; modKey: string }) => {
+		const folder = `${type.value.toLowerCase()}s`
+		const currentFilename = mod.disabled ? `${mod.filename}.disabled` : mod.filename
+		const newFilename = mod.disabled ? mod.filename : `${mod.filename}.disabled`
+		await client.kyros.files_v0.moveFileOrFolder(
+			`/${folder}/${currentFilename}`,
+			`/${folder}/${newFilename}`,
+		)
+		return { newDisabled: !mod.disabled, modKey }
+	},
+	onSuccess: ({ newDisabled, modKey }) => {
+		// Optimistically update the local cache immediately
+		// Archon may take time to sync after Kyros renames the file
+		queryClient.setQueryData(
+			contentQueryKey.value,
+			(oldData: Archon.Content.v0.Mod[] | undefined) => {
+				if (!oldData) return oldData
+				return oldData.map((m) =>
+					getStableModKey(m) === modKey ? { ...m, disabled: newDisabled } : m,
+				)
+			},
+		)
+		changingMods.value.delete(modKey)
+		// Also invalidate to eventually get the real server state
+		queryClient.invalidateQueries({ queryKey: contentQueryKey.value })
+	},
+	onError: (_err, { mod, modKey }) => {
+		addNotification({
+			type: 'error',
+			text: `Failed to toggle ${friendlyModName(mod)}`,
+		})
+		changingMods.value.delete(modKey)
+	},
+})
+
+// Update mutation
+const _updateMutation = useMutation({
+	mutationFn: ({
+		replace,
+		project_id,
+		version_id,
+	}: {
+		replace: string
+		project_id: string
+		version_id: string
+		modKey: string
+	}) => client.archon.content_v0.update(serverId, { replace, project_id, version_id }),
+	onSuccess: () => {
+		queryClient.invalidateQueries({ queryKey: contentQueryKey.value })
+		addNotification({
+			type: 'success',
+			text: 'Content updated successfully',
+		})
+	},
+	onError: (err, { modKey }) => {
+		addNotification({
+			type: 'error',
+			text: err instanceof Error ? err.message : 'Failed to update content',
+		})
+		changingMods.value.delete(modKey)
+	},
+})
+
+function handleToggleEnabled(item: ContentItem, _value: boolean) {
+	const mod = item._mod
+	const modKey = getStableModKey(mod)
+	changingMods.value.add(modKey)
+
+	toggleMutation.mutate({ mod, modKey })
+}
+
+function performDelete(item: ContentItem) {
+	const mod = item._mod
+	const modKey = getStableModKey(mod)
+	deleteMutation.mutate({ path: `/${type.value.toLowerCase()}s/${mod.filename}`, modKey })
+}
+
+function handleDelete(item: ContentItem) {
+	pendingDeletionItems.value = [item]
+	confirmDeletionModal.value?.show()
+}
+
+// ID-based event handlers for ContentCardTable
+function handleToggleEnabledById(id: string, value: boolean) {
+	const item = contentItems.value.find((i) => getStableModKey(i._mod) === id)
+	if (item) handleToggleEnabled(item, value)
+}
+
+function handleDeleteById(id: string) {
+	const item = contentItems.value.find((i) => getStableModKey(i._mod) === id)
+	if (item) handleDelete(item)
+}
+
+function showBulkDeleteModal() {
+	pendingDeletionItems.value = [...selectedItems.value]
+	confirmDeletionModal.value?.show()
+}
+
+async function confirmDelete() {
+	const itemsToDelete = [...pendingDeletionItems.value]
+	pendingDeletionItems.value = []
+
+	if (itemsToDelete.length === 0) return
+
+	if (itemsToDelete.length === 1) {
+		performDelete(itemsToDelete[0])
+		return
+	}
+
+	// Bulk delete with progress
+	isBulkOperating.value = true
+	bulkOperation.value = 'delete'
+	bulkTotal.value = itemsToDelete.length
+	bulkProgress.value = 0
+
+	for (const item of itemsToDelete) {
+		performDelete(item)
+		bulkProgress.value++
+		await new Promise((resolve) => setTimeout(resolve, 250))
+	}
+
+	// Clear selection after bulk operation
+	selectedIds.value = []
+
+	isBulkOperating.value = false
+	bulkOperation.value = null
+}
+
+// TODO: implement update checking
+// function handleUpdate(item: ContentItem) {
+// 	const mod = item._mod
+// 	if (!mod.project_id || !mod.version_id) {
+// 		addNotification({
+// 			type: 'error',
+// 			text: 'Cannot update content without project information',
+// 		})
+// 		return
+// 	}
+//
+// 	// TODO: Implement version selection modal or auto-update to latest
+// 	console.log('Update:', item.project.title)
+// }
+
+// TODO: implement modpack update
+// function handleModpackUpdate() {
+// 	// TODO: Implement modpack update (needs version selection)
+// 	console.log('Modpack update')
+// }
+
+function handleModpackContent() {
+	// Navigate to modpack project page
+	if (modpackProject.value?.slug) {
+		window.location.href = `/project/${modpackProject.value.slug}`
+	}
+}
+
+function handleModpackUnlink() {
+	// Backend not implemented - show notification instead of modal
+	addNotification({
+		type: 'warning',
+		text: 'Modpack unlinking is not yet available',
+	})
+	// modpackUnlinkModal.value?.show()
+}
+
+function handleModpackUnlinkConfirm() {
+	// Backend not implemented
+	addNotification({
+		type: 'warning',
+		text: 'Modpack unlinking is not yet available',
+	})
+}
+
+function handleBrowseContent() {
+	window.location.href = `/discover/${type.value.toLowerCase()}s?sid=${serverId}`
+}
+
+function handleUploadFiles() {
+	// TODO: Implement file upload (integrate FileUploadDropdown)
+	console.log('Upload files')
+}
+
+async function bulkToggleAll(enable: boolean) {
+	const itemsToToggle = selectedItems.value.filter((item) => item.enabled !== enable)
+	if (itemsToToggle.length === 0) {
+		addNotification({
+			type: 'info',
+			text: `All selected ${type.value.toLowerCase()}s are already ${enable ? 'enabled' : 'disabled'}`,
+		})
+		return
+	}
+
+	isBulkOperating.value = true
+	bulkOperation.value = enable ? 'enable' : 'disable'
+	bulkTotal.value = itemsToToggle.length
+	bulkProgress.value = 0
+
+	for (const item of itemsToToggle) {
+		handleToggleEnabled(item, enable)
+		bulkProgress.value++
+		await new Promise((resolve) => setTimeout(resolve, 250)) // 250ms gap between requests cos archon will shit itself lol
+	}
+
+	// Clear selection after bulk operation
+	selectedIds.value = []
+
+	isBulkOperating.value = false
+	bulkOperation.value = null
+}
+
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+	if (isBulkOperating.value) {
+		e.preventDefault()
+		return ''
+	}
+}
+
+// @ts-expect-error client exists
+if (import.meta.client) {
+	watch(isBulkOperating, (operating) => {
+		if (operating) {
+			window.addEventListener('beforeunload', handleBeforeUnload)
+		} else {
+			window.removeEventListener('beforeunload', handleBeforeUnload)
+		}
+	})
+
+	onBeforeUnmount(() => {
+		window.removeEventListener('beforeunload', handleBeforeUnload)
+	})
+}
+
+onBeforeRouteLeave(() => {
+	// @ts-expect-error client exists
+	if (isBulkOperating.value && import.meta.client) {
+		return window.confirm('A bulk operation is in progress. Are you sure you want to leave?')
+	}
+	return true
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<!-- Loading state -->
+		<div
+			v-if="isLoadingContent"
+			class="flex min-h-[50vh] w-full flex-col items-center justify-center gap-2 text-center text-secondary"
+		>
+			<SpinnerIcon class="animate-spin" />
+			Loading {{ type.toLowerCase() }}s...
+		</div>
+
+		<!-- Error state -->
+		<div
+			v-else-if="contentError"
+			class="flex w-full flex-col items-center justify-center gap-4 p-4"
+		>
+			<div class="universal-card flex flex-col items-center gap-4 p-6">
+				<h2 class="m-0 text-xl font-bold">Failed to load content</h2>
+				<p class="text-secondary">{{ contentError.message }}</p>
+				<ButtonStyled color="brand">
+					<button @click="() => refetch()">Retry</button>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<!-- Content loaded -->
+		<template v-else>
+			<ContentModpackCard
+				v-if="modpack"
+				:project="modpack.project"
+				:version="modpack.version"
+				:owner="modpack.owner"
+				:categories="modpack.categories"
+				@content="handleModpackContent"
+				@unlink="handleModpackUnlink"
+			/>
+			<!-- @update="handleModpackUpdate" -->
+
+			<div class="flex flex-col gap-2 lg:flex-row lg:items-center">
+				<div class="iconified-input flex-1 lg:max-w-lg">
+					<SearchIcon aria-hidden="true" class="text-lg" />
+					<input
+						v-model="searchQuery"
+						class="!h-10"
+						autocomplete="off"
+						spellcheck="false"
+						type="text"
+						:placeholder="`Search ${totalModsCount} ${type.toLowerCase()}s...`"
+						@input="handleSearch"
+					/>
+					<ButtonStyled v-if="searchQuery" circular type="transparent" class="r-btn">
+						<button @click="searchQuery = ''">
+							<XIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<div class="flex gap-2">
+					<ButtonStyled color="brand">
+						<button class="!h-10 flex items-center gap-2" @click="handleBrowseContent">
+							<CompassIcon class="size-5" />
+							<span>Browse content</span>
+						</button>
+					</ButtonStyled>
+					<ButtonStyled type="outlined">
+						<button class="!h-10 !border-surface-4 !border-[1px]" @click="handleUploadFiles">
+							Upload files
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+
+			<div
+				v-if="filterOptions.length > 0"
+				class="flex flex-col justify-between gap-2 lg:flex-row lg:items-center"
+			>
+				<div class="flex flex-wrap items-center gap-1.5">
+					<FilterIcon class="size-5 text-secondary" />
+					<button
+						class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors"
+						:class="
+							selectedFilters.length === 0
+								? 'border-green bg-brand-highlight text-brand'
+								: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5'
+						"
+						@click="selectedFilters = []"
+					>
+						All
+					</button>
+					<button
+						v-for="option in filterOptions"
+						:key="option.id"
+						class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors"
+						:class="
+							selectedFilters.includes(option.id)
+								? 'border-green bg-brand-highlight text-brand'
+								: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5'
+						"
+						@click="toggleFilter(option.id)"
+					>
+						{{ option.label }}
+					</button>
+				</div>
+			</div>
+
+			<!-- Content table -->
+			<ContentCardTable
+				v-model:selected-ids="selectedIds"
+				:items="tableItems"
+				:show-selection="true"
+				@update:enabled="handleToggleEnabledById"
+				@delete="handleDeleteById"
+			>
+				<template #empty>No content found.</template>
+			</ContentCardTable>
+
+			<ModpackUnlinkModal ref="modpackUnlinkModal" @unlink="handleModpackUnlinkConfirm" />
+			<ConfirmDeletionModal
+				ref="confirmDeletionModal"
+				:count="pendingDeletionItems.length"
+				:item-type="type.toLowerCase()"
+				@delete="confirmDelete"
+			/>
+		</template>
+
+		<FloatingActionBar :shown="selectedItems.length > 0 || isBulkOperating">
+			<template v-if="!isBulkOperating">
+				<span class="text-sm font-medium text-contrast"> {{ selectedItems.length }} selected </span>
+				<div class="ml-auto flex items-center gap-2">
+					<ButtonStyled>
+						<button @click="bulkToggleAll(true)">Enable</button>
+					</ButtonStyled>
+					<ButtonStyled>
+						<button @click="bulkToggleAll(false)">Disable</button>
+					</ButtonStyled>
+					<ButtonStyled color="red">
+						<button @click="showBulkDeleteModal">Delete</button>
+					</ButtonStyled>
+				</div>
+			</template>
+			<template v-else>
+				<div class="flex flex-1 flex-col gap-2">
+					<span class="text-sm font-medium text-contrast">
+						{{
+							bulkOperation === 'enable'
+								? 'Enabling'
+								: bulkOperation === 'disable'
+									? 'Disabling'
+									: 'Deleting'
+						}}
+						{{ type.toLowerCase() }}s... ({{ bulkProgress }}/{{ bulkTotal }})
+					</span>
+					<ProgressBar full-width :progress="bulkProgress" :max="bulkTotal" color="brand" />
+				</div>
+			</template>
+		</FloatingActionBar>
+	</div>
+</template>
diff --git a/packages/ui/src/pages/hosting/manage/content_old.vue b/packages/ui/src/pages/hosting/manage/content_old.vue
new file mode 100644
index 0000000000..573b695be5
--- /dev/null
+++ b/packages/ui/src/pages/hosting/manage/content_old.vue
@@ -0,0 +1,833 @@
+<template>
+	<Transition name="fade" mode="out-in">
+		<div
+			v-if="!contentData"
+			key="loading"
+			class="flex min-h-[50vh] w-full flex-col items-center justify-center gap-2 text-center text-secondary"
+		>
+			<SpinnerIcon class="animate-spin" />
+			Loading {{ type.toLowerCase() }}s...
+		</div>
+
+		<div
+			v-else-if="error"
+			key="error"
+			class="flex w-full flex-col items-center justify-center gap-4 p-4"
+		>
+			<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+				<div class="flex flex-col items-center text-center">
+					<div class="flex flex-col items-center gap-4">
+						<div class="grid place-content-center rounded-full bg-bg-orange p-4">
+							<IssuesIcon class="size-12 text-orange" />
+						</div>
+						<h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load content</h1>
+					</div>
+					<p class="text-lg text-secondary">
+						We couldn't load your server's {{ type.toLowerCase() }}s. Here's what went wrong:
+					</p>
+					<p>
+						<span class="break-all font-mono">{{ error.message }}</span>
+					</p>
+					<ButtonStyled size="large" color="brand" @click="() => refetch()">
+						<button class="mt-6 !w-full">Retry</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</div>
+
+		<div v-else key="content" class="relative isolate flex h-full w-full flex-col">
+			<div ref="pyroContentSentinel" class="sentinel" data-pyro-content-sentinel />
+			<div class="relative flex h-full w-full flex-col">
+				<div class="sticky top-0 z-20 -mt-3 flex items-center justify-between bg-bg py-3">
+					<div class="flex w-full flex-col-reverse items-center gap-2 sm:flex-row">
+						<div class="flex w-full items-center gap-2">
+							<div class="relative flex-1 text-sm">
+								<label class="sr-only" for="search">Search</label>
+								<SearchIcon
+									class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
+									aria-hidden="true"
+								/>
+								<input
+									id="search"
+									v-model="searchInput"
+									class="!h-9 !min-h-0 w-full border-[1px] border-solid border-button-border pl-9"
+									type="search"
+									name="search"
+									autocomplete="off"
+									:placeholder="`Search ${contentData?.length ?? 0} ${type.toLowerCase()}s...`"
+									@input="debouncedSearch"
+								/>
+							</div>
+							<ButtonStyled>
+								<OverflowMenu
+									:options="[
+										{ id: 'all', action: () => (filterMethod = 'all') },
+										{ id: 'enabled', action: () => (filterMethod = 'enabled') },
+										{ id: 'disabled', action: () => (filterMethod = 'disabled') },
+									]"
+								>
+									<span class="hidden whitespace-pre sm:block">
+										{{ filterMethodLabel }}
+									</span>
+									<FilterIcon aria-hidden="true" />
+									<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+									<template #all> All {{ type.toLowerCase() }}s </template>
+									<template #enabled> Only enabled </template>
+									<template #disabled> Only disabled </template>
+								</OverflowMenu>
+							</ButtonStyled>
+						</div>
+						<div v-if="hasMods" class="flex w-full items-center gap-2 sm:w-fit">
+							<ButtonStyled>
+								<button class="w-full text-nowrap sm:w-fit" @click="initiateFileUpload">
+									<FileIcon />
+									Add file
+								</button>
+							</ButtonStyled>
+							<ButtonStyled color="brand">
+								<a
+									class="w-full text-nowrap sm:w-fit"
+									:href="`/discover/${type.toLowerCase()}s?sid=${serverId}`"
+								>
+									<PlusIcon />
+									Add {{ type.toLowerCase() }}
+								</a>
+							</ButtonStyled>
+						</div>
+					</div>
+				</div>
+
+				<FileUploadDropdown
+					ref="uploadDropdownRef"
+					class="rounded-xl bg-bg-raised"
+					:margin-bottom="16"
+					:file-type="type"
+					:current-path="`/${type.toLowerCase()}s`"
+					:accepted-types="acceptedFileTypes"
+					@upload-complete="() => refetch()"
+				/>
+
+				<FileUploadDragAndDrop
+					v-if="server"
+					class="relative min-h-[50vh]"
+					overlay-class="rounded-xl border-2 border-dashed border-secondary"
+					:type="type"
+					@files-dropped="handleDroppedFiles"
+				>
+					<div v-if="hasFilteredMods" class="flex flex-col gap-2 transition-all">
+						<div ref="listContainer" class="relative w-full">
+							<div :style="{ position: 'relative', height: `${totalHeight}px` }">
+								<div
+									:style="{
+										position: 'absolute',
+										top: `${visibleTop}px`,
+										width: '100%',
+									}"
+								>
+									<TransitionGroup :name="hasInitiallyLoaded ? undefined : 'list'">
+										<div
+											v-for="(mod, index) in visibleItems.items"
+											:key="getStableModKey(mod)"
+											class="relative mb-2 flex w-full items-center justify-between rounded-xl bg-bg-raised"
+											:class="mod.disabled ? 'bg-table-alternateRow text-secondary' : ''"
+											:style="{
+												height: '64px',
+												transitionDelay: hasInitiallyLoaded
+													? undefined
+													: `${Math.min(index * 30, 300)}ms`,
+											}"
+										>
+											<a
+												:href="
+													mod.project_id
+														? `/project/${mod.project_id}/version/${mod.version_id}`
+														: `files?path=${type.toLowerCase()}s`
+												"
+												class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
+												draggable="false"
+											>
+												<Avatar
+													:src="mod.icon_url"
+													size="sm"
+													alt="Server Icon"
+													:class="mod.disabled ? 'opacity-75 grayscale' : ''"
+												/>
+												<div class="flex min-w-0 flex-col gap-1">
+													<span class="text-md flex min-w-0 items-center gap-2 font-bold">
+														<span class="truncate text-contrast">{{ friendlyModName(mod) }}</span>
+														<span
+															v-if="mod.disabled"
+															class="hidden rounded-full bg-button-bg p-1 px-2 text-xs text-contrast sm:block"
+															>Disabled</span
+														>
+													</span>
+													<div class="min-w-0 text-xs text-secondary">
+														<span v-if="mod.owner" class="hidden sm:block">
+															by {{ mod.owner }}
+														</span>
+														<span class="block font-semibold sm:hidden">
+															{{ mod.version_number || `External ${type.toLowerCase()}` }}
+														</span>
+													</div>
+												</div>
+											</a>
+											<div class="ml-2 hidden min-w-0 flex-1 flex-col text-sm sm:flex">
+												<div class="truncate font-semibold text-contrast">
+													<span v-tooltip="`${type} version`">{{
+														mod.version_number || `External ${type.toLowerCase()}`
+													}}</span>
+												</div>
+												<div class="truncate">
+													<span v-tooltip="`${type} file name`">
+														{{ mod.filename }}
+													</span>
+												</div>
+											</div>
+											<div
+												class="flex items-center justify-end gap-2 pr-4 font-semibold text-contrast sm:min-w-44"
+											>
+												<ButtonStyled color="red" type="transparent">
+													<button
+														v-tooltip="`Delete ${type.toLowerCase()}`"
+														:disabled="changingMods.has(getStableModKey(mod))"
+														class="!hidden sm:!block"
+														@click="removeMod(mod)"
+													>
+														<TrashIcon />
+													</button>
+												</ButtonStyled>
+												<ButtonStyled type="transparent">
+													<button
+														v-tooltip="
+															mod.project_id
+																? `Edit ${type.toLowerCase()} version`
+																: `External ${type.toLowerCase()}s cannot be edited`
+														"
+														:disabled="changingMods.has(getStableModKey(mod)) || !mod.project_id"
+														class="!hidden sm:!block"
+														@click="showVersionModal(mod)"
+													>
+														<template v-if="changingMods.has(getStableModKey(mod))">
+															<SpinnerIcon class="animate-spin" />
+														</template>
+														<template v-else>
+															<EditIcon />
+														</template>
+													</button>
+												</ButtonStyled>
+
+												<!-- Dropdown for mobile -->
+												<div class="mr-2 flex items-center sm:hidden">
+													<SpinnerIcon
+														v-if="changingMods.has(getStableModKey(mod))"
+														class="mr-2 h-5 w-5 animate-spin"
+														style="color: var(--color-base)"
+													/>
+													<ButtonStyled v-else circular type="transparent">
+														<OverflowMenu
+															:options="[
+																{
+																	id: 'edit',
+																	action: () => showVersionModal(mod),
+																	shown: !!(
+																		mod.project_id && !changingMods.has(getStableModKey(mod))
+																	),
+																},
+																{
+																	id: 'delete',
+																	action: () => removeMod(mod),
+																},
+															]"
+														>
+															<MoreVerticalIcon aria-hidden="true" />
+															<template #edit>
+																<EditIcon class="h-5 w-5" />
+																<span>Edit</span>
+															</template>
+															<template #delete>
+																<TrashIcon class="h-5 w-5" />
+																<span>Delete</span>
+															</template>
+														</OverflowMenu>
+													</ButtonStyled>
+												</div>
+
+												<input
+													:id="`toggle-${getStableModKey(mod)}`"
+													:checked="!mod.disabled"
+													:disabled="changingMods.has(getStableModKey(mod))"
+													class="switch stylized-toggle"
+													type="checkbox"
+													@change="toggleMod(mod)"
+												/>
+											</div>
+										</div>
+									</TransitionGroup>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- no mods has platform -->
+					<div
+						v-else-if="server?.loader && server.loader.toLowerCase() !== 'vanilla'"
+						class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
+					>
+						<div
+							v-if="!hasFilteredMods && hasMods"
+							class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
+						>
+							<SearchIcon class="size-24" />
+							<p class="m-0 font-bold text-contrast">
+								No {{ type.toLowerCase() }}s found for your query!
+							</p>
+							<p class="m-0">Try another query, or show everything.</p>
+							<ButtonStyled>
+								<button @click="showAll">
+									<ListIcon />
+									Show everything
+								</button>
+							</ButtonStyled>
+						</div>
+						<div
+							v-else
+							class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
+						>
+							<PackageClosedIcon class="size-24" />
+							<p class="m-0 font-bold text-contrast">No {{ type.toLowerCase() }}s found!</p>
+							<p class="m-0">
+								Add some {{ type.toLowerCase() }}s to your server to manage them here.
+							</p>
+							<div class="flex flex-row items-center gap-4">
+								<ButtonStyled type="outlined">
+									<button class="w-full text-nowrap sm:w-fit" @click="initiateFileUpload">
+										<FileIcon />
+										Add file
+									</button>
+								</ButtonStyled>
+								<ButtonStyled color="brand">
+									<a
+										class="w-full text-nowrap sm:w-fit"
+										:href="`/discover/${type.toLowerCase()}s?sid=${serverId}`"
+									>
+										<PlusIcon />
+										Add {{ type.toLowerCase() }}
+									</a>
+								</ButtonStyled>
+							</div>
+						</div>
+					</div>
+
+					<div
+						v-else
+						class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
+					>
+						<ServerLoaderIcon loader="Vanilla" class="size-24" />
+						<p class="m-0 pt-3 font-bold text-contrast">Your server is running Vanilla Minecraft</p>
+						<p class="m-0">
+							Add content to your server by installing a modpack or choosing a different platform
+							that supports {{ type }}s.
+						</p>
+						<div class="flex flex-row items-center gap-4">
+							<ButtonStyled class="mt-8">
+								<a :href="`/discover/modpacks?sid=${serverId}`">
+									<CompassIcon />
+									Find a modpack
+								</a>
+							</ButtonStyled>
+							<div>or</div>
+							<ButtonStyled class="mt-8">
+								<a :href="`/hosting/manage/${serverId}/options/loader`">
+									<WrenchIcon />
+									Change platform
+								</a>
+							</ButtonStyled>
+						</div>
+					</div>
+				</FileUploadDragAndDrop>
+			</div>
+		</div>
+	</Transition>
+
+	<ContentVersionEditModal
+		v-if="server?.mc_version && server?.loader"
+		ref="versionEditModalRef"
+		:type="type"
+		:loader="server.loader"
+		:game-version="server.mc_version"
+		:has-modpack="hasModpack"
+		:server-id="serverId"
+		:tags="props.tags"
+		@change-version="handleVersionChange"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import {
+	CompassIcon,
+	DropdownIcon,
+	EditIcon,
+	FileIcon,
+	FilterIcon,
+	IssuesIcon,
+	ListIcon,
+	MoreVerticalIcon,
+	PackageClosedIcon,
+	PlusIcon,
+	SearchIcon,
+	SpinnerIcon,
+	TrashIcon,
+	WrenchIcon,
+} from '@modrinth/assets'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+import Avatar from '../../../components/base/Avatar.vue'
+import ButtonStyled from '../../../components/base/ButtonStyled.vue'
+import OverflowMenu from '../../../components/base/OverflowMenu.vue'
+import ContentVersionEditModal from '../../../components/servers/content/ContentVersionEditModal.vue'
+import FileUploadDragAndDrop from '../../../components/servers/files/upload/FileUploadDragAndDrop.vue'
+import FileUploadDropdown from '../../../components/servers/files/upload/FileUploadDropdown.vue'
+import ServerLoaderIcon from '../../../components/servers/icons/LoaderIcon.vue'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '../../../providers'
+
+export interface ContentPageTags {
+	gameVersions: Labrinth.Tags.v2.GameVersion[]
+	loaders: Labrinth.Tags.v2.Loader[]
+}
+
+const props = defineProps<{
+	tags: ContentPageTags
+}>()
+
+type ContentItem = Archon.Content.v0.Mod
+
+const ITEM_HEIGHT = 72
+const BUFFER_SIZE = 5
+
+// Modal state
+const versionEditModalRef = ref<InstanceType<typeof ContentVersionEditModal>>()
+const currentEditMod = ref<ContentItem | null>(null)
+
+// Handle version change from modal
+const handleVersionChange = async (versionId: string) => {
+	const mod = currentEditMod.value
+	if (!mod) return
+
+	const modKey = getStableModKey(mod)
+	changingMods.value.add(modKey)
+
+	let installedNewVersion = false
+	const oldFilename = mod.filename
+
+	try {
+		versionEditModalRef.value?.hide()
+
+		// Step 1: Install new version
+		await installMutation.mutateAsync({
+			rinth_ids: { project_id: mod.project_id!, version_id: versionId },
+			install_as: type.value.toLowerCase() as 'mod' | 'plugin',
+		})
+		installedNewVersion = true
+
+		// Step 2: Remove old version
+		await deleteMutation.mutateAsync({
+			path: `/${type.value.toLowerCase()}s/${oldFilename}`,
+			modKey,
+		})
+
+		// Step 3: Refresh content list
+		await refetch()
+
+		addNotification({
+			text: `Successfully updated ${friendlyModName(mod)}`,
+			type: 'success',
+		})
+	} catch (error) {
+		const errorMsg = error instanceof Error ? error.message : String(error)
+
+		if (installedNewVersion) {
+			// New version installed but old version removal failed
+			addNotification({
+				text: `New version installed but couldn't remove old version. You may need to manually delete ${oldFilename}`,
+				type: 'warning',
+			})
+		} else {
+			// Installation failed
+			addNotification({
+				text: `Error changing mod version: ${errorMsg}`,
+				type: 'error',
+			})
+		}
+
+		console.error('Version change error:', error)
+	} finally {
+		changingMods.value.delete(modKey)
+		currentEditMod.value = null
+	}
+}
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const { server } = injectModrinthServerContext()
+
+const route = useRoute()
+const serverId = route.params.id as string
+
+// Content type based on server loader
+const type = computed(() => {
+	const loader = server.value?.loader?.toLowerCase()
+	return loader === 'paper' || loader === 'purpur' ? 'Plugin' : 'Mod'
+})
+
+// Check if server has a modpack
+const hasModpack = computed(() => server.value?.upstream?.kind === 'modpack')
+
+// Check if modal cannot be shown (missing required server data)
+const invalidModal = computed(() => !server.value?.mc_version || !server.value?.loader)
+
+// Accepted file types for upload
+const acceptedFileTypes = computed(() => {
+	return type.value.toLowerCase() === 'plugin' ? ['.jar'] : ['.jar', '.zip']
+})
+
+// TanStack Query for content list
+const contentQueryKey = computed(() => ['content', 'list', serverId])
+const {
+	data: contentData,
+	error,
+	refetch,
+} = useQuery({
+	queryKey: contentQueryKey,
+	queryFn: () => client.archon.content_v0.list(serverId),
+})
+
+// Track mods currently being changed (toggle, delete, version change)
+const changingMods = ref(new Set<string>())
+
+// Delete mutation
+const deleteMutation = useMutation({
+	mutationFn: ({ path }: { path: string; modKey: string }) =>
+		client.archon.content_v0.delete(serverId, { path }),
+	onSuccess: () => {
+		queryClient.invalidateQueries({ queryKey: contentQueryKey.value })
+	},
+	onError: (err, { modKey }) => {
+		addNotification({
+			type: 'error',
+			text: err instanceof Error ? err.message : 'Failed to remove mod',
+		})
+		changingMods.value.delete(modKey)
+	},
+})
+
+// Toggle mutation (uses files API to rename)
+const toggleMutation = useMutation({
+	mutationFn: async ({ mod }: { mod: ContentItem; modKey: string }) => {
+		const newFilename = mod.filename.endsWith('.disabled')
+			? mod.filename.slice(0, -9)
+			: `${mod.filename}.disabled`
+		const folder = `${type.value.toLowerCase()}s`
+		await client.kyros.files_v0.moveFileOrFolder(
+			`/${folder}/${mod.filename}`,
+			`/${folder}/${newFilename}`,
+		)
+		return { newFilename }
+	},
+	onSuccess: () => {
+		queryClient.invalidateQueries({ queryKey: contentQueryKey.value })
+	},
+	onError: (_err, { mod, modKey }) => {
+		addNotification({
+			type: 'error',
+			text: `Failed to toggle ${mod.name || mod.filename}`,
+		})
+		changingMods.value.delete(modKey)
+	},
+})
+
+// Install mutation (for version changes)
+const installMutation = useMutation({
+	mutationFn: (req: Archon.Content.v0.InstallModRequest) =>
+		client.archon.content_v0.install(serverId, req),
+	onSuccess: () => {
+		queryClient.invalidateQueries({ queryKey: contentQueryKey.value })
+	},
+})
+
+// UI State
+const searchInput = ref('')
+const modSearchInput = ref('')
+const filterMethod = ref('all')
+const uploadDropdownRef = ref()
+const listContainer = ref<HTMLElement | null>(null)
+const windowScrollY = ref(0)
+const windowHeight = ref(0)
+const pyroContentSentinel = ref<HTMLElement | null>(null)
+
+// Track initial load to only animate on first render
+const hasInitiallyLoaded = ref(false)
+watch(
+	contentData,
+	(data) => {
+		if (data && !hasInitiallyLoaded.value) {
+			setTimeout(() => {
+				hasInitiallyLoaded.value = true
+			}, 500)
+		}
+	},
+	{ immediate: true },
+)
+
+// Debounced search
+const debouncedSearch = useDebounceFn(() => {
+	modSearchInput.value = searchInput.value
+
+	if (pyroContentSentinel.value) {
+		const sentinelRect = pyroContentSentinel.value.getBoundingClientRect()
+		if (sentinelRect.top < 0 || sentinelRect.bottom > window.innerHeight) {
+			pyroContentSentinel.value.scrollIntoView({ block: 'start' })
+		}
+	}
+}, 300)
+
+// Filter method label
+const filterMethodLabel = computed(() => {
+	switch (filterMethod.value) {
+		case 'disabled':
+			return 'Only disabled'
+		case 'enabled':
+			return 'Only enabled'
+		default:
+			return `All ${type.value.toLowerCase()}s`
+	}
+})
+
+// Filtered and sorted mods
+const filteredMods = computed(() => {
+	if (!contentData.value) return []
+
+	let mods = modSearchInput.value.trim()
+		? contentData.value.filter(
+				(mod) =>
+					mod.name?.toLowerCase().includes(modSearchInput.value.toLowerCase()) ||
+					mod.filename.toLowerCase().includes(modSearchInput.value.toLowerCase()),
+			)
+		: contentData.value
+
+	switch (filterMethod.value) {
+		case 'disabled':
+			mods = mods.filter((mod) => mod.disabled)
+			break
+		case 'enabled':
+			mods = mods.filter((mod) => !mod.disabled)
+			break
+	}
+
+	return mods.sort((a, b) => friendlyModName(a).localeCompare(friendlyModName(b)))
+})
+
+const hasMods = computed(() => (contentData.value?.length ?? 0) > 0)
+const hasFilteredMods = computed(() => filteredMods.value.length > 0)
+
+// Virtualization
+const totalHeight = computed(() => filteredMods.value.length * ITEM_HEIGHT)
+
+const getVisibleRange = () => {
+	if (!listContainer.value) return { start: 0, end: 0 }
+
+	const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY
+	const scrollTop = Math.max(0, windowScrollY.value - containerTop)
+
+	const start = Math.floor(scrollTop / ITEM_HEIGHT)
+	const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT)
+
+	return {
+		start: Math.max(0, start - BUFFER_SIZE),
+		end: Math.min(filteredMods.value.length, start + visibleCount + BUFFER_SIZE * 2),
+	}
+}
+
+const visibleTop = computed(() => {
+	const range = getVisibleRange()
+	return range.start * ITEM_HEIGHT
+})
+
+const visibleItems = computed(() => {
+	const range = getVisibleRange()
+	return {
+		items: filteredMods.value.slice(
+			Math.max(0, range.start),
+			Math.min(filteredMods.value.length, range.end),
+		),
+	}
+})
+
+// Scroll handling
+const handleScroll = () => {
+	windowScrollY.value = window.scrollY
+}
+
+const handleResize = () => {
+	windowHeight.value = window.innerHeight
+}
+
+onMounted(() => {
+	windowHeight.value = window.innerHeight
+	window.addEventListener('scroll', handleScroll, { passive: true })
+	window.addEventListener('resize', handleResize, { passive: true })
+	handleScroll()
+})
+
+onUnmounted(() => {
+	window.removeEventListener('scroll', handleScroll)
+	window.removeEventListener('resize', handleResize)
+})
+
+// Helper functions
+function friendlyModName(mod: ContentItem) {
+	if (mod.name) return mod.name
+
+	let cleanName = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
+
+	const lastDotIndex = cleanName.lastIndexOf('.')
+	if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex)
+	return cleanName
+}
+
+function getStableModKey(mod: ContentItem): string {
+	if (mod.project_id) {
+		return `project-${mod.project_id}`
+	}
+	const baseFilename = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
+	return `file-${baseFilename}`
+}
+
+// Actions
+async function toggleMod(mod: ContentItem) {
+	const modKey = getStableModKey(mod)
+	changingMods.value.add(modKey)
+
+	toggleMutation.mutate(
+		{ mod, modKey },
+		{
+			onSettled: () => {
+				changingMods.value.delete(modKey)
+			},
+		},
+	)
+}
+
+async function removeMod(mod: ContentItem) {
+	const modKey = getStableModKey(mod)
+	changingMods.value.add(modKey)
+
+	deleteMutation.mutate(
+		{ path: `/${type.value.toLowerCase()}s/${mod.filename}`, modKey },
+		{
+			onSettled: () => {
+				changingMods.value.delete(modKey)
+			},
+		},
+	)
+}
+
+function showVersionModal(mod: ContentItem) {
+	if (invalidModal.value || !mod?.project_id || !mod?.filename) {
+		const errmsg = invalidModal.value
+			? 'Data required for changing mod version was not found.'
+			: `${!mod?.project_id ? 'No mod project ID found' : 'No mod filename found'} for ${friendlyModName(mod)}`
+		console.error(errmsg)
+		addNotification({
+			text: errmsg,
+			type: 'error',
+		})
+		return
+	}
+
+	currentEditMod.value = mod
+	versionEditModalRef.value?.show(mod)
+}
+
+const handleDroppedFiles = (files: File[]) => {
+	files.forEach((file) => {
+		uploadDropdownRef.value?.uploadFile(file)
+	})
+}
+
+const initiateFileUpload = () => {
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.accept = acceptedFileTypes.value.join(',')
+	input.multiple = true
+	input.onchange = () => {
+		if (input.files) {
+			Array.from(input.files).forEach((file) => {
+				uploadDropdownRef.value?.uploadFile(file)
+			})
+		}
+	}
+	input.click()
+}
+
+const showAll = () => {
+	searchInput.value = ''
+	modSearchInput.value = ''
+	filterMethod.value = 'all'
+}
+</script>
+
+<style scoped>
+.sentinel {
+	position: absolute;
+	top: -1rem;
+	left: 0;
+	right: 0;
+	height: 1px;
+	visibility: hidden;
+}
+
+.stylized-toggle:checked::after {
+	background: var(--color-accent-contrast) !important;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition:
+		opacity 300ms ease-in-out,
+		transform 300ms ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+	transform: scale(0.98);
+}
+
+.list-enter-active,
+.list-leave-active {
+	transition: all 200ms ease-in-out;
+}
+
+.list-enter-from {
+	opacity: 0;
+	transform: translateY(-10px);
+}
+
+.list-leave-to {
+	opacity: 0;
+	transform: translateY(10px);
+}
+
+.list-move {
+	transition: transform 200ms ease-in-out;
+}
+</style>
diff --git a/packages/ui/src/pages/index.ts b/packages/ui/src/pages/index.ts
index 528a1761c5..75b60b26e9 100644
--- a/packages/ui/src/pages/index.ts
+++ b/packages/ui/src/pages/index.ts
@@ -1,3 +1,5 @@
 export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'
+export { default as ServersManageContentPage } from './hosting/manage/content.vue'
+export { default as ServersManageContentOldPage } from './hosting/manage/content_old.vue'
 export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
 export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 14d072b4d0..5ed52f9a3b 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -1,3 +1,11 @@
+import {
+	DownloadIcon,
+	HeartIcon,
+	SettingsIcon,
+	ShareIcon,
+	TrashIcon,
+	UserIcon,
+} from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import Combobox from '../../components/base/Combobox.vue'
@@ -44,3 +52,61 @@ export const Disabled: Story = {
 		disabled: true,
 	},
 }
+
+export const IconSlot: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ type: 'divider' },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+			{ type: 'divider' },
+			{ value: 'delete', label: 'Delete', icon: TrashIcon, disabled: true },
+		],
+		placeholder: 'Select an action',
+		listbox: false,
+	},
+}
+
+export const IconSlotSearchable: 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 },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+			{ value: 'delete', label: 'Delete', icon: TrashIcon },
+		],
+		placeholder: 'Select an action',
+		searchable: true,
+		searchPlaceholder: 'Search actions...',
+	},
+}
+
+export const WithSelectedOption: Story = {
+	args: {
+		options: [
+			{ value: '1', label: 'Option 1' },
+			{ value: '2', label: 'Option 2' },
+			{ value: '3', label: 'Option 3' },
+		],
+		modelValue: '2',
+	},
+}
+
+export const WithSelectedOptionAndIcon: 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 },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+		],
+		modelValue: 'favorite',
+		showIconInSelected: true,
+	},
+}
diff --git a/packages/ui/src/stories/base/Toggle.stories.ts b/packages/ui/src/stories/base/Toggle.stories.ts
index 8ed45b3695..14a02d2c7a 100644
--- a/packages/ui/src/stories/base/Toggle.stories.ts
+++ b/packages/ui/src/stories/base/Toggle.stories.ts
@@ -13,6 +13,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	args: {
 		modelValue: false,
+		small: false,
 	},
 }
 
@@ -29,11 +30,26 @@ export const Disabled: Story = {
 	},
 }
 
+export const Small: Story = {
+	args: {
+		modelValue: false,
+		small: true,
+	},
+}
+
+export const SmallChecked: Story = {
+	args: {
+		modelValue: true,
+		small: true,
+	},
+}
+
 export const AllStates: Story = {
 	render: () => ({
 		components: { Toggle },
 		template: /*html*/ `
 			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<span style="font-weight: 600;">Default Size</span>
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" /> Off
 				</div>
@@ -43,6 +59,16 @@ export const AllStates: Story = {
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" :disabled="true" /> Disabled
 				</div>
+				<span style="font-weight: 600; margin-top: 1rem;">Small Size</span>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :small="true" /> Off
+				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="true" :small="true" /> On
+				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :small="true" :disabled="true" /> Disabled
+				</div>
 			</div>
 		`,
 	}),
diff --git a/packages/ui/src/stories/instances/ContentCardItem.stories.ts b/packages/ui/src/stories/instances/ContentCardItem.stories.ts
new file mode 100644
index 0000000000..cde5795643
--- /dev/null
+++ b/packages/ui/src/stories/instances/ContentCardItem.stories.ts
@@ -0,0 +1,894 @@
+import { EditIcon, EyeIcon, FolderOpenIcon, LinkIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { computed, ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ContentCardItem from '../../components/instances/ContentCardItem.vue'
+import type {
+	ContentCardProject,
+	ContentCardVersion,
+	ContentOwner,
+} from '../../components/instances/types'
+
+// Real project data from Modrinth API
+const sodiumProject: ContentCardProject = {
+	id: 'AANobbMI',
+	slug: 'sodium',
+	title: 'Sodium',
+	icon_url:
+		'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+}
+
+const modMenuProject: ContentCardProject = {
+	id: 'mOgUt4GM',
+	slug: 'modmenu',
+	title: 'Mod Menu',
+	icon_url: 'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+}
+
+const fabricApiProject: ContentCardProject = {
+	id: 'P7dR8mSH',
+	slug: 'fabric-api',
+	title: 'Fabric API',
+	icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+}
+
+// Version data
+const sodiumVersion: ContentCardVersion = {
+	id: '59wygFUQ',
+	version_number: 'mc1.21.11-0.8.2-fabric',
+	file_name: 'sodium-fabric-0.8.2+mc1.21.11.jar',
+}
+
+const modMenuVersion: ContentCardVersion = {
+	id: 'QuU0ciaR',
+	version_number: '16.0.0',
+	file_name: 'modmenu-16.0.0.jar',
+}
+
+const fabricApiVersion: ContentCardVersion = {
+	id: 'Lwa1Q6e4',
+	version_number: '0.141.3+26.1',
+	file_name: 'fabric-api-0.141.3+26.1.jar',
+}
+
+// Owner data
+const sodiumOwner: ContentOwner = {
+	id: 'DzLrfrbK',
+	name: 'IMS',
+	avatar_url: 'https://avatars3.githubusercontent.com/u/31803019?v=4',
+	type: 'user',
+}
+
+const fabricApiOwner: ContentOwner = {
+	id: 'BZoBsPo6',
+	name: 'FabricMC',
+	avatar_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+	type: 'organization',
+}
+
+const meta = {
+	title: 'Instances/ContentCardItem',
+	component: ContentCardItem,
+	parameters: {
+		layout: 'padded',
+	},
+	argTypes: {
+		project: {
+			control: 'object',
+			description: 'Project information (id, slug, title, icon_url)',
+		},
+		version: {
+			control: 'object',
+			description: 'Version information (id, version_number, file_name)',
+		},
+		owner: {
+			control: 'object',
+			description: 'Owner/author information',
+		},
+		enabled: {
+			control: 'boolean',
+			description: 'Toggle state - toggle hidden if undefined',
+		},
+		selected: {
+			control: false,
+			description:
+				'Selection state - checkbox hidden if undefined (use v-model:selected in render function)',
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Disables all interactions and grays out the card',
+		},
+		overflowOptions: {
+			control: 'object',
+			description: 'Options for the overflow menu',
+		},
+	},
+} satisfies Meta<typeof ContentCardItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// All Types Overview
+// ============================================
+
+export const AllTypes: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const toggleOn = ref(true)
+			const toggleOff = ref(false)
+
+			const cards = [
+				{
+					label: 'Full featured (all actions)',
+					project: sodiumProject,
+					version: sodiumVersion,
+					owner: sodiumOwner,
+					enabled: toggleOn,
+					hasUpdate: true,
+					hasDelete: true,
+					hasOverflow: true,
+				},
+				{
+					label: 'With toggle only',
+					project: modMenuProject,
+					version: modMenuVersion,
+					owner: { id: 'u2', name: 'Prospector', type: 'user' },
+					enabled: toggleOn,
+				},
+				{
+					label: 'With update available',
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					hasUpdate: true,
+				},
+				{
+					label: 'Minimal (project only)',
+					project: sodiumProject,
+				},
+				{
+					label: 'With version info only',
+					project: modMenuProject,
+					version: modMenuVersion,
+				},
+				{
+					label: 'With owner only',
+					project: fabricApiProject,
+					owner: fabricApiOwner,
+				},
+				{
+					label: 'Disabled state',
+					project: sodiumProject,
+					version: sodiumVersion,
+					owner: sodiumOwner,
+					enabled: toggleOff,
+					disabled: true,
+				},
+				{
+					label: 'Delete button only',
+					project: modMenuProject,
+					version: modMenuVersion,
+					hasDelete: true,
+				},
+				{
+					label: 'Toggle off',
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					enabled: toggleOff,
+				},
+			]
+
+			return { cards }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<template v-for="card in cards" :key="card.label">
+					<h3 class="text-sm font-medium text-secondary">{{ card.label }}</h3>
+					<ContentCardItem
+						:project="card.project"
+						:version="card.version"
+						:owner="card.owner"
+						:enabled="card.enabled?.value"
+						:disabled="card.disabled"
+						@update="card.hasUpdate ? () => {} : undefined"
+						@delete="card.hasDelete ? () => {} : undefined"
+						@update:enabled="card.enabled ? (v) => card.enabled.value = v : undefined"
+						:overflow-options="card.hasOverflow ? [
+							{ id: 'view', action: () => {} },
+							{ divider: true },
+							{ id: 'remove', action: () => {}, color: 'red' },
+						] : undefined"
+					>
+						<template #view>View on Modrinth</template>
+						<template #remove>Remove</template>
+					</ContentCardItem>
+				</template>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Basic Stories
+// ============================================
+
+export const Default: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		enabled: true,
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View clicked') },
+			{ id: 'edit', action: () => console.log('Edit clicked') },
+			{ divider: true },
+			{ id: 'remove', action: () => console.log('Remove clicked'), color: 'red' },
+		],
+		onDelete: fn(),
+		onUpdate: fn(),
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const MinimalProjectOnly: Story = {
+	args: {
+		project: sodiumProject,
+	},
+}
+
+export const WithVersion: Story = {
+	args: {
+		project: modMenuProject,
+		version: modMenuVersion,
+	},
+}
+
+export const WithUserOwner: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+	},
+}
+
+export const WithOrganizationOwner: Story = {
+	args: {
+		project: fabricApiProject,
+		version: fabricApiVersion,
+		owner: fabricApiOwner,
+	},
+}
+
+export const WithToggle: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		enabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const ToggleDisabled: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		enabled: false,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Action Button Stories
+// ============================================
+
+export const WithDeleteButton: Story = {
+	args: {
+		project: modMenuProject,
+		version: modMenuVersion,
+		owner: sodiumOwner,
+		onDelete: fn(),
+	},
+}
+
+export const WithUpdateButton: Story = {
+	args: {
+		project: fabricApiProject,
+		version: fabricApiVersion,
+		owner: fabricApiOwner,
+		onUpdate: fn(),
+	},
+}
+
+export const WithAllActions: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		enabled: true,
+		onDelete: fn(),
+		onUpdate: fn(),
+		'onUpdate:enabled': fn(),
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'openFolder', action: () => console.log('Open folder') },
+			{ divider: true },
+			{ id: 'copyLink', action: () => console.log('Copy link') },
+		],
+	},
+}
+
+// ============================================
+// State Stories
+// ============================================
+
+export const Disabled: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		enabled: false,
+		disabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const LongProjectName: Story = {
+	args: {
+		project: {
+			id: 'test123',
+			slug: 'very-long-project-name',
+			title: '[EMF] Entity Model Features - The Ultimate Entity Rendering Mod',
+			icon_url: sodiumProject.icon_url,
+		},
+		version: {
+			id: 'v1',
+			version_number: '2.4.1',
+			file_name: 'Entity_model_features_fabric_1.21.1-2.4.1.jar',
+		},
+		owner: {
+			id: 'u1',
+			name: 'Traben',
+			type: 'user',
+		},
+		enabled: true,
+		onDelete: fn(),
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Overflow Menu Stories
+// ============================================
+
+export const WithOverflowMenu: Story = {
+	render: (args) => ({
+		components: { ContentCardItem, EditIcon, EyeIcon, FolderOpenIcon, LinkIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentCardItem v-bind="args">
+				<template #view>
+					<EyeIcon class="size-5" /> View on Modrinth
+				</template>
+				<template #edit>
+					<EditIcon class="size-5" /> Edit settings
+				</template>
+				<template #openFolder>
+					<FolderOpenIcon class="size-5" /> Open folder
+				</template>
+				<template #copyLink>
+					<LinkIcon class="size-5" /> Copy link
+				</template>
+			</ContentCardItem>
+		`,
+	}),
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'edit', action: () => console.log('Edit') },
+			{ id: 'openFolder', action: () => console.log('Open folder') },
+			{ divider: true },
+			{ id: 'copyLink', action: () => console.log('Copy link') },
+		],
+	},
+}
+
+// ============================================
+// Slot Stories
+// ============================================
+
+export const WithAdditionalButtons: Story = {
+	render: (args) => ({
+		components: { ContentCardItem, ButtonStyled, EyeIcon, FolderOpenIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentCardItem v-bind="args">
+				<template #additionalButtonsLeft>
+					<ButtonStyled v-tooltip="'View on Modrinth'" circular type="transparent">
+						<button>
+							<EyeIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+				</template>
+				<template #additionalButtonsRight>
+					<ButtonStyled v-tooltip="'Open folder'" circular type="transparent">
+						<button>
+							<FolderOpenIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+				</template>
+			</ContentCardItem>
+		`,
+	}),
+	args: {
+		project: modMenuProject,
+		version: modMenuVersion,
+		enabled: true,
+		onDelete: fn(),
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Interactive Stories
+// ============================================
+
+export const InteractiveToggle: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const enabled = ref(true)
+			return {
+				enabled,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardItem
+					:project="project"
+					:version="version"
+					:owner="owner"
+					v-model:enabled="enabled"
+				/>
+				<div class="text-sm text-secondary">
+					Mod is currently: <strong>{{ enabled ? 'Enabled' : 'Disabled' }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// List Stories
+// ============================================
+
+export const ModList: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const mods = ref([
+				{ project: sodiumProject, version: sodiumVersion, owner: sodiumOwner, enabled: true },
+				{
+					project: modMenuProject,
+					version: modMenuVersion,
+					owner: { id: 'u2', name: 'Prospector', type: 'user' as const },
+					enabled: true,
+				},
+				{
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					enabled: true,
+				},
+			])
+
+			const handleDelete = (index: number) => {
+				mods.value.splice(index, 1)
+			}
+
+			const handleToggle = (index: number, value: boolean) => {
+				mods.value[index].enabled = value
+			}
+
+			return { mods, handleDelete, handleToggle }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-3">
+				<ContentCardItem
+					v-for="(mod, index) in mods"
+					:key="mod.project.id"
+					:project="mod.project"
+					:version="mod.version"
+					:owner="mod.owner"
+					:enabled="mod.enabled"
+					@update:enabled="(val) => handleToggle(index, val)"
+					@delete="() => handleDelete(index)"
+					:overflow-options="[
+						{ id: 'view', action: () => console.log('View', mod.project.slug) },
+						{ divider: true },
+						{ id: 'remove', action: () => handleDelete(index), color: 'red' },
+					]"
+				>
+					<template #view>View on Modrinth</template>
+					<template #remove>Remove from instance</template>
+				</ContentCardItem>
+			</div>
+		`,
+	}),
+}
+
+export const MixedStates: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			return {
+				sodiumProject,
+				sodiumVersion,
+				sodiumOwner,
+				modMenuProject,
+				modMenuVersion,
+				fabricApiProject,
+				fabricApiVersion,
+				fabricApiOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-3">
+				<!-- Enabled with update available -->
+				<ContentCardItem
+					:project="sodiumProject"
+					:version="sodiumVersion"
+					:owner="sodiumOwner"
+					:enabled="true"
+					@update="() => console.log('Update sodium')"
+					@update:enabled="() => {}"
+					@delete="() => {}"
+				/>
+
+				<!-- Disabled mod -->
+				<ContentCardItem
+					:project="modMenuProject"
+					:version="modMenuVersion"
+					:enabled="false"
+					:disabled="true"
+					@update:enabled="() => {}"
+				/>
+
+				<!-- No toggle, just view -->
+				<ContentCardItem
+					:project="fabricApiProject"
+					:version="fabricApiVersion"
+					:owner="fabricApiOwner"
+				/>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Responsive Stories
+// ============================================
+
+export const ResponsiveView: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			return {
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-6">
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Desktop (version info visible)</h3>
+					<div class="w-full">
+						<ContentCardItem
+							:project="project"
+							:version="version"
+							:owner="owner"
+							:enabled="true"
+							@update:enabled="() => {}"
+							@delete="() => {}"
+							@update="() => {}"
+						/>
+					</div>
+				</div>
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Mobile (&lt;768px - version info hidden)</h3>
+					<div class="w-[360px]">
+						<ContentCardItem
+							:project="project"
+							:version="version"
+							:owner="owner"
+							:enabled="true"
+							@update:enabled="() => {}"
+							@delete="() => {}"
+						/>
+					</div>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Edge Cases
+// ============================================
+
+export const NoIcon: Story = {
+	args: {
+		project: {
+			id: 'test',
+			slug: 'no-icon-mod',
+			title: 'Mod Without Icon',
+			icon_url: undefined,
+		},
+		version: {
+			id: 'v1',
+			version_number: '1.0.0',
+			file_name: 'no-icon-mod-1.0.0.jar',
+		},
+		enabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const NoOwnerAvatar: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: {
+			id: 'u1',
+			name: 'Anonymous',
+			avatar_url: undefined,
+			type: 'user',
+		},
+		enabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Selection Stories
+// ============================================
+
+export const WithSelection: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(false)
+			return {
+				selected,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardItem
+					:project="project"
+					:version="version"
+					:owner="owner"
+					:enabled="true"
+					v-model:selected="selected"
+					@update:enabled="() => {}"
+				/>
+				<div class="text-sm text-secondary">
+					Selected: <strong>{{ selected }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const SelectionSelected: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(true)
+			return {
+				selected,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<ContentCardItem
+				:project="project"
+				:version="version"
+				:owner="owner"
+				v-model:selected="selected"
+			/>
+		`,
+	}),
+}
+
+export const SelectionWithAllActions: Story = {
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(false)
+			const enabled = ref(true)
+			return {
+				selected,
+				enabled,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardItem
+					:project="project"
+					:version="version"
+					:owner="owner"
+					v-model:selected="selected"
+					v-model:enabled="enabled"
+					@update="() => console.log('Update clicked')"
+					@delete="() => console.log('Delete clicked')"
+					:overflow-options="[
+						{ id: 'view', action: () => console.log('View') },
+						{ divider: true },
+						{ id: 'remove', action: () => console.log('Remove'), color: 'red' },
+					]"
+				>
+					<template #view>View on Modrinth</template>
+					<template #remove>Remove</template>
+				</ContentCardItem>
+				<div class="text-sm text-secondary">
+					Selected: <strong>{{ selected }}</strong> | Enabled: <strong>{{ enabled }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const SelectableModList: Story = {
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const mods = ref([
+				{
+					project: sodiumProject,
+					version: sodiumVersion,
+					owner: sodiumOwner,
+					enabled: true,
+					selected: false,
+				},
+				{
+					project: modMenuProject,
+					version: modMenuVersion,
+					owner: { id: 'u2', name: 'Prospector', type: 'user' as const },
+					enabled: true,
+					selected: true,
+				},
+				{
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					enabled: false,
+					selected: false,
+				},
+			])
+
+			const selectedCount = computed(() => mods.value.filter((m) => m.selected).length)
+
+			const toggleAll = () => {
+				const allSelected = mods.value.every((m) => m.selected)
+				mods.value.forEach((m) => (m.selected = !allSelected))
+			}
+
+			return { mods, selectedCount, toggleAll }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<div class="flex items-center justify-between">
+					<button
+						class="text-sm text-brand hover:underline"
+						@click="toggleAll"
+					>
+						Toggle all
+					</button>
+					<span class="text-sm text-secondary">{{ selectedCount }} selected</span>
+				</div>
+				<div class="flex flex-col gap-3">
+					<ContentCardItem
+						v-for="mod in mods"
+						:key="mod.project.id"
+						:project="mod.project"
+						:version="mod.version"
+						:owner="mod.owner"
+						:enabled="mod.enabled"
+						:disabled="!mod.enabled"
+						v-model:selected="mod.selected"
+						@update:enabled="(val) => mod.enabled = val"
+						@delete="() => console.log('Delete', mod.project.slug)"
+					/>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const SelectionComparisonWithAndWithout: Story = {
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(false)
+			return {
+				selected,
+				sodiumProject,
+				sodiumVersion,
+				sodiumOwner,
+				modMenuProject,
+				modMenuVersion,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-6">
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">With selection (checkbox visible)</h3>
+					<ContentCardItem
+						:project="sodiumProject"
+						:version="sodiumVersion"
+						:owner="sodiumOwner"
+						:enabled="true"
+						v-model:selected="selected"
+						@update:enabled="() => {}"
+						@delete="() => {}"
+					/>
+				</div>
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Without selection (no checkbox)</h3>
+					<ContentCardItem
+						:project="modMenuProject"
+						:version="modMenuVersion"
+						:enabled="true"
+						@update:enabled="() => {}"
+						@delete="() => {}"
+					/>
+				</div>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/instances/ContentCardTable.stories.ts b/packages/ui/src/stories/instances/ContentCardTable.stories.ts
new file mode 100644
index 0000000000..08de10bcd9
--- /dev/null
+++ b/packages/ui/src/stories/instances/ContentCardTable.stories.ts
@@ -0,0 +1,684 @@
+import { DownloadIcon, EyeIcon, FolderOpenIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ContentCardTable from '../../components/instances/ContentCardTable.vue'
+import type { ContentCardTableItem } from '../../components/instances/types'
+
+// Sample data
+const sodiumItem: ContentCardTableItem = {
+	id: 'AANobbMI',
+	project: {
+		id: 'AANobbMI',
+		slug: 'sodium',
+		title: 'Sodium',
+		icon_url:
+			'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+	},
+	version: {
+		id: '59wygFUQ',
+		version_number: 'mc1.21.11-0.8.2-fabric',
+		file_name: 'sodium-fabric-0.8.2+mc1.21.11.jar',
+	},
+	owner: {
+		id: 'DzLrfrbK',
+		name: 'IMS',
+		avatar_url: 'https://avatars3.githubusercontent.com/u/31803019?v=4',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const modMenuItem: ContentCardTableItem = {
+	id: 'mOgUt4GM',
+	project: {
+		id: 'mOgUt4GM',
+		slug: 'modmenu',
+		title: 'Mod Menu',
+		icon_url: 'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+	},
+	version: {
+		id: 'QuU0ciaR',
+		version_number: '16.0.0',
+		file_name: 'modmenu-16.0.0.jar',
+	},
+	owner: {
+		id: 'u2',
+		name: 'Prospector',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const fabricApiItem: ContentCardTableItem = {
+	id: 'P7dR8mSH',
+	project: {
+		id: 'P7dR8mSH',
+		slug: 'fabric-api',
+		title: 'Fabric API',
+		icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+	},
+	version: {
+		id: 'Lwa1Q6e4',
+		version_number: '0.141.3+26.1',
+		file_name: 'fabric-api-0.141.3+26.1.jar',
+	},
+	owner: {
+		id: 'BZoBsPo6',
+		name: 'FabricMC',
+		avatar_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+		type: 'organization',
+	},
+	enabled: false,
+}
+
+const emfItem: ContentCardTableItem = {
+	id: 'emf123',
+	project: {
+		id: 'emf123',
+		slug: 'entity-model-features',
+		title: '[EMF] Entity Model Features',
+		icon_url:
+			'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+	},
+	version: {
+		id: 'v1',
+		version_number: '2.4.1',
+		file_name: 'Entity_model_features_fabric_1.21.1-2.4.1.jar',
+	},
+	owner: {
+		id: 'u1',
+		name: 'Traben',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const etfItem: ContentCardTableItem = {
+	id: 'etf456',
+	project: {
+		id: 'etf456',
+		slug: 'entity-texture-features',
+		title: '[ETF] Entity Texture Features',
+		icon_url: 'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+	},
+	version: {
+		id: 'v2',
+		version_number: '6.2.9',
+		file_name: 'Entity_texture_features_fabric_1.21.1-6.2.9.jar',
+	},
+	owner: {
+		id: 'u1',
+		name: 'Traben',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const importedModItem: ContentCardTableItem = {
+	id: 'imported123',
+	project: {
+		id: 'imported123',
+		slug: 'import-mod',
+		title: 'Import mod',
+		icon_url: undefined,
+	},
+	version: {
+		id: 'v3',
+		version_number: 'Unknown',
+		file_name: 'Entity_texture_features_fabric_1.21.1-6.2.9.jar',
+	},
+	enabled: false,
+}
+
+const sampleItems: ContentCardTableItem[] = [sodiumItem, modMenuItem, fabricApiItem]
+
+const figmaDesignItems: ContentCardTableItem[] = [emfItem, etfItem, importedModItem]
+
+const meta = {
+	title: 'Instances/ContentCardTable',
+	component: ContentCardTable,
+	parameters: {
+		layout: 'padded',
+	},
+	argTypes: {
+		items: {
+			control: 'object',
+			description: 'Array of items to display in the table',
+		},
+		showSelection: {
+			control: 'boolean',
+			description: 'Show checkboxes for selection',
+		},
+		sortable: {
+			control: 'boolean',
+			description: 'Enable column sorting',
+		},
+		sortBy: {
+			control: 'select',
+			options: ['project', 'version', undefined],
+			description: 'Current sort column',
+		},
+		sortDirection: {
+			control: 'select',
+			options: ['asc', 'desc'],
+			description: 'Sort direction',
+		},
+	},
+} satisfies Meta<typeof ContentCardTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// Basic Stories
+// ============================================
+
+export const Default: Story = {
+	args: {
+		items: sampleItems,
+	},
+}
+
+export const FigmaDesign: Story = {
+	args: {
+		items: figmaDesignItems,
+		showSelection: true,
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const selectedIds = ref<string[]>([emfItem.id, etfItem.id])
+			return { args, selectedIds }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				v-bind="args"
+				v-model:selected-ids="selectedIds"
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			/>
+		`,
+	}),
+}
+
+export const WithSelection: Story = {
+	args: {
+		items: sampleItems,
+		showSelection: true,
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const selectedIds = ref<string[]>([])
+			return { args, selectedIds }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardTable
+					v-bind="args"
+					v-model:selected-ids="selectedIds"
+					@update:enabled="(id, val) => console.log('Toggle', id, val)"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+				<div class="text-sm text-secondary">
+					Selected: <strong>{{ selectedIds.length }}</strong> items
+					<span v-if="selectedIds.length">({{ selectedIds.join(', ') }})</span>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const WithSorting: Story = {
+	args: {
+		items: sampleItems,
+		sortable: true,
+		sortBy: 'project',
+		sortDirection: 'asc',
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const sortBy = ref<'project' | 'version' | undefined>(args.sortBy)
+			const sortDirection = ref<'asc' | 'desc'>(args.sortDirection || 'asc')
+
+			const handleSort = (column: 'project' | 'version', direction: 'asc' | 'desc') => {
+				sortBy.value = column
+				sortDirection.value = direction
+				console.log('Sort:', column, direction)
+			}
+
+			return { args, sortBy, sortDirection, handleSort }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardTable
+					:items="args.items"
+					:sortable="args.sortable"
+					:sort-by="sortBy"
+					:sort-direction="sortDirection"
+					@sort="handleSort"
+				/>
+				<div class="text-sm text-secondary">
+					Sorted by: <strong>{{ sortBy || 'none' }}</strong> ({{ sortDirection }})
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const WithSelectionAndSorting: Story = {
+	args: {
+		items: sampleItems,
+		showSelection: true,
+		sortable: true,
+		sortBy: 'project',
+		sortDirection: 'asc',
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const selectedIds = ref<string[]>([])
+			const sortBy = ref<'project' | 'version' | undefined>(args.sortBy)
+			const sortDirection = ref<'asc' | 'desc'>(args.sortDirection || 'asc')
+
+			const handleSort = (column: 'project' | 'version', direction: 'asc' | 'desc') => {
+				sortBy.value = column
+				sortDirection.value = direction
+			}
+
+			return { args, selectedIds, sortBy, sortDirection, handleSort }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				:items="args.items"
+				:show-selection="args.showSelection"
+				:sortable="args.sortable"
+				:sort-by="sortBy"
+				:sort-direction="sortDirection"
+				v-model:selected-ids="selectedIds"
+				@sort="handleSort"
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			/>
+		`,
+	}),
+}
+
+// ============================================
+// Action Stories
+// ============================================
+
+export const WithActions: Story = {
+	args: {
+		items: sampleItems,
+		showSelection: true,
+		'onUpdate:enabled': fn(),
+		onDelete: fn(),
+		onUpdate: fn(),
+	},
+}
+
+export const InteractiveActions: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			const items = ref<ContentCardTableItem[]>([
+				{ ...sodiumItem, enabled: true },
+				{ ...modMenuItem, enabled: true },
+				{ ...fabricApiItem, enabled: false },
+			])
+			const selectedIds = ref<string[]>([])
+
+			const handleToggle = (id: string, value: boolean) => {
+				const item = items.value.find((i) => i.id === id)
+				if (item) item.enabled = value
+			}
+
+			const handleDelete = (id: string) => {
+				items.value = items.value.filter((i) => i.id !== id)
+				selectedIds.value = selectedIds.value.filter((i) => i !== id)
+			}
+
+			const handleUpdate = (id: string) => {
+				console.log('Update available clicked for:', id)
+			}
+
+			return { items, selectedIds, handleToggle, handleDelete, handleUpdate }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardTable
+					:items="items"
+					show-selection
+					v-model:selected-ids="selectedIds"
+					@update:enabled="handleToggle"
+					@delete="handleDelete"
+					@update="handleUpdate"
+				/>
+				<div class="flex gap-4 text-sm text-secondary">
+					<span>Items: <strong>{{ items.length }}</strong></span>
+					<span>Selected: <strong>{{ selectedIds.length }}</strong></span>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Slot Stories
+// ============================================
+
+export const WithCustomItemButtons: Story = {
+	render: () => ({
+		components: { ContentCardTable, ButtonStyled, EyeIcon, FolderOpenIcon, DownloadIcon },
+		setup() {
+			return { items: sampleItems }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				:items="items"
+				show-selection
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			>
+				<template #itemButtonsLeft="{ item }">
+					<ButtonStyled v-tooltip="'Download'" circular type="transparent" color="green" color-fill="text">
+						<button @click="console.log('Download', item.id)">
+							<DownloadIcon class="size-5" />
+						</button>
+					</ButtonStyled>
+				</template>
+				<template #itemButtonsRight="{ item }">
+					<ButtonStyled v-tooltip="'View on Modrinth'" circular type="transparent">
+						<button @click="console.log('View', item.id)">
+							<EyeIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-tooltip="'Open folder'" circular type="transparent">
+						<button @click="console.log('Open folder', item.id)">
+							<FolderOpenIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+				</template>
+			</ContentCardTable>
+		`,
+	}),
+}
+
+export const WithEmptyState: Story = {
+	args: {
+		items: [],
+	},
+}
+
+export const WithCustomEmptyState: Story = {
+	render: () => ({
+		components: { ContentCardTable, ButtonStyled },
+		template: /*html*/ `
+			<ContentCardTable :items="[]">
+				<template #empty>
+					<div class="flex flex-col items-center gap-4 py-8">
+						<span class="text-lg text-secondary">No mods installed</span>
+						<ButtonStyled color="green">
+							<button>Browse mods</button>
+						</ButtonStyled>
+					</div>
+				</template>
+			</ContentCardTable>
+		`,
+	}),
+}
+
+// ============================================
+// State Stories
+// ============================================
+
+export const PerItemDisabled: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			// Simulates items being modified (e.g., toggled, deleted)
+			const items: ContentCardTableItem[] = [
+				{ ...sodiumItem, enabled: true },
+				{ ...modMenuItem, enabled: true, disabled: true }, // Being modified
+				{ ...fabricApiItem, enabled: false, disabled: true }, // Being modified
+			]
+			return { items }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<p class="text-sm text-secondary">
+					Items with <code>disabled: true</code> have all interactions disabled (simulating items being modified).
+				</p>
+				<ContentCardTable
+					:items="items"
+					show-selection
+					@update:enabled="(id, val) => console.log('Toggle', id, val)"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const SingleItem: Story = {
+	args: {
+		items: [sodiumItem],
+		showSelection: true,
+	},
+}
+
+export const ManyItems: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			const items = ref<ContentCardTableItem[]>(
+				Array.from({ length: 2000 }, (_, i) => ({
+					...sodiumItem,
+					id: `item-${i}`,
+					project: {
+						...sodiumItem.project,
+						title: `Mod ${i + 1}`,
+					},
+					version: {
+						...sodiumItem.version!,
+						version_number: `1.0.${i}`,
+					},
+					enabled: i % 3 !== 0,
+				})),
+			)
+			const selectedIds = ref<string[]>([])
+			const virtualized = ref(true)
+			const tableRef = ref<InstanceType<typeof ContentCardTable> | null>(null)
+
+			// Perf monitoring
+			const domNodes = ref(0)
+			let animationId: number
+
+			const updatePerf = () => {
+				// Count ContentCardItem elements (they have h-20 class)
+				if (tableRef.value?.$el) {
+					const container = tableRef.value.$el as HTMLElement
+					domNodes.value = container.querySelectorAll('.h-20').length
+				}
+				animationId = requestAnimationFrame(updatePerf)
+			}
+
+			onMounted(() => {
+				animationId = requestAnimationFrame(updatePerf)
+			})
+
+			onUnmounted(() => {
+				cancelAnimationFrame(animationId)
+			})
+
+			return {
+				items,
+				selectedIds,
+				virtualized,
+				tableRef,
+				domNodes,
+			}
+		},
+		template: /*html*/ `
+			<div>
+				<!-- Toggle -->
+				<div class="sticky top-0 z-10 mb-4 flex items-center gap-3 rounded-lg bg-surface-2 p-3">
+					<label class="flex cursor-pointer items-center gap-2">
+						<input
+							type="checkbox"
+							v-model="virtualized"
+							class="h-4 w-4 rounded"
+						/>
+						<span class="font-medium text-contrast">Enable Virtualization</span>
+					</label>
+				</div>
+
+				<!-- Perf Panel -->
+				<div class="fixed bottom-4 right-4 z-50 rounded-lg bg-surface-1 p-4 shadow-lg border border-surface-3 font-mono text-sm">
+					<div class="mb-2 font-semibold text-contrast">Performance</div>
+					<div class="grid grid-cols-2 gap-x-4 gap-y-1">
+						<span class="text-secondary">Total Items:</span>
+						<span class="text-contrast">{{ items.length }}</span>
+						<span class="text-secondary">DOM Nodes:</span>
+						<span :class="domNodes > 100 ? 'text-red-500' : 'text-green-500'">{{ domNodes }}</span>
+						<span class="text-secondary">Mode:</span>
+						<span :class="virtualized ? 'text-green-500' : 'text-red-500'">{{ virtualized ? 'Virtual' : 'Full DOM' }}</span>
+					</div>
+				</div>
+
+				<ContentCardTable
+					ref="tableRef"
+					:items="items"
+					:virtualized="virtualized"
+					show-selection
+					v-model:selected-ids="selectedIds"
+					@update:enabled="(id, val) => console.log('Toggle', id, val)"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// With Overflow Menu
+// ============================================
+
+export const WithOverflowMenu: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			const items: ContentCardTableItem[] = [
+				{
+					...sodiumItem,
+					overflowOptions: [
+						{ id: 'view', action: () => console.log('View sodium') },
+						{ id: 'folder', action: () => console.log('Open folder') },
+						{ divider: true },
+						{ id: 'remove', action: () => console.log('Remove'), color: 'red' as const },
+					],
+				},
+				{
+					...modMenuItem,
+					overflowOptions: [
+						{ id: 'view', action: () => console.log('View modmenu') },
+						{ divider: true },
+						{ id: 'remove', action: () => console.log('Remove'), color: 'red' as const },
+					],
+				},
+			]
+
+			return { items }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				:items="items"
+				show-selection
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			>
+				<template #view>View on Modrinth</template>
+				<template #folder>Open folder</template>
+				<template #remove>Remove</template>
+			</ContentCardTable>
+		`,
+	}),
+}
+
+// ============================================
+// Bulk Actions Demo
+// ============================================
+
+export const BulkActionsDemo: Story = {
+	render: () => ({
+		components: { ContentCardTable, ButtonStyled },
+		setup() {
+			const items = ref<ContentCardTableItem[]>([
+				{ ...sodiumItem, enabled: true },
+				{ ...modMenuItem, enabled: true },
+				{ ...fabricApiItem, enabled: false },
+				{ ...emfItem, enabled: true },
+				{ ...etfItem, enabled: true },
+			])
+			const selectedIds = ref<string[]>([])
+
+			const enableSelected = () => {
+				items.value.forEach((item) => {
+					if (selectedIds.value.includes(item.id)) {
+						item.enabled = true
+					}
+				})
+			}
+
+			const disableSelected = () => {
+				items.value.forEach((item) => {
+					if (selectedIds.value.includes(item.id)) {
+						item.enabled = false
+					}
+				})
+			}
+
+			const deleteSelected = () => {
+				items.value = items.value.filter((item) => !selectedIds.value.includes(item.id))
+				selectedIds.value = []
+			}
+
+			const handleToggle = (id: string, value: boolean) => {
+				const item = items.value.find((i) => i.id === id)
+				if (item) item.enabled = value
+			}
+
+			return { items, selectedIds, enableSelected, disableSelected, deleteSelected, handleToggle }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<div class="flex items-center gap-2">
+					<span class="text-sm text-secondary">{{ selectedIds.length }} selected</span>
+					<template v-if="selectedIds.length > 0">
+						<ButtonStyled size="small" color="green">
+							<button @click="enableSelected">Enable</button>
+						</ButtonStyled>
+						<ButtonStyled size="small" type="transparent">
+							<button @click="disableSelected">Disable</button>
+						</ButtonStyled>
+						<ButtonStyled size="small" color="red">
+							<button @click="deleteSelected">Delete</button>
+						</ButtonStyled>
+					</template>
+				</div>
+				<ContentCardTable
+					:items="items"
+					show-selection
+					v-model:selected-ids="selectedIds"
+					@update:enabled="handleToggle"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/instances/ContentModpackCard.stories.ts b/packages/ui/src/stories/instances/ContentModpackCard.stories.ts
new file mode 100644
index 0000000000..6760e03892
--- /dev/null
+++ b/packages/ui/src/stories/instances/ContentModpackCard.stories.ts
@@ -0,0 +1,633 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { ref } from 'vue'
+
+import ContentCardItem from '../../components/instances/ContentCardItem.vue'
+import ContentModpackCard from '../../components/instances/ContentModpackCard.vue'
+import type {
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+	ContentOwner,
+} from '../../components/instances/types'
+import NewModal from '../../components/modal/NewModal.vue'
+
+// Real project data from Modrinth API
+const fabulouslyOptimizedProject: ContentModpackCardProject = {
+	id: '1KVo5zza',
+	slug: 'fabulously-optimized',
+	title: 'Fabulously Optimized',
+	icon_url:
+		'https://cdn.modrinth.com/data/1KVo5zza/9f1ded4949c2a9db5ca382d3bcc912c7245486b4_96.webp',
+	description:
+		'Beautiful graphics, speedy performance and familiar features in a simple package. 1.21.11 beta!',
+	downloads: 8708191,
+	followers: 3762,
+}
+
+const cobblemonProject: ContentModpackCardProject = {
+	id: '5FFgwNNP',
+	slug: 'cobblemon-fabric',
+	title: 'Cobblemon Official Modpack [Fabric]',
+	icon_url: 'https://cdn.modrinth.com/data/5FFgwNNP/e7f9ee2e9d361623847853fe2ddce42f519ee64f.png',
+	description: 'The official modpack of the Cobblemon mod, for Fabric!',
+	downloads: 4940845,
+	followers: 2051,
+}
+
+const simplyOptimizedProject: ContentModpackCardProject = {
+	id: 'BYfVnHa7',
+	slug: 'sop',
+	title: 'Simply Optimized',
+	icon_url: 'https://cdn.modrinth.com/data/BYfVnHa7/845e93223da7e8d1ed1a33364b5bdb4c316ac518.png',
+	description:
+		'The leading, well-researched optimization modpack with a focus on pure performance.',
+	downloads: 2903242,
+	followers: 1387,
+}
+
+// Version data from Modrinth API
+const fabulouslyOptimizedVersion: ContentModpackCardVersion = {
+	id: 'YEEXo8mO',
+	version_number: '1.12.1',
+	date_published: '2022-02-10T06:53:28.379507Z',
+}
+
+const cobblemonVersion: ContentModpackCardVersion = {
+	id: 'bpaivauC',
+	version_number: '1.5.2',
+	date_published: '2024-05-27T07:12:36.043005Z',
+}
+
+// Owner data from Modrinth API
+const userOwner: ContentOwner = {
+	id: '2avTeeAE',
+	name: 'robotkoer',
+	avatar_url: 'https://cdn.modrinth.com/user/2avTeeAE/icon.png',
+	type: 'user',
+}
+
+const cobblemonOwner: ContentOwner = {
+	id: 'AEFONbAM',
+	name: 'Reisen',
+	avatar_url:
+		'https://cdn.modrinth.com/user/AEFONbAM/9e97453507a8245981d5cd825280f23be44f15ac.jpeg',
+	type: 'user',
+}
+
+// Categories (using Labrinth.Tags.v2.Category structure with optional action)
+const optimizationCategories: ContentModpackCardCategory[] = [
+	{ name: 'Fabric', icon: 'fabric', project_type: 'modpack', header: 'loaders' },
+	{ name: 'Lightweight', icon: 'lightweight', project_type: 'modpack', header: 'categories' },
+	{ name: 'Multiplayer', icon: 'multiplayer', project_type: 'modpack', header: 'categories' },
+	{ name: 'Optimization', icon: 'optimization', project_type: 'modpack', header: 'categories' },
+]
+
+const cobblemonCategories: ContentModpackCardCategory[] = [
+	{ name: 'Adventure', icon: 'adventure', project_type: 'modpack', header: 'categories' },
+	{ name: 'Fabric', icon: 'fabric', project_type: 'modpack', header: 'loaders' },
+	{ name: 'Lightweight', icon: 'lightweight', project_type: 'modpack', header: 'categories' },
+	{ name: 'Multiplayer', icon: 'multiplayer', project_type: 'modpack', header: 'categories' },
+]
+
+const meta = {
+	title: 'Instances/ContentModpackCard',
+	component: ContentModpackCard,
+	parameters: {
+		layout: 'padded',
+	},
+	argTypes: {
+		project: {
+			control: 'object',
+			description:
+				'Project information (id, slug, title, icon_url, description, downloads, followers)',
+		},
+		version: {
+			control: 'object',
+			description: 'Version information (id, version_number, date_published)',
+		},
+		owner: {
+			control: 'object',
+			description: 'Owner/author information (user or organization)',
+		},
+		categories: {
+			control: 'object',
+			description: 'Category tags with optional click actions',
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Grays out the card when true',
+		},
+		overflowOptions: {
+			control: 'object',
+			description: 'Options for the overflow menu',
+		},
+	},
+} satisfies Meta<typeof ContentModpackCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// All Types Overview
+// ============================================
+
+export const AllTypes: Story = {
+	args: {
+		project: fabulouslyOptimizedProject,
+	},
+	render: () => ({
+		components: { ContentModpackCard },
+		setup() {
+			const cards = [
+				{
+					label: 'Full featured (all actions)',
+					project: fabulouslyOptimizedProject,
+					version: fabulouslyOptimizedVersion,
+					owner: userOwner,
+					categories: optimizationCategories,
+					hasUpdate: true,
+					hasContent: true,
+					hasUnlink: true,
+				},
+				{
+					label: 'With update available only',
+					project: cobblemonProject,
+					version: cobblemonVersion,
+					owner: cobblemonOwner,
+					categories: cobblemonCategories,
+					hasUpdate: true,
+				},
+				{
+					label: 'With content button only',
+					project: simplyOptimizedProject,
+					version: fabulouslyOptimizedVersion,
+					owner: userOwner,
+					hasContent: true,
+				},
+				{
+					label: 'Minimal (project only)',
+					project: fabulouslyOptimizedProject,
+				},
+				{
+					label: 'With version info only',
+					project: cobblemonProject,
+					version: cobblemonVersion,
+				},
+				{
+					label: 'With owner only',
+					project: simplyOptimizedProject,
+					owner: userOwner,
+				},
+				{
+					label: 'Disabled state',
+					project: fabulouslyOptimizedProject,
+					version: fabulouslyOptimizedVersion,
+					owner: userOwner,
+					categories: optimizationCategories,
+					disabled: true,
+				},
+			]
+
+			return { cards }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-6">
+				<template v-for="card in cards" :key="card.label">
+					<h3 class="text-sm font-medium text-secondary">{{ card.label }}</h3>
+					<ContentModpackCard
+						:project="card.project"
+						:version="card.version"
+						:owner="card.owner"
+						:categories="card.categories"
+						:disabled="card.disabled"
+						@update="card.hasUpdate ? () => {} : undefined"
+						@content="card.hasContent ? () => {} : undefined"
+						@unlink="card.hasUnlink ? () => {} : undefined"
+					/>
+				</template>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Basic Stories
+// ============================================
+
+export const Default: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onUpdate: fn(),
+		onContent: fn(),
+		onUnlink: fn(),
+	},
+}
+
+export const MinimalProjectOnly: Story = {
+	args: {
+		project: cobblemonProject,
+	},
+}
+
+export const WithVersion: Story = {
+	args: {
+		project: simplyOptimizedProject,
+		version: fabulouslyOptimizedVersion,
+	},
+}
+
+export const WithUserOwner: Story = {
+	args: {
+		project: simplyOptimizedProject,
+		version: fabulouslyOptimizedVersion,
+		owner: userOwner,
+		categories: [
+			{ name: 'Adventure', icon: 'adventure', project_type: 'modpack', header: 'categories' },
+		],
+	},
+}
+
+export const WithOrganizationOwner: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
+
+// ============================================
+// Action Button Stories
+// ============================================
+
+export const WithUpdateButton: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onUpdate: fn(),
+	},
+}
+
+export const WithContentButton: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onContent: fn(),
+	},
+}
+
+export const WithUnlinkButton: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		onUnlink: fn(),
+	},
+}
+
+export const WithAllActions: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onUpdate: fn(),
+		onContent: fn(),
+		onUnlink: fn(),
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'settings', action: () => console.log('Settings') },
+			{ divider: true },
+			{ id: 'remove', action: () => console.log('Remove'), color: 'red' },
+		],
+	},
+}
+
+// ============================================
+// State Stories
+// ============================================
+
+export const Disabled: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		disabled: true,
+	},
+}
+
+export const LongTitle: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			title: 'Super Long Modpack Title That Should Display Properly On All Screen Sizes',
+			description:
+				'This is an extremely long description that should wrap properly and not break the layout. It contains lots of information about what this modpack includes and what makes it special compared to other modpacks available on the platform.',
+		},
+		version: cobblemonVersion,
+		owner: {
+			...userOwner,
+			name: 'Really Long Organization Name Studios',
+		},
+		categories: [
+			{ name: 'Adventure', icon: 'adventure', project_type: 'modpack', header: 'categories' },
+			{ name: 'Technology', icon: 'technology', project_type: 'modpack', header: 'categories' },
+			{ name: 'Magic', icon: 'magic', project_type: 'modpack', header: 'categories' },
+			{ name: 'Exploration', icon: 'exploration', project_type: 'modpack', header: 'categories' },
+			{ name: 'Multiplayer', icon: 'multiplayer', project_type: 'modpack', header: 'categories' },
+		],
+		onUpdate: fn(),
+		onContent: fn(),
+	},
+}
+
+export const NoDescription: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			description: undefined,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
+
+export const NoStats: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			downloads: undefined,
+			followers: undefined,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+	},
+}
+
+// ============================================
+// Categories Stories
+// ============================================
+
+export const WithClickableCategories: Story = {
+	render: (args) => ({
+		components: { ContentModpackCard },
+		setup() {
+			const clickedCategory = ref<string | null>(null)
+			const categories: ContentModpackCardCategory[] = [
+				{
+					name: 'Adventure',
+					icon: 'adventure',
+					project_type: 'modpack',
+					header: 'categories',
+					action: () => (clickedCategory.value = 'Adventure'),
+				},
+				{
+					name: 'Lightweight',
+					icon: 'lightweight',
+					project_type: 'modpack',
+					header: 'categories',
+					action: () => (clickedCategory.value = 'Lightweight'),
+				},
+				{
+					name: 'Multiplayer',
+					icon: 'multiplayer',
+					project_type: 'modpack',
+					header: 'categories',
+					action: () => (clickedCategory.value = 'Multiplayer'),
+				},
+			]
+			return { args, categories, clickedCategory }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentModpackCard
+					:project="args.project"
+					:version="args.version"
+					:owner="args.owner"
+					:categories="categories"
+				/>
+				<div class="text-sm text-secondary">
+					Clicked category: <strong>{{ clickedCategory || 'None' }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+	},
+}
+
+// ============================================
+// Overflow Menu Stories
+// ============================================
+
+export const WithOverflowMenu: Story = {
+	render: (args) => ({
+		components: { ContentModpackCard },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentModpackCard v-bind="args">
+				<template #view>View on Modrinth</template>
+				<template #settings>Settings</template>
+				<template #remove>Remove modpack</template>
+			</ContentModpackCard>
+		`,
+	}),
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'settings', action: () => console.log('Settings') },
+			{ divider: true },
+			{ id: 'remove', action: () => console.log('Remove'), color: 'red' },
+		],
+	},
+}
+
+// ============================================
+// Interactive Stories
+// ============================================
+
+export const WithContentModal: Story = {
+	args: {
+		project: cobblemonProject,
+	},
+	render: () => ({
+		components: { ContentModpackCard, NewModal, ContentCardItem },
+		setup() {
+			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modpackContent = [
+				{
+					project: {
+						id: '1',
+						slug: 'sodium',
+						title: 'Sodium',
+						icon_url:
+							'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+					},
+					version: { id: 'v1', version_number: '0.8.2', file_name: 'sodium-fabric-0.8.2.jar' },
+				},
+				{
+					project: {
+						id: '2',
+						slug: 'modmenu',
+						title: 'Mod Menu',
+						icon_url:
+							'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+					},
+					version: { id: 'v2', version_number: '16.0.0', file_name: 'modmenu-16.0.0.jar' },
+				},
+				{
+					project: {
+						id: '3',
+						slug: 'fabric-api',
+						title: 'Fabric API',
+						icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+					},
+					version: { id: 'v3', version_number: '0.141.3', file_name: 'fabric-api-0.141.3.jar' },
+				},
+			]
+
+			return {
+				cobblemonProject,
+				cobblemonVersion,
+				userOwner,
+				optimizationCategories,
+				modalRef,
+				modpackContent,
+			}
+		},
+		template: /*html*/ `
+			<div>
+				<ContentModpackCard
+					:project="cobblemonProject"
+					:version="cobblemonVersion"
+					:owner="userOwner"
+					:categories="optimizationCategories"
+					@content="modalRef?.show()"
+					@update="() => alert('Update clicked')"
+				/>
+				<NewModal ref="modalRef" header="Modpack Content">
+					<div class="flex flex-col gap-4">
+						<ContentCardItem
+							v-for="item in modpackContent"
+							:key="item.project.id"
+							:project="item.project"
+							:version="item.version"
+						/>
+					</div>
+				</NewModal>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Responsive Stories
+// ============================================
+
+export const ResponsiveView: Story = {
+	args: {
+		project: cobblemonProject,
+	},
+	render: () => ({
+		components: { ContentModpackCard },
+		setup() {
+			return {
+				cobblemonProject,
+				cobblemonVersion,
+				userOwner,
+				optimizationCategories,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-8">
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Desktop (full width)</h3>
+					<div class="w-full">
+						<ContentModpackCard
+							:project="cobblemonProject"
+							:version="cobblemonVersion"
+							:owner="userOwner"
+							:categories="optimizationCategories"
+							@update="() => {}"
+							@content="() => {}"
+							@unlink="() => {}"
+						/>
+					</div>
+				</div>
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Mobile (&lt;640px)</h3>
+					<div class="w-[360px]">
+						<ContentModpackCard
+							:project="cobblemonProject"
+							:version="cobblemonVersion"
+							:owner="userOwner"
+							:categories="optimizationCategories"
+							@update="() => {}"
+							@content="() => {}"
+						/>
+					</div>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Edge Cases
+// ============================================
+
+export const NoIcon: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			icon_url: undefined,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
+
+export const NoOwnerAvatar: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: {
+			...userOwner,
+			avatar_url: undefined,
+		},
+		categories: optimizationCategories,
+	},
+}
+
+export const HighDownloadCounts: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			downloads: 1234567890,
+			followers: 9876543,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
diff --git a/packages/ui/src/stories/project/ProjectCombobox.stories.ts b/packages/ui/src/stories/project/ProjectCombobox.stories.ts
new file mode 100644
index 0000000000..1346507d32
--- /dev/null
+++ b/packages/ui/src/stories/project/ProjectCombobox.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ProjectCombobox from '../../components/project/ProjectCombobox.vue'
+
+const meta = {
+	title: 'Project/ProjectCombobox',
+	component: ProjectCombobox,
+} satisfies Meta<typeof ProjectCombobox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		placeholder: 'Select project',
+		searchPlaceholder: 'Search by name or paste ID...',
+		loadingMessage: 'Loading...',
+		noResultsMessage: 'No results found',
+		disabled: false,
+		limit: 20,
+	},
+}
diff --git a/packages/ui/src/utils/auto-icons.ts b/packages/ui/src/utils/auto-icons.ts
index cdcb76df9f..102b559de1 100644
--- a/packages/ui/src/utils/auto-icons.ts
+++ b/packages/ui/src/utils/auto-icons.ts
@@ -32,6 +32,13 @@ import {
 import type { ProjectStatus, ProjectType } from '@modrinth/utils'
 import type { Component } from 'vue'
 
+import {
+	FILE_ARCHIVE_EXTENSIONS,
+	FILE_CODE_EXTENSIONS,
+	FILE_IMAGE_EXTENSIONS,
+	FILE_TEXT_EXTENSIONS,
+} from './file-extensions'
+
 export const PROJECT_TYPE_ICONS: Record<ProjectType, Component> = {
 	mod: BoxIcon,
 	modpack: PackageOpenIcon,
@@ -88,53 +95,6 @@ const BLOCKCHAIN_CONFIG: Record<string, { icon: Component; color: string }> = {
 	polygon: { icon: PolygonIcon, color: 'text-purple' },
 }
 
-export const CODE_EXTENSIONS: readonly string[] = [
-	'json',
-	'json5',
-	'jsonc',
-	'java',
-	'kt',
-	'kts',
-	'sh',
-	'bat',
-	'ps1',
-	'yml',
-	'yaml',
-	'toml',
-	'js',
-	'ts',
-	'py',
-	'rb',
-	'php',
-	'html',
-	'css',
-	'cpp',
-	'c',
-	'h',
-	'rs',
-	'go',
-] as const
-
-export const TEXT_EXTENSIONS: readonly string[] = [
-	'txt',
-	'md',
-	'log',
-	'cfg',
-	'conf',
-	'properties',
-	'ini',
-	'sk',
-] as const
-export const IMAGE_EXTENSIONS: readonly string[] = [
-	'png',
-	'jpg',
-	'jpeg',
-	'gif',
-	'svg',
-	'webp',
-] as const
-const ARCHIVE_EXTENSIONS: string[] = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
-
 export function getProjectTypeIcon(projectType: ProjectType): Component {
 	return PROJECT_TYPE_ICONS[projectType] ?? BoxIcon
 }
@@ -162,16 +122,16 @@ export function getDirectoryIcon(name: string): Component {
 export function getFileExtensionIcon(extension: string): Component {
 	const ext: string = extension.toLowerCase()
 
-	if (CODE_EXTENSIONS.includes(ext)) {
+	if ((FILE_CODE_EXTENSIONS as readonly string[]).includes(ext)) {
 		return FileCodeIcon
 	}
-	if (TEXT_EXTENSIONS.includes(ext)) {
+	if ((FILE_TEXT_EXTENSIONS as readonly string[]).includes(ext)) {
 		return FileTextIcon
 	}
-	if (IMAGE_EXTENSIONS.includes(ext)) {
+	if ((FILE_IMAGE_EXTENSIONS as readonly string[]).includes(ext)) {
 		return FileImageIcon
 	}
-	if (ARCHIVE_EXTENSIONS.includes(ext)) {
+	if ((FILE_ARCHIVE_EXTENSIONS as readonly string[]).includes(ext)) {
 		return FileArchiveIcon
 	}
 
diff --git a/packages/ui/src/utils/file-extensions.ts b/packages/ui/src/utils/file-extensions.ts
index 38f11b974c..7908f52b06 100644
--- a/packages/ui/src/utils/file-extensions.ts
+++ b/packages/ui/src/utils/file-extensions.ts
@@ -1,5 +1,5 @@
 // File extension constants
-export const CODE_EXTENSIONS = [
+export const FILE_CODE_EXTENSIONS = [
 	'json',
 	'json5',
 	'jsonc',
@@ -26,7 +26,7 @@ export const CODE_EXTENSIONS = [
 	'go',
 ] as const
 
-export const TEXT_EXTENSIONS = [
+export const FILE_TEXT_EXTENSIONS = [
 	'txt',
 	'md',
 	'log',
@@ -37,15 +37,15 @@ export const TEXT_EXTENSIONS = [
 	'sk',
 ] as const
 
-export const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
+export const FILE_IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
 
-export const ARCHIVE_EXTENSIONS = ['zip'] as const
+export const FILE_ARCHIVE_EXTENSIONS = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
 
 // Type for extension strings
-export type CodeExtension = (typeof CODE_EXTENSIONS)[number]
-export type TextExtension = (typeof TEXT_EXTENSIONS)[number]
-export type ImageExtension = (typeof IMAGE_EXTENSIONS)[number]
-export type ArchiveExtension = (typeof ARCHIVE_EXTENSIONS)[number]
+export type CodeExtension = (typeof FILE_CODE_EXTENSIONS)[number]
+export type TextExtension = (typeof FILE_TEXT_EXTENSIONS)[number]
+export type ImageExtension = (typeof FILE_IMAGE_EXTENSIONS)[number]
+export type ArchiveExtension = (typeof FILE_ARCHIVE_EXTENSIONS)[number]
 
 /**
  * Extract file extension from filename (lowercase)
@@ -58,28 +58,28 @@ export function getFileExtension(filename: string): string {
  * Check if extension is a code file
  */
 export function isCodeFile(ext: string): boolean {
-	return (CODE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+	return (FILE_CODE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
 }
 
 /**
  * Check if extension is a text file
  */
 export function isTextFile(ext: string): boolean {
-	return (TEXT_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+	return (FILE_TEXT_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
 }
 
 /**
  * Check if extension is an image file
  */
 export function isImageFile(ext: string): boolean {
-	return (IMAGE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+	return (FILE_IMAGE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
 }
 
 /**
  * Check if extension is an archive file
  */
 export function isArchiveFile(ext: string): boolean {
-	return (ARCHIVE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+	return (FILE_ARCHIVE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
 }
 
 /**
diff --git a/packages/ui/src/utils/formatting.ts b/packages/ui/src/utils/formatting.ts
new file mode 100644
index 0000000000..45512ea6b0
--- /dev/null
+++ b/packages/ui/src/utils/formatting.ts
@@ -0,0 +1,212 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+export function capitalizeString(name: string) {
+	return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
+}
+
+export function formatCategory(name: string) {
+	if (name === 'modloader') return "Risugami's ModLoader"
+	if (name === 'bungeecord') return 'BungeeCord'
+	if (name === 'liteloader') return 'LiteLoader'
+	if (name === 'neoforge') return 'NeoForge'
+	if (name === 'game-mechanics') return 'Game Mechanics'
+	if (name === 'worldgen') return 'World Generation'
+	if (name === 'core-shaders') return 'Core Shaders'
+	if (name === 'gui') return 'GUI'
+	if (name === '8x-') return '8x or lower'
+	if (name === '512x+') return '512x or higher'
+	if (name === 'kitchen-sink') return 'Kitchen Sink'
+	if (name === 'path-tracing') return 'Path Tracing'
+	if (name === 'pbr') return 'PBR'
+	if (name === 'datapack') return 'Data Pack'
+	if (name === 'colored-lighting') return 'Colored Lighting'
+	if (name === 'optifine') return 'OptiFine'
+	if (name === 'bta-babric') return 'BTA (Babric)'
+	if (name === 'legacy-fabric') return 'Legacy Fabric'
+	if (name === 'java-agent') return 'Java Agent'
+	if (name === 'nilloader') return 'NilLoader'
+	if (name === 'mrpack') return 'Modpack'
+	if (name === 'minecraft') return 'Resource Pack'
+	if (name === 'vanilla') return 'Vanilla Shader'
+	if (name === 'geyser') return 'Geyser Extension'
+	return capitalizeString(name)
+}
+
+const mcVersionRegex = /^([0-9]+.[0-9]+)(.[0-9]+)?$/
+
+type VersionRange = {
+	major: string
+	minor: number[]
+}
+
+function groupVersions(versions: string[], consecutive = false) {
+	return versions
+		.slice()
+		.reverse()
+		.reduce((ranges: VersionRange[], version: string) => {
+			const matchesVersion = version.match(mcVersionRegex)
+
+			if (matchesVersion) {
+				const majorVersion = matchesVersion[1]
+				const minorVersion = matchesVersion[2]
+				const minorNumeric = minorVersion ? parseInt(minorVersion.replace('.', '')) : 0
+
+				const prevInRange = ranges.find(
+					(x) => x.major === majorVersion && (!consecutive || x.minor.at(-1) === minorNumeric - 1),
+				)
+				if (prevInRange) {
+					prevInRange.minor.push(minorNumeric)
+					return ranges
+				}
+
+				return [...ranges, { major: majorVersion, minor: [minorNumeric] }]
+			}
+
+			return ranges
+		}, [])
+		.reverse()
+}
+
+function groupConsecutiveIndices(
+	versions: string[],
+	referenceList: Labrinth.Tags.v2.GameVersion[],
+) {
+	if (!versions || versions.length === 0) {
+		return []
+	}
+
+	const referenceMap = new Map<string, number>()
+	referenceList.forEach((item, index) => {
+		referenceMap.set(item.version, index)
+	})
+
+	const sortedList: string[] = versions
+		.slice()
+		.sort((a, b) => (referenceMap.get(a) ?? 0) - (referenceMap.get(b) ?? 0))
+
+	const ranges: string[] = []
+	let start = sortedList[0]
+	let previous = sortedList[0]
+
+	for (let i = 1; i < sortedList.length; i++) {
+		const current = sortedList[i]
+		if ((referenceMap.get(current) ?? 0) !== (referenceMap.get(previous) ?? 0) + 1) {
+			ranges.push(validateRange(`${previous}–${start}`))
+			start = current
+		}
+		previous = current
+	}
+
+	ranges.push(validateRange(`${previous}–${start}`))
+
+	return ranges
+}
+
+function validateRange(range: string): string {
+	switch (range) {
+		case 'rd-132211–b1.8.1':
+			return 'All legacy versions'
+		case 'a1.0.4–b1.8.1':
+			return 'All alpha and beta versions'
+		case 'a1.0.4–a1.2.6':
+			return 'All alpha versions'
+		case 'b1.0–b1.8.1':
+			return 'All beta versions'
+		case 'rd-132211–inf20100618':
+			return 'All pre-alpha versions'
+	}
+	const splitRange = range.split('–')
+	if (splitRange && splitRange[0] === splitRange[1]) {
+		return splitRange[0]
+	}
+	return range
+}
+
+function formatMinecraftMinorVersion(major: string, minor: number): string {
+	return minor === 0 ? major : `${major}.${minor}`
+}
+
+export function formatVersionsForDisplay(
+	gameVersions: string[],
+	allGameVersions: Labrinth.Tags.v2.GameVersion[],
+) {
+	const inputVersions = gameVersions.slice()
+	const allVersions = allGameVersions.slice()
+
+	const allSnapshots = allVersions.filter((version) => version.version_type === 'snapshot')
+	const allReleases = allVersions.filter((version) => version.version_type === 'release')
+	const allLegacy = allVersions.filter(
+		(version) => version.version_type !== 'snapshot' && version.version_type !== 'release',
+	)
+
+	{
+		const indices: Record<string, number> = allVersions.reduce(
+			(map, gameVersion, index) => {
+				map[gameVersion.version] = index
+				return map
+			},
+			{} as Record<string, number>,
+		)
+		inputVersions.sort((a, b) => indices[a] - indices[b])
+	}
+
+	const releaseVersions = inputVersions.filter((projVer) =>
+		allReleases.some((gameVer) => gameVer.version === projVer),
+	)
+
+	const dateString = allReleases.find((version) => version.version === releaseVersions[0])?.date
+
+	const latestReleaseVersionDate = dateString ? Date.parse(dateString) : 0
+	const latestSnapshot = inputVersions.find((projVer) =>
+		allSnapshots.some(
+			(gameVer) =>
+				gameVer.version === projVer &&
+				(!latestReleaseVersionDate || latestReleaseVersionDate < Date.parse(gameVer.date)),
+		),
+	)
+
+	const allReleasesGrouped = groupVersions(
+		allReleases.map((release) => release.version),
+		false,
+	)
+	const projectVersionsGrouped = groupVersions(releaseVersions, true)
+
+	const releaseVersionsAsRanges = projectVersionsGrouped.map(({ major, minor }) => {
+		if (minor.length === 1) {
+			return formatMinecraftMinorVersion(major, minor[0])
+		}
+
+		const range = allReleasesGrouped.find((x) => x.major === major)
+
+		if (range?.minor.every((value, index) => value === minor[index])) {
+			return `${major}.x`
+		}
+
+		return `${formatMinecraftMinorVersion(major, minor[0])}–${formatMinecraftMinorVersion(major, minor[minor.length - 1])}`
+	})
+
+	const legacyVersionsAsRanges = groupConsecutiveIndices(
+		inputVersions.filter((projVer) => allLegacy.some((gameVer) => gameVer.version === projVer)),
+		allLegacy,
+	)
+
+	let output = [...legacyVersionsAsRanges]
+
+	// show all snapshots if there's no release versions
+	if (releaseVersionsAsRanges.length === 0) {
+		const snapshotVersionsAsRanges = groupConsecutiveIndices(
+			inputVersions.filter((projVer) =>
+				allSnapshots.some((gameVer) => gameVer.version === projVer),
+			),
+			allSnapshots,
+		)
+		output = [...snapshotVersionsAsRanges, ...output]
+	} else {
+		output = [...releaseVersionsAsRanges, ...output]
+	}
+
+	if (latestSnapshot && !output.includes(latestSnapshot)) {
+		output = [latestSnapshot, ...output]
+	}
+	return output
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 83b963a0d7..199fff78c6 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -2,6 +2,7 @@ export * from './auto-icons'
 export * from './common-messages'
 export * from './events'
 export * from './file-extensions'
+export * from './formatting'
 export * from './game-modes'
 export * from './notices'
 export * from './savable'
diff --git a/packages/utils/servers/types/api.ts b/packages/utils/servers/types/api.ts
index 8cc6271f10..d589d6034d 100644
--- a/packages/utils/servers/types/api.ts
+++ b/packages/utils/servers/types/api.ts
@@ -16,4 +16,4 @@ export interface ModuleError {
 	timestamp: number
 }
 
-export type ModuleName = 'general' | 'content' | 'network' | 'startup'
+export type ModuleName = 'general' | 'network' | 'startup'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3f7a90b61..1a816488e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -113,6 +113,9 @@ importers:
       floating-vue:
         specifier: ^5.2.2
         version: 5.2.2(@nuxt/kit@3.20.2(magicast@0.5.1))(vue@3.5.26(typescript@5.9.3))
+      fuse.js:
+        specifier: ^6.6.2
+        version: 6.6.2
       intl-messageformat:
         specifier: ^10.7.7
         version: 10.7.18
@@ -149,7 +152,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.8.8(@vue/compiler-core@3.5.26)(vue@3.5.26(typescript@5.9.3))
@@ -158,22 +161,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.51.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.51.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.26(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+        version: 6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.23(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.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2)
+        version: 2.7.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.7.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -191,7 +194,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^6.0.0
-        version: 6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+        version: 6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.1
@@ -265,7 +268,7 @@ importers:
         version: 0.11.3(magicast@0.5.1)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3)))
       '@sentry/nuxt':
         specifier: ^10.33.0
-        version: 10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.26(typescript@5.9.3)))(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))
+        version: 10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.26(typescript@5.9.3)))(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))
       '@tanstack/vue-query':
         specifier: ^5.90.7
         version: 5.92.5(vue@3.5.26(typescript@5.9.3))
@@ -392,7 +395,7 @@ importers:
         version: 10.5.0
       nuxt:
         specifier: ^3.20.2
-        version: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+        version: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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
@@ -10415,7 +10418,6 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@1.21.7)
       eslint-visitor-keys: 3.4.3
-    optional: true
 
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
@@ -10424,11 +10426,11 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
+  '@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@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
 
   '@eslint/config-array@0.21.1':
     dependencies:
@@ -11000,7 +11002,7 @@ snapshots:
     dependencies:
       '@nuxt/kit': 4.2.2(magicast@0.5.1)
       execa: 8.0.1
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
     transitivePeerDependencies:
       - magicast
 
@@ -11045,7 +11047,7 @@ snapshots:
       sirv: 3.0.2
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.15
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-plugin-inspect: 11.3.3(@nuxt/kit@4.2.2(magicast@0.5.1))(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
       vite-plugin-vue-tracer: 1.2.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       which: 5.0.0
@@ -11056,36 +11058,36 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.51.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)':
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.51.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@2.6.1))(typescript@5.9.3)
-      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.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)
-      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@2.6.1))
+      '@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.51.0(@typescript-eslint/parser@8.51.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.51.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.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.51.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@2.6.1))
+      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-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.51.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
@@ -11141,7 +11143,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/nitro-server@3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(typescript@5.9.3)(xml2js@0.6.2)':
+  '@nuxt/nitro-server@3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(typescript@5.9.3)(xml2js@0.6.2)':
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
@@ -11159,7 +11161,7 @@ snapshots:
       klona: 2.0.6
       mocked-exports: 0.1.1
       nitropack: 2.12.9(xml2js@0.6.2)
-      nuxt: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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
       radix3: 1.1.2
@@ -11230,7 +11232,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/vite-builder@3.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@1.21.7))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)':
+  '@nuxt/vite-builder@3.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)':
     dependencies:
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
       '@rollup/plugin-replace': 6.0.3(rollup@4.54.0)
@@ -11251,7 +11253,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.0
       mocked-exports: 0.1.1
-      nuxt: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.0.0
@@ -11262,9 +11264,9 @@ snapshots:
       std-env: 3.10.0
       ufo: 1.6.1
       unenv: 2.0.0-rc.24
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-node: 5.2.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
-      vite-plugin-checker: 0.12.0(eslint@9.39.2(jiti@1.21.7))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))
+      vite-plugin-checker: 0.12.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))
       vue: 3.5.26(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
     transitivePeerDependencies:
@@ -12148,7 +12150,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sentry/nuxt@10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.26(typescript@5.9.3)))(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))':
+  '@sentry/nuxt@10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.26(typescript@5.9.3)))(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
       '@sentry/browser': 10.33.0
@@ -12159,7 +12161,7 @@ snapshots:
       '@sentry/rollup-plugin': 4.6.1(rollup@4.54.0)
       '@sentry/vite-plugin': 4.6.1
       '@sentry/vue': 10.33.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
-      nuxt: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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'
@@ -12403,6 +12405,18 @@ snapshots:
 
   '@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.51.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.3
+    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.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -12414,6 +12428,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
       - typescript
+    optional: true
 
   '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
     dependencies:
@@ -12819,6 +12834,22 @@ snapshots:
     dependencies:
       '@types/node': 20.19.27
 
+  '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.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.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/type-utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.3.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.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
@@ -12835,6 +12866,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.51.0
@@ -12865,6 +12908,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/type-utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.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.3.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.51.0
@@ -12894,6 +12949,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -13008,7 +13074,7 @@ snapshots:
       '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
       '@rolldown/pluginutils': 1.0.0-beta.58
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.28.5)
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
@@ -13018,16 +13084,16 @@ snapshots:
       vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)
       vue: 3.5.26(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.53
-      vite: 6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
   '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.53
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
   '@vitest/browser-playwright@4.0.16(playwright@1.57.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1))(vitest@4.0.16)':
@@ -14632,10 +14698,10 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
+  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@2.6.1))
-      eslint: 9.39.2(jiti@2.6.1)
+      '@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-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
@@ -14653,12 +14719,12 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.51.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.51.0
       comment-parser: 1.4.1
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      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.1
@@ -14666,18 +14732,18 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
+  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@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       espree: 10.4.0
       esquery: 1.7.0
       parse-imports-exports: 0.2.4
@@ -14695,12 +14761,12 @@ 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@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@2.6.1))
+      '@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.1
-      eslint: 9.39.2(jiti@2.6.1)
+      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
@@ -14719,20 +14785,20 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2):
+  eslint-plugin-turbo@2.7.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.7.2):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       turbo: 2.7.2
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
+  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@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
       ci-info: 4.3.1
       clean-regexp: 1.0.0
       core-js-compat: 3.47.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       esquery: 1.7.0
       globals: 15.15.0
       indent-string: 4.0.0
@@ -14759,16 +14825,16 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
+  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@2.6.1))
-      eslint: 9.39.2(jiti@2.6.1)
+      '@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.3
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -14827,7 +14893,6 @@ snapshots:
       jiti: 1.21.7
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   eslint@9.39.2(jiti@2.6.1):
     dependencies:
@@ -16790,16 +16855,16 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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.2.2(magicast@0.5.1)
       '@nuxt/cli': 3.31.3(cac@6.7.14)(magicast@0.5.1)
       '@nuxt/devtools': 3.1.1(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
-      '@nuxt/nitro-server': 3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(typescript@5.9.3)(xml2js@0.6.2)
+      '@nuxt/nitro-server': 3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(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.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@1.21.7))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)
+      '@nuxt/vite-builder': 3.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(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)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)
       '@unhead/vue': 2.1.1(vue@3.5.26(typescript@5.9.3))
       '@vue/shared': 3.5.26
       c12: 3.3.3(magicast@0.5.1)
@@ -18959,12 +19024,12 @@ snapshots:
   vite-dev-rpc@1.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
     dependencies:
       birpc: 2.9.0
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-hot-client: 2.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
 
   vite-hot-client@2.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
     dependencies:
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
 
   vite-node@5.2.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
@@ -18986,7 +19051,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.12.0(eslint@9.39.2(jiti@1.21.7))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3)):
+  vite-plugin-checker@0.12.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3)):
     dependencies:
       '@babel/code-frame': 7.27.1
       chokidar: 4.0.3
@@ -18995,10 +19060,10 @@ snapshots:
       picomatch: 4.0.3
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.15
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vscode-uri: 3.1.0
     optionalDependencies:
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       optionator: 0.9.4
       typescript: 5.9.3
       vue-tsc: 2.2.12(typescript@5.9.3)
@@ -19013,7 +19078,7 @@ snapshots:
       perfect-debounce: 2.0.0
       sirv: 3.0.2
       unplugin-utils: 0.3.1
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-dev-rpc: 1.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
     optionalDependencies:
       '@nuxt/kit': 4.2.2(magicast@0.5.1)
@@ -19027,7 +19092,7 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
   vite-svg-loader@5.1.0(vue@3.5.26(typescript@5.9.3)):
@@ -19047,7 +19112,7 @@ snapshots:
       sass: 1.97.1
       terser: 5.44.1
 
-  vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+  vite@6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -19058,15 +19123,15 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.27
       fsevents: 2.3.3
-      jiti: 2.6.1
+      jiti: 1.21.7
       lightningcss: 1.30.2
       sass: 1.97.1
       terser: 5.44.1
       yaml: 2.8.2
 
-  vite@7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+  vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
-      esbuild: 0.27.2
+      esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
@@ -19075,7 +19140,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.27
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.6.1
       lightningcss: 1.30.2
       sass: 1.97.1
       terser: 5.44.1
@@ -19297,10 +19362,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1