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/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 777025dd24..a9a5f3c51d 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -12,13 +12,14 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@modrinth/ui'
 import {
 	Avatar,
 	Button,
 	ButtonStyled,
 	Checkbox,
+	defineMessages,
 	DropdownSelect,
+	injectModrinthClient,
 	injectNotificationManager,
 	NewProjectCard,
 	Pagination,
@@ -26,8 +27,10 @@ import {
 	SearchSidebarFilter,
 	type SortType,
 	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 +43,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 +78,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 +137,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 +195,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 +299,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) {
@@ -643,10 +699,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
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content.vue b/apps/frontend/src/pages/hosting/manage/[id]/content.vue
index 5a0bb5d922..2e12aed769 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/content.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/content.vue
@@ -1,21 +1,21 @@
-<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
-}>()
+import { useGeneratedState } from '~/composables/generated'
 
-const data = computed(() => props.server.general)
+const { server } = injectModrinthServerContext()
+const generatedState = useGeneratedState()
 
 useHead({
-	title: `Content - ${data.value?.name ?? 'Server'} - Modrinth`,
+	title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,
 })
+
+const tags = computed(() => ({
+	gameVersions: generatedState.value.gameVersions,
+	loaders: generatedState.value.loaders,
+}))
 </script>
+
+<template>
+	<ServersManageContentPage :tags="tags" />
+</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/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/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/ContentCard.vue b/packages/ui/src/components/instances/ContentCard.vue
new file mode 100644
index 0000000000..9a2823079a
--- /dev/null
+++ b/packages/ui/src/components/instances/ContentCard.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, MoreVerticalIcon, OrganizationIcon, TrashIcon } from '@modrinth/assets'
+import { computed, getCurrentInstance } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import Avatar from '../base/Avatar.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import OverflowMenu, { type Option as OverflowMenuOption } from '../base/OverflowMenu.vue'
+import Toggle from '../base/Toggle.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 ContentCardOwner {
+	id: string
+	name: string
+	avatar_url?: string
+	type: 'user' | 'organization'
+	link?: string | RouteLocationRaw
+}
+
+interface Props {
+	project: ContentCardProject
+	version?: ContentCardVersion
+	owner?: ContentCardOwner
+	enabled?: boolean
+	overflowOptions?: OverflowMenuOption[]
+	disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+	version: undefined,
+	owner: undefined,
+	enabled: undefined,
+	overflowOptions: undefined,
+	disabled: false,
+})
+
+const emit = defineEmits<{
+	'update:enabled': [value: boolean]
+	delete: []
+	update: []
+}>()
+
+const instance = getCurrentInstance()
+const hasDeleteListener = computed(() => !!instance?.vnode.props?.onDelete)
+const hasUpdateListener = computed(() => !!instance?.vnode.props?.onUpdate)
+</script>
+
+<template>
+	<div
+		class="grid grid-cols-[1fr_auto] items-center gap-4 rounded-[20px] bg-bg-raised p-4 shadow-md md:grid-cols-3"
+		:class="{ 'opacity-50': disabled }"
+	>
+		<div class="flex min-w-0 items-center gap-4">
+			<Avatar :src="project.icon_url" :alt="project.title" size="4rem" no-shadow raised />
+			<div class="flex min-w-0 flex-col gap-1.5">
+				<span class="truncate font-semibold text-contrast">
+					{{ project.title }}
+				</span>
+
+				<div v-if="owner" class="flex items-center gap-1">
+					<Avatar
+						:src="owner.avatar_url"
+						:alt="owner.name"
+						size="1.5rem"
+						:circle="owner.type === 'user'"
+						no-shadow
+					/>
+					<OrganizationIcon v-if="owner.type === 'organization'" class="size-4 text-secondary" />
+					<span class="text-sm text-secondary">{{ owner.name }}</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="hidden flex-col gap-1.5 md:flex">
+			<template v-if="version">
+				<span class="font-medium text-contrast">{{ version.version_number }}</span>
+				<span class="text-secondary">{{ version.file_name }}</span>
+			</template>
+		</div>
+
+		<div class="flex items-center justify-self-end gap-2">
+			<slot name="additionalButtonsLeft" />
+
+			<ButtonStyled
+				v-if="hasUpdateListener"
+				circular
+				type="transparent"
+				color="green"
+				color-fill="text"
+				hover-color-fill="background"
+			>
+				<button v-tooltip="'Update available'" @click="emit('update')">
+					<DownloadIcon class="size-5" />
+				</button>
+			</ButtonStyled>
+
+			<Toggle
+				v-if="enabled !== undefined"
+				:model-value="enabled"
+				@update:model-value="(val) => emit('update:enabled', val)"
+			/>
+
+			<ButtonStyled v-if="hasDeleteListener" circular type="transparent">
+				<button v-tooltip="'Delete'" @click="emit('delete')">
+					<TrashIcon class="size-5 text-secondary" />
+				</button>
+			</ButtonStyled>
+
+			<slot name="additionalButtonsRight" />
+
+			<ButtonStyled circular type="transparent">
+				<OverflowMenu v-if="overflowOptions?.length" :options="overflowOptions">
+					<MoreVerticalIcon class="size-5" />
+				</OverflowMenu>
+			</ButtonStyled>
+		</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..7d9dd736a3
--- /dev/null
+++ b/packages/ui/src/components/instances/index.ts
@@ -0,0 +1,2 @@
+export type { ContentCardOwner, ContentCardProject, ContentCardVersion } from './ContentCard.vue'
+export { default as ContentCard } from './ContentCard.vue'
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/pages/hosting/manage/content.vue b/packages/ui/src/pages/hosting/manage/content.vue
new file mode 100644
index 0000000000..7905404cf0
--- /dev/null
+++ b/packages/ui/src/pages/hosting/manage/content.vue
@@ -0,0 +1,830 @@
+<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')
+
+// 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..e6ce8a51d9 100644
--- a/packages/ui/src/pages/index.ts
+++ b/packages/ui/src/pages/index.ts
@@ -1,3 +1,4 @@
 export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'
