diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index a5c96662..26f041fd 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -37,6 +37,7 @@ import {
 	ProgressSpinner,
 	provideModrinthClient,
 	provideNotificationManager,
+	providePageContext,
 	useDebugLogger,
 } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
@@ -119,7 +120,10 @@ const tauriApiClient = new TauriModrinthClient({
 	],
 })
 provideModrinthClient(tauriApiClient)
-
+providePageContext({
+	hierarchicalSidebarAvailable: ref(true),
+	showAds: ref(false),
+})
 const news = ref([])
 const availableSurvey = ref(false)
 
diff --git a/apps/app-frontend/src/assets/stylesheets/global.scss b/apps/app-frontend/src/assets/stylesheets/global.scss
index 2969d3cb..49309639 100644
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '@modrinth/ui/src/styles/tailwind-utilities.css';
+
 @font-face {
 	font-family: 'bundled-minecraft-font-mrapp';
 	font-style: normal;
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index 5af1c1be..a25d0e63 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -6,7 +6,12 @@
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
-import { NotificationPanel, provideModrinthClient, provideNotificationManager } from '@modrinth/ui'
+import {
+	NotificationPanel,
+	provideModrinthClient,
+	provideNotificationManager,
+	providePageContext,
+} from '@modrinth/ui'
 
 import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
 import { createModrinthClient } from '~/helpers/api.ts'
@@ -23,4 +28,8 @@ const client = createModrinthClient(auth, {
 	rateLimitKey: config.rateLimitKey,
 })
 provideModrinthClient(client)
+providePageContext({
+	hierarchicalSidebarAvailable: ref(false),
+	showAds: ref(false),
+})
 </script>
diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss
index 751974d9..a7f038e3 100644
--- a/apps/frontend/src/assets/styles/layout.scss
+++ b/apps/frontend/src/assets/styles/layout.scss
@@ -135,21 +135,6 @@
 		'sidebar'
 		/ 100%;
 
-	.normal-page__ultimate-sidebar {
-		grid-area: ultimate-sidebar;
-		position: fixed;
-		bottom: 1rem;
-		right: 1rem;
-		z-index: 100;
-		max-width: calc(100% - 2rem);
-		max-height: calc(100vh - 2rem);
-		overflow-y: auto;
-
-		> div {
-			box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-		}
-	}
-
 	@media screen and (min-width: 1024px) {
 		&.sidebar {
 			grid-template:
@@ -173,45 +158,6 @@
 		}
 	}
 
-	@media screen and (min-width: 1400px) {
-		&.ultimate-sidebar {
-			max-width: calc(80rem + 0.75rem + 600px);
-
-			grid-template:
-				'header header ultimate-sidebar' auto
-				'content sidebar ultimate-sidebar' auto
-				'content dummy ultimate-sidebar' 1fr
-				/ 1fr 18.75rem auto;
-
-			.normal-page__header {
-				max-width: 80rem;
-			}
-
-			.normal-page__ultimate-sidebar {
-				position: sticky;
-				top: 4.5rem;
-				bottom: unset;
-				right: unset;
-				z-index: unset;
-				align-self: start;
-				display: flex;
-				height: calc(100vh - 4.5rem * 2);
-
-				> div {
-					box-shadow: none;
-				}
-			}
-
-			&.alt-layout {
-				grid-template:
-					'ultimate-sidebar header header' auto
-					'ultimate-sidebar sidebar content' auto
-					'ultimate-sidebar dummy content' 1fr
-					/ auto 18.75rem 1fr;
-			}
-		}
-	}
-
 	.normal-page__sidebar {
 		grid-area: sidebar;
 	}
diff --git a/apps/frontend/src/assets/styles/tailwind.css b/apps/frontend/src/assets/styles/tailwind.css
index 2f3b0d6d..ea20c6c6 100644
--- a/apps/frontend/src/assets/styles/tailwind.css
+++ b/apps/frontend/src/assets/styles/tailwind.css
@@ -1,3 +1,5 @@
+@import '@modrinth/ui/src/styles/tailwind-utilities.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/apps/frontend/src/components/ui/NavRow.vue b/apps/frontend/src/components/ui/NavRow.vue
deleted file mode 100644
index 5d2544fa..00000000
--- a/apps/frontend/src/components/ui/NavRow.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-	<nav class="navigation">
-		<NuxtLink
-			v-for="(link, index) in filteredLinks"
-			v-show="link.shown === undefined ? true : link.shown"
-			:key="index"
-			ref="rowLinkElements"
-			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-			class="nav-link button-animation"
-		>
-			<span>{{ link.label }}</span>
-		</NuxtLink>
-		<div
-			class="nav-indicator"
-			:style="{
-				left: positionToMoveX,
-				top: positionToMoveY,
-				width: sliderWidth,
-				opacity: activeIndex === -1 ? 0 : 1,
-			}"
-			aria-hidden="true"
-		></div>
-	</nav>
-</template>
-
-<script setup>
-const route = useNativeRoute()
-
-const props = defineProps({
-	links: {
-		default: () => [],
-		type: Array,
-	},
-	query: {
-		default: null,
-		type: String,
-	},
-})
-
-const sliderPositionX = ref(0)
-const sliderPositionY = ref(18)
-const selectedElementWidth = ref(0)
-const activeIndex = ref(-1)
-const oldIndex = ref(-1)
-
-const filteredLinks = computed(() =>
-	props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
-)
-const positionToMoveX = computed(() => `${sliderPositionX.value}px`)
-const positionToMoveY = computed(() => `${sliderPositionY.value}px`)
-const sliderWidth = computed(() => `${selectedElementWidth.value}px`)
-
-function pickLink() {
-	activeIndex.value = props.query
-		? filteredLinks.value.findIndex(
-				(x) => (x.href === '' ? undefined : x.href) === route.path[props.query],
-			)
-		: filteredLinks.value.findIndex((x) => x.href === decodeURIComponent(route.path))
-
-	if (activeIndex.value !== -1) {
-		startAnimation()
-	} else {
-		oldIndex.value = -1
-		sliderPositionX.value = 0
-		selectedElementWidth.value = 0
-	}
-}
-
-const rowLinkElements = ref()
-
-function startAnimation() {
-	const el = rowLinkElements.value[activeIndex.value].$el
-
-	if (!el || !el.offsetParent) return
-
-	sliderPositionX.value = el.offsetLeft
-	sliderPositionY.value = el.offsetTop + el.offsetHeight
-	selectedElementWidth.value = el.offsetWidth
-}
-
-onMounted(() => {
-	window.addEventListener('resize', pickLink)
-	pickLink()
-})
-
-onUnmounted(() => {
-	window.removeEventListener('resize', pickLink)
-})
-
-watch(route, () => pickLink())
-</script>
-
-<style lang="scss" scoped>
-.navigation {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	grid-gap: 1rem;
-	flex-wrap: wrap;
-	position: relative;
-
-	.nav-link {
-		text-transform: capitalize;
-		font-weight: var(--font-weight-bold);
-		color: var(--color-text);
-		position: relative;
-
-		&:hover {
-			color: var(--color-text);
-
-			&::after {
-				opacity: 0.4;
-			}
-		}
-
-		&:active::after {
-			opacity: 0.2;
-		}
-
-		&.router-link-exact-active {
-			color: var(--color-text);
-
-			&:not(:focus-visible) {
-				outline: 2px solid transparent;
-				outline-offset: 6px;
-				border-radius: 0.25rem;
-			}
-
-			&::after {
-				opacity: 1;
-			}
-		}
-	}
-
-	&.use-animation {
-		.nav-link {
-			&.is-active::after {
-				opacity: 0;
-			}
-		}
-	}
-
-	.nav-indicator {
-		position: absolute;
-		height: 0.25rem;
-		bottom: -5px;
-		left: 0;
-		width: 3rem;
-		transition: all ease-in-out 0.2s;
-		border-radius: var(--size-rounded-max);
-		background-color: var(--color-brand);
-		outline: 2px solid transparent;
-		outline-offset: -2px;
-
-		@media (prefers-reduced-motion) {
-			transition: none !important;
-		}
-	}
-}
-</style>
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index f1b36a3e..cf3f4aa8 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -158,12 +158,18 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
+	Admonition,
+	ButtonStyled,
+	Chips,
+	injectNotificationManager,
+	NewModal,
+	normalizeChildren,
+} from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import { type FormRequestResponse, useAvalara1099 } from '@/composables/avalara1099'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const props = withDefaults(
 	defineProps<{
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
index 32f0b6c1..0987a973 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
@@ -124,6 +124,7 @@
 </template>
 
 <script setup lang="ts">
+import { normalizeChildren } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
@@ -133,7 +134,6 @@ import ConfettiExplosion from 'vue-confetti-explosion'
 
 import { type TremendousProviderData, useWithdrawContext } from '@/providers/creator-withdraw.ts'
 import { getRailConfig } from '@/utils/muralpay-rails'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const { withdrawData } = useWithdrawContext()
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
index ccc451b9..6fd34726 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
@@ -104,7 +104,13 @@
 
 <script setup lang="ts">
 import { CheckIcon, PayPalColorIcon, SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Checkbox, financialMessages, formFieldLabels } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	Checkbox,
+	financialMessages,
+	formFieldLabels,
+	normalizeChildren,
+} from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 import { useDebounceFn } from '@vueuse/core'
@@ -114,7 +120,6 @@ import RevenueInputField from '@/components/ui/dashboard/RevenueInputField.vue'
 import WithdrawFeeBreakdown from '@/components/ui/dashboard/WithdrawFeeBreakdown.vue'
 import { getAuthUrl, removeAuthProvider, useAuth } from '@/composables/auth.js'
 import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const { withdrawData, maxWithdrawAmount, availableMethods, calculateFees, saveStateToStorage } =
 	useWithdrawContext()
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
index 27a228cf..c983f725 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
@@ -84,6 +84,7 @@ import {
 	ButtonStyled,
 	Combobox,
 	injectNotificationManager,
+	normalizeChildren,
 	useDebugLogger,
 } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
@@ -93,7 +94,6 @@ import { useGeolocation } from '@vueuse/core'
 
 import { useCountries, useFormattedCountries, useUserCountry } from '@/composables/country.ts'
 import { type PayoutMethod, useWithdrawContext } from '@/providers/creator-withdraw.ts'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const debug = useDebugLogger('MethodSelectionStage')
 const {
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
index dd05ac80..2249cf6a 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
@@ -207,6 +207,7 @@ import {
 	financialMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
+	normalizeChildren,
 } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
@@ -224,7 +225,6 @@ import {
 	getCurrencyIcon,
 } from '@/utils/finance-icons.ts'
 import { getRailConfig } from '@/utils/muralpay-rails'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const { withdrawData, maxWithdrawAmount, availableMethods, calculateFees } = useWithdrawContext()
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
index 7b5846ce..71acf0fc 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
@@ -74,14 +74,13 @@
 
 <script setup lang="ts">
 import { FileTextIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled } from '@modrinth/ui'
+import { Admonition, ButtonStyled, normalizeChildren } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 import { computed } from 'vue'
 
 import { TAX_THRESHOLD_ACTUAL } from '@/providers/creator-withdraw.ts'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const props = defineProps<{
 	balance: any
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
index 7d895e1d..27f4cc9c 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
@@ -181,6 +181,7 @@ import {
 	financialMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
+	normalizeChildren,
 	paymentMethodMessages,
 	useDebugLogger,
 } from '@modrinth/ui'
@@ -195,7 +196,6 @@ import WithdrawFeeBreakdown from '@/components/ui/dashboard/WithdrawFeeBreakdown
 import { useAuth } from '@/composables/auth.js'
 import { useBaseFetch } from '@/composables/fetch.js'
 import { type PayoutMethod, useWithdrawContext } from '@/providers/creator-withdraw.ts'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const debug = useDebugLogger('TremendousDetailsStage')
 const {
diff --git a/apps/frontend/src/error.vue b/apps/frontend/src/error.vue
index 451ad1eb..7a03197d 100644
--- a/apps/frontend/src/error.vue
+++ b/apps/frontend/src/error.vue
@@ -52,7 +52,12 @@
 
 <script setup>
 import { SadRinthbot } from '@modrinth/assets'
-import { NotificationPanel, provideModrinthClient, provideNotificationManager } from '@modrinth/ui'
+import {
+	NotificationPanel,
+	provideModrinthClient,
+	provideNotificationManager,
+	providePageContext,
+} from '@modrinth/ui'
 import { defineMessage, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 
@@ -73,6 +78,10 @@ const client = createModrinthClient(auth.value, {
 	rateLimitKey: config.rateLimitKey,
 })
 provideModrinthClient(client)
+providePageContext({
+	hierarchicalSidebarAvailable: ref(false),
+	showAds: ref(false),
+})
 
 const { formatMessage } = useVIntl()
 
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 1454ca99..9675c8a8 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -365,20 +365,26 @@
   "auth.welcome.title": {
     "message": "Welcome"
   },
-  "collection.button.delete-icon": {
-    "message": "Delete icon"
-  },
   "collection.button.edit-icon": {
     "message": "Edit icon"
   },
+  "collection.button.remove-icon": {
+    "message": "Remove icon"
+  },
   "collection.button.remove-project": {
     "message": "Remove project"
   },
+  "collection.button.replace-icon": {
+    "message": "Replace icon"
+  },
+  "collection.button.select-icon": {
+    "message": "Select icon"
+  },
   "collection.button.unfollow-project": {
     "message": "Unfollow project"
   },
   "collection.delete-modal.description": {
-    "message": "This will remove this collection forever. This action cannot be undone."
+    "message": "This will permanently delete this collection. This action cannot be undone."
   },
   "collection.delete-modal.title": {
     "message": "Are you sure you want to delete this collection?"
@@ -389,33 +395,39 @@
   "collection.description.following": {
     "message": "Auto-generated collection of all the projects you're following."
   },
+  "collection.editing": {
+    "message": "Editing collection"
+  },
   "collection.error.not-found": {
     "message": "Collection not found"
   },
-  "collection.label.collection": {
-    "message": "Collection"
-  },
   "collection.label.created-at": {
     "message": "Created {ago}"
   },
   "collection.label.curated-by": {
     "message": "Curated by"
   },
+  "collection.label.description": {
+    "message": "Description"
+  },
+  "collection.label.details": {
+    "message": "Details"
+  },
   "collection.label.no-projects": {
-    "message": "This collection has no projects!"
-  },
-  "collection.label.no-projects-auth": {
-    "message": "You don't have any projects.\nWould you like to <create-link>add one</create-link>?"
-  },
-  "collection.label.owner": {
-    "message": "Owner"
+    "message": "No projects in collection yet"
   },
   "collection.label.projects-count": {
-    "message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
+    "message": "{count, plural, =0 {No projects yet} one {<stat>{count}</stat> project} other {<stat>{count}</stat> {type}}}"
   },
   "collection.label.updated-at": {
     "message": "Updated {ago}"
   },
+  "collection.return-link.dashboard-collections": {
+    "message": "Your collections"
+  },
+  "collection.return-link.user": {
+    "message": "{user}'s profile"
+  },
   "collection.title": {
     "message": "{name} - Collection"
   },
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index d2ed7c3e..12820413 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -81,13 +81,18 @@
 
 <script setup>
 import { CheckIcon, XIcon } from '@modrinth/assets'
-import { Avatar, Button, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	commonMessages,
+	injectNotificationManager,
+	normalizeChildren,
+} from '@modrinth/ui'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import { useAuth } from '@/composables/auth.js'
 import { useScopes } from '@/composables/auth/scopes.ts'
 import { useBaseFetch } from '@/composables/fetch.js'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/pages/auth/welcome.vue b/apps/frontend/src/pages/auth/welcome.vue
index e31b0dc3..e5ffb061 100644
--- a/apps/frontend/src/pages/auth/welcome.vue
+++ b/apps/frontend/src/pages/auth/welcome.vue
@@ -49,11 +49,9 @@
 
 <script setup>
 import { RightArrowIcon, WavingRinthbot } from '@modrinth/assets'
-import { Checkbox, commonMessages } from '@modrinth/ui'
+import { Checkbox, commonMessages, normalizeChildren } from '@modrinth/ui'
 import { IntlFormatted } from '@vintl/vintl/components'
 
-import { normalizeChildren } from '@/utils/vue-children.ts'
-
 const route = useRoute()
 
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 6fbcdcef..3fcf0d25 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -1,395 +1,374 @@
 <template>
-	<div>
-		<ConfirmModal
-			v-if="canEdit"
-			ref="deleteModal"
-			:title="formatMessage(messages.deleteModalTitle)"
-			:description="formatMessage(messages.deleteModalDescription)"
-			:has-to-type="false"
-			:proceed-label="formatMessage(commonMessages.deleteLabel)"
-			@proceed="deleteCollection()"
-		/>
-		<div class="normal-page">
-			<div class="normal-page__sidebar">
-				<div class="card">
-					<div class="card__overlay input-group">
-						<template v-if="canEdit && isEditing === false">
-							<Button @click="isEditing = true">
-								<EditIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.editButton) }}
-							</Button>
-							<Button id="delete-collection" @click="() => $refs.deleteModal.show()">
-								<TrashIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.deleteLabel) }}
-							</Button>
-						</template>
-						<template v-else-if="canEdit && isEditing === true">
-							<PopoutMenu class="btn">
-								<EditIcon aria-hidden="true" />
-								{{ formatMessage(messages.editIconButton) }}
-								<template #menu>
-									<span class="icon-edit-menu">
-										<FileInput
-											id="project-icon"
-											:max-size="262144"
-											:show-icon="true"
-											accept="image/png,image/jpeg,image/gif,image/webp"
-											class="btn btn-transparent upload"
-											style="white-space: nowrap"
-											aria-label="Upload icon"
-											@change="showPreviewImage"
-										>
-											<UploadIcon aria-hidden="true" />
-										</FileInput>
-										<Button
-											v-if="!deletedIcon && (previewImage || collection.icon_url)"
-											style="white-space: nowrap"
-											transparent
-											@click="
-												() => {
-													deletedIcon = true
-													previewImage = null
-												}
-											"
-										>
-											<TrashIcon aria-hidden="true" />
-											{{ formatMessage(messages.deleteIconButton) }}
-										</Button>
-									</span>
-								</template>
-							</PopoutMenu>
-						</template>
-					</div>
-					<!-- Editing -->
-					<template v-if="isEditing">
-						<div class="inputs universal-labels">
-							<div class="avatar-section">
-								<Avatar
-									size="md"
-									:src="deletedIcon ? null : previewImage ? previewImage : collection.icon_url"
-								/>
+	<ConfirmModal
+		v-if="canEdit"
+		ref="deleteModal"
+		:title="formatMessage(messages.deleteModalTitle)"
+		:description="formatMessage(messages.deleteModalDescription)"
+		:has-to-type="false"
+		:proceed-label="formatMessage(commonMessages.deleteLabel)"
+		@proceed="deleteCollection()"
+	/>
+	<NewModal v-if="canEdit" ref="editModal" :header="formatMessage(messages.editingCollection)">
+		<div class="flex w-[30rem] flex-col gap-3">
+			<div class="flow-root">
+				<div class="group relative float-end ml-4">
+					<OverflowMenu
+						v-tooltip="formatMessage(messages.editIconButton)"
+						class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+						:options="[
+							{
+								id: 'select',
+								action: () => {
+									const input = iconInputRef?.$el?.querySelector('input')
+									input?.click()
+								},
+							},
+							{
+								id: 'remove',
+								color: 'danger',
+								action: () => {
+									deletedIcon = true
+									previewImage = null
+								},
+								shown: !deletedIcon && (previewImage || collection.icon_url),
+							},
+						]"
+					>
+						<Avatar
+							:src="deletedIcon ? null : previewImage ? previewImage : collection.icon_url"
+							size="108px"
+							class="!border-4 group-hover:brightness-75"
+							no-shadow
+						/>
+						<div class="absolute right-0 top-0 m-2">
+							<div
+								class="m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
+							>
+								<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
 							</div>
