diff --git a/.github/instructions/i18n-convert.instructions.md b/.github/instructions/i18n-convert.instructions.md
index b8ce2218c1..91786f4fe3 100644
--- a/.github/instructions/i18n-convert.instructions.md
+++ b/.github/instructions/i18n-convert.instructions.md
@@ -81,6 +81,6 @@ Please follow these rules precisely:
 Use existing patterns from our codebase:
 
 - Variables/plurals: see `apps/frontend/src/pages/frog.vue`
-- Rich-text link tags: see `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+- Rich-text link tags: see `apps/frontend/src/error.vue`
 
 When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.
diff --git a/CLAUDE.md b/CLAUDE.md
index e91b8f6083..a4658aa02d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -64,7 +64,7 @@ The website and app `prepr` commands
 
 Each project may have its own `CLAUDE.md` with detailed instructions:
 
-- [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
+- [`apps/labrinth/AGENTS.md`](apps/labrinth/AGENTS.md) — Backend API
 - [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
 
 ## Code Guidelines
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index 5a889cd37f..b0572572b5 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -20,7 +20,7 @@
 		"@modrinth/utils": "workspace:*",
 		"@sentry/vue": "^8.27.0",
 		"@sfirew/minecraft-motd-parser": "^1.1.6",
-		"@tanstack/vue-query": "^5.90.7",
+		"@tanstack/vue-query": "5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
 		"@tauri-apps/plugin-fs": "^2.4.5",
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 232305c092..b8ff688b7c 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -2,6 +2,7 @@
 import { Intercom, shutdown as shutdownIntercom } from '@intercom/messenger-js-sdk'
 import {
 	AuthFeature,
+	ModrinthApiError,
 	NodeAuthFeature,
 	nodeAuthState,
 	PanelVersionFeature,
@@ -98,6 +99,7 @@ import { command_listener, warning_listener } from '@/helpers/events.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
 import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { list } from '@/helpers/profile.js'
+import { mergeUrlQuery, parseModrinthLink } from '@/helpers/project-links.ts'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
 import {
@@ -1028,6 +1030,28 @@ async function installUpdate() {
 	}, 250)
 }
 
+async function openModrinthProjectLinkInApp(parsed) {
+	const { slug, pathSuffix, url } = parsed
+	const loadToken = loading.begin()
+	try {
+		const { id } = await tauriApiClient.labrinth.projects_v2.check(slug)
+		const query = mergeUrlQuery(route.query, url)
+		await router.push({
+			path: `/project/${id}${pathSuffix}`,
+			query,
+			hash: url.hash || undefined,
+		})
+	} catch (err) {
+		if (err instanceof ModrinthApiError && err.statusCode === 404) {
+			openUrl(url.href)
+		} else {
+			handleError(err)
+		}
+	} finally {
+		loading.end(loadToken)
+	}
+}
+
 function handleClick(e) {
 	let target = e.target
 	while (target != null) {
@@ -1040,7 +1064,12 @@ function handleClick(e) {
 				!target.href.startsWith('https://tauri.localhost') &&
 				!target.href.startsWith('http://tauri.localhost')
 			) {
-				openUrl(target.href)
+				const parsed = parseModrinthLink(target.href)
+				if (parsed) {
+					void openModrinthProjectLinkInApp(parsed)
+				} else {
+					openUrl(target.href)
+				}
 			}
 			e.preventDefault()
 			break
diff --git a/apps/app-frontend/src/helpers/project-links.ts b/apps/app-frontend/src/helpers/project-links.ts
new file mode 100644
index 0000000000..3ce0c0c45b
--- /dev/null
+++ b/apps/app-frontend/src/helpers/project-links.ts
@@ -0,0 +1,83 @@
+import type { LocationQuery, LocationQueryRaw } from 'vue-router'
+
+const MODRINTH_HOSTNAMES = new Set(['modrinth.com', 'www.modrinth.com'])
+
+const SUPPORTED_PROJECT_TYPES = new Set([
+	'mod',
+	'modpack',
+	'resourcepack',
+	'datapack',
+	'plugin',
+	'shader',
+	'server',
+	'project',
+])
+
+export function parseModrinthLink(
+	href: string,
+): { slug: string; pathSuffix: string; url: URL } | null {
+	let url: URL
+	try {
+		url = new URL(href)
+	} catch {
+		return null
+	}
+
+	if (!MODRINTH_HOSTNAMES.has(url.hostname.toLowerCase())) {
+		return null
+	}
+
+	const segments = url.pathname.split('/').filter((p) => p.length > 0)
+	if (segments.length < 2) {
+		return null
+	}
+
+	if (SUPPORTED_PROJECT_TYPES.has(segments[0].toLowerCase())) {
+		const slug = segments[1]
+		if (!slug) {
+			return null
+		}
+
+		const rest: string[] = segments.slice(2)
+		const pathSuffix = toValidAppSubpath(rest)
+		if (pathSuffix === null) {
+			return null
+		}
+
+		return { slug, pathSuffix, url }
+	} else {
+		return null
+	}
+}
+
+const SUPPORTED_SUBPATHS = ['versions', 'gallery']
+
+function toValidAppSubpath(rest: string[]): string | null {
+	if (rest.length === 0) {
+		return ''
+	}
+
+	const subroute = rest[0].toLowerCase()
+	if (rest.length === 1 && SUPPORTED_SUBPATHS.includes(subroute)) {
+		return `/${subroute}`
+	}
+
+	if (rest.length === 2 && subroute === 'version') {
+		return `/version/${rest[1]}`
+	}
+
+	return null
+}
+
+export function mergeUrlQuery(routeQuery: LocationQuery, linkUrl: URL): LocationQueryRaw {
+	const newQuery: LocationQueryRaw = { ...routeQuery }
+	const keys = new Set<string>()
+	linkUrl.searchParams.forEach((_value, key) => {
+		keys.add(key)
+	})
+	for (const key of keys) {
+		const values = linkUrl.searchParams.getAll(key)
+		newQuery[key] = values.length === 1 ? values[0] : values
+	}
+	return newQuery
+}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 624c6c9431..4707b6a66e 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -47,7 +47,7 @@
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
 		"@sentry/nuxt": "^10.33.0",
-		"@tanstack/vue-query": "^5.90.7",
+		"@tanstack/vue-query": "5.90.7",
 		"@types/three": "^0.172.0",
 		"@vitejs/plugin-vue": "^6.0.3",
 		"@vue-email/components": "^0.0.21",
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index 9cdb763dca..1c4585e3d3 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -14,6 +14,8 @@ import { I18nDebugPanel, LoadingBar, NotificationPanel } from '@modrinth/ui'
 
 import { setupProviders } from '~/providers/setup.ts'
 
+import { useAuth } from './composables/auth'
+
 const auth = await useAuth()
 setupProviders(auth)
 </script>
diff --git a/apps/frontend/src/components/ui/auth/CreateAccount.vue b/apps/frontend/src/components/ui/auth/CreateAccount.vue
new file mode 100644
index 0000000000..1ab2c73366
--- /dev/null
+++ b/apps/frontend/src/components/ui/auth/CreateAccount.vue
@@ -0,0 +1,279 @@
+<template>
+	<div
+		class="shadow-card mx-auto flex w-full max-w-[28rem] flex-col gap-6 rounded-2xl border border-button-bg bg-surface-3 p-6"
+	>
+		<h1
+			class="mx-auto my-0 flex w-full justify-center text-center text-2xl font-semibold text-contrast"
+		>
+			{{ formatMessage(messages.title) }}
+		</h1>
+
+		<section v-if="requiresDob" class="flex flex-col gap-2.5">
+			<label class="text-md font-semibold text-contrast" for="create-account-dob">
+				{{ formatMessage(messages.dateOfBirthLabel) }}
+			</label>
+			<DatePicker
+				id="create-account-dob"
+				v-model="dateOfBirthModel"
+				wrapper-class="w-full"
+				min-date="1900-01-01"
+				:max-date="maxInputDate"
+				:default-view-date="defaultDobViewDate"
+				preserve-day
+				:placeholder="formatMessage(messages.dateOfBirthPlaceholder)"
+			/>
+			<div>
+				{{ formatMessage(messages.over13HelperText) }}
+			</div>
+			<Admonition :type="'info'">
+				<template #header>
+					<div class="-mb-3 -mt-1 flex flex-col gap-0 text-sm font-normal leading-normal">
+						<div>
+							{{ formatMessage(messages.infoPanelText) }}
+						</div>
+						<a
+							class="w-fit text-link underline"
+							:href="SOURCE_CODE_URL"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							{{ formatMessage(messages.relevantSourceCodeText) }}
+						</a>
+					</div>
+				</template>
+			</Admonition>
+		</section>
+
+		<section class="flex flex-col gap-2.5">
+			<label class="text-md font-semibold text-contrast" for="create-account-username">
+				{{ formatMessage(messages.usernameOptionalLabel) }}
+				<span class="font-normal text-primary">(optional)</span>
+			</label>
+			<StyledInput
+				id="create-account-username"
+				v-model="usernameModel"
+				type="text"
+				:placeholder="formatMessage(messages.usernamePlaceholder)"
+				wrapper-class="w-full"
+			/>
+		</section>
+
+		<section v-if="globals?.captcha_enabled" class="flex flex-col gap-2.5">
+			<label class="text-md font-semibold text-contrast">{{
+				formatMessage(messages.securityCheckLabel)
+			}}</label>
+			<HCaptcha v-if="globals?.captcha_enabled" :ref="onSetCaptchaRef" v-model="tokenModel" />
+		</section>
+
+		<div
+			class="flex gap-2.5 rounded-2xl border border-solid border-surface-5 bg-surface-3 transition-all hover:brightness-110"
+		>
+			<Checkbox
+				v-model="subscribeModel"
+				class="p-3 text-left leading-snug text-primary transition-all"
+				:label="formatMessage(messages.subscribeLabel)"
+				:description="formatMessage(messages.subscribeLabel)"
+			/>
+		</div>
+
+		<ButtonStyled color="brand">
+			<button
+				class="!w-full font-bold"
+				:disabled="globals?.captcha_enabled ? !tokenModel : false"
+				@click="onCompleteSignUpClick"
+			>
+				{{ formatMessage(messages.completeSignUpButton) }}
+				<RightArrowIcon />
+			</button>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { RightArrowIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	Checkbox,
+	DatePicker,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
+
+interface AuthGlobals {
+	captcha_enabled?: boolean
+	[key: string]: unknown
+}
+
+interface Props {
+	globals?: AuthGlobals | null
+	requiresDob?: boolean
+	onCompleteSignUp?: () => void
+	onSetCaptchaRef?: ((captchaRef: unknown) => void) | undefined
+}
+
+const {
+	globals = null,
+	requiresDob = true,
+	onCompleteSignUp = () => {},
+	onSetCaptchaRef = undefined,
+} = defineProps<Props>()
+
+const SOURCE_CODE_URL =
+	'https://github.com/modrinth/code/blob/main/apps/frontend/src/components/ui/auth/CreateAccount.vue'
+
+const dateOfBirthModel = defineModel<string | null>('dateOfBirth', { default: '' })
+const usernameModel = defineModel<string>('username', { default: '' })
+const tokenModel = defineModel<string>('token', { default: '' })
+const subscribeModel = defineModel<boolean>('subscribe', { default: false })
+
+const maxInputDate = computed(() => `${new Date().getFullYear()}-12-31`)
+
+const defaultDobViewDate = computed(() => `${new Date().getFullYear()}-01-01`)
+
+const maxBirthDate = computed(() => {
+	const date = new Date()
+	date.setFullYear(date.getFullYear() - 13)
+
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+
+	return `${year}-${month}-${day}`
+})
+
+const getBirthYear = (dateOfBirth: string | null): number | null => {
+	if (!dateOfBirth) {
+		return null
+	}
+
+	const [yearPart = ''] = dateOfBirth.split('-')
+	const year = Number(yearPart)
+	return Number.isInteger(year) ? year : null
+}
+
+const isDateOfBirthMissing = computed(() => requiresDob && !dateOfBirthModel.value)
+
+const isDateOfBirthYearZero = computed(() => {
+	if (!requiresDob || !dateOfBirthModel.value) {
+		return false
+	}
+
+	return getBirthYear(dateOfBirthModel.value) === 0
+})
+
+const isUnder13 = computed(
+	() => requiresDob && !!dateOfBirthModel.value && dateOfBirthModel.value > maxBirthDate.value,
+)
+
+const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+function onCompleteSignUpClick() {
+	if (isDateOfBirthMissing.value) {
+		addNotification({
+			title: formatMessage(messages.dateOfBirthRequiredTitle),
+			text: formatMessage(messages.dateOfBirthRequiredText),
+			type: 'warning',
+		})
+		return
+	}
+
+	if (isDateOfBirthYearZero.value) {
+		addNotification({
+			title: formatMessage(messages.dateOfBirthInvalidTitle),
+			text: formatMessage(messages.dateOfBirthInvalidText),
+			type: 'error',
+		})
+		return
+	}
+
+	if (isUnder13.value) {
+		addNotification({
+			title: formatMessage(messages.ageRequirementWarningTitle),
+			text: formatMessage(messages.under13HelperText),
+			type: 'error',
+		})
+		return
+	}
+
+	onCompleteSignUp()
+}
+
+const messages = defineMessages({
+	title: {
+		id: 'auth.create-account.title',
+		defaultMessage: 'Create an Account',
+	},
+	dateOfBirthLabel: {
+		id: 'auth.create-account.date-of-birth.label',
+		defaultMessage: 'Date of birth',
+	},
+	dateOfBirthPlaceholder: {
+		id: 'auth.create-account.date-of-birth.placeholder',
+		defaultMessage: 'Select your date of birth',
+	},
+	dateOfBirthRequiredTitle: {
+		id: 'auth.create-account.date-of-birth.required.title',
+		defaultMessage: 'Date of birth required',
+	},
+	dateOfBirthRequiredText: {
+		id: 'auth.create-account.date-of-birth.required.text',
+		defaultMessage: 'Please enter your date of birth before continuing.',
+	},
+	dateOfBirthInvalidTitle: {
+		id: 'auth.create-account.date-of-birth.invalid.title',
+		defaultMessage: 'Invalid date of birth',
+	},
+	dateOfBirthInvalidText: {
+		id: 'auth.create-account.date-of-birth.invalid.text',
+		defaultMessage: 'Please enter a valid date of birth. Year cannot be 0000.',
+	},
+	over13HelperText: {
+		id: 'auth.create-account.date-of-birth.over13-helper',
+		defaultMessage: 'You must be over 13 years old to use Modrinth.',
+	},
+	under13HelperText: {
+		id: 'auth.create-account.date-of-birth.under13-helper',
+		defaultMessage: 'You cannot create an account at Modrinth unless you are over 13 years old.',
+	},
+	ageRequirementWarningTitle: {
+		id: 'auth.create-account.age-requirement.warning-title',
+		defaultMessage: 'Age requirement',
+	},
+	infoPanelText: {
+		id: 'auth.create-account.info-panel.text',
+		defaultMessage:
+			'We do not store your date of birth, only whether you are over 13 to use Modrinth.',
+	},
+	relevantSourceCodeText: {
+		id: 'auth.create-account.info-panel.source-code-link',
+		defaultMessage: 'Relevant source code',
+	},
+	usernameOptionalLabel: {
+		id: 'auth.create-account.username.optional-label',
+		defaultMessage: 'Username',
+	},
+	usernamePlaceholder: {
+		id: 'auth.create-account.username.placeholder',
+		defaultMessage: 'Enter username',
+	},
+	securityCheckLabel: {
+		id: 'auth.create-account.security-check.label',
+		defaultMessage: 'Security check',
+	},
+	subscribeLabel: {
+		id: 'auth.create-account.subscribe.label',
+		defaultMessage: 'Keep me updated on the cool things Modrinth is working on via email',
+	},
+	completeSignUpButton: {
+		id: 'auth.create-account.complete-sign-up',
+		defaultMessage: 'Complete sign up',
+	},
+})
+</script>
diff --git a/apps/frontend/src/components/ui/HCaptcha.vue b/apps/frontend/src/components/ui/auth/HCaptcha.vue
similarity index 76%
rename from apps/frontend/src/components/ui/HCaptcha.vue
rename to apps/frontend/src/components/ui/auth/HCaptcha.vue
index ebbec75f8f..c07a47a449 100644
--- a/apps/frontend/src/components/ui/HCaptcha.vue
+++ b/apps/frontend/src/components/ui/auth/HCaptcha.vue
@@ -47,17 +47,34 @@ defineExpose({
 	></div>
 </template>
 
-<style lang="scss">
+<style>
 .h-captcha {
 	display: flex;
+	align-items: center;
 	justify-content: center;
 	overflow: hidden;
 	border-radius: var(--radius-md);
 	border: 2px solid var(--color-button-bg);
-	height: 78px;
+	height: 100px;
+	width: 100%;
+	max-width: 100%;
+}
+
+.h-captcha iframe {
+	transform: scale(1.33);
+	transform-origin: center;
+	margin: -1px;
+}
+
+@media screen and (max-width: 400px) {
+	.h-captcha {
+		height: auto;
+	}
 
-	iframe {
-		margin: -1px;
+	.h-captcha iframe {
+		transform: scale(1.03);
+		margin: 0;
+		max-width: 100%;
 	}
 }
 </style>
diff --git a/apps/frontend/src/components/ui/auth/SignIn.vue b/apps/frontend/src/components/ui/auth/SignIn.vue
new file mode 100644
index 0000000000..38e03b4536
--- /dev/null
+++ b/apps/frontend/src/components/ui/auth/SignIn.vue
@@ -0,0 +1,377 @@
+<template>
+	<div v-if="subtleLauncherRedirectUri">
+		<iframe
+			:src="subtleLauncherRedirectUri"
+			class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
+		></iframe>
+	</div>
+	<div
+		v-else
+		class="universal-card mx-auto flex w-full max-w-[28rem] flex-col gap-6 border border-solid border-surface-5"
+	>
+		<template v-if="flow && !subtleLauncherRedirectUri">
+			<label for="two-factor-code">
+				<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
+				<span class="label__description">
+					{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
+				</span>
+			</label>
+			<StyledInput
+				id="two-factor-code"
+				v-model="twoFactorCodeModel"
+				:maxlength="11"
+				inputmode="numeric"
+				:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
+				autocomplete="one-time-code"
+				@keyup.enter="onTwoFactorSignIn()"
+			/>
+
+			<button class="btn btn-primary min-h-10 font-bold no-underline" @click="onTwoFactorSignIn()">
+				{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon class="ml-2" />
+			</button>
+		</template>
+		<template v-else>
+			<div class="flex flex-col gap-6">
+				<div class="text-center text-2xl font-semibold text-contrast">
+					{{ formatMessage(messages.signInWithLabel) }}
+				</div>
+
+				<section class="flex flex-col gap-2.5">
+					<ButtonStyled>
+						<a
+							class="oauth-provider-link !shadow-none"
+							:class="{ 'oauth-provider-link--last': lastSignInProvider === 'google' }"
+							:href="getAuthUrl('google', redirectTarget)"
+							@click="onOAuthProviderClick('google')"
+						>
+							<GoogleColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Google' })
+							}}</span>
+							<span
+								v-if="lastSignInProvider === 'google'"
+								class="oauth-provider-last-sign-in-badge"
+							>
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a
+							class="oauth-provider-link !shadow-none"
+							:class="{ 'oauth-provider-link--last': lastSignInProvider === 'microsoft' }"
+							:href="getAuthUrl('microsoft', redirectTarget)"
+							@click="onOAuthProviderClick('microsoft')"
+						>
+							<MicrosoftColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Microsoft' })
+							}}</span>
+							<span
+								v-if="lastSignInProvider === 'microsoft'"
+								class="oauth-provider-last-sign-in-badge"
+							>
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a
+							class="oauth-provider-link !shadow-none"
+							:class="{ 'oauth-provider-link--last': lastSignInProvider === 'discord' }"
+							:href="getAuthUrl('discord', redirectTarget)"
+							@click="onOAuthProviderClick('discord')"
+						>
+							<DiscordColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Discord' })
+							}}</span>
+							<span
+								v-if="lastSignInProvider === 'discord'"
+								class="oauth-provider-last-sign-in-badge"
+							>
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a
+							class="oauth-provider-link !shadow-none"
+							:class="{ 'oauth-provider-link--last': lastSignInProvider === 'github' }"
+							:href="getAuthUrl('github', redirectTarget)"
+							@click="onOAuthProviderClick('github')"
+						>
+							<GitHubColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'GitHub' })
+							}}</span>
+							<span
+								v-if="lastSignInProvider === 'github'"
+								class="oauth-provider-last-sign-in-badge"
+							>
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a
+							class="oauth-provider-link !shadow-none"
+							:class="{ 'oauth-provider-link--last': lastSignInProvider === 'gitlab' }"
+							:href="getAuthUrl('gitlab', redirectTarget)"
+							@click="onOAuthProviderClick('gitlab')"
+						>
+							<GitLabColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'GitLab' })
+							}}</span>
+							<span
+								v-if="lastSignInProvider === 'gitlab'"
+								class="oauth-provider-last-sign-in-badge"
+							>
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a
+							class="oauth-provider-link !shadow-none"
+							:class="{ 'oauth-provider-link--last': lastSignInProvider === 'steam' }"
+							:href="getAuthUrl('steam', redirectTarget)"
+							@click="onOAuthProviderClick('steam')"
+						>
+							<SteamColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Steam' })
+							}}</span>
+							<span v-if="lastSignInProvider === 'steam'" class="oauth-provider-last-sign-in-badge">
+								{{ formatMessage(messages.lastSignInLabel) }}
+							</span>
+						</a>
+					</ButtonStyled>
+				</section>
+
+				<div class="h-px w-full bg-surface-5"></div>
+
+				<section class="flex flex-col gap-2.5">
+					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
+					<StyledInput
+						id="email"
+						v-model="emailModel"
+						:icon="MailIcon"
+						type="text"
+						inputmode="email"
+						autocomplete="username"
+						:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
+						wrapper-class="w-full"
+					/>
+
+					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+					<StyledInput
+						id="password"
+						v-model="passwordModel"
+						:icon="KeyIcon"
+						type="password"
+						autocomplete="current-password"
+						:placeholder="formatMessage(commonMessages.passwordLabel)"
+						wrapper-class="w-full"
+					/>
+
+					<HCaptcha
+						v-if="globals?.captcha_enabled && emailModel && passwordModel"
+						:ref="onSetCaptchaRef"
+						v-model="tokenModel"
+					/>
+
+					<ButtonStyled color="brand">
+						<button
+							class="!w-full"
+							:disabled="globals?.captcha_enabled ? !tokenModel : false"
+							@click="onPasswordSignIn()"
+						>
+							{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
+						</button>
+					</ButtonStyled>
+
+					<div class="flex flex-wrap items-center justify-center gap-2.5 !text-base">
+						<NuxtLink
+							class="text-link"
+							:to="{
+								path: '/auth/reset-password',
+								query: routeQuery,
+							}"
+						>
+							{{ formatMessage(messages.forgotPasswordLabel) }}
+						</NuxtLink>
+						<div class="h-1.5 w-1.5 rounded-full bg-surface-5" />
+						<NuxtLink
+							class="inline text-link"
+							:to="{
+								path: '/auth/sign-up',
+								query: routeQuery,
+							}"
+						>
+							{{ formatMessage(messages.createAccountLabel) }}
+						</NuxtLink>
+					</div>
+				</section>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	DiscordColorIcon,
+	GitHubColorIcon,
+	GitLabColorIcon,
+	GoogleColorIcon,
+	KeyIcon,
+	MailIcon,
+	MicrosoftColorIcon,
+	RightArrowIcon,
+	SteamColorIcon,
+} from '@modrinth/assets'
+import { ButtonStyled, commonMessages, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import { useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+import type { LocationQuery } from 'vue-router'
+
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
+import {
+	getAuthUrl,
+	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+} from '@/composables/auth.ts'
+
+type AuthProvider = 'discord' | 'google' | 'github' | 'gitlab' | 'steam' | 'microsoft'
+
+interface AuthGlobals {
+	captcha_enabled?: boolean
+	[key: string]: unknown
+}
+
+interface Props {
+	subtleLauncherRedirectUri?: string
+	flow?: string
+	redirectTarget?: string
+	routeQuery?: LocationQuery
+	globals?: AuthGlobals | null
+	onPasswordSignIn?: () => void
+	onTwoFactorSignIn?: () => void
+	onSetCaptchaRef?: ((captchaRef: unknown) => void) | undefined
+}
+
+const {
+	subtleLauncherRedirectUri = '',
+	flow = '',
+	redirectTarget = '',
+	routeQuery = {},
+	globals = null,
+	onPasswordSignIn = () => {},
+	onTwoFactorSignIn = () => {},
+	onSetCaptchaRef = undefined,
+} = defineProps<Props>()
+
+const emailModel = defineModel<string>('email', { default: '' })
+const passwordModel = defineModel<string>('password', { default: '' })
+const tokenModel = defineModel<string>('token', { default: '' })
+const twoFactorCodeModel = defineModel<string>('twoFactorCode', { default: '' })
+
+const lastSignInOAuthProvider = useStorage<AuthProvider | null>(
+	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+	undefined,
+	{ initOnMounted: true },
+)
+const pendingSignInOAuthProvider = useStorage<AuthProvider | null>(
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+	undefined,
+	{ initOnMounted: true },
+)
+const lastSignInProvider = computed(() => lastSignInOAuthProvider.value)
+const onOAuthProviderClick = (provider: AuthProvider) => {
+	pendingSignInOAuthProvider.value = provider
+}
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	forgotPasswordLabel: {
+		id: 'auth.sign-in.forgot-password',
+		defaultMessage: 'Forgot password',
+	},
+	noAccountLabel: {
+		id: 'auth.sign-in.no-account',
+		defaultMessage: "Don't have an account?",
+	},
+	createAccountLabel: {
+		id: 'auth.sign-in.create-account',
+		defaultMessage: 'Sign up',
+	},
+	signInWithLabel: {
+		id: 'auth.sign-in.sign-in-with',
+		defaultMessage: 'Sign into Modrinth',
+	},
+	twoFactorCodeInputPlaceholder: {
+		id: 'auth.sign-in.2fa.placeholder',
+		defaultMessage: 'Enter code...',
+	},
+	twoFactorCodeLabel: {
+		id: 'auth.sign-in.2fa.label',
+		defaultMessage: 'Enter two-factor code',
+	},
+	twoFactorCodeLabelDescription: {
+		id: 'auth.sign-in.2fa.description',
+		defaultMessage: 'Please enter a two-factor code to proceed.',
+	},
+	continueWithProvider: {
+		id: 'auth.continue-with-provider',
+		defaultMessage: 'Continue with {provider}',
+	},
+	continueWithEmail: {
+		id: 'auth.sign-in.continue-with-email',
+		defaultMessage: 'Continue with Email',
+	},
+	lastSignInLabel: {
+		id: 'auth.sign-in.last-sign-in',
+		defaultMessage: 'Last sign in',
+	},
+})
+</script>
+
+<style scoped lang="scss">
+.oauth-provider-link {
+	position: relative;
+	overflow: visible;
+}
+
+.oauth-provider-link--last {
+	border-width: 1px !important;
+	border-color: var(--color-green) !important;
+}
+
+.oauth-provider-last-sign-in-badge {
+	position: absolute;
+	top: -0.75rem;
+	right: 0.5rem;
+	z-index: 1;
+	border-radius: 9999px;
+	background-color: var(--surface-3);
+	color: var(--color-green);
+	border: 1px solid var(--color-green);
+	padding: 0.25rem 0.5rem;
+	font-size: 0.75rem;
+	font-weight: 600;
+	line-height: 1;
+	pointer-events: none;
+}
+.oauth-provider-last-sign-in-badge::before {
+	content: '';
+	inset: 0;
+	border-radius: inherit;
+	background-color: var(--color-green-highlight);
+	position: absolute;
+	z-index: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/auth/SignUp.vue b/apps/frontend/src/components/ui/auth/SignUp.vue
new file mode 100644
index 0000000000..6fedd7d7fc
--- /dev/null
+++ b/apps/frontend/src/components/ui/auth/SignUp.vue
@@ -0,0 +1,236 @@
+<template>
+	<div
+		class="universal-card flex w-full max-w-[28rem] flex-col gap-6 border border-solid border-surface-5"
+	>
+		<div class="mx-auto text-center text-2xl font-semibold text-contrast">
+			{{ formatMessage(messages.signUpWithTitle) }}
+		</div>
+		<section class="flex flex-col gap-2.5">
+			<ButtonStyled>
+				<a
+					class="!shadow-none"
+					:href="getAuthUrl('google', redirectTarget)"
+					@click="onOAuthProviderClick('google')"
+				>
+					<GoogleColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Google' }) }}</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a
+					class="!shadow-none"
+					:href="getAuthUrl('microsoft', redirectTarget)"
+					@click="onOAuthProviderClick('microsoft')"
+				>
+					<MicrosoftColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Microsoft' }) }}</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a
+					class="!shadow-none"
+					:href="getAuthUrl('discord', redirectTarget)"
+					@click="onOAuthProviderClick('discord')"
+				>
+					<DiscordColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Discord' }) }}</span>
+				</a>
+			</ButtonStyled>
+			<template v-if="showOtherOptions">
+				<ButtonStyled>
+					<a
+						class="!shadow-none"
+						:href="getAuthUrl('github', redirectTarget)"
+						@click="onOAuthProviderClick('github')"
+					>
+						<GitHubColorIcon />
+						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitHub' }) }}</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a
+						class="!shadow-none"
+						:href="getAuthUrl('gitlab', redirectTarget)"
+						@click="onOAuthProviderClick('gitlab')"
+					>
+						<GitLabColorIcon />
+						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitLab' }) }}</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a
+						class="!shadow-none"
+						:href="getAuthUrl('steam', redirectTarget)"
+						@click="onOAuthProviderClick('steam')"
+					>
+						<SteamColorIcon />
+						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Steam' }) }}</span>
+					</a>
+				</ButtonStyled>
+			</template>
+			<button
+				class="mx-auto -mb-3 bg-transparent pt-1 text-center text-base font-semibold text-secondary transition-all hover:text-primary"
+				@click="onToggleOtherOptions()"
+			>
+				{{
+					showOtherOptions
+						? formatMessage(messages.showFewerOptions)
+						: formatMessage(messages.showOtherOptions)
+				}}
+			</button>
+		</section>
+
+		<div class="h-px w-full bg-surface-5"></div>
+
+		<section class="flex flex-col gap-2.5">
+			<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
+			<StyledInput
+				id="email"
+				v-model="emailModel"
+				:icon="MailIcon"
+				type="email"
+				autocomplete="email"
+				:placeholder="formatMessage(commonMessages.emailLabel)"
+				wrapper-class="w-full"
+			/>
+
+			<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+			<StyledInput
+				id="password"
+				v-model="passwordModel"
+				:icon="KeyIcon"
+				type="password"
+				autocomplete="new-password"
+				:placeholder="formatMessage(commonMessages.passwordLabel)"
+				wrapper-class="w-full"
+			/>
+
+			<ButtonStyled color="brand">
+				<button
+					class="!w-full"
+					:disabled="!emailModel || !passwordModel"
+					@click="onContinueWithEmail()"
+				>
+					{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
+				</button>
+			</ButtonStyled>
+
+			<p v-if="!routeQuery.launcher" class="m-0 text-center">
+				<IntlFormatted :message-id="messages.legalDisclaimer">
+					<template #terms-link="{ children }">
+						<NuxtLink to="/legal/terms" class="text-link">
+							<component :is="() => children" />
+						</NuxtLink>
+					</template>
+					<template #privacy-policy-link="{ children }">
+						<NuxtLink to="/legal/privacy" class="text-link">
+							<component :is="() => children" />
+						</NuxtLink>
+					</template>
+				</IntlFormatted>
+			</p>
+
+			<div class="mx-auto flex flex-wrap items-center justify-start gap-2 text-center">
+				{{ formatMessage(messages.alreadyHaveAccountLabel) }}
+				<NuxtLink
+					class="mr-1 text-link"
+					:to="{
+						path: '/auth/sign-in',
+						query: routeQuery,
+					}"
+				>
+					{{ formatMessage(commonMessages.signInButton) }}
+				</NuxtLink>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	DiscordColorIcon,
+	GitHubColorIcon,
+	GitLabColorIcon,
+	GoogleColorIcon,
+	KeyIcon,
+	MailIcon,
+	MicrosoftColorIcon,
+	RightArrowIcon,
+	SteamColorIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { useStorage } from '@vueuse/core'
+import type { LocationQuery } from 'vue-router'
+
+import { getAuthUrl, PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY } from '@/composables/auth.ts'
+
+type AuthProvider = 'discord' | 'google' | 'github' | 'gitlab' | 'steam' | 'microsoft'
+
+interface Props {
+	redirectTarget?: string
+	showOtherOptions?: boolean
+	routeQuery?: LocationQuery
+	onToggleOtherOptions?: () => void
+	onContinueWithEmail?: () => void
+}
+
+const {
+	redirectTarget = '',
+	showOtherOptions = false,
+	routeQuery = {},
+	onToggleOtherOptions = () => {},
+	onContinueWithEmail = () => {},
+} = defineProps<Props>()
+
+const emailModel = defineModel<string>('email', { default: '' })
+const passwordModel = defineModel<string>('password', { default: '' })
+
+const pendingSignInOAuthProvider = useStorage<AuthProvider | null>(
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+)
+const onOAuthProviderClick = (provider: AuthProvider) => {
+	pendingSignInOAuthProvider.value = provider
+}
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	signUpWithTitle: {
+		id: 'auth.sign-up.title.sign-up-with',
+		defaultMessage: 'Create an Account',
+	},
+	continueWithProvider: {
+		id: 'auth.continue-with-provider',
+		defaultMessage: 'Continue with {provider}',
+	},
+	legalDisclaimer: {
+		id: 'auth.sign-up.legal-dislaimer',
+		defaultMessage:
+			"By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
+	},
+	alreadyHaveAccountLabel: {
+		id: 'auth.sign-up.sign-in-option.title',
+		defaultMessage: 'Already have an account?',
+	},
+	continueWithEmail: {
+		id: 'auth.sign-up.continue-with-email',
+		defaultMessage: 'Continue with Email',
+	},
+	showFewerOptions: {
+		id: 'auth.sign-up.show-fewer-options',
+		defaultMessage: 'Show fewer options',
+	},
+	showOtherOptions: {
+		id: 'auth.sign-up.show-other-options',
+		defaultMessage: 'Show other options',
+	},
+})
+</script>
diff --git a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
index 9ce2ffd62b..e6874350f2 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
@@ -2,28 +2,29 @@
 	<div
 		class="flex h-11 items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-1 text-button-text"
 	>
-		<div class="grid max-w-[75%] grid-cols-[auto_1fr_auto] items-center gap-2">
+		<div class="flex min-w-0 flex-1 items-center justify-start gap-2">
 			<Avatar v-if="icon" :src="icon" alt="dependency-icon" size="20px" :no-shadow="true" />
 
-			<span v-tooltip="name || projectId" class="truncate font-semibold text-contrast">
+			<span
+				v-tooltip="name || projectId"
+				class="min-w-0 max-w-fit flex-1 truncate font-semibold text-contrast"
+			>
 				{{ name || 'Unknown Project' }}
 			</span>
+			<span
+				v-if="versionNumber"
+				v-tooltip="versionNumber"
+				class="min-w-0 max-w-fit flex-1 truncate whitespace-nowrap text-sm font-medium"
+			>
+				{{ versionNumber }}
+			</span>
 
 			<TagItem class="shrink-0 border !border-solid border-surface-5 capitalize">
 				{{ dependencyType }}
 			</TagItem>
 		</div>
 
-		<span
-			v-if="versionName"
-			v-tooltip="versionName"
-			class="truncate whitespace-nowrap font-medium"
-			:class="!hideRemove ? 'max-w-[35%]' : 'max-w-[50%]'"
-		>
-			{{ versionName }}
-		</span>
-
-		<div v-if="!hideRemove" class="flex items-center justify-end gap-1">
+		<div v-if="!hideRemove" class="flex shrink-0 items-center justify-end gap-1">
 			<ButtonStyled size="standard" :circular="true">
 				<button aria-label="Remove file" class="-mr-2 !shadow-none" @click="emitRemove">
 					<XIcon aria-hidden="true" />
@@ -43,12 +44,12 @@ const emit = defineEmits<{
 	(e: 'remove'): void
 }>()
 
-const { projectId, name, icon, dependencyType, versionName, hideRemove } = defineProps<{
+const { projectId, name, icon, dependencyType, versionNumber, hideRemove } = defineProps<{
 	projectId: string
 	name?: string
 	icon?: string
 	dependencyType: Labrinth.Versions.v2.DependencyType
-	versionName?: string
+	versionNumber?: string
 	hideRemove?: boolean
 }>()
 
diff --git a/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
index 6e4744b201..c0788c8f21 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
@@ -8,7 +8,7 @@
 				:name="dependency.name"
 				:icon="dependency.icon"
 				:dependency-type="dependency.dependencyType"
-				:version-name="dependency.versionName"
+				:version-number="dependency.versionNumber"
 				:hide-remove="disableRemove"
 				@remove="() => removeDependency(index)"
 			/>
@@ -35,7 +35,7 @@ const addedDependencies = computed(() =>
 			if (!dep.project_id) return null
 
 			const dependencyProject = dependencyProjects.value[dep.project_id]
-			const versionName = dependencyVersions.value[dep.version_id || '']?.name ?? ''
+			const versionNumber = dependencyVersions.value[dep.version_id || '']?.version_number ?? ''
 
 			if (!dependencyProject && projectsFetchLoading.value) return null
 
@@ -44,7 +44,7 @@ const addedDependencies = computed(() =>
 				name: dependencyProject?.name,
 				icon: dependencyProject?.icon_url,
 				dependencyType: dep.dependency_type,
-				versionName,
+				versionNumber,
 			}
 		})
 		.filter(Boolean),
diff --git a/apps/frontend/src/components/ui/create-project-version/components/DependencySelect.vue b/apps/frontend/src/components/ui/create-project-version/components/DependencySelect.vue
index a44b7d311c..9ea244a63d 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/DependencySelect.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/DependencySelect.vue
@@ -3,11 +3,16 @@
 		v-model="projectId"
 		placeholder="Select project"
 		:options="options"
-		:searchable="true"
+		:search-value="selectedProjectOption?.label"
 		search-placeholder="Search by name or paste ID..."
 		:no-options-message="searchLoading ? 'Loading...' : 'No results found'"
-		:disable-search-filter="true"
+		searchable
+		disable-search-filter
+		select-search-text-on-focus
+		:show-chevron="false"
 		@search-input="(query) => handleSearch(query)"
+		@search-blur="handleSearchBlur"
+		@select="handleSelect"
 	/>
 </template>
 
@@ -15,15 +20,37 @@
 import type { ComboboxOption } from '@modrinth/ui'
 import { Combobox, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'
-import { defineAsyncComponent, h } from 'vue'
+import { defineAsyncComponent, h, markRaw, ref, watch } from 'vue'
 
 const { addNotification } = injectNotificationManager()
 const projectId = defineModel<string>()
 
 const searchLoading = ref(false)
 const options = ref<ComboboxOption<string>[]>([])
+const selectedProjectOption = ref<ComboboxOption<string>>()
+const selectedProjectSearchQuery = ref('')
 
 const { labrinth } = injectModrinthClient()
+let latestSearchQuery = ''
+
+function hitToOption(hit: { title: string; project_id: string; icon_url?: string | null }) {
+	return {
+		label: hit.title,
+		value: hit.project_id,
+		icon: markRaw(
+			defineAsyncComponent(() =>
+				Promise.resolve({
+					setup: () => () =>
+						h('img', {
+							src: hit.icon_url,
+							alt: hit.title,
+							class: 'h-5 w-5 rounded',
+						}),
+				}),
+			),
+		),
+	}
+}
 
 const search = async (query: string) => {
 	query = query.trim()
@@ -53,36 +80,77 @@ const search = async (query: string) => {
 			facets: [[`project_id:${query.replace(/[^a-zA-Z0-9]/g, '')}`]], // remove any non-alphanumeric characters
 		})
 
-		options.value = [...resultsByProjectId.hits, ...results.hits].map((hit) => ({
-			label: hit.title,
-			value: hit.project_id,
-			icon: markRaw(
-				defineAsyncComponent(() =>
-					Promise.resolve({
-						setup: () => () =>
-							h('img', {
-								src: hit.icon_url,
-								alt: hit.title,
-								class: 'h-5 w-5 rounded',
-							}),
-					}),
-				),
-			),
-		}))
+		if (query !== latestSearchQuery) return
+
+		options.value = [...resultsByProjectId.hits, ...results.hits].map(hitToOption)
 	} catch (error: any) {
+		if (query !== latestSearchQuery) return
+
 		addNotification({
 			title: 'An error occurred',
 			text: error.data ? error.data.description : error,
 			type: 'error',
 		})
 	}
-	searchLoading.value = false
+
+	if (query === latestSearchQuery) {
+		searchLoading.value = false
+	}
 }
 
-const throttledSearch = useDebounceFn(search, 500)
+const throttledSearch = useDebounceFn(search, 250)
+
+const runSearch = async (query: string, debounce: boolean) => {
+	query = query.trim()
+	latestSearchQuery = query
+
+	if (!query) {
+		searchLoading.value = false
+		options.value = []
+		await throttledSearch(query)
+		return
+	}
 
-const handleSearch = async (query: string) => {
 	searchLoading.value = true
-	await throttledSearch(query)
+	await (debounce ? throttledSearch(query) : search(query))
 }
+
+const handleSearch = async (query: string) => {
+	await runSearch(query, true)
+}
+
+const handleSelect = (option: ComboboxOption<string>) => {
+	selectedProjectOption.value = option
+	selectedProjectSearchQuery.value = latestSearchQuery
+}
+
+const handleSearchBlur = async () => {
+	if (!projectId.value) return
+
+	const selectedOption =
+		options.value.find((option) => option.value === projectId.value) ??
+		(selectedProjectOption.value?.value === projectId.value
+			? selectedProjectOption.value
+			: undefined)
+	if (!selectedOption) return
+
+	await runSearch(selectedProjectSearchQuery.value || selectedOption.label, false)
+
+	if (!options.value.some((option) => option.value === selectedOption.value)) {
+		options.value = [selectedOption, ...options.value]
+	}
+}
+
+watch(projectId, (value) => {
+	if (!value) {
+		selectedProjectOption.value = undefined
+		selectedProjectSearchQuery.value = ''
+		return
+	}
+
+	const option = options.value.find((option) => option.value === value)
+	if (option) {
+		selectedProjectOption.value = option
+	}
+})
 </script>
diff --git a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue
index 0220e2c6a2..c66a961ce0 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue
@@ -8,7 +8,7 @@
 				:name="dependency.name"
 				:icon="dependency.icon"
 				:dependency-type="dependency.dependency_type"
-				:version-name="dependency.versionName"
+				:version-number="dependency.versionNumber"
 				@on-add-suggestion="
 					() =>
 						handleAddSuggestion({
diff --git a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
index bf4a3db4b2..d7092beadd 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
@@ -1,28 +1,31 @@
 <template>
 	<div
-		class="flex items-center justify-between gap-2 rounded-xl border-2 border-dashed border-surface-5 px-4 py-1 text-button-text"
+		class="flex h-11 items-center justify-between gap-2 rounded-xl border-2 border-dashed border-surface-5 px-4 py-1 text-button-text"
 	>
-		<div class="grid max-w-[75%] grid-cols-[auto_1fr_auto] items-center gap-2">
+		<div class="flex min-w-0 flex-1 items-center justify-start gap-2">
 			<Avatar v-if="icon" :src="icon" alt="dependency-icon" size="20px" :no-shadow="true" />
 
-			<span v-tooltip="name || 'Unknown Project'" class="truncate font-semibold text-contrast">
+			<span
+				v-tooltip="name || 'Unknown Project'"
+				class="min-w-0 max-w-fit flex-1 truncate font-semibold text-contrast"
+			>
 				{{ name || 'Unknown Project' }}
 			</span>
 
+			<span
+				v-if="versionNumber"
+				v-tooltip="versionNumber"
+				class="min-w-0 max-w-fit flex-1 truncate whitespace-nowrap text-sm font-medium"
+			>
+				{{ versionNumber }}
+			</span>
+
 			<TagItem class="shrink-0 border !border-solid border-surface-5 capitalize">
 				{{ dependencyType }}
 			</TagItem>
 		</div>
 
-		<span
-			v-if="versionName"
-			v-tooltip="versionName"
-			class="max-w-[35%] truncate whitespace-nowrap font-medium"
-		>
-			{{ versionName }}
-		</span>
-
-		<div class="flex items-center justify-end gap-1">
+		<div class="flex shrink-0 items-center justify-end gap-1">
 			<ButtonStyled size="standard" :circular="true" type="transparent">
 				<button aria-label="Add dependency" class="!shadow-none" @click="emitAddSuggestion">
 					<PlusIcon aria-hidden="true" />
@@ -41,11 +44,11 @@ const emit = defineEmits<{
 	(e: 'onAddSuggestion'): void
 }>()
 
-const { name, icon, dependencyType, versionName } = defineProps<{
+const { name, icon, dependencyType, versionNumber } = defineProps<{
 	name?: string
 	icon?: string
 	dependencyType: Labrinth.Versions.v2.DependencyType
-	versionName?: string
+	versionNumber?: string
 }>()
 
 function emitAddSuggestion() {
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index c2b2ae3649..e7169c3bac 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,11 +1,10 @@
 <template>
-	<NavTabs
+	<Tabs
 		v-if="editingVersion"
-		mode="local"
-		:links="editTabLinks"
-		:active-index="2"
-		class="mb-4 border border-solid border-surface-5 shadow-none drop-shadow-none"
-		@tab-click="setEditTab"
+		value="add-files"
+		:tabs="editTabs"
+		class="mb-5 border border-solid border-surface-5 !shadow-none !drop-shadow-none"
+		@change="setEditTab"
 	/>
 	<div class="flex w-full flex-col gap-4">
 		<template
@@ -99,7 +98,8 @@ import {
 	defineMessages,
 	DropzoneFileInput,
 	injectProjectPageContext,
-	NavTabs,
+	Tabs,
+	type TabsTab,
 	useVIntl,
 } from '@modrinth/ui'
 import { acceptFileFromProjectType } from '@modrinth/utils'
@@ -124,18 +124,14 @@ const {
 	handleNewFiles,
 } = injectManageVersionContext()
 
-const editTabs = [
-	{ label: 'Metadata', href: 'metadata', stage: 'metadata' },
-	{ label: 'Details', href: 'details', stage: 'add-details' },
-	{ label: 'Files', href: 'files', stage: 'add-files' },
-] as const
+const editTabs: TabsTab[] = [
+	{ label: 'Metadata', value: 'metadata' },
+	{ label: 'Details', value: 'add-details' },
+	{ label: 'Files', value: 'add-files' },
+]
 
-const editTabLinks = editTabs.map(({ label, href }) => ({ label, href }))
-
-function setEditTab(index: number) {
-	const tab = editTabs[index]
-	if (!tab) return
-	modal.value?.setStage(tab.stage)
+function setEditTab(tab: TabsTab) {
+	modal.value?.setStage(tab.value)
 }
 
 function handleRemoveFile(index: number) {
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index f20964dce4..a31b0de1a1 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -1,182 +1,58 @@
 <template>
-	<div class="flex w-full max-w-full flex-col gap-6">
-		<div class="flex flex-col gap-4">
-			<span class="font-semibold text-contrast">Add dependency</span>
-			<div class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 p-4">
-				<div class="grid gap-2.5">
-					<span class="font-semibold text-contrast">Project</span>
-					<DependencySelect v-model="newDependencyProjectId" />
-				</div>
-
-				<template v-if="newDependencyProjectId">
-					<div class="grid gap-2.5">
-						<span class="font-semibold text-contrast"> Version </span>
-						<Combobox
-							v-model="newDependencyVersionId"
-							placeholder="Select version"
-							:options="[{ label: 'Any version', value: null }, ...newDependencyVersions]"
-							:searchable="true"
-						/>
-					</div>
-
-					<div class="grid gap-2.5">
-						<span class="font-semibold text-contrast"> Dependency relation </span>
-						<Combobox
-							v-model="newDependencyType"
-							placeholder="Select dependency type"
-							:options="[
-								{ label: 'Required', value: 'required' },
-								{ label: 'Optional', value: 'optional' },
-								{ label: 'Incompatible', value: 'incompatible' },
-								{ label: 'Embedded', value: 'embedded' },
-							]"
-						/>
-					</div>
-
-					<ButtonStyled color="green">
-						<button
-							class="self-start"
-							:disabled="!newDependencyProjectId"
-							@click="
-								() =>
-									addDependency(
-										toRaw({
-											project_id: newDependencyProjectId,
-											version_id: newDependencyVersionId || undefined,
-											dependency_type: newDependencyType,
-										}),
-									)
-							"
-						>
-							Add Dependency
-						</button>
-					</ButtonStyled>
-				</template>
-			</div>
+	<div class="flex w-full max-w-full flex-col gap-3">
+		<div class="grid gap-2.5">
+			<span class="font-semibold text-contrast">Project</span>
+			<DependencySelect v-model="newDependencyProjectId" />
 		</div>
 
-		<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-4">
-			<span class="font-semibold text-contrast">Suggested dependencies</span>
-			<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
-		</div>
+		<template v-if="newDependencyProjectId">
+			<div class="grid gap-2.5">
+				<span class="font-semibold text-contrast"> Version </span>
+				<Combobox
+					v-model="newDependencyVersionId"
+					placeholder="Select version"
+					:options="newDependencyVersionOptions"
+					:search-value="selectedNewDependencyVersionLabel"
+					:searchable="true"
+					:select-search-text-on-focus="true"
+				/>
+			</div>
 
-		<div v-if="addedDependencies.length" class="flex flex-col gap-4">
-			<span class="font-semibold text-contrast">Added dependencies</span>
-			<DependenciesList />
-		</div>
+			<div class="grid gap-2.5">
+				<span class="font-semibold text-contrast"> Dependency relation </span>
+				<Combobox
+					v-model="newDependencyType"
+					placeholder="Select dependency type"
+					:options="[
+						{ label: 'Required', value: 'required' },
+						{ label: 'Optional', value: 'optional' },
+						{ label: 'Incompatible', value: 'incompatible' },
+						{ label: 'Embedded', value: 'embedded' },
+					]"
+				/>
+			</div>
+		</template>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	ButtonStyled,
-	Combobox,
-	injectModrinthClient,
-	injectNotificationManager,
-} from '@modrinth/ui'
-import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
+import { Combobox } from '@modrinth/ui'
+import { computed } from 'vue'
 
 import DependencySelect from '~/components/ui/create-project-version/components/DependencySelect.vue'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
-import DependenciesList from '../components/DependenciesList.vue'
-import SuggestedDependencies from '../components/SuggestedDependencies/SuggestedDependencies.vue'
-
-const { addNotification } = injectNotificationManager()
-const { labrinth } = injectModrinthClient()
-
-const {
-	draftVersion,
-	dependencyProjects,
-	dependencyVersions,
-	projectsFetchLoading,
-	visibleSuggestedDependencies,
-} = injectManageVersionContext()
-
-const errorNotification = (err: any) => {
-	addNotification({
-		title: 'An error occurred',
-		text: err.data ? err.data.description : err,
-		type: 'error',
-	})
-}
-
-const newDependencyProjectId = ref<string>()
-const newDependencyType = ref<Labrinth.Versions.v2.DependencyType>('required')
-const newDependencyVersionId = ref<string | null>(null)
-
-const newDependencyVersions = ref<ComboboxOption<string>[]>([])
-
-// reset to defaults when select different project
-watch(newDependencyProjectId, async () => {
-	newDependencyVersionId.value = null
-	newDependencyType.value = 'required'
-
-	if (!newDependencyProjectId.value) {
-		newDependencyVersions.value = []
-	} else {
-		try {
-			const versions = await labrinth.versions_v3.getProjectVersions(newDependencyProjectId.value)
-			newDependencyVersions.value = versions.map((version) => ({
-				label: version.name,
-				value: version.id,
-			}))
-		} catch (error: any) {
-			errorNotification(error)
-		}
-	}
-})
-
-const addedDependencies = computed(() =>
-	(draftVersion.value.dependencies || [])
-		.map((dep) => {
-			if (!dep.project_id) return null
-
-			const dependencyProject = dependencyProjects.value[dep.project_id]
-			const versionName = dependencyVersions.value[dep.version_id || '']?.name ?? ''
-
-			if (!dependencyProject && projectsFetchLoading.value) return null
-
-			return {
-				projectId: dep.project_id,
-				name: dependencyProject?.name,
-				icon: dependencyProject?.icon_url,
-				dependencyType: dep.dependency_type,
-				versionName,
-			}
-		})
-		.filter(Boolean),
+const { newDependencyProjectId, newDependencyType, newDependencyVersionId, newDependencyVersions } =
+	injectManageVersionContext()
+
+const newDependencyVersionOptions = computed(() => [
+	{ label: 'Any version', value: null },
+	...newDependencyVersions.value,
+])
+const selectedNewDependencyVersionLabel = computed(
+	() =>
+		newDependencyVersionOptions.value.find(
+			(option) => option.value === newDependencyVersionId.value,
+		)?.label,
 )
-
-const addDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
-	if (!draftVersion.value.dependencies) draftVersion.value.dependencies = []
-
-	const alreadyAdded = draftVersion.value.dependencies.some((existing) => {
-		if (existing.project_id !== dependency.project_id) return false
-		if (!existing.version_id && !dependency.version_id) return true
-		return existing.version_id === dependency.version_id
-	})
-
-	if (alreadyAdded) {
-		addNotification({
-			title: 'Dependency already added',
-			text: 'You cannot add the same dependency twice.',
-			type: 'error',
-		})
-		return
-	}
-
-	projectsFetchLoading.value = true
-	draftVersion.value.dependencies.push(dependency)
-	newDependencyProjectId.value = undefined
-}
-
-const handleAddSuggestedDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
-	draftVersion.value.dependencies?.push({
-		project_id: dependency.project_id,
-		version_id: dependency.version_id,
-		dependency_type: dependency.dependency_type,
-	})
-}
 </script>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
index 90950f8645..a86dcab796 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
@@ -1,11 +1,10 @@
 <template>
-	<NavTabs
+	<Tabs
 		v-if="editingVersion"
-		mode="local"
-		:links="editTabLinks"
-		:active-index="1"
-		class="mb-4 border border-solid border-surface-5 shadow-none drop-shadow-none"
-		@tab-click="setEditTab"
+		value="add-details"
+		:tabs="editTabs"
+		class="mb-5 border border-solid border-surface-5 !shadow-none !drop-shadow-none"
+		@change="setEditTab"
 	/>
 	<div class="flex w-full flex-col gap-6">
 		<div class="flex flex-col gap-2">
@@ -18,6 +17,7 @@
 				:never-empty="true"
 				:capitalize="true"
 				:disabled="isUploading"
+				hide-checkmark-icon
 			/>
 		</div>
 		<div class="flex flex-col gap-2">
@@ -61,25 +61,21 @@
 </template>
 
 <script lang="ts" setup>
-import { Chips, MarkdownEditor, NavTabs, StyledInput } from '@modrinth/ui'
+import { Chips, MarkdownEditor, StyledInput, Tabs, type TabsTab } from '@modrinth/ui'
 
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
 const { draftVersion, isUploading, editingVersion, modal } = injectManageVersionContext()
 
-const editTabs = [
-	{ label: 'Metadata', href: 'metadata', stage: 'metadata' },
-	{ label: 'Details', href: 'details', stage: 'add-details' },
-	{ label: 'Files', href: 'files', stage: 'add-files' },
-] as const
+const editTabs: TabsTab[] = [
+	{ label: 'Metadata', value: 'metadata' },
+	{ label: 'Details', value: 'add-details' },
+	{ label: 'Files', value: 'add-files' },
+]
 
-const editTabLinks = editTabs.map(({ label, href }) => ({ label, href }))
-
-function setEditTab(index: number) {
-	const tab = editTabs[index]
-	if (!tab) return
-	modal.value?.setStage(tab.stage)
+function setEditTab(tab: TabsTab) {
+	modal.value?.setStage(tab.value)
 }
 
 async function onImageUpload(file: File) {
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 8e1c3dd29b..5237d60b41 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -1,11 +1,10 @@
 <template>
-	<NavTabs
+	<Tabs
 		v-if="editingVersion"
-		mode="local"
-		:links="editTabLinks"
-		:active-index="0"
-		class="mb-2 border border-solid border-surface-5 shadow-none drop-shadow-none"
-		@tab-click="setEditTab"
+		value="metadata"
+		:tabs="editTabs"
+		class="mb-3 border border-solid border-surface-5 !shadow-none !drop-shadow-none"
+		@change="setEditTab"
 	/>
 	<div class="flex flex-col gap-6">
 		<div v-if="!editingVersion" class="flex flex-col gap-1">
@@ -161,40 +160,32 @@
 		</template>
 
 		<template v-if="!noDependenciesProject">
-			<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-1">
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast"> Suggested dependencies </span>
-
-					<ButtonStyled type="transparent" size="standard">
-						<button @click="editDependencies">
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
-				</div>
-				<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
-			</div>
-
-			<div
-				v-if="!visibleSuggestedDependencies.length || draftVersion.dependencies?.length"
-				class="flex flex-col gap-1"
-			>
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast"> Dependencies </span>
+			<div class="flex flex-col gap-2.5">
+				<div class="flex flex-col gap-1">
+					<div class="flex items-center justify-between">
+						<span class="font-semibold text-contrast"> Dependencies </span>
+
+						<ButtonStyled type="transparent" size="standard">
+							<button @click="addDependency">
+								<PlusIcon />
+								Add dependency
+							</button>
+						</ButtonStyled>
+					</div>
 
-					<ButtonStyled type="transparent" size="standard">
-						<button @click="editDependencies">
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
+					<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
+						<DependenciesList />
+					</div>
+					<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
+						<span class="text-sm font-medium">No dependencies added.</span>
+					</div>
 				</div>
 
-				<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
-					<DependenciesList disable-remove />
-				</div>
-				<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
-					<span class="text-sm font-medium">No dependencies added.</span>
+				<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-2.5">
+					<div class="flex items-center justify-between">
+						<span class="font-medium"> Suggested </span>
+					</div>
+					<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
 				</div>
 			</div>
 		</template>
@@ -203,14 +194,15 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { EditIcon, getLoaderIcon, UnknownIcon } from '@modrinth/assets'
+import { EditIcon, getLoaderIcon, PlusIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	defineMessages,
 	ENVIRONMENTS_COPY,
 	FormattedTag,
 	injectProjectPageContext,
-	NavTabs,
+	Tabs,
+	type TabsTab,
 	TagItem,
 	useVIntl,
 } from '@modrinth/ui'
@@ -239,18 +231,14 @@ const { projectV2 } = injectProjectPageContext()
 const generatedState = useGeneratedState()
 const loaders = computed(() => generatedState.value.loaders)
 
-const editTabs = [
-	{ label: 'Metadata', href: 'metadata', stage: 'metadata' },
-	{ label: 'Details', href: 'details', stage: 'add-details' },
-	{ label: 'Files', href: 'files', stage: 'add-files' },
-] as const
-
-const editTabLinks = editTabs.map(({ label, href }) => ({ label, href }))
+const editTabs: TabsTab[] = [
+	{ label: 'Metadata', value: 'metadata' },
+	{ label: 'Details', value: 'add-details' },
+	{ label: 'Files', value: 'add-files' },
+]
 
-function setEditTab(index: number) {
-	const tab = editTabs[index]
-	if (!tab) return
-	modal.value?.setStage(tab.stage)
+function setEditTab(tab: TabsTab) {
+	modal.value?.setStage(tab.value)
 }
 
 const isModpack = computed(() => projectType.value === 'modpack')
@@ -279,7 +267,7 @@ const editEnvironment = () => {
 const editFiles = () => {
 	modal.value?.setStage('from-details-files')
 }
-const editDependencies = () => {
+const addDependency = () => {
 	modal.value?.setStage('from-details-dependencies')
 }
 
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 01ad8a1baf..3599d536a6 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -164,9 +164,7 @@ defineExpose({
 	show,
 })
 
-const auth = (await useAuth()) as Ref<{
-	user: { id: string; username: string; avatar_url: string } | null
-}>
+const auth = await useAuth()
 
 const messages = defineMessages({
 	title: {
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 6278f19a2f..24974b3bba 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
@@ -120,7 +120,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 
 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 { getAuthUrl, removeAuthProvider, useAuth } from '@/composables/auth.ts'
 import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
 
 const { withdrawData, maxWithdrawAmount, availableMethods, calculateFees, saveStateToStorage } =
@@ -193,7 +193,6 @@ async function saveVenmoHandle() {
 			},
 		})
 
-		// @ts-expect-error auth.js is not typed
 		await useAuth(auth.value.token)
 
 		initialVenmoHandle.value = venmoHandle.value.trim()
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 a9dfa3e7e7..fdd371148c 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
@@ -358,8 +358,8 @@ import { computed, onMounted, ref, watch } from 'vue'
 
 import RevenueInputField from '@/components/ui/dashboard/RevenueInputField.vue'
 import WithdrawFeeBreakdown from '@/components/ui/dashboard/WithdrawFeeBreakdown.vue'
-import { useAuth } from '@/composables/auth.js'
 import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
+import { useAuth } from '~/composables/auth.ts'
 
 const debug = useDebugLogger('TremendousDetailsStage')
 const { withdrawData, maxWithdrawAmount, availableMethods, paymentOptions, calculateFees } =
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 6d21482061..8aefab6743 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -190,7 +190,6 @@ import {
 	LinkIcon,
 } from '@modrinth/assets'
 import { type ExtendedReport, reportQuickReplies } from '@modrinth/moderation'
-import { type OverflowMenuOption, useFormatDateTime } from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
@@ -198,6 +197,8 @@ import {
 	getProjectTypeIcon,
 	injectNotificationManager,
 	OverflowMenu,
+	type OverflowMenuOption,
+	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index e80906a9c1..7426b88192 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -26,12 +26,12 @@ import {
 	getProjectTypeIcon,
 	injectModrinthClient,
 	injectNotificationManager,
+	NavTabs,
 	OverflowMenu,
 	type OverflowMenuOption,
 	useFormatBytes,
 	useFormatDateTime,
 } from '@modrinth/ui'
-import { NavTabs } from '@modrinth/ui'
 import {
 	capitalizeString,
 	formatProjectType,
diff --git a/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/SelectPublishedModpack.vue b/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/SelectPublishedModpack.vue
index 16fd0fa9b6..1346fe17dd 100644
--- a/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/SelectPublishedModpack.vue
+++ b/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/SelectPublishedModpack.vue
@@ -87,7 +87,7 @@ const currentProjectId = computed(() => projectV3.value?.id)
 const { selectedProjectId, selectedVersionId } = injectServerCompatibilityContext()
 const { labrinth } = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
-const auth = (await useAuth()) as { user?: { id: string } }
+const auth = await useAuth()
 
 interface VersionInfo {
 	id: string
diff --git a/apps/frontend/src/composables/auth.js b/apps/frontend/src/composables/auth.js
deleted file mode 100644
index e69d6a4d52..0000000000
--- a/apps/frontend/src/composables/auth.js
+++ /dev/null
@@ -1,157 +0,0 @@
-export const useAuth = async (oldToken = null) => {
-	const auth = useState('auth', () => ({
-		user: null,
-		token: '',
-		headers: {},
-	}))
-
-	if (!auth.value.user || oldToken) {
-		auth.value = await initAuth(oldToken)
-	}
-
-	return auth
-}
-
-export const initAuth = async (oldToken = null) => {
-	const auth = {
-		user: null,
-		token: '',
-	}
-
-	if (oldToken === 'none') {
-		return auth
-	}
-
-	const route = useRoute()
-	const authCookie = useCookie('auth-token', {
-		maxAge: 60 * 60 * 24 * 365 * 10,
-		sameSite: 'lax',
-		secure: true,
-		httpOnly: false,
-		path: '/',
-	})
-
-	if (oldToken) {
-		authCookie.value = oldToken
-	}
-
-	if (route.query.code && !route.fullPath.includes('new_account=true')) {
-		authCookie.value = route.query.code
-	}
-
-	if (route.fullPath.includes('new_account=true') && route.path !== '/auth/welcome') {
-		const redirect = route.path.startsWith('/auth/') ? null : route.fullPath
-
-		await navigateTo(
-			`/auth/welcome?authToken=${route.query.code}${
-				redirect ? `&redirect=${encodeURIComponent(redirect)}` : ''
-			}`,
-		)
-	}
-
-	if (authCookie.value) {
-		auth.token = authCookie.value
-
-		if (!auth.token || !auth.token.startsWith('mra_')) {
-			return auth
-		}
-
-		try {
-			auth.user = await useBaseFetch(
-				'user',
-				{
-					headers: {
-						Authorization: auth.token,
-					},
-				},
-				true,
-			)
-		} catch {
-			/* empty */
-		}
-	}
-
-	if (!auth.user && auth.token) {
-		try {
-			const session = await useBaseFetch(
-				'session/refresh',
-				{
-					method: 'POST',
-					headers: {
-						Authorization: auth.token,
-					},
-				},
-				true,
-			)
-
-			auth.token = session.session
-			authCookie.value = auth.token
-
-			auth.user = await useBaseFetch(
-				'user',
-				{
-					headers: {
-						Authorization: auth.token,
-					},
-				},
-				true,
-			)
-		} catch {
-			authCookie.value = null
-		}
-	}
-
-	return auth
-}
-
-export const getSignInRedirectPath = (route) => {
-	const fullPath = route.fullPath
-	if (fullPath === '/auth' || fullPath.startsWith('/auth/')) {
-		return '/dashboard'
-	}
-	return fullPath
-}
-
-export const getSignInRouteObj = (route, redirectOverride) => ({
-	path: '/auth/sign-in',
-	query: {
-		redirect: redirectOverride ?? getSignInRedirectPath(route),
-	},
-})
-
-export const getAuthUrl = (provider, redirect = '/dashboard') => {
-	const config = useRuntimeConfig()
-	const route = useNativeRoute()
-
-	const fullURL = route.query.launcher
-		? getLauncherRedirectUrl(route)
-		: `${config.public.siteUrl}/auth/sign-in?redirect=${encodeURIComponent(redirect)}`
-
-	return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(fullURL)}`
-}
-
-export const removeAuthProvider = async (provider) => {
-	startLoading()
-
-	const auth = await useAuth()
-
-	await useBaseFetch('auth/provider', {
-		method: 'DELETE',
-		body: {
-			provider,
-		},
-	})
-
-	await useAuth(auth.value.token)
-
-	stopLoading()
-}
-
-export const getLauncherRedirectUrl = (route) => {
-	const usesLocalhostRedirectionScheme =
-		['4', '6'].includes(route.query.ipver) && Number(route.query.port) < 65536
-
-	return usesLocalhostRedirectionScheme
-		? `http://${route.query.ipver === '4' ? '127.0.0.1' : '[::1]'}:${route.query.port}`
-		: `https://launcher-files.modrinth.com`
-}
diff --git a/apps/frontend/src/composables/auth.ts b/apps/frontend/src/composables/auth.ts
new file mode 100644
index 0000000000..2519d8232a
--- /dev/null
+++ b/apps/frontend/src/composables/auth.ts
@@ -0,0 +1,208 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { useStorage } from '@vueuse/core'
+import type { LocationQueryValue, RouteLocationNormalizedLoaded } from 'vue-router'
+
+import type { CookieOptions } from '#app'
+
+type AuthState = {
+	user: Labrinth.Users.v2.User | null
+	token: string
+}
+
+type QueryValue = LocationQueryValue | LocationQueryValue[] | undefined
+type FullPathRoute = Pick<RouteLocationNormalizedLoaded, 'fullPath'>
+type LauncherRoute = Pick<RouteLocationNormalizedLoaded, 'query'>
+
+export const LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY = 'auth-last-sign-in-oauth-provider'
+export const PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY = 'auth-pending-sign-in-oauth-provider'
+
+const AUTH_COOKIE_OPTIONS = {
+	maxAge: 60 * 60 * 24 * 365 * 10,
+	sameSite: 'lax',
+	secure: true,
+	httpOnly: false,
+	path: '/',
+} satisfies CookieOptions<string | null>
+
+const getQueryString = (value: QueryValue) => {
+	if (Array.isArray(value)) {
+		return value[0] ?? null
+	}
+	return value ?? null
+}
+
+export const useAuth = async (oldToken: string | null | undefined = null) => {
+	const auth = useState<AuthState>('auth', () => ({
+		user: null,
+		token: '',
+	}))
+
+	if (!auth.value.user || oldToken) {
+		auth.value = await initAuth(oldToken)
+	}
+
+	return auth
+}
+
+export const initAuth = async (oldToken: string | null | undefined = null) => {
+	const auth: AuthState = {
+		user: null,
+		token: '',
+	}
+
+	if (oldToken === 'none') {
+		return auth
+	}
+
+	const route = useRoute()
+	const authCookie = useCookie<string | null>('auth-token', AUTH_COOKIE_OPTIONS)
+	const authCode = getQueryString(route.query.code)
+
+	if (oldToken) {
+		authCookie.value = oldToken
+	}
+
+	if (authCode) {
+		authCookie.value = authCode
+	}
+
+	if (authCookie.value) {
+		auth.token = authCookie.value
+
+		if (!auth.token || !auth.token.startsWith('mra_')) {
+			return auth
+		}
+
+		try {
+			auth.user = (await useBaseFetch(
+				'user',
+				{
+					headers: {
+						Authorization: auth.token,
+					},
+				},
+				true,
+			)) as Labrinth.Users.v2.User
+		} catch {
+			/* empty */
+		}
+	}
+
+	if (!auth.user && auth.token) {
+		try {
+			const session = (await useBaseFetch(
+				'session/refresh',
+				{
+					method: 'POST',
+					headers: {
+						Authorization: auth.token,
+					},
+				},
+				true,
+			)) as { session: string }
+
+			auth.token = session.session
+			authCookie.value = auth.token
+
+			auth.user = (await useBaseFetch(
+				'user',
+				{
+					headers: {
+						Authorization: auth.token,
+					},
+				},
+				true,
+			)) as Labrinth.Users.v2.User
+		} catch {
+			authCookie.value = null
+		}
+	}
+
+	return auth
+}
+
+export const getSignInRedirectPath = (route: FullPathRoute) => {
+	const fullPath = route.fullPath
+	if (fullPath === '/auth' || fullPath.startsWith('/auth/')) {
+		return '/dashboard'
+	}
+	return fullPath
+}
+
+export const getSignInRouteObj = (route: FullPathRoute, redirectOverride?: string | null) => ({
+	path: '/auth/sign-in',
+	query: {
+		redirect: redirectOverride ?? getSignInRedirectPath(route),
+	},
+})
+
+export const getAuthUrl = (provider: string, redirect = '/dashboard') => {
+	const config = useRuntimeConfig()
+	const route = useNativeRoute()
+	const launcher = getQueryString(route.query.launcher)
+
+	const fullURL = launcher
+		? (() => {
+				const callbackUrl = new URL('/auth/sign-in', config.public.siteUrl)
+				callbackUrl.searchParams.set('launcher', launcher)
+
+				const ipver = getQueryString(route.query.ipver)
+				const port = getQueryString(route.query.port)
+
+				if (ipver) {
+					callbackUrl.searchParams.set('ipver', ipver)
+				}
+
+				if (port) {
+					callbackUrl.searchParams.set('port', port)
+				}
+
+				return callbackUrl.toString()
+			})()
+		: `${config.public.siteUrl}/auth/sign-in?redirect=${encodeURIComponent(redirect)}`
+
+	return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(fullURL)}`
+}
+
+export const promotePendingSignInOAuthProvider = () => {
+	if (!import.meta.client) return
+	const pending = useStorage<string | null>(
+		PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+		null,
+		undefined,
+		{ initOnMounted: true },
+	)
+	if (!pending.value) return
+	const last = useStorage<string | null>(LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY, null, undefined, {
+		initOnMounted: true,
+	})
+	last.value = pending.value
+	pending.value = null
+}
+
+export const removeAuthProvider = async (provider: string) => {
+	startLoading()
+
+	const auth = await useAuth()
+
+	await useBaseFetch('auth/provider', {
+		method: 'DELETE',
+		body: {
+			provider,
+		},
+	})
+
+	await useAuth(auth.value.token)
+
+	stopLoading()
+}
+
+export const getLauncherRedirectUrl = (route: LauncherRoute) => {
+	const ipver = getQueryString(route.query.ipver)
+	const port = Number(getQueryString(route.query.port))
+	const usesLocalhostRedirectionScheme = ['4', '6'].includes(ipver ?? '') && port < 65536
+
+	return usesLocalhostRedirectionScheme
+		? `http://${ipver === '4' ? '127.0.0.1' : '[::1]'}:${port}`
+		: 'https://launcher-files.modrinth.com'
+}
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 48c723ed05..e5e04a8156 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -771,7 +771,7 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
-import { getSignInRouteObj } from '~/composables/auth.js'
+import { getSignInRouteObj } from '~/composables/auth.ts'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 8092c8b0db..2ae03e090b 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -218,12 +218,75 @@
   "auth.authorize.authorize-app-name": {
     "message": "Authorize {appName}"
   },
