diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index 357e33a3c1..21a5ccbf3d 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -223,10 +223,7 @@
 	:where(input) {
 		box-sizing: border-box;
 		max-height: 40px;
-
-		&:not(.stylized-toggle) {
-			max-width: 100%;
-		}
+		max-width: 100%;
 	}
 
 	:where(.adjacent-input, &.adjacent-input) {
@@ -271,10 +268,6 @@
 			&:not(&.small) {
 				flex-direction: column;
 				align-items: flex-start;
-
-				.stylized-toggle {
-					flex-basis: 0;
-				}
 			}
 		}
 	}
@@ -650,64 +643,6 @@ tr.button-transparent {
 	}
 }
 
-.switch {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	-webkit-tap-highlight-color: transparent;
-	cursor: pointer;
-
-	&:focus {
-		//outline: 0; Bad for accessibility
-	}
-}
-
-.stylized-toggle {
-	@extend .button-base;
-
-	box-sizing: content-box;
-	min-height: 32px;
-	height: 32px;
-	width: 52px;
-	max-width: 52px;
-	border-radius: var(--size-rounded-max);
-	display: inline-block;
-	position: relative;
-	margin: 0;
-	transition: all 0.2s ease;
-	background: var(--color-button-bg);
-
-	&:after {
-		content: '';
-		position: absolute;
-		top: 7px;
-		left: 7px;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: var(--color-toggle-handle);
-		transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
-		outline: 2px solid transparent;
-
-		@media (prefers-reduced-motion) {
-			transition: none;
-		}
-	}
-
-	&:checked {
-		background-color: var(--color-brand);
-
-		&:after {
-			transform: translatex(20px);
-			background: var(--color-brand-inverted);
-		}
-	}
-
-	&:hover &:focus {
-		background: var(--color-button-bg);
-	}
-}
-
 .textarea-wrapper {
 	display: flex;
 	flex-direction: column;
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index 51c554d8d7..a01337a9a4 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -60,8 +60,6 @@ html {
 	--color-button-bg-active: #c3c6cb;
 	--color-button-text-active: var(--color-button-text-hover);
 
-	--color-toggle-handle: var(--color-icon);
-
 	--color-dropdown-bg: var(--color-button-bg);
 	--color-dropdown-text: var(--color-button-text);
 
@@ -177,8 +175,6 @@ html {
 	--color-button-bg-active: #616570;
 	--color-button-text-active: var(--color-button-text-hover);
 
-	--color-toggle-handle: var(--color-button-text);
-
 	--color-dropdown-bg: var(--color-button-bg);
 	--color-dropdown-text: var(--color-button-text);
 
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
index 0b31fce762..2c9072a731 100644
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
@@ -32,12 +32,7 @@
 						<label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
 							Erase all data
 						</label>
-						<input
-							id="modpack-hard-reset"
-							v-model="hardReset"
-							class="switch stylized-toggle shrink-0"
-							type="checkbox"
-						/>
+						<Toggle id="modpack-hard-reset" v-model="hardReset" class="shrink-0" />
 					</div>
 					<div>
 						If enabled, existing mods, worlds, and configurations, will be deleted before installing
@@ -69,7 +64,7 @@
 
 <script setup lang="ts">
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager, NewModal } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, NewModal, Toggle } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
@@ -158,9 +153,3 @@ const hide = () => modal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
index 436b938f80..d3d76f60f6 100644
--- a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
@@ -53,12 +53,7 @@
 								<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
 									Erase all data
 								</label>
-								<input
-									id="hard-reset"
-									v-model="hardReset"
-									class="switch stylized-toggle shrink-0"
-									type="checkbox"
-								/>
+								<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
 							</div>
 							<div>
 								Removes all data on your server, including your worlds, mods, and configuration
@@ -128,6 +123,7 @@ import {
 	ButtonStyled,
 	injectNotificationManager,
 	NewModal,
+	Toggle,
 } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 import { onMounted, onUnmounted } from 'vue'
@@ -255,9 +251,3 @@ const hide = () => mrpackModal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
index 71b5609f89..c465180bb2 100644
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -143,12 +143,7 @@
 						<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
 							Erase all data
 						</label>
-						<input
-							id="hard-reset"
-							v-model="hardReset"
-							class="switch stylized-toggle shrink-0"
-							type="checkbox"
-						/>
+						<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
 					</div>
 					<div>
 						Removes all data on your server, including your worlds, mods, and configuration files,
@@ -542,9 +537,3 @@ const hide = () => versionSelectModal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/ServerInstallation.vue b/apps/frontend/src/components/ui/servers/ServerInstallation.vue
index 56ac895f4d..88a7db3ffe 100644
--- a/apps/frontend/src/components/ui/servers/ServerInstallation.vue
+++ b/apps/frontend/src/components/ui/servers/ServerInstallation.vue
@@ -274,10 +274,6 @@ watch(
 </script>
 
 <style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-
 .button-base:active {
 	scale: none !important;
 }
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/members.vue b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
index 6892f3838f..0d8cce9895 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
@@ -353,11 +353,9 @@
 							monetization weights to this user on the project.
 						</span>
 					</label>
-					<input
+					<Toggle
 						:id="`member-${allOrgMembers[index].user.username}-override-perms`"
 						v-model="allOrgMembers[index].override"
-						class="switch stylized-toggle"
-						type="checkbox"
 						:disabled="(props.currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
 					/>
 				</div>
@@ -536,6 +534,7 @@ import {
 	Checkbox,
 	ConfirmModal,
 	injectNotificationManager,
+	Toggle,
 } from '@modrinth/ui'
 import { Multiselect } from 'vue-multiselect'
 
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 777025dd24..d6bcbab16a 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -25,6 +25,7 @@ import {
 	SearchFilterControl,
 	SearchSidebarFilter,
 	type SortType,
+	Toggle,
 	useSearch,
 } from '@modrinth/ui'
 import { capitalizeString, cycleValue, type Mod as InstallableMod } from '@modrinth/utils'
@@ -460,13 +461,7 @@ useSeoMeta({
 				</div>
 				<div class="flex flex-row items-center justify-between gap-2 px-6">
 					<label for="erase-data-on-install"> Erase all data on install </label>
-					<input
-						id="erase-data-on-install"
-						v-model="eraseDataOnInstall"
-						label="Erase all data on install"
-						class="switch stylized-toggle flex-none"
-						type="checkbox"
-					/>
+					<Toggle id="erase-data-on-install" v-model="eraseDataOnInstall" class="flex-none" />
 				</div>
 				<div class="px-6 py-4 text-sm">
 					If enabled, existing mods, worlds, and configurations, will be deleted before installing
@@ -909,8 +904,4 @@ useSeoMeta({
 	mask-image: linear-gradient(to bottom, black, transparent);
 	opacity: 0.25;
 }
-
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
 </style>
diff --git a/apps/frontend/src/pages/flags.vue b/apps/frontend/src/pages/flags.vue
index 8c7376c253..18536bc08a 100644
--- a/apps/frontend/src/pages/flags.vue
+++ b/apps/frontend/src/pages/flags.vue
@@ -1,67 +1,76 @@
 <script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import { Toggle } from '@modrinth/ui'
+import Fuse from 'fuse.js'
+import { computed, ref, shallowReactive } from 'vue'
+
 import {
 	DEFAULT_FEATURE_FLAGS,
 	type FeatureFlag,
 	saveFeatureFlags,
+	useFeatureFlags,
 } from '~/composables/featureFlags.ts'
 
 const flags = shallowReactive(useFeatureFlags().value)
+const searchQuery = ref('')
+
+const allFlags = computed(() => Object.keys(flags) as FeatureFlag[])
+
+const fuse = computed(
+	() =>
+		new Fuse(allFlags.value, {
+			threshold: 0.4,
+		}),
+)
+
+const filteredFlags = computed(() => {
+	if (!searchQuery.value.trim()) {
+		return allFlags.value
+	}
+	return fuse.value.search(searchQuery.value).map((result) => result.item)
+})
 </script>
 
 <template>
-	<div class="page">
-		<h1>Feature flags</h1>
-		<div class="flags">
+	<div class="mx-auto my-4 box-border w-[calc(100%-2rem)] max-w-[800px]">
+		<h1 class="mb-4 text-2xl font-bold text-contrast">Feature flags</h1>
+		<div class="relative mb-2">
+			<SearchIcon
+				class="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-secondary"
+			/>
+			<input
+				v-model="searchQuery"
+				type="search"
+				placeholder="Search flags..."
+				class="w-full rounded-xl bg-bg-raised py-2 pl-10 pr-4"
+			/>
+		</div>
+		<div class="flex flex-col gap-2">
 			<div
-				v-for="flag in Object.keys(flags) as FeatureFlag[]"
+				v-for="flag in filteredFlags"
 				:key="`flag-${flag}`"
-				class="adjacent-input small card"
+				class="flex flex-row flex-wrap items-center gap-2 rounded-2xl bg-bg-raised p-4"
 			>
-				<label :for="`toggle-${flag}`">
-					<span class="label__title">
+				<label :for="`toggle-${flag}`" class="flex-1">
+					<span class="block font-semibold capitalize">
 						{{ flag.replaceAll('_', ' ') }}
 					</span>
-					<span class="label__description">
-						<p>
-							Default:
-							<span
-								:style="`color:var(--color-${
-									DEFAULT_FEATURE_FLAGS[flag] === false ? 'red' : 'green'
-								})`"
-								>{{ DEFAULT_FEATURE_FLAGS[flag] }}</span
-							>
-						</p>
-					</span>
+					<p class="m-0 text-secondary">
+						Default:
+						<span :class="DEFAULT_FEATURE_FLAGS[flag] === false ? 'text-red' : 'text-green'">
+							{{ DEFAULT_FEATURE_FLAGS[flag] }}
+						</span>
+					</p>
 				</label>
-				<input
+				<Toggle
 					:id="`toggle-${flag}`"
 					v-model="flags[flag]"
-					class="switch stylized-toggle"
-					type="checkbox"
-					@change="() => saveFeatureFlags()"
+					@update:model-value="() => saveFeatureFlags()"
 				/>
 			</div>
+			<p v-if="filteredFlags.length === 0" class="text-center text-secondary">
+				No flags found matching "{{ searchQuery }}"
+			</p>
 		</div>
 	</div>
 </template>
-
-<style lang="scss" scoped>
-.page {
-	width: calc(100% - 2 * var(--spacing-card-md));
-	max-width: 800px;
-	margin-inline: auto;
-	box-sizing: border-box;
-	margin-block: var(--spacing-card-md);
-}
-
-.flags {
-}
-
-.label__title {
-	text-transform: capitalize;
-}
-
-.label__description p {
-	margin: 0;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
index f4bdc02862..c773d69686 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
@@ -242,13 +242,11 @@
 												>
 											</div>
 
-											<input
+											<Toggle
 												:id="`toggle-${getStableModKey(mod)}`"
-												:checked="!mod.disabled"
+												:model-value="!mod.disabled"
 												:disabled="mod.changing"
-												class="switch stylized-toggle"
-												type="checkbox"
-												@change="toggleMod(mod)"
+												@update:model-value="toggleMod(mod)"
 											/>
 										</div>
 									</div>
@@ -353,7 +351,13 @@ import {
 	TrashIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
+import {
+	Avatar,
+	ButtonStyled,
+	injectModrinthClient,
+	injectNotificationManager,
+	Toggle,
+} from '@modrinth/ui'
 import type { Mod } from '@modrinth/utils'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
@@ -699,8 +703,4 @@ const filteredMods = computed(() => {
 	height: 1px;
 	visibility: hidden;
 }
-
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
 </style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
index bb81742597..4102a6b5c7 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
@@ -21,11 +21,10 @@
 						</div>
 						<span>{{ prefConfig.description }}</span>
 					</label>
-					<input
+					<Toggle
 						:id="`pref-${key}`"
 						v-model="newUserPreferences[key]"
-						class="switch stylized-toggle flex-none"
-						type="checkbox"
+						class="flex-none"
 						:disabled="prefConfig.implemented === false"
 					/>
 				</div>
@@ -42,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { injectNotificationManager } from '@modrinth/ui'
+import { injectNotificationManager, Toggle } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
@@ -117,9 +116,3 @@ const resetPreferences = () => {
 	newUserPreferences.value = { ...userPreferences.value }
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
index 73f552282a..16c57e7ace 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
@@ -62,11 +62,9 @@
 							/>
 						</div>
 						<div v-else-if="typeof property === 'boolean'" class="flex justify-end">
-							<input
+							<Toggle
 								:id="`server-property-${index}`"
 								v-model="liveProperties[index]"
-								class="switch stylized-toggle"
-								type="checkbox"
 								:aria-labelledby="`property-label-${index}`"
 							/>
 						</div>
@@ -134,7 +132,7 @@
 
 <script setup lang="ts">
 import { EyeIcon, SearchIcon } from '@modrinth/assets'
-import { Combobox, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
+import { Combobox, injectModrinthClient, injectNotificationManager, Toggle } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, inject, ref, watch } from 'vue'
 
@@ -331,9 +329,3 @@ const isComplexProperty = (property: any): boolean => {
 	)
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
index c9699c2f28..50ff0fb78b 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
@@ -69,12 +69,7 @@
 							</span>
 						</div>
 						<div class="flex items-center gap-2">
-							<input
-								id="show-all-versions"
-								v-model="showAllVersions"
-								class="switch stylized-toggle flex-none"
-								type="checkbox"
-							/>
+							<Toggle id="show-all-versions" v-model="showAllVersions" class="flex-none" />
 							<label for="show-all-versions" class="text-sm">Show all Java versions</label>
 						</div>
 						<Combobox
@@ -113,7 +108,7 @@
 
 <script setup lang="ts">
 import { IssuesIcon, UpdatedIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, Toggle } from '@modrinth/ui'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
@@ -232,9 +227,3 @@ function resetToDefault() {
 	invocation.value = originalInvocation.value ?? ''
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index ad93ccbec6..a737dbc3bc 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -119,85 +119,78 @@
 		<section class="universal-card">
 			<h2 class="text-2xl">{{ formatMessage(toggleFeatures.title) }}</h2>
 			<p class="mb-4">{{ formatMessage(toggleFeatures.description) }}</p>
-			<div class="adjacent-input small">
-				<label for="advanced-rendering">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.advancedRenderingTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.advancedRenderingDescription) }}
-					</span>
-				</label>
-				<input
-					id="advanced-rendering"
-					v-model="cosmetics.advancedRendering"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div class="adjacent-input small">
-				<label for="external-links-new-tab">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.externalLinksNewTabTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.externalLinksNewTabDescription) }}
-					</span>
-				</label>
-				<input
-					id="external-links-new-tab"
-					v-model="cosmetics.externalLinksNewTab"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div v-if="false" class="adjacent-input small">
-				<label for="modrinth-app-promos">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.hideModrinthAppPromosDescription) }}
-					</span>
-				</label>
-				<input
-					id="modrinth-app-promos"
-					v-model="cosmetics.hideModrinthAppPromos"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div class="adjacent-input small">
-				<label for="search-layout-toggle">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarDescription) }}
-					</span>
-				</label>
-				<input
-					id="search-layout-toggle"
-					v-model="cosmetics.rightSearchLayout"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
-			</div>
-			<div class="adjacent-input small">
-				<label for="project-layout-toggle">
-					<span class="label__title">
-						{{ formatMessage(toggleFeatures.leftAlignedContentSidebarTitle) }}
-					</span>
-					<span class="label__description">
-						{{ formatMessage(toggleFeatures.leftAlignedContentSidebarDescription) }}
-					</span>
-				</label>
-				<input
-					id="project-layout-toggle"
-					v-model="cosmetics.leftContentLayout"
-					class="switch stylized-toggle"
-					type="checkbox"
-				/>
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="advanced-rendering" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.advancedRenderingTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.advancedRenderingDescription) }}
+						</span>
+					</label>
+					<Toggle id="advanced-rendering" v-model="cosmetics.advancedRendering" class="shrink-0" />
+				</div>
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="external-links-new-tab" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.externalLinksNewTabTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.externalLinksNewTabDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="external-links-new-tab"
+						v-model="cosmetics.externalLinksNewTab"
+						class="shrink-0"
+					/>
+				</div>
+				<div v-if="false" class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="modrinth-app-promos" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.hideModrinthAppPromosDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="modrinth-app-promos"
+						v-model="cosmetics.hideModrinthAppPromos"
+						class="shrink-0"
+					/>
+				</div>
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="search-layout-toggle" class="flex-1">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="search-layout-toggle"
+						v-model="cosmetics.rightSearchLayout"
+						class="shrink-0"
+					/>
+				</div>
+				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
+					<label for="project-layout-toggle" class="">
+						<span class="block font-semibold text-contrast">
+							{{ formatMessage(toggleFeatures.leftAlignedContentSidebarTitle) }}
+						</span>
+						<span class="text-secondary">
+							{{ formatMessage(toggleFeatures.leftAlignedContentSidebarDescription) }}
+						</span>
+					</label>
+					<Toggle
+						id="project-layout-toggle"
+						v-model="cosmetics.leftContentLayout"
+						class="shrink-0"
+					/>
+				</div>
 			</div>
 		</section>
 	</div>
@@ -212,6 +205,7 @@ import {
 	IntlFormatted,
 	normalizeChildren,
 	ThemeSelector,
+	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index d4d6a72c0a..a0d62bf970 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -70,10 +70,7 @@
 	:where(input) {
 		box-sizing: border-box;
 		max-height: 40px;
-
-		&:not(.stylized-toggle) {
-			max-width: 100%;
-		}
+		max-width: 100%;
 	}
 
 	:where(.adjacent-input, &.adjacent-input) {
@@ -118,10 +115,6 @@
 			&:not(&.small) {
 				flex-direction: column;
 				align-items: start;
-
-				.stylized-toggle {
-					flex-basis: 0;
-				}
 			}
 		}
 	}
@@ -766,60 +759,6 @@ a,
 	}
 }
 
-.switch {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	-webkit-tap-highlight-color: transparent;
-	cursor: pointer;
-}
-
-.stylized-toggle {
-	@extend .button-base;
-
-	box-sizing: content-box;
-	min-height: 32px;
-	height: 32px;
-	min-width: 52px;
-	max-width: 52px;
-	border-radius: var(--radius-max);
-	display: inline-block;
-	position: relative;
-	margin: 0;
-	transition: all 0.2s ease;
-	background: var(--color-button-bg);
-
-	&:after {
-		content: '';
-		position: absolute;
-		top: 7px;
-		left: 7px;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: var(--color-gray);
-		transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
-		outline: 2px solid transparent;
-
-		@media (prefers-reduced-motion) {
-			transition: none;
-		}
-	}
-
-	&:checked {
-		background-color: var(--color-brand);
-
-		&:after {
-			transform: translatex(20px);
-			background: var(--color-accent-contrast);
-		}
-	}
-
-	&:hover &:focus {
-		background: var(--color-button-bg);
-	}
-}
-
 // TOOLTIPS
 
 .v-popper--theme-dropdown,
diff --git a/packages/tooling-config/tailwind/tailwind-preset.ts b/packages/tooling-config/tailwind/tailwind-preset.ts
index 3c6ca2a69e..e566b3f8ac 100644
--- a/packages/tooling-config/tailwind/tailwind-preset.ts
+++ b/packages/tooling-config/tailwind/tailwind-preset.ts
@@ -224,7 +224,7 @@ const config: Config = {
 				hr: 'var(--color-hr)',
 				table: {
 					border: 'var(--color-table-border)',
-					alternateRow: ' var(--color-table-alternate-row)',
+					alternateRow: 'var(--color-table-alternate-row)',
 				},
 			},
 			backgroundImage: {
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 2c3f329bcb..53ae7e64c1 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -2,6 +2,7 @@ import '@modrinth/assets/omorphia.scss'
 import 'floating-vue/dist/style.css'
 import '../src/styles/tailwind.css'
 
+import { GenericModrinthClient } from '@modrinth/api-client'
 import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
@@ -17,7 +18,10 @@ import {
 } from '../src/composables/i18n'
 import {
 	AbstractWebNotificationManager,
+	I18N_INJECTION_KEY,
+	type I18nContext,
 	type NotificationPanelLocation,
+	provideModrinthClient,
 	provideNotificationManager,
 	type WebNotification,
 } from '../src/providers'
@@ -77,6 +81,17 @@ class StorybookNotificationManager extends AbstractWebNotificationManager {
 
 setup((app) => {
 	app.use(i18n)
+
+	// Provide the custom I18nContext for components using injectI18n()
+	const i18nContext: I18nContext = {
+		locale: i18n.global.locale,
+		t: (key, values) => i18n.global.t(key, values ?? {}) as string,
+		setLocale: (newLocale) => {
+			i18n.global.locale.value = newLocale
+		},
+	}
+	app.provide(I18N_INJECTION_KEY, i18nContext)
+
 	app.use(FloatingVue, {
 		themes: {
 			'ribbit-popout': {
@@ -100,10 +115,15 @@ setup((app) => {
 	}
 })
 
-// Wrapper component that provides notification manager context
-const NotificationManagerProvider = defineComponent({
+const StorybookProvider = defineComponent({
 	setup(_, { slots }) {
 		provideNotificationManager(new StorybookNotificationManager())
+
+		const modrinthClient = new GenericModrinthClient({
+			userAgent: 'modrinth-storybook/1.0.0',
+		})
+		provideModrinthClient(modrinthClient)
+
 		return () => slots.default?.()
 	},
 })
@@ -126,14 +146,13 @@ const preview: Preview = {
 			},
 			defaultTheme: 'dark',
 		}),
-		// Wrap stories with notification manager provider
 		(story) => ({
-			components: { story, NotificationManagerProvider, NotificationPanel },
+			components: { story, StorybookProvider, NotificationPanel },
 			template: /*html*/ `
-				<NotificationManagerProvider>
+				<StorybookProvider>
 					<NotificationPanel />
 					<story />
-				</NotificationManagerProvider>
+				</StorybookProvider>
 			`,
 		}),
 	],
diff --git a/packages/ui/src/components/base/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index 06c42f8775..90a2bd40e6 100644
--- a/packages/ui/src/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
 	<img
-		v-if="src"
+		v-if="src && !failed"
 		ref="img"
 		class="`experimental-styles-within avatar shrink-0"
 		:style="`--_size: ${cssSize}`"
@@ -14,6 +14,7 @@
 		:alt="alt"
 		:loading="loading"
 		@load="updatePixelated"
+		@error="onError"
 	/>
 	<svg
 		v-else
@@ -45,10 +46,11 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const pixelated = ref(false)
 const img = ref(null)
+const failed = ref(false)
 
 const props = defineProps({
 	src: {
@@ -95,6 +97,18 @@ const LEGACY_PRESETS = {
 
 const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
 
+watch(
+	() => props.src,
+	() => {
+		failed.value = false
+	}
+)
+
+function onError(e) {
+	console.log('Avatar image failed to load:', props.src, e)
+	failed.value = true
+}
+
 function updatePixelated() {
 	if (img.value && img.value.naturalWidth && img.value.naturalWidth < 32) {
 		pixelated.value = true
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 41954c1773..9047296aad 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -22,6 +22,11 @@
 		>
 			<div class="flex items-center gap-2">
 				<slot name="prefix"></slot>
+				<component
+					:is="selectedOption?.icon"
+					v-if="showIconInSelected && selectedOption?.icon"
+					class="h-5 w-5"
+				/>
 				<span class="text-primary font-semibold leading-tight">
 					<slot name="selected">{{ triggerText }}</slot>
 				</span>
@@ -164,6 +169,7 @@ const props = withDefaults(
 		searchPlaceholder?: string
 		listbox?: boolean
 		showChevron?: boolean
+		showIconInSelected?: boolean
 		maxHeight?: number
 		displayValue?: string
 		extraPosition?: 'top' | 'bottom'
@@ -179,6 +185,7 @@ const props = withDefaults(
 		searchPlaceholder: 'Search...',
 		listbox: true,
 		showChevron: true,
+		showIconInSelected: false,
 		maxHeight: DEFAULT_MAX_HEIGHT,
 		extraPosition: 'bottom',
 		noOptionsMessage: 'No results found',
diff --git a/packages/ui/src/components/base/Toggle.vue b/packages/ui/src/components/base/Toggle.vue
index 831c3d326c..fd49647ae5 100644
--- a/packages/ui/src/components/base/Toggle.vue
+++ b/packages/ui/src/components/base/Toggle.vue
@@ -1,19 +1,44 @@
 <template>
-	<input
+	<button
 		:id="id"
-		type="checkbox"
-		class="switch stylized-toggle"
+		type="button"
+		role="switch"
+		:aria-checked="modelValue"
 		:disabled="disabled"
-		:checked="checked"
-		@change="checked = !checked"
-	/>
+		class="relative inline-flex shrink-0 rounded-full m-0 transition-all duration-200 cursor-pointer border-none"
+		:class="[
+			small ? 'h-5 !w-[38px]' : 'h-8 !w-[52px]',
+			modelValue ? 'bg-brand' : 'bg-button-bg',
+			disabled ? 'opacity-50 cursor-not-allowed' : 'btn-wrapper',
+		]"
+		@click="toggle"
+	>
+		<span
+			class="absolute rounded-full transition-all duration-200"
+			:class="[
+				small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[18px] h-[18px] top-[7px] left-[7px]',
+				modelValue
+					? small
+						? 'translate-x-[18px] bg-black/90'
+						: 'translate-x-5 bg-black/90'
+					: 'bg-gray',
+			]"
+		/>
+	</button>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
 	id?: string
 	disabled?: boolean
+	small?: boolean
 }>()
 
-const checked = defineModel<boolean>()
+const modelValue = defineModel<boolean>()
+
+function toggle() {
+	if (!props.disabled) {
+		modelValue.value = !modelValue.value
+	}
+}
 </script>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 1f00fa63a7..7204b200dc 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -5,6 +5,7 @@ export * from './brand'
 export * from './changelog'
 export * from './chart'
 export * from './content'
+export * from './instances'
 export * from './modal'
 export * from './nav'
 export * from './page'
diff --git a/packages/ui/src/components/instances/ContentCardItem.vue b/packages/ui/src/components/instances/ContentCardItem.vue
new file mode 100644
index 0000000000..5a30f28757
--- /dev/null
+++ b/packages/ui/src/components/instances/ContentCardItem.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { DownloadIcon, MoreVerticalIcon, OrganizationIcon, TrashIcon } from '@modrinth/assets'
+import { computed, getCurrentInstance } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import AutoLink from '../base/AutoLink.vue'
+import Avatar from '../base/Avatar.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import Checkbox from '../base/Checkbox.vue'
+import { type Option as OverflowMenuOption } from '../base/OverflowMenu.vue'
+import Toggle from '../base/Toggle.vue'
+import TeleportOverflowMenu from '../servers/files/explorer/TeleportOverflowMenu.vue'
+import type { ContentCardProject, ContentCardVersion, ContentOwner } from './types'
+
+interface Props {
+	project: ContentCardProject
+	projectLink?: string | RouteLocationRaw
+	version?: ContentCardVersion
+	owner?: ContentOwner
+	enabled?: boolean
+	hasUpdate?: boolean
+	overflowOptions?: OverflowMenuOption[]
+	disabled?: boolean
+	showCheckbox?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+	projectLink: undefined,
+	version: undefined,
+	owner: undefined,
+	enabled: undefined,
+	hasUpdate: false,
+	overflowOptions: undefined,
+	disabled: false,
+	showCheckbox: false,
+})
+
+const selected = defineModel<boolean>('selected')
+
+const emit = defineEmits<{
+	'update:enabled': [value: boolean]
+	delete: []
+	update: []
+}>()
+
+const instance = getCurrentInstance()
+const hasDeleteListener = computed(() => typeof instance?.vnode.props?.onDelete === 'function')
+const hasUpdateListener = computed(() => typeof instance?.vnode.props?.onUpdate === 'function')
+
+const MAX_FILENAME_LENGTH = 42
+
+function truncateMiddle(str: string, maxLength: number): string {
+	if (str.length <= maxLength) return str
+	const ellipsis = '...'
+	const charsToShow = maxLength - ellipsis.length
+	const frontChars = Math.ceil(charsToShow / 2)
+	const backChars = Math.floor(charsToShow / 2)
+	return str.slice(0, frontChars) + ellipsis + str.slice(-backChars)
+}
+</script>
+
+<template>
+	<div
+		class="flex h-[74px] items-center justify-between gap-4 px-4"
+		:class="{ 'opacity-50': disabled }"
+	>
+		<div class="flex min-w-0 shrink-0 items-center gap-4" :class="showCheckbox ? 'w-[350px]' : ''">
+			<Checkbox
+				v-if="showCheckbox"
+				:model-value="selected ?? false"
+				:disabled="disabled"
+				class="shrink-0"
+				@update:model-value="selected = $event"
+			/>
+
+			<div class="flex min-w-0 items-center gap-3">
+				<Avatar
+					:src="project.icon_url"
+					:alt="project.title"
+					size="3rem"
+					no-shadow
+					class="shrink-0 rounded-2xl border border-surface-5"
+				/>
+				<div class="flex min-w-0 flex-col gap-0.5">
+					<AutoLink
+						:target="
+							typeof projectLink === 'string' && projectLink.startsWith('http')
+								? '_blank'
+								: undefined
+						"
+						:to="projectLink"
+						class="truncate font-semibold leading-6 text-contrast !decoration-contrast"
+						:class="{ 'hover:underline': projectLink }"
+					>
+						{{ project.title }}
+					</AutoLink>
+
+					<AutoLink
+						v-if="owner"
+						:target="
+							typeof owner.link === 'string' && owner.link.startsWith('http') ? '_blank' : undefined
+						"
+						:to="owner.link"
+						class="flex items-center gap-1 !decoration-secondary"
+						:class="{ 'hover:underline': owner.link }"
+					>
+						<Avatar
+							:src="owner.avatar_url"
+							:alt="owner.name"
+							size="1.5rem"
+							:circle="owner.type === 'user'"
+							no-shadow
+							class="shrink-0"
+						/>
+						<OrganizationIcon v-if="owner.type === 'organization'" class="size-4 text-secondary" />
+						<span class="text-sm leading-5 text-secondary">{{ owner.name }}</span>
+					</AutoLink>
+				</div>
+			</div>
+		</div>
+
+		<div class="hidden w-[335px] shrink-0 flex-col gap-0.5 md:flex">
+			<template v-if="version">
+				<span class="font-medium leading-6 text-contrast">{{ version.version_number }}</span>
+				<span
+					v-tooltip="version.file_name.length > MAX_FILENAME_LENGTH ? version.file_name : undefined"
+					class="leading-6 text-secondary"
+				>
+					{{ truncateMiddle(version.file_name, MAX_FILENAME_LENGTH) }}
+				</span>
+			</template>
+		</div>
+
+		<div class="flex shrink-0 items-center gap-2">
+			<slot name="additionalButtonsLeft" />
+
+			<ButtonStyled
+				v-if="hasUpdate && hasUpdateListener"
+				circular
+				type="transparent"
+				color="green"
+				color-fill="text"
+				hover-color-fill="background"
+			>
+				<button v-tooltip="'Update available'" :disabled="disabled" @click="emit('update')">
+					<DownloadIcon class="size-5" />
+				</button>
+			</ButtonStyled>
+
+			<Toggle
+				v-if="enabled !== undefined"
+				:model-value="enabled"
+				:disabled="disabled"
+				small
+				@update:model-value="(val) => emit('update:enabled', val as boolean)"
+			/>
+
+			<ButtonStyled v-if="hasDeleteListener" circular type="transparent">
+				<button v-tooltip="'Delete'" :disabled="disabled" @click="emit('delete')">
+					<TrashIcon class="size-5 text-secondary" />
+				</button>
+			</ButtonStyled>
+
+			<slot name="additionalButtonsRight" />
+
+			<ButtonStyled circular type="transparent">
+				<TeleportOverflowMenu
+					v-if="overflowOptions?.length"
+					:options="overflowOptions"
+					:disabled="disabled"
+				>
+					<MoreVerticalIcon class="size-5" />
+				</TeleportOverflowMenu>
+			</ButtonStyled>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/instances/ContentCardTable.vue b/packages/ui/src/components/instances/ContentCardTable.vue
new file mode 100644
index 0000000000..cb462c4233
--- /dev/null
+++ b/packages/ui/src/components/instances/ContentCardTable.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import Checkbox from '../base/Checkbox.vue'
+import ContentCardItem from './ContentCardItem.vue'
+import type {
+	ContentCardTableItem,
+	ContentCardTableSortColumn,
+	ContentCardTableSortDirection,
+} from './types'
+
+const BUFFER_SIZE = 5
+
+interface Props {
+	items: ContentCardTableItem[]
+	showSelection?: boolean
+	sortable?: boolean
+	sortBy?: ContentCardTableSortColumn
+	sortDirection?: ContentCardTableSortDirection
+	virtualized?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	showSelection: false,
+	sortable: false,
+	sortBy: undefined,
+	sortDirection: 'asc',
+	virtualized: true,
+})
+
+const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
+
+const emit = defineEmits<{
+	'update:enabled': [id: string, value: boolean]
+	delete: [id: string]
+	update: [id: string]
+	sort: [column: ContentCardTableSortColumn, direction: ContentCardTableSortDirection]
+}>()
+
+// Virtualization state
+const listContainer = ref<HTMLElement | null>(null)
+const scrollContainer = ref<HTMLElement | Window | null>(null)
+const scrollTop = ref(0)
+const viewportHeight = ref(0)
+const itemHeight = 74
+
+const totalHeight = computed(() => props.items.length * itemHeight)
+
+// Find the nearest scrollable ancestor
+function findScrollableAncestor(element: HTMLElement | null): HTMLElement | Window {
+	if (!element) return window
+
+	let current: HTMLElement | null = element.parentElement
+	while (current) {
+		const style = getComputedStyle(current)
+		const overflowY = style.overflowY
+		const isScrollable =
+			(overflowY === 'auto' || overflowY === 'scroll') &&
+			current.scrollHeight > current.clientHeight
+
+		if (isScrollable) {
+			return current
+		}
+		current = current.parentElement
+	}
+	return window
+}
+
+function getScrollTop(container: HTMLElement | Window): number {
+	if (container instanceof Window) {
+		return window.scrollY
+	}
+	return container.scrollTop
+}
+
+function getViewportHeight(container: HTMLElement | Window): number {
+	if (container instanceof Window) {
+		return window.innerHeight
+	}
+	return container.clientHeight
+}
+
+function getContainerOffset(listEl: HTMLElement, container: HTMLElement | Window): number {
+	if (container instanceof Window) {
+		return listEl.getBoundingClientRect().top + window.scrollY
+	}
+	// For element containers, get the offset relative to the scroll container
+	const listRect = listEl.getBoundingClientRect()
+	const containerRect = container.getBoundingClientRect()
+	return listRect.top - containerRect.top + container.scrollTop
+}
+
+const visibleRange = computed(() => {
+	if (!props.virtualized) {
+		return { start: 0, end: props.items.length }
+	}
+
+	if (!listContainer.value || !scrollContainer.value) return { start: 0, end: 0 }
+
+	const containerOffset = getContainerOffset(listContainer.value, scrollContainer.value)
+	const relativeScrollTop = Math.max(0, scrollTop.value - containerOffset)
+
+	const start = Math.floor(relativeScrollTop / itemHeight)
+	const visibleCount = Math.ceil(viewportHeight.value / itemHeight)
+
+	return {
+		start: Math.max(0, start - BUFFER_SIZE),
+		end: Math.min(props.items.length, start + visibleCount + BUFFER_SIZE * 2),
+	}
+})
+
+const visibleTop = computed(() => (props.virtualized ? visibleRange.value.start * itemHeight : 0))
+
+const visibleItems = computed(() =>
+	props.items.slice(visibleRange.value.start, visibleRange.value.end),
+)
+
+// Expose for perf monitoring
+defineExpose({
+	visibleRange,
+	visibleItems,
+})
+
+function handleScroll() {
+	if (scrollContainer.value) {
+		scrollTop.value = getScrollTop(scrollContainer.value)
+	}
+}
+
+function handleResize() {
+	if (scrollContainer.value) {
+		viewportHeight.value = getViewportHeight(scrollContainer.value)
+	}
+}
+
+onMounted(() => {
+	scrollContainer.value = findScrollableAncestor(listContainer.value)
+	viewportHeight.value = getViewportHeight(scrollContainer.value)
+	scrollTop.value = getScrollTop(scrollContainer.value)
+
+	scrollContainer.value.addEventListener('scroll', handleScroll, { passive: true })
+	window.addEventListener('resize', handleResize, { passive: true })
+})
+
+onUnmounted(() => {
+	if (scrollContainer.value) {
+		scrollContainer.value.removeEventListener('scroll', handleScroll)
+	}
+	window.removeEventListener('resize', handleResize)
+})
+
+// Selection logic
+const allSelected = computed(() => {
+	if (props.items.length === 0) return false
+	return props.items.every((item) => selectedIds.value.includes(item.id))
+})
+
+const someSelected = computed(() => {
+	return props.items.some((item) => selectedIds.value.includes(item.id)) && !allSelected.value
+})
+
+function toggleSelectAll() {
+	if (allSelected.value) {
+		selectedIds.value = []
+	} else {
+		selectedIds.value = props.items.map((item) => item.id)
+	}
+}
+
+function toggleItemSelection(itemId: string, selected: boolean) {
+	if (selected) {
+		if (!selectedIds.value.includes(itemId)) {
+			selectedIds.value = [...selectedIds.value, itemId]
+		}
+	} else {
+		selectedIds.value = selectedIds.value.filter((id) => id !== itemId)
+	}
+}
+
+function isItemSelected(itemId: string): boolean {
+	return selectedIds.value.includes(itemId)
+}
+
+function handleSort(column: ContentCardTableSortColumn) {
+	if (!props.sortable) return
+
+	const newDirection: ContentCardTableSortDirection =
+		props.sortBy === column && props.sortDirection === 'asc' ? 'desc' : 'asc'
+
+	emit('sort', column, newDirection)
+}
+</script>
+
+<template>
+	<div class="overflow-hidden rounded-[20px] border border-solid border-[1px] border-surface-3">
+		<div
+			class="flex h-12 items-center justify-between gap-4 bg-surface-3 px-4"
+			:class="showSelection ? '' : ''"
+		>
+			<div class="flex shrink-0 items-center gap-4" :class="showSelection ? 'w-[350px]' : ''">
+				<Checkbox
+					v-if="showSelection"
+					:model-value="allSelected"
+					:indeterminate="someSelected"
+					class="shrink-0"
+					@update:model-value="toggleSelectAll"
+				/>
+
+				<button
+					v-if="sortable"
+					class="flex items-center gap-1.5 font-semibold text-contrast"
+					@click="handleSort('project')"
+				>
+					Project
+					<ChevronUpIcon v-if="sortBy === 'project' && sortDirection === 'asc'" class="size-4" />
+					<ChevronDownIcon
+						v-else-if="sortBy === 'project' && sortDirection === 'desc'"
+						class="size-4"
+					/>
+				</button>
+				<span v-else class="font-semibold text-contrast">Project</span>
+			</div>
+
+			<div class="hidden w-[335px] shrink-0 md:block">
+				<button
+					v-if="sortable"
+					class="flex items-center gap-1.5 font-semibold text-secondary"
+					@click="handleSort('version')"
+				>
+					Version
+					<ChevronUpIcon v-if="sortBy === 'version' && sortDirection === 'asc'" class="size-4" />
+					<ChevronDownIcon
+						v-else-if="sortBy === 'version' && sortDirection === 'desc'"
+						class="size-4"
+					/>
+				</button>
+				<span v-else class="font-semibold text-secondary">Version</span>
+			</div>
+
+			<div class="shrink-0 text-right">
+				<span class="font-semibold text-secondary">Actions</span>
+			</div>
+		</div>
+
+		<div
+			v-if="items.length > 0 && virtualized"
+			ref="listContainer"
+			class="relative w-full rounded-b-[20px]"
+			:style="{ minHeight: `${totalHeight}px` }"
+		>
+			<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
+				<ContentCardItem
+					v-for="(item, idx) in visibleItems"
+					:key="item.id"
+					data-content-card-item
+					:project="item.project"
+					:project-link="item.projectLink"
+					:version="item.version"
+					:owner="item.owner"
+					:enabled="item.enabled"
+					:has-update="item.hasUpdate"
+					:overflow-options="item.overflowOptions"
+					:disabled="item.disabled"
+					:show-checkbox="showSelection"
+					:selected="isItemSelected(item.id)"
+					:class="[
+						(visibleRange.start + idx) % 2 === 1 ? 'bg-surface-1' : 'bg-surface-2',
+						'border-t border-solid border-[1px] border-surface-3',
+						visibleRange.start + idx === items.length - 1 ? 'rounded-b-[20px] !border-none' : '',
+					]"
+					@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+					@update:enabled="(val) => emit('update:enabled', item.id, val)"
+					@delete="emit('delete', item.id)"
+					@update="emit('update', item.id)"
+				>
+					<template #additionalButtonsLeft>
+						<slot name="itemButtonsLeft" :item="item" :index="visibleRange.start + idx" />
+					</template>
+					<template #additionalButtonsRight>
+						<slot name="itemButtonsRight" :item="item" :index="visibleRange.start + idx" />
+					</template>
+				</ContentCardItem>
+			</div>
+		</div>
+
+		<div v-else-if="items.length > 0" ref="listContainer" class="rounded-b-[20px]">
+			<ContentCardItem
+				v-for="(item, index) in items"
+				:key="item.id"
+				data-content-card-item
+				:project="item.project"
+				:project-link="item.projectLink"
+				:version="item.version"
+				:owner="item.owner"
+				:enabled="item.enabled"
+				:has-update="item.hasUpdate"
+				:overflow-options="item.overflowOptions"
+				:disabled="item.disabled"
+				:show-checkbox="showSelection"
+				:selected="isItemSelected(item.id)"
+				:class="[
+					index % 2 === 1 ? 'bg-surface-1' : 'bg-surface-2',
+					'border-t border-solid border-surface-3',
+					index === items.length - 1 ? 'rounded-b-[20px] !border-none' : '',
+				]"
+				@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+				@update:enabled="(val) => emit('update:enabled', item.id, val)"
+				@delete="emit('delete', item.id)"
+				@update="emit('update', item.id)"
+			>
+				<template #additionalButtonsLeft>
+					<slot name="itemButtonsLeft" :item="item" :index="index" />
+				</template>
+				<template #additionalButtonsRight>
+					<slot name="itemButtonsRight" :item="item" :index="index" />
+				</template>
+			</ContentCardItem>
+		</div>
+
+		<div v-else class="flex items-center justify-center rounded-b-[20px] py-12">
+			<slot name="empty">
+				<span class="text-secondary">No items</span>
+			</slot>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/instances/ContentModpackCard.vue b/packages/ui/src/components/instances/ContentModpackCard.vue
new file mode 100644
index 0000000000..40369e7a3b
--- /dev/null
+++ b/packages/ui/src/components/instances/ContentModpackCard.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import {
+	ClockIcon,
+	DownloadIcon,
+	HeartIcon,
+	MoreVerticalIcon,
+	OrganizationIcon,
+	UnlinkIcon,
+} from '@modrinth/assets'
+import { computed, getCurrentInstance } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import { useRelativeTime } from '../../composables/how-ago'
+import AutoLink from '../base/AutoLink.vue'
+import Avatar from '../base/Avatar.vue'
+import BulletDivider from '../base/BulletDivider.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import OverflowMenu, { type Option as OverflowMenuOption } from '../base/OverflowMenu.vue'
+import TagItem from '../base/TagItem.vue'
+import type {
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+	ContentOwner,
+} from './types'
+
+interface Props {
+	project: ContentModpackCardProject
+	projectLink?: string | RouteLocationRaw
+	version?: ContentModpackCardVersion
+	owner?: ContentOwner
+	categories?: ContentModpackCardCategory[]
+	disabled?: boolean
+	overflowOptions?: OverflowMenuOption[]
+}
+
+withDefaults(defineProps<Props>(), {
+	projectLink: undefined,
+	version: undefined,
+	owner: undefined,
+	categories: undefined,
+	disabled: false,
+	overflowOptions: undefined,
+})
+
+const emit = defineEmits<{
+	update: []
+	content: []
+	unlink: []
+}>()
+
+const instance = getCurrentInstance()
+const hasUpdateListener = computed(() => typeof instance?.vnode.props?.onUpdate === 'function')
+const hasContentListener = computed(() => typeof instance?.vnode.props?.onContent === 'function')
+const hasUnlinkListener = computed(() => typeof instance?.vnode.props?.onUnlink === 'function')
+
+const formatTimeAgo = useRelativeTime()
+
+const formatCompact = (n: number | undefined) => {
+	if (n === undefined) return ''
+	return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 }).format(n)
+}
+</script>
+
+<template>
+	<div
+		class="flex flex-col gap-4 rounded-[20px] bg-bg-raised p-6 shadow-md"
+		:class="{ 'opacity-50': disabled }"
+	>
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
+				<Avatar
+					:src="project.icon_url"
+					:alt="project.title"
+					size="5rem"
+					no-shadow
+					raised
+					class="shrink-0"
+				/>
+				<div class="flex flex-col gap-1.5">
+					<AutoLink
+						:to="projectLink"
+						class="text-2xl font-semibold leading-8 text-contrast hover:underline"
+					>
+						{{ project.title }}
+					</AutoLink>
+					<div class="flex flex-wrap items-center gap-2 text-secondary">
+						<template v-if="owner">
+							<AutoLink :to="owner.link" class="flex items-center gap-1.5 hover:underline">
+								<Avatar
+									:src="owner.avatar_url"
+									:alt="owner.name"
+									size="2rem"
+									:circle="owner.type === 'user'"
+									no-shadow
+								/>
+								<OrganizationIcon v-if="owner.type === 'organization'" class="size-4" />
+								<span class="font-medium">{{ owner.name }}</span>
+							</AutoLink>
+						</template>
+						<template v-if="owner && version">
+							<BulletDivider />
+						</template>
+						<template v-if="version">
+							<span class="font-medium">v{{ version.version_number }}</span>
+						</template>
+						<template v-if="version?.date_published">
+							<BulletDivider />
+							<div class="flex items-center gap-2">
+								<ClockIcon class="size-5" />
+								<span>{{ formatTimeAgo(new Date(version.date_published)) }}</span>
+							</div>
+						</template>
+					</div>
+				</div>
+			</div>
+
+			<div class="flex shrink-0 items-center gap-2">
+				<ButtonStyled v-if="hasUpdateListener" type="transparent" color="green" color-fill="text">
+					<button class="flex items-center gap-2" @click="emit('update')">
+						<DownloadIcon class="!text-green size-5" />
+						<span class="font-semibold">Update</span>
+					</button>
+				</ButtonStyled>
+
+				<ButtonStyled v-if="hasContentListener">
+					<button class="!shadow-none" @click="emit('content')">Content</button>
+				</ButtonStyled>
+
+				<ButtonStyled v-if="hasUnlinkListener" circular type="outlined">
+					<button
+						v-tooltip="'Unlink modpack'"
+						class="!border-surface-4 !border-[1px]"
+						@click="emit('unlink')"
+					>
+						<UnlinkIcon class="size-5" />
+					</button>
+				</ButtonStyled>
+
+				<ButtonStyled v-if="overflowOptions?.length" circular type="transparent">
+					<OverflowMenu :options="overflowOptions">
+						<MoreVerticalIcon class="size-5" />
+					</OverflowMenu>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<span v-if="project.description" class="text-secondary">
+			{{ project.description }}
+		</span>
+
+		<div class="flex flex-wrap items-center gap-3">
+			<div v-if="project.downloads !== undefined" class="flex items-center gap-2 text-secondary">
+				<DownloadIcon class="size-5" />
+				<span class="font-medium">{{ formatCompact(project.downloads) }}</span>
+			</div>
+
+			<div v-if="project.followers !== undefined" class="flex items-center gap-2 text-secondary">
+				<HeartIcon class="size-5" />
+				<span class="font-medium">{{ formatCompact(project.followers) }}</span>
+			</div>
+
+			<div v-if="categories?.length" class="flex flex-wrap gap-2">
+				<TagItem v-for="cat in categories" :key="cat.name" :action="cat.action">
+					{{ cat.name }}
+				</TagItem>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/instances/index.ts b/packages/ui/src/components/instances/index.ts
new file mode 100644
index 0000000000..b6bf41cd10
--- /dev/null
+++ b/packages/ui/src/components/instances/index.ts
@@ -0,0 +1,19 @@
+export { default as ContentCardItem } from './ContentCardItem.vue'
+export { default as ContentCardTable } from './ContentCardTable.vue'
+/**
+ * @deprecated Use `ContentCardTable` with `ContentCardItem` instead.
+ * This alias is kept for backwards compatibility and will be removed in a future version.
+ */
+export { default as ContentCard } from './ContentCardItem.vue'
+export { default as ContentModpackCard } from './ContentModpackCard.vue'
+export type {
+	ContentCardProject,
+	ContentCardTableItem,
+	ContentCardTableSortColumn,
+	ContentCardTableSortDirection,
+	ContentCardVersion,
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+	ContentOwner,
+} from './types'
diff --git a/packages/ui/src/components/instances/types.ts b/packages/ui/src/components/instances/types.ts
new file mode 100644
index 0000000000..91757f9492
--- /dev/null
+++ b/packages/ui/src/components/instances/types.ts
@@ -0,0 +1,50 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { RouteLocationRaw } from 'vue-router'
+
+import type { Option as OverflowMenuOption } from '../base/OverflowMenu.vue'
+
+export type ContentCardProject = Pick<
+	Labrinth.Projects.v2.Project,
+	'id' | 'slug' | 'title' | 'icon_url'
+>
+
+export type ContentCardVersion = Pick<Labrinth.Versions.v2.Version, 'id' | 'version_number'> & {
+	file_name: string
+}
+
+export interface ContentOwner {
+	id: string
+	name: string
+	avatar_url?: string
+	type: 'user' | 'organization'
+	link?: string | RouteLocationRaw
+}
+
+export interface ContentCardTableItem {
+	id: string
+	project: ContentCardProject
+	projectLink?: string | RouteLocationRaw
+	version?: ContentCardVersion
+	owner?: ContentOwner
+	enabled?: boolean
+	disabled?: boolean
+	hasUpdate?: boolean
+	overflowOptions?: OverflowMenuOption[]
+}
+
+export type ContentCardTableSortColumn = 'project' | 'version'
+export type ContentCardTableSortDirection = 'asc' | 'desc'
+
+export type ContentModpackCardProject = Pick<
+	Labrinth.Projects.v2.Project,
+	'id' | 'slug' | 'title' | 'icon_url' | 'description' | 'downloads' | 'followers'
+>
+
+export type ContentModpackCardVersion = Pick<
+	Labrinth.Versions.v2.Version,
+	'id' | 'version_number' | 'date_published'
+>
+
+export type ContentModpackCardCategory = Labrinth.Tags.v2.Category & {
+	action?: (event: MouseEvent) => void
+}
diff --git a/packages/ui/src/components/modal/InstallToPlayModal.vue b/packages/ui/src/components/modal/InstallToPlayModal.vue
new file mode 100644
index 0000000000..e96512ade8
--- /dev/null
+++ b/packages/ui/src/components/modal/InstallToPlayModal.vue
@@ -0,0 +1,109 @@
+<template>
+	<NewModal ref="modal" header="Install to play" :closable="true">
+		<div class="flex flex-col gap-4 max-w-[500px]">
+			<Admonition type="info" header="Shared server instance">
+				This server requires modded content to play. Accept to install the needed files from
+				Modrinth.
+			</Admonition>
+
+			<div v-if="sharedBy?.name" class="flex items-center gap-2 text-sm text-secondary">
+				<Avatar
+					v-if="sharedBy?.icon_url"
+					:src="sharedBy.icon_url"
+					:alt="sharedBy.name"
+					size="24px"
+				/>
+				<span>
+					<span class="font-semibold text-contrast">{{ sharedBy.name }}</span>
+					shared this instance with you today.
+				</span>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<span class="text-sm font-semibold text-secondary">Shared instance</span>
+				<div class="flex items-center gap-3 rounded-xl bg-surface-4 p-3">
+					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />
+					<div class="flex flex-col gap-0.5">
+						<span class="font-semibold text-contrast">{{ project.title }}</span>
+						<span class="text-sm text-secondary">
+							{{ loaderDisplay }} {{ project.game_versions?.[0] }}
+							<template v-if="modCount"> · {{ modCount }} mods </template>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<button @click="handleDecline">
+						<XIcon />
+						Decline
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleAccept">
+						<CheckIcon />
+						Accept
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import type { Project } from '@modrinth/utils'
+import { formatCategory } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+
+import Admonition from '../base/Admonition.vue'
+import Avatar from '../base/Avatar.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import NewModal from './NewModal.vue'
+
+const props = defineProps<{
+	project: Project
+	sharedBy?: {
+		name: string
+		icon_url?: string
+	}
+	modCount?: number
+}>()
+
+const emit = defineEmits<{
+	accept: []
+	decline: []
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+const loaderDisplay = computed(() => {
+	const loader = props.project.loaders?.[0]
+	if (!loader) return ''
+	return formatCategory(loader)
+})
+
+function handleAccept() {
+	// TODO: Implement accept logic
+	emit('accept')
+	modal.value?.hide()
+}
+
+function handleDecline() {
+	emit('decline')
+	modal.value?.hide()
+}
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/components/modal/index.ts b/packages/ui/src/components/modal/index.ts
index 89c4cf0266..eb28a6569b 100644
--- a/packages/ui/src/components/modal/index.ts
+++ b/packages/ui/src/components/modal/index.ts
@@ -1,4 +1,5 @@
 export { default as ConfirmModal } from './ConfirmModal.vue'
+export { default as InstallToPlayModal } from './InstallToPlayModal.vue'
 export { default as Modal } from './Modal.vue'
 export { default as NewModal } from './NewModal.vue'
 export { default as ShareModal } from './ShareModal.vue'
diff --git a/packages/ui/src/components/project/ProjectCombobox.vue b/packages/ui/src/components/project/ProjectCombobox.vue
new file mode 100644
index 0000000000..b2ace5384d
--- /dev/null
+++ b/packages/ui/src/components/project/ProjectCombobox.vue
@@ -0,0 +1,183 @@
+<template>
+	<Combobox
+		v-model="projectId"
+		:placeholder="placeholder"
+		:options="options"
+		:searchable="true"
+		:search-placeholder="searchPlaceholder"
+		:no-options-message="searchLoading ? loadingMessage : noResultsMessage"
+		:disable-search-filter="true"
+		:disabled="disabled"
+		show-icon-in-selected
+		@search-input="(query) => handleSearch(query)"
+	/>
+</template>
+
+<script lang="ts" setup>
+import { useDebounceFn } from '@vueuse/core'
+import { defineAsyncComponent, h, ref, watch } from 'vue'
+
+import { injectModrinthClient, injectNotificationManager } from '../../providers'
+import type { ComboboxOption } from '../base/Combobox.vue'
+import Combobox from '../base/Combobox.vue'
+
+export type ProjectType =
+	| 'mod'
+	| 'modpack'
+	| 'resourcepack'
+	| 'shader'
+	| 'datapack'
+	| 'plugin'
+	| 'server'
+
+interface SearchHit {
+	project_id: string
+	title: string
+	icon_url?: string
+	project_type: string
+	slug: string
+}
+
+const props = withDefaults(
+	defineProps<{
+		/** Filter by project types */
+		projectTypes?: ProjectType[]
+		/** Placeholder text for the combobox */
+		placeholder?: string
+		/** Placeholder text for the search input */
+		searchPlaceholder?: string
+		/** Message shown when loading */
+		loadingMessage?: string
+		/** Message shown when no results found */
+		noResultsMessage?: string
+		/** Whether the combobox is disabled */
+		disabled?: boolean
+		/** Maximum number of results to show */
+		limit?: number
+	}>(),
+	{
+		placeholder: 'Select project',
+		searchPlaceholder: 'Search by name or paste ID...',
+		loadingMessage: 'Loading...',
+		noResultsMessage: 'No results found',
+		disabled: false,
+		limit: 20,
+	},
+)
+
+const { addNotification } = injectNotificationManager()
+const projectId = defineModel<string>()
+
+const searchLoading = ref(false)
+const options = ref<ComboboxOption<string>[]>([])
+const selectedProject = ref<SearchHit | null>(null)
+const searchResultsCache = ref<Map<string, SearchHit>>(new Map())
+
+const { labrinth } = injectModrinthClient()
+
+// Watch for external changes to projectId to update selectedProject
+watch(
+	projectId,
+	async (newId) => {
+		if (!newId) {
+			selectedProject.value = null
+			return
+		}
+
+		if (searchResultsCache.value.has(newId)) {
+			selectedProject.value = searchResultsCache.value.get(newId) || null
+			return
+		}
+
+		try {
+			const project = await labrinth.projects_v2.get(newId)
+			if (project) {
+				const hit: SearchHit = {
+					project_id: project.id,
+					title: project.title,
+					icon_url: project.icon_url ?? undefined,
+					project_type: project.project_type,
+					slug: project.slug,
+				}
+				searchResultsCache.value.set(project.id, hit)
+				selectedProject.value = hit
+			}
+		} catch {
+			selectedProject.value = null
+		}
+	},
+	{ immediate: true },
+)
+
+const search = async (query: string) => {
+	query = query.trim()
+	if (!query) {
+		searchLoading.value = false
+		options.value = []
+		return
+	}
+
+	try {
+		const projectTypeFacets = props.projectTypes?.map((type) => `project_type:${type}`)
+
+		const results = await labrinth.projects_v2.search({
+			query: query,
+			limit: props.limit,
+			facets: projectTypeFacets ? [projectTypeFacets] : undefined,
+		})
+
+		const resultsByProjectId = await labrinth.projects_v2.search({
+			query: '',
+			limit: props.limit,
+			facets: [[`project_id:${query.replace(/[^a-zA-Z0-9]/g, '')}`]],
+		})
+
+		const allHits = [...resultsByProjectId.hits, ...results.hits]
+		const seenIds = new Set<string>()
+		const uniqueHits: SearchHit[] = []
+
+		for (const hit of allHits) {
+			if (!seenIds.has(hit.project_id)) {
+				seenIds.add(hit.project_id)
+				uniqueHits.push(hit)
+				// Cache the hit for later lookup
+				searchResultsCache.value.set(hit.project_id, hit)
+			}
+		}
+
+		options.value = uniqueHits.map((hit) => ({
+			label: hit.title,
+			value: hit.project_id,
+			icon: defineAsyncComponent(() =>
+				Promise.resolve({
+					setup: () => () =>
+						h('img', {
+							src: hit.icon_url,
+							alt: hit.title,
+							class: 'h-5 w-5 rounded',
+						}),
+				}),
+			),
+		}))
+	} catch (error: unknown) {
+		const err = error as { data?: { description?: string } }
+		addNotification({
+			title: 'An error occurred',
+			text: err.data ? err.data.description : String(error),
+			type: 'error',
+		})
+	}
+	searchLoading.value = false
+}
+
+const throttledSearch = useDebounceFn(search, 250)
+
+const handleSearch = async (query: string) => {
+	searchLoading.value = true
+	await throttledSearch(query)
+}
+
+defineExpose({
+	selectedProject,
+})
+</script>
diff --git a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
index 5c1140f996..92021126fe 100644
--- a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
@@ -95,7 +95,7 @@ interface Option {
 }
 
 type Divider = {
-	divider: true
+	divider?: boolean
 	shown?: boolean
 }
 
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 14d072b4d0..5ed52f9a3b 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -1,3 +1,11 @@
+import {
+	DownloadIcon,
+	HeartIcon,
+	SettingsIcon,
+	ShareIcon,
+	TrashIcon,
+	UserIcon,
+} from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import Combobox from '../../components/base/Combobox.vue'
@@ -44,3 +52,61 @@ export const Disabled: Story = {
 		disabled: true,
 	},
 }
+
+export const IconSlot: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ type: 'divider' },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+			{ type: 'divider' },
+			{ value: 'delete', label: 'Delete', icon: TrashIcon, disabled: true },
+		],
+		placeholder: 'Select an action',
+		listbox: false,
+	},
+}
+
+export const IconSlotSearchable: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+			{ value: 'delete', label: 'Delete', icon: TrashIcon },
+		],
+		placeholder: 'Select an action',
+		searchable: true,
+		searchPlaceholder: 'Search actions...',
+	},
+}
+
+export const WithSelectedOption: Story = {
+	args: {
+		options: [
+			{ value: '1', label: 'Option 1' },
+			{ value: '2', label: 'Option 2' },
+			{ value: '3', label: 'Option 3' },
+		],
+		modelValue: '2',
+	},
+}
+
+export const WithSelectedOptionAndIcon: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+		],
+		modelValue: 'favorite',
+		showIconInSelected: true,
+	},
+}
diff --git a/packages/ui/src/stories/base/Toggle.stories.ts b/packages/ui/src/stories/base/Toggle.stories.ts
index 8ed45b3695..14a02d2c7a 100644
--- a/packages/ui/src/stories/base/Toggle.stories.ts
+++ b/packages/ui/src/stories/base/Toggle.stories.ts
@@ -13,6 +13,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	args: {
 		modelValue: false,
+		small: false,
 	},
 }
 