-							<label for="collection-title">
-								<span class="label__title">
-									{{ formatMessage(commonMessages.titleLabel) }}
-								</span>
-							</label>
-							<input id="collection-title" v-model="name" maxlength="255" type="text" />
-							<label for="collection-description">
-								<span class="label__title">
-									{{ formatMessage(commonMessages.descriptionLabel) }}
-								</span>
-							</label>
-							<div class="textarea-wrapper">
-								<textarea id="collection-description" v-model="summary" maxlength="255" />
-							</div>
-							<label for="visibility">
-								<span class="label__title">
-									{{ formatMessage(commonMessages.visibilityLabel) }}
-								</span>
-							</label>
-							<DropdownSelect
-								id="visibility"
-								v-model="visibility"
-								:options="['listed', 'unlisted', 'private']"
-								:disabled="visibility === 'rejected'"
-								:multiple="false"
-								:display-name="
-									(s) => {
-										if (s === 'listed') return formatMessage(commonMessages.publicLabel)
-										return formatMessage(commonMessages[`${s}Label`])
-									}
-								"
-								:searchable="false"
-							/>
-						</div>
-						<div class="push-right input-group">
-							<Button @click="isEditing = false">
-								<XIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.cancelButton) }}
-							</Button>
-							<Button color="primary" @click="saveChanges()">
-								<SaveIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.saveButton) }}
-							</Button>
 						</div>
+						<template #select>
+							<UploadIcon />
+							{{
+								previewImage || collection.icon_url
+									? formatMessage(messages.replaceIcon)
+									: formatMessage(messages.selectIcon)
+							}}
+						</template>
+						<template #remove>
+							<XIcon />
+							{{ formatMessage(messages.removeIconButton) }}
+						</template>
+					</OverflowMenu>
+					<FileInput
+						id="collection-icon-input"
+						ref="iconInputRef"
+						:max-size="262144"
+						:show-icon="false"
+						accept="image/png,image/jpeg,image/gif,image/webp"
+						class="hidden"
+						aria-label="Upload icon"
+						@change="showPreviewImage"
+					/>
+				</div>
+				<div class="overflow-hidden">
+					<label class="mb-2 block text-lg font-semibold text-contrast" for="collection-title">
+						{{ formatMessage(commonMessages.titleLabel) }}
+					</label>
+					<input
+						id="collection-title"
+						v-model="current.name"
+						maxlength="255"
+						type="text"
+						autocomplete="off"
+						class="w-full"
+					/>
+				</div>
+				<label
+					class="mb-2 mt-4 block text-lg font-semibold text-contrast"
+					for="collection-description"
+				>
+					{{ formatMessage(commonMessages.descriptionLabel) }}
+				</label>
+				<div class="textarea-wrapper h-24">
+					<textarea id="collection-description" v-model="current.description" maxlength="255" />
+				</div>
+				<label for="visibility" class="mb-2 mt-4 block text-lg font-semibold text-contrast">
+					{{ formatMessage(commonMessages.visibilityLabel) }}
+				</label>
+				<RadioButtons v-model="current.status" :items="['listed', 'unlisted', 'private']">
+					<template #default="{ item }">
+						<span class="flex items-center gap-1">
+							{{
+								item === 'listed'
+									? formatMessage(commonMessages.publicLabel)
+									: formatMessage(commonMessages[`${item}Label`])
+							}}
+						</span>
 					</template>
-					<!-- Content -->
-					<template v-if="!isEditing">
-						<div class="page-header__icon">
-							<Avatar size="md" :src="collection.icon_url" />
-						</div>
-						<div class="page-header__text">
-							<h1 class="title">{{ collection.name }}</h1>
-
-							<div>
-								<span class="collection-label">
-									<BoxIcon aria-hidden="true" />
-									{{ formatMessage(messages.collectionLabel) }}
-								</span>
-							</div>
-
-							<div class="collection-info">
-								<div class="metadata-item markdown-body collection-description">
-									<p>{{ collection.description }}</p>
-								</div>
-
-								<hr class="card-divider" />
-
-								<div v-if="canEdit" class="primary-stat">
+				</RadioButtons>
+			</div>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled class="w-24">
+					<button @click="() => editModal?.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand" class="w-36">
+					<button :disabled="saving" @click="save()">
+						<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
+						<SaveIcon v-else aria-hidden="true" />
+						{{
+							saving
+								? formatMessage(commonMessages.savingButton)
+								: formatMessage(commonMessages.saveButton)
+						}}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+	<NormalPage :sidebar="cosmetics.leftContentLayout ? 'left' : 'right'">
+		<template #header>
+			<div class="flex flex-col gap-6">
+				<ClientOnly>
+					<nuxt-link
+						v-if="returnLink"
+						:to="returnLink.link"
+						class="flex w-fit items-center gap-1 text-brand-blue hover:underline"
+					>
+						<ChevronLeftIcon aria-hidden="true" />
+						{{ formatMessage(returnLink.message, { user: creator.username }) }}
+					</nuxt-link>
+				</ClientOnly>
+				<div class="grid grid-cols-[auto_1fr] gap-4 sm:grid-cols-[auto_1fr_auto]">
+					<Avatar :src="collection.icon_url" size="64px" />
+					<div class="flex flex-col gap-3">
+						<h1 class="heading-2xl">
+							{{ collection.name }}
+						</h1>
+						<div class="flex items-center gap-2">
+							<template v-if="canEdit || collection.status !== 'listed'">
+								<div class="flex items-center gap-1">
 									<template v-if="collection.status === 'listed'">
-										<GlobeIcon class="primary-stat__icon" aria-hidden="true" />
-										<div class="primary-stat__text">
-											<strong>
-												{{ formatMessage(commonMessages.publicLabel) }}
-											</strong>
-										</div>
+										<GlobeIcon aria-hidden="true" />
+										{{ formatMessage(commonMessages.publicLabel) }}
 									</template>
 									<template v-else-if="collection.status === 'unlisted'">
-										<LinkIcon class="primary-stat__icon" aria-hidden="true" />
-										<div class="primary-stat__text">
-											<strong>
-												{{ formatMessage(commonMessages.unlistedLabel) }}
-											</strong>
-										</div>
+										<LinkIcon aria-hidden="true" />
+										{{ formatMessage(commonMessages.unlistedLabel) }}
 									</template>
 									<template v-else-if="collection.status === 'private'">
-										<LockIcon class="primary-stat__icon" aria-hidden="true" />
-										<div class="primary-stat__text">
-											<strong>
-												{{ formatMessage(commonMessages.privateLabel) }}
-											</strong>
-										</div>
+										<LockIcon aria-hidden="true" />
+										{{ formatMessage(commonMessages.privateLabel) }}
 									</template>
 									<template v-else-if="collection.status === 'rejected'">
-										<XIcon class="primary-stat__icon" aria-hidden="true" />
-										<div class="primary-stat__text">
-											<strong>
-												{{ formatMessage(commonMessages.rejectedLabel) }}
-											</strong>
-										</div>
+										<XIcon aria-hidden="true" />
+										{{ formatMessage(commonMessages.rejectedLabel) }}
 									</template>
 								</div>