+  "auth.authorize.error.missing-parameters": {
+    "message": "Missing required OAuth query parameters."
+  },
   "auth.authorize.error.no-redirect-url": {
     "message": "No redirect location found in response"
   },
+  "auth.authorize.errro-title": {
+    "message": "An Error Occured"
+  },
   "auth.authorize.redirect-url": {
     "message": "You will be redirected to <redirect-url>{url}</redirect-url>"
   },
+  "auth.continue-with-provider": {
+    "message": "Continue with {provider}"
+  },
+  "auth.create-account.age-requirement.warning-title": {
+    "message": "Age requirement"
+  },
+  "auth.create-account.complete-sign-up": {
+    "message": "Complete sign up"
+  },
+  "auth.create-account.date-of-birth.invalid.text": {
+    "message": "Please enter a valid date of birth. Year cannot be 0000."
+  },
+  "auth.create-account.date-of-birth.invalid.title": {
+    "message": "Invalid date of birth"
+  },
+  "auth.create-account.date-of-birth.label": {
+    "message": "Date of birth"
+  },
+  "auth.create-account.date-of-birth.over13-helper": {
+    "message": "You must be over 13 years old to use Modrinth."
+  },
+  "auth.create-account.date-of-birth.placeholder": {
+    "message": "Select your date of birth"
+  },
+  "auth.create-account.date-of-birth.required.text": {
+    "message": "Please enter your date of birth before continuing."
+  },
+  "auth.create-account.date-of-birth.required.title": {
+    "message": "Date of birth required"
+  },
+  "auth.create-account.date-of-birth.under13-helper": {
+    "message": "You cannot create an account at Modrinth unless you are over 13 years old."
+  },
+  "auth.create-account.info-panel.source-code-link": {
+    "message": "Relevant source code"
+  },
+  "auth.create-account.info-panel.text": {
+    "message": "We do not store your date of birth, only whether you are over 13 to use Modrinth."
+  },
+  "auth.create-account.page-title": {
+    "message": "Create Account"
+  },
+  "auth.create-account.security-check.label": {
+    "message": "Security check"
+  },
+  "auth.create-account.subscribe.label": {
+    "message": "Keep me updated on the cool things Modrinth is working on via email"
+  },
+  "auth.create-account.title": {
+    "message": "Create an Account"
+  },
+  "auth.create-account.username.optional-label": {
+    "message": "Username"
+  },
+  "auth.create-account.username.placeholder": {
+    "message": "Enter username"
+  },
   "auth.reset-password.method-choice.action": {
     "message": "Send recovery email"
   },