@@ -29,11 +30,26 @@ export const Disabled: Story = {
 	},
 }
 
+export const Small: Story = {
+	args: {
+		modelValue: false,
+		small: true,
+	},
+}
+
+export const SmallChecked: Story = {
+	args: {
+		modelValue: true,
+		small: true,
+	},
+}
+
 export const AllStates: Story = {
 	render: () => ({
 		components: { Toggle },
 		template: /*html*/ `
 			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<span style="font-weight: 600;">Default Size</span>
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" /> Off
 				</div>
@@ -43,6 +59,16 @@ export const AllStates: Story = {
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" :disabled="true" /> Disabled
 				</div>
+				<span style="font-weight: 600; margin-top: 1rem;">Small Size</span>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :small="true" /> Off
+				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="true" :small="true" /> On
+				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :small="true" :disabled="true" /> Disabled
+				</div>
 			</div>
 		`,
 	}),
diff --git a/packages/ui/src/stories/instances/ContentCardItem.stories.ts b/packages/ui/src/stories/instances/ContentCardItem.stories.ts
new file mode 100644
index 0000000000..cde5795643
--- /dev/null
+++ b/packages/ui/src/stories/instances/ContentCardItem.stories.ts
@@ -0,0 +1,894 @@
+import { EditIcon, EyeIcon, FolderOpenIcon, LinkIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { computed, ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ContentCardItem from '../../components/instances/ContentCardItem.vue'
+import type {
+	ContentCardProject,
+	ContentCardVersion,
+	ContentOwner,
+} from '../../components/instances/types'
+
+// Real project data from Modrinth API
+const sodiumProject: ContentCardProject = {
+	id: 'AANobbMI',
+	slug: 'sodium',
+	title: 'Sodium',
+	icon_url:
+		'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+}
+
+const modMenuProject: ContentCardProject = {
+	id: 'mOgUt4GM',
+	slug: 'modmenu',
+	title: 'Mod Menu',
+	icon_url: 'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+}
+
+const fabricApiProject: ContentCardProject = {
+	id: 'P7dR8mSH',
+	slug: 'fabric-api',
+	title: 'Fabric API',
+	icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+}
+
+// Version data
+const sodiumVersion: ContentCardVersion = {
+	id: '59wygFUQ',
+	version_number: 'mc1.21.11-0.8.2-fabric',
+	file_name: 'sodium-fabric-0.8.2+mc1.21.11.jar',
+}
+
+const modMenuVersion: ContentCardVersion = {
+	id: 'QuU0ciaR',
+	version_number: '16.0.0',
+	file_name: 'modmenu-16.0.0.jar',
+}
+
+const fabricApiVersion: ContentCardVersion = {
+	id: 'Lwa1Q6e4',
+	version_number: '0.141.3+26.1',
+	file_name: 'fabric-api-0.141.3+26.1.jar',
+}
+
+// Owner data
+const sodiumOwner: ContentOwner = {
+	id: 'DzLrfrbK',
+	name: 'IMS',
+	avatar_url: 'https://avatars3.githubusercontent.com/u/31803019?v=4',
+	type: 'user',
+}
+
+const fabricApiOwner: ContentOwner = {
+	id: 'BZoBsPo6',
+	name: 'FabricMC',
+	avatar_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+	type: 'organization',
+}
+
+const meta = {
+	title: 'Instances/ContentCardItem',
+	component: ContentCardItem,
+	parameters: {
+		layout: 'padded',
+	},
+	argTypes: {
+		project: {
+			control: 'object',
+			description: 'Project information (id, slug, title, icon_url)',
+		},
+		version: {
+			control: 'object',
+			description: 'Version information (id, version_number, file_name)',
+		},
+		owner: {
+			control: 'object',
+			description: 'Owner/author information',
+		},
+		enabled: {
+			control: 'boolean',
+			description: 'Toggle state - toggle hidden if undefined',
+		},
+		selected: {
+			control: false,
+			description:
+				'Selection state - checkbox hidden if undefined (use v-model:selected in render function)',
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Disables all interactions and grays out the card',
+		},
+		overflowOptions: {
+			control: 'object',
+			description: 'Options for the overflow menu',
+		},
+	},
+} satisfies Meta<typeof ContentCardItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// All Types Overview
+// ============================================
+
+export const AllTypes: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const toggleOn = ref(true)
+			const toggleOff = ref(false)
+
+			const cards = [
+				{
+					label: 'Full featured (all actions)',
+					project: sodiumProject,
+					version: sodiumVersion,
+					owner: sodiumOwner,
+					enabled: toggleOn,
+					hasUpdate: true,
+					hasDelete: true,
+					hasOverflow: true,
+				},
+				{
+					label: 'With toggle only',
+					project: modMenuProject,
+					version: modMenuVersion,
+					owner: { id: 'u2', name: 'Prospector', type: 'user' },
+					enabled: toggleOn,
+				},
+				{
+					label: 'With update available',
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					hasUpdate: true,
+				},
+				{
+					label: 'Minimal (project only)',
+					project: sodiumProject,
+				},
+				{
+					label: 'With version info only',
+					project: modMenuProject,
+					version: modMenuVersion,
+				},
+				{
+					label: 'With owner only',
+					project: fabricApiProject,
+					owner: fabricApiOwner,
+				},
+				{
+					label: 'Disabled state',
+					project: sodiumProject,
+					version: sodiumVersion,
+					owner: sodiumOwner,
+					enabled: toggleOff,
+					disabled: true,
+				},
+				{
+					label: 'Delete button only',
+					project: modMenuProject,
+					version: modMenuVersion,
+					hasDelete: true,
+				},
+				{
+					label: 'Toggle off',
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					enabled: toggleOff,
+				},
+			]
+
+			return { cards }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<template v-for="card in cards" :key="card.label">
+					<h3 class="text-sm font-medium text-secondary">{{ card.label }}</h3>
+					<ContentCardItem
+						:project="card.project"
+						:version="card.version"
+						:owner="card.owner"
+						:enabled="card.enabled?.value"
+						:disabled="card.disabled"
+						@update="card.hasUpdate ? () => {} : undefined"
+						@delete="card.hasDelete ? () => {} : undefined"
+						@update:enabled="card.enabled ? (v) => card.enabled.value = v : undefined"
+						:overflow-options="card.hasOverflow ? [
+							{ id: 'view', action: () => {} },
+							{ divider: true },
+							{ id: 'remove', action: () => {}, color: 'red' },
+						] : undefined"
+					>
+						<template #view>View on Modrinth</template>
+						<template #remove>Remove</template>
+					</ContentCardItem>
+				</template>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Basic Stories
+// ============================================
+
+export const Default: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		enabled: true,
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View clicked') },
+			{ id: 'edit', action: () => console.log('Edit clicked') },
+			{ divider: true },
+			{ id: 'remove', action: () => console.log('Remove clicked'), color: 'red' },
+		],
+		onDelete: fn(),
+		onUpdate: fn(),
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const MinimalProjectOnly: Story = {
+	args: {
+		project: sodiumProject,
+	},
+}
+
+export const WithVersion: Story = {
+	args: {
+		project: modMenuProject,
+		version: modMenuVersion,
+	},
+}
+
+export const WithUserOwner: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+	},
+}
+
+export const WithOrganizationOwner: Story = {
+	args: {
+		project: fabricApiProject,
+		version: fabricApiVersion,
+		owner: fabricApiOwner,
+	},
+}
+
+export const WithToggle: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		enabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const ToggleDisabled: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		enabled: false,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Action Button Stories
+// ============================================
+
+export const WithDeleteButton: Story = {
+	args: {
+		project: modMenuProject,
+		version: modMenuVersion,
+		owner: sodiumOwner,
+		onDelete: fn(),
+	},
+}
+
+export const WithUpdateButton: Story = {
+	args: {
+		project: fabricApiProject,
+		version: fabricApiVersion,
+		owner: fabricApiOwner,
+		onUpdate: fn(),
+	},
+}
+
+export const WithAllActions: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		enabled: true,
+		onDelete: fn(),
+		onUpdate: fn(),
+		'onUpdate:enabled': fn(),
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'openFolder', action: () => console.log('Open folder') },
+			{ divider: true },
+			{ id: 'copyLink', action: () => console.log('Copy link') },
+		],
+	},
+}
+
+// ============================================
+// State Stories
+// ============================================
+
+export const Disabled: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		enabled: false,
+		disabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const LongProjectName: Story = {
+	args: {
+		project: {
+			id: 'test123',
+			slug: 'very-long-project-name',
+			title: '[EMF] Entity Model Features - The Ultimate Entity Rendering Mod',
+			icon_url: sodiumProject.icon_url,
+		},
+		version: {
+			id: 'v1',
+			version_number: '2.4.1',
+			file_name: 'Entity_model_features_fabric_1.21.1-2.4.1.jar',
+		},
+		owner: {
+			id: 'u1',
+			name: 'Traben',
+			type: 'user',
+		},
+		enabled: true,
+		onDelete: fn(),
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Overflow Menu Stories
+// ============================================
+
+export const WithOverflowMenu: Story = {
+	render: (args) => ({
+		components: { ContentCardItem, EditIcon, EyeIcon, FolderOpenIcon, LinkIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentCardItem v-bind="args">
+				<template #view>
+					<EyeIcon class="size-5" /> View on Modrinth
+				</template>
+				<template #edit>
+					<EditIcon class="size-5" /> Edit settings
+				</template>
+				<template #openFolder>
+					<FolderOpenIcon class="size-5" /> Open folder
+				</template>
+				<template #copyLink>
+					<LinkIcon class="size-5" /> Copy link
+				</template>
+			</ContentCardItem>
+		`,
+	}),
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: sodiumOwner,
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'edit', action: () => console.log('Edit') },
+			{ id: 'openFolder', action: () => console.log('Open folder') },
+			{ divider: true },
+			{ id: 'copyLink', action: () => console.log('Copy link') },
+		],
+	},
+}
+
+// ============================================
+// Slot Stories
+// ============================================
+
+export const WithAdditionalButtons: Story = {
+	render: (args) => ({
+		components: { ContentCardItem, ButtonStyled, EyeIcon, FolderOpenIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentCardItem v-bind="args">
+				<template #additionalButtonsLeft>
+					<ButtonStyled v-tooltip="'View on Modrinth'" circular type="transparent">
+						<button>
+							<EyeIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+				</template>
+				<template #additionalButtonsRight>
+					<ButtonStyled v-tooltip="'Open folder'" circular type="transparent">
+						<button>
+							<FolderOpenIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+				</template>
+			</ContentCardItem>
+		`,
+	}),
+	args: {
+		project: modMenuProject,
+		version: modMenuVersion,
+		enabled: true,
+		onDelete: fn(),
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Interactive Stories
+// ============================================
+
+export const InteractiveToggle: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const enabled = ref(true)
+			return {
+				enabled,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardItem
+					:project="project"
+					:version="version"
+					:owner="owner"
+					v-model:enabled="enabled"
+				/>
+				<div class="text-sm text-secondary">
+					Mod is currently: <strong>{{ enabled ? 'Enabled' : 'Disabled' }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// List Stories
+// ============================================
+
+export const ModList: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const mods = ref([
+				{ project: sodiumProject, version: sodiumVersion, owner: sodiumOwner, enabled: true },
+				{
+					project: modMenuProject,
+					version: modMenuVersion,
+					owner: { id: 'u2', name: 'Prospector', type: 'user' as const },
+					enabled: true,
+				},
+				{
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					enabled: true,
+				},
+			])
+
+			const handleDelete = (index: number) => {
+				mods.value.splice(index, 1)
+			}
+
+			const handleToggle = (index: number, value: boolean) => {
+				mods.value[index].enabled = value
+			}
+
+			return { mods, handleDelete, handleToggle }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-3">
+				<ContentCardItem
+					v-for="(mod, index) in mods"
+					:key="mod.project.id"
+					:project="mod.project"
+					:version="mod.version"
+					:owner="mod.owner"
+					:enabled="mod.enabled"
+					@update:enabled="(val) => handleToggle(index, val)"
+					@delete="() => handleDelete(index)"
+					:overflow-options="[
+						{ id: 'view', action: () => console.log('View', mod.project.slug) },
+						{ divider: true },
+						{ id: 'remove', action: () => handleDelete(index), color: 'red' },
+					]"
+				>
+					<template #view>View on Modrinth</template>
+					<template #remove>Remove from instance</template>
+				</ContentCardItem>
+			</div>
+		`,
+	}),
+}
+
+export const MixedStates: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			return {
+				sodiumProject,
+				sodiumVersion,
+				sodiumOwner,
+				modMenuProject,
+				modMenuVersion,
+				fabricApiProject,
+				fabricApiVersion,
+				fabricApiOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-3">
+				<!-- Enabled with update available -->
+				<ContentCardItem
+					:project="sodiumProject"
+					:version="sodiumVersion"
+					:owner="sodiumOwner"
+					:enabled="true"
+					@update="() => console.log('Update sodium')"
+					@update:enabled="() => {}"
+					@delete="() => {}"
+				/>
+
+				<!-- Disabled mod -->
+				<ContentCardItem
+					:project="modMenuProject"
+					:version="modMenuVersion"
+					:enabled="false"
+					:disabled="true"
+					@update:enabled="() => {}"
+				/>
+
+				<!-- No toggle, just view -->
+				<ContentCardItem
+					:project="fabricApiProject"
+					:version="fabricApiVersion"
+					:owner="fabricApiOwner"
+				/>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Responsive Stories
+// ============================================
+
+export const ResponsiveView: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			return {
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-6">
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Desktop (version info visible)</h3>
+					<div class="w-full">
+						<ContentCardItem
+							:project="project"
+							:version="version"
+							:owner="owner"
+							:enabled="true"
+							@update:enabled="() => {}"
+							@delete="() => {}"
+							@update="() => {}"
+						/>
+					</div>
+				</div>
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Mobile (&lt;768px - version info hidden)</h3>
+					<div class="w-[360px]">
+						<ContentCardItem
+							:project="project"
+							:version="version"
+							:owner="owner"
+							:enabled="true"
+							@update:enabled="() => {}"
+							@delete="() => {}"
+						/>
+					</div>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Edge Cases
+// ============================================
+
+export const NoIcon: Story = {
+	args: {
+		project: {
+			id: 'test',
+			slug: 'no-icon-mod',
+			title: 'Mod Without Icon',
+			icon_url: undefined,
+		},
+		version: {
+			id: 'v1',
+			version_number: '1.0.0',
+			file_name: 'no-icon-mod-1.0.0.jar',
+		},
+		enabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+export const NoOwnerAvatar: Story = {
+	args: {
+		project: sodiumProject,
+		version: sodiumVersion,
+		owner: {
+			id: 'u1',
+			name: 'Anonymous',
+			avatar_url: undefined,
+			type: 'user',
+		},
+		enabled: true,
+		'onUpdate:enabled': fn(),
+	},
+}
+
+// ============================================
+// Selection Stories
+// ============================================
+
+export const WithSelection: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(false)
+			return {
+				selected,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardItem
+					:project="project"
+					:version="version"
+					:owner="owner"
+					:enabled="true"
+					v-model:selected="selected"
+					@update:enabled="() => {}"
+				/>
+				<div class="text-sm text-secondary">
+					Selected: <strong>{{ selected }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const SelectionSelected: Story = {
+	args: {
+		project: sodiumProject,
+	},
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(true)
+			return {
+				selected,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<ContentCardItem
+				:project="project"
+				:version="version"
+				:owner="owner"
+				v-model:selected="selected"
+			/>
+		`,
+	}),
+}
+
+export const SelectionWithAllActions: Story = {
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(false)
+			const enabled = ref(true)
+			return {
+				selected,
+				enabled,
+				project: sodiumProject,
+				version: sodiumVersion,
+				owner: sodiumOwner,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardItem
+					:project="project"
+					:version="version"
+					:owner="owner"
+					v-model:selected="selected"
+					v-model:enabled="enabled"
+					@update="() => console.log('Update clicked')"
+					@delete="() => console.log('Delete clicked')"
+					:overflow-options="[
+						{ id: 'view', action: () => console.log('View') },
+						{ divider: true },
+						{ id: 'remove', action: () => console.log('Remove'), color: 'red' },
+					]"
+				>
+					<template #view>View on Modrinth</template>
+					<template #remove>Remove</template>
+				</ContentCardItem>
+				<div class="text-sm text-secondary">
+					Selected: <strong>{{ selected }}</strong> | Enabled: <strong>{{ enabled }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const SelectableModList: Story = {
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const mods = ref([
+				{
+					project: sodiumProject,
+					version: sodiumVersion,
+					owner: sodiumOwner,
+					enabled: true,
+					selected: false,
+				},
+				{
+					project: modMenuProject,
+					version: modMenuVersion,
+					owner: { id: 'u2', name: 'Prospector', type: 'user' as const },
+					enabled: true,
+					selected: true,
+				},
+				{
+					project: fabricApiProject,
+					version: fabricApiVersion,
+					owner: fabricApiOwner,
+					enabled: false,
+					selected: false,
+				},
+			])
+
+			const selectedCount = computed(() => mods.value.filter((m) => m.selected).length)
+
+			const toggleAll = () => {
+				const allSelected = mods.value.every((m) => m.selected)
+				mods.value.forEach((m) => (m.selected = !allSelected))
+			}
+
+			return { mods, selectedCount, toggleAll }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<div class="flex items-center justify-between">
+					<button
+						class="text-sm text-brand hover:underline"
+						@click="toggleAll"
+					>
+						Toggle all
+					</button>
+					<span class="text-sm text-secondary">{{ selectedCount }} selected</span>
+				</div>
+				<div class="flex flex-col gap-3">
+					<ContentCardItem
+						v-for="mod in mods"
+						:key="mod.project.id"
+						:project="mod.project"
+						:version="mod.version"
+						:owner="mod.owner"
+						:enabled="mod.enabled"
+						:disabled="!mod.enabled"
+						v-model:selected="mod.selected"
+						@update:enabled="(val) => mod.enabled = val"
+						@delete="() => console.log('Delete', mod.project.slug)"
+					/>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const SelectionComparisonWithAndWithout: Story = {
+	render: () => ({
+		components: { ContentCardItem },
+		setup() {
+			const selected = ref(false)
+			return {
+				selected,
+				sodiumProject,
+				sodiumVersion,
+				sodiumOwner,
+				modMenuProject,
+				modMenuVersion,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-6">
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">With selection (checkbox visible)</h3>
+					<ContentCardItem
+						:project="sodiumProject"
+						:version="sodiumVersion"
+						:owner="sodiumOwner"
+						:enabled="true"
+						v-model:selected="selected"
+						@update:enabled="() => {}"
+						@delete="() => {}"
+					/>
+				</div>
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Without selection (no checkbox)</h3>
+					<ContentCardItem
+						:project="modMenuProject"
+						:version="modMenuVersion"
+						:enabled="true"
+						@update:enabled="() => {}"
+						@delete="() => {}"
+					/>
+				</div>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/instances/ContentCardTable.stories.ts b/packages/ui/src/stories/instances/ContentCardTable.stories.ts
new file mode 100644
index 0000000000..08de10bcd9
--- /dev/null
+++ b/packages/ui/src/stories/instances/ContentCardTable.stories.ts
@@ -0,0 +1,684 @@
+import { DownloadIcon, EyeIcon, FolderOpenIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ContentCardTable from '../../components/instances/ContentCardTable.vue'
+import type { ContentCardTableItem } from '../../components/instances/types'
+
+// Sample data
+const sodiumItem: ContentCardTableItem = {
+	id: 'AANobbMI',
+	project: {
+		id: 'AANobbMI',
+		slug: 'sodium',
+		title: 'Sodium',
+		icon_url:
+			'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+	},
+	version: {
+		id: '59wygFUQ',
+		version_number: 'mc1.21.11-0.8.2-fabric',
+		file_name: 'sodium-fabric-0.8.2+mc1.21.11.jar',
+	},
+	owner: {
+		id: 'DzLrfrbK',
+		name: 'IMS',
+		avatar_url: 'https://avatars3.githubusercontent.com/u/31803019?v=4',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const modMenuItem: ContentCardTableItem = {
+	id: 'mOgUt4GM',
+	project: {
+		id: 'mOgUt4GM',
+		slug: 'modmenu',
+		title: 'Mod Menu',
+		icon_url: 'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+	},
+	version: {
+		id: 'QuU0ciaR',
+		version_number: '16.0.0',
+		file_name: 'modmenu-16.0.0.jar',
+	},
+	owner: {
+		id: 'u2',
+		name: 'Prospector',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const fabricApiItem: ContentCardTableItem = {
+	id: 'P7dR8mSH',
+	project: {
+		id: 'P7dR8mSH',
+		slug: 'fabric-api',
+		title: 'Fabric API',
+		icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+	},
+	version: {
+		id: 'Lwa1Q6e4',
+		version_number: '0.141.3+26.1',
+		file_name: 'fabric-api-0.141.3+26.1.jar',
+	},
+	owner: {
+		id: 'BZoBsPo6',
+		name: 'FabricMC',
+		avatar_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+		type: 'organization',
+	},
+	enabled: false,
+}
+
+const emfItem: ContentCardTableItem = {
+	id: 'emf123',
+	project: {
+		id: 'emf123',
+		slug: 'entity-model-features',
+		title: '[EMF] Entity Model Features',
+		icon_url:
+			'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+	},
+	version: {
+		id: 'v1',
+		version_number: '2.4.1',
+		file_name: 'Entity_model_features_fabric_1.21.1-2.4.1.jar',
+	},
+	owner: {
+		id: 'u1',
+		name: 'Traben',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const etfItem: ContentCardTableItem = {
+	id: 'etf456',
+	project: {
+		id: 'etf456',
+		slug: 'entity-texture-features',
+		title: '[ETF] Entity Texture Features',
+		icon_url: 'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+	},
+	version: {
+		id: 'v2',
+		version_number: '6.2.9',
+		file_name: 'Entity_texture_features_fabric_1.21.1-6.2.9.jar',
+	},
+	owner: {
+		id: 'u1',
+		name: 'Traben',
+		type: 'user',
+	},
+	enabled: true,
+}
+
+const importedModItem: ContentCardTableItem = {
+	id: 'imported123',
+	project: {
+		id: 'imported123',
+		slug: 'import-mod',
+		title: 'Import mod',
+		icon_url: undefined,
+	},
+	version: {
+		id: 'v3',
+		version_number: 'Unknown',
+		file_name: 'Entity_texture_features_fabric_1.21.1-6.2.9.jar',
+	},
+	enabled: false,
+}
+
+const sampleItems: ContentCardTableItem[] = [sodiumItem, modMenuItem, fabricApiItem]
+
+const figmaDesignItems: ContentCardTableItem[] = [emfItem, etfItem, importedModItem]
+
+const meta = {
+	title: 'Instances/ContentCardTable',
+	component: ContentCardTable,
+	parameters: {
+		layout: 'padded',
+	},
+	argTypes: {
+		items: {
+			control: 'object',
+			description: 'Array of items to display in the table',
+		},
+		showSelection: {
+			control: 'boolean',
+			description: 'Show checkboxes for selection',
+		},
+		sortable: {
+			control: 'boolean',
+			description: 'Enable column sorting',
+		},
+		sortBy: {
+			control: 'select',
+			options: ['project', 'version', undefined],
+			description: 'Current sort column',
+		},
+		sortDirection: {
+			control: 'select',
+			options: ['asc', 'desc'],
+			description: 'Sort direction',
+		},
+	},
+} satisfies Meta<typeof ContentCardTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// Basic Stories
+// ============================================
+
+export const Default: Story = {
+	args: {
+		items: sampleItems,
+	},
+}
+
+export const FigmaDesign: Story = {
+	args: {
+		items: figmaDesignItems,
+		showSelection: true,
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const selectedIds = ref<string[]>([emfItem.id, etfItem.id])
+			return { args, selectedIds }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				v-bind="args"
+				v-model:selected-ids="selectedIds"
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			/>
+		`,
+	}),
+}
+
+export const WithSelection: Story = {
+	args: {
+		items: sampleItems,
+		showSelection: true,
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const selectedIds = ref<string[]>([])
+			return { args, selectedIds }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardTable
+					v-bind="args"
+					v-model:selected-ids="selectedIds"
+					@update:enabled="(id, val) => console.log('Toggle', id, val)"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+				<div class="text-sm text-secondary">
+					Selected: <strong>{{ selectedIds.length }}</strong> items
+					<span v-if="selectedIds.length">({{ selectedIds.join(', ') }})</span>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const WithSorting: Story = {
+	args: {
+		items: sampleItems,
+		sortable: true,
+		sortBy: 'project',
+		sortDirection: 'asc',
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const sortBy = ref<'project' | 'version' | undefined>(args.sortBy)
+			const sortDirection = ref<'asc' | 'desc'>(args.sortDirection || 'asc')
+
+			const handleSort = (column: 'project' | 'version', direction: 'asc' | 'desc') => {
+				sortBy.value = column
+				sortDirection.value = direction
+				console.log('Sort:', column, direction)
+			}
+
+			return { args, sortBy, sortDirection, handleSort }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardTable
+					:items="args.items"
+					:sortable="args.sortable"
+					:sort-by="sortBy"
+					:sort-direction="sortDirection"
+					@sort="handleSort"
+				/>
+				<div class="text-sm text-secondary">
+					Sorted by: <strong>{{ sortBy || 'none' }}</strong> ({{ sortDirection }})
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const WithSelectionAndSorting: Story = {
+	args: {
+		items: sampleItems,
+		showSelection: true,
+		sortable: true,
+		sortBy: 'project',
+		sortDirection: 'asc',
+	},
+	render: (args) => ({
+		components: { ContentCardTable },
+		setup() {
+			const selectedIds = ref<string[]>([])
+			const sortBy = ref<'project' | 'version' | undefined>(args.sortBy)
+			const sortDirection = ref<'asc' | 'desc'>(args.sortDirection || 'asc')
+
+			const handleSort = (column: 'project' | 'version', direction: 'asc' | 'desc') => {
+				sortBy.value = column
+				sortDirection.value = direction
+			}
+
+			return { args, selectedIds, sortBy, sortDirection, handleSort }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				:items="args.items"
+				:show-selection="args.showSelection"
+				:sortable="args.sortable"
+				:sort-by="sortBy"
+				:sort-direction="sortDirection"
+				v-model:selected-ids="selectedIds"
+				@sort="handleSort"
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			/>
+		`,
+	}),
+}
+
+// ============================================
+// Action Stories
+// ============================================
+
+export const WithActions: Story = {
+	args: {
+		items: sampleItems,
+		showSelection: true,
+		'onUpdate:enabled': fn(),
+		onDelete: fn(),
+		onUpdate: fn(),
+	},
+}
+
+export const InteractiveActions: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			const items = ref<ContentCardTableItem[]>([
+				{ ...sodiumItem, enabled: true },
+				{ ...modMenuItem, enabled: true },
+				{ ...fabricApiItem, enabled: false },
+			])
+			const selectedIds = ref<string[]>([])
+
+			const handleToggle = (id: string, value: boolean) => {
+				const item = items.value.find((i) => i.id === id)
+				if (item) item.enabled = value
+			}
+
+			const handleDelete = (id: string) => {
+				items.value = items.value.filter((i) => i.id !== id)
+				selectedIds.value = selectedIds.value.filter((i) => i !== id)
+			}
+
+			const handleUpdate = (id: string) => {
+				console.log('Update available clicked for:', id)
+			}
+
+			return { items, selectedIds, handleToggle, handleDelete, handleUpdate }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentCardTable
+					:items="items"
+					show-selection
+					v-model:selected-ids="selectedIds"
+					@update:enabled="handleToggle"
+					@delete="handleDelete"
+					@update="handleUpdate"
+				/>
+				<div class="flex gap-4 text-sm text-secondary">
+					<span>Items: <strong>{{ items.length }}</strong></span>
+					<span>Selected: <strong>{{ selectedIds.length }}</strong></span>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Slot Stories
+// ============================================
+
+export const WithCustomItemButtons: Story = {
+	render: () => ({
+		components: { ContentCardTable, ButtonStyled, EyeIcon, FolderOpenIcon, DownloadIcon },
+		setup() {
+			return { items: sampleItems }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				:items="items"
+				show-selection
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			>
+				<template #itemButtonsLeft="{ item }">
+					<ButtonStyled v-tooltip="'Download'" circular type="transparent" color="green" color-fill="text">
+						<button @click="console.log('Download', item.id)">
+							<DownloadIcon class="size-5" />
+						</button>
+					</ButtonStyled>
+				</template>
+				<template #itemButtonsRight="{ item }">
+					<ButtonStyled v-tooltip="'View on Modrinth'" circular type="transparent">
+						<button @click="console.log('View', item.id)">
+							<EyeIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-tooltip="'Open folder'" circular type="transparent">
+						<button @click="console.log('Open folder', item.id)">
+							<FolderOpenIcon class="size-5 text-secondary" />
+						</button>
+					</ButtonStyled>
+				</template>
+			</ContentCardTable>
+		`,
+	}),
+}
+
+export const WithEmptyState: Story = {
+	args: {
+		items: [],
+	},
+}
+
+export const WithCustomEmptyState: Story = {
+	render: () => ({
+		components: { ContentCardTable, ButtonStyled },
+		template: /*html*/ `
+			<ContentCardTable :items="[]">
+				<template #empty>
+					<div class="flex flex-col items-center gap-4 py-8">
+						<span class="text-lg text-secondary">No mods installed</span>
+						<ButtonStyled color="green">
+							<button>Browse mods</button>
+						</ButtonStyled>
+					</div>
+				</template>
+			</ContentCardTable>
+		`,
+	}),
+}
+
+// ============================================
+// State Stories
+// ============================================
+
+export const PerItemDisabled: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			// Simulates items being modified (e.g., toggled, deleted)
+			const items: ContentCardTableItem[] = [
+				{ ...sodiumItem, enabled: true },
+				{ ...modMenuItem, enabled: true, disabled: true }, // Being modified
+				{ ...fabricApiItem, enabled: false, disabled: true }, // Being modified
+			]
+			return { items }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<p class="text-sm text-secondary">
+					Items with <code>disabled: true</code> have all interactions disabled (simulating items being modified).
+				</p>
+				<ContentCardTable
+					:items="items"
+					show-selection
+					@update:enabled="(id, val) => console.log('Toggle', id, val)"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const SingleItem: Story = {
+	args: {
+		items: [sodiumItem],
+		showSelection: true,
+	},
+}
+
+export const ManyItems: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			const items = ref<ContentCardTableItem[]>(
+				Array.from({ length: 2000 }, (_, i) => ({
+					...sodiumItem,
+					id: `item-${i}`,
+					project: {
+						...sodiumItem.project,
+						title: `Mod ${i + 1}`,
+					},
+					version: {
+						...sodiumItem.version!,
+						version_number: `1.0.${i}`,
+					},
+					enabled: i % 3 !== 0,
+				})),
+			)
+			const selectedIds = ref<string[]>([])
+			const virtualized = ref(true)
+			const tableRef = ref<InstanceType<typeof ContentCardTable> | null>(null)
+
+			// Perf monitoring
+			const domNodes = ref(0)
+			let animationId: number
+
+			const updatePerf = () => {
+				// Count ContentCardItem elements (they have h-20 class)
+				if (tableRef.value?.$el) {
+					const container = tableRef.value.$el as HTMLElement
+					domNodes.value = container.querySelectorAll('.h-20').length
+				}
+				animationId = requestAnimationFrame(updatePerf)
+			}
+
+			onMounted(() => {
+				animationId = requestAnimationFrame(updatePerf)
+			})
+
+			onUnmounted(() => {
+				cancelAnimationFrame(animationId)
+			})
+
+			return {
+				items,
+				selectedIds,
+				virtualized,
+				tableRef,
+				domNodes,
+			}
+		},
+		template: /*html*/ `
+			<div>
+				<!-- Toggle -->
+				<div class="sticky top-0 z-10 mb-4 flex items-center gap-3 rounded-lg bg-surface-2 p-3">
+					<label class="flex cursor-pointer items-center gap-2">
+						<input
+							type="checkbox"
+							v-model="virtualized"
+							class="h-4 w-4 rounded"
+						/>
+						<span class="font-medium text-contrast">Enable Virtualization</span>
+					</label>
+				</div>
+
+				<!-- Perf Panel -->
+				<div class="fixed bottom-4 right-4 z-50 rounded-lg bg-surface-1 p-4 shadow-lg border border-surface-3 font-mono text-sm">
+					<div class="mb-2 font-semibold text-contrast">Performance</div>
+					<div class="grid grid-cols-2 gap-x-4 gap-y-1">
+						<span class="text-secondary">Total Items:</span>
+						<span class="text-contrast">{{ items.length }}</span>
+						<span class="text-secondary">DOM Nodes:</span>
+						<span :class="domNodes > 100 ? 'text-red-500' : 'text-green-500'">{{ domNodes }}</span>
+						<span class="text-secondary">Mode:</span>
+						<span :class="virtualized ? 'text-green-500' : 'text-red-500'">{{ virtualized ? 'Virtual' : 'Full DOM' }}</span>
+					</div>
+				</div>
+
+				<ContentCardTable
+					ref="tableRef"
+					:items="items"
+					:virtualized="virtualized"
+					show-selection
+					v-model:selected-ids="selectedIds"
+					@update:enabled="(id, val) => console.log('Toggle', id, val)"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// With Overflow Menu
+// ============================================
+
+export const WithOverflowMenu: Story = {
+	render: () => ({
+		components: { ContentCardTable },
+		setup() {
+			const items: ContentCardTableItem[] = [
+				{
+					...sodiumItem,
+					overflowOptions: [
+						{ id: 'view', action: () => console.log('View sodium') },
+						{ id: 'folder', action: () => console.log('Open folder') },
+						{ divider: true },
+						{ id: 'remove', action: () => console.log('Remove'), color: 'red' as const },
+					],
+				},
+				{
+					...modMenuItem,
+					overflowOptions: [
+						{ id: 'view', action: () => console.log('View modmenu') },
+						{ divider: true },
+						{ id: 'remove', action: () => console.log('Remove'), color: 'red' as const },
+					],
+				},
+			]
+
+			return { items }
+		},
+		template: /*html*/ `
+			<ContentCardTable
+				:items="items"
+				show-selection
+				@update:enabled="(id, val) => console.log('Toggle', id, val)"
+				@delete="(id) => console.log('Delete', id)"
+			>
+				<template #view>View on Modrinth</template>
+				<template #folder>Open folder</template>
+				<template #remove>Remove</template>
+			</ContentCardTable>
+		`,
+	}),
+}
+
+// ============================================
+// Bulk Actions Demo
+// ============================================
+
+export const BulkActionsDemo: Story = {
+	render: () => ({
+		components: { ContentCardTable, ButtonStyled },
+		setup() {
+			const items = ref<ContentCardTableItem[]>([
+				{ ...sodiumItem, enabled: true },
+				{ ...modMenuItem, enabled: true },
+				{ ...fabricApiItem, enabled: false },
+				{ ...emfItem, enabled: true },
+				{ ...etfItem, enabled: true },
+			])
+			const selectedIds = ref<string[]>([])
+
+			const enableSelected = () => {
+				items.value.forEach((item) => {
+					if (selectedIds.value.includes(item.id)) {
+						item.enabled = true
+					}
+				})
+			}
+
+			const disableSelected = () => {
+				items.value.forEach((item) => {
+					if (selectedIds.value.includes(item.id)) {
+						item.enabled = false
+					}
+				})
+			}
+
+			const deleteSelected = () => {
+				items.value = items.value.filter((item) => !selectedIds.value.includes(item.id))
+				selectedIds.value = []
+			}
+
+			const handleToggle = (id: string, value: boolean) => {
+				const item = items.value.find((i) => i.id === id)
+				if (item) item.enabled = value
+			}
+
+			return { items, selectedIds, enableSelected, disableSelected, deleteSelected, handleToggle }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<div class="flex items-center gap-2">
+					<span class="text-sm text-secondary">{{ selectedIds.length }} selected</span>
+					<template v-if="selectedIds.length > 0">
+						<ButtonStyled size="small" color="green">
+							<button @click="enableSelected">Enable</button>
+						</ButtonStyled>
+						<ButtonStyled size="small" type="transparent">
+							<button @click="disableSelected">Disable</button>
+						</ButtonStyled>
+						<ButtonStyled size="small" color="red">
+							<button @click="deleteSelected">Delete</button>
+						</ButtonStyled>
+					</template>
+				</div>
+				<ContentCardTable
+					:items="items"
+					show-selection
+					v-model:selected-ids="selectedIds"
+					@update:enabled="handleToggle"
+					@delete="(id) => console.log('Delete', id)"
+				/>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/instances/ContentModpackCard.stories.ts b/packages/ui/src/stories/instances/ContentModpackCard.stories.ts
new file mode 100644
index 0000000000..6760e03892
--- /dev/null
+++ b/packages/ui/src/stories/instances/ContentModpackCard.stories.ts
@@ -0,0 +1,633 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { ref } from 'vue'
+
+import ContentCardItem from '../../components/instances/ContentCardItem.vue'
+import ContentModpackCard from '../../components/instances/ContentModpackCard.vue'
+import type {
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+	ContentOwner,
+} from '../../components/instances/types'
+import NewModal from '../../components/modal/NewModal.vue'
+
+// Real project data from Modrinth API
+const fabulouslyOptimizedProject: ContentModpackCardProject = {
+	id: '1KVo5zza',
+	slug: 'fabulously-optimized',
+	title: 'Fabulously Optimized',
+	icon_url:
+		'https://cdn.modrinth.com/data/1KVo5zza/9f1ded4949c2a9db5ca382d3bcc912c7245486b4_96.webp',
+	description:
+		'Beautiful graphics, speedy performance and familiar features in a simple package. 1.21.11 beta!',
+	downloads: 8708191,
+	followers: 3762,
+}
+
+const cobblemonProject: ContentModpackCardProject = {
+	id: '5FFgwNNP',
+	slug: 'cobblemon-fabric',
+	title: 'Cobblemon Official Modpack [Fabric]',
+	icon_url: 'https://cdn.modrinth.com/data/5FFgwNNP/e7f9ee2e9d361623847853fe2ddce42f519ee64f.png',
+	description: 'The official modpack of the Cobblemon mod, for Fabric!',
+	downloads: 4940845,
+	followers: 2051,
+}
+
+const simplyOptimizedProject: ContentModpackCardProject = {
+	id: 'BYfVnHa7',
+	slug: 'sop',
+	title: 'Simply Optimized',
+	icon_url: 'https://cdn.modrinth.com/data/BYfVnHa7/845e93223da7e8d1ed1a33364b5bdb4c316ac518.png',
+	description:
+		'The leading, well-researched optimization modpack with a focus on pure performance.',
+	downloads: 2903242,
+	followers: 1387,
+}
+
+// Version data from Modrinth API
+const fabulouslyOptimizedVersion: ContentModpackCardVersion = {
+	id: 'YEEXo8mO',
+	version_number: '1.12.1',
+	date_published: '2022-02-10T06:53:28.379507Z',
+}
+
+const cobblemonVersion: ContentModpackCardVersion = {
+	id: 'bpaivauC',
+	version_number: '1.5.2',
+	date_published: '2024-05-27T07:12:36.043005Z',
+}
+
+// Owner data from Modrinth API
+const userOwner: ContentOwner = {
+	id: '2avTeeAE',
+	name: 'robotkoer',
+	avatar_url: 'https://cdn.modrinth.com/user/2avTeeAE/icon.png',
+	type: 'user',
+}
+
+const cobblemonOwner: ContentOwner = {
+	id: 'AEFONbAM',
+	name: 'Reisen',
+	avatar_url:
+		'https://cdn.modrinth.com/user/AEFONbAM/9e97453507a8245981d5cd825280f23be44f15ac.jpeg',
+	type: 'user',
+}
+
+// Categories (using Labrinth.Tags.v2.Category structure with optional action)
+const optimizationCategories: ContentModpackCardCategory[] = [
+	{ name: 'Fabric', icon: 'fabric', project_type: 'modpack', header: 'loaders' },
+	{ name: 'Lightweight', icon: 'lightweight', project_type: 'modpack', header: 'categories' },
+	{ name: 'Multiplayer', icon: 'multiplayer', project_type: 'modpack', header: 'categories' },
+	{ name: 'Optimization', icon: 'optimization', project_type: 'modpack', header: 'categories' },
+]
+
+const cobblemonCategories: ContentModpackCardCategory[] = [
+	{ name: 'Adventure', icon: 'adventure', project_type: 'modpack', header: 'categories' },
+	{ name: 'Fabric', icon: 'fabric', project_type: 'modpack', header: 'loaders' },
+	{ name: 'Lightweight', icon: 'lightweight', project_type: 'modpack', header: 'categories' },
+	{ name: 'Multiplayer', icon: 'multiplayer', project_type: 'modpack', header: 'categories' },
+]
+
+const meta = {
+	title: 'Instances/ContentModpackCard',
+	component: ContentModpackCard,
+	parameters: {
+		layout: 'padded',
+	},
+	argTypes: {
+		project: {
+			control: 'object',
+			description:
+				'Project information (id, slug, title, icon_url, description, downloads, followers)',
+		},
+		version: {
+			control: 'object',
+			description: 'Version information (id, version_number, date_published)',
+		},
+		owner: {
+			control: 'object',
+			description: 'Owner/author information (user or organization)',
+		},
+		categories: {
+			control: 'object',
+			description: 'Category tags with optional click actions',
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Grays out the card when true',
+		},
+		overflowOptions: {
+			control: 'object',
+			description: 'Options for the overflow menu',
+		},
+	},
+} satisfies Meta<typeof ContentModpackCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// All Types Overview
+// ============================================
+
+export const AllTypes: Story = {
+	args: {
+		project: fabulouslyOptimizedProject,
+	},
+	render: () => ({
+		components: { ContentModpackCard },
+		setup() {
+			const cards = [
+				{
+					label: 'Full featured (all actions)',
+					project: fabulouslyOptimizedProject,
+					version: fabulouslyOptimizedVersion,
+					owner: userOwner,
+					categories: optimizationCategories,
+					hasUpdate: true,
+					hasContent: true,
+					hasUnlink: true,
+				},
+				{
+					label: 'With update available only',
+					project: cobblemonProject,
+					version: cobblemonVersion,
+					owner: cobblemonOwner,
+					categories: cobblemonCategories,
+					hasUpdate: true,
+				},
+				{
+					label: 'With content button only',
+					project: simplyOptimizedProject,
+					version: fabulouslyOptimizedVersion,
+					owner: userOwner,
+					hasContent: true,
+				},
+				{
+					label: 'Minimal (project only)',
+					project: fabulouslyOptimizedProject,
+				},
+				{
+					label: 'With version info only',
+					project: cobblemonProject,
+					version: cobblemonVersion,
+				},
+				{
+					label: 'With owner only',
+					project: simplyOptimizedProject,
+					owner: userOwner,
+				},
+				{
+					label: 'Disabled state',
+					project: fabulouslyOptimizedProject,
+					version: fabulouslyOptimizedVersion,
+					owner: userOwner,
+					categories: optimizationCategories,
+					disabled: true,
+				},
+			]
+
+			return { cards }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-6">
+				<template v-for="card in cards" :key="card.label">
+					<h3 class="text-sm font-medium text-secondary">{{ card.label }}</h3>
+					<ContentModpackCard
+						:project="card.project"
+						:version="card.version"
+						:owner="card.owner"
+						:categories="card.categories"
+						:disabled="card.disabled"
+						@update="card.hasUpdate ? () => {} : undefined"
+						@content="card.hasContent ? () => {} : undefined"
+						@unlink="card.hasUnlink ? () => {} : undefined"
+					/>
+				</template>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Basic Stories
+// ============================================
+
+export const Default: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onUpdate: fn(),
+		onContent: fn(),
+		onUnlink: fn(),
+	},
+}
+
+export const MinimalProjectOnly: Story = {
+	args: {
+		project: cobblemonProject,
+	},
+}
+
+export const WithVersion: Story = {
+	args: {
+		project: simplyOptimizedProject,
+		version: fabulouslyOptimizedVersion,
+	},
+}
+
+export const WithUserOwner: Story = {
+	args: {
+		project: simplyOptimizedProject,
+		version: fabulouslyOptimizedVersion,
+		owner: userOwner,
+		categories: [
+			{ name: 'Adventure', icon: 'adventure', project_type: 'modpack', header: 'categories' },
+		],
+	},
+}
+
+export const WithOrganizationOwner: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
+
+// ============================================
+// Action Button Stories
+// ============================================
+
+export const WithUpdateButton: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onUpdate: fn(),
+	},
+}
+
+export const WithContentButton: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onContent: fn(),
+	},
+}
+
+export const WithUnlinkButton: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		onUnlink: fn(),
+	},
+}
+
+export const WithAllActions: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		onUpdate: fn(),
+		onContent: fn(),
+		onUnlink: fn(),
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'settings', action: () => console.log('Settings') },
+			{ divider: true },
+			{ id: 'remove', action: () => console.log('Remove'), color: 'red' },
+		],
+	},
+}
+
+// ============================================
+// State Stories
+// ============================================
+
+export const Disabled: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		disabled: true,
+	},
+}
+
+export const LongTitle: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			title: 'Super Long Modpack Title That Should Display Properly On All Screen Sizes',
+			description:
+				'This is an extremely long description that should wrap properly and not break the layout. It contains lots of information about what this modpack includes and what makes it special compared to other modpacks available on the platform.',
+		},
+		version: cobblemonVersion,
+		owner: {
+			...userOwner,
+			name: 'Really Long Organization Name Studios',
+		},
+		categories: [
+			{ name: 'Adventure', icon: 'adventure', project_type: 'modpack', header: 'categories' },
+			{ name: 'Technology', icon: 'technology', project_type: 'modpack', header: 'categories' },
+			{ name: 'Magic', icon: 'magic', project_type: 'modpack', header: 'categories' },
+			{ name: 'Exploration', icon: 'exploration', project_type: 'modpack', header: 'categories' },
+			{ name: 'Multiplayer', icon: 'multiplayer', project_type: 'modpack', header: 'categories' },
+		],
+		onUpdate: fn(),
+		onContent: fn(),
+	},
+}
+
+export const NoDescription: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			description: undefined,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
+
+export const NoStats: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			downloads: undefined,
+			followers: undefined,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+	},
+}
+
+// ============================================
+// Categories Stories
+// ============================================
+
+export const WithClickableCategories: Story = {
+	render: (args) => ({
+		components: { ContentModpackCard },
+		setup() {
+			const clickedCategory = ref<string | null>(null)
+			const categories: ContentModpackCardCategory[] = [
+				{
+					name: 'Adventure',
+					icon: 'adventure',
+					project_type: 'modpack',
+					header: 'categories',
+					action: () => (clickedCategory.value = 'Adventure'),
+				},
+				{
+					name: 'Lightweight',
+					icon: 'lightweight',
+					project_type: 'modpack',
+					header: 'categories',
+					action: () => (clickedCategory.value = 'Lightweight'),
+				},
+				{
+					name: 'Multiplayer',
+					icon: 'multiplayer',
+					project_type: 'modpack',
+					header: 'categories',
+					action: () => (clickedCategory.value = 'Multiplayer'),
+				},
+			]
+			return { args, categories, clickedCategory }
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-4">
+				<ContentModpackCard
+					:project="args.project"
+					:version="args.version"
+					:owner="args.owner"
+					:categories="categories"
+				/>
+				<div class="text-sm text-secondary">
+					Clicked category: <strong>{{ clickedCategory || 'None' }}</strong>
+				</div>
+			</div>
+		`,
+	}),
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+	},
+}
+
+// ============================================
+// Overflow Menu Stories
+// ============================================
+
+export const WithOverflowMenu: Story = {
+	render: (args) => ({
+		components: { ContentModpackCard },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ContentModpackCard v-bind="args">
+				<template #view>View on Modrinth</template>
+				<template #settings>Settings</template>
+				<template #remove>Remove modpack</template>
+			</ContentModpackCard>
+		`,
+	}),
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+		overflowOptions: [
+			{ id: 'view', action: () => console.log('View') },
+			{ id: 'settings', action: () => console.log('Settings') },
+			{ divider: true },
+			{ id: 'remove', action: () => console.log('Remove'), color: 'red' },
+		],
+	},
+}
+
+// ============================================
+// Interactive Stories
+// ============================================
+
+export const WithContentModal: Story = {
+	args: {
+		project: cobblemonProject,
+	},
+	render: () => ({
+		components: { ContentModpackCard, NewModal, ContentCardItem },
+		setup() {
+			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modpackContent = [
+				{
+					project: {
+						id: '1',
+						slug: 'sodium',
+						title: 'Sodium',
+						icon_url:
+							'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+					},
+					version: { id: 'v1', version_number: '0.8.2', file_name: 'sodium-fabric-0.8.2.jar' },
+				},
+				{
+					project: {
+						id: '2',
+						slug: 'modmenu',
+						title: 'Mod Menu',
+						icon_url:
+							'https://cdn.modrinth.com/data/mOgUt4GM/5a20ed1450a0e1e79a1fe04e61bb4e5878bf1d20.png',
+					},
+					version: { id: 'v2', version_number: '16.0.0', file_name: 'modmenu-16.0.0.jar' },
+				},
+				{
+					project: {
+						id: '3',
+						slug: 'fabric-api',
+						title: 'Fabric API',
+						icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+					},
+					version: { id: 'v3', version_number: '0.141.3', file_name: 'fabric-api-0.141.3.jar' },
+				},
+			]
+
+			return {
+				cobblemonProject,
+				cobblemonVersion,
+				userOwner,
+				optimizationCategories,
+				modalRef,
+				modpackContent,
+			}
+		},
+		template: /*html*/ `
+			<div>
+				<ContentModpackCard
+					:project="cobblemonProject"
+					:version="cobblemonVersion"
+					:owner="userOwner"
+					:categories="optimizationCategories"
+					@content="modalRef?.show()"
+					@update="() => alert('Update clicked')"
+				/>
+				<NewModal ref="modalRef" header="Modpack Content">
+					<div class="flex flex-col gap-4">
+						<ContentCardItem
+							v-for="item in modpackContent"
+							:key="item.project.id"
+							:project="item.project"
+							:version="item.version"
+						/>
+					</div>
+				</NewModal>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Responsive Stories
+// ============================================
+
+export const ResponsiveView: Story = {
+	args: {
+		project: cobblemonProject,
+	},
+	render: () => ({
+		components: { ContentModpackCard },
+		setup() {
+			return {
+				cobblemonProject,
+				cobblemonVersion,
+				userOwner,
+				optimizationCategories,
+			}
+		},
+		template: /*html*/ `
+			<div class="flex flex-col gap-8">
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Desktop (full width)</h3>
+					<div class="w-full">
+						<ContentModpackCard
+							:project="cobblemonProject"
+							:version="cobblemonVersion"
+							:owner="userOwner"
+							:categories="optimizationCategories"
+							@update="() => {}"
+							@content="() => {}"
+							@unlink="() => {}"
+						/>
+					</div>
+				</div>
+				<div>
+					<h3 class="text-sm font-medium text-secondary mb-2">Mobile (&lt;640px)</h3>
+					<div class="w-[360px]">
+						<ContentModpackCard
+							:project="cobblemonProject"
+							:version="cobblemonVersion"
+							:owner="userOwner"
+							:categories="optimizationCategories"
+							@update="() => {}"
+							@content="() => {}"
+						/>
+					</div>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Edge Cases
+// ============================================
+
+export const NoIcon: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			icon_url: undefined,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
+
+export const NoOwnerAvatar: Story = {
+	args: {
+		project: cobblemonProject,
+		version: cobblemonVersion,
+		owner: {
+			...userOwner,
+			avatar_url: undefined,
+		},
+		categories: optimizationCategories,
+	},
+}
+
+export const HighDownloadCounts: Story = {
+	args: {
+		project: {
+			...cobblemonProject,
+			downloads: 1234567890,
+			followers: 9876543,
+		},
+		version: cobblemonVersion,
+		owner: userOwner,
+		categories: optimizationCategories,
+	},
+}
diff --git a/packages/ui/src/stories/project/ProjectCombobox.stories.ts b/packages/ui/src/stories/project/ProjectCombobox.stories.ts
new file mode 100644
index 0000000000..1346507d32
--- /dev/null
+++ b/packages/ui/src/stories/project/ProjectCombobox.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ProjectCombobox from '../../components/project/ProjectCombobox.vue'
+
+const meta = {
+	title: 'Project/ProjectCombobox',
+	component: ProjectCombobox,
+} satisfies Meta<typeof ProjectCombobox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		placeholder: 'Select project',
+		searchPlaceholder: 'Search by name or paste ID...',
+		loadingMessage: 'Loading...',
+		noResultsMessage: 'No results found',
+		disabled: false,
+		limit: 20,
+	},
+}