-							</div>
-
-							<div class="primary-stat">
-								<LibraryIcon class="primary-stat__icon" aria-hidden="true" />
-								<div v-if="projects" class="primary-stat__text">
-									<IntlFormatted
-										:message-id="messages.projectsCountLabel"
-										:values="{
-											count: formatCompactNumber(projects.length || 0),
-										}"
-									>
-										<template #stat="{ children }">
-											<span class="primary-stat__counter">
-												<component :is="() => normalizeChildren(children)" />
-											</span>
-										</template>
-									</IntlFormatted>
-								</div>
-							</div>
-
-							<div class="metadata-item">
-								<div
-									v-tooltip="
-										formatMessage(commonMessages.dateAtTimeTooltip, {
-											date: new Date(collection.created),
-											time: new Date(collection.created),
-										})
-									"
-									class="date"
-								>
-									<CalendarIcon aria-hidden="true" />
-									<label>
-										{{
-											formatMessage(messages.createdAtLabel, {
-												ago: formatRelativeTime(collection.created),
-											})
-										}}
-									</label>
-								</div>
-							</div>
-
-							<div v-if="collection.id !== 'following'" class="metadata-item">
-								<div
-									v-tooltip="
-										formatMessage(commonMessages.dateAtTimeTooltip, {
-											date: new Date(collection.updated),
-											time: new Date(collection.updated),
-										})
-									"
-									class="date"
-								>
-									<UpdatedIcon aria-hidden="true" />
-									<label>
-										{{
-											formatMessage(messages.updatedAtLabel, {
-												ago: formatRelativeTime(collection.updated),
-											})
-										}}
-									</label>
-								</div>
-							</div>
-						</div>
-
-						<hr class="card-divider" />
-
-						<div class="collection-info">
-							<h2 class="card-header">
-								{{ formatMessage(messages.curatedByLabel) }}
-							</h2>
-							<div class="metadata-item">
-								<nuxt-link
-									class="team-member columns button-transparent"
-									:to="'/user/' + creator.username"
-								>
-									<Avatar :src="creator.avatar_url" :alt="creator.username" size="sm" circle />
-
-									<div class="member-info">
-										<p class="name">{{ creator.username }}</p>
-										<p class="role">{{ formatMessage(messages.ownerLabel) }}</p>
-									</div>
-								</nuxt-link>
-							</div>
-							<!-- <hr class="card-divider" />
-            <div class="input-group">
-              <Button @click="() => $refs.shareModal.show()">
-                <ShareIcon />
-                Share
-              </Button>
-            </div> -->
-						</div>
-					</template>
-				</div>
-				<AdPlaceholder v-if="!auth.user" />
-			</div>
-			<div class="normal-page__content">
-				<nav class="navigation-card">
-					<NavRow
-						:links="[
-							{
-								label: formatMessage(commonMessages.allProjectType),
-								href: `/collection/${collection.id}`,
-							},
-							...projectTypes.map((x) => {
-								return {
-									label: formatMessage(getProjectTypeMessage(x, true)),
-									href: `/collection/${collection.id}/${x}s`,
-								}
-							}),
-						]"
-					/>
-					<button
-						v-tooltip="
-							formatMessage(
-								commonMessages[`${cosmetics.searchDisplayMode.collection || 'list'}InputView`],
-							)
-						"
-						:aria-label="
-							formatMessage(
-								commonMessages[`${cosmetics.searchDisplayMode.collection || 'list'}InputView`],
-							)
-						"
-						class="square-button"
-						@click="cycleSearchDisplayMode()"
-					>
-						<GridIcon v-if="cosmetics.searchDisplayMode.collection === 'grid'" />
-						<ImageIcon v-else-if="cosmetics.searchDisplayMode.collection === 'gallery'" />
-						<ListIcon v-else />
-					</button>
-				</nav>
-
-				<div
-					v-if="projects && projects?.length > 0"
-					:class="
-						'project-list display-mode--' + (cosmetics.searchDisplayMode.collection || 'list')
-					"
-				>
-					<ProjectCard
-						v-for="project in (route.params.projectType !== undefined
-							? projects.filter(
-									(x) =>
-										x.project_type ===
-										route.params.projectType.substr(0, route.params.projectType.length - 1),
-								)
-							: projects
-						)
-							.slice()
-							.sort((a, b) => b.downloads - a.downloads)"
-						:id="project.id"
-						:key="project.id"
-						:type="project.project_type"
-						:categories="project.categories"
-						:created-at="project.published"
-						:updated-at="project.updated"
-						:description="project.description"
-						:downloads="project.downloads ? project.downloads.toString() : '0'"
-						:follows="project.followers ? project.followers.toString() : '0'"
-						:featured-image="project.gallery.find((element) => element.featured)?.url"
-						:icon-url="project.icon_url"
-						:name="project.title"
-						:client-side="project.client_side"
-						:server-side="project.server_side"
-						:color="project.color"
-						:show-updated-date="!canEdit && collection.id !== 'following'"
-						:show-created-date="!canEdit && collection.id !== 'following'"
-					>
-						<button
-							v-if="canEdit"
-							class="iconified-button remove-btn"
-							@click="
-								() => {
-									removeProjects = [project]
-									saveChanges()
-								}
-							"
-						>
-							<TrashIcon aria-hidden="true" />
-							{{ formatMessage(messages.removeProjectButton) }}
-						</button>
-						<button
-							v-if="collection.id === 'following'"
-							class="iconified-button"
-							@click="unfollowProject(project)"
-						>
-							<TrashIcon aria-hidden="true" />
-							{{ formatMessage(messages.unfollowProjectButton) }}
-						</button>
-					</ProjectCard>
-				</div>
-				<div v-else class="error">
-					<UpToDate class="icon" />
-					<br />
-					<span v-if="auth.user && auth.user.id === creator.id" class="preserve-lines text">
-						<IntlFormatted :message-id="messages.noProjectsAuthLabel">
-							<template #create-link="{ children }">
-								<a class="link" @click.prevent="$router.push('/discover/mods')">
-									<component :is="() => children" />
-								</a>
+								<span class="text-secondary">•</span>
 							</template>
-						</IntlFormatted>
+							<span>
+								<IntlFormatted
+									:message-id="messages.projectsCountLabel"
+									:values="{
+										count: formatCompactNumber(projects.length || 0),
+										type: formatMessage(
+											commonProjectTypeSentenceMessages[
+												projectTypes.length === 1 ? projectTypes[0] : 'project'
+											],
+											{ count: projects.length || 0 },
+										),
+									}"
+								>
+									<template #stat="{ children }">
+										<span class="primary-stat__counter">
+											<component :is="() => normalizeChildren(children)" />
+										</span>
+									</template>
+								</IntlFormatted>
+							</span>
+						</div>
+					</div>
+					<div class="col-span-2 flex gap-2 sm:col-span-1">
+						<template v-if="canEdit">
+							<ButtonStyled>
+								<button @click="openEditModal">
+									<EditIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.editButton) }}
+								</button>
+							</ButtonStyled>
+							<ButtonStyled color="red" color-fill="text">
+								<button @click="() => $refs.deleteModal.show()">
+									<TrashIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.deleteLabel) }}
+								</button>
+							</ButtonStyled>
+						</template>
+					</div>
+				</div>
+				<HorizontalRule />
+			</div>
+		</template>
+		<template #sidebar>
+			<SidebarCard v-if="collection.description" :title="formatMessage(messages.descriptionLabel)">
+				<p class="m-0">{{ collection.description }}</p>
+			</SidebarCard>
+			<SidebarCard
+				v-if="collection.id !== 'following'"
+				:title="formatMessage(messages.curatedByLabel)"
+			>
+				<nuxt-link
+					class="group flex w-fit items-center gap-2 leading-[1.2] text-primary"
+					:to="`/user/${creator.username}`"
+				>
+					<Avatar :src="creator.avatar_url" :alt="creator.username" size="32px" circle />
+					<div class="flex flex-col">
+						<span
+							class="grid w-full grid-cols-[1fr_auto] flex-nowrap items-center gap-1 group-hover:underline"
+						>
+							<span class="min-w-0 overflow-hidden truncate">{{ creator.username }}</span>
+						</span>
+					</div>
+				</nuxt-link>
+			</SidebarCard>
+			<AdPlaceholder v-if="!auth.user" />
+			<SidebarCard
+				v-if="collection.id !== 'following'"
+				:title="formatMessage(messages.detailsLabel)"
+			>
+				<div class="flex flex-col gap-2">
+					<span
+						v-tooltip="dayjs(collection.created).format('MMMM D, YYYY [at] h:mm A')"
+						class="flex w-fit items-center gap-2"
+					>
+						<CalendarIcon aria-hidden="true" />
+						{{
+							formatMessage(messages.createdAtLabel, {
+								ago: formatRelativeTime(collection.created),
+							})
+						}}
 					</span>
-					<span v-else class="text">{{ formatMessage(messages.noProjectsLabel) }}</span>
+					<span
+						v-if="showUpdatedDate"
+						v-tooltip="dayjs(collection.updated).format('MMMM D, YYYY [at] h:mm A')"
+						class="flex w-fit items-center gap-2"
+					>
+						<UpdatedIcon aria-hidden="true" />
+						{{
+							formatMessage(messages.updatedAtLabel, {
+								ago: formatRelativeTime(collection.updated),
+							})
+						}}
+					</span>
+				</div>
+			</SidebarCard>
+		</template>
+		<NavTabs
+			v-if="projects && projectTypes.length > 1"
+			:links="[
+				{
+					label: formatMessage(commonMessages.allProjectType),
+					href: `/collection/${collection.id}`,
+				},
+				...projectTypes.map((x) => {
+					return {
+						label: formatMessage(commonProjectTypeCategoryMessages[x]),
+						href: `/collection/${collection.id}/${x}s`,
+					}
+				}),
+			]"
+		/>
+
+		<div
+			v-if="projects && projects?.length > 0"
+			:class="'project-list display-mode--' + (cosmetics.searchDisplayMode.collection || 'list')"
+		>
+			<ProjectCard
+				v-for="project in (route.params.projectType !== undefined
+					? projects.filter(
+							(x) =>
+								x.project_type ===
+								route.params.projectType.substr(0, route.params.projectType.length - 1),
+						)
+					: projects
+				)
+					.slice()
+					.sort((a, b) => b.downloads - a.downloads)"
+				:id="project.id"
+				:key="project.id"
+				:type="project.project_type"
+				:categories="project.categories"
+				:created-at="project.published"
+				:updated-at="project.updated"
+				:description="project.description"
+				:downloads="project.downloads ? project.downloads.toString() : '0'"
+				:follows="project.followers ? project.followers.toString() : '0'"
+				:featured-image="project.gallery.find((element) => element.featured)?.url"
+				:icon-url="project.icon_url"
+				:name="project.title"
+				:client-side="project.client_side"
+				:server-side="project.server_side"
+				:color="project.color"
+				:show-updated-date="!canEdit && collection.id !== 'following'"
+				:show-created-date="!canEdit && collection.id !== 'following'"
+			>
+				<button
+					v-if="canEdit"
+					class="iconified-button remove-btn"
+					:disabled="removing"
+					@click="() => removeProject(project)"
+				>
+					<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
+					<XIcon v-else aria-hidden="true" />
+					{{ formatMessage(messages.removeProjectButton) }}
+				</button>
+				<button
+					v-if="collection.id === 'following'"
+					class="iconified-button"
+					@click="unfollowProject(project)"
+				>
+					<HeartMinusIcon aria-hidden="true" />
+					{{ formatMessage(messages.unfollowProjectButton) }}
+				</button>
+			</ProjectCard>
+		</div>
+		<div v-else>
+			<div class="mx-auto flex flex-col justify-center gap-8 p-6 text-center">
+				<EmptyIllustration class="h-[120px] w-auto" />
+				<div class="-mt-4 flex flex-col gap-4">
+					<div class="flex flex-col items-center gap-1.5">
+						<span class="text-lg text-contrast md:text-2xl">{{
+							formatMessage(messages.noProjectsLabel)
+						}}</span>
+					</div>
+					<ButtonStyled v-if="auth.user && auth.user.id === creator.id" color="brand">
+						<nuxt-link class="mx-auto w-min" to="/discover/mods">
+							<CompassIcon class="size-5" />
+							Discover mods
+						</nuxt-link>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>
-	</div>
+	</NormalPage>
 </template>
 
 <script setup>
 import {
-	BoxIcon,
 	CalendarIcon,
+	ChevronLeftIcon,
+	CompassIcon,
 	EditIcon,
+	EmptyIllustration,
 	GlobeIcon,
-	GridIcon,
-	ImageIcon,
-	LibraryIcon,
+	HeartMinusIcon,
 	LinkIcon,
-	ListIcon,
 	LockIcon,
 	SaveIcon,
+	SpinnerIcon,
 	TrashIcon,
 	UpdatedIcon,
 	UploadIcon,
@@ -397,40 +376,55 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
+	commonProjectTypeCategoryMessages,
+	commonProjectTypeSentenceMessages,
 	ConfirmModal,
-	DropdownSelect,
 	FileInput,
+	HorizontalRule,
+	injectModrinthClient,
 	injectNotificationManager,
-	PopoutMenu,
+	NewModal,
+	normalizeChildren,
+	NormalPage,
+	OverflowMenu,
+	RadioButtons,
+	SidebarCard,
 	useRelativeTime,
+	useSavable,
 } from '@modrinth/ui'
 import { isAdmin } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
-import UpToDate from 'assets/images/illustrations/up_to_date.svg'
+import dayjs from 'dayjs'
 
-import { getProjectTypeMessage } from '@/utils/i18n-project-type'
-import { normalizeChildren } from '@/utils/vue-children.ts'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
-import NavRow from '~/components/ui/NavRow.vue'
+import NavTabs from '~/components/ui/NavTabs.vue'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
 
-const { addNotification } = injectNotificationManager()
-const vintl = useVIntl()
-const { formatMessage } = vintl
+const { handleError } = injectNotificationManager()
+const api = injectModrinthClient()
+const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 const formatCompactNumber = useCompactNumber()
 