+export { default as ServersManageContentPage } from './hosting/manage/content.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/instances/ContentCard.stories.ts b/packages/ui/src/stories/instances/ContentCard.stories.ts
new file mode 100644
index 0000000000..7edf6bd744
--- /dev/null
+++ b/packages/ui/src/stories/instances/ContentCard.stories.ts
@@ -0,0 +1,675 @@
+import { EditIcon, EyeIcon, FolderOpenIcon, LinkIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import type {
+	ContentCardOwner,
+	ContentCardProject,
+	ContentCardVersion,
+} from '../../components/instances/ContentCard.vue'
+import ContentCard from '../../components/instances/ContentCard.vue'
+
+// 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: ContentCardOwner = {
+	id: 'DzLrfrbK',
+	name: 'IMS',
+	avatar_url: 'https://avatars3.githubusercontent.com/u/31803019?v=4',
+	type: 'user',
+}
+
+const fabricApiOwner: ContentCardOwner = {
+	id: 'BZoBsPo6',
+	name: 'FabricMC',
+	avatar_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+	type: 'organization',
+}
+
+const meta = {
+	title: 'Instances/ContentCard',
+	component: ContentCard,
+	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',
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Grays out the card when true',
+		},
+		overflowOptions: {
+			control: 'object',
+			description: 'Options for the overflow menu',
+		},
+	},
+} satisfies Meta<typeof ContentCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// All Types Overview
+// ============================================
+
+export const AllTypes: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCard },
+		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>
+					<ContentCard
+						: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>
+					</ContentCard>
+				</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: { ContentCard, EditIcon, EyeIcon, FolderOpenIcon, LinkIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentCard 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>
+			</ContentCard>
+		`,
+	}),
+	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: { ContentCard, ButtonStyled, EyeIcon, FolderOpenIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentCard 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>
+			</ContentCard>
+		`,
+	}),
+	args: {
+		project: modMenuProject,
+		version: modMenuVersion,
+		enabled: true,
+		onDelete: fn(),
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Interactive Stories
+// ============================================
+
+export const InteractiveToggle: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCard },
+		setup() {
+			const enabled = ref(true)
+			return {
+				enabled,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCard
+					: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: { ContentCard },
+		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">
+				<ContentCard
+					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>
+				</ContentCard>
+			</div>
+		`,
+	}),
+}
+
+export const MixedStates: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCard },
+		setup() {
+			return {
+				sodiumProject,
+				sodiumVersion,
+				sodiumOwner,
+				modMenuProject,
+				modMenuVersion,
+				fabricApiProject,
+				fabricApiVersion,
+				fabricApiOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-3">
+				<!-- Enabled with update available -->
+				<ContentCard
+					:project="sodiumProject"
+					:version="sodiumVersion"
+					:owner="sodiumOwner"
+					:enabled="true"
+					@update="() => console.log('Update sodium')"
+					@update:enabled="() => {}"
+					@delete="() => {}"
+				/>
+
+				<!-- Disabled mod -->
+				<ContentCard
+					:project="modMenuProject"
+					:version="modMenuVersion"
+					:enabled="false"
+					:disabled="true"
+					@update:enabled="() => {}"
+				/>
+
+				<!-- No toggle, just view -->
+				<ContentCard
+					:project="fabricApiProject"
+					:version="fabricApiVersion"
+					:owner="fabricApiOwner"
+				/>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Responsive Stories
+// ============================================
+
+export const ResponsiveView: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCard },
+		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">
+						<ContentCard
+							: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]">
+						<ContentCard
+							: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(),
+	},
+}
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'