@@ -266,45 +329,57 @@
   "auth.sign-in.2fa.placeholder": {
     "message": "Enter code..."
   },
-  "auth.sign-in.additional-options": {
-    "message": "<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>"
+  "auth.sign-in.continue-with-email": {
+    "message": "Continue with Email"
+  },
+  "auth.sign-in.create-account": {
+    "message": "Sign up"
+  },
+  "auth.sign-in.forgot-password": {
+    "message": "Forgot password"
+  },
+  "auth.sign-in.last-sign-in": {
+    "message": "Last sign in"
+  },
+  "auth.sign-in.no-account": {
+    "message": "Don't have an account?"
   },
   "auth.sign-in.sign-in-with": {
-    "message": "Sign in with"
+    "message": "Sign into Modrinth"
   },
   "auth.sign-in.title": {
     "message": "Sign In"
   },
-  "auth.sign-in.use-password": {
-    "message": "Or use a password"
+  "auth.sign-up.age-requirement.warning-title": {
+    "message": "Age requirement"
   },
-  "auth.sign-up.action.create-account": {
-    "message": "Create account"
+  "auth.sign-up.continue-with-email": {
+    "message": "Continue with Email"
   },
   "auth.sign-up.legal-dislaimer": {
     "message": "By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
   },
-  "auth.sign-up.notification.password-mismatch.text": {
-    "message": "Passwords do not match!"
+  "auth.sign-up.show-fewer-options": {
+    "message": "Show fewer options"
+  },
+  "auth.sign-up.show-other-options": {
+    "message": "Show other options"
   },
   "auth.sign-up.sign-in-option.title": {
     "message": "Already have an account?"
   },
-  "auth.sign-up.subscribe.label": {
-    "message": "Subscribe to updates about Modrinth"
-  },
   "auth.sign-up.title": {
     "message": "Sign Up"
   },
-  "auth.sign-up.title.create-account": {
-    "message": "Or create an account yourself"
-  },
   "auth.sign-up.title.sign-up-with": {
-    "message": "Sign up with"
+    "message": "Create an Account"
   },
   "auth.verify-email.action.account-settings": {
     "message": "Account settings"
   },
+  "auth.verify-email.action.discover-mods": {
+    "message": "Discover mods"
+  },
   "auth.verify-email.already-verified.description": {
     "message": "Your email is already verified!"
   },
@@ -323,6 +398,15 @@
   "auth.verify-email.failed-verification.title": {
     "message": "Email verification failed"
   },
+  "auth.verify-email.notification.email-sent.description": {
+    "message": "An email with a link to verify your account has been sent to {email}."
+  },
+  "auth.verify-email.notification.email-sent.title": {
+    "message": "Email sent"
+  },
+  "auth.verify-email.notification.error-occurred.title": {
+    "message": "An error occurred"
+  },
   "auth.verify-email.post-verification.description": {
     "message": "Your email address has been successfully verified!"
   },
@@ -332,21 +416,6 @@
   "auth.verify-email.title": {
     "message": "Verify Email"
   },
-  "auth.welcome.checkbox.subscribe": {
-    "message": "Subscribe to updates about Modrinth"
-  },
-  "auth.welcome.description": {
-    "message": "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with amazing mods."
-  },
-  "auth.welcome.label.tos": {
-    "message": "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
-  },
-  "auth.welcome.long-title": {
-    "message": "Welcome to Modrinth!"
-  },
-  "auth.welcome.title": {
-    "message": "Welcome"
-  },
   "collection.button.edit-icon": {
     "message": "Edit icon"
   },
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 9352ef0b06..111e9d5bb1 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1123,7 +1123,7 @@ import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
 import ModerationProjectNags from '~/components/ui/moderation/ModerationProjectNags.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
-import { getSignInRouteObj } from '~/composables/auth.js'
+import { getSignInRouteObj } from '~/composables/auth.ts'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'
 import { versionQueryOptions } from '~/composables/queries/version'
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/versions.vue b/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
index 7176020d39..2b8ca1453a 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
@@ -343,7 +343,7 @@ import {
 import { useTemplateRef, watch } from 'vue'
 
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
-import { getSignInRouteObj } from '~/composables/auth.js'
+import { getSignInRouteObj } from '~/composables/auth.ts'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
 const route = useRoute()
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 52fdc553a0..5c3d1070cc 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -450,7 +450,7 @@ import { renderHighlightedString } from '@modrinth/utils'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import Modal from '~/components/ui/Modal.vue'
-import { getSignInRouteObj } from '~/composables/auth.js'
+import { getSignInRouteObj } from '~/composables/auth.ts'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { inferVersionInfo } from '~/helpers/infer'
 import { createDataPackVersion } from '~/helpers/package.js'
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index 1694947736..a879454aa0 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -269,7 +269,7 @@ import {
 import { onMounted, useTemplateRef, watch } from 'vue'
 
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
-import { getSignInRouteObj } from '~/composables/auth.js'
+import { getSignInRouteObj } from '~/composables/auth.ts'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
 const route = useRoute()
diff --git a/apps/frontend/src/pages/auth.vue b/apps/frontend/src/pages/auth.vue
index f861e7d7a3..5781fa689f 100644
--- a/apps/frontend/src/pages/auth.vue
+++ b/apps/frontend/src/pages/auth.vue
@@ -8,7 +8,9 @@ useSeoMeta({
 })
 </script>
 <template>
-	<NuxtPage class="auth-container universal-card" />
+	<div class="grid min-h-[calc(100vh-4.5rem)] place-items-center pb-20">
+		<NuxtPage />
+	</div>
 </template>
 
 <style>
@@ -31,19 +33,17 @@ useSeoMeta({
 	margin: 0;
 }
 
-.auth-container .btn-wrapper :is(a, button) {
+.auth-container .btn {
 	font-weight: 700;
 	min-height: 2.5rem;
 	text-decoration: none;
 }
 
-.centered-btn :is(a, button),
-.centered-btn:is(a, button) {
+.centered-btn {
 	margin-inline: auto;
 }
 
-.continue-btn :is(a, button) svg,
-.continue-btn:is(a, button) svg {
+.btn.continue-btn svg {
 	margin: 0 0 0 0.5rem;
 }
 
@@ -54,19 +54,19 @@ useSeoMeta({
 	width: 100%;
 }
 
-.third-party a {
+.third-party .btn {
 	width: 100%;
 	vertical-align: middle;
 }
 
-.third-party a svg {
+.third-party .btn svg {
 	margin-right: var(--gap-sm);
 	width: 1.25rem;
 	height: 1.25rem;
 }
 
 @media screen and (max-width: 25.5rem) {
-	.third-party a {
+	.third-party .btn {
 		grid-column: 1 / 3;
 	}
 }
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index 6662c9f2f6..2abe83bb31 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -1,29 +1,33 @@
 <template>
-	<div>
-		<div v-if="error" class="oauth-items">
-			<div>
-				<h1>{{ formatMessage(commonMessages.errorLabel) }}</h1>
-			</div>
-			<p>
-				<span>{{ error.data?.error }}: </span>
-				{{ error.data?.description }}
+	<div
+		class="universal-card flex w-full max-w-[28rem] flex-col gap-6 border border-solid border-surface-5"
+	>
+		<div v-if="authorizationError" class="flex flex-col gap-2.5">
+			<h1 class="m-0 mx-auto text-xl font-semibold text-contrast">
+				{{ formatMessage(messages.errorTitle) }}
+			</h1>
+			<p class="m-0">
+				<span>{{ authorizationError.error }}: </span>
+				{{ authorizationError.description }}
 			</p>
 		</div>
-		<div v-else-if="app && createdBy && authorizationData" class="oauth-items">
-			<div class="connected-items">
-				<div class="profile-pics">
+		<div v-else-if="app && createdBy && authorizationData" class="flex flex-col gap-6">
+			<div class="mt-4 flex items-center justify-center">
+				<div class="flex w-full flex-row items-center justify-evenly">
 					<Avatar size="md" :src="app.icon_url" />
 					<!-- <img class="profile-pic" :src="app.icon_url" alt="User profile picture" /> -->
-					<div class="connection-indicator">→</div>
-					<Avatar size="md" circle :src="auth.user.avatar_url" />
+					<div class="flex select-none items-center justify-center text-[2rem] text-primary">→</div>
+					<Avatar size="md" circle :src="auth.user?.avatar_url" />
 					<!-- <img class="profile-pic" :src="auth.user.avatar_url" alt="User profile picture" /> -->
 				</div>
 			</div>
-			<div class="title">
-				<h1>{{ formatMessage(messages.title, { appName: app.name }) }}</h1>
+			<div class="mx-auto">
+				<h1 class="mb-0 ml-0 mr-0 mt-0 text-xl text-contrast">
+					{{ formatMessage(messages.title, { appName: app.name }) }}
+				</h1>
 			</div>
-			<div class="auth-info">
-				<div class="scope-heading">
+			<div class="flex flex-col gap-3">
+				<div class="mb-3">
 					<IntlFormatted
 						:message-id="messages.appInfo"
 						:values="{
@@ -43,11 +47,11 @@
 						</template>
 					</IntlFormatted>
 				</div>
-				<div class="scope-items">
+				<div class="flex flex-col gap-3">
 					<div v-for="scopeItem in scopeDefinitions" :key="scopeItem">
-						<div class="scope-item">
-							<div class="scope-icon">
-								<CheckIcon />
+						<div class="flex flex-row items-center gap-2">
+							<div class="grid h-5 min-h-5 w-5 min-w-5 place-content-center rounded-full bg-green">
+								<CheckIcon class="text-sm text-black" />
 							</div>
 							{{ scopeItem }}
 						</div>
@@ -68,11 +72,11 @@
 					</button>
 				</ButtonStyled>
 			</div>
-			<div class="redirection-notice">
-				<p class="redirect-instructions">
+			<div class="flex flex-col gap-2 text-center">
+				<p class="m-0 text-sm">
 					<IntlFormatted :message-id="messages.redirectUrl" :values="{ url: redirectUri }">
 						<template #redirect-url="{ children }">
-							<span class="redirect-url">
+							<span class="font-bold">
 								<component :is="() => normalizeChildren(children)" />
 							</span>
 						</template>
@@ -83,7 +87,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { CheckIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
@@ -98,10 +102,35 @@ import {
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
+import type { LocationQueryValue } from 'vue-router'
 
-import { useAuth } from '@/composables/auth.js'
 import { useScopes } from '@/composables/auth/scopes.ts'
 
+interface ApiErrorShape {
+	data?: {
+		description?: string
+		error?: string
+	}
+}
+
+const getQueryString = (
+	value: LocationQueryValue | LocationQueryValue[] | null | undefined,
+): string => {
+	const firstValue = Array.isArray(value) ? value[0] : value
+	return typeof firstValue === 'string' ? firstValue : ''
+}
+
+const getErrorMessage = (error: unknown): string => {
+	const apiError = error as ApiErrorShape
+	if (typeof apiError?.data?.description === 'string') {
+		return apiError.data.description
+	}
+	if (error instanceof Error) {
+		return error.message
+	}
+	return String(error)
+}
+
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -124,6 +153,10 @@ const messages = defineMessages({
 		id: 'auth.authorize.error.no-redirect-url',
 		defaultMessage: 'No redirect location found in response',
 	},
+	missingParametersError: {
+		id: 'auth.authorize.error.missing-parameters',
+		defaultMessage: 'Missing required OAuth query parameters.',
+	},
 	redirectUrl: {
 		id: 'auth.authorize.redirect-url',
 		defaultMessage: 'You will be redirected to <redirect-url>{url}</redirect-url>',
@@ -132,33 +165,35 @@ const messages = defineMessages({
 		id: 'auth.authorize.authorize-app-name',
 		defaultMessage: 'Authorize {appName}',
 	},
+	errorTitle: {
+		id: 'auth.authorize.errro-title',
+		defaultMessage: 'An Error Occured',
+	},
 })
 
 const router = useNativeRoute()
 const auth = await useAuth()
 const { scopesToDefinitions } = useScopes()
 
-const clientId = router.query?.client_id || false
-const redirectUri = router.query?.redirect_uri || false
-const scope = router.query?.scope || false
-const state = router.query?.state || false
+const clientId = computed(() => getQueryString(router.query.client_id))
+const redirectUri = computed(() => getQueryString(router.query.redirect_uri))
+const scope = computed(() => getQueryString(router.query.scope))
+const state = computed(() => getQueryString(router.query.state))
+const hasRequiredParams = computed(() => !!clientId.value && !!redirectUri.value && !!scope.value)
 
 const getFlowIdAuthorization = async () => {
-	const params = {
-		client_id: clientId,
-		redirect_uri: redirectUri,
-		scope,
-	}
-	if (state) {
-		params.state = state
-	}
-
-	const authorization = await client.labrinth.oauth_internal.authorize(params)
+	const authorization = await client.labrinth.oauth_internal.authorize({
+		client_id: clientId.value,
+		redirect_uri: redirectUri.value,
+		scope: scope.value,
+		...(state.value ? { state: state.value } : {}),
+	})
 
 	if (typeof authorization === 'string') {
 		await navigateTo(authorization, {
 			external: true,
 		})
+		return null
 	}
 
 	return authorization
@@ -170,27 +205,60 @@ const {
 	error,
 	suspense: authSusp,
 } = useQuery({
-	queryKey: computed(() => ['authorization', clientId, redirectUri, scope, state]),
+	queryKey: computed(() => [
+		'authorization',
+		clientId.value,
+		redirectUri.value,
+		scope.value,
+		state.value,
+	]),
 	queryFn: getFlowIdAuthorization,
-	enabled: computed(() => !!clientId && !!redirectUri && !!scope),
+	enabled: hasRequiredParams,
+})
+
+const authorizationError = computed(() => {
+	if (!hasRequiredParams.value) {
+		return {
+			error: 'invalid_request',
+			description: formatMessage(messages.missingParametersError),
+		}
+	}
+
+	const apiError = (error.value as ApiErrorShape | null)?.data
+	if (apiError) {
+		return apiError
+	}
+
+	if (error.value) {
+		return {
+			error: 'server_error',
+			description: getErrorMessage(error.value),
+		}
+	}
+
+	return null
 })
 
 const { data: app, suspense: appSusp } = useQuery({
-	queryKey: computed(() => ['oauth/app', clientId]),
-	queryFn: () => client.labrinth.oauth_internal.getApp(clientId),
-	enabled: computed(() => !!clientId),
+	queryKey: computed(() => ['oauth/app', clientId.value]),
+	queryFn: () => client.labrinth.oauth_internal.getApp(clientId.value),
+	enabled: computed(() => !!clientId.value),
 })
 
 const { data: createdBy, suspense: userSusp } = useQuery({
 	queryKey: computed(() => ['user', app.value?.created_by]),
-	queryFn: () => client.labrinth.users_v2.get(app.value.created_by),
+	queryFn: () => {
+		if (!app.value?.created_by) {
+			throw new Error('Missing OAuth app creator')
+		}
+
+		return client.labrinth.users_v2.get(app.value.created_by)
+	},
 	enabled: computed(() => !!app.value?.created_by),
 })
 
 onServerPrefetch(async () => {
-	await authSusp()
-	await appSusp()
-	await userSusp()
+	await Promise.allSettled([authSusp(), appSusp(), userSusp()])
 })
 
 const scopeDefinitions = computed(() =>
@@ -199,6 +267,10 @@ const scopeDefinitions = computed(() =>
 
 const onAuthorize = async () => {
 	try {
+		if (!authorizationData.value?.flow_id) {
+			throw new Error(formatMessage(messages.noRedirectUrlError))
+		}
+
 		const res = await client.labrinth.oauth_internal.accept({
 			flow: authorizationData.value.flow_id,
 		})
@@ -214,7 +286,7 @@ const onAuthorize = async () => {
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: getErrorMessage(err),
 			type: 'error',
 		})
 	}
@@ -222,6 +294,10 @@ const onAuthorize = async () => {
 
 const onReject = async () => {
 	try {
+		if (!authorizationData.value?.flow_id) {
+			throw new Error(formatMessage(messages.noRedirectUrlError))
+		}
+
 		const res = await client.labrinth.oauth_internal.reject({
 			flow: authorizationData.value.flow_id,
 		})
@@ -237,7 +313,7 @@ const onReject = async () => {
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: getErrorMessage(err),
 			type: 'error',
 		})
 	}
@@ -247,130 +323,3 @@ definePageMeta({
 	middleware: 'auth',
 })
 </script>
-
-<style scoped lang="scss">
-.oauth-items {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-xl);
-}
-
-.scope-items {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
-}
-
-.scope-item {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-sm);
-}
-
-.scope-icon {
-	display: flex;
-
-	color: var(--color-raised-bg);
-	background-color: var(--color-green);
-	aspect-ratio: 1;
-	border-radius: 50%;
-	padding: var(--gap-xs);
-}
-.title {
-	margin-inline: auto;
-
-	h1 {
-		margin-bottom: 0 !important;
-	}
-}
-.redirection-notice {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-xs);
-	text-align: center;
-
-	.redirect-instructions {
-		font-size: var(--font-size-sm);
-	}
-
-	.redirect-url {
-		font-weight: bold;
-	}
-}
-
-.wide-button {
-	width: 100% !important;
-}
-
-.button-row {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-xs);
-	justify-content: center;
-}
-.auth-info {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
-}
-
-.scope-heading {
-	margin-bottom: var(--gap-sm);
-}
-
-.profile-pics {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-evenly;
-
-	.connection-indicator {
-		// Make sure the text sits in the middle and is centered.
-		// Make the text large, and make sure it's not selectable.
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		user-select: none;
-
-		color: var(--color-primary);
-	}
-}
-
-.profile-pic {
-	width: 6rem;
-	height: 6rem;
-	border-radius: 50%;
-	margin: 0 1rem;
-}
-
-.dotted-border-line {
-	width: 75%;
-	border: 0.1rem dashed var(--color-divider);
-}
-
-.connected-items {
-	// Display dotted-border-line under profile-pics and centered behind them
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	z-index: 1;
-	margin-top: 1rem;
-
-	// Display profile-pics on top of dotted-border-line
-	.profile-pics {
-		position: relative;
-		z-index: 2;
-	}
-
-	// Display dotted-border-line behind profile-pics
-	.dotted-border-line {
-		position: absolute;
-		z-index: 1;
-	}
-}
-</style>
diff --git a/apps/frontend/src/pages/auth/create/oauth.vue b/apps/frontend/src/pages/auth/create/oauth.vue
new file mode 100644
index 0000000000..d2bde7b193
--- /dev/null
+++ b/apps/frontend/src/pages/auth/create/oauth.vue
@@ -0,0 +1,196 @@
+<template>
+	<div v-if="subtleLauncherRedirectUri">
+		<iframe
+			:src="subtleLauncherRedirectUri"
+			class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
+		></iframe>
+	</div>
+	<CreateAccountView
+		v-else
+		v-model:date-of-birth="dateOfBirth"
+		v-model:username="username"
+		v-model:token="token"
+		v-model:subscribe="subscribe"
+		:globals="globals"
+		:requires-dob="requiresDob"
+		:on-complete-sign-up="completeOAuthSignUp"
+		:on-set-captcha-ref="setCaptchaRef"
+	/>
+</template>
+
+<script setup lang="ts">
+import {
+	commonMessages,
+	defineMessages,
+	injectModrinthClient,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { LocationQueryValue } from 'vue-router'
+
+import CreateAccountView from '@/components/ui/auth/CreateAccount.vue'
+import { getLauncherRedirectUrl, promotePendingSignInOAuthProvider } from '@/composables/auth.ts'
+
+interface AuthGlobalsResponse {
+	captcha_enabled?: boolean
+	[key: string]: unknown
+}
+
+interface ApiErrorShape {
+	data?: {
+		description?: string
+	}
+}
+
+const getQueryString = (
+	value: LocationQueryValue | LocationQueryValue[] | null | undefined,
+): string => {
+	const firstValue = Array.isArray(value) ? value[0] : value
+	return typeof firstValue === 'string' ? firstValue : ''
+}
+
+const getErrorMessage = (error: unknown): string => {
+	const apiError = error as ApiErrorShape
+	if (typeof apiError?.data?.description === 'string') {
+		return apiError.data.description
+	}
+	if (error instanceof Error) {
+		return error.message
+	}
+	return String(error)
+}
+
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const route = useNativeRoute()
+const auth = await useAuth()
+
+const messages = defineMessages({
+	createAccountTitle: {
+		id: 'auth.create-account.page-title',
+		defaultMessage: 'Create Account',
+	},
+})
+
+useHead({
+	title() {
+		return `${formatMessage(messages.createAccountTitle)} - Modrinth`
+	},
+})
+
+const requiresDob = computed(() => {
+	const raw = route.query.requires_dob
+	const value = Array.isArray(raw) ? raw[0] : raw
+
+	if (!value) {
+		return false
+	}
+
+	return value === 'true' || value === '1'
+})
+
+const oauthFlowState = computed(() => {
+	const state = route.query.state
+	const value = Array.isArray(state) ? state[0] : state
+	return typeof value === 'string' ? value : ''
+})
+
+const defaultUsername = computed(() => {
+	const queryUsername = route.query.username
+	const value = Array.isArray(queryUsername) ? queryUsername[0] : queryUsername
+	return typeof value === 'string' && value.length > 0 ? value : ''
+})
+
+const dateOfBirth = ref('')
+const username = ref(defaultUsername.value)
+const token = ref('')
+const subscribe = ref(false)
+const subtleLauncherRedirectUri = ref<string>()
+
+const captcha = ref<{ reset?: () => void } | null>(null)
+const setCaptchaRef = (captchaRef: unknown) => {
+	captcha.value = (captchaRef as { reset?: () => void } | null) ?? null
+}
+
+const { data: globals } = useQuery<AuthGlobalsResponse>({
+	queryKey: ['auth-globals'],
+	queryFn: async () => {
+		try {
+			return await client.labrinth.globals_internal.get()
+		} catch (err) {
+			console.error('Error fetching globals:', err)
+			return { captcha_enabled: true, tax_compliance_thresholds: {} }
+		}
+	},
+})
+
+async function completeOAuthSignUp() {
+	startLoading()
+	try {
+		if (!oauthFlowState.value) {
+			throw new Error('Missing OAuth flow state')
+		}
+
+		const res = await client.labrinth.auth_v2.createOAuthAccount({
+			username: username.value.trim() || defaultUsername.value,
+			state: oauthFlowState.value,
+			challenge: token.value,
+			sign_up_newsletter: subscribe.value,
+		})
+
+		await finishSignIn(res.session)
+	} catch (err) {
+		addNotification({
+			title: formatMessage(commonMessages.errorNotificationTitle),
+			text: getErrorMessage(err),
+			type: 'error',
+		})
+		captcha.value?.reset?.()
+	}
+	stopLoading()
+}
+
+async function finishSignIn(sessionToken?: string | null) {
+	if (route.query.launcher) {
+		let token = sessionToken
+		if (!token) {
+			token = auth.value.token
+		}
+
+		promotePendingSignInOAuthProvider()
+
+		const redirectUrl = `${getLauncherRedirectUrl(route)}/?code=${token}`
+
+		if (redirectUrl.startsWith('https://launcher-files.modrinth.com/')) {
+			await navigateTo(redirectUrl, {
+				external: true,
+			})
+		} else {
+			subtleLauncherRedirectUri.value = redirectUrl
+		}
+
+		return
+	}
+
+	if (sessionToken) {
+		await useAuth(sessionToken)
+		await useUser()
+		queryClient.clear()
+
+		promotePendingSignInOAuthProvider()
+	}
+
+	if (route.query.redirect) {
+		const redirect = decodeURIComponent(getQueryString(route.query.redirect))
+		await navigateTo(redirect, {
+			replace: true,
+		})
+	} else {
+		await navigateTo('/dashboard')
+	}
+}
+</script>
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 1b8e8522c7..caaaab6bca 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -1,14 +1,24 @@
 <template>
-	<div>
-		<h1>{{ formatMessage(messages.longTitle) }}</h1>
-		<section class="auth-form">
-			<template v-if="step === 'choose_method'">
-				<p>
-					{{ formatMessage(methodChoiceMessages.description) }}
-				</p>
-
-				<label for="email" hidden>
-					{{ formatMessage(commonMessages.emailUsernameLabel) }}
+	<div
+		class="universal-card flex w-full max-w-[28rem] flex-col gap-6 border border-solid border-surface-5"
+	>
+		<h1 class="m-0 mx-auto text-xl font-semibold text-contrast">
+			{{ formatMessage(messages.longTitle) }}
+		</h1>
+		<template v-if="step === 'choose_method'">
+			<Admonition :type="'info'">
+				<template #header>
+					<div class="-mb-2 flex flex-col gap-1.5 font-normal leading-normal">
+						<div>
+							{{ formatMessage(methodChoiceMessages.description) }}
+						</div>
+					</div>
+				</template>
+			</Admonition>
+
+			<div class="flex flex-col gap-2.5">
+				<label class="text-md font-semibold text-contrast" for="email">
+					{{ formatMessage(commonMessages.emailLabel) }}
 				</label>
 				<StyledInput
 					id="email"
@@ -19,22 +29,37 @@
 					:placeholder="formatMessage(commonMessages.emailLabel)"
 					wrapper-class="w-full"
 				/>
+			</div>
 
+			<div class="flex flex-col gap-2.5">
+				<label class="text-md font-semibold text-contrast">{{
+					formatMessage(messages.securityCheckLabel)
+				}}</label>
 				<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
+			</div>
 
-				<ButtonStyled color="brand">
-					<button
-						class="mx-auto"
-						:disabled="globals?.captcha_enabled ? !token : false"
-						@click="recovery"
-					>
-						<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
-					</button>
-				</ButtonStyled>
-			</template>
-			<template v-else-if="step === 'passed_challenge'">
-				<p>{{ formatMessage(postChallengeMessages.description) }}</p>
+			<ButtonStyled color="brand">
+				<button
+					class="!w-full"
+					:disabled="globals?.captcha_enabled ? !token : false"
+					@click="recovery"
+				>
+					<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
+				</button>
+			</ButtonStyled>
+		</template>
+		<template v-else-if="step === 'passed_challenge'">
+			<Admonition :type="'info'">
+				<template #header>
+					<div class="-mb-2 flex flex-col gap-1.5 font-normal leading-normal">
+						<div>
+							{{ formatMessage(postChallengeMessages.description) }}
+						</div>
+					</div>
+				</template>
+			</Admonition>
 
+			<div class="flex flex-col gap-2.5">
 				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
 				<StyledInput
 					id="password"
@@ -60,17 +85,18 @@
 				/>
 
 				<ButtonStyled color="brand">
-					<button class="auth-form__input continue-btn" @click="changePassword">
+					<button class="!w-full" @click="changePassword">
 						{{ formatMessage(postChallengeMessages.action) }}
 					</button>
 				</ButtonStyled>
-			</template>
-		</section>
+			</div>
+		</template>
 	</div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { KeyIcon, MailIcon, SendIcon } from '@modrinth/assets'
 import {
+	Admonition,
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
@@ -80,8 +106,41 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
+import type { LocationQueryValue } from 'vue-router'
+
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
 
-import HCaptcha from '@/components/ui/HCaptcha.vue'
+interface AuthGlobalsResponse {
+	captcha_enabled?: boolean
+	[key: string]: unknown
+}
+
+interface ApiErrorShape {
+	data?: {
+		description?: string
+		error?: string
+	}
+}
+
+type ResetPasswordStep = 'choose_method' | 'passed_challenge'
+
+const getQueryString = (
+	value: LocationQueryValue | LocationQueryValue[] | null | undefined,
+): string => {
+	const firstValue = Array.isArray(value) ? value[0] : value
+	return typeof firstValue === 'string' ? firstValue : ''
+}
+
+const getErrorMessage = (error: unknown): string => {
+	const apiError = error as ApiErrorShape
+	if (typeof apiError?.data?.description === 'string') {
+		return apiError.data.description
+	}
+	if (error instanceof Error) {
+		return error.message
+	}
+	return String(error)
+}
 
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
@@ -149,6 +208,10 @@ const messages = defineMessages({
 		id: 'auth.reset-password.title.long',
 		defaultMessage: 'Reset your password',
 	},
+	securityCheckLabel: {
+		id: 'auth.create-account.security-check.label',
+		defaultMessage: 'Security check',
+	},
 })
 
 useHead({
@@ -162,15 +225,15 @@ if (auth.value.user) {
 
 const route = useNativeRoute()
 
-const step = ref('choose_method')
+const step = ref<ResetPasswordStep>('choose_method')
 
 if (route.query.flow) {
 	step.value = 'passed_challenge'
 }
 
-const captcha = ref()
+const captcha = ref<{ reset?: () => void } | null>(null)
 
-const { data: globals } = useQuery({
+const { data: globals } = useQuery<AuthGlobalsResponse>({
 	queryKey: ['auth-globals'],
 	queryFn: async () => {
 		try {
@@ -201,10 +264,10 @@ async function recovery() {
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: getErrorMessage(err),
 			type: 'error',
 		})
-		captcha.value?.reset()
+		captcha.value?.reset?.()
 	}
 	stopLoading()
 }
@@ -217,7 +280,7 @@ async function changePassword() {
 	try {
 		await client.labrinth.auth_v2.changePassword({
 			new_password: newPassword.value,
-			flow: route.query.flow,
+			flow: getQueryString(route.query.flow),
 		})
 
 		addNotification({
@@ -229,10 +292,10 @@ async function changePassword() {
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: getErrorMessage(err),
 			type: 'error',
 		})
-		captcha.value?.reset()
+		captcha.value?.reset?.()
 	}
 	stopLoading()
 }
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index d241f5b87d..03b6371d0e 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -1,171 +1,70 @@
 <template>
-	<div v-if="subtleLauncherRedirectUri">
-		<iframe
-			:src="subtleLauncherRedirectUri"
-			class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
-		></iframe>
-	</div>
-	<div v-else>
-		<template v-if="flow && !subtleLauncherRedirectUri">
-			<label for="two-factor-code">
-				<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
-				<span class="label__description">
-					{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
-				</span>
-			</label>
-			<StyledInput
-				id="two-factor-code"
-				v-model="twoFactorCode"
-				:maxlength="11"
-				inputmode="numeric"
-				:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
-				autocomplete="one-time-code"
-				@keyup.enter="begin2FASignIn"
-			/>
-
-			<ButtonStyled color="brand">
-				<button class="continue-btn" @click="begin2FASignIn">
-					{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
-				</button>
-			</ButtonStyled>
-		</template>
-		<template v-else>
-			<h1>{{ formatMessage(messages.signInWithLabel) }}</h1>
-
-			<section class="third-party">
-				<ButtonStyled>
-					<a :href="getAuthUrl('discord', redirectTarget)">
-						<DiscordColorIcon />
-						<span>Discord</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a :href="getAuthUrl('github', redirectTarget)">
-						<GitHubColorIcon />
-						<span>GitHub</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a :href="getAuthUrl('microsoft', redirectTarget)">
-						<MicrosoftColorIcon />
-						<span>Microsoft</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a :href="getAuthUrl('google', redirectTarget)">
-						<GoogleColorIcon />
-						<span>Google</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a :href="getAuthUrl('steam', redirectTarget)">
-						<SteamColorIcon />
-						<span>Steam</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a :href="getAuthUrl('gitlab', redirectTarget)">
-						<GitLabColorIcon />
-						<span>GitLab</span>
-					</a>
-				</ButtonStyled>
-			</section>
-
-			<h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
-
-			<section class="auth-form">
-				<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
-				<StyledInput
-					id="email"
-					v-model="email"
-					:icon="MailIcon"
-					type="text"
-					inputmode="email"
-					autocomplete="username"
-					:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
-					wrapper-class="w-full"
-				/>
-
-				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-				<StyledInput
-					id="password"
-					v-model="password"
-					:icon="KeyIcon"
-					type="password"
-					autocomplete="current-password"
-					:placeholder="formatMessage(commonMessages.passwordLabel)"
-					wrapper-class="w-full"
-				/>
-
-				<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
-
-				<ButtonStyled color="brand">
-					<button
-						class="continue-btn centered-btn"
-						:disabled="globals?.captcha_enabled ? !token : false"
-						@click="beginPasswordSignIn()"
-					>
-						{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
-					</button>
-				</ButtonStyled>
-
-				<div class="auth-form__additional-options">
-					<IntlFormatted :message-id="messages.additionalOptionsLabel">
-						<template #forgot-password-link="{ children }">
-							<NuxtLink
-								class="text-link"
-								:to="{
-									path: '/auth/reset-password',
-									query: route.query,
-								}"
-							>
-								<component :is="() => children" />
-							</NuxtLink>
-						</template>
-						<template #create-account-link="{ children }">
-							<NuxtLink
-								class="text-link"
-								:to="{
-									path: '/auth/sign-up',
-									query: route.query,
-								}"
-							>
-								<component :is="() => children" />
-							</NuxtLink>
-						</template>
-					</IntlFormatted>
-				</div>
-			</section>
-		</template>
-	</div>
+	<SignInView
+		v-model:email="email"
+		v-model:password="password"
+		v-model:token="token"
+		v-model:two-factor-code="twoFactorCode"
+		:subtle-launcher-redirect-uri="subtleLauncherRedirectUri"
+		:flow="flow"
+		:redirect-target="redirectTarget"
+		:route-query="route.query"
+		:globals="globals"
+		:on-password-sign-in="beginPasswordSignIn"
+		:on-two-factor-sign-in="begin2FASignIn"
+		:on-set-captcha-ref="setCaptchaRef"
+	/>
 </template>
 
-<script setup>
-import {
-	DiscordColorIcon,
-	GitHubColorIcon,
-	GitLabColorIcon,
-	GoogleColorIcon,
-	KeyIcon,
-	MailIcon,
-	MicrosoftColorIcon,
-	RightArrowIcon,
-	SteamColorIcon,
-} from '@modrinth/assets'
+<script setup lang="ts">
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	IntlFormatted,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useStorage } from '@vueuse/core'
+import type { LocationQueryValue } from 'vue-router'
 
-import HCaptcha from '@/components/ui/HCaptcha.vue'
-import { getAuthUrl, getLauncherRedirectUrl } from '@/composables/auth.js'
+import SignInView from '@/components/ui/auth/SignIn.vue'
+import {
+	getLauncherRedirectUrl,
+	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	promotePendingSignInOAuthProvider,
+} from '@/composables/auth.ts'
+
+type AuthProvider = 'discord' | 'google' | 'github' | 'gitlab' | 'steam' | 'microsoft'
+
+interface AuthGlobalsResponse {
+	captcha_enabled?: boolean
+	[key: string]: unknown
+}
+
+interface ApiErrorShape {
+	data?: {
+		description?: string
+	}
+}
+
+const getQueryString = (
+	value: LocationQueryValue | LocationQueryValue[] | null | undefined,
+): string => {
+	const firstValue = Array.isArray(value) ? value[0] : value
+	return typeof firstValue === 'string' ? firstValue : ''
+}
+
+const getErrorMessage = (error: unknown): string => {
+	const apiError = error as ApiErrorShape
+	if (typeof apiError?.data?.description === 'string') {
+		return apiError.data.description
+	}
+	if (error instanceof Error) {
+		return error.message
+	}
+	return String(error)
+}
 
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
@@ -173,35 +72,10 @@ const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
-	additionalOptionsLabel: {
-		id: 'auth.sign-in.additional-options',
-		defaultMessage:
-			'<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>',
-	},
-	signInWithLabel: {
-		id: 'auth.sign-in.sign-in-with',
-		defaultMessage: 'Sign in with',
-	},
 	signInTitle: {
 		id: 'auth.sign-in.title',
 		defaultMessage: 'Sign In',
 	},
-	twoFactorCodeInputPlaceholder: {
-		id: 'auth.sign-in.2fa.placeholder',
-		defaultMessage: 'Enter code...',
-	},
-	twoFactorCodeLabel: {
-		id: 'auth.sign-in.2fa.label',
-		defaultMessage: 'Enter two-factor code',
-	},
-	twoFactorCodeLabelDescription: {
-		id: 'auth.sign-in.2fa.description',
-		defaultMessage: 'Please enter a two-factor code to proceed.',
-	},
-	usePasswordLabel: {
-		id: 'auth.sign-in.use-password',
-		defaultMessage: 'Or use a password',
-	},
 })
 
 useHead({
@@ -212,11 +86,35 @@ useHead({
 
 const auth = await useAuth()
 const route = useNativeRoute()
+const pendingSignInOAuthProvider = useStorage<AuthProvider | null>(
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+	undefined,
+	{ initOnMounted: true },
+)
+const lastSignInOAuthProvider = useStorage<AuthProvider | null>(
+	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+	undefined,
+	{ initOnMounted: true },
+)
+
+if (route.query.state !== undefined) {
+	await navigateTo(
+		{
+			path: '/auth/create/oauth',
+			query: route.query,
+		},
+		{
+			replace: true,
+		},
+	)
+}
 
-const redirectTarget = route.query.redirect || ''
-const subtleLauncherRedirectUri = ref()
+const redirectTarget = getQueryString(route.query.redirect)
+const subtleLauncherRedirectUri = ref<string>()
 
-if (route.query.code && !route.fullPath.includes('new_account=true')) {
+if (route.query.code) {
 	await finishSignIn()
 }
 
@@ -224,9 +122,12 @@ if (auth.value.user) {
 	await finishSignIn()
 }
 
-const captcha = ref()
+const captcha = ref<{ reset?: () => void } | null>(null)
+const setCaptchaRef = (captchaRef: unknown) => {
+	captcha.value = (captchaRef as { reset?: () => void } | null) ?? null
+}
 
-const { data: globals } = useQuery({
+const { data: globals } = useQuery<AuthGlobalsResponse>({
 	queryKey: ['auth-globals'],
 	queryFn: async () => {
 		try {
@@ -242,9 +143,11 @@ const email = ref('')
 const password = ref('')
 const token = ref('')
 
-const flow = ref(route.query.flow)
+const flow = ref(getQueryString(route.query.flow))
 
 async function beginPasswordSignIn() {
+	pendingSignInOAuthProvider.value = null
+	lastSignInOAuthProvider.value = null
 	startLoading()
 	try {
 		const res = await client.labrinth.auth_v2.login({
@@ -261,41 +164,44 @@ async function beginPasswordSignIn() {
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: getErrorMessage(err),
 			type: 'error',
 		})
-		captcha.value?.reset()
+		captcha.value?.reset?.()
 	}
 	stopLoading()
 }
 
-const twoFactorCode = ref(null)
+const twoFactorCode = ref('')
 async function begin2FASignIn() {
 	startLoading()
 	try {
 		const res = await client.labrinth.auth_v2.login2FA({
 			flow: flow.value,
-			code: twoFactorCode.value ? twoFactorCode.value.toString() : twoFactorCode.value,
+			code: twoFactorCode.value,
 		})
 
 		await finishSignIn(res.session)
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: getErrorMessage(err),
 			type: 'error',
 		})
-		captcha.value?.reset()
+		captcha.value?.reset?.()
 	}
 	stopLoading()
 }
 
-async function finishSignIn(token) {
+async function finishSignIn(sessionToken?: string | null) {
 	if (route.query.launcher) {
+		let token = sessionToken
 		if (!token) {
 			token = auth.value.token
 		}
 
+		promotePendingSignInOAuthProvider()
+
 		const redirectUrl = `${getLauncherRedirectUrl(route)}/?code=${token}`
 
 		if (redirectUrl.startsWith('https://launcher-files.modrinth.com/')) {
@@ -316,14 +222,16 @@ async function finishSignIn(token) {
 		return
 	}
 
-	if (token) {
-		await useAuth(token)
+	if (sessionToken) {
+		await useAuth(sessionToken)
 		await useUser()
 		queryClient.clear()
 	}
 
+	promotePendingSignInOAuthProvider()
+
 	if (route.query.redirect) {
-		const redirect = decodeURIComponent(route.query.redirect)
+		const redirect = decodeURIComponent(getQueryString(route.query.redirect))
 		await navigateTo(redirect, {
 			replace: true,
 		})
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index 1032886dfa..f1630f1033 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -1,171 +1,81 @@
 <template>
-	<div>
-		<h1>{{ formatMessage(messages.signUpWithTitle) }}</h1>
-
-		<section class="third-party">
-			<ButtonStyled>
-				<a class="discord-btn" :href="getAuthUrl('discord', redirectTarget)">
-					<DiscordColorIcon />
-					<span>Discord</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a :href="getAuthUrl('github', redirectTarget)">
-					<GitHubColorIcon />
-					<span>GitHub</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a :href="getAuthUrl('microsoft', redirectTarget)">
-					<MicrosoftColorIcon />
-					<span>Microsoft</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a :href="getAuthUrl('google', redirectTarget)">
-					<GoogleColorIcon />
-					<span>Google</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a :href="getAuthUrl('steam', redirectTarget)">
-					<SteamColorIcon />
-					<span>Steam</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a :href="getAuthUrl('gitlab', redirectTarget)">
-					<GitLabColorIcon />
-					<span>GitLab</span>
-				</a>
-			</ButtonStyled>
-		</section>
-
-		<h1>{{ formatMessage(messages.createAccountTitle) }}</h1>
-
-		<section class="auth-form">
-			<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
-			<StyledInput
-				id="email"
-				v-model="email"
-				:icon="MailIcon"
-				type="email"
-				autocomplete="username"
-				:placeholder="formatMessage(commonMessages.emailLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<label for="username" hidden>{{ formatMessage(commonMessages.usernameLabel) }}</label>
-			<StyledInput
-				id="username"
-				v-model="username"
-				:icon="UserIcon"
-				type="text"
-				autocomplete="username"
-				:placeholder="formatMessage(commonMessages.usernameLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-			<StyledInput
-				id="password"
-				v-model="password"
-				:icon="KeyIcon"
-				type="password"
-				autocomplete="new-password"
-				:placeholder="formatMessage(commonMessages.passwordLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<label for="confirm-password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-			<StyledInput
-				id="confirm-password"
-				v-model="confirmPassword"
-				:icon="KeyIcon"
-				type="password"
-				autocomplete="new-password"
-				:placeholder="formatMessage(commonMessages.confirmPasswordLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<Checkbox
-				v-model="subscribe"
-				class="subscribe-btn"
-				:label="formatMessage(messages.subscribeLabel)"
-				:description="formatMessage(messages.subscribeLabel)"
-			/>
-
-			<p v-if="!route.query.launcher">
-				<IntlFormatted :message-id="messages.legalDisclaimer">
-					<template #terms-link="{ children }">
-						<NuxtLink to="/legal/terms" class="text-link">
-							<component :is="() => children" />
-						</NuxtLink>
-					</template>
-					<template #privacy-policy-link="{ children }">
-						<NuxtLink to="/legal/privacy" class="text-link">
-							<component :is="() => children" />
-						</NuxtLink>
-					</template>
-				</IntlFormatted>
-			</p>
-
-			<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
-
-			<ButtonStyled color="brand">
-				<button
-					class="continue-btn centered-btn"
-					:disabled="globals?.captcha_enabled ? !token : false"
-					@click="createAccount"
-				>
-					{{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
-				</button>
-			</ButtonStyled>
-
-			<div class="auth-form__additional-options">
-				{{ formatMessage(messages.alreadyHaveAccountLabel) }}
-				<NuxtLink
-					class="text-link"
-					:to="{
-						path: '/auth/sign-in',
-						query: route.query,
-					}"
-				>
-					{{ formatMessage(commonMessages.signInButton) }}
-				</NuxtLink>
-			</div>
-		</section>
-	</div>
+	<SignUpView
+		v-if="!isCreateAccountStep"
+		v-model:email="email"
+		v-model:password="password"
+		:redirect-target="redirectTarget"
+		:show-other-options="showOtherOptions"
+		:route-query="route.query"
+		:on-toggle-other-options="toggleOtherOptions"
+		:on-continue-with-email="continueWithEmail"
+	/>
+	<CreateAccountView
+		v-else
+		v-model:date-of-birth="dateOfBirth"
+		v-model:username="username"
+		v-model:token="token"
+		v-model:subscribe="subscribe"
+		:globals="globals"
+		:on-complete-sign-up="createAccount"
+		:on-set-captcha-ref="setCaptchaRef"
+	/>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
-	DiscordColorIcon,
-	GitHubColorIcon,
-	GitLabColorIcon,
-	GoogleColorIcon,
-	KeyIcon,
-	MailIcon,
-	MicrosoftColorIcon,
-	RightArrowIcon,
-	SteamColorIcon,
-	UserIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Checkbox,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	IntlFormatted,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
+import { useStorage } from '@vueuse/core'
+import type { LocationQueryValue } from 'vue-router'
+
+import CreateAccountView from '@/components/ui/auth/CreateAccount.vue'
+import SignUpView from '@/components/ui/auth/SignUp.vue'
+import {
+	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	promotePendingSignInOAuthProvider,
+} from '@/composables/auth.ts'
+
+interface AuthGlobalsResponse {
+	captcha_enabled?: boolean
+	[key: string]: unknown
+}
 
-import HCaptcha from '@/components/ui/HCaptcha.vue'
-import { getAuthUrl } from '@/composables/auth.js'
+interface ApiErrorShape {
+	data?: {
+		description?: string
+		error?: string
+	}
+	v1Error?: {
+		error?: string
+	}
+	responseData?: {
+		error?: string
+	}
+}
+
+const getQueryString = (
+	value: LocationQueryValue | LocationQueryValue[] | null | undefined,
+): string => {
+	const firstValue = Array.isArray(value) ? value[0] : value
+	return typeof firstValue === 'string' ? firstValue : ''
+}
+
+const getErrorMessage = (error: unknown): string => {
+	const apiError = error as ApiErrorShape
+	if (typeof apiError?.data?.description === 'string') {
+		return apiError.data.description
+	}
+	if (error instanceof Error) {
+		return error.message
+	}
+	return String(error)
+}
 
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
@@ -176,30 +86,13 @@ const messages = defineMessages({
 		id: 'auth.sign-up.title',
 		defaultMessage: 'Sign Up',
 	},
-	signUpWithTitle: {
-		id: 'auth.sign-up.title.sign-up-with',
-		defaultMessage: 'Sign up with',
-	},
-	createAccountTitle: {
-		id: 'auth.sign-up.title.create-account',
-		defaultMessage: 'Or create an account yourself',
-	},
-	subscribeLabel: {
-		id: 'auth.sign-up.subscribe.label',
-		defaultMessage: 'Subscribe to updates about Modrinth',
+	ageRequirementWarningTitle: {
+		id: 'auth.sign-up.age-requirement.warning-title',
+		defaultMessage: 'Age requirement',
 	},
-	legalDisclaimer: {
-		id: 'auth.sign-up.legal-dislaimer',
-		defaultMessage:
-			"By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
-	},
-	createAccountButton: {
-		id: 'auth.sign-up.action.create-account',
-		defaultMessage: 'Create account',
-	},
-	alreadyHaveAccountLabel: {
-		id: 'auth.sign-up.sign-in-option.title',
-		defaultMessage: 'Already have an account?',
+	under13HelperText: {
+		id: 'auth.create-account.date-of-birth.under13-helper',
+		defaultMessage: 'You cannot create an account at Modrinth unless you are over 13 years old.',
 	},
 })
 
@@ -209,16 +102,36 @@ useHead({
 
 const auth = await useAuth()
 const route = useNativeRoute()
+const pendingSignInOAuthProvider = useStorage(
+	PENDING_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+	undefined,
+	{ initOnMounted: true },
+)
+const lastSignInOAuthProvider = useStorage(
+	LAST_SIGN_IN_OAUTH_PROVIDER_STORAGE_KEY,
+	null,
+	undefined,
+	{ initOnMounted: true },
+)
 
-const redirectTarget = route.query.redirect
+const redirectTarget = getQueryString(route.query.redirect)
+const showOtherOptions = ref(false)
+const isCreateAccountStep = ref(false)
 
 if (auth.value.user) {
 	await navigateTo('/dashboard')
 }
 
-const captcha = ref()
+const captcha = ref<{ reset?: () => void } | null>(null)
+const setCaptchaRef = (captchaRef: unknown) => {
+	captcha.value = (captchaRef as { reset?: () => void } | null) ?? null
+}
+const toggleOtherOptions = () => {
+	showOtherOptions.value = !showOtherOptions.value
+}
 
-const { data: globals } = useQuery({
+const { data: globals } = useQuery<AuthGlobalsResponse>({
 	queryKey: ['auth-globals'],
 	queryFn: async () => {
 		try {
@@ -231,29 +144,117 @@ const { data: globals } = useQuery({
 })
 
 const email = ref('')
-const username = ref('')
 const password = ref('')
-const confirmPassword = ref('')
+const dateOfBirth = ref('')
+const username = ref('')
 const token = ref('')
 const subscribe = ref(false)
+const USERNAME_MAX_LENGTH = 39
+const MAX_USERNAME_SUFFIX_RETRIES = 10
+const MAX_RANDOM_USERNAME_ATTEMPTS = 10
 
-async function createAccount() {
+async function continueWithEmail() {
+	pendingSignInOAuthProvider.value = null
+	lastSignInOAuthProvider.value = null
 	startLoading()
 	try {
-		if (confirmPassword.value !== password.value) {
-			addNotification({
-				title: formatMessage(commonMessages.errorNotificationTitle),
-				text: formatMessage({
-					id: 'auth.sign-up.notification.password-mismatch.text',
-					defaultMessage: 'Passwords do not match!',
-				}),
-				type: 'error',
-			})
-			captcha.value?.reset()
+		const generatedUsername = await findAvailableGeneratedUsername()
+
+		token.value = ''
+		username.value = generatedUsername
+		isCreateAccountStep.value = true
+	} catch (err) {
+		addNotification({
+			title: formatMessage(commonMessages.errorNotificationTitle),
+			text: getErrorMessage(err),
+			type: 'error',
+		})
+	}
+	stopLoading()
+}
+
+function generateUsernameFromEmail(emailAddress: string): string {
+	const [localPart = ''] = emailAddress.trim().toLowerCase().split('@')
+	const sanitized = localPart
+		.replace(/[^a-zA-Z0-9_-]/g, '_')
+		.replace(/_+/g, '_')
+		.replace(/^_+|_+$/g, '')
+
+	return (sanitized || 'user').slice(0, USERNAME_MAX_LENGTH)
+}
+
+async function findAvailableGeneratedUsername(): Promise<string> {
+	const baseUsername = generateUsernameFromEmail(email.value)
+
+	for (let suffixAttempt = 0; suffixAttempt <= MAX_USERNAME_SUFFIX_RETRIES; suffixAttempt++) {
+		const candidateUsername = appendUsernameSuffix(baseUsername, suffixAttempt)
+
+		try {
+			await validateCreateAccountCandidate(candidateUsername)
+			return candidateUsername
+		} catch (err) {
+			if (!isUsernameTakenValidationError(err)) {
+				throw err
+			}
 		}
+	}
+
+	return await findAvailableRandomUsername()
+}
+
+function appendUsernameSuffix(baseUsername: string, suffixAttempt: number): string {
+	if (suffixAttempt === 0) {
+		return baseUsername
+	}
+
+	const suffix = String(suffixAttempt)
+	const maxBaseLength = Math.max(1, USERNAME_MAX_LENGTH - suffix.length)
+	return `${baseUsername.slice(0, maxBaseLength)}${suffix}`
+}
+
+function generateRandomUsername(): string {
+	const randomSuffix = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`
+	const base = `user_${randomSuffix}`
+	return base.slice(0, USERNAME_MAX_LENGTH)
+}
 
+async function findAvailableRandomUsername(): Promise<string> {
+	for (let attempt = 0; attempt < MAX_RANDOM_USERNAME_ATTEMPTS; attempt++) {
+		const candidateUsername = generateRandomUsername()
+
+		try {
+			await validateCreateAccountCandidate(candidateUsername)
+			return candidateUsername
+		} catch (err) {
+			if (!isUsernameTakenValidationError(err)) {
+				throw err
+			}
+		}
+	}
+
+	throw new Error('Unable to find an available username. Please choose one manually.')
+}
+
+async function validateCreateAccountCandidate(candidateUsername: string): Promise<void> {
+	await client.labrinth.auth_v2.validateCreateAccount({
+		username: candidateUsername,
+		password: password.value,
+		email: email.value,
+	})
+}
+
+function isUsernameTakenValidationError(error: unknown): boolean {
+	const apiError = error as ApiErrorShape
+	const errorCode =
+		apiError?.data?.error ?? apiError?.v1Error?.error ?? apiError?.responseData?.error
+	return errorCode === 'username_taken'
+}
+
+async function createAccount() {
+	startLoading()
+	try {
 		const res = await client.labrinth.auth_v2.createAccount({
-			username: username.value,
+			username: username.value.trim() || generateUsernameFromEmail(email.value),
 			password: password.value,
 			email: email.value,
 			challenge: token.value,
@@ -263,23 +264,25 @@ async function createAccount() {
 		await useAuth(res.session)
 		await useUser()
 
+		promotePendingSignInOAuthProvider()
+
 		if (route.query.launcher) {
 			await navigateTo({ path: '/auth/sign-in', query: route.query })
 			return
 		}
 
 		if (route.query.redirect) {
-			await navigateTo(route.query.redirect)
+			await navigateTo(getQueryString(route.query.redirect))
 		} else {
 			await navigateTo('/dashboard')
 		}
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err.data ? err.data.description : err,
+			text: getErrorMessage(err),
 			type: 'error',
 		})
-		captcha.value?.reset()
+		captcha.value?.reset?.()
 	}
 	stopLoading()
 }
diff --git a/apps/frontend/src/pages/auth/verify-email.vue b/apps/frontend/src/pages/auth/verify-email.vue
index 27b6bc6947..f03da9b209 100644
--- a/apps/frontend/src/pages/auth/verify-email.vue
+++ b/apps/frontend/src/pages/auth/verify-email.vue
@@ -1,78 +1,126 @@
 <template>
-	<div>
+	<div
+		class="universal-card flex w-full max-w-[28rem] flex-col gap-6 border border-solid border-surface-5"
+	>
 		<template v-if="auth.user && auth.user.email_verified && !success">
-			<h1>{{ formatMessage(alreadyVerifiedMessages.title) }}</h1>
+			<h1 class="m-0 mx-auto text-xl font-semibold text-contrast">
+				{{ formatMessage(alreadyVerifiedMessages.title) }}
+			</h1>
 
-			<section class="auth-form">
-				<p>{{ formatMessage(alreadyVerifiedMessages.description) }}</p>
+			<Admonition type="success">
+				{{ formatMessage(alreadyVerifiedMessages.description) }}
+			</Admonition>
 
+			<div class="grid grid-cols-2 gap-2">
 				<ButtonStyled>
-					<NuxtLink to="/settings/account">
+					<NuxtLink class="shadow-none" to="/settings/account">
 						<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
 					</NuxtLink>
 				</ButtonStyled>
-			</section>
-		</template>
-
-		<template v-else-if="success">
-			<h1>{{ formatMessage(postVerificationMessages.title) }}</h1>
-
-			<section class="auth-form">
-				<p>{{ formatMessage(postVerificationMessages.description) }}</p>
-
-				<ButtonStyled v-if="auth.user">
-					<NuxtLink to="/settings/account">
-						<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
-					</NuxtLink>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<NuxtLink to="/auth/sign-in">
-						{{ formatMessage(commonMessages.signInButton) }}
+				<ButtonStyled color="brand">
+					<NuxtLink to="/discover/mods">
+						{{ formatMessage(messages.discoverMods) }}
 						<RightArrowIcon />
 					</NuxtLink>
 				</ButtonStyled>
-			</section>
+			</div>
 		</template>
 
-		<template v-else>
-			<h1>{{ formatMessage(failedVerificationMessages.title) }}</h1>
-
-			<section class="auth-form">
-				<p>
-					<template v-if="auth.user">
-						{{ formatMessage(failedVerificationMessages.loggedInDescription) }}
-					</template>
-					<template v-else>
-						{{ formatMessage(failedVerificationMessages.description) }}
-					</template>
-				</p>
-
-				<ButtonStyled v-if="auth.user" color="brand">
-					<button @click="handleResendEmailVerification">
-						{{ formatMessage(failedVerificationMessages.action) }}
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
+		<template v-else-if="success">
+			<h1 class="m-0 mx-auto text-xl font-semibold text-contrast">
+				{{ formatMessage(postVerificationMessages.title) }}
+			</h1>
+
+			<Admonition type="success">
+				{{ formatMessage(postVerificationMessages.description) }}
+			</Admonition>
+
+			<template v-if="auth.user">
+				<div class="grid grid-cols-2 gap-2">
+					<ButtonStyled>
+						<NuxtLink to="/settings/account">
+							<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
+						</NuxtLink>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<NuxtLink to="/discover/mods">
+							{{ formatMessage(messages.discoverMods) }}
+							<RightArrowIcon />
+						</NuxtLink>
+					</ButtonStyled>
+				</div>
+			</template>
+			<ButtonStyled v-else color="brand">
+				<NuxtLink to="/auth/sign-in" class="!w-full">
+					{{ formatMessage(commonMessages.signInButton) }}
+					<RightArrowIcon />
+				</NuxtLink>
+			</ButtonStyled>
+		</template>
 
-				<ButtonStyled v-else color="brand">
-					<NuxtLink to="/auth/sign-in">
-						{{ formatMessage(commonMessages.signInButton) }}
-						<RightArrowIcon />
-					</NuxtLink>
-				</ButtonStyled>
-			</section>
+		<template v-else>
+			<h1 class="m-0 mx-auto text-xl font-semibold text-contrast">
+				{{ formatMessage(failedVerificationMessages.title) }}
+			</h1>
+
+			<Admonition v-if="auth.user" type="warning">
+				{{ formatMessage(failedVerificationMessages.loggedInDescription) }}
+			</Admonition>
+			<Admonition v-else type="warning">
+				{{ formatMessage(failedVerificationMessages.description) }}
+			</Admonition>
+
+			<ButtonStyled v-if="auth.user" color="brand">
+				<button class="!w-full" @click="handleResendEmailVerification">
+					{{ formatMessage(failedVerificationMessages.action) }}
+					<RightArrowIcon />
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else color="brand">
+				<NuxtLink to="/auth/sign-in" class="!w-full">
+					{{ formatMessage(commonMessages.signInButton) }}
+					<RightArrowIcon />
+				</NuxtLink>
+			</ButtonStyled>
 		</template>
 	</div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { RightArrowIcon, SettingsIcon } from '@modrinth/assets'
 import {
+	Admonition,
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
+import type { LocationQueryValue } from 'vue-router'
+
+interface ApiErrorShape {
+	data?: {
+		description?: string
+		error?: string
+	}
+}
+
+const getQueryString = (
+	value: LocationQueryValue | LocationQueryValue[] | null | undefined,
+): string => {
+	const firstValue = Array.isArray(value) ? value[0] : value
+	return typeof firstValue === 'string' ? firstValue : ''
+}
+
+const getErrorMessage = (error: unknown): string => {
+	const apiError = error as ApiErrorShape
+	if (typeof apiError?.data?.description === 'string') {
+		return apiError.data.description
+	}
+	if (error instanceof Error) {
+		return error.message
+	}
+	return String(error)
+}
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -86,6 +134,22 @@ const messages = defineMessages({
 		id: 'auth.verify-email.action.account-settings',
 		defaultMessage: 'Account settings',
 	},
+	discoverMods: {
+		id: 'auth.verify-email.action.discover-mods',
+		defaultMessage: 'Discover mods',
+	},
+	emailSentNotificationTitle: {
+		id: 'auth.verify-email.notification.email-sent.title',
+		defaultMessage: 'Email sent',
+	},
+	emailSentNotificationDescription: {
+		id: 'auth.verify-email.notification.email-sent.description',
+		defaultMessage: 'An email with a link to verify your account has been sent to {email}.',
+	},
+	errorOccurredTitle: {
+		id: 'auth.verify-email.notification.error-occurred.title',
+		defaultMessage: 'An error occurred',
+	},
 })
 
 const alreadyVerifiedMessages = defineMessages({
@@ -142,13 +206,13 @@ const route = useNativeRoute()
 
 if (route.query.flow) {
 	try {
-		const emailVerified = useState('emailVerified', () => null)
+		const emailVerified = useState<boolean | null>('emailVerified', () => null)
 
 		if (emailVerified.value === null) {
 			await useBaseFetch('auth/email/verify', {
 				method: 'POST',
 				body: {
-					flow: route.query.flow,
+					flow: getQueryString(route.query.flow),
 				},
 			})
 			emailVerified.value = true
@@ -171,14 +235,16 @@ async function handleResendEmailVerification() {
 	try {
 		await resendVerifyEmail()
 		addNotification({
-			title: 'Email sent',
-			text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
+			title: formatMessage(messages.emailSentNotificationTitle),
+			text: formatMessage(messages.emailSentNotificationDescription, {
+				email: auth.value.user?.email ?? '',
+			}),
 			type: 'success',
 		})
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
-			text: err.data.description,
+			title: formatMessage(messages.errorOccurredTitle),
+			text: getErrorMessage(err),
 			type: 'error',
 		})
 	}
diff --git a/apps/frontend/src/pages/auth/welcome.vue b/apps/frontend/src/pages/auth/welcome.vue
deleted file mode 100644
index fe0b85243f..0000000000
--- a/apps/frontend/src/pages/auth/welcome.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<template>
-	<div class="welcome-box has-bot">
-		<img :src="WavingRinthbot" alt="Waving Modrinth Bot" class="welcome-box__waving-bot" />
-		<div class="welcome-box__top-glow" />
-		<div class="welcome-box__body">
-			<h1 class="welcome-box__title">
-				{{ formatMessage(messages.welcomeLongTitle) }}
-			</h1>
-
-			<p class="welcome-box__subtitle">
-				<IntlFormatted :message-id="messages.welcomeDescription">
-					<template #bold="{ children }">
-						<strong>
-							<component :is="() => normalizeChildren(children)" />
-						</strong>
-					</template>
-				</IntlFormatted>
-			</p>
-
-			<Checkbox
-				v-model="subscribe"
-				class="subscribe-btn"
-				:label="formatMessage(messages.subscribeCheckbox)"
-				:description="formatMessage(messages.subscribeCheckbox)"
-			/>
-
-			<ButtonStyled color="brand">
-				<button class="centered-btn" @click="continueSignUp">
-					{{ formatMessage(commonMessages.continueButton) }}
-					<RightArrowIcon />
-				</button>
-			</ButtonStyled>
-
-			<p class="tos-text">
-				<IntlFormatted :message-id="messages.tosLabel">
-					<template #terms-link="{ children }">
-						<NuxtLink to="/legal/terms" class="text-link">
-							<component :is="() => children" />
-						</NuxtLink>
-					</template>
-					<template #privacy-policy-link="{ children }">
-						<NuxtLink to="/legal/privacy" class="text-link">
-							<component :is="() => children" />
-						</NuxtLink>
-					</template>
-				</IntlFormatted>
-			</p>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { RightArrowIcon, WavingRinthbot } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Checkbox,
-	commonMessages,
-	defineMessages,
-	IntlFormatted,
-	normalizeChildren,
-	useVIntl,
-} from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
-
-const queryClient = useQueryClient()
-const route = useRoute()
-
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	subscribeCheckbox: {
-		id: 'auth.welcome.checkbox.subscribe',
-		defaultMessage: 'Subscribe to updates about Modrinth',
-	},
-	tosLabel: {
-		id: 'auth.welcome.label.tos',
-		defaultMessage:
-			"By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
-	},
-	welcomeDescription: {
-		id: 'auth.welcome.description',
-		defaultMessage:
-			'You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with amazing mods.',
-	},
-	welcomeLongTitle: {
-		id: 'auth.welcome.long-title',
-		defaultMessage: 'Welcome to Modrinth!',
-	},
-	welcomeTitle: {
-		id: 'auth.welcome.title',
-		defaultMessage: 'Welcome',
-	},
-})
-
-useHead({
-	title: () => `${formatMessage(messages.welcomeTitle)} - Modrinth`,
-})
-
-const subscribe = ref(true)
-
-onMounted(async () => {
-	await useAuth(route.query.authToken)
-	await useUser()
-	queryClient.clear()
-})
-
-async function continueSignUp() {
-	if (subscribe.value) {
-		try {
-			await useBaseFetch('auth/email/subscribe', {
-				method: 'POST',
-			})
-		} catch {
-			// Ignored
-		}
-	}
-
-	if (route.query.redirect) {
-		await navigateTo(route.query.redirect)
-	} else {
-		await navigateTo('/dashboard')
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.welcome-box {
-	background-color: var(--color-raised-bg);
-	border-radius: var(--size-rounded-lg);
-	padding: 1.75rem 2rem;
-	display: flex;
-	flex-direction: column;
-	gap: 1.25rem;
-	box-shadow: var(--shadow-card);
-	position: relative;
-
-	&.has-bot {
-		margin-block: 120px;
-	}
-
-	p {
-		margin: 0;
-	}
-	a {
-		color: var(--color-brand);
-		font-weight: var(--weight-bold);
-		&:hover,
-		&:focus {
-			filter: brightness(1.125);
-			text-decoration: underline;
-		}
-	}
-
-	&__waving-bot {
-		--bot-height: 112px;
-		position: absolute;
-		top: calc(-1 * var(--bot-height));
-		right: 5rem;
-		height: var(--bot-height);
-		width: auto;
-
-		@media (max-width: 768px) {
-			--bot-height: 70px;
-			right: 2rem;
-		}
-	}
-
-	&__top-glow {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 1px;
-		opacity: 0.4;
-		background: linear-gradient(
-			to right,
-			transparent 2rem,
-			var(--color-green) calc(100% - 13rem),
-			var(--color-green) calc(100% - 5rem),
-			transparent calc(100% - 2rem)
-		);
-	}
-
-	&__body {
-		display: flex;
-		flex-direction: column;
-		gap: 1.25rem;
-	}
-
-	&__title {
-		font-size: var(--text-32);
-		font-weight: var(--weight-extrabold);
-		margin: 0;
-	}
-
-	&__subtitle {
-		font-size: var(--text-18);
-	}
-
-	.tos-text {
-		font-size: var(--text-14);
-		line-height: 1.5;
-	}
-}
-</style>
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index adeb5d221c..d30f91d6ca 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -57,7 +57,6 @@ import { Avatar, ButtonStyled, defineMessages, injectModrinthClient, useVIntl }
 import { useQuery } from '@tanstack/vue-query'
 
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
-import { useAuth } from '~/composables/auth.js'
 
 const { formatMessage } = useVIntl()
 
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index a55c316171..057ed2eef7 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -9,23 +9,30 @@
 			:has-to-type="true"
 			@proceed="deleteAccount"
 		/>
-		<Modal
+		<NewModal
 			ref="changeEmailModal"
+			width="500px"
 			:header="`${auth.user.email ? formatMessage(messages.changeEmailHeaderChange) : formatMessage(messages.changeEmailHeaderAdd)}`"
 		>
-			<div class="universal-modal">
-				<p>{{ formatMessage(messages.emailNotPublicNotice) }}</p>
-				<label for="email-input">
-					<span class="label__title">{{ formatMessage(messages.emailAddressLabel) }}</span>
-				</label>
-				<StyledInput
-					id="email-input"
-					v-model="email"
-					:maxlength="2048"
-					type="email"
-					:placeholder="formatMessage(messages.emailAddressPlaceholder)"
-					@keyup.enter="saveEmail()"
-				/>
+			<div class="flex flex-col gap-6">
+				<Admonition type="info">
+					{{ formatMessage(messages.emailNotPublicNotice) }}
+				</Admonition>
+				<div class="flex flex-col gap-2.5">
+					<label for="email-input">
+						<span class="text-md font-semibold text-contrast">{{
+							formatMessage(messages.emailAddressLabel)
+						}}</span>
+					</label>
+					<StyledInput
+						id="email-input"
+						v-model="email"
+						:maxlength="2048"
+						type="email"
+						:placeholder="formatMessage(messages.emailAddressPlaceholder)"
+						@keyup.enter="saveEmail()"
+					/>
+				</div>
 				<div class="input-group push-right">
 					<ButtonStyled>
 						<button @click="$refs.changeEmailModal.hide()">
@@ -41,9 +48,10 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</Modal>
-		<Modal
+		</NewModal>
+		<NewModal
 			ref="managePasswordModal"
+			width="600px"
 			:header="`${
 				removePasswordMode
 					? formatMessage(messages.passwordHeaderRemove)
@@ -52,60 +60,74 @@
 						: formatMessage(messages.passwordHeaderAdd)
 			}`"
 		>
-			<div class="universal-modal">
-				<ul
-					v-if="newPassword !== confirmNewPassword && confirmNewPassword.length > 0"
-					class="known-errors"
-				>
-					<li>{{ formatMessage(messages.passwordsDoNotMatchError) }}</li>
-				</ul>
-				<label v-if="removePasswordMode" for="old-password">
-					<span class="label__title">{{ formatMessage(messages.confirmPasswordLabel) }}</span>
-					<span class="label__description">{{
-						formatMessage(messages.confirmPasswordDescription)
-					}}</span>
-				</label>
-				<label v-else-if="auth.user.has_password" for="old-password">
-					<span class="label__title">{{ formatMessage(messages.oldPasswordLabel) }}</span>
-				</label>
-				<StyledInput
-					v-if="auth.user.has_password"
-					id="old-password"
-					v-model="oldPassword"
-					:maxlength="2048"
-					type="password"
-					autocomplete="current-password"
-					:placeholder="
-						removePasswordMode
-							? formatMessage(messages.confirmPasswordPlaceholder)
-							: formatMessage(messages.oldPasswordPlaceholder)
-					"
-				/>
-				<template v-if="!removePasswordMode">
-					<label for="new-password"
-						><span class="label__title">{{ formatMessage(messages.newPasswordLabel) }}</span></label
-					>
-					<StyledInput
-						id="new-password"
-						v-model="newPassword"
-						:maxlength="2048"
-						type="password"
-						autocomplete="new-password"
-						:placeholder="formatMessage(messages.newPasswordPlaceholder)"
-					/>
-					<label for="confirm-new-password">
-						<span class="label__title">{{ formatMessage(messages.confirmNewPasswordLabel) }}</span>
+			<div class="flex flex-col gap-6">
+				<div v-if="auth.user.has_password" class="flex flex-col gap-2.5">
+					<label v-if="removePasswordMode" for="old-password">
+						<span class="text-md font-semibold text-contrast">{{
+							formatMessage(messages.confirmPasswordLabel)
+						}}</span>
+					</label>
+					<label v-else for="old-password">
+						<span class="text-md font-semibold text-contrast">{{
+							formatMessage(messages.oldPasswordLabel)
+						}}</span>
 					</label>
 					<StyledInput
-						id="confirm-new-password"
-						v-model="confirmNewPassword"
+						id="old-password"
+						v-model="oldPassword"
 						:maxlength="2048"
 						type="password"
-						autocomplete="new-password"
-						:placeholder="formatMessage(messages.confirmNewPasswordPlaceholder)"
+						autocomplete="current-password"
+						:placeholder="
+							removePasswordMode
+								? formatMessage(messages.confirmPasswordPlaceholder)
+								: formatMessage(messages.oldPasswordPlaceholder)
+						"
 					/>
+					<span v-if="removePasswordMode" class="label__description">{{
+						formatMessage(messages.confirmPasswordDescription)
+					}}</span>
+				</div>
+
+				<template v-if="!removePasswordMode">
+					<div class="flex flex-col gap-2.5">
+						<label for="new-password"
+							><span class="text-md font-semibold text-contrast">{{
+								formatMessage(messages.newPasswordLabel)
+							}}</span></label
+						>
+						<StyledInput
+							id="new-password"
+							v-model="newPassword"
+							:maxlength="2048"
+							type="password"
+							autocomplete="new-password"
+							:placeholder="formatMessage(messages.newPasswordPlaceholder)"
+						/>
+					</div>
+
+					<div class="flex flex-col gap-2.5">
+						<label for="confirm-new-password">
+							<span class="text-md font-semibold text-contrast">{{
+								formatMessage(messages.confirmNewPasswordLabel)
+							}}</span>
+						</label>
+						<StyledInput
+							id="confirm-new-password"
+							v-model="confirmNewPassword"
+							:maxlength="2048"
+							type="password"
+							autocomplete="new-password"
+							:placeholder="formatMessage(messages.confirmNewPasswordPlaceholder)"
+						/>
+						<div
+							v-if="newPassword !== confirmNewPassword && confirmNewPassword.length > 0"
+							class="known-errors"
+						>
+							{{ formatMessage(messages.passwordsDoNotMatchError) }}
+						</div>
+					</div>
 				</template>
-				<p></p>
 				<div class="input-group push-right">
 					<ButtonStyled>
 						<button @click="$refs.managePasswordModal.hide()">
@@ -147,15 +169,18 @@
 					</template>
 				</div>
 			</div>
-		</Modal>
-		<Modal
+		</NewModal>
+		<NewModal
 			ref="manageTwoFactorModal"
+			width="500px"
 			:header="`${auth.user.has_totp && twoFactorStep === 0 ? formatMessage(messages.twoFactorRemoveButton) : formatMessage(messages.twoFactorSetupButton)}`"
 		>
-			<div class="universal-modal">
+			<div class="flex flex-col gap-6">
 				<template v-if="auth.user.has_totp && twoFactorStep === 0">
 					<label for="two-factor-code">
-						<span class="label__title">{{ formatMessage(messages.twoFactorEnterCodeLabel) }}</span>
+						<span class="text-md font-semibold text-contrast">{{
+							formatMessage(messages.twoFactorEnterCodeLabel)
+						}}</span>
 						<span class="label__description">{{
 							formatMessage(messages.twoFactorEnterCodeDescription)
 						}}</span>
@@ -167,7 +192,7 @@
 						:placeholder="formatMessage(messages.twoFactorCodePlaceholder)"
 						@keyup.enter="removeTwoFactor()"
 					/>
-					<p v-if="twoFactorIncorrect" class="known-errors">
+					<p v-if="twoFactorIncorrect" class="known-errors m-0">
 						{{ formatMessage(messages.twoFactorIncorrectError) }}
 					</p>
 					<div class="input-group push-right">
@@ -187,8 +212,8 @@
 				</template>
 				<template v-else>
 					<template v-if="twoFactorStep === 0">
-						<p>{{ formatMessage(messages.twoFactorSetupIntro) }}</p>
-						<p>
+						<p class="m-0">{{ formatMessage(messages.twoFactorSetupIntro) }}</p>
+						<p class="m-0">
 							<IntlFormatted :message-id="messages.twoFactorSetupScan">
 								<template #authy-link="{ children }">
 									<a href="https://authy.com/" target="_blank" rel="noreferrer">
@@ -215,14 +240,14 @@
 							:margin="2"
 							level="H"
 						/>
-						<p>
+						<p class="m-0">
 							{{ formatMessage(messages.twoFactorManualSecretPrefix) }}
 							<strong>{{ twoFactorSecret }}</strong>
 						</p>
 					</template>
 					<template v-if="twoFactorStep === 1">
 						<label for="verify-code">
-							<span class="label__title">{{
+							<span class="text-md font-semibold text-contrast">{{
 								formatMessage(messages.twoFactorVerifyCodeLabel)
 							}}</span>
 							<span class="label__description">{{
@@ -237,13 +262,13 @@
 							:placeholder="formatMessage(messages.twoFactorCodePlaceholder)"
 							@keyup.enter="verifyTwoFactorCode()"
 						/>
-						<p v-if="twoFactorIncorrect" class="known-errors">
+						<p v-if="twoFactorIncorrect" class="known-errors m-0">
 							{{ formatMessage(messages.twoFactorIncorrectError) }}
 						</p>
 					</template>
 					<template v-if="twoFactorStep === 2">
-						<p>{{ formatMessage(messages.twoFactorBackupCodesIntro) }}</p>
-						<p>{{ formatMessage(messages.twoFactorBackupCodesSingleUse) }}</p>
+						<p class="m-0">{{ formatMessage(messages.twoFactorBackupCodesIntro) }}</p>
+						<p class="m-0">{{ formatMessage(messages.twoFactorBackupCodesSingleUse) }}</p>
 						<ul>
 							<li v-for="code in backupCodes" :key="code">{{ code }}</li>
 						</ul>
@@ -276,38 +301,34 @@
 					</div>
 				</template>
 			</div>
-		</Modal>
-		<Modal ref="manageProvidersModal" :header="formatMessage(messages.manageProvidersModalHeader)">
-			<div class="universal-modal">
-				<div class="table">
-					<div class="table-head table-row">
-						<div class="table-text table-cell">
-							{{ formatMessage(messages.providersTableProvider) }}
-						</div>
-						<div class="table-text table-cell">
-							{{ formatMessage(messages.providersTableActions) }}
-						</div>
-					</div>
-					<div v-for="provider in authProviders" :key="provider.id" class="table-row">
-						<div class="table-text table-cell">
-							<span><component :is="provider.icon" /> {{ provider.display }}</span>
-						</div>
-						<div class="table-text manage table-cell">
-							<ButtonStyled v-if="auth.user.auth_providers.includes(provider.id)">
-								<button @click="handleRemoveAuthProvider(provider.id)">
-									<TrashIcon /> {{ formatMessage(commonMessages.removeButton) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-else>
-								<a :href="`${getAuthUrl(provider.id, '/settings/account')}&token=${auth.token}`">
-									<ExternalIcon /> {{ formatMessage(messages.providerAddButton) }}
-								</a>
-							</ButtonStyled>
-						</div>
-					</div>
-				</div>
-				<p></p>
-				<div class="input-group push-right">
+		</NewModal>
+		<NewModal
+			ref="manageProvidersModal"
+			width="500px"
+			:header="formatMessage(messages.manageProvidersModalHeader)"
+		>
+			<div class="flex flex-col gap-4">
+				<Table :columns="manageProvidersColumns" :data="authProviders" row-key="id">
+					<template #cell-provider="{ row }">
+						<span class="inline-flex items-center gap-1.5">
+							<component :is="row.icon" class="size-5" />
+							{{ row.display }}
+						</span>
+					</template>
+					<template #cell-actions="{ row }">
+						<ButtonStyled v-if="auth.user.auth_providers.includes(row.id)">
+							<button class="!w-full" @click="handleRemoveAuthProvider(row.id)">
+								<TrashIcon /> {{ formatMessage(commonMessages.removeButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-else>
+							<a :href="`${getAuthUrl(row.id, '/settings/account')}&token=${auth.token}`">
+								<ExternalIcon /> {{ formatMessage(messages.providerAddButton) }}
+							</a>
+						</ButtonStyled>
+					</template>
+				</Table>
+				<div class="self-end">
 					<ButtonStyled>
 						<button @click="$refs.manageProvidersModal.hide()">
 							<XIcon />
@@ -316,7 +337,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</Modal>
+		</NewModal>
 		<section class="universal-card">
 			<h2 class="text-2xl">{{ formatMessage(messages.accountSecurityTitle) }}</h2>
 
@@ -465,13 +486,16 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	Admonition,
 	ButtonStyled,
 	commonMessages,
 	ConfirmModal,
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	NewModal,
 	StyledInput,
+	Table,
 	useVIntl,
 } from '@modrinth/ui'
 import KeyIcon from 'assets/icons/auth/key.svg'
@@ -483,8 +507,7 @@ import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
 import SteamIcon from 'assets/icons/auth/sso-steam.svg'
 import QrcodeVue from 'qrcode.vue'
 
-import Modal from '~/components/ui/Modal.vue'
-import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
+import { getAuthUrl, removeAuthProvider } from '~/composables/auth.ts'
 
 definePageMeta({
 	middleware: 'auth',
@@ -943,6 +966,18 @@ const authProviders = [
 		icon: GoogleIcon,
 	},
 ]
+const manageProvidersColumns = computed(() => [
+	{
+		key: 'provider',
+		label: formatMessage(messages.providersTableProvider),
+	},
+	{
+		key: 'actions',
+		label: formatMessage(messages.providersTableActions),
+		align: 'right',
+		width: '10rem',
+	},
+])
 
 async function deleteAccount() {
 	startLoading()
@@ -996,20 +1031,4 @@ canvas {
 	margin: 0 auto;
 	border-radius: var(--size-rounded-card);
 }
-
-.table-row {
-	grid-template-columns: 1fr 10rem;
-
-	span {
-		display: flex;
-		align-items: center;
-		margin: auto 0;
-
-		svg {
-			width: 1.25rem;
-			height: 1.25rem;
-			margin-right: 0.35rem;
-		}
-	}
-}
 </style>
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index c66dba9672..308302aa9a 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -521,7 +521,7 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
-import { getSignInRouteObj } from '~/composables/auth.js'
+import { getSignInRouteObj } from '~/composables/auth.ts'
 import { reportUser } from '~/utils/report-helpers.ts'
 
 const data = useNuxtApp()
diff --git a/apps/frontend/src/plugins/promote-sign-in-oauth-provider.client.ts b/apps/frontend/src/plugins/promote-sign-in-oauth-provider.client.ts
new file mode 100644
index 0000000000..fa3e0475fe
--- /dev/null
+++ b/apps/frontend/src/plugins/promote-sign-in-oauth-provider.client.ts
@@ -0,0 +1,8 @@
+import { promotePendingSignInOAuthProvider } from '@/composables/auth.ts'
+
+export default defineNuxtPlugin(async () => {
+	const auth = await useAuth()
+	if (auth.value.user) {
+		promotePendingSignInOAuthProvider()
+	}
+})
diff --git a/apps/frontend/src/providers/setup/auth.ts b/apps/frontend/src/providers/setup/auth.ts
index cb15021c44..ca81a818c6 100644
--- a/apps/frontend/src/providers/setup/auth.ts
+++ b/apps/frontend/src/providers/setup/auth.ts
@@ -2,7 +2,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { type AuthProvider, provideAuth } from '@modrinth/ui'
 import { ref, watchEffect } from 'vue'
 
-import { getSignInRedirectPath } from '~/composables/auth.js'
+import { getSignInRedirectPath } from '~/composables/auth.ts'
 
 export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 	const router = useRouter()
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index e4a60b1b1d..51b98c4942 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -1,6 +1,7 @@
 import type { Labrinth, UploadProgress } from '@modrinth/api-client'
 import { SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import {
+	type ComboboxOption,
 	createContext,
 	injectModrinthClient,
 	injectNotificationManager,
@@ -49,16 +50,16 @@ export type VersionStage =
 	| 'add-loaders'
 	| 'add-mc-versions'
 	| 'add-environment'
-	| 'add-dependencies'
 	| 'add-changelog'
 	| 'from-details-loaders'
 	| 'from-details-mc-versions'
 	| 'from-details-environment'
+	| 'from-details-dependencies'
 
 export type SuggestedDependency = Labrinth.Versions.v3.Dependency & {
 	name?: string
 	icon?: string
-	versionName?: string
+	versionNumber?: string
 }
 
 export interface PrimaryFile {
@@ -79,6 +80,10 @@ export interface ManageVersionContextValue {
 	projectsFetchLoading: Ref<boolean>
 	handlingNewFiles: Ref<boolean>
 	suggestedDependencies: Ref<SuggestedDependency[] | null>
+	newDependencyProjectId: Ref<string | undefined>
+	newDependencyType: Ref<Labrinth.Versions.v2.DependencyType>
+	newDependencyVersionId: Ref<string | null>
+	newDependencyVersions: Ref<ComboboxOption<string>[]>
 	visibleSuggestedDependencies: ComputedRef<SuggestedDependency[]>
 	primaryFile: ComputedRef<PrimaryFile | null>
 
@@ -105,6 +110,8 @@ export interface ManageVersionContextValue {
 	replacePrimaryFile: (file: File) => Promise<void>
 	getProject: (projectId: string) => Promise<Labrinth.Projects.v3.Project>
 	getVersion: (versionId: string) => Promise<Labrinth.Versions.v3.Version>
+	resetNewDependency: () => void
+	addNewDependency: () => boolean
 
 	// Submission methods
 	handleCreateVersion: () => Promise<void>
@@ -178,6 +185,10 @@ export function createManageVersionContext(
 	const dependencyVersions = ref<Record<string, Labrinth.Versions.v3.Version>>({})
 	const projectsFetchLoading = ref(false)
 	const suggestedDependencies = ref<SuggestedDependency[] | null>(null)
+	const newDependencyProjectId = ref<string>()
+	const newDependencyType = ref<Labrinth.Versions.v2.DependencyType>('required')
+	const newDependencyVersionId = ref<string | null>(null)
+	const newDependencyVersions = ref<ComboboxOption<string>[]>([])
 
 	const isSubmitting = ref(false)
 	const isUploading = ref(false)
@@ -254,6 +265,7 @@ export function createManageVersionContext(
 		filesToAdd.value = []
 		existingFilesToDelete.value = []
 		inferredVersionData.value = undefined
+		resetNewDependency()
 	}
 
 	async function handleNewFiles(newFiles: File[]) {
@@ -453,6 +465,44 @@ export function createManageVersionContext(
 		return version
 	}
 
+	function resetNewDependency() {
+		newDependencyProjectId.value = undefined
+		newDependencyVersionId.value = null
+		newDependencyType.value = 'required'
+		newDependencyVersions.value = []
+	}
+
+	function addNewDependency() {
+		if (!newDependencyProjectId.value) return false
+		if (!draftVersion.value.dependencies) draftVersion.value.dependencies = []
+
+		const dependency: Labrinth.Versions.v3.Dependency = {
+			project_id: newDependencyProjectId.value,
+			version_id: newDependencyVersionId.value || undefined,
+			dependency_type: newDependencyType.value,
+		}
+
+		const alreadyAdded = draftVersion.value.dependencies.some((existing) => {
+			if (existing.project_id !== dependency.project_id) return false
+			if (!existing.version_id && !dependency.version_id) return true
+			return existing.version_id === dependency.version_id
+		})
+
+		if (alreadyAdded) {
+			addNotification({
+				title: 'Dependency already added',
+				text: 'You cannot add the same dependency twice.',
+				type: 'error',
+			})
+			return false
+		}
+
+		projectsFetchLoading.value = true
+		draftVersion.value.dependencies.push(dependency)
+		resetNewDependency()
+		return true
+	}
+
 	// Primary file computed
 	const primaryFile = computed<PrimaryFile | null>(() => {
 		const existingPrimaryFile = draftVersion.value.existing_files?.[0]
@@ -537,6 +587,30 @@ export function createManageVersionContext(
 		{ immediate: true, deep: true },
 	)
 
+	watch(newDependencyProjectId, async () => {
+		newDependencyVersionId.value = null
+		newDependencyType.value = 'required'
+
+		if (!newDependencyProjectId.value) {
+			newDependencyVersions.value = []
+			return
+		}
+
+		try {
+			const versions = await labrinth.versions_v3.getProjectVersions(newDependencyProjectId.value)
+			newDependencyVersions.value = versions.map((version) => ({
+				label: version.version_number,
+				value: version.id,
+			}))
+		} catch (error: any) {
+			addNotification({
+				title: 'An error occurred',
+				text: error.data ? error.data.description : error,
+				type: 'error',
+			})
+		}
+	})
+
 	// Watch loaders to infer environment if not set
 	watch(
 		() => draftVersion.value.loaders,
@@ -603,7 +677,7 @@ export function createManageVersionContext(
 
 						if (dep.version_id) {
 							const version = await getVersion(dep.version_id)
-							dep.versionName = version.name
+							dep.versionNumber = version.version_number
 						}
 					} catch (error: any) {
 						console.error(`Failed to fetch project/version data for dependency:`, error)
@@ -766,8 +840,6 @@ export function createManageVersionContext(
 				return editingVersion.value ? 'Edit loaders' : 'Set loaders'
 			case 'add-mc-versions':
 				return editingVersion.value ? 'Edit game versions' : 'Set game versions'
-			case 'add-dependencies':
-				return editingVersion.value ? 'Edit dependencies' : 'Set dependencies'
 			case 'add-environment':
 				return editingVersion.value ? 'Edit environment' : 'Add environment'
 			case 'add-changelog':
@@ -801,6 +873,10 @@ export function createManageVersionContext(
 		handlingNewFiles,
 		projectsFetchLoading,
 		suggestedDependencies,
+		newDependencyProjectId,
+		newDependencyType,
+		newDependencyVersionId,
+		newDependencyVersions,
 		visibleSuggestedDependencies,
 		primaryFile,
 
@@ -826,6 +902,8 @@ export function createManageVersionContext(
 		replacePrimaryFile,
 		getProject,
 		getVersion,
+		resetNewDependency,
+		addNewDependency,
 		handleNewFiles,
 		handleCreateVersion,
 		handleSaveVersionEdits,
diff --git a/apps/frontend/src/providers/version/stages/dependencies-stage.ts b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
index 9daad3333a..4d50b0df09 100644
--- a/apps/frontend/src/providers/version/stages/dependencies-stage.ts
+++ b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
@@ -1,4 +1,4 @@
-import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
+import { PlusIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
@@ -6,54 +6,27 @@ import DependenciesStage from '~/components/ui/create-project-version/stages/Dep
 
 import type { ManageVersionContextValue } from '../manage-version-modal'
 
-export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
-	id: 'add-dependencies',
-	stageContent: markRaw(DependenciesStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit version' : 'Dependencies'),
-	skip: (ctx) => ctx.suggestedDependencies.value != null || ctx.projectType.value === 'modpack',
-	leftButtonConfig: (ctx) =>
-		ctx.editingVersion.value
-			? {
-					label: 'Cancel',
-					icon: XIcon,
-					onClick: () => ctx.modal.value?.hide(),
-				}
-			: {
-					label: 'Back',
-					icon: LeftArrowIcon,
-					onClick: () => ctx.modal.value?.prevStage(),
-				},
-	rightButtonConfig: (ctx) =>
-		ctx.editingVersion.value
-			? ctx.saveButtonConfig()
-			: {
-					label: ctx.getNextLabel(),
-					icon: RightArrowIcon,
-					iconPosition: 'after',
-					onClick: () => ctx.modal.value?.nextStage(),
-				},
-	nonProgressStage: (ctx) => ctx.editingVersion.value,
-}
-
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-dependencies',
 	stageContent: markRaw(DependenciesStage),
-	title: 'Edit version',
+	title: 'Add dependency',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => ({
-		label: 'Back',
-		icon: LeftArrowIcon,
-		onClick: () => ctx.modal.value?.setStage('metadata'),
+		label: 'Cancel',
+		icon: XIcon,
+		onClick: () => {
+			ctx.resetNewDependency()
+			ctx.modal.value?.setStage('metadata')
+		},
+	}),
+	rightButtonConfig: (ctx) => ({
+		label: 'Add dependency',
+		icon: PlusIcon,
+		iconPosition: 'before',
+		color: 'green',
+		disabled: !ctx.newDependencyProjectId.value,
+		onClick: () => {
+			if (ctx.addNewDependency()) ctx.modal.value?.setStage('metadata')
+		},
 	}),
-	rightButtonConfig: (ctx) =>
-		ctx.editingVersion.value
-			? {
-					...ctx.saveButtonConfig(),
-				}
-			: {
-					label: 'Add details',
-					icon: RightArrowIcon,
-					iconPosition: 'after',
-					onClick: () => ctx.modal.value?.setStage('add-details'),
-				},
 }
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index 165c5b94cb..43414e658f 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -2,10 +2,7 @@ import {
 	fromDetailsStageConfig as fromDetailsFilesStageConfig,
 	stageConfig as addFilesStageConfig,
 } from './add-files-stage'
-import {
-	fromDetailsStageConfig as fromDetailsDependenciesStageConfig,
-	stageConfig as dependenciesStageConfig,
-} from './dependencies-stage'
+import { fromDetailsStageConfig as fromDetailsDependenciesStageConfig } from './dependencies-stage'
 import { stageConfig as detailsStageConfig } from './details-stage'
 import {
 	fromDetailsStageConfig as fromDetailsEnvironmentStageConfig,
@@ -26,11 +23,10 @@ export const stageConfigs = [
 	loadersStageConfig,
 	mcVersionsStageConfig,
 	environmentStageConfig,
-	dependenciesStageConfig,
 	metadataStageConfig,
 	detailsStageConfig,
 
-	// Non-progress stages for editing from details page
+	// Non-progress stages for editing from metadata/details pages
 	fromDetailsLoadersStageConfig,
 	fromDetailsMcVersionsStageConfig,
 	fromDetailsEnvironmentStageConfig,
diff --git a/apps/labrinth/.sqlx/query-010c69fa61e1329156020b251e75d46bc09344c1846b3098accce5801e571e5e.json b/apps/labrinth/.sqlx/query-a335ff4338fa4b3c1aaa9f62c61aad3c3e8bef0e68035a024995c62cfe69c568.json
similarity index 67%
rename from apps/labrinth/.sqlx/query-010c69fa61e1329156020b251e75d46bc09344c1846b3098accce5801e571e5e.json
rename to apps/labrinth/.sqlx/query-a335ff4338fa4b3c1aaa9f62c61aad3c3e8bef0e68035a024995c62cfe69c568.json
index 082a6e4e26..bfc425a3b4 100644
--- a/apps/labrinth/.sqlx/query-010c69fa61e1329156020b251e75d46bc09344c1846b3098accce5801e571e5e.json
+++ b/apps/labrinth/.sqlx/query-a335ff4338fa4b3c1aaa9f62c61aad3c3e8bef0e68035a024995c62cfe69c568.json
@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n            INSERT INTO users (\n                id, username, email,\n                avatar_url, raw_avatar_url, bio, created,\n                github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                email_verified, password, paypal_id, paypal_country, paypal_email,\n                venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter\n            )\n            VALUES (\n                $1, $2, $3, $4, $5,\n                $6, $7,\n                $8, $9, $10, $11, $12, $13,\n                $14, $15, $16, $17, $18, $19, $20, $21, $22\n            )\n            ",
+  "query": "\n            INSERT INTO users (\n                id, username, email,\n                avatar_url, raw_avatar_url, bio, created,\n                github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                email_verified, password, paypal_id, paypal_country, paypal_email,\n                venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter,\n                eligibility_verified_at\n            )\n            VALUES (\n                $1, $2, $3, $4, $5,\n                $6, $7,\n                $8, $9, $10, $11, $12, $13,\n                $14, $15, $16, $17, $18, $19, $20, $21, $22,\n                $23\n            )\n            ",
   "describe": {
     "columns": [],
     "parameters": {
@@ -26,10 +26,11 @@
         "Text",
         "Text",
         "Bool",
-        "Bool"
+        "Bool",
+        "Timestamptz"
       ]
     },
     "nullable": []
   },
-  "hash": "010c69fa61e1329156020b251e75d46bc09344c1846b3098accce5801e571e5e"
+  "hash": "a335ff4338fa4b3c1aaa9f62c61aad3c3e8bef0e68035a024995c62cfe69c568"
 }
diff --git a/apps/labrinth/.sqlx/query-5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4.json b/apps/labrinth/.sqlx/query-cc2056c368e11fcd820dfd6951d4fa2dd26da8813d4b0dbaa6bd66f7060f1e76.json
similarity index 88%
rename from apps/labrinth/.sqlx/query-5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4.json
rename to apps/labrinth/.sqlx/query-cc2056c368e11fcd820dfd6951d4fa2dd26da8813d4b0dbaa6bd66f7060f1e76.json
index 0c33202b98..ad438da375 100644
--- a/apps/labrinth/.sqlx/query-5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4.json
+++ b/apps/labrinth/.sqlx/query-cc2056c368e11fcd820dfd6951d4fa2dd26da8813d4b0dbaa6bd66f7060f1e76.json
@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n                    SELECT id, email,\n                        avatar_url, raw_avatar_url, username, bio,\n                        created, role, badges,\n                        github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                        email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,\n                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter\n                    FROM users\n                    WHERE id = ANY($1) OR LOWER(username) = ANY($2)\n                    ",
+  "query": "\n                    SELECT id, email,\n                        avatar_url, raw_avatar_url, username, bio,\n                        created, role, badges,\n                        github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                        email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,\n                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter,\n                        eligibility_verified_at\n                    FROM users\n                    WHERE id = ANY($1) OR LOWER(username) = ANY($2)\n                    ",
   "describe": {
     "columns": [
       {
@@ -127,6 +127,11 @@
         "ordinal": 24,
         "name": "is_subscribed_to_newsletter",
         "type_info": "Bool"
+      },
+      {
+        "ordinal": 25,
+        "name": "eligibility_verified_at",
+        "type_info": "Timestamptz"
       }
     ],
     "parameters": {
@@ -160,8 +165,9 @@
       true,
       true,
       false,
-      false
+      false,
+      true
     ]
   },
-  "hash": "5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4"
+  "hash": "cc2056c368e11fcd820dfd6951d4fa2dd26da8813d4b0dbaa6bd66f7060f1e76"
 }
diff --git a/apps/labrinth/AGENTS.md b/apps/labrinth/AGENTS.md
index 2e6a6e36ff..b0027bb193 100644
--- a/apps/labrinth/AGENTS.md
+++ b/apps/labrinth/AGENTS.md
@@ -18,3 +18,4 @@
   - `Authorization: Bearer mra_user` for a regular user
   - `Modrinth-Admin: feedbeef` as admin key
 - If some steps require you to create a project/mod or version for testing, ask the user to go into the web frontend and manually create a project/version
+- DO NOT use `()` as an error type for operations, unless you have a very good reason. Either make a new error type, or use `eyre::Report`.
diff --git a/apps/labrinth/migrations/20260512112320_compliance_flag.sql b/apps/labrinth/migrations/20260512112320_compliance_flag.sql
new file mode 100644
index 0000000000..dc477f8018
--- /dev/null
+++ b/apps/labrinth/migrations/20260512112320_compliance_flag.sql
@@ -0,0 +1 @@
+ALTER TABLE users ADD COLUMN eligibility_verified_at TIMESTAMPTZ;
diff --git a/apps/labrinth/src/auth/mod.rs b/apps/labrinth/src/auth/mod.rs
index 1dfd7fd385..e71b82b014 100644
--- a/apps/labrinth/src/auth/mod.rs
+++ b/apps/labrinth/src/auth/mod.rs
@@ -46,7 +46,13 @@ pub enum AuthenticationError {
     #[error(
         "User email is already registered on Modrinth. Try 'Forgot password' to access your account."
     )]
-    DuplicateUser,
+    DuplicateEmail,
+    #[error("Username is already taken on Modrinth.")]
+    UsernameTaken,
+    #[error(
+        "This authentication provider is already linked to another Modrinth account."
+    )]
+    ProviderAlreadyLinked,
     #[error("Invalid state sent, you probably need to get a new websocket")]
     SocketError,
     #[error("Invalid callback URL specified")]
@@ -76,7 +82,11 @@ impl actix_web::ResponseError for AuthenticationError {
             AuthenticationError::FileHosting(..) => {
                 StatusCode::INTERNAL_SERVER_ERROR
             }
-            AuthenticationError::DuplicateUser => StatusCode::BAD_REQUEST,
+            AuthenticationError::DuplicateEmail => StatusCode::BAD_REQUEST,
+            AuthenticationError::UsernameTaken => StatusCode::BAD_REQUEST,
+            AuthenticationError::ProviderAlreadyLinked => {
+                StatusCode::BAD_REQUEST
+            }
             AuthenticationError::SocketError => StatusCode::BAD_REQUEST,
         }
     }
@@ -105,7 +115,11 @@ impl AuthenticationError {
             AuthenticationError::InvalidClientId => "invalid_client_id",
             AuthenticationError::Url => "url_error",
             AuthenticationError::FileHosting(..) => "file_hosting",
-            AuthenticationError::DuplicateUser => "duplicate_user",
+            AuthenticationError::DuplicateEmail => "duplicate_email",
+            AuthenticationError::UsernameTaken => "username_taken",
+            AuthenticationError::ProviderAlreadyLinked => {
+                "provider_already_linked"
+            }
             AuthenticationError::SocketError => "socket",
         }
     }
diff --git a/apps/labrinth/src/database/models/flow_item.rs b/apps/labrinth/src/database/models/flow_item.rs
index b7b853d9d1..a000057f6e 100644
--- a/apps/labrinth/src/database/models/flow_item.rs
+++ b/apps/labrinth/src/database/models/flow_item.rs
@@ -1,15 +1,16 @@
 use super::ids::*;
-use crate::auth::AuthProvider;
 use crate::auth::oauth::uris::OAuthRedirectUris;
 use crate::database::models::DatabaseError;
 use crate::database::redis::RedisPool;
 use crate::models::pats::Scopes;
+use crate::{auth::AuthProvider, routes::internal::flows::TempUser};
 use chrono::Duration;
 use rand::Rng;
 use rand::distributions::Alphanumeric;
 use rand_chacha::ChaCha20Rng;
 use rand_chacha::rand_core::SeedableRng;
 use serde::{Deserialize, Serialize};
+use url::Url;
 
 const FLOWS_NAMESPACE: &str = "flows";
 
@@ -18,10 +19,15 @@ const FLOWS_NAMESPACE: &str = "flows";
 pub enum DBFlow {
     OAuth {
         user_id: Option<DBUserId>,
-        url: String,
+        url: Url,
         provider: AuthProvider,
         existing_user_id: Option<DBUserId>,
     },
+    OAuthPending {
+        url: Url,
+        provider: AuthProvider,
+        user: TempUser,
+    },
     Login2FA {
         user_id: DBUserId,
     },
@@ -55,28 +61,38 @@ pub enum DBFlow {
 }
 
 impl DBFlow {
-    pub async fn insert(
+    pub async fn insert_with_state(
         &self,
         expires: Duration,
         redis: &RedisPool,
-    ) -> Result<String, DatabaseError> {
+        state: &str,
+    ) -> Result<(), DatabaseError> {
         let mut redis = redis.connect().await?;
 
-        let flow = ChaCha20Rng::from_entropy()
-            .sample_iter(&Alphanumeric)
-            .take(32)
-            .map(char::from)
-            .collect::<String>();
-
         redis
             .set_serialized_to_json(
                 FLOWS_NAMESPACE,
-                &flow,
+                &state,
                 &self,
                 Some(expires.num_seconds()),
             )
             .await?;
-        Ok(flow)
+        Ok(())
+    }
+
+    pub async fn insert(
+        &self,
+        expires: Duration,
+        redis: &RedisPool,
+    ) -> Result<String, DatabaseError> {
+        let state = ChaCha20Rng::from_entropy()
+            .sample_iter(&Alphanumeric)
+            .take(32)
+            .map(char::from)
+            .collect::<String>();
+
+        self.insert_with_state(expires, redis, &state).await?;
+        Ok(state)
     }
 
     pub async fn get(
diff --git a/apps/labrinth/src/database/models/user_item.rs b/apps/labrinth/src/database/models/user_item.rs
index aa40574d68..acefcbb23d 100644
--- a/apps/labrinth/src/database/models/user_item.rs
+++ b/apps/labrinth/src/database/models/user_item.rs
@@ -52,6 +52,8 @@ pub struct DBUser {
     pub allow_friend_requests: bool,
 
     pub is_subscribed_to_newsletter: bool,
+
+    pub eligibility_verified_at: Option<DateTime<Utc>>,
 }
 
 impl DBUser {
@@ -66,13 +68,15 @@ impl DBUser {
                 avatar_url, raw_avatar_url, bio, created,
                 github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,
                 email_verified, password, paypal_id, paypal_country, paypal_email,
-                venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter
+                venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter,
+                eligibility_verified_at
             )
             VALUES (
                 $1, $2, $3, $4, $5,
                 $6, $7,
                 $8, $9, $10, $11, $12, $13,
-                $14, $15, $16, $17, $18, $19, $20, $21, $22
+                $14, $15, $16, $17, $18, $19, $20, $21, $22,
+                $23
             )
             ",
             self.id as DBUserId,
@@ -97,6 +101,7 @@ impl DBUser {
             self.stripe_customer_id,
             self.allow_friend_requests,
             self.is_subscribed_to_newsletter,
+            self.eligibility_verified_at,
         )
         .execute(&mut *transaction)
         .await?;
@@ -182,7 +187,8 @@ impl DBUser {
                         created, role, badges,
                         github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,
                         email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,
-                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter
+                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter,
+                        eligibility_verified_at
                     FROM users
                     WHERE id = ANY($1) OR LOWER(username) = ANY($2)
                     ",
@@ -217,6 +223,7 @@ impl DBUser {
                             totp_secret: u.totp_secret,
                             allow_friend_requests: u.allow_friend_requests,
                             is_subscribed_to_newsletter: u.is_subscribed_to_newsletter,
+                            eligibility_verified_at: u.eligibility_verified_at,
                         };
 
                         acc.insert(u.id, (Some(u.username), user));
diff --git a/apps/labrinth/src/models/v3/users.rs b/apps/labrinth/src/models/v3/users.rs
index 0f276fc8fa..c488bc3ee1 100644
--- a/apps/labrinth/src/models/v3/users.rs
+++ b/apps/labrinth/src/models/v3/users.rs
@@ -64,6 +64,7 @@ pub struct User {
     pub payout_data: Option<UserPayoutData>,
     pub stripe_customer_id: Option<String>,
     pub allow_friend_requests: Option<bool>,
+    pub eligibility_verified_at: Option<DateTime<Utc>>,
 
     // DEPRECATED. Always returns None
     pub github_id: Option<u64>,
@@ -98,6 +99,7 @@ impl From<DBUser> for User {
             github_id: None,
             stripe_customer_id: None,
             allow_friend_requests: None,
+            eligibility_verified_at: None,
         }
     }
 }
@@ -150,6 +152,7 @@ impl User {
             }),
             stripe_customer_id: db_user.stripe_customer_id,
             allow_friend_requests: Some(db_user.allow_friend_requests),
+            eligibility_verified_at: db_user.eligibility_verified_at,
         }
     }
 }
diff --git a/apps/labrinth/src/routes/internal/flows.rs b/apps/labrinth/src/routes/internal/flows.rs
index 49c81fdaa0..2cc59bdb1d 100644
--- a/apps/labrinth/src/routes/internal/flows.rs
+++ b/apps/labrinth/src/routes/internal/flows.rs
@@ -10,6 +10,7 @@ use crate::database::models::{DBUser, DBUserId};
 use crate::database::redis::RedisPool;
 use crate::env::ENV;
 use crate::file_hosting::{FileHost, FileHostPublicity};
+use crate::models::error::ApiError as ApiErrorResponse;
 use crate::models::notifications::NotificationBody;
 use crate::models::pats::Scopes;
 use crate::models::users::{Badges, Role};
@@ -22,6 +23,8 @@ use crate::util::error::Context;
 use crate::util::ext::get_image_ext;
 use crate::util::img::upload_image_optimized;
 use crate::util::validate::validation_errors_to_string;
+use actix_http::header::LOCATION;
+use actix_web::http::StatusCode;
 use actix_web::web::{Data, Query};
 use actix_web::{HttpRequest, HttpResponse, delete, get, patch, post, web};
 use argon2::password_hash::SaltString;
@@ -39,7 +42,9 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::str::FromStr;
 use std::sync::Arc;
-use tracing::info;
+use thiserror::Error;
+use tracing::{error, info};
+use url::Url;
 use validator::Validate;
 use zxcvbn::Score;
 
@@ -49,6 +54,8 @@ pub fn config(cfg: &mut utoipa_actix_web::service_config::ServiceConfig) {
             .service(init)
             .service(auth_callback)
             .service(delete_auth_provider)
+            .service(create_oauth_account)
+            .service(validate_create_account_with_password)
             .service(create_account_with_password)
             .service(login_password)
             .service(login_2fa)
@@ -65,7 +72,7 @@ pub fn config(cfg: &mut utoipa_actix_web::service_config::ServiceConfig) {
     );
 }
 
-#[derive(Debug)]
+#[derive(Serialize, Deserialize, Debug)]
 pub struct TempUser {
     pub id: String,
     pub username: String,
@@ -85,44 +92,26 @@ impl TempUser {
         client: &PgPool,
         file_host: &Arc<dyn FileHost + Send + Sync>,
         redis: &RedisPool,
-    ) -> Result<crate::database::models::DBUserId, AuthenticationError> {
+        username: String,
+        sign_up_newsletter: bool,
+    ) -> Result<DBUserId, AuthenticationError> {
         if let Some(email) = &self.email
             && crate::database::models::DBUser::get_by_email(email, client)
                 .await?
                 .is_some()
         {
-            return Err(AuthenticationError::DuplicateUser);
+            return Err(AuthenticationError::DuplicateEmail);
         }
 
         let user_id =
             crate::database::models::generate_user_id(transaction).await?;
 
-        let mut username_increment: i32 = 0;
-        let mut username = None;
-
-        while username.is_none() {
-            let test_username = format!(
-                "{}{}",
-                self.username,
-                if username_increment > 0 {
-                    username_increment.to_string()
-                } else {
-                    "".to_string()
-                }
-            );
-
-            let new_id = crate::database::models::DBUser::get(
-                &test_username,
-                client,
-                redis,
-            )
-            .await?;
+        let existing_id = DBUser::get(&username, client, redis)
+            .await
+            .wrap_err("failed to fetch existing user by id")?;
 
-            if new_id.is_none() {
-                username = Some(test_username);
-            } else {
-                username_increment += 1;
-            }
+        if existing_id.is_some() {
+            return Err(AuthenticationError::UsernameTaken);
         }
 
         let (avatar_url, raw_avatar_url) = if let Some(avatar_url) =
@@ -166,89 +155,87 @@ impl TempUser {
             (None, None)
         };
 
-        if let Some(username) = username {
-            crate::database::models::DBUser {
-                id: user_id,
-                github_id: if provider == AuthProvider::GitHub {
-                    Some(
-                        self.id.clone().parse().map_err(|_| {
-                            AuthenticationError::InvalidCredentials
-                        })?,
-                    )
-                } else {
-                    None
-                },
-                discord_id: if provider == AuthProvider::Discord {
-                    Some(
-                        self.id.parse().map_err(|_| {
-                            AuthenticationError::InvalidCredentials
-                        })?,
-                    )
-                } else {
-                    None
-                },
-                gitlab_id: if provider == AuthProvider::GitLab {
-                    Some(
-                        self.id.parse().map_err(|_| {
-                            AuthenticationError::InvalidCredentials
-                        })?,
-                    )
-                } else {
-                    None
-                },
-                google_id: if provider == AuthProvider::Google {
-                    Some(self.id.clone())
-                } else {
-                    None
-                },
-                steam_id: if provider == AuthProvider::Steam {
-                    Some(
-                        self.id.parse().map_err(|_| {
-                            AuthenticationError::InvalidCredentials
-                        })?,
-                    )
-                } else {
-                    None
-                },
-                microsoft_id: if provider == AuthProvider::Microsoft {
-                    Some(self.id.clone())
-                } else {
-                    None
-                },
-                password: None,
-                paypal_id: if provider == AuthProvider::PayPal {
-                    Some(self.id)
-                } else {
-                    None
-                },
-                paypal_country: self.country,
-                paypal_email: if provider == AuthProvider::PayPal {
-                    self.email.clone()
-                } else {
-                    None
-                },
-                venmo_handle: None,
-                stripe_customer_id: None,
-                totp_secret: None,
-                username,
-                email: self.email.clone(),
-                email_verified: self.email.is_some(),
-                avatar_url,
-                raw_avatar_url,
-                bio: self.bio,
-                created: Utc::now(),
-                role: Role::Developer.to_string(),
-                badges: Badges::default(),
-                allow_friend_requests: true,
-                is_subscribed_to_newsletter: false,
-            }
-            .insert(transaction)
-            .await?;
-
-            Ok(user_id)
-        } else {
-            Err(AuthenticationError::InvalidCredentials)
+        DBUser {
+            id: user_id,
+            github_id: if provider == AuthProvider::GitHub {
+                Some(
+                    self.id
+                        .clone()
+                        .parse()
+                        .map_err(|_| AuthenticationError::InvalidCredentials)?,
+                )
+            } else {
+                None
+            },
+            discord_id: if provider == AuthProvider::Discord {
+                Some(
+                    self.id
+                        .parse()
+                        .map_err(|_| AuthenticationError::InvalidCredentials)?,
+                )
+            } else {
+                None
+            },
+            gitlab_id: if provider == AuthProvider::GitLab {
+                Some(
+                    self.id
+                        .parse()
+                        .map_err(|_| AuthenticationError::InvalidCredentials)?,
+                )
+            } else {
+                None
+            },
+            google_id: if provider == AuthProvider::Google {
+                Some(self.id.clone())
+            } else {
+                None
+            },
+            steam_id: if provider == AuthProvider::Steam {
+                Some(
+                    self.id
+                        .parse()
+                        .map_err(|_| AuthenticationError::InvalidCredentials)?,
+                )
+            } else {
+                None
+            },
+            microsoft_id: if provider == AuthProvider::Microsoft {
+                Some(self.id.clone())
+            } else {
+                None
+            },
+            password: None,
+            paypal_id: if provider == AuthProvider::PayPal {
+                Some(self.id)
+            } else {
+                None
+            },
+            paypal_country: self.country,
+            paypal_email: if provider == AuthProvider::PayPal {
+                self.email.clone()
+            } else {
+                None
+            },
+            venmo_handle: None,
+            stripe_customer_id: None,
+            totp_secret: None,
+            username,
+            email: self.email.clone(),
+            email_verified: self.email.is_some(),
+            avatar_url,
+            raw_avatar_url,
+            bio: self.bio,
+            created: Utc::now(),
+            role: Role::Developer.to_string(),
+            badges: Badges::default(),
+            allow_friend_requests: true,
+            is_subscribed_to_newsletter: sign_up_newsletter,
+            eligibility_verified_at: Some(Utc::now()),
         }
+        .insert(transaction)
+        .await?;
+
+        Ok(user_id)
     }
 }
 
@@ -1043,7 +1030,7 @@ impl AuthProvider {
 
 #[derive(Serialize, Deserialize, utoipa::ToSchema)]
 pub struct AuthorizationInit {
-    pub url: String,
+    pub url: Url,
     #[serde(default)]
     pub provider: AuthProvider,
     pub token: Option<String>,
@@ -1103,9 +1090,7 @@ pub async fn init(
         "Starting authentication flow"
     );
 
-    let url =
-        url::Url::parse(&info.url).map_err(|_| AuthenticationError::Url)?;
-
+    let url = info.url;
     let domain = url.host_str().ok_or(AuthenticationError::Url)?;
     if !ENV
         .ALLOWED_CALLBACK_URLS
@@ -1135,7 +1120,7 @@ pub async fn init(
 
     let state = DBFlow::OAuth {
         user_id,
-        url: info.url,
+        url,
         provider: info.provider,
         existing_user_id,
     }
@@ -1161,9 +1146,54 @@ pub async fn auth_callback(
     req: HttpRequest,
     Query(query): Query<HashMap<String, String>>,
     client: Data<PgPool>,
-    file_host: Data<Arc<dyn FileHost + Send + Sync>>,
     redis: Data<RedisPool>,
 ) -> Result<HttpResponse, crate::auth::templates::ErrorPage> {
+    /// Ensures that the OAuth flow is removed from Redis when dropped.
+    ///
+    /// A guard is used here since it's safer than manually removing the flow
+    /// in each branch.
+    struct FlowGuard {
+        state: Option<String>,
+        redis: Data<RedisPool>,
+    }
+
+    impl Drop for FlowGuard {
+        fn drop(&mut self) {
+            let Some(state) = self.state.clone() else {
+                // has been replaced
+                return;
+            };
+            let redis = self.redis.clone();
+            tokio::spawn(async move {
+                if let Err(err) = DBFlow::remove(&state, &redis).await {
+                    error!("failed to remove DB flow state: {err:#}");
+                }
+            });
+        }
+    }
+
+    impl FlowGuard {
+        /// Prevents this guard from removing `state` when dropped, instead
+        /// replacing the flow for `state` with the new given `flow`.
+        pub async fn replace_with(
+            mut self,
+            flow: DBFlow,
+        ) -> Result<(), ApiError> {
+            let state = self
+                .state
+                .clone()
+                .expect("`self` should not be dropped yet");
+            let redis = self.redis.clone();
+            self.state = None;
+
+            flow.insert_with_state(Duration::minutes(10), &redis, &state)
+                .await
+                .wrap_internal_err("failed to insert new flow state")?;
+
+            Ok(())
+        }
+    }
+
     let state_string = query
         .get("state")
         .ok_or_else(|| AuthenticationError::InvalidCredentials)?
@@ -1189,9 +1219,10 @@ pub async fn auth_callback(
             )));
         };
 
-        DBFlow::remove(&state, &redis)
-            .await
-            .wrap_err("failed to remove flow")?;
+        let flow_guard = FlowGuard {
+            state: Some(state.clone()),
+            redis: redis.clone(),
+        };
 
         let token = provider
             .get_token(query)
@@ -1250,13 +1281,13 @@ pub async fn auth_callback(
             .wrap_err("failed to clear user caches")?;
 
             return Ok(HttpResponse::TemporaryRedirect()
-                .append_header(("Location", &*url))
+                .append_header(("Location", url.as_str()))
                 .json(serde_json::json!({ "url": url })));
         }
 
         if let Some(id) = user_id {
             if user_id_opt.is_some() {
-                return Err(AuthenticationError::DuplicateUser);
+                return Err(AuthenticationError::ProviderAlreadyLinked);
             }
 
             provider
@@ -1285,65 +1316,74 @@ pub async fn auth_callback(
             .await?;
 
             Ok(HttpResponse::TemporaryRedirect()
-                .append_header(("Location", &*url))
+                .append_header(("Location", url.as_str()))
                 .json(serde_json::json!({ "url": url })))
-        } else {
-            let user_id = if let Some(user_id) = user_id_opt {
-                let user = crate::database::models::DBUser::get_id(
-                    user_id, &**client, &redis,
-                )
-                .await?
-                .ok_or_else(|| AuthenticationError::InvalidCredentials)?;
-
-                if user.totp_secret.is_some() {
-                    let flow = DBFlow::Login2FA { user_id: user.id }
-                        .insert(Duration::minutes(30), &redis)
-                        .await?;
+        } else if let Some(user_id) = user_id_opt {
+            let user = crate::database::models::DBUser::get_id(
+                user_id, &**client, &redis,
+            )
+            .await?
+            .ok_or_else(|| AuthenticationError::InvalidCredentials)?;
 
-                    let redirect_url = format!(
-                        "{}{}error=2fa_required&flow={}",
-                        url,
-                        if url.contains('?') { "&" } else { "?" },
-                        flow
-                    );
+            if user.totp_secret.is_some() {
+                let flow = DBFlow::Login2FA { user_id: user.id }
+                    .insert(Duration::minutes(30), &redis)
+                    .await?;
 
-                    return Ok(HttpResponse::TemporaryRedirect()
-                        .append_header(("Location", &*redirect_url))
-                        .json(serde_json::json!({ "url": redirect_url })));
-                }
+                let mut redirect_url = url.clone();
+                redirect_url
+                    .query_pairs_mut()
+                    .append_pair("error", "2fa_required")
+                    .append_pair("flow", &flow);
 
-                user_id
+                Ok(HttpResponse::TemporaryRedirect()
+                    .append_header((LOCATION, redirect_url.as_str()))
+                    .json(serde_json::json!({ "url": redirect_url })))
             } else {
-                oauth_user
-                    .create_account(
-                        provider,
-                        &mut transaction,
-                        &client,
-                        &file_host,
-                        &redis,
-                    )
-                    .await?
-            };
+                let session =
+                    issue_session(req, user_id, &mut transaction, &redis, None)
+                        .await?;
+                transaction.commit().await?;
 
-            let session =
-                issue_session(req, user_id, &mut transaction, &redis, None)
-                    .await?;
-            transaction.commit().await?;
+                let mut redirect_url = url.clone();
+                redirect_url
+                    .query_pairs_mut()
+                    .append_pair("code", &session.session);
 
-            let redirect_url = format!(
-                "{}{}code={}{}",
-                url,
-                if url.contains('?') { '&' } else { '?' },
-                session.session,
-                if user_id_opt.is_none() {
-                    "&new_account=true"
-                } else {
-                    ""
-                }
-            );
+                Ok(HttpResponse::TemporaryRedirect()
+                    .append_header((LOCATION, redirect_url.as_str()))
+                    .json(serde_json::json!({ "url": redirect_url })))
+            }
+        } else {
+            // user doesn't already exist; the user wants to create a new Modrinth account
+            // linked to their OAuth account.
+            // for this, we redirect them to a frontend page which lets them set a username.
+            // then frontend will call `/create/oauth` with the same state parameter and
+            // chosen settings (username, subscribe to newsletter), and handle navigation.
+            let suggested_username = oauth_user.username.clone();
+
+            flow_guard
+                .replace_with(DBFlow::OAuthPending {
+                    url: url.clone(),
+                    provider,
+                    user: oauth_user,
+                })
+                .await
+                .wrap_err("failed to replace flow for state")?;
+
+            let mut redirect_url = url.clone();
+            redirect_url
+                .query_pairs_mut()
+                .append_pair("state", &state)
+                .append_pair(
+                    "requires_dob",
+                    &requires_dob(provider).to_string(),
+                )
+                .append_pair("username", &suggested_username);
 
+            let redirect_url = redirect_url.to_string();
             Ok(HttpResponse::TemporaryRedirect()
-                .append_header(("Location", &*redirect_url))
+                .append_header((LOCATION, &*redirect_url))
                 .json(serde_json::json!({ "url": redirect_url })))
         }
     }
@@ -1352,6 +1392,85 @@ pub async fn auth_callback(
     Ok(res?)
 }
 
+fn requires_dob(provider: AuthProvider) -> bool {
+    matches!(
+        provider,
+        AuthProvider::GitHub | AuthProvider::GitLab | AuthProvider::Steam
+    )
+}
+
+#[derive(Deserialize, Validate, utoipa::ToSchema)]
+struct NewOAuthAccount {
+    // keep in sync with NewAccount
+    #[validate(length(min = 1, max = 39), regex(path = *crate::util::validate::RE_URL_SAFE))]
+    pub username: String,
+    pub state: String,
+    pub challenge: String,
+    pub sign_up_newsletter: bool,
+}
+
+#[utoipa::path(
+    post,
+    operation_id = "createOAuthAccount",
+    responses(
+        (status = 200, description = "OAuth account created"),
+        (status = 400, description = "Invalid input")
+    )
+)]
+#[post("/create/oauth")]
+async fn create_oauth_account(
+    req: HttpRequest,
+    db: Data<PgPool>,
+    file_host: Data<Arc<dyn FileHost + Send + Sync>>,
+    redis: Data<RedisPool>,
+    web::Json(new_account): web::Json<NewOAuthAccount>,
+) -> Result<HttpResponse, ApiError> {
+    new_account.validate().map_err(|err| {
+        ApiError::InvalidInput(validation_errors_to_string(err, None))
+    })?;
+
+    if !check_hcaptcha(&req, &new_account.challenge).await? {
+        return Err(ApiError::Turnstile);
+    }
+
+    let flow = DBFlow::get(&new_account.state, &redis)
+        .await
+        .wrap_internal_err("failed to fetch flow state")?
+        .wrap_request_err("no flow for state")?;
+
+    let DBFlow::OAuthPending {
+        url: _url,
+        provider,
+        user,
+    } = flow
+    else {
+        return Err(ApiError::Internal(eyre!("invalid flow kind")));
+    };
+
+    let mut txn = db
+        .begin()
+        .await
+        .wrap_internal_err("failed to begin transaction")?;
+
+    let user_id = user
+        .create_account(
+            provider,
+            &mut txn,
+            &db,
+            &file_host,
+            &redis,
+            new_account.username,
+            new_account.sign_up_newsletter,
+        )
+        .await?;
+
+    let session = issue_session(req, user_id, &mut txn, &redis, None).await?;
+    let res = crate::models::sessions::Session::from(session, true, None);
+    txn.commit().await?;
+
+    Ok(HttpResponse::Ok().json(res))
+}
+
 #[derive(Deserialize, utoipa::ToSchema)]
 pub struct DeleteAuthProvider {
     pub provider: AuthProvider,
@@ -1453,16 +1572,274 @@ pub async fn check_sendy_subscription(
 
 #[derive(Deserialize, Validate, utoipa::ToSchema)]
 pub struct NewAccount {
-    #[validate(length(min = 1, max = 39), regex(path = *crate::util::validate::RE_URL_SAFE))]
+    // keep in sync with NewOAuthAccount
     pub username: String,
-    #[validate(length(min = 8, max = 256))]
     pub password: String,
-    #[validate(email)]
     pub email: String,
-    pub challenge: String,
+    pub challenge: Option<String>,
     pub sign_up_newsletter: Option<bool>,
 }
 
+#[derive(Debug, Validate)]
+struct AccountRegisterFlow {
+    #[validate(length(min = 1, max = 39), regex(path = *crate::util::validate::RE_URL_SAFE))]
+    username: String,
+    #[validate(length(min = 8, max = 256))]
+    password: String,
+    #[validate(email)]
+    email: String,
+    sign_up_newsletter: bool,
+}
+
+#[derive(Debug)]
+struct ReadyAccountRegisterFlow {
+    inner: AccountRegisterFlow,
+}
+
+#[derive(Debug, Error)]
+enum AccountRegisterValidateError {
+    #[error("Username is already taken on Modrinth.")]
+    UsernameTaken,
+    #[error(
+        "Email is already registered on Modrinth. Try 'Forgot password' to access your account."
+    )]
+    DuplicateEmail,
+    #[error("{}", match .0 {
+        Some(feedback) => format!("Password too weak: {feedback}"),
+        None => "Specified password is too weak! Please improve its strength.".to_string(),
+    })]
+    WeakPassword(Option<String>),
+    #[error("{0}")]
+    InvalidInput(String),
+}
+
+impl AccountRegisterValidateError {
+    fn error_code(&self) -> &'static str {
+        match self {
+            AccountRegisterValidateError::UsernameTaken => "username_taken",
+            AccountRegisterValidateError::DuplicateEmail => "duplicate_email",
+            AccountRegisterValidateError::WeakPassword(_) => "weak_password",
+            AccountRegisterValidateError::InvalidInput(_) => "invalid_input",
+        }
+    }
+}
+
+impl actix_web::ResponseError for AccountRegisterValidateError {
+    fn status_code(&self) -> StatusCode {
+        StatusCode::BAD_REQUEST
+    }
+
+    fn error_response(&self) -> HttpResponse {
+        HttpResponse::build(self.status_code()).json(ApiErrorResponse {
+            error: self.error_code(),
+            description: self.to_string(),
+            details: None,
+        })
+    }
+}
+
+impl From<AccountRegisterValidateError> for ApiError {
+    fn from(value: AccountRegisterValidateError) -> Self {
+        match &value {
+            AccountRegisterValidateError::UsernameTaken => {
+                ApiError::Authentication(AuthenticationError::UsernameTaken)
+            }
+            AccountRegisterValidateError::DuplicateEmail => {
+                ApiError::Authentication(AuthenticationError::DuplicateEmail)
+            }
+            _ => ApiError::InvalidInput(value.to_string()),
+        }
+    }
+}
+
+impl From<NewAccount> for AccountRegisterFlow {
+    fn from(account: NewAccount) -> Self {
+        Self {
+            username: account.username,
+            password: account.password,
+            email: account.email,
+            sign_up_newsletter: account.sign_up_newsletter.unwrap_or(false),
+        }
+    }
+}
+
+impl AccountRegisterFlow {
+    async fn validate(
+        self,
+        transaction: &mut PgTransaction<'_>,
+        redis: &RedisPool,
+    ) -> Result<ReadyAccountRegisterFlow, AccountRegisterValidateError> {
+        validator::Validate::validate(&self).map_err(|err| {
+            AccountRegisterValidateError::InvalidInput(
+                validation_errors_to_string(err, None),
+            )
+        })?;
+
+        if crate::database::models::DBUser::get(
+            &self.username,
+            &mut *transaction,
+            redis,
+        )
+        .await
+        .map_err(|err| {
+            AccountRegisterValidateError::InvalidInput(err.to_string())
+        })?
+        .is_some()
+        {
+            return Err(AccountRegisterValidateError::UsernameTaken);
+        }
+
+        let score =
+            zxcvbn::zxcvbn(&self.password, &[&self.username, &self.email]);
+
+        if score.score() < Score::Three {
+            let feedback = score
+                .feedback()
+                .and_then(|x| x.warning())
+                .map(|w| w.to_string());
+            return Err(AccountRegisterValidateError::WeakPassword(feedback));
+        }
+
+        if !crate::database::models::DBUser::get_by_case_insensitive_email(
+            &self.email,
+            &mut *transaction,
+        )
+        .await
+        .map_err(|err| {
+            AccountRegisterValidateError::InvalidInput(err.to_string())
+        })?
+        .is_empty()
+        {
+            return Err(AccountRegisterValidateError::DuplicateEmail);
+        }
+
+        Ok(ReadyAccountRegisterFlow { inner: self })
+    }
+}
+
+impl ReadyAccountRegisterFlow {
+    async fn execute(
+        self,
+        req: HttpRequest,
+        transaction: &mut PgTransaction<'_>,
+        redis: &RedisPool,
+        email_queue: &EmailQueue,
+    ) -> Result<crate::models::sessions::Session, ApiError> {
+        let register_flow = self.inner;
+
+        let user_id =
+            crate::database::models::generate_user_id(transaction).await?;
+
+        let hasher = Argon2::default();
+        let salt = SaltString::generate(&mut ChaCha20Rng::from_entropy());
+        let password_hash = hasher
+            .hash_password(register_flow.password.as_bytes(), &salt)?
+            .to_string();
+
+        crate::database::models::DBUser {
+            id: user_id,
+            github_id: None,
+            discord_id: None,
+            gitlab_id: None,
+            google_id: None,
+            steam_id: None,
+            microsoft_id: None,
+            password: Some(password_hash),
+            paypal_id: None,
+            paypal_country: None,
+            paypal_email: None,
+            venmo_handle: None,
+            stripe_customer_id: None,
+            totp_secret: None,
+            username: register_flow.username.clone(),
+            email: Some(register_flow.email.clone()),
+            email_verified: false,
+            avatar_url: None,
+            raw_avatar_url: None,
+            bio: None,
+            created: Utc::now(),
+            role: Role::Developer.to_string(),
+            badges: Badges::default(),
+            allow_friend_requests: true,
+            is_subscribed_to_newsletter: register_flow.sign_up_newsletter,
+            eligibility_verified_at: Some(Utc::now()),
+        }
+        .insert(transaction)
+        .await
+        .map_err(|err| {
+            if let sqlx::Error::Database(database_error) = &err {
+                match database_error.constraint() {
+                    Some("username_unique" | "users_username_key") => {
+                        return ApiError::from(
+                            AccountRegisterValidateError::UsernameTaken,
+                        );
+                    }
+                    Some("email_unique" | "users_email_key") => {
+                        return ApiError::from(
+                            AccountRegisterValidateError::DuplicateEmail,
+                        );
+                    }
+                    _ => {}
+                }
+            }
+
+            ApiError::from(err)
+        })?;
+
+        let session =
+            issue_session(req, user_id, transaction, redis, None).await?;
+        let res = crate::models::sessions::Session::from(session, true, None);
+
+        let mailbox: Mailbox = register_flow.email.parse().map_err(|_| {
+            ApiError::InvalidInput("Invalid email address!".to_string())
+        })?;
+
+        let flow = DBFlow::ConfirmEmail {
+            user_id,
+            confirm_email: register_flow.email.clone(),
+        }
+        .insert(Duration::hours(24), redis)
+        .await?;
+
+        email_queue
+            .send_one(
+                transaction,
+                NotificationBody::VerifyEmail { flow },
+                user_id,
+                mailbox,
+            )
+            .await?
+            .as_user_error()?;
+
+        Ok(res)
+    }
+}
+
+#[utoipa::path(
+    post,
+    operation_id = "validateCreateAccountWithPassword",
+    responses(
+        (status = 200, description = "Account input is valid"),
+        (status = 400, description = "Invalid input")
+    )
+)]
+#[post("/create/validate")]
+pub async fn validate_create_account_with_password(
+    pool: Data<PgPool>,
+    redis: Data<RedisPool>,
+    new_account: web::Json<NewAccount>,
+) -> Result<(), AccountRegisterValidateError> {
+    let mut transaction = pool.begin().await.map_err(|err| {
+        AccountRegisterValidateError::InvalidInput(err.to_string())
+    })?;
+
+    AccountRegisterFlow::from(new_account.into_inner())
+        .validate(&mut transaction, &redis)
+        .await?;
+
+    Ok(())
+}
+
 #[utoipa::path(
     post,
     operation_id = "createAccountPassword",
@@ -1479,122 +1856,23 @@ pub async fn create_account_with_password(
     new_account: web::Json<NewAccount>,
     email: web::Data<EmailQueue>,
 ) -> Result<HttpResponse, ApiError> {
-    new_account.0.validate().map_err(|err| {
-        ApiError::InvalidInput(validation_errors_to_string(err, None))
-    })?;
-
-    if !check_hcaptcha(&req, &new_account.challenge).await? {
-        return Err(ApiError::Turnstile);
-    }
+    let new_account = new_account.into_inner();
 
-    if crate::database::models::DBUser::get(
-        &new_account.username,
-        &**pool,
-        &redis,
-    )
-    .await?
-    .is_some()
+    if !check_hcaptcha(&req, new_account.challenge.as_deref().unwrap_or(""))
+        .await?
     {
-        return Err(ApiError::InvalidInput("Username is taken!".to_string()));
+        return Err(ApiError::Turnstile);
     }
 
     let mut transaction = pool.begin().await?;
-    let user_id =
-        crate::database::models::generate_user_id(&mut transaction).await?;
-
-    let new_account = new_account.0;
-
-    let score = zxcvbn::zxcvbn(
-        &new_account.password,
-        &[&new_account.username, &new_account.email],
-    );
-
-    if score.score() < Score::Three {
-        return Err(ApiError::InvalidInput(
-            if let Some(feedback) = score.feedback().and_then(|x| x.warning()) {
-                format!("Password too weak: {feedback}")
-            } else {
-                "Specified password is too weak! Please improve its strength."
-                    .to_string()
-            },
-        ));
-    }
-
-    let hasher = Argon2::default();
-    let salt = SaltString::generate(&mut ChaCha20Rng::from_entropy());
-    let password_hash = hasher
-        .hash_password(new_account.password.as_bytes(), &salt)?
-        .to_string();
-
-    if !crate::database::models::DBUser::get_by_case_insensitive_email(
-        &new_account.email,
-        &**pool,
-    )
-    .await?
-    .is_empty()
-    {
-        return Err(ApiError::InvalidInput(
-            "Email is already registered on Modrinth! Try 'Forgot password' to access your account.".to_string(),
-        ));
-    }
-
-    crate::database::models::DBUser {
-        id: user_id,
-        github_id: None,
-        discord_id: None,
-        gitlab_id: None,
-        google_id: None,
-        steam_id: None,
-        microsoft_id: None,
-        password: Some(password_hash),
-        paypal_id: None,
-        paypal_country: None,
-        paypal_email: None,
-        venmo_handle: None,
-        stripe_customer_id: None,
-        totp_secret: None,
-        username: new_account.username.clone(),
-        email: Some(new_account.email.clone()),
-        email_verified: false,
-        avatar_url: None,
-        raw_avatar_url: None,
-        bio: None,
-        created: Utc::now(),
-        role: Role::Developer.to_string(),
-        badges: Badges::default(),
-        allow_friend_requests: true,
-        is_subscribed_to_newsletter: new_account
-            .sign_up_newsletter
-            .unwrap_or(false),
-    }
-    .insert(&mut transaction)
-    .await?;
-
-    let session =
-        issue_session(req, user_id, &mut transaction, &redis, None).await?;
-    let res = crate::models::sessions::Session::from(session, true, None);
 
-    let mailbox: Mailbox = new_account.email.parse().map_err(|_| {
-        ApiError::InvalidInput("Invalid email address!".to_string())
-    })?;
-
-    let flow = DBFlow::ConfirmEmail {
-        user_id,
-        confirm_email: new_account.email.clone(),
-    }
-    .insert(Duration::hours(24), &redis)
-    .await?;
-
-    email
-        .send_one(
-            &mut transaction,
-            NotificationBody::VerifyEmail { flow },
-            user_id,
-            mailbox,
-        )
-        .await?
-        .as_user_error()?;
+    let ready_flow = AccountRegisterFlow::from(new_account)
+        .validate(&mut transaction, &redis)
+        .await?;
 
+    let res = ready_flow
+        .execute(req, &mut transaction, &redis, &email)
+        .await?;
     transaction.commit().await?;
 
     Ok(HttpResponse::Ok().json(res))
diff --git a/apps/labrinth/src/routes/updates.rs b/apps/labrinth/src/routes/updates.rs
index 987d695534..9e5b202e1c 100644
--- a/apps/labrinth/src/routes/updates.rs
+++ b/apps/labrinth/src/routes/updates.rs
@@ -1,3 +1,4 @@
+use std::cmp::Reverse;
 use std::collections::HashMap;
 
 use crate::database::PgPool;
@@ -86,7 +87,7 @@ pub async fn forge_updates(
     )
     .await?;
 
-    versions.sort_by_key(|b| std::cmp::Reverse(b.date_published));
+    versions.sort_by_key(|b| Reverse(b.date_published));
 
     #[derive(Serialize)]
     struct ForgeUpdates {
diff --git a/apps/labrinth/src/routes/v3/projects.rs b/apps/labrinth/src/routes/v3/projects.rs
index a40f933057..c29af4d982 100644
--- a/apps/labrinth/src/routes/v3/projects.rs
+++ b/apps/labrinth/src/routes/v3/projects.rs
@@ -1,4 +1,5 @@
 use std::any::type_name;
+use std::cmp::Reverse;
 use std::collections::HashMap;
 use std::sync::Arc;
 
@@ -1353,10 +1354,10 @@ pub async fn dependency_list_internal(
         )
         .await?;
 
-        projects.sort_by_key(|b| std::cmp::Reverse(b.published));
+        projects.sort_by_key(|b| Reverse(b.published));
         projects.dedup_by(|a, b| a.id == b.id);
 
-        versions.sort_by_key(|b| std::cmp::Reverse(b.date_published));
+        versions.sort_by_key(|b| Reverse(b.date_published));
         versions.dedup_by(|a, b| a.id == b.id);
 
         Ok(HttpResponse::Ok().json(DependencyInfo { projects, versions }))
diff --git a/apps/labrinth/src/routes/v3/users.rs b/apps/labrinth/src/routes/v3/users.rs
index 708393cbed..f0534e9647 100644
--- a/apps/labrinth/src/routes/v3/users.rs
+++ b/apps/labrinth/src/routes/v3/users.rs
@@ -1,4 +1,4 @@
-use std::{collections::HashMap, sync::Arc};
+use std::{cmp::Reverse, collections::HashMap, sync::Arc};
 
 use super::{ApiError, oauth_clients::get_user_clients};
 use crate::database::PgPool;
@@ -799,7 +799,7 @@ pub async fn user_notifications(
             .map(Into::into)
             .collect();
 
-        notifications.sort_by_key(|b| std::cmp::Reverse(b.created));
+        notifications.sort_by_key(|b| Reverse(b.created));
         Ok(HttpResponse::Ok().json(notifications))
     } else {
         Err(ApiError::NotFound)
diff --git a/packages/api-client/src/modules/labrinth/auth/v2.ts b/packages/api-client/src/modules/labrinth/auth/v2.ts
index da5aa7b771..e1829d7726 100644
--- a/packages/api-client/src/modules/labrinth/auth/v2.ts
+++ b/packages/api-client/src/modules/labrinth/auth/v2.ts
@@ -57,6 +57,39 @@ export class LabrinthAuthV2Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Validate email/password inputs for account creation without creating an account.
+	 *
+	 * @param data - Prospective account credentials
+	 */
+	public async validateCreateAccount(
+		data: Labrinth.Auth.v2.ValidateCreateAccountRequest,
+	): Promise<void> {
+		return this.client.request(`/auth/create/validate`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'POST',
+			body: data,
+		})
+	}
+
+	/**
+	 * Create a new account from an OAuth callback flow state
+	 *
+	 * @param data - OAuth account creation data
+	 * @returns Promise resolving to a session response
+	 */
+	public async createOAuthAccount(
+		data: Labrinth.Auth.v2.CreateOAuthAccountRequest,
+	): Promise<Labrinth.Auth.v2.CreateOAuthAccountResponse> {
+		return this.client.request<Labrinth.Auth.v2.CreateOAuthAccountResponse>(`/auth/create/oauth`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'POST',
+			body: data,
+		})
+	}
+
 	/**
 	 * Begin a password reset flow by sending a recovery email
 	 *
diff --git a/packages/api-client/src/modules/labrinth/projects/v2.ts b/packages/api-client/src/modules/labrinth/projects/v2.ts
index 4aa75f4b06..62197d23ca 100644
--- a/packages/api-client/src/modules/labrinth/projects/v2.ts
+++ b/packages/api-client/src/modules/labrinth/projects/v2.ts
@@ -26,6 +26,23 @@ export class LabrinthProjectsV2Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Check that a project slug or ID exists and return its canonical project ID.
+	 *
+	 * @param idOrSlug - Project ID or slug (e.g. `sodium` or `AANobbMI`)
+	 */
+	public async check(idOrSlug: string): Promise<Labrinth.Projects.v2.ProjectCheckResponse> {
+		const encoded = encodeURIComponent(idOrSlug)
+		return this.client.request<Labrinth.Projects.v2.ProjectCheckResponse>(
+			`/project/${encoded}/check`,
+			{
+				api: 'labrinth',
+				version: 2,
+				method: 'GET',
+			},
+		)
+	}
+
 	/**
 	 * Get multiple projects by IDs
 	 *
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index aa44c19228..fd27b2fbed 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -278,6 +278,23 @@ export namespace Labrinth {
 				session: string
 			}
 
+			export type ValidateCreateAccountRequest = {
+				username: string
+				password: string
+				email: string
+			}
+
+			export type CreateOAuthAccountRequest = {
+				username: string
+				state: string
+				challenge: string
+				sign_up_newsletter: boolean
+			}
+
+			export type CreateOAuthAccountResponse = {
+				session: string
+			}
+
 			export type ResetPasswordRequest = {
 				username: string
 				challenge: string
@@ -468,6 +485,10 @@ export namespace Labrinth {
 				monetization_status: MonetizationStatus
 			}
 
+			export type ProjectCheckResponse = {
+				id: string
+			}
+
 			export type SearchResultHit = {
 				project_id: string
 				project_type: ProjectType
diff --git a/packages/app-lib/src/state/instances/content.rs b/packages/app-lib/src/state/instances/content.rs
index e7c32e4e67..ffd78cd51c 100644
--- a/packages/app-lib/src/state/instances/content.rs
+++ b/packages/app-lib/src/state/instances/content.rs
@@ -27,6 +27,7 @@ use crate::util::fetch::{
 use async_zip::base::read::seek::ZipFileReader;
 use serde::{Deserialize, Serialize};
 use sqlx::SqlitePool;
+use std::cmp::Reverse;
 use std::collections::HashSet;
 use std::io::Cursor;
 
@@ -283,7 +284,7 @@ fn check_modpack_update(
         .collect();
 
     // Sort by date_published descending (newest first)
-    compatible_versions.sort_by_key(|b| std::cmp::Reverse(b.date_published));
+    compatible_versions.sort_by_key(|b| Reverse(b.date_published));
 
     // Find the newest compatible version
     if let Some(newest) = compatible_versions.first() {
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index 5d41c6fbcb..1822c5fda5 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -711,6 +711,8 @@ a:not(.no-click-animation),
 }
 
 .v-popper--theme-tooltip {
+	pointer-events: none;
+
 	.v-popper__inner {
 		background: var(--color-tooltip-bg) !important;
 		color: var(--color-tooltip-text) !important;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 21b0d1af32..c56288e96b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -59,7 +59,7 @@
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
 		"@modrinth/utils": "workspace:*",
-		"@tanstack/vue-query": "^5.90.7",
+		"@tanstack/vue-query": "5.90.7",
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
 		"@tresjs/post-processing": "^2.4.0",
diff --git a/packages/ui/src/components/base/Checkbox.vue b/packages/ui/src/components/base/Checkbox.vue
index fb782952eb..fe3e451376 100644
--- a/packages/ui/src/components/base/Checkbox.vue
+++ b/packages/ui/src/components/base/Checkbox.vue
@@ -13,7 +13,7 @@
 		@click="toggle"
 	>
 		<span
-			class="w-5 h-5 rounded-md flex items-center justify-center border-[1px] border-solid"
+			class="w-5 h-5 aspect-square rounded-md flex items-center justify-center border-[1px] border-solid"
 			:class="{
 				'bg-brand border-button-border text-brand-inverted': modelValue,
 				'bg-surface-2 border-surface-5 text-primary': !modelValue,
diff --git a/packages/ui/src/components/base/Chips.vue b/packages/ui/src/components/base/Chips.vue
index a1b517878c..e25f1f1073 100644
--- a/packages/ui/src/components/base/Chips.vue
+++ b/packages/ui/src/components/base/Chips.vue
@@ -95,7 +95,7 @@ function toggleItem(item: T) {
 		background-color: var(--color-brand-highlight);
 		box-shadow:
 			inset 0 0 0 transparent,
-			0 0 0 2px var(--color-brand);
+			0 0 0 1px var(--color-brand);
 	}
 }
 </style>
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index bf340ffd58..eb50ece3bb 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -28,7 +28,8 @@
 				class="relative z-[1]"
 				@input="handleSearchInput"
 				@keydown="handleSearchKeydown"
-				@focus="handleSearchFocus"
+				@focusin="handleSearchFocus"
+				@focusout="handleSearchFocusout"
 				@click="handleSearchClick"
 			>
 				<template v-if="showChevron" #right>
@@ -90,7 +91,7 @@
 				leave-to-class="opacity-0"
 			>
 				<div
-					v-if="isOpen"
+					v-if="shouldRenderDropdown"
 					ref="dropdownRef"
 					class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] bg-surface-4 border border-solid border-surface-5"
 					:class="[
@@ -122,6 +123,7 @@
 								class="group/option flex items-center gap-2.5 cursor-pointer rounded-xl p-3 text-left transition-colors duration-150 text-contrast hover:bg-surface-5 focus:bg-surface-5"
 								:class="getOptionClasses(item, index)"
 								tabindex="-1"
+								@mousedown.prevent
 								@click="handleOptionClick(item, index)"
 								@mouseenter="handleOptionMouseEnter(item, index)"
 							>
@@ -225,12 +227,15 @@ const props = withDefaults(
 		showIconInSelected?: boolean
 		maxHeight?: number
 		displayValue?: string
+		searchValue?: string
 		triggerClass?: string
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		disableSearchFilter?: boolean
 		/** Keep the selected option's label in the input after selection, and show all options on focus */
 		syncWithSelection?: boolean
+		/** Select the searchable input text when the field receives focus */
+		selectSearchTextOnFocus?: boolean
 		/** Show a search icon in the searchable input */
 		showSearchIcon?: boolean
 	}>(),
@@ -245,6 +250,7 @@ const props = withDefaults(
 		maxHeight: DEFAULT_MAX_HEIGHT,
 		noOptionsMessage: 'No results found',
 		syncWithSelection: true,
+		selectSearchTextOnFocus: false,
 		showSearchIcon: false,
 	},
 )
@@ -256,6 +262,7 @@ const emit = defineEmits<{
 	open: []
 	close: []
 	searchInput: [query: string]
+	searchBlur: [query: string]
 }>()
 
 const slots = useSlots()
@@ -337,6 +344,14 @@ const filteredOptions = computed(() => {
 	})
 })
 
+const hasDropdownContent = computed(() => {
+	return filteredOptions.value.length > 0 || !!searchQuery.value || !!slots['dropdown-footer']
+})
+
+const shouldRenderDropdown = computed(() => {
+	return isOpen.value && hasDropdownContent.value
+})
+
 function getOptionClasses(item: ComboboxOption<T> & { key: string }, index: number) {
 	return [
 		item.class,
@@ -432,7 +447,7 @@ async function updateDropdownPosition() {
 }
 
 async function openDropdown() {
-	if (props.disabled || isOpen.value) return
+	if (props.disabled || isOpen.value || !hasDropdownContent.value) return
 
 	isOpen.value = true
 	emit('open')
@@ -503,15 +518,20 @@ function handleOptionMouseEnter(option: ComboboxOption<T>, index: number) {
 
 function findNextFocusableOption(currentIndex: number, direction: 'next' | 'previous'): number {
 	const length = filteredOptions.value.length
+	if (length === 0) return -1
+
 	let index = currentIndex
-	let option
 
-	do {
+	for (let i = 0; i < length; i++) {
 		index = direction === 'next' ? (index + 1) % length : (index - 1 + length) % length
-		option = filteredOptions.value[index]
-	} while (isDivider(option) || option.disabled)
+		const option = filteredOptions.value[index]
 
-	return index
+		if (!isDivider(option) && !option.disabled) {
+			return index
+		}
+	}
+
+	return -1
 }
 
 function focusOption(index: number) {
@@ -627,12 +647,33 @@ function handleSearchInput() {
 	}
 }
 
-function handleSearchFocus() {
+function handleSearchFocus(event: FocusEvent) {
+	const target = event.target
+	if (props.selectSearchTextOnFocus && target instanceof HTMLInputElement) {
+		window.setTimeout(() => {
+			if (document.activeElement === target) {
+				target.select()
+			}
+		})
+	}
+
 	if (!isOpen.value) {
 		openDropdown()
 	}
 }
 
+function handleSearchFocusout(event: FocusEvent) {
+	const nextTarget = event.relatedTarget
+	if (nextTarget instanceof Node && containerRef.value?.contains(nextTarget)) return
+	if (nextTarget instanceof Node && dropdownRef.value?.contains(nextTarget)) return
+
+	emit('searchBlur', searchQuery.value)
+	if (props.searchValue !== undefined) {
+		searchQuery.value = props.searchValue
+	}
+	closeDropdown()
+}
+
 function handleSearchClick() {
 	if (!isOpen.value) {
 		openDropdown()
@@ -683,12 +724,24 @@ watch(isOpen, (value) => {
 	}
 })
 
+watch(shouldRenderDropdown, (value) => {
+	if (value) {
+		updateDropdownPosition()
+	}
+})
+
 watch(filteredOptions, () => {
 	if (isOpen.value) {
 		updateDropdownPosition()
 	}
 })
 
+watch(hasDropdownContent, (value) => {
+	if (!value && isOpen.value) {
+		closeDropdown()
+	}
+})
+
 watch(
 	[() => props.modelValue, () => props.options],
 	([val]) => {
diff --git a/packages/ui/src/components/base/SmartClickable.vue b/packages/ui/src/components/base/SmartClickable.vue
index 216c2f25de..961de1732d 100644
--- a/packages/ui/src/components/base/SmartClickable.vue
+++ b/packages/ui/src/components/base/SmartClickable.vue
@@ -48,7 +48,9 @@ defineOptions({
 
 	// When clickable is being hovered or focus-visible, give contents an effect
 	:first-child:hover + .smart-clickable__contents,
-	:first-child:focus-visible + .smart-clickable__contents {
+	:first-child:focus-visible + .smart-clickable__contents,
+	.smart-clickable__contents:hover,
+	.smart-clickable__contents:focus-within {
 		// Utility classes for contents
 		:deep(.smart-clickable\:underline-on-hover) {
 			text-decoration: underline;
diff --git a/packages/ui/src/components/base/Tabs.vue b/packages/ui/src/components/base/Tabs.vue
new file mode 100644
index 0000000000..e1bca3c688
--- /dev/null
+++ b/packages/ui/src/components/base/Tabs.vue
@@ -0,0 +1,97 @@
+<template>
+	<div
+		v-if="tabs.length > 0"
+		class="inline-flex w-fit items-center overflow-x-auto rounded-xl border border-solid border-surface-5 p-0.5 shadow-sm gap-1"
+		role="tablist"
+	>
+		<button
+			v-for="(tab, index) in tabs"
+			:key="tab.value"
+			ref="tabButtons"
+			type="button"
+			class="flex min-h-6 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border border-solid px-2.5 py-1 text-sm font-medium outline-none transition-all active:scale-[0.97] focus-visible:ring-4 focus-visible:ring-brand-shadow"
+			:class="
+				tab.value === value
+					? 'border-green bg-highlight-green text-green'
+					: 'border-transparent bg-transparent text-primary hover:bg-surface-4'
+			"
+			role="tab"
+			:aria-selected="tab.value === value"
+			:tabindex="tab.value === value || (!hasSelectedTab && index === 0) ? 0 : -1"
+			@click="selectTab(tab)"
+			@keydown="onTabKeydown($event, index)"
+		>
+			<component
+				:is="tab.icon"
+				v-if="tab.icon"
+				class="size-5 shrink-0"
+				:class="tab.value === value ? 'text-green' : 'text-secondary'"
+			/>
+			<span class="text-nowrap">{{ tab.label }}</span>
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { computed, ref } from 'vue'
+
+export type TabsValue = string | number
+
+export interface TabsTab {
+	value: TabsValue
+	label: string
+	icon?: Component
+}
+
+const props = defineProps<{
+	value: TabsValue
+	tabs: TabsTab[]
+}>()
+
+const emit = defineEmits<{
+	'update:value': [value: TabsValue]
+	change: [tab: TabsTab]
+}>()
+
+const tabButtons = ref<HTMLButtonElement[]>()
+
+const hasSelectedTab = computed(() => props.tabs.some((tab) => tab.value === props.value))
+
+function selectTab(tab: TabsTab) {
+	emit('update:value', tab.value)
+	emit('change', tab)
+}
+
+function selectTabAtIndex(index: number) {
+	const tab = props.tabs[index]
+	if (!tab) return
+
+	selectTab(tab)
+	requestAnimationFrame(() => {
+		tabButtons.value?.[index]?.focus()
+	})
+}
+
+function onTabKeydown(event: KeyboardEvent, index: number) {
+	if (props.tabs.length === 0) return
+
+	const lastIndex = props.tabs.length - 1
+	let nextIndex: number | undefined
+
+	if (event.key === 'ArrowRight') {
+		nextIndex = index === lastIndex ? 0 : index + 1
+	} else if (event.key === 'ArrowLeft') {
+		nextIndex = index === 0 ? lastIndex : index - 1
+	} else if (event.key === 'Home') {
+		nextIndex = 0
+	} else if (event.key === 'End') {
+		nextIndex = lastIndex
+	}
+
+	if (nextIndex === undefined) return
+
+	event.preventDefault()
+	selectTabAtIndex(nextIndex)
+}
+</script>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index f27ee0e2ea..14f5382e30 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -79,6 +79,8 @@ export { default as StatItem } from './StatItem.vue'
 export { default as StyledInput } from './StyledInput.vue'
 export type { TableColumn } from './Table.vue'
 export { default as Table } from './Table.vue'
+export type { TabsTab, TabsValue } from './Tabs.vue'
+export { default as Tabs } from './Tabs.vue'
 export { default as TagItem } from './TagItem.vue'
 export { default as TagTagItem } from './TagTagItem.vue'
 export { default as Timeline } from './Timeline.vue'
diff --git a/packages/ui/src/components/nav/PagewideBanner.vue b/packages/ui/src/components/nav/PagewideBanner.vue
index 913fb1ec42..e1d263295b 100644
--- a/packages/ui/src/components/nav/PagewideBanner.vue
+++ b/packages/ui/src/components/nav/PagewideBanner.vue
@@ -12,7 +12,7 @@
 			<slot name="title" />
 		</div>
 
-		<div class="grid-area-[description] flex flex-col gap-[var(--gap-md)]">
+		<div class="grid-area-[description] flex flex-col gap-3">
 			<slot name="description" />
 		</div>
 
diff --git a/packages/ui/src/components/project/card/ProjectCard.vue b/packages/ui/src/components/project/card/ProjectCard.vue
index 35663c407b..a1f62ef15f 100644
--- a/packages/ui/src/components/project/card/ProjectCard.vue
+++ b/packages/ui/src/components/project/card/ProjectCard.vue
@@ -62,7 +62,11 @@
 								:hide-label="true"
 							/>
 							<ServerPing v-if="serverPing && serverStatusOnline" :ping="serverPing" />
-							<ServerRegion v-if="serverRegion" :region="serverRegion" />
+							<ServerRegion
+								v-if="serverRegion"
+								:region="serverRegion"
+								class="smart-clickable:allow-pointer-events"
+							/>
 						</template>
 						<ProjectCardEnvironment
 							v-if="environment"
@@ -158,7 +162,11 @@
 					<div class="flex items-center gap-1">
 						<template v-if="isServerProject">
 							<ServerPing v-if="serverPing && serverStatusOnline" :ping="serverPing" />
-							<ServerRegion v-if="serverRegion" :region="serverRegion" />
+							<ServerRegion
+								v-if="serverRegion"
+								:region="serverRegion"
+								class="smart-clickable:allow-pointer-events"
+							/>
 						</template>
 						<ProjectCardEnvironment
 							v-if="environment"
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 63dcd80fdd..9fa6e693da 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -43,6 +43,24 @@ export const Searchable: Story = {
 		],
 		searchable: true,
 		searchPlaceholder: 'Search loaders...',
+		selectSearchTextOnFocus: true,
+	},
+}
+
+export const SearchableEmpty: Story = {
+	args: {
+		options: [],
+		searchable: true,
+		searchPlaceholder: 'Search projects...',
+		noOptionsMessage: 'No projects found',
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Covers the idle empty searchable state: focusing the input should not open an empty dropdown until there is a query or footer content.',
+			},
+		},
 	},
 }
 
diff --git a/packages/ui/src/stories/base/ProjectCard.stories.ts b/packages/ui/src/stories/base/ProjectCard.stories.ts
index 94bc2ed376..a2a4f4b88b 100644
--- a/packages/ui/src/stories/base/ProjectCard.stories.ts
+++ b/packages/ui/src/stories/base/ProjectCard.stories.ts
@@ -126,6 +126,31 @@ export const WithStatus: Story = {
 	}),
 }
 
+export const ServerProject: Story = {
+	args: {
+		link: '/server/example-server',
+		layout: 'grid',
+		title: 'Example Server',
+		author: { name: 'ServerAdmin', link: '/user/ServerAdmin' },
+		summary: 'A live multiplayer server with required content and regional metadata.',
+		iconUrl: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
+		isServerProject: true,
+		serverOnlinePlayers: 128,
+		serverStatusOnline: true,
+		serverRecentPlays: 8420,
+		serverPing: 42,
+		serverRegion: 'us',
+		serverModpackContent: {
+			name: 'Example Modpack',
+			icon: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
+			showCustomModpackTooltip: true,
+		},
+		tags: ['adventure', 'multiplayer', 'quests'],
+		allTags: ['adventure', 'multiplayer', 'quests', 'economy', 'roleplay', 'survival'],
+		dateUpdated: '2024-01-15T00:00:00Z',
+	},
+}
+
 export const DisplayModes: StoryObj = {
 	decorators: [], // Remove default decorator for this story
 	render: () => ({
diff --git a/packages/ui/src/stories/base/SmartClickable.stories.ts b/packages/ui/src/stories/base/SmartClickable.stories.ts
index b497ce9253..ceff865d31 100644
--- a/packages/ui/src/stories/base/SmartClickable.stories.ts
+++ b/packages/ui/src/stories/base/SmartClickable.stories.ts
@@ -18,6 +18,13 @@ const meta = {
 				<div style="padding: 1rem; background: var(--color-button-bg); border-radius: 0.5rem;">
 					<h3>Clickable Card</h3>
 					<p>The entire card is clickable</p>
+					<span
+						v-tooltip="'Tooltip child keeps the card hover state'"
+						class="smart-clickable:allow-pointer-events"
+						style="display: inline-flex; margin-top: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--color-raised-bg);"
+					>
+						Hover tooltip
+					</span>
 				</div>
 			</SmartClickable>
 		`,
diff --git a/packages/ui/src/stories/base/Tabs.stories.ts b/packages/ui/src/stories/base/Tabs.stories.ts
new file mode 100644
index 0000000000..b15c9a34dd
--- /dev/null
+++ b/packages/ui/src/stories/base/Tabs.stories.ts
@@ -0,0 +1,50 @@
+import { ChartIcon, DownloadIcon, UsersIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Tabs from '../../components/base/Tabs.vue'
+
+const meta = {
+	title: 'Base/Tabs',
+	component: Tabs,
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+export const Default: StoryObj = {
+	render: () => ({
+		components: { Tabs },
+		setup() {
+			const value = ref('area')
+			const tabs = [
+				{ value: 'line', label: 'Line' },
+				{ value: 'area', label: 'Area' },
+				{ value: 'bar', label: 'Bar' },
+			]
+
+			return { value, tabs }
+		},
+		template: /* html */ `
+			<Tabs v-model:value="value" :tabs="tabs" />
+		`,
+	}),
+}
+
+export const WithIcons: StoryObj = {
+	render: () => ({
+		components: { Tabs },
+		setup() {
+			const value = ref('downloads')
+			const tabs = [
+				{ value: 'overview', label: 'Overview', icon: ChartIcon },
+				{ value: 'downloads', label: 'Downloads', icon: DownloadIcon },
+				{ value: 'users', label: 'Users', icon: UsersIcon },
+			]
+
+			return { value, tabs }
+		},
+		template: /* html */ `
+			<Tabs v-model:value="value" :tabs="tabs" />
+		`,
+	}),
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69338949cb..6373263bbc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: ^1.1.6
         version: 1.1.6
       '@tanstack/vue-query':
-        specifier: ^5.90.7
-        version: 5.92.9(vue@3.5.27(typescript@5.9.3))
+        specifier: 5.90.7
+        version: 5.90.7(vue@3.5.27(typescript@5.9.3))
       '@tauri-apps/api':
         specifier: ^2.5.0
         version: 2.10.1
@@ -170,7 +170,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
+        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -179,22 +179,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.2(jiti@1.21.7)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -212,7 +212,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -285,8 +285,8 @@ importers:
         specifier: ^10.33.0
         version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
       '@tanstack/vue-query':
-        specifier: ^5.90.7
-        version: 5.92.9(vue@3.5.27(typescript@5.9.3))
+        specifier: 5.90.7
+        version: 5.90.7(vue@3.5.27(typescript@5.9.3))
       '@types/three':
         specifier: ^0.172.0
         version: 0.172.0
@@ -641,8 +641,8 @@ importers:
         specifier: workspace:*
         version: link:../utils
       '@tanstack/vue-query':
-        specifier: ^5.90.7
-        version: 5.92.9(vue@3.5.27(typescript@5.9.3))
+        specifier: 5.90.7
+        version: 5.90.7(vue@3.5.27(typescript@5.9.3))
       '@tresjs/cientos':
         specifier: ^4.3.0
         version: 4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.4)(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
@@ -775,7 +775,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -4227,11 +4227,11 @@ packages:
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
 
-  '@tanstack/query-core@5.90.20':
-    resolution: {integrity: sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==}
+  '@tanstack/query-core@5.90.7':
+    resolution: {integrity: sha512-6PN65csiuTNfBMXqQUxQhCNdtm1rV+9kC9YwWAIKcaxAauq3Wu7p18j3gQY3YIBJU70jT/wzCCZ2uqto/vQgiQ==}
 
-  '@tanstack/vue-query@5.92.9':
-    resolution: {integrity: sha512-jjAZcqKveyX0C4w/6zUqbnqk/XzuxNWaFsWjGTJWULVFizUNeLGME2gf9vVSDclIyiBhR13oZJPPs6fJgfpIJQ==}
+  '@tanstack/vue-query@5.90.7':
+    resolution: {integrity: sha512-2h0esebc2qVRVDge3gFArhss5+qn/Wb4abXuaEliSy+/xPWQMrEX7Ny0UKkCy1HcMZZjvfTtNRUfpYrx+vpipw==}
     peerDependencies:
       '@vue/composition-api': ^1.1.2
       vue: ^2.6.0 || ^3.3.0
@@ -9841,8 +9841,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-component-type-helpers@3.2.7:
-    resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
+  vue-component-type-helpers@3.2.8:
+    resolution: {integrity: sha512-9689efAXhN/EV86plgkL/XFiJSXhGtWPG6JDboZ+QnjlUWUUQrQ0ILKQtw4iQsuwIwu5k6Aw+JnehDe7161e7A==}
 
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
@@ -11125,6 +11125,12 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
+  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
+    dependencies:
+      '@eslint/core': 0.17.0
+    optionalDependencies:
+      eslint: 9.39.2(jiti@1.21.7)
+
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -11750,6 +11756,31 @@ snapshots:
       - utf-8-validate
       - vue
 
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint/js': 9.39.2
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-flat-config-utils: 0.4.0
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
+      globals: 15.15.0
+      local-pkg: 0.5.1
+      pathe: 1.1.2
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - eslint-import-resolver-node
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
@@ -11775,6 +11806,15 @@ snapshots:
       - supports-color
       - typescript
 
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13245,10 +13285,22 @@ snapshots:
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.27(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.7
+      vue-component-type-helpers: 3.2.8
 
   '@stripe/stripe-js@7.9.0': {}
 
+  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -13360,12 +13412,12 @@ snapshots:
     dependencies:
       remove-accents: 0.5.0
 
-  '@tanstack/query-core@5.90.20': {}
+  '@tanstack/query-core@5.90.7': {}
 
-  '@tanstack/vue-query@5.92.9(vue@3.5.27(typescript@5.9.3))':
+  '@tanstack/vue-query@5.90.7(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@tanstack/match-sorter-utils': 8.19.4
-      '@tanstack/query-core': 5.90.20
+      '@tanstack/query-core': 5.90.7
       '@vue/devtools-api': 6.6.4
       vue: 3.5.27(typescript@5.9.3)
       vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3))
@@ -13661,6 +13713,22 @@ snapshots:
     dependencies:
       '@types/node': 24.12.2
 
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -13677,6 +13745,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -13707,6 +13787,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13877,6 +13969,12 @@ snapshots:
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
+  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-rc.2
+      vite: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vue: 3.5.27(typescript@5.9.3)
+
   '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
@@ -15406,6 +15504,12 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
+  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      find-up-simple: 1.0.1
+
   eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
@@ -15427,6 +15531,23 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      comment-parser: 1.4.5
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 10.1.2
+      semver: 7.7.3
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -15444,6 +15565,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.50.2
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.39.2(jiti@1.21.7)
+      espree: 10.4.0
+      esquery: 1.7.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.3
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
@@ -15469,6 +15606,17 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/regexpp': 4.12.2
+      comment-parser: 1.4.5
+      eslint: 9.39.2(jiti@1.21.7)
+      jsdoc-type-pratt-parser: 4.8.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
   eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -15484,21 +15632,47 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
+  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
+    dependencies:
+      dotenv: 16.0.3
+      eslint: 9.39.2(jiti@1.21.7)
+      turbo: 2.8.2
+
   eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
       eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.8.2
 
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      ci-info: 4.4.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.48.0
+      eslint: 9.39.2(jiti@1.21.7)
+      esquery: 1.7.0
+      globals: 15.15.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.1
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.27
+      regjsparser: 0.10.0
+      semver: 7.7.3
+      strip-indent: 3.0.0
+
   eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -15533,6 +15707,20 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
+  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.3
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -19954,6 +20142,22 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
+  vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.8
+      rolldown: 1.0.0-rc.12
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.12.2
+      esbuild: 0.27.3
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      sass: 1.97.3
+      terser: 5.46.0
+      yaml: 2.8.2
+
   vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -20090,7 +20294,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-component-type-helpers@3.2.7: {}
+  vue-component-type-helpers@3.2.8: {}
 
   vue-confetti-explosion@1.0.2(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -20130,6 +20334,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.7.0
+      lodash: 4.17.23
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
   vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6dae7f6bbc..d21d086c53 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +1,4 @@
 packages:
   - 'apps/*'
   - 'packages/*'
-minimumReleaseAge: 4320 # 3 days
+minimumReleaseAge: 10080 # 7 days
diff --git a/standards/frontend/INTERNATIONALIZATION.md b/standards/frontend/INTERNATIONALIZATION.md
index b87471ef71..e89db99c0f 100644
--- a/standards/frontend/INTERNATIONALIZATION.md
+++ b/standards/frontend/INTERNATIONALIZATION.md
@@ -140,4 +140,4 @@ All i18n utilities come from `@modrinth/ui`:
 ## Reference Examples
 
 - Variables and plurals: `apps/frontend/src/pages/frog.vue`
-- Rich-text with link tags: `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+- Rich-text with link tags: `apps/frontend/src/error.vue`