+const route = useNativeRoute()
+const router = useRouter()
+const auth = await useAuth()
+const cosmetics = useCosmetics()
+
+if (route.params.id === 'following') {
+	definePageMeta({
+		middleware: 'auth',
+	})
+}
+
 const messages = defineMessages({
 	collectionDescription: {
 		id: 'collection.description',
 		defaultMessage: '{description} - View the collection {name} by {username} on Modrinth',
 	},
-	collectionLabel: {
-		id: 'collection.label.collection',
-		defaultMessage: 'Collection',
-	},
 	collectionTitle: {
 		id: 'collection.title',
 		defaultMessage: '{name} - Collection',
@@ -439,9 +433,21 @@ const messages = defineMessages({
 		id: 'collection.button.edit-icon',
 		defaultMessage: 'Edit icon',
 	},
-	deleteIconButton: {
-		id: 'collection.button.delete-icon',
-		defaultMessage: 'Delete icon',
+	removeIconButton: {
+		id: 'collection.button.remove-icon',
+		defaultMessage: 'Remove icon',
+	},
+	selectIcon: {
+		id: 'collection.button.select-icon',
+		defaultMessage: 'Select icon',
+	},
+	replaceIcon: {
+		id: 'collection.button.replace-icon',
+		defaultMessage: 'Replace icon',
+	},
+	editingCollection: {
+		id: 'collection.editing',
+		defaultMessage: 'Editing collection',
 	},
 	createdAtLabel: {
 		id: 'collection.label.created-at',
@@ -455,9 +461,17 @@ const messages = defineMessages({
 		id: 'collection.label.curated-by',
 		defaultMessage: 'Curated by',
 	},
+	descriptionLabel: {
+		id: 'collection.label.description',
+		defaultMessage: 'Description',
+	},
+	detailsLabel: {
+		id: 'collection.label.details',
+		defaultMessage: 'Details',
+	},
 	deleteModalDescription: {
 		id: 'collection.delete-modal.description',
-		defaultMessage: 'This will remove this collection forever. This action cannot be undone.',
+		defaultMessage: 'This will permanently delete this collection. This action cannot be undone.',
 	},
 	deleteModalTitle: {
 		id: 'collection.delete-modal.title',
@@ -469,21 +483,12 @@ const messages = defineMessages({
 	},
 	noProjectsLabel: {
 		id: 'collection.label.no-projects',
-		defaultMessage: 'This collection has no projects!',
-	},
-	noProjectsAuthLabel: {
-		id: 'collection.label.no-projects-auth',
-		defaultMessage:
-			"You don't have any projects.\nWould you like to <create-link>add one</create-link>?",
-	},
-	ownerLabel: {
-		id: 'collection.label.owner',
-		defaultMessage: 'Owner',
+		defaultMessage: 'No projects in collection yet',
 	},
 	projectsCountLabel: {
 		id: 'collection.label.projects-count',
 		defaultMessage:
-			'{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
+			'{count, plural, =0 {No projects yet} one {<stat>{count}</stat> project} other {<stat>{count}</stat> {type}}}',
 	},
 	removeProjectButton: {
 		id: 'collection.button.remove-project',
@@ -499,22 +504,29 @@ const messages = defineMessages({
 	},
 })
 
-const data = useNuxtApp()
-const route = useNativeRoute()
-const auth = await useAuth()
-const cosmetics = useCosmetics()
-const tags = useGeneratedState()
+const returnLink = computed(() => {
+	const from = router.options?.history?.state?.back
+	if (from?.startsWith('/dashboard/collections')) {
+		return {
+			link: from,
+			message: defineMessage({
+				id: 'collection.return-link.dashboard-collections',
+				defaultMessage: 'Your collections',
+			}),
+		}
+	} else if (from?.startsWith('/user/')) {
+		return {
+			link: from,
+			message: defineMessage({
+				id: 'collection.return-link.user',
+				defaultMessage: `{user}'s profile`,
+			}),
+		}
+	}
+	return null
+})
 
-const isEditing = ref(false)
-
-function cycleSearchDisplayMode() {
-	cosmetics.value.searchDisplayMode.collection = data.$cycleValue(
-		cosmetics.value.searchDisplayMode.collection,
-		tags.value.projectViewModes,
-	)
-}
-
-let collection, refreshCollection, creator, projects, refreshProjects
+let collection, refreshCollection, creator, projects
 
 try {
 	if (route.params.id === 'following') {
@@ -528,7 +540,7 @@ try {
 			created: auth.value.user.created,
 			updated: auth.value.user.created,
 		})
-		;[{ data: projects, refresh: refreshProjects }] = await Promise.all([
+		;[{ data: projects }] = await Promise.all([
 			useAsyncData(
 				`user/${auth.value.user.id}/follows`,
 				() => useBaseFetch(`user/${auth.value.user.id}/follows`),
@@ -551,7 +563,7 @@ try {
 		)
 		collection = val.data
 		refreshCollection = val.refresh
-		;[{ data: creator }, { data: projects, refresh: refreshProjects }] = await Promise.all([
+		;[{ data: creator }, { data: projects }] = await Promise.all([
 			await useAsyncData(`user/${collection.value.user}`, () =>
 				useBaseFetch(`user/${collection.value.user}`),
 			),
@@ -623,93 +635,150 @@ const projectTypes = computed(() => {
 	return Array.from(projectSet)
 })
 
+const showUpdatedDate = computed(() => {
+	if (!collection.value?.updated || !collection.value?.created) {
+		return false
+	}
+	return dayjs(collection.value.updated).diff(dayjs(collection.value.created), 'minute') > 1
+})
+
+const editModal = ref(null)
+const iconInputRef = ref(null)
 const icon = ref(null)
 const deletedIcon = ref(false)
 const previewImage = ref(null)
+const saving = ref(false)
+const removing = ref(false)
 
-const name = ref(collection.value.name)
-const summary = ref(collection.value.description)
-const visibility = ref(collection.value.status)
-const removeProjects = ref([])
+const {
+	saved,
+	current,
+	reset,
+	save: saveCollection,
+} = useSavable(
+	() => ({
+		name: collection.value.name,
+		description: collection.value.description || null,
+		status: collection.value.status,
+	}),
+	async (changes) => {
+		saving.value = true
+		startLoading()
+		try {
+			if (deletedIcon.value) {
+				await api.labrinth.collections.deleteIcon(collection.value.id)
+			} else if (icon.value) {
+				const ext = icon.value?.type?.split('/').pop()
+				if (!ext) throw new Error('Invalid file type')
+				await api.labrinth.collections.editIcon(collection.value.id, icon.value, ext)
+			}
+
+			if (Object.keys(changes).length > 0) {
+				await api.labrinth.collections.edit(collection.value.id, changes)
+			}
+
+			await refreshCollection().then(reset)
+
+			icon.value = null
+			deletedIcon.value = false
+			previewImage.value = null
+
+			editModal.value?.hide()
+		} catch (err) {
+			handleError(err)
+		} finally {
+			await initUserCollections()
+			stopLoading()
+			saving.value = false
+		}
+	},
+)
 
 async function unfollowProject(project) {
 	await userFollowProject(project)
 	projects.value = projects.value.filter((x) => x.id !== project.id)
 }
 
-async function saveChanges() {
+async function removeProject(project) {
+	removing.value = true
 	startLoading()
 	try {
-		if (deletedIcon.value) {
-			await useBaseFetch(`collection/${collection.value.id}/icon`, {
-				method: 'DELETE',
-				apiVersion: 3,
-			})
-		} else if (icon.value) {
-			const ext = icon.value?.type?.split('/').pop()
-			if (!ext) throw new Error('Invalid file type')
-			await useBaseFetch(`collection/${collection.value.id}/icon?ext=${ext}`, {
-				method: 'PATCH',
-				body: icon.value,
-				apiVersion: 3,
-			})
-		}
+		const currentProjects = collection.value.projects || []
+		const updatedProjects = currentProjects.filter((id) => id !== project.id)
 
-		const projectsToRemove = removeProjects.value?.map((p) => p.id) ?? []
-		const newProjects = projects.value
-			.filter((p) => !projectsToRemove.includes(p.id))
-			.map((p) => p.id)
-		const newProjectIds = projectsToRemove.length > 0 ? newProjects : undefined
-
-		await useBaseFetch(`collection/${collection.value.id}`, {
-			method: 'PATCH',
-			body: {
-				name: name.value,
-				description: summary.value || null,
-				status: visibility.value,
-				new_projects: newProjectIds,
-			},
-			apiVersion: 3,
+		await api.labrinth.collections.edit(collection.value.id, {
+			new_projects: updatedProjects,
 		})
 
 		await refreshCollection()
-		await refreshProjects()
-
-		name.value = collection.value.name
-		summary.value = collection.value.description
-		visibility.value = collection.value.status
-		removeProjects.value = []
-
-		isEditing.value = false
+		projects.value = projects.value.filter((x) => x.id !== project.id)
+		await initUserCollections()
 	} catch (err) {
-		addNotification({
-			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err,
-			type: 'error',
-		})
+		handleError(err)
+	} finally {
+		removing.value = false
+		stopLoading()
+	}
+}
+
+const save = async () => {
+	const hasIconChanges = deletedIcon.value || icon.value
+	const hasCollectionChanges = computed(() => {
+		const keys = Object.keys(current.value)
+		for (const key of keys) {
+			if (saved.value[key] !== current.value[key]) {
+				return true
+			}
+		}
+		return false
+	}).value
+
+	if (!hasCollectionChanges && !hasIconChanges) {
+		return
+	}
+
+	if (hasCollectionChanges) {
+		saveCollection()
+	} else {
+		saving.value = true
+		startLoading()
+		try {
+			if (deletedIcon.value) {
+				await api.labrinth.collections.deleteIcon(collection.value.id)
+			} else if (icon.value) {
+				const ext = icon.value?.type?.split('/').pop()
+				if (!ext) throw new Error('Invalid file type')
+				await api.labrinth.collections.editIcon(collection.value.id, icon.value, ext)
+			}
+
+			await refreshCollection().then(reset)
+
+			icon.value = null
+			deletedIcon.value = false
+			previewImage.value = null
+
+			editModal.value?.hide()
+		} catch (err) {
+			handleError(err)
+		} finally {
+			await initUserCollections()
+			stopLoading()
+			saving.value = false
+		}
 	}
-	await initUserCollections()
-	stopLoading()
 }
 
 async function deleteCollection() {
 	startLoading()
 	try {
-		await useBaseFetch(`collection/${collection.value.id}`, {
-			method: 'DELETE',
-			apiVersion: 3,
-		})
+		await api.labrinth.collections.delete(collection.value.id)
 		if (auth.value.user.id === collection.value.user) {
 			await navigateTo('/dashboard/collections')
 		} else {
 			await navigateTo(`/user/${collection.value.user}/collections`)
 		}
 	} catch (err) {
-		addNotification({
-			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
+		handleError(err)
 	}
 	await initUserCollections()
 	stopLoading()
@@ -724,6 +793,14 @@ function showPreviewImage(files) {
 		previewImage.value = event.target.result
 	}
 }
+
+function openEditModal(event) {
+	reset()
+	icon.value = null
+	deletedIcon.value = false
+	previewImage.value = null
+	editModal.value?.show(event)
+}
 </script>
 
 <style scoped lang="scss">
@@ -731,106 +808,4 @@ function showPreviewImage(files) {
 	// Omorphia's dropdowns are harcoded in width, so we need to override that
 	width: 100% !important;
 }
-
-.inputs {
-	margin-bottom: 1rem;
-
-	input {
-		margin-top: 0.5rem;
-		width: 100%;
-	}
-
-	textarea {
-		min-height: 10rem;
-	}
-
-	label {
-		margin-bottom: 0;
-	}
-}
-
-.team-member {
-	align-items: center;
-	padding: 0.25rem 0.5rem;
-
-	.member-info {
-		overflow: hidden;
-		margin: auto 0 auto 0.75rem;
-
-		.name {
-			font-weight: bold;
-		}
-
-		p {
-			font-size: var(--font-size-sm);
-			margin: 0.2rem 0;
-		}
-	}
-}
-
-.remove-btn {
-	margin-top: auto;
-}
-
-.card {
-	padding: var(--spacing-card-lg);
-
-	.page-header__icon {
-		margin-block: 0;
-	}
-
-	.card__overlay {
-		top: var(--spacing-card-lg);
-		right: var(--spacing-card-lg);
-	}
-}
-
-.collection-info {
-	display: grid;
-	grid-template-columns: 1fr;
-}
-
-.date {
-	color: var(--color-text-secondary);
-	font-size: var(--font-size-nm);
-	display: flex;
-	align-items: center;
-	margin-bottom: 0.25rem;
-	cursor: default;
-
-	.label {
-		margin-right: 0.25rem;
-	}
-
-	svg {
-		height: 1rem;
-		margin-right: 0.25rem;
-	}
-}
-
-.card-header {
-	font-size: 1.125rem;
-	font-weight: bold;
-	color: var(--color-heading);
-	margin-bottom: 0.5rem;
-	width: fit-content;
-}
-
-.title {
-	margin: var(--gap-md) 0 var(--spacing-card-xs) 0;
-	font-size: var(--font-size-xl);
-	color: var(--color-text-dark);
-}
-
-.collection-label {
-	font-weight: 500;
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-}
-
-.collection-description {
-	margin-top: var(--spacing-card-sm);
-	margin-bottom: 0;
-}
 </style>
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 6c8b4ad7..5ca86cd4 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -27,7 +27,7 @@
 				:to="`/collection/following`"
 				class="universal-card recessed collection"
 			>
-				<Avatar src="https://cdn.modrinth.com/follow-collection.png" class="icon" />
+				<Avatar src="https://cdn.modrinth.com/follow-collection.png" size="64px" />
 				<div class="details">
 					<span class="title">{{ formatMessage(commonMessages.followedProjectsLabel) }}</span>
 					<span class="description">
@@ -57,7 +57,7 @@
 				:to="`/collection/${collection.id}`"
 				class="universal-card recessed collection"
 			>
-				<Avatar :src="collection.icon_url" class="icon" />
+				<Avatar :src="collection.icon_url" size="64px" />
 				<div class="details">
 					<span class="title">{{ collection.name }}</span>
 					<span class="description">
@@ -188,15 +188,6 @@ const orderedCollections = computed(() => {
 		gap: var(--gap-md);
 		margin-bottom: 0;
 
-		.icon {
-			width: 100% !important;
-			height: 6rem !important;
-			max-width: unset !important;
-			max-height: unset !important;
-			aspect-ratio: 1 / 1;
-			object-fit: cover;
-		}
-
 		.details {
 			display: flex;
 			flex-direction: column;
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 698c3a68..c39719de 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -205,12 +205,11 @@
 
 <script setup lang="ts">
 import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, ThemeSelector } from '@modrinth/ui'
+import { Button, injectNotificationManager, normalizeChildren, ThemeSelector } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 
-import { normalizeChildren } from '@/utils/vue-children.ts'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import type { DisplayLocation } from '~/plugins/cosmetics'
 import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index d98c3100..2a17dbf6 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -276,7 +276,7 @@
 				</ContentPageHeader>
 			</div>
 			<div class="normal-page__content">
-				<div v-if="navLinks.length >= 2" class="mb-4 max-w-full overflow-x-auto">
+				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
 					<NavTabs :links="navLinks" />
 				</div>
 				<div v-if="projects.length > 0">
@@ -352,7 +352,7 @@
 						class="card collection-item"
 					>
 						<div class="collection">
-							<Avatar :src="collection.icon_url" class="icon" />
+							<Avatar :src="collection.icon_url" size="64px" />
 							<div class="details">
 								<h2 class="title">{{ collection.name }}</h2>
 								<div class="stats">
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 44b813d7..e78a8b75 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -7,6 +7,7 @@ import { ArchonServersV1Module } from './archon/servers/v1'
 import { ISO3166Module } from './iso3166'
 import { KyrosFilesV0Module } from './kyros/files/v0'
 import { LabrinthBillingInternalModule } from './labrinth/billing/internal'
+import { LabrinthCollectionsModule } from './labrinth/collections'
 import { LabrinthProjectsV2Module } from './labrinth/projects/v2'
 import { LabrinthProjectsV3Module } from './labrinth/projects/v3'
 import { LabrinthStateModule } from './labrinth/state'
@@ -30,6 +31,7 @@ export const MODULE_REGISTRY = {
 	iso3166_data: ISO3166Module,
 	kyros_files_v0: KyrosFilesV0Module,
 	labrinth_billing_internal: LabrinthBillingInternalModule,
+	labrinth_collections: LabrinthCollectionsModule,
 	labrinth_projects_v2: LabrinthProjectsV2Module,
 	labrinth_projects_v3: LabrinthProjectsV3Module,
 	labrinth_state: LabrinthStateModule,
diff --git a/packages/api-client/src/modules/labrinth/collections.ts b/packages/api-client/src/modules/labrinth/collections.ts
new file mode 100644
index 00000000..d8e499bc
--- /dev/null
+++ b/packages/api-client/src/modules/labrinth/collections.ts
@@ -0,0 +1,128 @@
+import { AbstractModule } from '../../core/abstract-module.js'
+import type { Labrinth } from '../types'
+
+export class LabrinthCollectionsModule extends AbstractModule {
+	public getModuleID(): string {
+		return 'labrinth_collections'
+	}
+
+	/**
+	 * Get a collection by ID (v3)
+	 *
+	 * @param id - Collection ID
+	 * @returns Promise resolving to the collection data
+	 *
+	 * @example
+	 * ```typescript
+	 * const collection = await client.labrinth.collections.get('AANobbMI')
+	 * ```
+	 */
+	public async get(id: string): Promise<Labrinth.Collections.Collection> {
+		return this.client.request<Labrinth.Collections.Collection>(`/collection/${id}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'GET',
+		})
+	}
+
+	/**
+	 * Get multiple collections by IDs (v3)
+	 *
+	 * @param ids - Array of collection IDs
+	 * @returns Promise resolving to array of collections
+	 *
+	 * @example
+	 * ```typescript
+	 * const collections = await client.labrinth.collections.getMultiple(['AANobbMI', 'BBNoobMI'])
+	 * ```
+	 */
+	public async getMultiple(ids: string[]): Promise<Labrinth.Collections.Collection[]> {
+		return this.client.request<Labrinth.Collections.Collection[]>(`/collections`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'GET',
+			params: { ids: JSON.stringify(ids) },
+		})
+	}
+
+	/**
+	 * Edit a collection (v3)
+	 *
+	 * @param id - Collection ID
+	 * @param data - Collection update data
+	 *
+	 * @example
+	 * ```typescript
+	 * await client.labrinth.collections.edit('AANobbMI', {
+	 *   name: 'Updated name',
+	 *   description: 'Updated description',
+	 *   status: 'listed'
+	 * })
+	 * ```
+	 */
+	public async edit(id: string, data: Labrinth.Collections.EditCollectionRequest): Promise<void> {
+		return this.client.request(`/collection/${id}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'PATCH',
+			body: data,
+		})
+	}
+
+	/**
+	 * Delete a collection (v3)
+	 *
+	 * @param id - Collection ID
+	 *
+	 * @example
+	 * ```typescript
+	 * await client.labrinth.collections.delete('AANobbMI')
+	 * ```
+	 */
+	public async delete(id: string): Promise<void> {
+		return this.client.request(`/collection/${id}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'DELETE',
+		})
+	}
+
+	/**
+	 * Edit a collection icon (v3)
+	 *
+	 * @param id - Collection ID
+	 * @param icon - Icon file
+	 * @param ext - File extension (e.g., 'png', 'jpg')
+	 *
+	 * @example
+	 * ```typescript
+	 * await client.labrinth.collections.editIcon('AANobbMI', iconFile, 'png')
+	 * ```
+	 */
+	public async editIcon(id: string, icon: Blob, ext: string): Promise<void> {
+		return this.client.request(`/collection/${id}/icon?ext=${ext}`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'PATCH',
+			body: icon,
+		})
+	}
+
+	/**
+	 * Delete a collection icon (v3)
+	 *
+	 * @param id - Collection ID
+	 *
+	 * @example
+	 * ```typescript
+	 * await client.labrinth.collections.deleteIcon('AANobbMI')
+	 * ```
+	 */
+	public async deleteIcon(id: string): Promise<void> {
+		return this.client.request(`/collection/${id}/icon`, {
+			api: 'labrinth',
+			version: 3,
+			method: 'DELETE',
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/labrinth/index.ts b/packages/api-client/src/modules/labrinth/index.ts
index fd99f54b..2909dca0 100644
--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -1,4 +1,5 @@
 export * from './billing/internal'
+export * from './collections'
 export * from './projects/v2'
 export * from './projects/v3'
 export * from './state'
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index 2b3a4f77..46ba1ca6 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -477,6 +477,77 @@ export namespace Labrinth {
 		}
 	}
 
+	export namespace Users {
+		namespace Common {
+			export type Role = 'developer' | 'moderator' | 'admin'
+
+			export type AuthProvider =
+				| 'github'
+				| 'discord'
+				| 'microsoft'
+				| 'gitlab'
+				| 'google'
+				| 'steam'
+				| 'paypal'
+
+			export type UserPayoutData = {
+				paypal_address?: string
+				paypal_country?: string
+				venmo_handle?: string
+				balance: number
+			}
+		}
+
+		export namespace v2 {
+			export type Role = Common.Role
+			export type AuthProvider = Common.AuthProvider
+			export type UserPayoutData = Common.UserPayoutData
+
+			export type User = {
+				id: string
+				username: string
+				name?: string
+				avatar_url?: string
+				bio?: string
+				created: string
+				role: Role
+				badges: number
+				auth_providers?: AuthProvider[]
+				email?: string
+				email_verified?: boolean
+				has_password?: boolean
+				has_totp?: boolean
+				payout_data?: UserPayoutData
+				github_id?: number
+			}
+		}
+
+		export namespace v3 {
+			export type Role = Common.Role
+			export type AuthProvider = Common.AuthProvider
+			export type UserPayoutData = Common.UserPayoutData
+
+			export type User = {
+				id: string
+				username: string
+				avatar_url?: string
+				bio?: string
+				created: string
+				role: Role
+				badges: number
+				auth_providers?: AuthProvider[]
+				email?: string
+				email_verified?: boolean
+				has_password?: boolean
+				has_totp?: boolean
+				payout_data?: UserPayoutData
+				stripe_customer_id?: string
+				allow_friend_requests?: boolean
+				github_id?: number
+			}
+		}
+	}
+
 	export namespace Tags {
 		export namespace v2 {
 			export interface Category {
@@ -541,6 +612,30 @@ export namespace Labrinth {
 		}
 	}
 
+	export namespace Collections {
+		export type CollectionStatus = 'listed' | 'unlisted' | 'private' | 'rejected' | 'unknown'
+
+		export type Collection = {
+			id: string
+			user: string
+			name: string
+			description: string | null
+			icon_url: string | null
+			color: number | null
+			status: CollectionStatus
+			created: string
+			updated: string
+			projects: string[]
+		}
+
+		export type EditCollectionRequest = {
+			name?: string
+			description?: string | null
+			status?: CollectionStatus
+			new_projects?: string[]
+		}
+	}
+
 	export namespace State {
 		export interface GeneratedState {
 			categories: Tags.v2.Category[]
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index ccd08db3..99c9df5b 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -93,6 +93,7 @@ import _Heading2Icon from './icons/heading-2.svg?component'
 import _Heading3Icon from './icons/heading-3.svg?component'
 import _HeartIcon from './icons/heart.svg?component'
 import _HeartHandshakeIcon from './icons/heart-handshake.svg?component'
+import _HeartMinusIcon from './icons/heart-minus.svg?component'
 import _HistoryIcon from './icons/history.svg?component'
 import _HomeIcon from './icons/home.svg?component'
 import _ImageIcon from './icons/image.svg?component'
@@ -308,6 +309,7 @@ export const Heading1Icon = _Heading1Icon
 export const Heading2Icon = _Heading2Icon
 export const Heading3Icon = _Heading3Icon
 export const HeartHandshakeIcon = _HeartHandshakeIcon
+export const HeartMinusIcon = _HeartMinusIcon
 export const HeartIcon = _HeartIcon
 export const HistoryIcon = _HistoryIcon
 export const HomeIcon = _HomeIcon
diff --git a/packages/assets/icons/heart-minus.svg b/packages/assets/icons/heart-minus.svg
new file mode 100644
index 00000000..d12d4985
--- /dev/null
+++ b/packages/assets/icons/heart-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-minus-icon lucide-heart-minus"><path d="m14.876 18.99-1.368 1.323a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.244 1.572"/><path d="M15 15h6"/></svg>
\ No newline at end of file
diff --git a/packages/assets/illustrations/empty.svg b/packages/assets/illustrations/empty.svg
new file mode 100644
index 00000000..9c0f83d3
--- /dev/null
+++ b/packages/assets/illustrations/empty.svg
@@ -0,0 +1,47 @@
+<svg viewBox="0 50 250 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z"
+		fill="var(--surface-2, #1D1F23)"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M113.119 112.307C113.04 112.86 113 113.425 113 114C113 120.627 118.373 126 125 126C131.627 126 137 120.627 137 114C137 113.425 136.96 112.86 136.881 112.307H166V139C166 140.657 164.657 142 163 142H87C85.3431 142 84 140.657 84 139V112.307H113.119Z"
+		fill="var(--surface-1, #16181C)"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M138 112C138 119.18 132.18 125 125 125C117.82 125 112 119.18 112 112C112 111.767 112.006 111.536 112.018 111.307H84L93.5604 83.0389C93.9726 81.8202 95.1159 81 96.4023 81H153.598C154.884 81 156.027 81.8202 156.44 83.0389L166 111.307H137.982C137.994 111.536 138 111.767 138 112Z"
+		fill="var(--surface-1, #16181C)"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M136.098 112.955C136.098 118.502 131.129 124 125 124C118.871 124 113.902 118.502 113.902 112.955C113.902 112.775 113.908 111.596 113.918 111.419H93L101.161 91.5755C101.513 90.6338 102.489 90 103.587 90H146.413C147.511 90 148.487 90.6338 148.839 91.5755L157 111.419H136.082C136.092 111.596 136.098 112.775 136.098 112.955Z"
+		fill="var(--surface-2, #1D1F23)"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M85.25 111.512V138C85.25 138.966 86.0335 139.75 87 139.75H163C163.966 139.75 164.75 138.966 164.75 138V111.512L155.255 83.4393C155.015 82.7285 154.348 82.25 153.598 82.25H96.4023C95.6519 82.25 94.985 82.7285 94.7446 83.4393L85.25 111.512Z"
+		stroke="var(--surface-4, #34363C)"
+		stroke-width="2.5"
+	/>
+	<path
+		d="M98 111C101.937 111 106.185 111 110.745 111C112.621 111 112.621 112.319 112.621 113C112.621 119.627 118.117 125 124.897 125C131.677 125 137.173 119.627 137.173 113C137.173 112.319 137.173 111 139.05 111H164M90.5737 111H93H90.5737Z"
+		stroke="var(--surface-4, #34363C)"
+		stroke-width="2.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M150.1 58.3027L139 70.7559M124.1 54V70.7559V54ZM98 58.3027L109.1 70.7559L98 58.3027Z"
+		stroke="var(--surface-3, #27292E)"
+		stroke-width="2.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index b04a369d..fd299ed6 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -62,6 +62,7 @@ import _WindowsIcon from './external/windows.svg?component'
 import _YouTubeIcon from './external/youtube.svg?component'
 import _YouTubeGaming from './external/youtubegaming.svg?component'
 import _YouTubeShortsIcon from './external/youtubeshorts.svg?component'
+import _EmptyIllustration from './illustrations/empty.svg?component'
 
 export const ModrinthIcon = _ModrinthIcon
 export const BrowserWindowSuccessIllustration = _BrowserWindowSuccessIllustration
@@ -119,3 +120,5 @@ export const MinecraftServerIcon = _MinecraftServerIcon
 export * from './generated-icons'
 export { default as ClassicPlayerModel } from './models/classic-player.gltf?url'
 export { default as SlimPlayerModel } from './models/slim-player.gltf?url'
+
+export const EmptyIllustration = _EmptyIllustration
diff --git a/packages/ui/src/components/affiliate/index.ts b/packages/ui/src/components/affiliate/index.ts
new file mode 100644
index 00000000..1b0857d2
--- /dev/null
+++ b/packages/ui/src/components/affiliate/index.ts
@@ -0,0 +1,2 @@
+export { default as AffiliateLinkCard } from './AffiliateLinkCard.vue'
+export { default as AffiliateLinkCreateModal } from './AffiliateLinkCreateModal.vue'
diff --git a/packages/ui/src/components/base/HorizontalRule.vue b/packages/ui/src/components/base/HorizontalRule.vue
new file mode 100644
index 00000000..9abff19d
--- /dev/null
+++ b/packages/ui/src/components/base/HorizontalRule.vue
@@ -0,0 +1,3 @@
+<template>
+	<div class="h-[1px] w-full bg-divider"></div>
+</template>
diff --git a/packages/ui/src/components/base/RadioButtons.vue b/packages/ui/src/components/base/RadioButtons.vue
index b1ec4f1d..f93dc38b 100644
--- a/packages/ui/src/components/base/RadioButtons.vue
+++ b/packages/ui/src/components/base/RadioButtons.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="flex flex-wrap gap-2">
+	<div class="flex flex-col gap-1">
 		<button
 			v-for="(item, index) in items"
 			:key="`radio-button-${index}`"
-			class="p-0 py-2 px-2 border-0 font-medium flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
+			class="p-0 py-2 px-2 w-fit border-0 font-medium flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
 			:class="{
 				'text-contrast bg-button-bg': selected === item,
 				'text-primary bg-transparent': selected !== item,
diff --git a/packages/ui/src/components/base/StatItem.vue b/packages/ui/src/components/base/StatItem.vue
deleted file mode 100644
index a54c49b0..00000000
--- a/packages/ui/src/components/base/StatItem.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-	<div class="flex items-center gap-3">
-		<slot></slot>
-		<div class="flex flex-col">
-			<span class="font-bold">{{ value }}</span>
-			<span class="text-secondary">{{ label }}</span>
-		</div>
-	</div>
-</template>
-
-<script setup>
-defineProps({
-	label: {
-		type: String,
-		required: true,
-	},
-	value: {
-		type: String,
-		required: true,
-	},
-})
-</script>
-<style scoped>
-:slotted(*) {
-	@apply h-6 w-6 text-secondary;
-}
-</style>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
new file mode 100644
index 00000000..cfaf8184
--- /dev/null
+++ b/packages/ui/src/components/base/index.ts
@@ -0,0 +1,56 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as Admonition } from './Admonition.vue'
+export { default as AppearingProgressBar } from './AppearingProgressBar.vue'
+export { default as AutoBrandIcon } from './AutoBrandIcon.vue'
+export { default as AutoLink } from './AutoLink.vue'
+export { default as Avatar } from './Avatar.vue'
+export { default as Badge } from './Badge.vue'
+export { default as BulletDivider } from './BulletDivider.vue'
+export { default as Button } from './Button.vue'
+export { default as ButtonStyled } from './ButtonStyled.vue'
+export { default as Card } from './Card.vue'
+export { default as Checkbox } from './Checkbox.vue'
+export { default as Chips } from './Chips.vue'
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
+export { default as Combobox } from './Combobox.vue'
+export { default as ContentPageHeader } from './ContentPageHeader.vue'
+export { default as CopyCode } from './CopyCode.vue'
+export { default as DoubleIcon } from './DoubleIcon.vue'
+export { default as DropArea } from './DropArea.vue'
+export { default as DropdownSelect } from './DropdownSelect.vue'
+export { default as EnvironmentIndicator } from './EnvironmentIndicator.vue'
+export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
+export { default as FileInput } from './FileInput.vue'
+export type { FilterBarOption } from './FilterBar.vue'
+export { default as FilterBar } from './FilterBar.vue'
+export { default as HeadingLink } from './HeadingLink.vue'
+export { default as HorizontalRule } from './HorizontalRule.vue'
+export { default as IconSelect } from './IconSelect.vue'
+export type { JoinedButtonAction } from './JoinedButtons.vue'
+export { default as JoinedButtons } from './JoinedButtons.vue'
+export { default as LoadingIndicator } from './LoadingIndicator.vue'
+export { default as ManySelect } from './ManySelect.vue'
+export { default as MarkdownEditor } from './MarkdownEditor.vue'
+export { default as OptionGroup } from './OptionGroup.vue'
+export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
+export { default as OverflowMenu } from './OverflowMenu.vue'
+export { default as Page } from './Page.vue'
+export { default as Pagination } from './Pagination.vue'
+export { default as PopoutMenu } from './PopoutMenu.vue'
+export { default as PreviewSelectButton } from './PreviewSelectButton.vue'
+export { default as ProgressBar } from './ProgressBar.vue'
+export { default as ProgressSpinner } from './ProgressSpinner.vue'
+export { default as ProjectCard } from './ProjectCard.vue'
+export { default as RadialHeader } from './RadialHeader.vue'
+export { default as RadioButtons } from './RadioButtons.vue'
+export { default as ScrollablePanel } from './ScrollablePanel.vue'
+export { default as ServerNotice } from './ServerNotice.vue'
+export { default as SettingsLabel } from './SettingsLabel.vue'
+export { default as SimpleBadge } from './SimpleBadge.vue'
+export { default as Slider } from './Slider.vue'
+export { default as SmartClickable } from './SmartClickable.vue'
+export { default as TagItem } from './TagItem.vue'
+export { default as Timeline } from './Timeline.vue'
+export { default as Toggle } from './Toggle.vue'
+export { default as UnsavedChangesPopup } from './UnsavedChangesPopup.vue'
diff --git a/packages/ui/src/components/billing/index.ts b/packages/ui/src/components/billing/index.ts
new file mode 100644
index 00000000..f2ef2235
--- /dev/null
+++ b/packages/ui/src/components/billing/index.ts
@@ -0,0 +1,5 @@
+export { default as AddPaymentMethodModal } from './AddPaymentMethodModal.vue'
+export { default as ModrinthServersPurchaseModal } from './ModrinthServersPurchaseModal.vue'
+export { default as PurchaseModal } from './PurchaseModal.vue'
+export { default as ServersSpecs } from './ServersSpecs.vue'
+export { default as ServersUpgradeModalWrapper } from './ServersUpgradeModalWrapper.vue'
diff --git a/packages/ui/src/components/brand/index.ts b/packages/ui/src/components/brand/index.ts
new file mode 100644
index 00000000..c3dc1ec4
--- /dev/null
+++ b/packages/ui/src/components/brand/index.ts
@@ -0,0 +1,2 @@
+export { default as AnimatedLogo } from './AnimatedLogo.vue'
+export { default as TextLogo } from './TextLogo.vue'
diff --git a/packages/ui/src/components/changelog/index.ts b/packages/ui/src/components/changelog/index.ts
new file mode 100644
index 00000000..eb6ab0a1
--- /dev/null
+++ b/packages/ui/src/components/changelog/index.ts
@@ -0,0 +1 @@
+export { default as ChangelogEntry } from './ChangelogEntry.vue'
diff --git a/packages/ui/src/components/chart/index.ts b/packages/ui/src/components/chart/index.ts
new file mode 100644
index 00000000..7d215c98
--- /dev/null
+++ b/packages/ui/src/components/chart/index.ts
@@ -0,0 +1,2 @@
+export { default as Chart } from './Chart.vue'
+export { default as CompactChart } from './CompactChart.vue'
diff --git a/packages/ui/src/components/content/index.ts b/packages/ui/src/components/content/index.ts
new file mode 100644
index 00000000..11714d04
--- /dev/null
+++ b/packages/ui/src/components/content/index.ts
@@ -0,0 +1,3 @@
+export { default as ContentListPanel } from './ContentListPanel.vue'
+export type { Article as NewsArticle } from './NewsArticleCard.vue'
+export { default as NewsArticleCard } from './NewsArticleCard.vue'
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 12ee057d..1f00fa63 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,143 +1,16 @@
-// Base content
-export { default as Accordion } from './base/Accordion.vue'
-export { default as Admonition } from './base/Admonition.vue'
-export { default as AppearingProgressBar } from './base/AppearingProgressBar.vue'
-export { default as AutoBrandIcon } from './base/AutoBrandIcon.vue'
-export { default as AutoLink } from './base/AutoLink.vue'
-export { default as Avatar } from './base/Avatar.vue'
-export { default as Badge } from './base/Badge.vue'
-export { default as BulletDivider } from './base/BulletDivider.vue'
-export { default as Button } from './base/Button.vue'
-export { default as ButtonStyled } from './base/ButtonStyled.vue'
-export { default as Card } from './base/Card.vue'
-export { default as Checkbox } from './base/Checkbox.vue'
-export { default as Chips } from './base/Chips.vue'
-export { default as Collapsible } from './base/Collapsible.vue'
-export { default as CollapsibleRegion } from './base/CollapsibleRegion.vue'
-export { default as Combobox } from './base/Combobox.vue'
-export { default as ContentPageHeader } from './base/ContentPageHeader.vue'
-export { default as CopyCode } from './base/CopyCode.vue'
-export { default as DoubleIcon } from './base/DoubleIcon.vue'
-export { default as DropArea } from './base/DropArea.vue'
-export { default as DropdownSelect } from './base/DropdownSelect.vue'
-export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
-export { default as ErrorInformationCard } from './base/ErrorInformationCard.vue'
-export { default as FileInput } from './base/FileInput.vue'
-export type { FilterBarOption } from './base/FilterBar.vue'
-export { default as FilterBar } from './base/FilterBar.vue'
-export { default as HeadingLink } from './base/HeadingLink.vue'
-export { default as IconSelect } from './base/IconSelect.vue'
-export type { JoinedButtonAction } from './base/JoinedButtons.vue'
-export { default as JoinedButtons } from './base/JoinedButtons.vue'
-export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
-export { default as ManySelect } from './base/ManySelect.vue'
-export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
-export { default as OptionGroup } from './base/OptionGroup.vue'
-export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
-export { default as OverflowMenu } from './base/OverflowMenu.vue'
-export { default as Page } from './base/Page.vue'
-export { default as Pagination } from './base/Pagination.vue'
-export { default as PopoutMenu } from './base/PopoutMenu.vue'
-export { default as PreviewSelectButton } from './base/PreviewSelectButton.vue'
-export { default as ProgressBar } from './base/ProgressBar.vue'
-export { default as ProgressSpinner } from './base/ProgressSpinner.vue'
-export { default as ProjectCard } from './base/ProjectCard.vue'
-export { default as RadialHeader } from './base/RadialHeader.vue'
-export { default as RadioButtons } from './base/RadioButtons.vue'
-export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
-export { default as ServerNotice } from './base/ServerNotice.vue'
-export { default as SettingsLabel } from './base/SettingsLabel.vue'
-export { default as SimpleBadge } from './base/SimpleBadge.vue'
-export { default as Slider } from './base/Slider.vue'
-export { default as SmartClickable } from './base/SmartClickable.vue'
-export { default as StatItem } from './base/StatItem.vue'
-export { default as TagItem } from './base/TagItem.vue'
-export { default as Timeline } from './base/Timeline.vue'
-export { default as Toggle } from './base/Toggle.vue'
-export { default as UnsavedChangesPopup } from './base/UnsavedChangesPopup.vue'
-
-// Branding
-export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
-export { default as TextLogo } from './brand/TextLogo.vue'
-
-// Changelog
-export { default as ChangelogEntry } from './changelog/ChangelogEntry.vue'
-
-// Charts
-export { default as Chart } from './chart/Chart.vue'
-export { default as CompactChart } from './chart/CompactChart.vue'
-
-// Content
-export { default as ContentListPanel } from './content/ContentListPanel.vue'
-export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
-export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
-
-// Modals
-export { default as ConfirmModal } from './modal/ConfirmModal.vue'
-export { default as Modal } from './modal/Modal.vue'
-export { default as NewModal } from './modal/NewModal.vue'
-export { default as ShareModal } from './modal/ShareModal.vue'
-export type { Tab as TabbedModalTab } from './modal/TabbedModal.vue'
-export { default as TabbedModal } from './modal/TabbedModal.vue'
-
-// Navigation
-export { default as Breadcrumbs } from './nav/Breadcrumbs.vue'
-export { default as NavItem } from './nav/NavItem.vue'
-export { default as NavRow } from './nav/NavRow.vue'
-export { default as NavStack } from './nav/NavStack.vue'
-export { default as NotificationPanel } from './nav/NotificationPanel.vue'
-export { default as PagewideBanner } from './nav/PagewideBanner.vue'
-
-// Project
+export * from './affiliate'
+export * from './base'
+export * from './billing'
+export * from './brand'
+export * from './changelog'
+export * from './chart'
+export * from './content'
+export * from './modal'
+export * from './nav'
+export * from './page'
 export * from './project'
-
-// Search
-export { default as BrowseFiltersPanel } from './search/BrowseFiltersPanel.vue'
-export { default as Categories } from './search/Categories.vue'
-export { default as SearchDropdown } from './search/SearchDropdown.vue'
-export { default as SearchFilter } from './search/SearchFilter.vue'
-export { default as SearchFilterControl } from './search/SearchFilterControl.vue'
-export { default as SearchFilterOption } from './search/SearchFilterOption.vue'
-export { default as SearchSidebarFilter } from './search/SearchSidebarFilter.vue'
-
-// Affiliate
-export { default as AffiliateLinkCard } from './affiliate/AffiliateLinkCard.vue'
-export { default as AffiliateLinkCreateModal } from './affiliate/AffiliateLinkCreateModal.vue'
-
-// Billing
-export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModal.vue'
-export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.vue'
-export { default as PurchaseModal } from './billing/PurchaseModal.vue'
-export { default as ServersUpgradeModalWrapper } from './billing/ServersUpgradeModalWrapper.vue'
-
-// Skins
-export { default as CapeButton } from './skin/CapeButton.vue'
-export { default as CapeLikeTextButton } from './skin/CapeLikeTextButton.vue'
-export { default as SkinButton } from './skin/SkinButton.vue'
-export { default as SkinLikeTextButton } from './skin/SkinLikeTextButton.vue'
-export { default as SkinPreviewRenderer } from './skin/SkinPreviewRenderer.vue'
-
-// Version
-export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'
-export { default as VersionFilterControl } from './version/VersionFilterControl.vue'
-export { default as VersionSummary } from './version/VersionSummary.vue'
-
-// Settings
-export { default as ThemeSelector } from './settings/ThemeSelector.vue'
-
-// Servers
-export { default as ServersSpecs } from './billing/ServersSpecs.vue'
-export { default as BackupCreateModal } from './servers/backups/BackupCreateModal.vue'
-export { default as BackupDeleteModal } from './servers/backups/BackupDeleteModal.vue'
-export { default as BackupItem } from './servers/backups/BackupItem.vue'
-export { default as BackupRenameModal } from './servers/backups/BackupRenameModal.vue'
-export { default as BackupRestoreModal } from './servers/backups/BackupRestoreModal.vue'
-export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
-export { default as LoaderIcon } from './servers/icons/LoaderIcon.vue'
-export { default as ServerIcon } from './servers/icons/ServerIcon.vue'
-export { default as ServerInfoLabels } from './servers/labels/ServerInfoLabels.vue'
-export { default as MedalBackgroundImage } from './servers/marketing/MedalBackgroundImage.vue'
-export { default as MedalServerListing } from './servers/marketing/MedalServerListing.vue'
-export type { PendingChange } from './servers/ServerListing.vue'
-export { default as ServerListing } from './servers/ServerListing.vue'
-export { default as ServersPromo } from './servers/ServersPromo.vue'
+export * from './search'
+export * from './servers'
+export * from './settings'
+export * from './skin'
+export * from './version'
diff --git a/packages/ui/src/components/modal/index.ts b/packages/ui/src/components/modal/index.ts
new file mode 100644
index 00000000..89c4cf02
--- /dev/null
+++ b/packages/ui/src/components/modal/index.ts
@@ -0,0 +1,6 @@
+export { default as ConfirmModal } from './ConfirmModal.vue'
+export { default as Modal } from './Modal.vue'
+export { default as NewModal } from './NewModal.vue'
+export { default as ShareModal } from './ShareModal.vue'
+export type { Tab as TabbedModalTab } from './TabbedModal.vue'
+export { default as TabbedModal } from './TabbedModal.vue'
diff --git a/packages/ui/src/components/nav/NavItem.vue b/packages/ui/src/components/nav/NavItem.vue
deleted file mode 100644
index 19176779..00000000
--- a/packages/ui/src/components/nav/NavItem.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup>
-import Button from '../base/Button.vue'
-
-defineProps({
-	link: {
-		type: String,
-		default: null,
-	},
-	external: {
-		type: Boolean,
-		default: false,
-	},
-	action: {
-		type: Function,
-		default: null,
-	},
-	selected: {
-		type: Boolean,
-		default: false,
-	},
-	label: {
-		type: String,
-		required: true,
-	},
-	icon: {
-		type: String,
-		default: null,
-	},
-})
-</script>
-
-<template>
-	<Button
-		:link="link"
-		:external="external"
-		:action="action"
-		design="nav"
-		class="quiet-disabled"
-		:class="{
-			selected: selected,
-		}"
-		:disabled="selected"
-		:navlabel="label"
-	>
-		<slot />
-		{{ label }}
-	</Button>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/packages/ui/src/components/nav/NavRow.vue b/packages/ui/src/components/nav/NavRow.vue
deleted file mode 100644
index 45d64594..00000000
--- a/packages/ui/src/components/nav/NavRow.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-	<nav class="navigation">
-		<router-link
-			v-for="(link, index) in filteredLinks"
-			v-show="link.shown === undefined ? true : link.shown"
-			:key="index"
-			ref="linkElements"
-			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-			class="nav-link button-animation"
-		>
-			<span>{{ link.label }}</span>
-		</router-link>
-		<div
-			class="nav-indicator"
-			:style="{
-				left: positionToMoveX,
-				top: positionToMoveY,
-				width: sliderWidth,
-				opacity: activeIndex === -1 ? 0 : 1,
-			}"
-			aria-hidden="true"
-		/>
-	</nav>
-</template>
-
-<script>
-export default {
-	props: {
-		links: {
-			default: () => [],
-			type: Array,
-		},
-		query: {
-			default: null,
-			type: String,
-		},
-	},
-	data() {
-		return {
-			sliderPositionX: 0,
-			sliderPositionY: 18,
-			selectedElementWidth: 0,
-			activeIndex: -1,
-			oldIndex: -1,
-		}
-	},
-	computed: {
-		filteredLinks() {
-			return this.links.filter((x) => (x.shown === undefined ? true : x.shown))
-		},
-		positionToMoveX() {
-			return `${this.sliderPositionX}px`
-		},
-		positionToMoveY() {
-			return `${this.sliderPositionY}px`
-		},
-		sliderWidth() {
-			return `${this.selectedElementWidth}px`
-		},
-	},
-	watch: {
-		'$route.path': {
-			handler() {
-				this.pickLink()
-			},
-		},
-		'$route.query': {
-			handler() {
-				if (this.query) this.pickLink()
-			},
-		},
-	},
-	mounted() {
-		window.addEventListener('resize', this.pickLink)
-		this.pickLink()
-	},
-	unmounted() {
-		window.removeEventListener('resize', this.pickLink)
-	},
-	methods: {
-		pickLink() {
-			this.activeIndex = this.query
-				? this.filteredLinks.findIndex(
-						(x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query],
-					)
-				: this.filteredLinks.findIndex((x) => x.href === decodeURIComponent(this.$route.path))
-
-			if (this.activeIndex !== -1) {
-				this.startAnimation()
-			} else {
-				this.oldIndex = -1
-				this.sliderPositionX = 0
-				this.selectedElementWidth = 0
-			}
-		},
-		startAnimation() {
-			const el = this.$refs.linkElements[this.activeIndex].$el
-
-			this.sliderPositionX = el.offsetLeft
-			this.sliderPositionY = el.offsetTop + el.offsetHeight
-			this.selectedElementWidth = el.offsetWidth
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.navigation {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	grid-gap: 1rem;
-	flex-wrap: wrap;
-	position: relative;
-
-	.nav-link {
-		text-transform: capitalize;
-		font-weight: var(--font-weight-bold);
-		color: var(--color-base);
-		position: relative;
-
-		&:hover {
-			color: var(--color-base);
-
-			&::after {
-				opacity: 0.4;
-			}
-		}
-
-		&:active::after {
-			opacity: 0.2;
-		}
-
-		&.router-link-exact-active {
-			color: var(--color-base);
-
-			&::after {
-				opacity: 1;
-			}
-		}
-	}
-
-	&.use-animation {
-		.nav-link {
-			&.is-active::after {
-				opacity: 0;
-			}
-		}
-	}
-
-	.nav-indicator {
-		position: absolute;
-		height: 0.25rem;
-		bottom: -5px;
-		left: 0;
-		width: 3rem;
-		transition: all ease-in-out 0.2s;
-		border-radius: var(--radius-max);
-		background-color: var(--color-brand);
-
-		@media (prefers-reduced-motion) {
-			transition: none !important;
-		}
-	}
-}
-</style>
diff --git a/packages/ui/src/components/nav/NavStack.vue b/packages/ui/src/components/nav/NavStack.vue
deleted file mode 100644
index 73cb4fdf..00000000
--- a/packages/ui/src/components/nav/NavStack.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-	<div class="omorphia__navstack">
-		<slot />
-	</div>
-</template>
-
-<style lang="scss" scoped>
-.omorphia__navstack {
-	display: flex;
-	flex-direction: column;
-
-	:deep(.btn) {
-		position: relative;
-		width: 100%;
-
-		&.selected {
-			background-color: var(--color-button-bg);
-			font-weight: bold;
-		}
-	}
-}
-</style>
diff --git a/packages/ui/src/components/nav/index.ts b/packages/ui/src/components/nav/index.ts
new file mode 100644
index 00000000..19463e58
--- /dev/null
+++ b/packages/ui/src/components/nav/index.ts
@@ -0,0 +1,3 @@
+export { default as Breadcrumbs } from './Breadcrumbs.vue'
+export { default as NotificationPanel } from './NotificationPanel.vue'
+export { default as PagewideBanner } from './PagewideBanner.vue'
diff --git a/packages/ui/src/components/page/NormalPage.vue b/packages/ui/src/components/page/NormalPage.vue
new file mode 100644
index 00000000..ef3f89f8
--- /dev/null
+++ b/packages/ui/src/components/page/NormalPage.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { injectPageContext } from '@modrinth/ui'
+
+defineProps<{
+	sidebar?: 'right' | 'left'
+}>()
+const { hierarchicalSidebarAvailable } = injectPageContext()
+</script>
+<template>
+	<div
+		class="ui-normal-page"
+		:class="{
+			'ui-normal-page--sidebar-left': sidebar === 'left' && !hierarchicalSidebarAvailable,
+			'ui-normal-page--sidebar-right': sidebar === 'right' && !hierarchicalSidebarAvailable,
+		}"
+	>
+		<div class="ui-normal-page__header">
+			<slot name="header" />
+		</div>
+		<div class="ui-normal-page__content">
+			<slot />
+		</div>
+		<template v-if="sidebar">
+			<template v-if="hierarchicalSidebarAvailable">
+				<Teleport to="#sidebar-teleport-target">
+					<slot name="sidebar" />
+				</Teleport>
+			</template>
+			<template v-else>
+				<div class="ui-normal-page__sidebar">
+					<slot name="sidebar" />
+				</div>
+			</template>
+		</template>
+	</div>
+</template>
+<style scoped>
+.ui-normal-page {
+	@apply grid gap-6 mx-auto py-4;
+	width: min(calc(100% - 2rem), calc(80rem - 3rem));
+
+	grid-template:
+		'header'
+		'content'
+		'sidebar'
+		/ 100%;
+}
+
+@media (width >= 64rem) {
+	.ui-normal-page--sidebar-left {
+		grid-template:
+			'header header'
+			'sidebar content'
+			'sidebar dummy'
+			/ 20rem 1fr;
+	}
+
+	.ui-normal-page--sidebar-right {
+		grid-template:
+			'header header'
+			'content sidebar'
+			'dummy sidebar'
+			/ 1fr 20rem;
+	}
+}
+
+.ui-normal-page__header {
+	grid-area: header;
+}
+
+.ui-normal-page__content {
+	grid-area: content;
+}
+
+.ui-normal-page__sidebar {
+	grid-area: sidebar;
+}
+</style>
diff --git a/packages/ui/src/components/page/SidebarCard.vue b/packages/ui/src/components/page/SidebarCard.vue
new file mode 100644
index 00000000..dc0eb38f
--- /dev/null
+++ b/packages/ui/src/components/page/SidebarCard.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { injectPageContext } from '../../providers'
+
+const { hierarchicalSidebarAvailable } = injectPageContext()
+
+defineProps<{
+	title: string
+}>()
+</script>
+<template>
+	<div
+		class="flex flex-col gap-3 p-4"
+		:class="{
+			'card-shadow mb-4 last:mb-0 rounded-2xl bg-bg-raised': !hierarchicalSidebarAvailable,
+		}"
+	>
+		<span class="font-semibold">{{ title }}</span>
+		<slot />
+	</div>
+</template>
diff --git a/packages/ui/src/components/page/index.ts b/packages/ui/src/components/page/index.ts
new file mode 100644
index 00000000..80eae38b
--- /dev/null
+++ b/packages/ui/src/components/page/index.ts
@@ -0,0 +1,2 @@
+export { default as NormalPage } from './NormalPage.vue'
+export { default as SidebarCard } from './SidebarCard.vue'
diff --git a/packages/ui/src/components/search/BrowseFiltersPanel.vue b/packages/ui/src/components/search/BrowseFiltersPanel.vue
deleted file mode 100644
index 1c49530d..00000000
--- a/packages/ui/src/components/search/BrowseFiltersPanel.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-	<div>
-		<Accordion
-			v-for="filter in filters"
-			:key="filter.id"
-			v-model="filters"
-			v-bind="$attrs"
-			:button-class="buttonClass"
-			:content-class="contentClass"
-			open-by-default
-		>
-			<template #title>
-				<slot name="header" :filter="filter">
-					<h2>{{ filter.formatted_name }}</h2>
-				</slot>
-			</template>
-			<template #default>
-				<template v-for="option in filter.options" :key="`${filter.id}-${option}`">
-					<slot name="option" :filter="filter" :option="option">
-						<div>
-							{{ option.formatted_name }}
-						</div>
-					</slot>
-				</template>
-			</template>
-		</Accordion>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import Accordion from '../base/Accordion.vue'
-
-interface FilterOption<T> {
-	id: string
-	formatted_name: string
-	data: T
-}
-
-interface FilterType<T> {
-	id: string
-	formatted_name: string
-	scrollable?: boolean
-	options: FilterOption<T>[]
-}
-
-interface GameVersion {
-	version: string
-	version_type: 'release' | 'snapshot' | 'alpha' | 'beta'
-	date: string
-	major: boolean
-}
-
-type ProjectType = 'mod' | 'modpack' | 'resourcepack' | 'shader' | 'datapack' | 'plugin'
-
-interface Platform {
-	name: string
-	icon: string
-	supported_project_types: ProjectType[]
-	default: boolean
-	formatted_name: string
-}
-
-const props = defineProps<{
-	buttonClass?: string
-	contentClass?: string
-	gameVersions?: GameVersion[]
-	platforms: Platform[]
-}>()
-
-const filters = computed(() => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const filters: FilterType<any>[] = [
-		{
-			id: 'platform',
-			formatted_name: 'Platform',
-			options:
-				props.platforms
-					.filter((x) => x.default && x.supported_project_types.includes('modpack'))
-					.map((x) => ({
-						id: x.name,
-						formatted_name: x.formatted_name,
-						data: x,
-					})) || [],
-		},
-		{
-			id: 'gameVersion',
-			formatted_name: 'Game version',
-			options:
-				props.gameVersions
-					?.filter((x) => x.major && x.version_type === 'release')
-					.map((x) => ({
-						id: x.version,
-						formatted_name: x.version,
-						data: x,
-					})) || [],
-		},
-	]
-
-	return filters
-})
-
-defineOptions({
-	inheritAttrs: false,
-})
-</script>
diff --git a/packages/ui/src/components/search/SearchDropdown.vue b/packages/ui/src/components/search/SearchDropdown.vue
deleted file mode 100644
index 5cd0e381..00000000
--- a/packages/ui/src/components/search/SearchDropdown.vue
+++ /dev/null
@@ -1,346 +0,0 @@
-<template>
-	<div
-		ref="dropdown"
-		tabindex="0"
-		role="combobox"
-		:aria-expanded="dropdownVisible"
-		class="animated-dropdown"
-		@keydown.up.prevent="focusPreviousOption"
-		@keydown.down.prevent="focusNextOptionOrOpen"
-	>
-		<div class="iconified-input">
-			<SearchIcon />
-			<input
-				:value="modelValue"
-				type="text"
-				:name="name"
-				:disabled="disabled"
-				class="text-input"
-				autocomplete="off"
-				autocapitalize="off"
-				:placeholder="placeholder"
-				:class="{ down: !renderUp, up: renderUp }"
-				@input="$emit('update:modelValue', $event.target.value)"
-				@focus="onFocus"
-				@blur="onBlur"
-				@focusout="onBlur"
-				@keydown.enter.prevent="$emit('enter')"
-			/>
-			<Button :disabled="disabled" class="r-btn" @click="() => $emit('update:modelValue', '')">
-				<XIcon />
-			</Button>
-		</div>
-		<div ref="dropdownOptions" class="options-wrapper" :class="{ down: !renderUp, up: renderUp }">
-			<transition name="options">
-				<div
-					v-show="dropdownVisible"
-					class="options"
-					role="listbox"
-					:class="{ down: !renderUp, up: renderUp }"
-				>
-					<div
-						v-for="(option, index) in options"
-						:key="index"
-						ref="optionElements"
-						tabindex="-1"
-						role="option"
-						class="option"
-						@click="selectOption(option)"
-					>
-						<div class="project-label">
-							<Avatar :src="option.icon" :circle="circledIcons" />
-							<div class="text">
-								<div class="title">
-									{{ getOptionLabel(option.title) }}
-								</div>
-								<div class="author">
-									{{ getOptionLabel(option.subtitle) }}
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</transition>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { SearchIcon, XIcon } from '@modrinth/assets'
-import { ref } from 'vue'
-
-import Avatar from '../base/Avatar.vue'
-import Button from '../base/Button.vue'
-
-const props = defineProps({
-	options: {
-		type: Array,
-		required: true,
-	},
-	name: {
-		type: String,
-		required: true,
-	},
-	placeholder: {
-		type: [String, Number],
-		default: null,
-	},
-	modelValue: {
-		type: [String, Number, Object],
-		default: null,
-	},
-	renderUp: {
-		type: Boolean,
-		default: false,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	displayName: {
-		type: Function,
-		default: undefined,
-	},
-	circledIcons: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-function getOptionLabel(option) {
-	return props.displayName?.(option) ?? option
-}
-
-const emit = defineEmits(['input', 'onSelected', 'update:modelValue', 'enter'])
-
-const dropdownVisible = ref(false)
-const focusedOptionIndex = ref(null)
-const dropdown = ref(null)
-const optionElements = ref(null)
-const dropdownOptions = ref(null)
-
-const toggleDropdown = () => {
-	if (!props.disabled) {
-		dropdownVisible.value = !dropdownVisible.value
-		dropdown.value.focus()
-	}
-}
-
-const selectOption = (option) => {
-	emit('onSelected', option)
-	console.log('onSelected', option)
-	dropdownVisible.value = false
-}
-
-const onFocus = () => {
-	if (!props.disabled) {
-		focusedOptionIndex.value = props.options.findIndex(
-			(option) => option === props.modelValue.value,
-		)
-		dropdownVisible.value = true
-	}
-}
-
-const onBlur = (event) => {
-	console.log(event)
-	if (!isChildOfDropdown(event.relatedTarget)) {
-		dropdownVisible.value = false
-	}
-}
-
-const focusPreviousOption = () => {
-	if (!props.disabled) {
-		if (!dropdownVisible.value) {
-			toggleDropdown()
-		}
-		focusedOptionIndex.value =
-			(focusedOptionIndex.value + props.options.length - 1) % props.options.length
-		optionElements.value[focusedOptionIndex.value].focus()
-	}
-}
-
-const focusNextOptionOrOpen = () => {
-	if (!props.disabled) {
-		if (!dropdownVisible.value) {
-			toggleDropdown()
-		}
-		focusedOptionIndex.value = (focusedOptionIndex.value + 1) % props.options.length
-		optionElements.value[focusedOptionIndex.value].focus()
-	}
-}
-
-const isChildOfDropdown = (element) => {
-	let currentNode = element
-	while (currentNode) {
-		if (currentNode === dropdownOptions.value) {
-			return true
-		}
-		currentNode = currentNode.parentNode
-	}
-	return false
-}
-</script>
-
-<style lang="scss" scoped>
-.animated-dropdown {
-	width: 20rem;
-	height: 2.5rem;
-	position: relative;
-	display: inline-block;
-
-	&:focus {
-		outline: 0;
-	}
-
-	.selected {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: var(--gap-sm) var(--gap-lg);
-		background-color: var(--color-button-bg);
-		gap: var(--gap-md);
-		cursor: pointer;
-		user-select: none;
-		border-radius: var(--radius-md);
-		box-shadow:
-			var(--shadow-inset-sm),
-			0 0 0 0 transparent;
-
-		&.disabled {
-			cursor: not-allowed;
-			filter: grayscale(50%);
-			opacity: 0.5;
-		}
-
-		&.render-up {
-			border-radius: 0 0 var(--radius-md) var(--radius-md);
-		}
-
-		&.render-down {
-			border-radius: var(--radius-md) var(--radius-md) 0 0;
-		}
-
-		&:focus {
-			outline: 0;
-			filter: brightness(1.25);
-			transition: filter 0.1s ease-in-out;
-		}
-	}
-
-	.options {
-		z-index: 10;
-		max-height: 18rem;
-		overflow-y: auto;
-
-		.option {
-			background-color: var(--color-button-bg);
-			display: flex;
-			align-items: center;
-			padding: var(--gap-md);
-			cursor: pointer;
-			user-select: none;
-
-			&:hover {
-				filter: brightness(0.85);
-				transition: filter 0.2s ease-in-out;
-			}
-
-			&:focus {
-				outline: 0;
-				filter: brightness(0.85);
-				transition: filter 0.2s ease-in-out;
-			}
-
-			&.selected-option {
-				background-color: var(--color-brand);
-				color: var(--color-accent-contrast);
-				font-weight: bolder;
-			}
-
-			input {
-				display: none;
-			}
-		}
-	}
-}
-
-.options-enter-active,
-.options-leave-active {
-	transition: transform 0.2s ease;
-}
-
-.options-enter-from,
-.options-leave-to {
-	// this is not 100% due to a safari bug
-	&.up {
-		transform: translateY(99.999%);
-	}
-
-	&.down {
-		transform: translateY(-99.999%);
-	}
-}
-
-.options-enter-to,
-.options-leave-from {
-	&.up {
-		transform: translateY(0%);
-	}
-}
-
-.options-wrapper {
-	position: absolute;
-	width: 100%;
-	overflow: auto;
-	z-index: 9;
-
-	&.up {
-		top: 0;
-		transform: translateY(-99.999%);
-		border-radius: var(--radius-md) var(--radius-md) 0 0;
-	}
-
-	&.down {
-		border-radius: 0 0 var(--radius-md) var(--radius-md);
-	}
-}
-
-.project-label {
-	display: flex;
-	align-items: center;
-	flex-direction: row;
-	gap: var(--gap-md);
-	color: var(--color-contrast);
-
-	.title {
-		font-weight: bold;
-	}
-}
-
-.iconified-input {
-	width: 100%;
-}
-
-.text-input {
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent !important;
-	width: 100%;
-
-	transition: 0.05s;
-
-	&:focus {
-		&.down {
-			border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
-		}
-
-		&.up {
-			border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
-		}
-	}
-
-	&:not(:focus) {
-		transition-delay: 0.2s;
-	}
-}
-</style>
diff --git a/packages/ui/src/components/search/SearchFilter.vue b/packages/ui/src/components/search/SearchFilter.vue
deleted file mode 100644
index aaed9430..00000000
--- a/packages/ui/src/components/search/SearchFilter.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-	<Checkbox
-		class="filter"
-		:model-value="isActive"
-		:description="displayName"
-		@update:model-value="toggle"
-	>
-		<div class="filter-text">
-			<div v-if="props.icon" aria-hidden="true" class="icon" v-html="props.icon" />
-			<div v-else class="icon">
-				<slot />
-			</div>
-			<span aria-hidden="true"> {{ props.displayName }}</span>
-		</div>
-	</Checkbox>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-import Checkbox from '../base/Checkbox.vue'
-
-const props = defineProps({
-	facetName: {
-		type: String,
-		default: '',
-	},
-	displayName: {
-		type: String,
-		default: '',
-	},
-	icon: {
-		type: String,
-		default: '',
-	},
-	activeFilters: {
-		type: Array,
-		default() {
-			return []
-		},
-	},
-})
-
-const isActive = computed(() => props.activeFilters.includes(props.facetName))
-const emit = defineEmits(['toggle'])
-
-const toggle = () => {
-	emit('toggle', props.facetName)
-}
-</script>
-
-<style lang="scss" scoped>
-.filter {
-	margin-bottom: 0.5rem;
-
-	:deep(.filter-text) {
-		display: flex;
-		align-items: center;
-
-		.icon {
-			height: 1rem;
-
-			svg {
-				margin-right: 0.25rem;
-				width: 1rem;
-				height: 1rem;
-			}
-		}
-	}
-
-	span {
-		user-select: none;
-	}
-}
-</style>
diff --git a/packages/ui/src/components/search/index.ts b/packages/ui/src/components/search/index.ts
new file mode 100644
index 00000000..a8a7bf07
--- /dev/null
+++ b/packages/ui/src/components/search/index.ts
@@ -0,0 +1,4 @@
+export { default as Categories } from './Categories.vue'
+export { default as SearchFilterControl } from './SearchFilterControl.vue'
+export { default as SearchFilterOption } from './SearchFilterOption.vue'
+export { default as SearchSidebarFilter } from './SearchSidebarFilter.vue'
diff --git a/packages/ui/src/components/servers/icons/index.ts b/packages/ui/src/components/servers/icons/index.ts
new file mode 100644
index 00000000..71498d85
--- /dev/null
+++ b/packages/ui/src/components/servers/icons/index.ts
@@ -0,0 +1,2 @@
+export { default as LoaderIcon } from './LoaderIcon.vue'
+export { default as ServerIcon } from './ServerIcon.vue'
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
new file mode 100644
index 00000000..8a474342
--- /dev/null
+++ b/packages/ui/src/components/servers/index.ts
@@ -0,0 +1,7 @@
+export * from './backups'
+export * from './icons'
+export * from './labels'
+export * from './marketing'
+export type { PendingChange } from './ServerListing.vue'
+export { default as ServerListing } from './ServerListing.vue'
+export { default as ServersPromo } from './ServersPromo.vue'
diff --git a/packages/ui/src/components/servers/labels/index.ts b/packages/ui/src/components/servers/labels/index.ts
new file mode 100644
index 00000000..abd2e5cd
--- /dev/null
+++ b/packages/ui/src/components/servers/labels/index.ts
@@ -0,0 +1 @@
+export { default as ServerInfoLabels } from './ServerInfoLabels.vue'
diff --git a/packages/ui/src/components/servers/marketing/index.ts b/packages/ui/src/components/servers/marketing/index.ts
new file mode 100644
index 00000000..58f35360
--- /dev/null
+++ b/packages/ui/src/components/servers/marketing/index.ts
@@ -0,0 +1,2 @@
+export { default as MedalBackgroundImage } from './MedalBackgroundImage.vue'
+export { default as MedalServerListing } from './MedalServerListing.vue'
diff --git a/packages/ui/src/components/settings/index.ts b/packages/ui/src/components/settings/index.ts
new file mode 100644
index 00000000..9e6e827e
--- /dev/null
+++ b/packages/ui/src/components/settings/index.ts
@@ -0,0 +1 @@
+export { default as ThemeSelector } from './ThemeSelector.vue'
diff --git a/packages/ui/src/components/skin/index.ts b/packages/ui/src/components/skin/index.ts
new file mode 100644
index 00000000..95122405
--- /dev/null
+++ b/packages/ui/src/components/skin/index.ts
@@ -0,0 +1,5 @@
+export { default as CapeButton } from './CapeButton.vue'
+export { default as CapeLikeTextButton } from './CapeLikeTextButton.vue'
+export { default as SkinButton } from './SkinButton.vue'
+export { default as SkinLikeTextButton } from './SkinLikeTextButton.vue'
+export { default as SkinPreviewRenderer } from './SkinPreviewRenderer.vue'
diff --git a/packages/ui/src/components/version/index.ts b/packages/ui/src/components/version/index.ts
new file mode 100644
index 00000000..67b33bde
--- /dev/null
+++ b/packages/ui/src/components/version/index.ts
@@ -0,0 +1,3 @@
+export { default as VersionChannelIndicator } from './VersionChannelIndicator.vue'
+export { default as VersionFilterControl } from './VersionFilterControl.vue'
+export { default as VersionSummary } from './VersionSummary.vue'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 587d8488..dd4e335c 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -551,6 +551,12 @@
   "project-type.plugin.lowercase": {
     "defaultMessage": "{count, plural, one {plugin} other {plugins}}"
   },
+  "project-type.project.category": {
+    "defaultMessage": "Projects"
+  },
+  "project-type.project.lowercase": {
+    "defaultMessage": "{count, plural, one {project} other {projects}}"
+  },
   "project-type.resourcepack.capital": {
     "defaultMessage": "{count, plural, one {Resource Pack} other {Resource Packs}}"
   },
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index b47e2727..d4a06d62 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -79,6 +79,7 @@ export function createContext<ContextValue>(
 }
 
 export * from './api-client'
+export * from './page-context'
 export * from './project-page'
 export * from './server-context'
 export * from './web-notifications'
diff --git a/packages/ui/src/providers/page-context.ts b/packages/ui/src/providers/page-context.ts
new file mode 100644
index 00000000..9b77cd8b
--- /dev/null
+++ b/packages/ui/src/providers/page-context.ts
@@ -0,0 +1,14 @@
+import type { Ref } from 'vue'
+
+import { createContext } from '.'
+
+export interface PageContext {
+	// pages may render sidebar content in #sidebar-teleport-target instead of in the main layout when true
+	hierarchicalSidebarAvailable: Ref<boolean>
+	showAds: Ref<boolean>
+}
+
+export const [injectPageContext, providePageContext] = createContext<PageContext>(
+	'root',
+	'pageContext',
+)
diff --git a/packages/ui/src/providers/user-page.ts b/packages/ui/src/providers/user-page.ts
new file mode 100644
index 00000000..4c41d1e1
--- /dev/null
+++ b/packages/ui/src/providers/user-page.ts
@@ -0,0 +1,13 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { Ref } from 'vue'
+
+import { createContext } from '.'
+
+export interface UserPageContext {
+	user: Ref<Labrinth.Users.v3.User>
+}
+
+export const [injectUserPageContext, provideUserPageContext] = createContext<UserPageContext>(
+	'root',
+	'userPageContext',
+)
diff --git a/packages/ui/src/styles/tailwind-utilities.css b/packages/ui/src/styles/tailwind-utilities.css
new file mode 100644
index 00000000..adc17e4f
--- /dev/null
+++ b/packages/ui/src/styles/tailwind-utilities.css
@@ -0,0 +1,14 @@
+@layer utilities {
+	.heading-xl {
+		@apply m-0 text-xl font-semibold leading-none text-contrast;
+	}
+	.heading-2xl {
+		@apply m-0 text-2xl font-semibold leading-none text-contrast;
+	}
+	.heading-3xl {
+		@apply m-0 text-3xl font-semibold leading-none text-contrast;
+	}
+	.heading-4xl {
+		@apply m-0 text-4xl font-semibold leading-none text-contrast;
+	}
+}
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 36752e84..b592ce4c 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -437,6 +437,10 @@ export const commonProjectTypeCategoryMessages = defineMessages({
 		id: 'project-type.server.category',
 		defaultMessage: 'Servers',
 	},
+	project: {
+		id: 'project-type.project.category',
+		defaultMessage: 'Projects',
+	},
 })
 
 export const commonProjectTypeTitleMessages = defineMessages({
@@ -468,6 +472,10 @@ export const commonProjectTypeTitleMessages = defineMessages({
 		id: 'project-type.server.capital',
 		defaultMessage: '{count, plural, one {Server} other {Servers}}',
 	},
+	project: {
+		id: 'project-type.project.lowercase',
+		defaultMessage: '{count, plural, one {Project} other {Projects}}',
+	},
 })
 
 export const commonProjectTypeSentenceMessages = defineMessages({
@@ -499,6 +507,10 @@ export const commonProjectTypeSentenceMessages = defineMessages({
 		id: 'project-type.server.lowercase',
 		defaultMessage: '{count, plural, one {server} other {servers}}',
 	},
+	project: {
+		id: 'project-type.project.lowercase',
+		defaultMessage: '{count, plural, one {project} other {projects}}',
+	},
 })
 
 export const commonSettingsMessages = defineMessages({
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 2a66710e..85802d45 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -3,3 +3,4 @@ export * from './game-modes'
 export * from './notices'
 export * from './savable'
 export * from './search'
+export * from './vue-children'
diff --git a/apps/frontend/src/utils/vue-children.ts b/packages/ui/src/utils/vue-children.ts
similarity index 86%
rename from apps/frontend/src/utils/vue-children.ts
rename to packages/ui/src/utils/vue-children.ts
index 419a77a5..ff12ee20 100644
--- a/apps/frontend/src/utils/vue-children.ts
+++ b/packages/ui/src/utils/vue-children.ts
@@ -8,7 +8,7 @@ import { createTextVNode, isVNode, toDisplayString, type VNode } from 'vue'
  * @returns Either the original VNode or a text VNode containing child converted
  * to a display string.
  */
-function normalizeChild(child: any): VNode {
+function normalizeChild(child: unknown): VNode {
 	return isVNode(child) ? child : createTextVNode(toDisplayString(child))
 }
 
@@ -20,6 +20,6 @@ function normalizeChild(child: any): VNode {
  * @param children Children to normalize.
  * @returns Children with all of non-VNodes converted to display strings.
  */
-export function normalizeChildren(children: any | any[]): VNode[] {
+export function normalizeChildren(children: unknown | unknown[]): VNode[] {
 	return Array.isArray(children) ? children.map(normalizeChild) : [normalizeChild(children)]
 }