diff --git a/apps/frontend/.prettierignore b/apps/frontend/.prettierignore
index d4f9ef965..b16cc9509 100644
--- a/apps/frontend/.prettierignore
+++ b/apps/frontend/.prettierignore
@@ -1,6 +1,7 @@
 **/.nuxt
 **/dist
 **/.output
+**/.data
 src/generated/**
 src/locales/**
 src/public/news/feed
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index c79296bce..08c6e15e8 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -7,10 +7,30 @@
 </template>
 <script setup lang="ts">
 import { NotificationPanel, provideNotificationManager } from '@modrinth/ui'
+import { provideApi } from '@modrinth/ui/src/providers/api.ts'
+import { RestModrinthApi } from '@modrinth/utils'
 
 import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
 
 import { FrontendNotificationManager } from './providers/frontend-notifications.ts'
 
 provideNotificationManager(new FrontendNotificationManager())
+
+provideApi(
+	new RestModrinthApi((url: string, options?: object) => {
+		const match = url.match(/^\/v(\d+)\/(.+)$/)
+
+		if (match) {
+			const apiVersion = Number(match[1])
+			const path = match[2]
+
+			return useBaseFetch(path, {
+				...options,
+				apiVersion,
+			}) as Promise<Response>
+		} else {
+			throw new Error('Invalid format')
+		}
+	}),
+)
 </script>
diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss
index 396481ed5..d0010f7aa 100644
--- a/apps/frontend/src/assets/styles/layout.scss
+++ b/apps/frontend/src/assets/styles/layout.scss
@@ -42,6 +42,7 @@
 	padding: 0 1.5rem;
 
 	grid-template:
+		'header'
 		'sidebar'
 		'content'
 		'info'
diff --git a/apps/frontend/src/components/ui/NavStackItem.vue b/apps/frontend/src/components/ui/NavStackItem.vue
index 06146758f..aff9b434e 100644
--- a/apps/frontend/src/components/ui/NavStackItem.vue
+++ b/apps/frontend/src/components/ui/NavStackItem.vue
@@ -1,23 +1,18 @@
 <template>
-	<NuxtLink v-if="link !== null" class="nav-link button-base" :to="link">
-		<div class="nav-content">
-			<slot />
-			<span>{{ label }}</span>
-			<span v-if="beta" class="beta-badge">BETA</span>
-			<span v-if="chevron" class="chevron"><ChevronRightIcon /></span>
-		</div>
+	<NuxtLink v-if="link !== null" :to="link" class="nav-item">
+		<slot />
+		<span>{{ label }}</span>
+		<span v-if="badge" class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand">{{
+			badge
+		}}</span>
+		<span v-if="chevron" class="ml-auto"><ChevronRightIcon /></span>
 	</NuxtLink>
-	<button
-		v-else-if="action"
-		class="nav-link button-base"
-		:class="{ 'danger-button': danger }"
-		@click="action"
-	>
-		<span class="nav-content">
-			<slot />
-			<span>{{ label }}</span>
-			<span v-if="beta" class="beta-badge">BETA</span>
-		</span>
+	<button v-else-if="action" class="nav-item" :class="{ 'danger-button': danger }" @click="action">
+		<slot />
+		<span>{{ label }}</span>
+		<span v-if="badge" class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand">{{
+			badge
+		}}</span>
 	</button>
 	<span v-else>i forgor 💀</span>
 </template>
@@ -42,9 +37,9 @@ export default {
 			required: true,
 			type: String,
 		},
-		beta: {
-			default: false,
-			type: Boolean,
+		badge: {
+			default: null,
+			type: String,
 		},
 		chevron: {
 			default: false,
@@ -59,58 +54,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.nav-link {
-	font-weight: var(--font-weight-bold);
-	background-color: transparent;
-	color: var(--text-color);
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	gap: 0.25rem;
-	box-shadow: none;
-	padding: 0;
-	width: 100%;
-	outline: none;
+.nav-item {
+	@apply flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2 text-left font-semibold text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97];
+}
 
-	:where(.nav-link) {
-		--text-color: var(--color-text);
-		--background-color: var(--color-raised-bg);
-	}
-
-	.nav-content {
-		box-sizing: border-box;
-		padding: 0.5rem 0.75rem;
-		border-radius: var(--size-rounded-sm);
-		display: flex;
-		align-items: center;
-		gap: 0.4rem;
-		flex-grow: 1;
-		background-color: var(--background-color);
-	}
-
-	&:focus-visible {
-		.nav-content {
-			border-radius: 0.25rem;
-		}
-	}
-
-	&.router-link-exact-active {
-		outline: 2px solid transparent;
-		border-radius: 0.25rem;
-
-		.nav-content {
-			color: var(--color-button-text-active);
-			background-color: var(--color-button-bg);
-			box-shadow: none;
-		}
-	}
-
-	.beta-badge {
-		margin: 0;
-	}
-
-	.chevron {
-		margin-left: auto;
-	}
+.router-link-exact-active.nav-item {
+	@apply bg-button-bgSelected text-button-textSelected;
 }
 </style>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
index 772cd765c..23ffaff76 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
@@ -7,17 +7,17 @@
 				</h2>
 				<div class="flex flex-row gap-2">
 					<div class="flex items-center gap-1">
-						<AsteriskIcon class="size-4 text-red" />
+						<AsteriskIcon class="size-4 shrink-0 text-red" />
 						<span class="text-secondary">{{ getFormattedMessage(messages.required) }}</span>
 					</div>
 					|
 					<div class="flex items-center gap-1">
-						<TriangleAlertIcon class="size-4 text-orange" />
+						<TriangleAlertIcon class="size-4 shrink-0 text-orange" />
 						<span class="text-secondary">{{ getFormattedMessage(messages.warning) }}</span>
 					</div>
 					|
 					<div class="flex items-center gap-1">
-						<LightBulbIcon class="size-4 text-purple" />
+						<LightBulbIcon class="size-4 shrink-0 text-purple" />
 						<span class="text-secondary">{{ getFormattedMessage(messages.suggestion) }}</span>
 					</div>
 				</div>
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index 7d6d48272..eee07cad8 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -35,6 +35,8 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	showProjectPageDownloadModalServersPromo: false,
 	showProjectPageCreateServersTooltip: true,
 	showProjectPageQuickServerButton: false,
+	newProjectGeneralSettings: false,
+	newProjectEnvironmentSettings: true,
 	// advancedRendering: true,
 	// externalLinksNewTab: true,
 	// notUsingBlockers: false,
diff --git a/apps/frontend/src/composables/user.js b/apps/frontend/src/composables/user.js
index c4b4b078f..fc04a14c9 100644
--- a/apps/frontend/src/composables/user.js
+++ b/apps/frontend/src/composables/user.js
@@ -77,6 +77,7 @@ export const initUserProjects = async () => {
 	if (auth.user && auth.user.id) {
 		try {
 			user.projects = await useBaseFetch(`user/${auth.user.id}/projects`)
+			user.projectsV3 = await useBaseFetch(`user/${auth.user.id}/projects`, { apiVersion: 3 })
 		} catch (err) {
 			console.error(err)
 		}
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index a47347d79..54d39bf84 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -683,21 +683,231 @@
   "project.about.details.updated": {
     "message": "Updated {date}"
   },
+  "project.actions.create-server": {
+    "message": "Create a server"
+  },
+  "project.actions.create-server-tooltip": {
+    "message": "Create a server"
+  },
+  "project.actions.dont-show-again": {
+    "message": "Don't show again"
+  },
+  "project.actions.review-project": {
+    "message": "Review project"
+  },
+  "project.actions.servers-promo.description": {
+    "message": "Modrinth Servers is the easiest way to play with your friends without hassle!"
+  },
+  "project.actions.servers-promo.monthly": {
+    "message": " / month"
+  },
+  "project.actions.servers-promo.pricing": {
+    "message": "Starting at $5{monthly}"
+  },
+  "project.actions.servers-promo.title": {
+    "message": "Create a server"
+  },
+  "project.collections.create-new": {
+    "message": "Create new collection"
+  },
+  "project.collections.none-found": {
+    "message": "No collections found."
+  },
   "project.description.title": {
     "message": "Description"
   },
+  "project.details.licensed": {
+    "message": "Licensed"
+  },
+  "project.download.game-version": {
+    "message": "Game version: {version}"
+  },
+  "project.download.game-version-error": {
+    "message": "Error: no game versions found"
+  },
+  "project.download.game-version-tooltip": {
+    "message": "{title} is only available for {version}"
+  },
+  "project.download.game-version-unsupported-tooltip": {
+    "message": "{title} does not support {gameVersion} for {platform}"
+  },
+  "project.download.install-with-app": {
+    "message": "Install with Modrinth App"
+  },
+  "project.download.no-app": {
+    "message": "Don't have Modrinth App?"
+  },
+  "project.download.no-versions-available": {
+    "message": "No versions available for {gameVersion} and {platform}."
+  },
+  "project.download.platform": {
+    "message": "Platform: {platform}"
+  },
+  "project.download.platform-error": {
+    "message": "Error: no platforms found"
+  },
+  "project.download.platform-tooltip": {
+    "message": "{title} is only available for {platform}"
+  },
+  "project.download.platform-unsupported-tooltip": {
+    "message": "{title} does not support {platform} for {gameVersion}"
+  },
+  "project.download.search-game-versions": {
+    "message": "Search game versions..."
+  },
+  "project.download.search-game-versions-label": {
+    "message": "Search game versions..."
+  },
+  "project.download.select-game-version": {
+    "message": "Select game version"
+  },
+  "project.download.select-platform": {
+    "message": "Select platform"
+  },
+  "project.download.show-all-versions": {
+    "message": "Show all versions"
+  },
+  "project.download.title": {
+    "message": "Download {title}"
+  },
+  "project.environment.migration.message": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct."
+  },
+  "project.environment.migration.review-button": {
+    "message": "Review environment settings"
+  },
+  "project.environment.migration.title": {
+    "message": "Please review environment metadata"
+  },
+  "project.error.loading": {
+    "message": "Error loading project data{message}"
+  },
+  "project.error.page-not-found": {
+    "message": "The page could not be found"
+  },
+  "project.error.project-not-found": {
+    "message": "Project not found"
+  },
   "project.gallery.title": {
     "message": "Gallery"
   },
+  "project.license.error": {
+    "message": "License text could not be retrieved."
+  },
+  "project.license.loading": {
+    "message": "Loading license text..."
+  },
+  "project.license.title": {
+    "message": "License"
+  },
   "project.moderation.title": {
     "message": "Moderation"
   },
+  "project.navigation.changelog": {
+    "message": "Changelog"
+  },
+  "project.notification.icon-updated.message": {
+    "message": "Your project's icon has been updated."
+  },
+  "project.notification.icon-updated.title": {
+    "message": "Project icon updated"
+  },
+  "project.notification.updated.message": {
+    "message": "Your project has been updated."
+  },
+  "project.notification.updated.title": {
+    "message": "Project updated"
+  },
+  "project.settings.environment.notice.missing-env.description": {
+    "message": "Your project is missing environment metadata, please select the appropriate option below."
+  },
+  "project.settings.environment.notice.missing-env.title": {
+    "message": "Please select an environment for your project"
+  },
+  "project.settings.environment.notice.multiple-environments.description": {
+    "message": "Different versions of your project have different environments selected, so you can't edit them globally at this time."
+  },
+  "project.settings.environment.notice.multiple-environments.title": {
+    "message": "Your project has multiple environments"
+  },
+  "project.settings.environment.notice.review-options.description": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!"
+  },
+  "project.settings.environment.notice.review-options.title": {
+    "message": "Please review the options below"
+  },
+  "project.settings.environment.notice.wrong-project-type.description": {
+    "message": "Only mod or modpack projects can have environment metadata."
+  },
+  "project.settings.environment.notice.wrong-project-type.title": {
+    "message": "This project type does not support environment metadata"
+  },
+  "project.settings.environment.verification.verify-button": {
+    "message": "Verify"
+  },
+  "project.settings.environment.verification.verify-text": {
+    "message": "Verify that this project's environment is set correctly."
+  },
+  "project.settings.general.name.description": {
+    "message": "Avoid prefixes, suffixes, parentheticals, or added descriptions—just the project's actual name."
+  },
+  "project.settings.general.name.placeholder.1": {
+    "message": "e.g. Nether Overhaul 2"
+  },
+  "project.settings.general.name.placeholder.2": {
+    "message": "e.g. Construction Equipment"
+  },
+  "project.settings.general.name.placeholder.3": {
+    "message": "e.g. Better than Caving"
+  },
+  "project.settings.general.name.placeholder.4": {
+    "message": "e.g. Enhanced Portals"
+  },
+  "project.settings.general.name.placeholder.5": {
+    "message": "e.g. Dangerous Mobs"
+  },
+  "project.settings.general.name.title": {
+    "message": "Name"
+  },
+  "project.settings.general.tagline.description": {
+    "message": "Summarize your project in no more than one sentence."
+  },
+  "project.settings.general.tagline.placeholder.1": {
+    "message": "e.g. Overhauls game progression to revolve around the Nether."
+  },
+  "project.settings.general.tagline.placeholder.2": {
+    "message": "e.g. Adds wearable construction gear."
+  },
+  "project.settings.general.tagline.placeholder.3": {
+    "message": "e.g. Adds realistic mineshaft-building mechanics."
+  },
+  "project.settings.general.tagline.placeholder.4": {
+    "message": "e.g. Improves how Nether portals link to each other."
+  },
+  "project.settings.general.tagline.placeholder.5": {
+    "message": "e.g. Adds powerful boss versions of the normal mobs to encounter in the night."
+  },
+  "project.settings.general.tagline.title": {
+    "message": "Tagline"
+  },
+  "project.settings.general.url.title": {
+    "message": "URL"
+  },
+  "project.settings.title": {
+    "message": "Settings"
+  },
+  "project.settings.visit-dashboard": {
+    "message": "Visit projects dashboard"
+  },
   "project.stats.downloads-label": {
     "message": "download{count, plural, one {} other {s}}"
   },
   "project.stats.followers-label": {
     "message": "follower{count, plural, one {} other {s}}"
   },
+  "project.status.archived.message": {
+    "message": "{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project."
+  },
   "project.version.all-versions": {
     "message": "All versions"
   },
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 1615608e1..ef7a98fc4 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -2,118 +2,32 @@
 	<Teleport v-if="flags.projectBackground" to="#fixed-background-teleport">
 		<ProjectBackgroundGradient :project="project" />
 	</Teleport>
-	<div v-if="route.name.startsWith('type-id-settings')" class="normal-page">
-		<div class="normal-page__sidebar">
-			<aside class="universal-card">
-				<Breadcrumbs
-					current-title="Settings"
-					:link-stack="[
-						{
-							href: organization
-								? `/organization/${organization.slug}/settings/projects`
-								: `/dashboard/projects`,
-							label: 'Projects',
-						},
-						{
-							href: `/${project.project_type}/${project.slug ? project.slug : project.id}`,
-							label: project.title,
-							allowTrimming: true,
-						},
-					]"
-				/>
-				<div class="settings-header">
-					<Avatar
-						:src="project.icon_url"
-						:alt="project.title"
-						size="sm"
-						class="settings-header__icon"
-					/>
-					<div class="settings-header__text">
-						<h1 class="wrap-as-needed">{{ project.title }}</h1>
-						<ProjectStatusBadge :status="project.status" />
-					</div>
+	<div v-if="route.name.startsWith('type-id-settings')" class="normal-page no-sidebar">
+		<div class="normal-page__header">
+			<div
+				class="mb-4 flex items-center gap-2 border-0 border-b-[1px] border-solid border-divider pb-4 text-lg font-semibold"
+			>
+				<nuxt-link
+					:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
+					class="flex items-center gap-2 hover:underline hover:brightness-[--hover-brightness]"
+				>
+					<Avatar :src="project.icon_url" size="32px" />
+					{{ project.title }}
+				</nuxt-link>
+				<ChevronRightIcon />
+				<span class="flex grow font-extrabold text-contrast">{{
+					formatMessage(messages.settingsTitle)
+				}}</span>
+				<div class="flex gap-2">
+					<ButtonStyled>
+						<nuxt-link to="/dashboard/projects"
+							><ListIcon /> {{ formatMessage(messages.visitProjectsDashboard) }}
+						</nuxt-link>
+					</ButtonStyled>
 				</div>
-
-				<h2>Project settings</h2>
-				<NavStack>
-					<NavStackItem
-						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
-						label="General"
-					>
-						<SettingsIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/tags`"
-						label="Tags"
-					>
-						<TagsIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/description`"
-						label="Description"
-					>
-						<DescriptionIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/license`"
-						label="License"
-					>
-						<CopyrightIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/links`"
-						label="Links"
-					>
-						<LinksIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/members`"
-						label="Members"
-					>
-						<UsersIcon aria-hidden="true" />
-					</NavStackItem>
-					<h3>View</h3>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/analytics`"
-						label="Analytics"
-						chevron
-					>
-						<ChartIcon aria-hidden="true" />
-					</NavStackItem>
-					<h3>Upload</h3>
-					<NavStackItem
-						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/gallery`"
-						label="Gallery"
-						chevron
-					>
-						<GalleryIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
-						label="Versions"
-						chevron
-					>
-						<VersionIcon aria-hidden="true" />
-					</NavStackItem>
-				</NavStack>
-			</aside>
-		</div>
-
-		<div class="normal-page__content">
+			</div>
 			<ProjectMemberHeader
-				v-if="currentMember"
+				v-if="currentMember && false"
 				:project="project"
 				:versions="versions"
 				:current-member="currentMember"
@@ -127,8 +41,11 @@
 				:auth="auth"
 				:tags="tags"
 			/>
+		</div>
+		<div class="normal-page__content">
 			<NuxtPage
 				v-model:project="project"
+				v-model:project-v3="projectV3"
 				v-model:versions="versions"
 				v-model:featured-versions="featuredVersions"
 				v-model:members="members"
@@ -150,20 +67,27 @@
 		<NewModal ref="settingsModal">
 			<template #title>
 				<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
-				<span class="text-lg font-extrabold text-contrast"> Settings </span>
+				<span class="text-lg font-extrabold text-contrast">
+					{{ formatMessage(messages.settingsTitle) }}
+				</span>
 			</template>
 		</NewModal>
-		<NewModal ref="modalLicense" :header="project.license.name ? project.license.name : 'License'">
+		<NewModal
+			ref="modalLicense"
+			:header="project.license.name ? project.license.name : formatMessage(messages.licenseTitle)"
+		>
 			<template #title>
 				<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" no-shadow />
 				<span class="text-lg font-extrabold text-contrast">
-					{{ project.license.name ? project.license.name : 'License' }}
+					{{ project.license.name ? project.license.name : formatMessage(messages.licenseTitle) }}
 				</span>
 			</template>
 			<div
 				class="markdown-body"
 				v-html="
-					renderString(licenseText).isEmpty ? 'Loading license text...' : renderString(licenseText)
+					renderString(licenseText).isEmpty
+						? formatMessage(messages.loadingLicenseText)
+						: renderString(licenseText)
 				"
 			/>
 		</NewModal>
@@ -203,7 +127,7 @@
 			<template #title>
 				<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
 				<div class="truncate text-lg font-extrabold text-contrast">
-					Download {{ project.title }}
+					{{ formatMessage(messages.downloadTitle, { title: project.title }) }}
 				</div>
 			</template>
 			<template #default>
@@ -222,7 +146,8 @@
 									:href="`modrinth://mod/${project.slug}`"
 									@click="() => installWithApp()"
 								>
-									<ModrinthIcon aria-hidden="true" /> Install with Modrinth App
+									<ModrinthIcon aria-hidden="true" />
+									{{ formatMessage(messages.installWithModrinthApp) }}
 									<ExternalIcon aria-hidden="true" />
 								</a>
 							</ButtonStyled>
@@ -231,14 +156,16 @@
 									class="mt-2 flex justify-center text-brand-blue hover:underline"
 									to="/app"
 								>
-									Don't have Modrinth App?
+									{{ formatMessage(messages.dontHaveModrinthApp) }}
 								</nuxt-link>
 							</Accordion>
 						</div>
 
 						<div class="flex items-center gap-4 px-4">
 							<div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
-							<span class="flex-shrink-0 text-sm font-semibold text-secondary"> or </span>
+							<span class="flex-shrink-0 text-sm font-semibold text-secondary">
+								{{ formatMessage(commonMessages.orLabel) }}
+							</span>
 							<div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
 						</div>
 					</div>
@@ -249,11 +176,16 @@
 								<GameIcon aria-hidden="true" />
 								{{
 									currentGameVersion
-										? `Game version: ${currentGameVersion}`
-										: 'Error: no game versions found'
+										? formatMessage(messages.gameVersionLabel, { version: currentGameVersion })
+										: formatMessage(messages.gameVersionError)
 								}}
 								<InfoIcon
-									v-tooltip="`${project.title} is only available for ${currentGameVersion}`"
+									v-tooltip="
+										formatMessage(messages.gameVersionTooltip, {
+											title: project.title,
+											version: currentGameVersion,
+										})
+									"
 									class="ml-auto size-5"
 								/>
 							</div>
@@ -273,11 +205,15 @@
 							<template #title>
 								<GameIcon aria-hidden="true" />
 								{{
-									currentGameVersion ? `Game version: ${currentGameVersion}` : 'Select game version'
+									currentGameVersion
+										? formatMessage(messages.gameVersionLabel, { version: currentGameVersion })
+										: formatMessage(messages.selectGameVersion)
 								}}
 							</template>
 							<div class="iconified-input mb-2 flex w-full">
-								<label for="game-versions-filtering" hidden>Search game versions...</label>
+								<label for="game-versions-filtering" hidden>{{
+									formatMessage(messages.searchGameVersionsLabel)
+								}}</label>
 								<SearchIcon aria-hidden="true" />
 								<input
 									id="game-versions-filtering"
@@ -285,7 +221,7 @@
 									v-model="versionFilter"
 									type="search"
 									autocomplete="off"
-									placeholder="Search game versions..."
+									:placeholder="formatMessage(messages.searchGameVersions)"
 								/>
 							</div>
 							<ScrollablePanel :class="project.game_versions.length > 4 ? 'h-[15rem]' : ''">
@@ -305,7 +241,11 @@
 									<button
 										v-tooltip="
 											!possibleGameVersions.includes(gameVersion)
-												? `${project.title} does not support ${gameVersion} for ${formatCategory(currentPlatform)}`
+												? formatMessage(messages.gameVersionUnsupportedTooltip, {
+														title: project.title,
+														gameVersion: gameVersion,
+														platform: formatCategory(currentPlatform),
+													})
 												: null
 										"
 										:class="{
@@ -342,7 +282,7 @@
 							<Checkbox
 								v-model="showAllVersions"
 								class="mx-1"
-								:label="`Show all versions`"
+								:label="formatMessage(messages.showAllVersions)"
 								:disabled="!!versionFilter"
 							/>
 						</Accordion>
@@ -353,12 +293,17 @@
 								<WrenchIcon aria-hidden="true" />
 								{{
 									currentPlatform
-										? `Platform: ${formatCategory(currentPlatform)}`
-										: 'Error: no platforms found'
+										? formatMessage(messages.platformLabel, {
+												platform: formatCategory(currentPlatform),
+											})
+										: formatMessage(messages.platformError)
 								}}
 								<InfoIcon
 									v-tooltip="
-										`${project.title} is only available for ${formatCategory(currentPlatform)}`
+										formatMessage(messages.platformTooltip, {
+											title: project.title,
+											platform: formatCategory(currentPlatform),
+										})
 									"
 									class="ml-auto size-5"
 								/>
@@ -380,8 +325,10 @@
 								<WrenchIcon aria-hidden="true" />
 								{{
 									currentPlatform
-										? `Platform: ${formatCategory(currentPlatform)}`
-										: 'Select platform'
+										? formatMessage(messages.platformLabel, {
+												platform: formatCategory(currentPlatform),
+											})
+										: formatMessage(messages.selectPlatform)
 								}}
 							</template>
 							<ScrollablePanel :class="project.loaders.length > 4 ? 'h-[15rem]' : ''">
@@ -393,7 +340,11 @@
 									<button
 										v-tooltip="
 											!possiblePlatforms.includes(platform)
-												? `${project.title} does not support ${formatCategory(platform)} for ${currentGameVersion}`
+												? formatMessage(messages.platformUnsupportedTooltip, {
+														title: project.title,
+														platform: formatCategory(platform),
+														gameVersion: currentGameVersion,
+													})
 												: null
 										"
 										:class="{
@@ -458,8 +409,12 @@
 								!filteredAlpha
 							"
 						>
-							No versions available for {{ currentGameVersion }} and
-							{{ formatCategory(currentPlatform) }}.
+							{{
+								formatMessage(messages.noVersionsAvailable, {
+									gameVersion: currentGameVersion,
+									platform: formatCategory(currentPlatform),
+								})
+							}}
 						</p>
 					</AutomaticAccordion>
 					<ServersPromo
@@ -499,7 +454,8 @@
 								:color="route.name === 'type-id-version-version' ? `standard` : `brand`"
 							>
 								<button @click="(event) => downloadModal.show(event)">
-									<DownloadIcon aria-hidden="true" /> Download
+									<DownloadIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.downloadButton) }}
 								</button>
 							</ButtonStyled>
 						</div>
@@ -511,7 +467,7 @@
 								:color="route.name === 'type-id-version-version' ? `standard` : `brand`"
 							>
 								<button
-									aria-label="Download"
+									:aria-label="formatMessage(commonMessages.downloadButton)"
 									class="flex sm:hidden"
 									@click="(event) => downloadModal.show(event)"
 								>
@@ -529,7 +485,7 @@
 						>
 							<ButtonStyled size="large" circular>
 								<nuxt-link
-									v-tooltip="'Create a server'"
+									v-tooltip="formatMessage(messages.createServerTooltip)"
 									:to="`/servers?project=${project.id}#plan`"
 									@click="
 										() => {
@@ -545,18 +501,18 @@
 								<div class="experimental-styles-within flex max-w-60 flex-col gap-1">
 									<div class="flex items-center justify-between gap-4">
 										<h3 class="m-0 flex items-center gap-2 text-base font-bold text-contrast">
-											Create a server
+											{{ formatMessage(messages.serversPromoTitle) }}
 											<TagItem
 												:style="{
 													'--_color': 'var(--color-brand)',
 													'--_bg-color': 'var(--color-brand-highlight)',
 												}"
-												>New</TagItem
+												>{{ formatMessage(commonMessages.newBadge) }}</TagItem
 											>
 										</h3>
 										<ButtonStyled size="small" circular>
 											<button
-												v-tooltip="`Don't show again`"
+												v-tooltip="formatMessage(messages.dontShowAgain)"
 												@click="
 													() => {
 														flags.showProjectPageCreateServersTooltip = false
@@ -570,11 +526,13 @@
 									</div>
 
 									<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
-										Modrinth Servers is the easiest way to play with your friends without hassle!
+										{{ formatMessage(messages.serversPromoDescription) }}
 									</p>
 
 									<p class="m-0 text-wrap text-sm font-bold text-primary">
-										Starting at $5<span class="text-xs"> / month</span>
+										{{ formatMessage(messages.serversPromoPricing, { monthly: `<span class="text-xs"
+											>${formatMessage(projectPageMessages.monthly)}</span
+										>` }) }}
 									</p>
 								</div>
 							</template>
@@ -589,13 +547,26 @@
 							>
 								<button
 									v-if="auth.user"
-									v-tooltip="following ? `Unfollow` : `Follow`"
-									:aria-label="following ? `Unfollow` : `Follow`"
+									v-tooltip="
+										following
+											? formatMessage(commonMessages.unfollowButton)
+											: formatMessage(commonMessages.followButton)
+									"
+									:aria-label="
+										following
+											? formatMessage(commonMessages.unfollowButton)
+											: formatMessage(commonMessages.followButton)
+									"
 									@click="userFollowProject(project)"
 								>
 									<HeartIcon :fill="following ? 'currentColor' : 'none'" aria-hidden="true" />
 								</button>
-								<nuxt-link v-else v-tooltip="'Follow'" to="/auth/sign-in" aria-label="Follow">
+								<nuxt-link
+									v-else
+									v-tooltip="formatMessage(commonMessages.followButton)"
+									to="/auth/sign-in"
+									:aria-label="formatMessage(commonMessages.followButton)"
+								>
 									<HeartIcon aria-hidden="true" />
 								</nuxt-link>
 							</ButtonStyled>
@@ -603,10 +574,12 @@
 								<PopoutMenu
 									v-if="auth.user"
 									:tooltip="
-										collections.some((x) => x.projects.includes(project.id)) ? 'Saved' : 'Save'
+										collections.some((x) => x.projects.includes(project.id))
+											? formatMessage(commonMessages.savedLabel)
+											: formatMessage(commonMessages.saveButton)
 									"
 									from="top-right"
-									aria-label="Save"
+									:aria-label="formatMessage(commonMessages.saveButton)"
 									:dropdown-id="`${baseId}-save`"
 								>
 									<BookmarkIcon
@@ -621,7 +594,7 @@
 										<input
 											v-model="displayCollectionsSearch"
 											type="text"
-											placeholder="Search collections..."
+											:placeholder="formatMessage(commonMessages.searchPlaceholder)"
 											class="search-input menu-search"
 										/>
 										<div v-if="collections.length > 0" class="collections-list text-primary">
@@ -639,13 +612,14 @@
 										</div>
 
 										<div v-else class="menu-text">
-											<p class="popout-text">No collections found.</p>
+											<p class="popout-text">{{ formatMessage(messages.noCollectionsFound) }}</p>
 										</div>
 										<button
 											class="btn collection-button"
 											@click="(event) => $refs.modal_collection.show(event)"
 										>
-											<PlusIcon aria-hidden="true" /> Create new collection
+											<PlusIcon aria-hidden="true" />
+											{{ formatMessage(messages.createNewCollection) }}
 										</button>
 									</template>
 								</PopoutMenu>
@@ -657,18 +631,27 @@
 								<ButtonStyled size="large" circular>
 									<button
 										v-if="auth.user"
-										v-tooltip="`Follow`"
-										:aria-label="`Follow`"
+										:v-tooltip="formatMessage(commonMessages.followButton)"
+										:aria-label="formatMessage(commonMessages.followButton)"
 										@click="userFollowProject(project)"
 									>
 										<HeartIcon aria-hidden="true" />
 									</button>
-									<nuxt-link v-else v-tooltip="'Follow'" to="/auth/sign-in" aria-label="Follow">
+									<nuxt-link
+										v-else
+										v-tooltip="formatMessage(commonMessages.followButton)"
+										to="/auth/sign-in"
+										:aria-label="formatMessage(commonMessages.followButton)"
+									>
 										<HeartIcon aria-hidden="true" />
 									</nuxt-link>
 								</ButtonStyled>
 								<ButtonStyled size="large" circular>
-									<nuxt-link v-tooltip="'Save'" to="/auth/sign-in" aria-label="Save">
+									<nuxt-link
+										v-tooltip="formatMessage(commonMessages.saveButton)"
+										to="/auth/sign-in"
+										:aria-label="formatMessage(commonMessages.saveButton)"
+									>
 										<BookmarkIcon aria-hidden="true" />
 									</nuxt-link>
 								</ButtonStyled>
@@ -676,7 +659,7 @@
 						</ClientOnly>
 						<ButtonStyled v-if="auth.user && currentMember" size="large" circular>
 							<nuxt-link
-								v-tooltip="'Settings'"
+								v-tooltip="formatMessage(commonMessages.settingsLabel)"
 								:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
 							>
 								<SettingsIcon aria-hidden="true" />
@@ -684,7 +667,7 @@
 						</ButtonStyled>
 						<ButtonStyled size="large" circular type="transparent">
 							<OverflowMenu
-								:tooltip="'More options'"
+								:tooltip="formatMessage(commonMessages.moreOptionsButton)"
 								:options="[
 									{
 										id: 'analytics',
@@ -727,18 +710,27 @@
 									{ id: 'copy-id', action: () => copyId() },
 									{ id: 'copy-permalink', action: () => copyPermalink() },
 								]"
-								aria-label="More options"
+								:aria-label="formatMessage(commonMessages.moreOptionsButton)"
 								:dropdown-id="`${baseId}-more-options`"
 							>
 								<MoreVerticalIcon aria-hidden="true" />
-								<template #analytics> <ChartIcon aria-hidden="true" /> Analytics </template>
-								<template #moderation-checklist>
-									<ScaleIcon aria-hidden="true" /> Review project
+								<template #analytics>
+									<ChartIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.analyticsButton) }}
+								</template>
+								<template #moderation-checklist>
+									<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.reviewProject) }}
+								</template>
+								<template #report>
+									<ReportIcon aria-hidden="true" /> {{ formatMessage(commonMessages.reportButton) }}
+								</template>
+								<template #copy-id>
+									<ClipboardCopyIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.copyIdButton) }}
 								</template>
-								<template #report> <ReportIcon aria-hidden="true" /> Report </template>
-								<template #copy-id> <ClipboardCopyIcon aria-hidden="true" /> Copy ID </template>
 								<template #copy-permalink>
-									<ClipboardCopyIcon aria-hidden="true" /> Copy permanent link
+									<ClipboardCopyIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.copyPermalinkButton) }}
 								</template>
 							</OverflowMenu>
 						</ButtonStyled>
@@ -759,9 +751,26 @@
 					:auth="auth"
 					:tags="tags"
 				/>
+				<Admonition
+					v-if="
+						currentMember &&
+						projectV3.side_types_migration_review_status === 'pending' &&
+						projectV3.environment?.length > 0 &&
+						projectV3.environment[0] !== 'unknown'
+					"
+					type="warning"
+					:header="formatMessage(messages.environmentMigrationTitle)"
+					class="mt-3"
+				>
+					{{ formatMessage(messages.environmentMigrationMessage) }}
+					<ButtonStyled color="orange">
+						<nuxt-link :to="`/project/${project.id}/settings/environment`" class="mt-3 w-fit">
+							<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
+						</nuxt-link>
+					</ButtonStyled>
+				</Admonition>
 				<MessageBanner v-if="project.status === 'archived'" message-type="warning" class="my-4">
-					{{ project.title }} has been archived. {{ project.title }} will not receive any further
-					updates unless the author decides to unarchive the project.
+					{{ formatMessage(messages.archivedMessage, { title: project.title }) }}
 				</MessageBanner>
 			</div>
 
@@ -769,6 +778,7 @@
 				<ProjectSidebarCompatibility
 					:project="project"
 					:tags="tags"
+					:v3-metadata="projectV3"
 					class="card flex-card experimental-styles-within"
 				/>
 				<AdPlaceholder v-if="!auth.user && tags.approvedStatuses.includes(project.status)" />
@@ -799,7 +809,7 @@
 						<div class="details-list__item">
 							<BookTextIcon aria-hidden="true" />
 							<div>
-								Licensed
+								{{ formatMessage(messages.licensedLabel) }}
 								<a
 									v-if="project.license.url"
 									class="text-link hover:underline"
@@ -916,21 +926,19 @@
 
 <script setup>
 import {
-	AlignLeftIcon as DescriptionIcon,
 	BookmarkIcon,
 	BookTextIcon,
 	CalendarIcon,
 	ChartIcon,
 	CheckIcon,
+	ChevronRightIcon,
 	ClipboardCopyIcon,
-	CopyrightIcon,
 	DownloadIcon,
 	ExternalIcon,
 	GameIcon,
 	HeartIcon,
-	ImageIcon as GalleryIcon,
 	InfoIcon,
-	LinkIcon as LinksIcon,
+	ListIcon,
 	ModrinthIcon,
 	MoreVerticalIcon,
 	PlusIcon,
@@ -939,16 +947,16 @@ import {
 	SearchIcon,
 	ServerPlusIcon,
 	SettingsIcon,
-	TagsIcon,
-	UsersIcon,
 	VersionIcon,
 	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
+	Admonition,
 	Avatar,
 	ButtonStyled,
 	Checkbox,
+	commonMessages,
 	injectNotificationManager,
 	NewModal,
 	OverflowMenu,
@@ -959,7 +967,7 @@ import {
 	ProjectSidebarCreators,
 	ProjectSidebarDetails,
 	ProjectSidebarLinks,
-	ProjectStatusBadge,
+	provideProjectPageContext,
 	ScrollablePanel,
 	ServersPromo,
 	TagItem,
@@ -975,12 +983,9 @@ import { navigateTo } from '#app'
 import Accordion from '~/components/ui/Accordion.vue'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import AutomaticAccordion from '~/components/ui/AutomaticAccordion.vue'
-import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
-import NavStack from '~/components/ui/NavStack.vue'
-import NavStackItem from '~/components/ui/NavStackItem.vue'
 import NavTabs from '~/components/ui/NavTabs.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
@@ -990,6 +995,7 @@ import { reportProject } from '~/utils/report-helpers.ts'
 
 const data = useNuxtApp()
 const route = useNativeRoute()
+const router = useRouter()
 const config = useRuntimeConfig()
 const moderationStore = useModerationStore()
 const notifications = injectNotificationManager()
@@ -1082,6 +1088,215 @@ const detailsMessages = defineMessages({
 	},
 })
 
+const messages = defineMessages({
+	archivedMessage: {
+		id: 'project.status.archived.message',
+		defaultMessage:
+			'{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project.',
+	},
+	changelogTab: {
+		id: 'project.navigation.changelog',
+		defaultMessage: 'Changelog',
+	},
+	createNewCollection: {
+		id: 'project.collections.create-new',
+		defaultMessage: 'Create new collection',
+	},
+	createServer: {
+		id: 'project.actions.create-server',
+		defaultMessage: 'Create a server',
+	},
+	createServerTooltip: {
+		id: 'project.actions.create-server-tooltip',
+		defaultMessage: 'Create a server',
+	},
+	descriptionTab: {
+		id: 'project.description.title',
+		defaultMessage: 'Description',
+	},
+	dontHaveModrinthApp: {
+		id: 'project.download.no-app',
+		defaultMessage: "Don't have Modrinth App?",
+	},
+	dontShowAgain: {
+		id: 'project.actions.dont-show-again',
+		defaultMessage: "Don't show again",
+	},
+	downloadTitle: {
+		id: 'project.download.title',
+		defaultMessage: 'Download {title}',
+	},
+	downloadsStat: {
+		id: 'project.stats.downloads-label',
+		defaultMessage: 'download{count, plural, one {} other {s}}',
+	},
+	errorLoadingProject: {
+		id: 'project.error.loading',
+		defaultMessage: 'Error loading project data{message}',
+	},
+	environmentMigrationMessage: {
+		id: 'project.environment.migration.message',
+		defaultMessage:
+			"We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct.",
+	},
+	environmentMigrationTitle: {
+		id: 'project.environment.migration.title',
+		defaultMessage: 'Please review environment metadata',
+	},
+	followersStat: {
+		id: 'project.stats.followers-label',
+		defaultMessage: 'follower{count, plural, one {} other {s}}',
+	},
+	galleryTab: {
+		id: 'project.gallery.title',
+		defaultMessage: 'Gallery',
+	},
+	gameVersionError: {
+		id: 'project.download.game-version-error',
+		defaultMessage: 'Error: no game versions found',
+	},
+	gameVersionLabel: {
+		id: 'project.download.game-version',
+		defaultMessage: 'Game version: {version}',
+	},
+	gameVersionTooltip: {
+		id: 'project.download.game-version-tooltip',
+		defaultMessage: '{title} is only available for {version}',
+	},
+	gameVersionUnsupportedTooltip: {
+		id: 'project.download.game-version-unsupported-tooltip',
+		defaultMessage: '{title} does not support {gameVersion} for {platform}',
+	},
+	installWithModrinthApp: {
+		id: 'project.download.install-with-app',
+		defaultMessage: 'Install with Modrinth App',
+	},
+	licenseErrorMessage: {
+		id: 'project.license.error',
+		defaultMessage: 'License text could not be retrieved.',
+	},
+	licenseTitle: {
+		id: 'project.license.title',
+		defaultMessage: 'License',
+	},
+	licensedLabel: {
+		id: 'project.details.licensed',
+		defaultMessage: 'Licensed',
+	},
+	loadingLicenseText: {
+		id: 'project.license.loading',
+		defaultMessage: 'Loading license text...',
+	},
+	moderationTab: {
+		id: 'project.moderation.title',
+		defaultMessage: 'Moderation',
+	},
+	monthly: {
+		id: 'project.actions.servers-promo.monthly',
+		defaultMessage: ' / month',
+	},
+	noCollectionsFound: {
+		id: 'project.collections.none-found',
+		defaultMessage: 'No collections found.',
+	},
+	noVersionsAvailable: {
+		id: 'project.download.no-versions-available',
+		defaultMessage: 'No versions available for {gameVersion} and {platform}.',
+	},
+	pageNotFound: {
+		id: 'project.error.page-not-found',
+		defaultMessage: 'The page could not be found',
+	},
+	platformError: {
+		id: 'project.download.platform-error',
+		defaultMessage: 'Error: no platforms found',
+	},
+	platformLabel: {
+		id: 'project.download.platform',
+		defaultMessage: 'Platform: {platform}',
+	},
+	platformTooltip: {
+		id: 'project.download.platform-tooltip',
+		defaultMessage: '{title} is only available for {platform}',
+	},
+	platformUnsupportedTooltip: {
+		id: 'project.download.platform-unsupported-tooltip',
+		defaultMessage: '{title} does not support {platform} for {gameVersion}',
+	},
+	projectIconUpdated: {
+		id: 'project.notification.icon-updated.title',
+		defaultMessage: 'Project icon updated',
+	},
+	projectIconUpdatedMessage: {
+		id: 'project.notification.icon-updated.message',
+		defaultMessage: "Your project's icon has been updated.",
+	},
+	projectNotFound: {
+		id: 'project.error.project-not-found',
+		defaultMessage: 'Project not found',
+	},
+	projectUpdated: {
+		id: 'project.notification.updated.title',
+		defaultMessage: 'Project updated',
+	},
+	projectUpdatedMessage: {
+		id: 'project.notification.updated.message',
+		defaultMessage: 'Your project has been updated.',
+	},
+	reviewEnvironmentSettings: {
+		id: 'project.environment.migration.review-button',
+		defaultMessage: 'Review environment settings',
+	},
+	reviewProject: {
+		id: 'project.actions.review-project',
+		defaultMessage: 'Review project',
+	},
+	searchGameVersions: {
+		id: 'project.download.search-game-versions',
+		defaultMessage: 'Search game versions...',
+	},
+	searchGameVersionsLabel: {
+		id: 'project.download.search-game-versions-label',
+		defaultMessage: 'Search game versions...',
+	},
+	selectGameVersion: {
+		id: 'project.download.select-game-version',
+		defaultMessage: 'Select game version',
+	},
+	selectPlatform: {
+		id: 'project.download.select-platform',
+		defaultMessage: 'Select platform',
+	},
+	serversPromoDescription: {
+		id: 'project.actions.servers-promo.description',
+		defaultMessage: 'Modrinth Servers is the easiest way to play with your friends without hassle!',
+	},
+	serversPromoPricing: {
+		id: 'project.actions.servers-promo.pricing',
+		defaultMessage: 'Starting at $5{monthly}',
+	},
+	serversPromoTitle: {
+		id: 'project.actions.servers-promo.title',
+		defaultMessage: 'Create a server',
+	},
+	settingsTitle: {
+		id: 'project.settings.title',
+		defaultMessage: 'Settings',
+	},
+	showAllVersions: {
+		id: 'project.download.show-all-versions',
+		defaultMessage: 'Show all versions',
+	},
+	versionsTab: {
+		id: 'project.versions.title',
+		defaultMessage: 'Versions',
+	},
+	visitProjectsDashboard: {
+		id: 'project.settings.visit-dashboard',
+		defaultMessage: 'Visit projects dashboard',
+	},
+})
+
 const modalLicense = ref(null)
 const licenseText = ref('')
 
@@ -1115,9 +1330,9 @@ async function getLicenseData(event) {
 
 	try {
 		const text = await useBaseFetch(`tag/license/${project.value.license.id}`)
-		licenseText.value = text.body || 'License text could not be retrieved.'
+		licenseText.value = text.body || formatMessage(messages.licenseErrorMessage)
 	} catch {
-		licenseText.value = 'License text could not be retrieved.'
+		licenseText.value = formatMessage(messages.licenseErrorMessage)
 	}
 }
 
@@ -1153,33 +1368,6 @@ const filteredAlpha = computed(() => {
 	)
 })
 
-const messages = defineMessages({
-	downloadsStat: {
-		id: 'project.stats.downloads-label',
-		defaultMessage: 'download{count, plural, one {} other {s}}',
-	},
-	followersStat: {
-		id: 'project.stats.followers-label',
-		defaultMessage: 'follower{count, plural, one {} other {s}}',
-	},
-	descriptionTab: {
-		id: 'project.description.title',
-		defaultMessage: 'Description',
-	},
-	galleryTab: {
-		id: 'project.gallery.title',
-		defaultMessage: 'Gallery',
-	},
-	versionsTab: {
-		id: 'project.versions.title',
-		defaultMessage: 'Versions',
-	},
-	moderationTab: {
-		id: 'project.moderation.title',
-		defaultMessage: 'Moderation',
-	},
-})
-
 const displayCollectionsSearch = ref('')
 const collections = computed(() =>
 	user.value && user.value.collections
@@ -1199,12 +1387,16 @@ if (
 	throw createError({
 		fatal: true,
 		statusCode: 404,
-		message: 'The page could not be found',
+		message: formatMessage(messages.pageNotFound),
 	})
 }
 
+const projectId = ref(route.params.id)
+
 let project,
-	resetProject,
+	projectV3,
+	resetProjectV2,
+	resetProjectV3,
 	allMembers,
 	resetMembers,
 	dependencies,
@@ -1212,21 +1404,23 @@ let project,
 	versions,
 	organization,
 	resetOrganization,
-	projectError,
+	projectV2Error,
+	projectV3Error,
 	membersError,
 	dependenciesError,
 	featuredVersionsError,
 	versionsError
 try {
 	;[
-		{ data: project, error: projectError, refresh: resetProject },
+		{ data: project, error: projectV2Error, refresh: resetProjectV2 },
+		{ data: projectV3, error: projectV3Error, refresh: resetProjectV3 },
 		{ data: allMembers, error: membersError, refresh: resetMembers },
 		{ data: dependencies, error: dependenciesError },
 		{ data: featuredVersions, error: featuredVersionsError },
 		{ data: versions, error: versionsError },
 		{ data: organization, refresh: resetOrganization },
 	] = await Promise.all([
-		useAsyncData(`project/${route.params.id}`, () => useBaseFetch(`project/${route.params.id}`), {
+		useAsyncData(`project/${projectId.value}`, () => useBaseFetch(`project/${projectId.value}`), {
 			transform: (project) => {
 				if (project) {
 					project.actualProjectType = JSON.parse(JSON.stringify(project.project_type))
@@ -1235,11 +1429,28 @@ try {
 						project.loaders,
 						tags.value,
 					)
+					projectId.value = project.id
+					if (route.params.id !== project.slug) {
+						router.replace({
+							name: route.name,
+							params: {
+								...route.params,
+								id: project.slug,
+							},
+							query: route.query,
+							hash: route.hash,
+						})
+					}
 				}
 
 				return project
 			},
 		}),
+		useAsyncData(`projectV3/${route.params.id}`, () =>
+			useBaseFetch(`project/${route.params.id}`, {
+				apiVersion: 3,
+			}),
+		),
 		useAsyncData(
 			`project/${route.params.id}/members`,
 			() => useBaseFetch(`project/${route.params.id}/members`, { apiVersion: 3 }),
@@ -1274,21 +1485,32 @@ try {
 	throw createError({
 		fatal: true,
 		statusCode: err.statusCode ?? 500,
-		message: 'Error loading project data' + (err.message ? `: ${err.message}` : ''),
+		message: formatMessage(messages.errorLoadingProject, {
+			message: err.message ? `: ${err.message}` : '',
+		}),
 	})
 }
 
+async function resetProject() {
+	await resetProjectV2()
+	await resetProjectV3()
+}
+
 function handleError(err, project = false) {
 	if (err.value && err.value.statusCode) {
 		throw createError({
 			fatal: true,
 			statusCode: err.value.statusCode,
-			message: err.value.statusCode === 404 && project ? 'Project not found' : err.value.message,
+			message:
+				err.value.statusCode === 404 && project
+					? formatMessage(messages.projectNotFound)
+					: err.value.message,
 		})
 	}
 }
 
-handleError(projectError, true)
+handleError(projectV2Error, true)
+handleError(projectV3Error)
 handleError(membersError)
 handleError(dependenciesError)
 handleError(featuredVersionsError)
@@ -1298,7 +1520,7 @@ if (!project.value) {
 	throw createError({
 		fatal: true,
 		statusCode: 404,
-		message: 'Project not found',
+		message: formatMessage(messages.projectNotFound),
 	})
 }
 
@@ -1400,7 +1622,7 @@ const description = computed(
 	() =>
 		`${project.value.description} - Download the Minecraft ${projectTypeDisplay.value} ${
 			project.value.title
-		} by ${members.value.find((x) => x.is_owner)?.user?.username || 'a Creator'} on Modrinth`,
+		} by ${members.value.find((x) => x.is_owner)?.user?.username || 'a creator'} on Modrinth`,
 )
 
 const canCreateServerFrom = computed(() => {
@@ -1454,7 +1676,7 @@ async function setProcessing() {
 		project.value.status = 'processing'
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
+			title: formatMessage(commonMessages.errorNotificationTitle),
 			text: err.data ? err.data.description : err,
 			type: 'error',
 		})
@@ -1487,15 +1709,15 @@ async function patchProject(resData, quiet = false) {
 		result = true
 		if (!quiet) {
 			addNotification({
-				title: 'Project updated',
-				text: 'Your project has been updated.',
+				title: formatMessage(messages.projectUpdated),
+				text: formatMessage(messages.projectUpdatedMessage),
 				type: 'success',
 			})
 			window.scrollTo({ top: 0, behavior: 'smooth' })
 		}
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
+			title: formatMessage(commonMessages.errorNotificationTitle),
 			text: err.data ? err.data.description : err,
 			type: 'error',
 		})
@@ -1524,13 +1746,13 @@ async function patchIcon(icon) {
 		await resetProject()
 		result = true
 		addNotification({
-			title: 'Project icon updated',
-			text: "Your project's icon has been updated.",
+			title: formatMessage(messages.projectIconUpdated),
+			text: formatMessage(messages.projectIconUpdatedMessage),
 			type: 'success',
 		})
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
+			title: formatMessage(commonMessages.errorNotificationTitle),
 			text: err.data ? err.data.description : err,
 			type: 'error',
 		})
@@ -1626,7 +1848,7 @@ const navLinks = computed(() => {
 			shown: project.value.gallery.length > 0 || !!currentMember.value,
 		},
 		{
-			label: 'Changelog',
+			label: formatMessage(messages.changelogTab),
 			href: `${projectUrl}/changelog`,
 			shown: versions.value.length > 0,
 		},
@@ -1643,6 +1865,12 @@ const navLinks = computed(() => {
 		},
 	]
 })
+
+provideProjectPageContext({
+	projectV2: project,
+	projectV3,
+	refreshProject: resetProject,
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue
new file mode 100644
index 000000000..7992ba4fa
--- /dev/null
+++ b/apps/frontend/src/pages/[type]/[id]/settings.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import {
+	AlignLeftIcon,
+	BookTextIcon,
+	ChartIcon,
+	GlobeIcon,
+	ImageIcon,
+	InfoIcon,
+	LinkIcon,
+	TagsIcon,
+	UsersIcon,
+	VersionIcon,
+} from '@modrinth/assets'
+import { commonMessages, commonProjectSettingsMessages } from '@modrinth/ui'
+import type { Project, ProjectV3Partial } from '@modrinth/utils'
+import { useVIntl } from '@vintl/vintl'
+
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
+
+const { formatMessage } = useVIntl()
+
+defineProps<{
+	currentMember: any
+	patchProject: any
+	patchIcon: any
+	resetProject: any
+	resetOrganization: any
+	resetMembers: any
+}>()
+
+const flags = useFeatureFlags()
+
+const project = defineModel<Project>('project', { required: true })
+const projectV3 = defineModel<ProjectV3Partial>('projectV3', { required: true })
+const versions = defineModel<any>('versions')
+const featuredVersions = defineModel<any>('featuredVersions')
+const members = defineModel<any>('members')
+const allMembers = defineModel<any>('allMembers')
+const dependencies = defineModel<any>('dependencies')
+const organization = defineModel<any>('organization')
+</script>
+<template>
+	<div class="experimental-styles-within grid grid-cols-[1fr_3fr] gap-4">
+		<div>
+			<aside class="universal-card">
+				<NavStack>
+					<NavStackItem
+						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
+						:label="formatMessage(commonProjectSettingsMessages.general)"
+					>
+						<InfoIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						v-if="flags.newProjectGeneralSettings"
+						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings/general`"
+						:label="formatMessage(commonProjectSettingsMessages.general)"
+						:badge="formatMessage(commonMessages.newBadge)"
+					>
+						<InfoIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						v-if="
+							flags.newProjectEnvironmentSettings &&
+							projectV3.project_types.some((type) => ['mod', 'modpack'].includes(type))
+						"
+						:link="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/environment`"
+						:label="formatMessage(commonProjectSettingsMessages.environment)"
+						:badge="formatMessage(commonMessages.newBadge)"
+					>
+						<GlobeIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						:link="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/tags`"
+						:label="formatMessage(commonProjectSettingsMessages.tags)"
+					>
+						<TagsIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						:link="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/description`"
+						:label="formatMessage(commonProjectSettingsMessages.description)"
+					>
+						<AlignLeftIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						:link="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/license`"
+						:label="formatMessage(commonProjectSettingsMessages.license)"
+					>
+						<BookTextIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						:link="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/links`"
+						:label="formatMessage(commonProjectSettingsMessages.links)"
+					>
+						<LinkIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						:link="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/members`"
+						:label="formatMessage(commonProjectSettingsMessages.members)"
+					>
+						<UsersIcon aria-hidden="true" />
+					</NavStackItem>
+					<h3>{{ formatMessage(commonProjectSettingsMessages.view) }}</h3>
+					<NavStackItem
+						:link="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/analytics`"
+						:label="formatMessage(commonProjectSettingsMessages.analytics)"
+						chevron
+					>
+						<ChartIcon aria-hidden="true" />
+					</NavStackItem>
+					<h3>{{ formatMessage(commonProjectSettingsMessages.upload) }}</h3>
+					<NavStackItem
+						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/gallery`"
+						:label="formatMessage(commonProjectSettingsMessages.gallery)"
+						chevron
+					>
+						<ImageIcon aria-hidden="true" />
+					</NavStackItem>
+					<NavStackItem
+						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
+						:label="formatMessage(commonProjectSettingsMessages.versions)"
+						chevron
+					>
+						<VersionIcon aria-hidden="true" />
+					</NavStackItem>
+				</NavStack>
+			</aside>
+		</div>
+		<div>
+			<NuxtPage
+				v-model:project="project"
+				v-model:project-v3="projectV3"
+				v-model:versions="versions"
+				v-model:featured-versions="featuredVersions"
+				v-model:members="members"
+				v-model:all-members="allMembers"
+				v-model:dependencies="dependencies"
+				v-model:organization="organization"
+				:current-member="currentMember"
+				:patch-project="patchProject"
+				:patch-icon="patchIcon"
+				:reset-project="resetProject"
+				:reset-organization="resetOrganization"
+				:reset-members="resetMembers"
+			/>
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
new file mode 100644
index 000000000..7a1459c2f
--- /dev/null
+++ b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { CheckIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	commonProjectSettingsMessages,
+	injectNotificationManager,
+	injectProjectPageContext,
+	ProjectSettingsEnvSelector,
+	UnsavedChangesPopup,
+	useSavable,
+} from '@modrinth/ui'
+import { injectApi } from '@modrinth/ui/src/providers/api.ts'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+
+const { projectV2, projectV3, refreshProject } = injectProjectPageContext()
+const { handleError } = injectNotificationManager()
+const api = injectApi()
+
+const saving = ref(false)
+
+const supportsEnvironment = computed(() =>
+	projectV3.value.project_types.some((type) => ['mod', 'modpack'].includes(type)),
+)
+
+const needsToVerify = computed(
+	() =>
+		projectV3.value.side_types_migration_review_status === 'pending' &&
+		projectV3.value.environment?.length > 0 &&
+		projectV3.value.environment?.[0] !== 'unknown' &&
+		supportsEnvironment.value,
+)
+
+function getInitialEnv() {
+	return projectV3.value.environment?.length === 1 ? projectV3.value.environment[0] : undefined
+}
+
+const { saved, current, reset, save } = useSavable(
+	() => ({
+		environment: getInitialEnv(),
+		side_types_migration_review_status: projectV3.value.side_types_migration_review_status,
+	}),
+	({ environment, side_types_migration_review_status }) => {
+		saving.value = true
+		side_types_migration_review_status = 'reviewed'
+		api.projects
+			.editV3(projectV2.value.id, { environment, side_types_migration_review_status })
+			.then(() => refreshProject().then(reset))
+			.catch(handleError)
+			.finally(() => (saving.value = false))
+	},
+)
+// Set current to reviewed, which will trigger unsaved changes popup.
+// It should not be possible to save without reviewing it.
+const originalEnv = getInitialEnv()
+if (originalEnv && originalEnv !== 'unknown') {
+	current.value.side_types_migration_review_status = 'reviewed'
+}
+
+const messages = defineMessages({
+	verifyButton: {
+		id: 'project.settings.environment.verification.verify-button',
+		defaultMessage: 'Verify',
+	},
+	verifyLabel: {
+		id: 'project.settings.environment.verification.verify-text',
+		defaultMessage: `Verify that this project's environment is set correctly.`,
+	},
+	wrongProjectTypeTitle: {
+		id: 'project.settings.environment.notice.wrong-project-type.title',
+		defaultMessage: `This project type does not support environment metadata`,
+	},
+	wrongProjectTypeDescription: {
+		id: 'project.settings.environment.notice.wrong-project-type.description',
+		defaultMessage: `Only mod or modpack projects can have environment metadata.`,
+	},
+	missingEnvTitle: {
+		id: 'project.settings.environment.notice.missing-env.title',
+		defaultMessage: `Please select an environment for your project`,
+	},
+	missingEnvDescription: {
+		id: 'project.settings.environment.notice.missing-env.description',
+		defaultMessage: `Your project is missing environment metadata, please select the appropriate option below.`,
+	},
+	multipleEnvironmentsTitle: {
+		id: 'project.settings.environment.notice.multiple-environments.title',
+		defaultMessage: 'Your project has multiple environments',
+	},
+	multipleEnvironmentsDescription: {
+		id: 'project.settings.environment.notice.multiple-environments.description',
+		defaultMessage:
+			"Different versions of your project have different environments selected, so you can't edit them globally at this time.",
+	},
+	reviewOptionsTitle: {
+		id: 'project.settings.environment.notice.review-options.title',
+		defaultMessage: 'Please review the options below',
+	},
+	reviewOptionsDescription: {
+		id: 'project.settings.environment.notice.review-options.description',
+		defaultMessage:
+			"We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!",
+	},
+})
+</script>
+<template>
+	<div>
+		<UnsavedChangesPopup
+			v-if="supportsEnvironment"
+			:original="saved"
+			:modified="current"
+			:saving="saving"
+			:can-reset="!needsToVerify"
+			:text="needsToVerify ? messages.verifyLabel : undefined"
+			:save-label="needsToVerify ? messages.verifyButton : undefined"
+			:save-icon="needsToVerify ? CheckIcon : undefined"
+			@reset="reset"
+			@save="save"
+		/>
+		<div class="card experimental-styles-within">
+			<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">
+				{{ formatMessage(commonProjectSettingsMessages.environment) }}
+			</h2>
+			<Admonition
+				v-if="!supportsEnvironment"
+				type="critical"
+				:header="formatMessage(messages.wrongProjectTypeTitle)"
+				class="mb-3"
+			>
+				{{ formatMessage(messages.wrongProjectTypeDescription) }}
+			</Admonition>
+			<template v-else>
+				<Admonition
+					v-if="
+						!projectV3.environment ||
+						projectV3.environment.length === 0 ||
+						projectV3.environment[0] === 'unknown'
+					"
+					type="critical"
+					:header="formatMessage(messages.missingEnvTitle)"
+					class="mb-3"
+				>
+					{{ formatMessage(messages.missingEnvDescription) }}
+				</Admonition>
+				<Admonition
+					v-else-if="projectV3.environment.length > 1"
+					type="info"
+					:header="formatMessage(messages.multipleEnvironmentsTitle)"
+					class="mb-3"
+				>
+					{{ formatMessage(messages.multipleEnvironmentsDescription) }}
+				</Admonition>
+				<Admonition
+					v-else-if="needsToVerify"
+					type="warning"
+					:header="formatMessage(messages.reviewOptionsTitle)"
+					class="mb-3"
+				>
+					{{ formatMessage(messages.reviewOptionsDescription) }}
+				</Admonition>
+				<ProjectSettingsEnvSelector v-model="current.environment" />
+			</template>
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/general.vue b/apps/frontend/src/pages/[type]/[id]/settings/general.vue
new file mode 100644
index 000000000..0367d4a87
--- /dev/null
+++ b/apps/frontend/src/pages/[type]/[id]/settings/general.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import {
+	IconSelect,
+	injectNotificationManager,
+	injectProjectPageContext,
+	SettingsLabel,
+	UnsavedChangesPopup,
+	useSavable,
+} from '@modrinth/ui'
+import { injectApi } from '@modrinth/ui/src/providers/api.ts'
+import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+
+const { projectV2: project, refreshProject } = injectProjectPageContext()
+const { handleError } = injectNotificationManager()
+const api = injectApi()
+
+const saving = ref(false)
+
+const { saved, current, reset, save } = useSavable(
+	() => ({
+		title: project.value.title,
+		tagline: project.value.description,
+		url: project.value.slug,
+		icon: project.value.icon_url,
+	}),
+	({ title, tagline, url }) => {
+		const data: Record<string, string> = {
+			...(title !== undefined && { title }),
+			...(tagline !== undefined && { description: tagline }),
+			...(url !== undefined && { slug: url }),
+		}
+
+		if (data) {
+			saving.value = true
+			api.projects
+				.edit(project.value.id, { title, description: tagline, slug: url })
+				.then(() => refreshProject().then(reset))
+				.catch(handleError)
+				.finally(() => (saving.value = false))
+		}
+	},
+)
+
+const messages = defineMessages({
+	nameTitle: {
+		id: 'project.settings.general.name.title',
+		defaultMessage: 'Name',
+	},
+	nameDescription: {
+		id: 'project.settings.general.name.description',
+		defaultMessage:
+			"Avoid prefixes, suffixes, parentheticals, or added descriptions—just the project's actual name.",
+	},
+	taglineTitle: {
+		id: 'project.settings.general.tagline.title',
+		defaultMessage: 'Tagline',
+	},
+	taglineDescription: {
+		id: 'project.settings.general.tagline.description',
+		defaultMessage: 'Summarize your project in no more than one sentence.',
+	},
+	urlTitle: {
+		id: 'project.settings.general.url.title',
+		defaultMessage: 'URL',
+	},
+})
+
+const placeholders: { name: MessageDescriptor; tagline: MessageDescriptor }[] = [
+	defineMessages({
+		name: {
+			id: 'project.settings.general.name.placeholder.1',
+			defaultMessage: 'e.g. Nether Overhaul 2',
+		},
+		tagline: {
+			id: 'project.settings.general.tagline.placeholder.1',
+			defaultMessage: 'e.g. Overhauls game progression to revolve around the Nether.',
+		},
+	}),
+	defineMessages({
+		name: {
+			id: 'project.settings.general.name.placeholder.2',
+			defaultMessage: 'e.g. Construction Equipment',
+		},
+		tagline: {
+			id: 'project.settings.general.tagline.placeholder.2',
+			defaultMessage: 'e.g. Adds wearable construction gear.',
+		},
+	}),
+	defineMessages({
+		name: {
+			id: 'project.settings.general.name.placeholder.3',
+			defaultMessage: 'e.g. Better than Caving',
+		},
+		tagline: {
+			id: 'project.settings.general.tagline.placeholder.3',
+			defaultMessage: 'e.g. Adds realistic mineshaft-building mechanics.',
+		},
+	}),
+	defineMessages({
+		name: {
+			id: 'project.settings.general.name.placeholder.4',
+			defaultMessage: 'e.g. Enhanced Portals',
+		},
+		tagline: {
+			id: 'project.settings.general.tagline.placeholder.4',
+			defaultMessage: 'e.g. Improves how Nether portals link to each other.',
+		},
+	}),
+	defineMessages({
+		name: {
+			id: 'project.settings.general.name.placeholder.5',
+			defaultMessage: 'e.g. Dangerous Mobs',
+		},
+		tagline: {
+			id: 'project.settings.general.tagline.placeholder.5',
+			defaultMessage:
+				'e.g. Adds powerful boss versions of the normal mobs to encounter in the night.',
+		},
+	}),
+]
+
+const placeholderIndex = useState<number>('project-settings-random-placeholder', () =>
+	Math.floor(Math.random() * (placeholders.length + 1)),
+)
+
+const placeholder = computed(() => placeholders[placeholderIndex.value] ?? placeholders[0])
+</script>
+<template>
+	<div>
+		<UnsavedChangesPopup
+			:original="saved"
+			:modified="current"
+			:saving="saving"
+			@reset="reset"
+			@save="save"
+		/>
+		<div class="base-card block">
+			<div class="group relative float-end ml-4">
+				<IconSelect v-model="current.icon" />
+			</div>
+			<div>
+				<SettingsLabel
+					id="project-name"
+					:title="messages.nameTitle"
+					:description="messages.nameDescription"
+				/>
+				<div class="flex">
+					<input
+						id="project-name"
+						v-model="current.title"
+						:placeholder="formatMessage(placeholder.name)"
+						autocomplete="off"
+						maxlength="50"
+						class="flex-grow"
+						type="text"
+					/>
+				</div>
+			</div>
+			<div class="mt-4">
+				<SettingsLabel
+					id="project-tagline"
+					:title="messages.taglineTitle"
+					:description="messages.taglineDescription"
+				/>
+				<input
+					id="project-tagline"
+					v-model="current.tagline"
+					:placeholder="formatMessage(placeholder.tagline)"
+					autocomplete="off"
+					maxlength="120"
+					class="w-full"
+					type="text"
+				/>
+			</div>
+			<div class="mt-4">
+				<SettingsLabel id="project-url" :title="messages.urlTitle" />
+				<div class="text-input-wrapper">
+					<div class="text-input-wrapper__before">https://modrinth.com/project/</div>
+					<input
+						id="project-url"
+						v-model="current.url"
+						type="text"
+						maxlength="64"
+						autocomplete="off"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index a763c6bf2..180cb4d10 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -96,6 +96,7 @@
 			</div>
 			<template
 				v-if="
+					!flags.newProjectEnvironmentSettings &&
 					project.versions?.length !== 0 &&
 					project.project_type !== 'resourcepack' &&
 					project.project_type !== 'plugin' &&
@@ -258,15 +259,23 @@ import { formatProjectStatus, formatProjectType } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'
 
 import FileInput from '~/components/ui/FileInput.vue'
+import { useFeatureFlags } from '~/composables/featureFlags.ts'
 
 const { addNotification } = injectNotificationManager()
 
+const flags = useFeatureFlags()
+
 const props = defineProps({
 	project: {
 		type: Object,
 		required: true,
 		default: () => ({}),
 	},
+	projectV3: {
+		type: Object,
+		required: true,
+		default: () => ({}),
+	},
 	currentMember: {
 		type: Object,
 		required: true,
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index a396daa91..02e7b6ade 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -282,9 +282,24 @@
 							<ProjectStatusBadge v-if="project.status" :status="project.status" />
 						</div>
 
-						<div>
+						<div class="flex !flex-row items-center !justify-end gap-2">
+							<ButtonStyled
+								v-if="projectsWithMigrationWarning.includes(project.id)"
+								circular
+								color="orange"
+							>
+								<nuxt-link
+									v-tooltip="'Please review environment metadata'"
+									:to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
+										project.slug ? project.slug : project.id
+									}/settings/environment`"
+								>
+									<TriangleAlertIcon />
+								</nuxt-link>
+							</ButtonStyled>
 							<ButtonStyled circular>
 								<nuxt-link
+									v-tooltip="formatMessage(commonMessages.settingsLabel)"
 									:to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
 										project.slug ? project.slug : project.id
 									}/settings`"
@@ -310,6 +325,7 @@ import {
 	SortAscIcon,
 	SortDescIcon,
 	TrashIcon,
+	TriangleAlertIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
@@ -344,6 +360,7 @@ const { formatMessage } = useVIntl()
 
 const user = await useUser()
 const projects = ref([])
+const projectsWithMigrationWarning = ref([])
 const selectedProjects = ref([])
 const sortBy = ref('Name')
 const descending = ref(false)
@@ -437,6 +454,15 @@ async function bulkEditLinks() {
 await initUserProjects()
 if (user.value?.projects) {
 	projects.value = updateSort(user.value.projects, 'Name', false)
+	user.value?.projectsV3?.forEach((project) => {
+		if (
+			(project.side_types_migration_review_status === 'pending' &&
+				project.project_types.includes('mod')) ||
+			project.project_types.includes('modpack')
+		) {
+			projectsWithMigrationWarning.value.push(project.id)
+		}
+	})
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue
index e207dc847..2ce539803 100644
--- a/apps/frontend/src/pages/news/article/[slug].vue
+++ b/apps/frontend/src/pages/news/article/[slug].vue
@@ -181,7 +181,8 @@ useSeoMeta({
 		padding: 0;
 	}
 
-	ul > li:not(:last-child) {
+	ul,
+	ol > li:not(:last-child) {
 		margin-bottom: 0.5rem;
 	}
 
@@ -203,7 +204,7 @@ useSeoMeta({
 	h1,
 	h2,
 	h3 {
-		margin-bottom: 0.25rem;
+		margin-bottom: 0.5rem;
 	}
 
 	h1 {
diff --git a/apps/frontend/src/public/news/article/new-environments/env-settings.webp b/apps/frontend/src/public/news/article/new-environments/env-settings.webp
new file mode 100644
index 000000000..894ae20e3
Binary files /dev/null and b/apps/frontend/src/public/news/article/new-environments/env-settings.webp differ
diff --git a/apps/frontend/src/public/news/article/new-environments/thumbnail.webp b/apps/frontend/src/public/news/article/new-environments/thumbnail.webp
new file mode 100644
index 000000000..810828e4b
Binary files /dev/null and b/apps/frontend/src/public/news/article/new-environments/thumbnail.webp differ
diff --git a/apps/frontend/src/public/news/feed/articles.json b/apps/frontend/src/public/news/feed/articles.json
index cf27033cd..4b76e3bba 100644
--- a/apps/frontend/src/public/news/feed/articles.json
+++ b/apps/frontend/src/public/news/feed/articles.json
@@ -1,5 +1,12 @@
 {
 	"articles": [
+		{
+			"title": "Creators: Verify Your Environment Metadata",
+			"summary": "We've overhauled the environment metadata on Modrinth, and all creators must verify their settings.",
+			"thumbnail": "https://modrinth.com/news/article/new-environments/thumbnail.webp",
+			"date": "2025-08-28T07:00:00.000Z",
+			"link": "https://modrinth.com/news/article/new-environments"
+		},
 		{
 			"title": "Get a Free Modrinth Server",
 			"summary": "In partnership with Medal.tv, get a 5-day free trial for Modrinth Servers",
diff --git a/apps/frontend/src/public/news/feed/rss.xml b/apps/frontend/src/public/news/feed/rss.xml
index 95bad32c8..1c643f602 100644
--- a/apps/frontend/src/public/news/feed/rss.xml
+++ b/apps/frontend/src/public/news/feed/rss.xml
@@ -4,9 +4,17 @@
         <description><![CDATA[Keep up-to-date on the latest news from Modrinth.]]></description>
         <link>https://modrinth.com/news/</link>
         <generator>@modrinth/blog</generator>
-        <lastBuildDate>Wed, 20 Aug 2025 22:15:38 GMT</lastBuildDate>
+        <lastBuildDate>Thu, 28 Aug 2025 20:59:59 GMT</lastBuildDate>
         <atom:link href="https://modrinth.com/news/feed/rss.xml" rel="self" type="application/rss+xml"/>
         <language><![CDATA[en]]></language>
+        <item>
+            <title><![CDATA[Creators: Verify Your Environment Metadata]]></title>
+            <description><![CDATA[We've overhauled the environment metadata on Modrinth, and all creators must verify their settings.]]></description>
+            <link>https://modrinth.com/news/article/new-environments/</link>
+            <guid isPermaLink="false">https://modrinth.com/news/article/new-environments/</guid>
+            <pubDate>Thu, 28 Aug 2025 07:00:00 GMT</pubDate>
+            <content:encoded>&lt;![CDATA[&lt;p&gt;&lt;strong&gt;Hey creators!&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;Over the years, we&apos;ve taken in lots of feedback regarding how we identify client-side and server-side mods and modpacks on Modrinth. It&apos;s a surprisingly nuanced issue, and careful consideration has finally led us to implementing a new system that fixes many of the issues with the old one.&lt;/p&gt;&lt;h2&gt;What do I need to do?&lt;/h2&gt;&lt;p&gt;If you want to jump right into what you need to do now, just visit your &lt;a href=&quot;/dashboard/projects&quot; rel=&quot;noopener nofollow ugc&quot;&gt;Projects page&lt;/a&gt; and look for any of your mod or modpack projects with an orange warning button next to the settings button. This will take you to the new Environments page in your project&apos;s settings with a bunch of different options for configuring your project&apos;s environment.&lt;/p&gt;&lt;p&gt;&lt;img src=&quot;./env-settings.webp&quot; alt=&quot;Screenshot of the new Modrinth Environment settings page. A warning message explains that the environment system has been updated. Options are listed with radio buttons, including Client-side only (selected), Server-side only, Client and server, and Singleplayer only, each with descriptions and sub-options.&quot;&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;If you do not verify your environments, in the future a warning may display on your project to inform users that the environment information may be outdated or incorrect.&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;Read on to learn more about why we&apos;ve made this change and for a more thorough explanation of each option, in case you find any of them confusing.&lt;/p&gt;&lt;h2&gt;What was wrong with the old system?&lt;/h2&gt;&lt;p&gt;Originally, Modrinth&apos;s environment metadata came in the form of two fields for Client-side and Server-side compatibility. Each option could be set to &apos;Required&apos;, &apos;Optional&apos;, or &apos;Unsupported&apos;. This did the job, but it left some ambiguities and led to many confused creators mis-labeling their mods.&lt;/p&gt;&lt;ol&gt;&lt;li&gt;&lt;strong&gt;Certain combinations of options don&apos;t make logical sense&lt;/strong&gt;, such as both sides being &apos;Unsupported&apos;, or one side being &apos;Optional&apos; and the other being &apos;Unsupported&apos;. To some people, they may feel that since &lt;em&gt;installing&lt;/em&gt; the mod is optional, that might be a logical choice, when users and automated tools might be expecting it to be labeled as &apos;Required&apos;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Terms like &apos;Unsupported&apos; are interpreted differently&lt;/strong&gt; by different people. If something is &apos;Unsupported&apos; on the server-side, does that mean it crashes when installed on a server?&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Most server-side only mods also work in Singleplayer&lt;/strong&gt;, even if they don&apos;t perform any functions on the client-side directly. Some creators of server-sided mods chose to mark client-side as &apos;Optional&apos; because of this, even if it did absolutely nothing on the client-side because in order to use it in Singleplayer, you technically install it on the &amp;quot;client&amp;quot;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Not all real-world combinations even could be represented&lt;/strong&gt; by this old system. There are some mods that only make sense in a singleplayer environment, or some that only make sense on dedicated servers and &lt;em&gt;not&lt;/em&gt; in Singleplayer.&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Conflicting information is out there&lt;/strong&gt; on what exactly these terms meant. The website told creators to treat the client and server as the &lt;em&gt;logical&lt;/em&gt; client and servers, but some other people&apos;s guides and tooling treated them as referring to the &lt;em&gt;physical&lt;/em&gt; client and server. This includes the Modrinth Pack (.mrpack) specification, which confusingly uses the same required/optional/unsupported terminology to refer to the physical sides when defining which files should be installed in the client and server distributions.&lt;/li&gt;&lt;/ol&gt;&lt;h2&gt;How does the new system work?&lt;/h2&gt;&lt;p&gt;The new system enumerates all expected use-cases into distinct options that can be handled in unique ways by tools like launchers, mod managers, and modpack assemblers.&lt;/p&gt;&lt;p&gt;The new options are as follows:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Client-side only&lt;/strong&gt; (&lt;code&gt;client_only&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;All functionality is performed exclusively on the client side. Should be compatible with vanilla servers.&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/modmenu&quot; rel=&quot;noopener nofollow ugc&quot;&gt;Mod Menu&lt;/a&gt;. It only adds a menu to view the list of mods installed on your client, which doesn&apos;t need to be installed on the server.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Server-side only / Works in singleplayer&lt;/strong&gt; (&lt;code&gt;server_only&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;All functionality is performed exclusively on the server side. Should be compatible with vanilla clients if only installed on the server. Also works in Singleplayer.&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/yungs-bridges&quot; rel=&quot;noopener nofollow ugc&quot;&gt;YUNG&apos;s Bridges&lt;/a&gt;. It only adds structures which don&apos;t need to be present on the client-side.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Server-side only / Dedicated server only&lt;/strong&gt; (&lt;code&gt;dedicated_server_only&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;Only runs on a dedicated server, and not in Singleplayer.&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/better-fabric-console&quot; rel=&quot;noopener nofollow ugc&quot;&gt;Better Fabric Console&lt;/a&gt;. Its functionality does not work in singleplayer, because it modifies the dedicated server console.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Client and server / Required on both&lt;/strong&gt; (&lt;code&gt;client_and_server&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;Must be installed on both the client and server.&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/cobblemon&quot; rel=&quot;noopener nofollow ugc&quot;&gt;Cobblemon&lt;/a&gt;. It adds entities, blocks, and items that need to be on both the client and server to work.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Client and server / Optional on client&lt;/strong&gt; (&lt;code&gt;server_only_client_optional&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;Must be on the server, but can be on the client as well for enhanced functionality&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/polymer&quot; rel=&quot;noopener nofollow ugc&quot;&gt;Polymer&lt;/a&gt;. It functions on the server-side, but if installed on the client it can improve the experience when playing on a server running Polymer.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Client and server / Optional on server&lt;/strong&gt; (&lt;code&gt;client_only_server_optional&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;Must be on the client, but can be on the server as well for enhanced functionality&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/appleskin&quot; rel=&quot;noopener nofollow ugc&quot;&gt;AppleSkin&lt;/a&gt;. It functions on the client-side, but if installed on the server it can provide more accurate saturation information.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Client or server / Works best on both&lt;/strong&gt; (&lt;code&gt;client_or_server_prefers_both&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;Can be installed on just the client or just the server to function, but functionality is enhanced when it is on both.&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/no-chat-reports&quot; rel=&quot;noopener nofollow ugc&quot;&gt;No Chat Reports&lt;/a&gt;. The mod functions on just the client or just the server, but each comes with drawbacks. For the best functionality, you need to install it on both.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Client or server / Works the same on either&lt;/strong&gt; (&lt;code&gt;client_or_server&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;Can be installed on just the client or just the server, and either one would enable full functionality. There would be no reason to install it on both.&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/entity-view-distance&quot; rel=&quot;noopener nofollow ugc&quot;&gt;Entity View Distance&lt;/a&gt;. It lets you perform the same functionality of limiting entity view distance on either the client or the server.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Singleplayer only&lt;/strong&gt; (&lt;code&gt;singleplayer_only&lt;/code&gt;)&lt;ul&gt;&lt;li&gt;Only works in Singleplayer, does not function in a Multiplayer environment.&lt;/li&gt;&lt;li&gt;Example: &lt;a href=&quot;/mod/lan-server-properties&quot; rel=&quot;noopener nofollow ugc&quot;&gt;LAN Server Properties&lt;/a&gt;. It modifies a feature that only exists in Singleplayer, the Open to LAN menu.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;What&apos;s next&lt;/h2&gt;&lt;p&gt;This is a great first step towards us fixing many common issues that have been affecting Modrinth users, such as:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;Client-side mods being installed to Modrinth Servers, causing crashes&lt;/li&gt;&lt;li&gt;Modpack exporting in Modrinth App and other launchers using the Modrinth API such as Prism Launcher, MultiMC, and ATLauncher not having accurate and reliable metadata to pull from in order to build universal client and server Modrinth Pack files.&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;However, this is just the first step. Before we can improve the tooling around creating and using modpacks, we need as many Modrinth projects as possible to have accurate metadata.&lt;/p&gt;&lt;p&gt;Currently, the new environment metadata is also only available in the experimental API v3, which is &lt;em&gt;not&lt;/em&gt; intended for general use. When we&apos;re ready, we plan to integrate this metadata into API v2, so that it can be used in production by third parties. For now, developers using the Modrinth API should not worry about these environment changes, just keep them in mind for the future.&lt;/p&gt;&lt;p&gt;Thank you all for continuing to support Modrinth!&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Prospector&lt;/strong&gt;&lt;br&gt;&lt;em&gt;Founding Software Engineer&lt;/em&gt;&lt;/p&gt;]]&gt;</content:encoded>
+        </item>
         <item>
             <title><![CDATA[Get a Free Modrinth Server]]></title>
             <description><![CDATA[In partnership with Medal.tv, get a 5-day free trial for Modrinth Servers]]></description>
diff --git a/packages/blog/articles/new-environments.md b/packages/blog/articles/new-environments.md
new file mode 100644
index 000000000..773300cd1
--- /dev/null
+++ b/packages/blog/articles/new-environments.md
@@ -0,0 +1,80 @@
+---
+title: 'Creators: Verify Your Environment Metadata'
+summary: We've overhauled the environment metadata on Modrinth, and all creators must verify their settings.
+date: 2025-08-28T00:00:00-07:00
+authors: ['Dc7EYhxG']
+---
+
+**Hey creators!**
+
+Over the years, we've taken in lots of feedback regarding how we identify client-side and server-side mods and modpacks on Modrinth. It's a surprisingly nuanced issue, and careful consideration has finally led us to implementing a new system that fixes many of the issues with the old one.
+
+## What do I need to do?
+
+If you want to jump right into what you need to do now, just visit your [Projects page](/dashboard/projects) and look for any of your mod or modpack projects with an orange warning button next to the settings button. This will take you to the new Environments page in your project's settings with a bunch of different options for configuring your project's environment.
+
+![Screenshot of the new Modrinth Environment settings page. A warning message explains that the environment system has been updated. Options are listed with radio buttons, including Client-side only (selected), Server-side only, Client and server, and Singleplayer only, each with descriptions and sub-options.](./env-settings.webp)
+
+**If you do not verify your environments, in the future a warning may display on your project to inform users that the environment information may be outdated or incorrect.**
+
+Read on to learn more about why we've made this change and for a more thorough explanation of each option, in case you find any of them confusing.
+
+## What was wrong with the old system?
+
+Originally, Modrinth's environment metadata came in the form of two fields for Client-side and Server-side compatibility. Each option could be set to 'Required', 'Optional', or 'Unsupported'. This did the job, but it left some ambiguities and led to many confused creators mis-labeling their mods.
+
+1. **Certain combinations of options don't make logical sense**, such as both sides being 'Unsupported', or one side being 'Optional' and the other being 'Unsupported'. To some people, they may feel that since _installing_ the mod is optional, that might be a logical choice, when users and automated tools might be expecting it to be labeled as 'Required'
+2. **Terms like 'Unsupported' are interpreted differently** by different people. If something is 'Unsupported' on the server-side, does that mean it crashes when installed on a server?
+3. **Most server-side only mods also work in Singleplayer**, even if they don't perform any functions on the client-side directly. Some creators of server-sided mods chose to mark client-side as 'Optional' because of this, even if it did absolutely nothing on the client-side because in order to use it in Singleplayer, you technically install it on the "client"
+4. **Not all real-world combinations even could be represented** by this old system. There are some mods that only make sense in a singleplayer environment, or some that only make sense on dedicated servers and _not_ in Singleplayer.
+5. **Conflicting information is out there** on what exactly these terms meant. The website told creators to treat the client and server as the _logical_ client and servers, but some other people's guides and tooling treated them as referring to the _physical_ client and server. This includes the Modrinth Pack (.mrpack) specification, which confusingly uses the same required/optional/unsupported terminology to refer to the physical sides when defining which files should be installed in the client and server distributions.
+
+## How does the new system work?
+
+The new system enumerates all expected use-cases into distinct options that can be handled in unique ways by tools like launchers, mod managers, and modpack assemblers.
+
+The new options are as follows:
+
+- **Client-side only** (`client_only`)
+  - All functionality is performed exclusively on the client side. Should be compatible with vanilla servers.
+  - Example: [Mod Menu](/mod/modmenu). It only adds a menu to view the list of mods installed on your client, which doesn't need to be installed on the server.
+- **Server-side only / Works in singleplayer** (`server_only`)
+  - All functionality is performed exclusively on the server side. Should be compatible with vanilla clients if only installed on the server. Also works in Singleplayer.
+  - Example: [YUNG's Bridges](/mod/yungs-bridges). It only adds structures which don't need to be present on the client-side.
+- **Server-side only / Dedicated server only** (`dedicated_server_only`)
+  - Only runs on a dedicated server, and not in Singleplayer.
+  - Example: [Better Fabric Console](/mod/better-fabric-console). Its functionality does not work in singleplayer, because it modifies the dedicated server console.
+- **Client and server / Required on both** (`client_and_server`)
+  - Must be installed on both the client and server.
+  - Example: [Cobblemon](/mod/cobblemon). It adds entities, blocks, and items that need to be on both the client and server to work.
+- **Client and server / Optional on client** (`server_only_client_optional`)
+  - Must be on the server, but can be on the client as well for enhanced functionality
+  - Example: [Polymer](/mod/polymer). It functions on the server-side, but if installed on the client it can improve the experience when playing on a server running Polymer.
+- **Client and server / Optional on server** (`client_only_server_optional`)
+  - Must be on the client, but can be on the server as well for enhanced functionality
+  - Example: [AppleSkin](/mod/appleskin). It functions on the client-side, but if installed on the server it can provide more accurate saturation information.
+- **Client or server / Works best on both** (`client_or_server_prefers_both`)
+  - Can be installed on just the client or just the server to function, but functionality is enhanced when it is on both.
+  - Example: [No Chat Reports](/mod/no-chat-reports). The mod functions on just the client or just the server, but each comes with drawbacks. For the best functionality, you need to install it on both.
+- **Client or server / Works the same on either** (`client_or_server`)
+  - Can be installed on just the client or just the server, and either one would enable full functionality. There would be no reason to install it on both.
+  - Example: [Entity View Distance](/mod/entity-view-distance). It lets you perform the same functionality of limiting entity view distance on either the client or the server.
+- **Singleplayer only** (`singleplayer_only`)
+  - Only works in Singleplayer, does not function in a Multiplayer environment.
+  - Example: [LAN Server Properties](/mod/lan-server-properties). It modifies a feature that only exists in Singleplayer, the Open to LAN menu.
+
+## What's next
+
+This is a great first step towards us fixing many common issues that have been affecting Modrinth users, such as:
+
+- Client-side mods being installed to Modrinth Servers, causing crashes
+- Modpack exporting in Modrinth App and other launchers using the Modrinth API such as Prism Launcher, MultiMC, and ATLauncher not having accurate and reliable metadata to pull from in order to build universal client and server Modrinth Pack files.
+
+However, this is just the first step. Before we can improve the tooling around creating and using modpacks, we need as many Modrinth projects as possible to have accurate metadata.
+
+Currently, the new environment metadata is also only available in the experimental API v3, which is _not_ intended for general use. When we're ready, we plan to integrate this metadata into API v2, so that it can be used in production by third parties. For now, developers using the Modrinth API should not worry about these environment changes, just keep them in mind for the future.
+
+Thank you all for continuing to support Modrinth!
+
+**Prospector**\
+_Founding Software Engineer_
diff --git a/packages/blog/compiled/index.ts b/packages/blog/compiled/index.ts
index 83459bd45..dfb0fb32c 100644
--- a/packages/blog/compiled/index.ts
+++ b/packages/blog/compiled/index.ts
@@ -17,6 +17,7 @@ import { article as modpacks_alpha } from "./modpacks_alpha";
 import { article as modrinth_app_beta } from "./modrinth_app_beta";
 import { article as modrinth_beta } from "./modrinth_beta";
 import { article as modrinth_servers_beta } from "./modrinth_servers_beta";
+import { article as new_environments } from "./new_environments";
 import { article as new_site_beta } from "./new_site_beta";
 import { article as plugins_resource_packs } from "./plugins_resource_packs";
 import { article as pride_campaign_2025 } from "./pride_campaign_2025";
@@ -37,6 +38,7 @@ export const articles = [
   pride_campaign_2025,
   plugins_resource_packs,
   new_site_beta,
+  new_environments,
   modrinth_servers_beta,
   modrinth_beta,
   modrinth_app_beta,
diff --git a/packages/blog/compiled/new_environments.content.ts b/packages/blog/compiled/new_environments.content.ts
new file mode 100644
index 000000000..247df977e
--- /dev/null
+++ b/packages/blog/compiled/new_environments.content.ts
@@ -0,0 +1,2 @@
+// AUTO-GENERATED FILE - DO NOT EDIT
+export const html = `<p><strong>Hey creators!</strong></p><p>Over the years, we've taken in lots of feedback regarding how we identify client-side and server-side mods and modpacks on Modrinth. It's a surprisingly nuanced issue, and careful consideration has finally led us to implementing a new system that fixes many of the issues with the old one.</p><h2>What do I need to do?</h2><p>If you want to jump right into what you need to do now, just visit your <a href="/dashboard/projects" rel="noopener nofollow ugc">Projects page</a> and look for any of your mod or modpack projects with an orange warning button next to the settings button. This will take you to the new Environments page in your project's settings with a bunch of different options for configuring your project's environment.</p><p><img src="./env-settings.webp" alt="Screenshot of the new Modrinth Environment settings page. A warning message explains that the environment system has been updated. Options are listed with radio buttons, including Client-side only (selected), Server-side only, Client and server, and Singleplayer only, each with descriptions and sub-options."></p><p><strong>If you do not verify your environments, in the future a warning may display on your project to inform users that the environment information may be outdated or incorrect.</strong></p><p>Read on to learn more about why we've made this change and for a more thorough explanation of each option, in case you find any of them confusing.</p><h2>What was wrong with the old system?</h2><p>Originally, Modrinth's environment metadata came in the form of two fields for Client-side and Server-side compatibility. Each option could be set to 'Required', 'Optional', or 'Unsupported'. This did the job, but it left some ambiguities and led to many confused creators mis-labeling their mods.</p><ol><li><strong>Certain combinations of options don't make logical sense</strong>, such as both sides being 'Unsupported', or one side being 'Optional' and the other being 'Unsupported'. To some people, they may feel that since <em>installing</em> the mod is optional, that might be a logical choice, when users and automated tools might be expecting it to be labeled as 'Required'</li><li><strong>Terms like 'Unsupported' are interpreted differently</strong> by different people. If something is 'Unsupported' on the server-side, does that mean it crashes when installed on a server?</li><li><strong>Most server-side only mods also work in Singleplayer</strong>, even if they don't perform any functions on the client-side directly. Some creators of server-sided mods chose to mark client-side as 'Optional' because of this, even if it did absolutely nothing on the client-side because in order to use it in Singleplayer, you technically install it on the &quot;client&quot;</li><li><strong>Not all real-world combinations even could be represented</strong> by this old system. There are some mods that only make sense in a singleplayer environment, or some that only make sense on dedicated servers and <em>not</em> in Singleplayer.</li><li><strong>Conflicting information is out there</strong> on what exactly these terms meant. The website told creators to treat the client and server as the <em>logical</em> client and servers, but some other people's guides and tooling treated them as referring to the <em>physical</em> client and server. This includes the Modrinth Pack (.mrpack) specification, which confusingly uses the same required/optional/unsupported terminology to refer to the physical sides when defining which files should be installed in the client and server distributions.</li></ol><h2>How does the new system work?</h2><p>The new system enumerates all expected use-cases into distinct options that can be handled in unique ways by tools like launchers, mod managers, and modpack assemblers.</p><p>The new options are as follows:</p><ul><li><strong>Client-side only</strong> (<code>client_only</code>)<ul><li>All functionality is performed exclusively on the client side. Should be compatible with vanilla servers.</li><li>Example: <a href="/mod/modmenu" rel="noopener nofollow ugc">Mod Menu</a>. It only adds a menu to view the list of mods installed on your client, which doesn't need to be installed on the server.</li></ul></li><li><strong>Server-side only / Works in singleplayer</strong> (<code>server_only</code>)<ul><li>All functionality is performed exclusively on the server side. Should be compatible with vanilla clients if only installed on the server. Also works in Singleplayer.</li><li>Example: <a href="/mod/yungs-bridges" rel="noopener nofollow ugc">YUNG's Bridges</a>. It only adds structures which don't need to be present on the client-side.</li></ul></li><li><strong>Server-side only / Dedicated server only</strong> (<code>dedicated_server_only</code>)<ul><li>Only runs on a dedicated server, and not in Singleplayer.</li><li>Example: <a href="/mod/better-fabric-console" rel="noopener nofollow ugc">Better Fabric Console</a>. Its functionality does not work in singleplayer, because it modifies the dedicated server console.</li></ul></li><li><strong>Client and server / Required on both</strong> (<code>client_and_server</code>)<ul><li>Must be installed on both the client and server.</li><li>Example: <a href="/mod/cobblemon" rel="noopener nofollow ugc">Cobblemon</a>. It adds entities, blocks, and items that need to be on both the client and server to work.</li></ul></li><li><strong>Client and server / Optional on client</strong> (<code>server_only_client_optional</code>)<ul><li>Must be on the server, but can be on the client as well for enhanced functionality</li><li>Example: <a href="/mod/polymer" rel="noopener nofollow ugc">Polymer</a>. It functions on the server-side, but if installed on the client it can improve the experience when playing on a server running Polymer.</li></ul></li><li><strong>Client and server / Optional on server</strong> (<code>client_only_server_optional</code>)<ul><li>Must be on the client, but can be on the server as well for enhanced functionality</li><li>Example: <a href="/mod/appleskin" rel="noopener nofollow ugc">AppleSkin</a>. It functions on the client-side, but if installed on the server it can provide more accurate saturation information.</li></ul></li><li><strong>Client or server / Works best on both</strong> (<code>client_or_server_prefers_both</code>)<ul><li>Can be installed on just the client or just the server to function, but functionality is enhanced when it is on both.</li><li>Example: <a href="/mod/no-chat-reports" rel="noopener nofollow ugc">No Chat Reports</a>. The mod functions on just the client or just the server, but each comes with drawbacks. For the best functionality, you need to install it on both.</li></ul></li><li><strong>Client or server / Works the same on either</strong> (<code>client_or_server</code>)<ul><li>Can be installed on just the client or just the server, and either one would enable full functionality. There would be no reason to install it on both.</li><li>Example: <a href="/mod/entity-view-distance" rel="noopener nofollow ugc">Entity View Distance</a>. It lets you perform the same functionality of limiting entity view distance on either the client or the server.</li></ul></li><li><strong>Singleplayer only</strong> (<code>singleplayer_only</code>)<ul><li>Only works in Singleplayer, does not function in a Multiplayer environment.</li><li>Example: <a href="/mod/lan-server-properties" rel="noopener nofollow ugc">LAN Server Properties</a>. It modifies a feature that only exists in Singleplayer, the Open to LAN menu.</li></ul></li></ul><h2>What's next</h2><p>This is a great first step towards us fixing many common issues that have been affecting Modrinth users, such as:</p><ul><li>Client-side mods being installed to Modrinth Servers, causing crashes</li><li>Modpack exporting in Modrinth App and other launchers using the Modrinth API such as Prism Launcher, MultiMC, and ATLauncher not having accurate and reliable metadata to pull from in order to build universal client and server Modrinth Pack files.</li></ul><p>However, this is just the first step. Before we can improve the tooling around creating and using modpacks, we need as many Modrinth projects as possible to have accurate metadata.</p><p>Currently, the new environment metadata is also only available in the experimental API v3, which is <em>not</em> intended for general use. When we're ready, we plan to integrate this metadata into API v2, so that it can be used in production by third parties. For now, developers using the Modrinth API should not worry about these environment changes, just keep them in mind for the future.</p><p>Thank you all for continuing to support Modrinth!</p><p><strong>Prospector</strong><br><em>Founding Software Engineer</em></p>`;
diff --git a/packages/blog/compiled/new_environments.ts b/packages/blog/compiled/new_environments.ts
new file mode 100644
index 000000000..c672da4e8
--- /dev/null
+++ b/packages/blog/compiled/new_environments.ts
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE - DO NOT EDIT
+export const article = {
+  html: () => import(`./new_environments.content`).then(m => m.html),
+  title: "Creators: Verify Your Environment Metadata",
+  summary: "We've overhauled the environment metadata on Modrinth, and all creators must verify their settings.",
+  date: "2025-08-28T07:00:00.000Z",
+  slug: "new-environments",
+  authors: ["Dc7EYhxG"],
+  thumbnail: true,
+  
+};
diff --git a/packages/blog/public/new-environments/env-settings.webp b/packages/blog/public/new-environments/env-settings.webp
new file mode 100644
index 000000000..894ae20e3
Binary files /dev/null and b/packages/blog/public/new-environments/env-settings.webp differ
diff --git a/packages/blog/public/new-environments/thumbnail.webp b/packages/blog/public/new-environments/thumbnail.webp
new file mode 100644
index 000000000..810828e4b
Binary files /dev/null and b/packages/blog/public/new-environments/thumbnail.webp differ
diff --git a/packages/moderation/src/data/nags/core.ts b/packages/moderation/src/data/nags/core.ts
index ccd1f0cfc..c1f449ca2 100644
--- a/packages/moderation/src/data/nags/core.ts
+++ b/packages/moderation/src/data/nags/core.ts
@@ -224,7 +224,7 @@ export const coreNags: Nag[] = [
 		id: 'select-environments',
 		title: defineMessage({
 			id: 'nags.select-environments.title',
-			defaultMessage: 'Select supported environments',
+			defaultMessage: 'Select environments',
 		}),
 		description: (context: NagContext) => {
 			const { formatMessage } = useVIntl()
@@ -232,7 +232,7 @@ export const coreNags: Nag[] = [
 			return formatMessage(
 				defineMessage({
 					id: 'nags.select-environments.description',
-					defaultMessage: `Select if the {projectType} functions on the client-side and/or server-side.`,
+					defaultMessage: `Select whether the {projectType} functions on the client and/or server-side.`,
 				}),
 				{
 					projectType: formatProjectType(context.project.project_type).toLowerCase(),
@@ -252,12 +252,12 @@ export const coreNags: Nag[] = [
 			)
 		},
 		link: {
-			path: 'settings',
+			path: 'settings/environment',
 			title: defineMessage({
 				id: 'nags.settings.environments.title',
-				defaultMessage: 'Visit general settings',
+				defaultMessage: 'Visit environment settings',
 			}),
-			shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
+			shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-environment',
 		},
 	},
 	{
diff --git a/packages/moderation/src/locales/en-US/index.json b/packages/moderation/src/locales/en-US/index.json
index e1644ed28..a0c9c4b84 100644
--- a/packages/moderation/src/locales/en-US/index.json
+++ b/packages/moderation/src/locales/en-US/index.json
@@ -123,10 +123,10 @@
     "defaultMessage": "Select correct resolution"
   },
   "nags.select-environments.description": {
-    "defaultMessage": "Select if the {projectType} functions on the client-side and/or server-side."
+    "defaultMessage": "Select whether the {projectType} functions on the client and/or server-side."
   },
   "nags.select-environments.title": {
-    "defaultMessage": "Select supported environments"
+    "defaultMessage": "Select environments"
   },
   "nags.select-license.description": {
     "defaultMessage": "Select the license your {projectType} is distributed under."
@@ -144,7 +144,7 @@
     "defaultMessage": "Visit description settings"
   },
   "nags.settings.environments.title": {
-    "defaultMessage": "Visit general settings"
+    "defaultMessage": "Visit environment settings"
   },
   "nags.settings.license.title": {
     "defaultMessage": "Visit license settings"
diff --git a/packages/ui/src/components/base/IconSelect.vue b/packages/ui/src/components/base/IconSelect.vue
new file mode 100644
index 000000000..ce9e570c8
--- /dev/null
+++ b/packages/ui/src/components/base/IconSelect.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { EditIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+
+import { Avatar, OverflowMenu } from '../index'
+
+const { formatMessage } = useVIntl()
+
+const icon = defineModel<string | undefined>()
+const emit = defineEmits<{
+	(e: 'select' | 'reset' | 'remove'): void
+}>()
+
+type IconSelectOption = 'select' | 'replace' | 'reset' | 'remove'
+
+withDefaults(
+	defineProps<{
+		options?: IconSelectOption[]
+	}>(),
+	{
+		options: () => ['select', 'replace', 'reset', 'remove'],
+	},
+)
+
+const messages = defineMessages({
+	editIcon: {
+		id: 'icon-select.edit',
+		defaultMessage: 'Edit icon',
+	},
+	selectIcon: {
+		id: 'icon-select.select',
+		defaultMessage: 'Select icon',
+	},
+	replaceIcon: {
+		id: 'icon-select.replace',
+		defaultMessage: 'Replace icon',
+	},
+	removeIcon: {
+		id: 'icon-select.remove',
+		defaultMessage: 'Remove icon',
+	},
+})
+</script>
+
+<template>
+	<OverflowMenu
+		v-tooltip="formatMessage(messages.editIcon)"
+		class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+		:options="[
+			{
+				id: 'select',
+				action: () => emit('select'),
+			},
+			{
+				id: 'remove',
+				color: 'danger',
+				action: () => emit('remove'),
+				shown: !!icon,
+			},
+		]"
+	>
+		<Avatar :src="icon" size="108px" class="!border-4 group-hover:brightness-75" no-shadow />
+		<div class="absolute right-0 top-0 m-2">
+			<div
+				class="hovering-icon-shadow m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
+			>
+				<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+			</div>
+		</div>
+		<template #select>
+			<UploadIcon />
+			{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+		</template>
+		<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+	</OverflowMenu>
+</template>
diff --git a/packages/ui/src/components/base/LargeRadioButton.vue b/packages/ui/src/components/base/LargeRadioButton.vue
new file mode 100644
index 000000000..1b20fd4f6
--- /dev/null
+++ b/packages/ui/src/components/base/LargeRadioButton.vue
@@ -0,0 +1,22 @@
+<template>
+	<button
+		class="px-4 py-3 text-left border-0 font-medium border-2 border-button-bg border-solid flex gap-2 transition-all cursor-pointer active:scale-[0.98] hover:bg-button-bg hover:brightness-[--hover-brightness] rounded-xl"
+		:class="selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent'"
+		@click="emit('select')"
+	>
+		<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" />
+		<RadioButtonIcon v-else class="h-5 w-5 shrink-0" />
+		<slot />
+	</button>
+</template>
+<script setup lang="ts" generic="T">
+import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+
+const emit = defineEmits<{
+	(e: 'select'): void
+}>()
+
+defineProps<{
+	selected: boolean
+}>()
+</script>
diff --git a/packages/ui/src/components/base/SettingsLabel.vue b/packages/ui/src/components/base/SettingsLabel.vue
new file mode 100644
index 000000000..181892ccc
--- /dev/null
+++ b/packages/ui/src/components/base/SettingsLabel.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { MessageDescriptor } from '@vintl/vintl'
+import { useVIntl } from '@vintl/vintl'
+import { computed } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const props = withDefaults(
+	defineProps<{
+		id?: string
+		title: string | MessageDescriptor
+		description?: string | MessageDescriptor
+	}>(),
+	{
+		id: undefined,
+		description: undefined,
+	},
+)
+
+const formattedTitle = computed(() =>
+	typeof props.title === 'string' ? props.title : formatMessage(props.title),
+)
+const formattedDescription = computed(() =>
+	typeof props.description === 'string'
+		? props.description
+		: props.description
+			? formatMessage(props.description)
+			: undefined,
+)
+</script>
+
+<template>
+	<div class="mb-2">
+		<label v-if="id" :for="id" class="text-lg font-extrabold text-contrast">
+			{{ formattedTitle }}
+		</label>
+		<p v-else class="m-0 text-lg font-extrabold text-contrast">
+			{{ formattedTitle }}
+		</p>
+		<p v-if="formattedDescription" class="text-sm m-0 text-secondary">
+			{{ formattedDescription }}
+		</p>
+	</div>
+</template>
diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue
new file mode 100644
index 000000000..d8fcc5605
--- /dev/null
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts" generic="T">
+import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
+import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { type Component, computed } from 'vue'
+
+import { commonMessages } from '../../utils'
+import ButtonStyled from './ButtonStyled.vue'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+	(e: 'reset' | 'save', event: MouseEvent): void
+}>()
+
+const props = withDefaults(
+	defineProps<{
+		canReset?: boolean
+		original: T
+		modified: Partial<T>
+		saving?: boolean
+		text?: MessageDescriptor | string
+		saveLabel?: MessageDescriptor | string
+		savingLabel?: MessageDescriptor | string
+		saveIcon?: Component
+	}>(),
+	{
+		canReset: true,
+		saving: false,
+		text: () =>
+			defineMessage({
+				id: 'ui.component.unsaved-changes-popup.body',
+				defaultMessage: 'You have unsaved changes.',
+			}),
+		saveLabel: () => commonMessages.saveButton,
+		savingLabel: () => commonMessages.savingButton,
+		saveIcon: SaveIcon,
+	},
+)
+
+const shown = computed(() => {
+	let changed = false
+	for (const key of Object.keys(props.modified)) {
+		if (props.original[key] !== props.modified[key]) {
+			changed = true
+		}
+	}
+	return changed
+})
+
+function localizeIfPossible(message: MessageDescriptor | string) {
+	return typeof message === 'string' ? message : formatMessage(message)
+}
+
+const bodyText = computed(() => localizeIfPossible(props.text))
+const saveText = computed(() =>
+	localizeIfPossible(props.saving ? props.savingLabel : props.saveLabel),
+)
+</script>
+
+<template>
+	<Transition name="pop-in">
+		<div v-if="shown" class="fixed w-full z-10 left-0 bottom-0 p-4">
+			<div
+				class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
+			>
+				<p class="m-0 font-semibold">{{ bodyText }}</p>
+				<div class="ml-auto flex gap-2">
+					<ButtonStyled v-if="canReset" type="transparent">
+						<button :disabled="saving" @click="(e) => emit('reset', e)">
+							<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button :disabled="saving" @click="(e) => emit('save', e)">
+							<SpinnerIcon v-if="saving" class="animate-spin" />
+							<component :is="saveIcon" v-else />
+							{{ saveText }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+.pop-in-enter-active {
+	transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
+}
+
+.pop-in-leave-active {
+	transition: all 0.25s ease;
+}
+
+.pop-in-enter-from {
+	scale: 0.5;
+	translate: 0 10rem;
+	opacity: 0;
+}
+
+.pop-in-leave-to {
+	scale: 0.96;
+	translate: 0 0.25rem;
+	opacity: 0;
+}
+</style>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 5810d5ba6..61268afba 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -22,6 +22,7 @@ export { default as FileInput } from './base/FileInput.vue'
 export type { FilterBarOption } from './base/FilterBar.vue'
 export { default as FilterBar } from './base/FilterBar.vue'
 export { default as HeadingLink } from './base/HeadingLink.vue'
+export { default as IconSelect } from './base/IconSelect.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
@@ -38,6 +39,7 @@ export { default as RadialHeader } from './base/RadialHeader.vue'
 export { default as RadioButtons } from './base/RadioButtons.vue'
 export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
 export { default as ServerNotice } from './base/ServerNotice.vue'
+export { default as SettingsLabel } from './base/SettingsLabel.vue'
 export { default as SimpleBadge } from './base/SimpleBadge.vue'
 export { default as Slider } from './base/Slider.vue'
 export { default as SmartClickable } from './base/SmartClickable.vue'
@@ -46,6 +48,7 @@ export { default as TagItem } from './base/TagItem.vue'
 export { default as TeleportDropdownMenu } from './base/TeleportDropdownMenu.vue'
 export { default as Timeline } from './base/Timeline.vue'
 export { default as Toggle } from './base/Toggle.vue'
+export { default as UnsavedChangesPopup } from './base/UnsavedChangesPopup.vue'
 
 // Branding
 export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
@@ -80,16 +83,7 @@ export { default as NotificationPanel } from './nav/NotificationPanel.vue'
 export { default as PagewideBanner } from './nav/PagewideBanner.vue'
 
 // Project
-export { default as NewProjectCard } from './project/NewProjectCard.vue'
-export { default as ProjectBackgroundGradient } from './project/ProjectBackgroundGradient.vue'
-export { default as ProjectHeader } from './project/ProjectHeader.vue'
-export { default as ProjectPageDescription } from './project/ProjectPageDescription.vue'
-export { default as ProjectPageVersions } from './project/ProjectPageVersions.vue'
-export { default as ProjectSidebarCompatibility } from './project/ProjectSidebarCompatibility.vue'
-export { default as ProjectSidebarCreators } from './project/ProjectSidebarCreators.vue'
-export { default as ProjectSidebarDetails } from './project/ProjectSidebarDetails.vue'
-export { default as ProjectSidebarLinks } from './project/ProjectSidebarLinks.vue'
-export { default as ProjectStatusBadge } from './project/ProjectStatusBadge.vue'
+export * from './project'
 
 // Search
 export { default as BrowseFiltersPanel } from './search/BrowseFiltersPanel.vue'
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index 93360cccb..9365b15aa 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -26,8 +26,17 @@
 				</TagItem>
 			</div>
 		</section>
+		<section v-if="showEnvironments" class="flex flex-col gap-2">
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.environments) }}</h3>
+			<div class="flex flex-wrap gap-1">
+				<TagItem v-for="tag in primaryEnvironmentTags" :key="`environment-tag-${tag.message.id}`">
+					<component :is="tag.icon" />
+					{{ formatMessage(tag.message) }}
+				</TagItem>
+			</div>
+		</section>
 		<section
-			v-if="
+			v-else-if="
 				(project.project_type === 'mod' || project.project_type === 'modpack') &&
 				!(project.client_side === 'unsupported' && project.server_side === 'unsupported') &&
 				!(project.client_side === 'unknown' && project.server_side === 'unknown')
@@ -76,9 +85,10 @@
 </template>
 <script setup lang="ts">
 import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
-import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
+import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
 import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import { defineMessage, defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { type Component, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 import TagItem from '../base/TagItem.vue'
@@ -88,7 +98,9 @@ const router = useRouter()
 
 type EnvironmentValue = 'optional' | 'required' | 'unsupported' | 'unknown'
 
-defineProps<{
+const TYPES_WITH_ENVS = ['mod', 'modpack'] as const
+
+const props = defineProps<{
 	project: {
 		actualProjectType: string
 		project_type: string
@@ -102,23 +114,112 @@ defineProps<{
 		gameVersions: GameVersionTag[]
 		loaders: PlatformTag[]
 	}
+	v3Metadata?: ProjectV3Partial
 }>()
 
+const showEnvironments = computed(
+	() =>
+		TYPES_WITH_ENVS.some((x) => props.v3Metadata?.project_types.includes(x)) &&
+		primaryEnvironment.value,
+)
+
+const primaryEnvironment = computed<EnvironmentV3 | undefined>(() =>
+	props.v3Metadata?.environment?.find((x) => x !== 'unknown'),
+)
+
+type EnvironmentTag = {
+	icon: Component
+	message: MessageDescriptor
+	environments: EnvironmentV3[]
+}
+
+const environmentTags: EnvironmentTag[] = [
+	{
+		icon: ClientIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.client-side`,
+			defaultMessage: 'Client-side',
+		}),
+		environments: [
+			'client_only',
+			'client_only_server_optional',
+			'client_or_server',
+			'client_or_server_prefers_both',
+		],
+	},
+	{
+		icon: ServerIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.server-side`,
+			defaultMessage: 'Server-side',
+		}),
+		environments: [
+			'server_only',
+			'server_only_client_optional',
+			'client_or_server',
+			'client_or_server_prefers_both',
+		],
+	},
+	{
+		icon: ServerIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.dedicated-servers-only`,
+			defaultMessage: 'Dedicated servers only',
+		}),
+		environments: ['dedicated_server_only'],
+	},
+	{
+		icon: UserIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.singleplayer-only`,
+			defaultMessage: 'Singleplayer only',
+		}),
+		environments: ['singleplayer_only'],
+	},
+	{
+		icon: UserIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.singleplayer`,
+			defaultMessage: 'Singleplayer',
+		}),
+		environments: ['server_only'],
+	},
+	{
+		icon: MonitorSmartphoneIcon,
+		message: defineMessage({
+			id: `project.about.compatibility.environments.client-and-server`,
+			defaultMessage: 'Client and server',
+		}),
+		environments: [
+			'client_and_server',
+			'client_only_server_optional',
+			'server_only_client_optional',
+			'client_or_server_prefers_both',
+		],
+	},
+]
+
+const primaryEnvironmentTags = computed(() => {
+	return primaryEnvironment.value
+		? environmentTags.filter((x) => x.environments.includes(primaryEnvironment.value ?? 'unknown'))
+		: []
+})
+
 const messages = defineMessages({
 	title: {
-		id: 'project.about.compatibility.title',
+		id: `project.about.compatibility.title`,
 		defaultMessage: 'Compatibility',
 	},
 	minecraftJava: {
-		id: 'project.about.compatibility.game.minecraftJava',
+		id: `project.about.compatibility.game.minecraftJava`,
 		defaultMessage: 'Minecraft: Java Edition',
 	},
 	platforms: {
-		id: 'project.about.compatibility.platforms',
+		id: `project.about.compatibility.platforms`,
 		defaultMessage: 'Platforms',
 	},
 	environments: {
-		id: 'project.about.compatibility.environments',
+		id: `project.about.compatibility.environments`,
 		defaultMessage: 'Supported environments',
 	},
 })
diff --git a/packages/ui/src/components/project/index.ts b/packages/ui/src/components/project/index.ts
new file mode 100644
index 000000000..0b3418f6e
--- /dev/null
+++ b/packages/ui/src/components/project/index.ts
@@ -0,0 +1,14 @@
+// Settings
+export * from './settings'
+
+// Other
+export { default as NewProjectCard } from './NewProjectCard.vue'
+export { default as ProjectBackgroundGradient } from './ProjectBackgroundGradient.vue'
+export { default as ProjectHeader } from './ProjectHeader.vue'
+export { default as ProjectPageDescription } from './ProjectPageDescription.vue'
+export { default as ProjectPageVersions } from './ProjectPageVersions.vue'
+export { default as ProjectSidebarCompatibility } from './ProjectSidebarCompatibility.vue'
+export { default as ProjectSidebarCreators } from './ProjectSidebarCreators.vue'
+export { default as ProjectSidebarDetails } from './ProjectSidebarDetails.vue'
+export { default as ProjectSidebarLinks } from './ProjectSidebarLinks.vue'
+export { default as ProjectStatusBadge } from './ProjectStatusBadge.vue'
diff --git a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
new file mode 100644
index 000000000..4a4a07381
--- /dev/null
+++ b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import type { EnvironmentV3 } from '@modrinth/utils'
+import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { computed, ref, watch } from 'vue'
+
+import LargeRadioButton from '../../../base/LargeRadioButton.vue'
+
+const { formatMessage } = useVIntl()
+
+const value = defineModel<EnvironmentV3 | undefined>({ required: true })
+
+type EnvironmentRadioOption = {
+	title: MessageDescriptor
+	description?: MessageDescriptor
+}
+
+const OUTER_OPTIONS = {
+	client: {
+		title: defineMessage({
+			id: 'project.settings.environment.client_only.title',
+			defaultMessage: 'Client-side only',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.client_only.description',
+			defaultMessage:
+				'All functionality is done client-side and is compatible with vanilla servers.',
+		}),
+		suboptions: {},
+	},
+	server: {
+		title: defineMessage({
+			id: 'project.settings.environment.server_only.title',
+			defaultMessage: 'Server-side only',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.server_only.description',
+			defaultMessage:
+				'All functionality is done server-side and is compatible with vanilla clients.',
+		}),
+		suboptions: {
+			singleplayer: {
+				title: defineMessage({
+					id: 'project.settings.environment.server_only.supports_singleplayer.title',
+					defaultMessage: 'Works in singleplayer too',
+				}),
+			},
+			dedicated: {
+				title: defineMessage({
+					id: 'project.settings.environment.server_only.dedicated_only.title',
+					defaultMessage: 'Dedicated server only',
+				}),
+			},
+		},
+	},
+	client_and_server: {
+		title: defineMessage({
+			id: 'project.settings.environment.client_and_server.title',
+			defaultMessage: 'Client and server',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.client_and_server.description',
+			defaultMessage:
+				'Has some functionality on both the client and server, even if only partially.',
+		}),
+		suboptions: {
+			required_both: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.required_both.title',
+					defaultMessage: 'Required on both',
+				}),
+			},
+			optional_client: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_client.title',
+					defaultMessage: 'Optional on client',
+				}),
+			},
+			optional_server: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_server.title',
+					defaultMessage: 'Optional on server',
+				}),
+			},
+			optional_both_prefers_both: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_both_prefers_both.title',
+					defaultMessage: 'Optional on both, works best when installed on both sides',
+				}),
+			},
+			optional_both: {
+				title: defineMessage({
+					id: 'project.settings.environment.client_and_server.optional_both.title',
+					defaultMessage: 'Optional on both, works the same if installed on either side',
+				}),
+			},
+		},
+	},
+	singleplayer: {
+		title: defineMessage({
+			id: 'project.settings.environment.singleplayer.title',
+			defaultMessage: 'Singleplayer only',
+		}),
+		description: defineMessage({
+			id: 'project.settings.environment.singleplayer.description',
+			defaultMessage: `Only functions in Singleplayer or when not connected to a Multiplayer server.`,
+		}),
+		suboptions: {},
+	},
+} as const satisfies Record<
+	string,
+	EnvironmentRadioOption & { suboptions: Record<string, EnvironmentRadioOption> }
+>
+type OuterOptionKey = keyof typeof OUTER_OPTIONS
+type SubOptionKey = ValidKeys<(typeof OUTER_OPTIONS)[keyof typeof OUTER_OPTIONS]['suboptions']>
+
+const currentOuterOption = ref<OuterOptionKey>()
+const currentSubOption = ref<SubOptionKey>()
+
+const computedOption = computed<EnvironmentV3>(() => {
+	switch (currentOuterOption.value) {
+		case 'client':
+			return 'client_only'
+		case 'server':
+			switch (currentSubOption.value) {
+				case 'singleplayer':
+					return 'server_only'
+				case 'dedicated':
+					return 'dedicated_server_only'
+				default:
+					return 'unknown'
+			}
+		case 'client_and_server':
+			switch (currentSubOption.value) {
+				case 'required_both':
+					return 'client_and_server'
+				case 'optional_client':
+					return 'server_only_client_optional'
+				case 'optional_server':
+					return 'client_only_server_optional'
+				case 'optional_both_prefers_both':
+					return 'client_or_server_prefers_both'
+				case 'optional_both':
+					return 'client_or_server'
+				default:
+					return 'unknown'
+			}
+		case 'singleplayer':
+			return 'singleplayer_only'
+		default:
+			return 'unknown'
+	}
+})
+
+function loadEnvironmentValues(env?: EnvironmentV3) {
+	switch (env) {
+		case 'client_and_server':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'required_both'
+			break
+		case 'client_only':
+			currentOuterOption.value = 'client'
+			currentSubOption.value = undefined
+			break
+		case 'client_only_server_optional':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_server'
+			break
+		case 'singleplayer_only':
+			currentOuterOption.value = 'singleplayer'
+			currentSubOption.value = undefined
+			break
+		case 'server_only':
+			currentOuterOption.value = 'server'
+			currentSubOption.value = 'singleplayer'
+			break
+		case 'server_only_client_optional':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_client'
+			break
+		case 'dedicated_server_only':
+			currentOuterOption.value = 'server'
+			currentSubOption.value = 'dedicated'
+			break
+		case 'client_or_server':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_both'
+			break
+		case 'client_or_server_prefers_both':
+			currentOuterOption.value = 'client_and_server'
+			currentSubOption.value = 'optional_both_prefers_both'
+			break
+		default:
+			currentOuterOption.value = undefined
+			currentSubOption.value = undefined
+			break
+	}
+}
+
+// Keep parent in sync when local radio selections change
+watch(computedOption, (newValue) => {
+	if (value.value !== newValue) {
+		value.value = newValue
+	}
+})
+
+// Keep local selections in sync when parent model changes
+watch(
+	() => value.value,
+	(newVal) => {
+		loadEnvironmentValues(newVal)
+	},
+	{ immediate: true },
+)
+
+const simulateSave = ref(false)
+</script>
+
+<template>
+	<template
+		v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
+		:key="`env-option-${key}`"
+	>
+		<LargeRadioButton
+			class="!w-full"
+			:class="{ 'mt-2': index > 0 }"
+			:selected="currentOuterOption === key"
+			@select="
+				() => {
+					if (currentOuterOption !== key) {
+						currentSubOption = suboptions ? (Object.keys(suboptions)[0] as SubOptionKey) : undefined
+					}
+					currentOuterOption = key
+					simulateSave = false
+				}
+			"
+		>
+			<span class="flex flex-col">
+				<span>{{ formatMessage(title) }}</span>
+				<span v-if="description" class="text-sm text-secondary">{{
+					formatMessage(description)
+				}}</span>
+			</span>
+		</LargeRadioButton>
+		<div v-if="suboptions" class="pl-8">
+			<LargeRadioButton
+				v-for="(
+					{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
+				) in suboptions"
+				:key="`env-option-${key}-${suboptionKey}`"
+				class="!w-full mt-2"
+				:class="{
+					'opacity-50': currentOuterOption !== key,
+				}"
+				:selected="currentSubOption === suboptionKey"
+				@select="
+					() => {
+						currentOuterOption = key
+						currentSubOption = suboptionKey
+					}
+				"
+			>
+				<span class="flex flex-col">
+					<span>{{ formatMessage(suboptionTitle) }}</span>
+					<span v-if="suboptionDescription" class="text-sm text-secondary">{{
+						formatMessage(suboptionDescription)
+					}}</span>
+				</span>
+			</LargeRadioButton>
+		</div>
+	</template>
+</template>
diff --git a/packages/ui/src/components/project/settings/index.ts b/packages/ui/src/components/project/settings/index.ts
new file mode 100644
index 000000000..dc2fb0c13
--- /dev/null
+++ b/packages/ui/src/components/project/settings/index.ts
@@ -0,0 +1,2 @@
+// Environment
+export { default as ProjectSettingsEnvSelector } from './environment/ProjectSettingsEnvSelector.vue'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index ac9498967..e42d380d4 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1,4 +1,10 @@
 {
+  "badge.new": {
+    "defaultMessage": "New"
+  },
+  "button.analytics": {
+    "defaultMessage": "Analytics"
+  },
   "button.back": {
     "defaultMessage": "Back"
   },
@@ -26,6 +32,12 @@
   "button.edit": {
     "defaultMessage": "Edit"
   },
+  "button.follow": {
+    "defaultMessage": "Follow"
+  },
+  "button.more-options": {
+    "defaultMessage": "More options"
+  },
   "button.next": {
     "defaultMessage": "Next"
   },
@@ -47,12 +59,18 @@
   "button.report": {
     "defaultMessage": "Report"
   },
+  "button.reset": {
+    "defaultMessage": "Reset"
+  },
   "button.save": {
     "defaultMessage": "Save"
   },
   "button.save-changes": {
     "defaultMessage": "Save changes"
   },
+  "button.saving": {
+    "defaultMessage": "Saving"
+  },
   "button.sign-in": {
     "defaultMessage": "Sign in"
   },
@@ -62,6 +80,9 @@
   "button.stop": {
     "defaultMessage": "Stop"
   },
+  "button.unfollow": {
+    "defaultMessage": "Unfollow"
+  },
   "button.upload-image": {
     "defaultMessage": "Upload image"
   },
@@ -83,6 +104,21 @@
   "collection.label.private": {
     "defaultMessage": "Private"
   },
+  "icon-select.edit": {
+    "defaultMessage": "Edit icon"
+  },
+  "icon-select.remove": {
+    "defaultMessage": "Remove icon"
+  },
+  "icon-select.replace": {
+    "defaultMessage": "Replace icon"
+  },
+  "icon-select.select": {
+    "defaultMessage": "Select icon"
+  },
+  "input.search.placeholder": {
+    "defaultMessage": "Search..."
+  },
   "input.view.gallery": {
     "defaultMessage": "Gallery view"
   },
@@ -140,6 +176,9 @@
   "label.notifications": {
     "defaultMessage": "Notifications"
   },
+  "label.or": {
+    "defaultMessage": "or"
+  },
   "label.password": {
     "defaultMessage": "Password"
   },
@@ -152,6 +191,9 @@
   "label.rejected": {
     "defaultMessage": "Rejected"
   },
+  "label.saved": {
+    "defaultMessage": "Saved"
+  },
   "label.scopes": {
     "defaultMessage": "Scopes"
   },
@@ -311,6 +353,24 @@
   "project.about.compatibility.environments": {
     "defaultMessage": "Supported environments"
   },
+  "project.about.compatibility.environments.client-and-server": {
+    "defaultMessage": "Client and server"
+  },
+  "project.about.compatibility.environments.client-side": {
+    "defaultMessage": "Client-side"
+  },
+  "project.about.compatibility.environments.dedicated-servers-only": {
+    "defaultMessage": "Dedicated servers only"
+  },
+  "project.about.compatibility.environments.server-side": {
+    "defaultMessage": "Server-side"
+  },
+  "project.about.compatibility.environments.singleplayer": {
+    "defaultMessage": "Singleplayer"
+  },
+  "project.about.compatibility.environments.singleplayer-only": {
+    "defaultMessage": "Singleplayer only"
+  },
   "project.about.compatibility.game.minecraftJava": {
     "defaultMessage": "Minecraft: Java Edition"
   },
@@ -377,6 +437,87 @@
   "project.about.links.wiki": {
     "defaultMessage": "Visit wiki"
   },
+  "project.settings.analytics.title": {
+    "defaultMessage": "Analytics"
+  },
+  "project.settings.description.title": {
+    "defaultMessage": "Description"
+  },
+  "project.settings.environment.client_and_server.description": {
+    "defaultMessage": "Has some functionality on both the client and server, even if only partially."
+  },
+  "project.settings.environment.client_and_server.optional_both.title": {
+    "defaultMessage": "Optional on both, works the same if installed on either side"
+  },
+  "project.settings.environment.client_and_server.optional_both_prefers_both.title": {
+    "defaultMessage": "Optional on both, works best when installed on both sides"
+  },
+  "project.settings.environment.client_and_server.optional_client.title": {
+    "defaultMessage": "Optional on client"
+  },
+  "project.settings.environment.client_and_server.optional_server.title": {
+    "defaultMessage": "Optional on server"
+  },
+  "project.settings.environment.client_and_server.required_both.title": {
+    "defaultMessage": "Required on both"
+  },
+  "project.settings.environment.client_and_server.title": {
+    "defaultMessage": "Client and server"
+  },
+  "project.settings.environment.client_only.description": {
+    "defaultMessage": "All functionality is done client-side and is compatible with vanilla servers."
+  },
+  "project.settings.environment.client_only.title": {
+    "defaultMessage": "Client-side only"
+  },
+  "project.settings.environment.server_only.dedicated_only.title": {
+    "defaultMessage": "Dedicated server only"
+  },
+  "project.settings.environment.server_only.description": {
+    "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
+  },
+  "project.settings.environment.server_only.supports_singleplayer.title": {
+    "defaultMessage": "Works in singleplayer too"
+  },
+  "project.settings.environment.server_only.title": {
+    "defaultMessage": "Server-side only"
+  },
+  "project.settings.environment.singleplayer.description": {
+    "defaultMessage": "Only functions in Singleplayer or when not connected to a Multiplayer server."
+  },
+  "project.settings.environment.singleplayer.title": {
+    "defaultMessage": "Singleplayer only"
+  },
+  "project.settings.environment.title": {
+    "defaultMessage": "Environment"
+  },
+  "project.settings.gallery.title": {
+    "defaultMessage": "Gallery"
+  },
+  "project.settings.general.title": {
+    "defaultMessage": "General"
+  },
+  "project.settings.license.title": {
+    "defaultMessage": "License"
+  },
+  "project.settings.links.title": {
+    "defaultMessage": "Links"
+  },
+  "project.settings.members.title": {
+    "defaultMessage": "Members"
+  },
+  "project.settings.tags.title": {
+    "defaultMessage": "Tags"
+  },
+  "project.settings.upload.title": {
+    "defaultMessage": "Upload"
+  },
+  "project.settings.versions.title": {
+    "defaultMessage": "Versions"
+  },
+  "project.settings.view.title": {
+    "defaultMessage": "View"
+  },
   "project.versions.channel.alpha.symbol": {
     "defaultMessage": "A"
   },
@@ -619,5 +760,8 @@
   },
   "tooltip.date-at-time": {
     "defaultMessage": "{date, date, long} at {time, time, short}"
+  },
+  "ui.component.unsaved-changes-popup.body": {
+    "defaultMessage": "You have unsaved changes."
   }
 }
diff --git a/packages/ui/src/providers/api.ts b/packages/ui/src/providers/api.ts
new file mode 100644
index 000000000..b808b2a0e
--- /dev/null
+++ b/packages/ui/src/providers/api.ts
@@ -0,0 +1,5 @@
+import type { ModrinthApi } from '@modrinth/utils'
+
+import { createContext } from '.'
+
+export const [injectApi, provideApi] = createContext<ModrinthApi>('root', 'apiContext')
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index 57c97091d..646841b90 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -78,4 +78,5 @@ export function createContext<ContextValue>(
 	return [injectContext, provideContext] as const
 }
 
+export * from './project-page'
 export * from './web-notifications'
diff --git a/packages/ui/src/providers/project-page.ts b/packages/ui/src/providers/project-page.ts
new file mode 100644
index 000000000..965efb160
--- /dev/null
+++ b/packages/ui/src/providers/project-page.ts
@@ -0,0 +1,13 @@
+import type { Project, ProjectV3Partial } from '@modrinth/utils'
+import type { Ref } from 'vue'
+
+import { createContext } from '.'
+
+export interface ProjectPageContext {
+	projectV2: Ref<Project>
+	projectV3: Ref<ProjectV3Partial>
+	refreshProject: () => Promise<void>
+}
+
+export const [injectProjectPageContext, provideProjectPageContext] =
+	createContext<ProjectPageContext>('root', 'projectPageContext')
diff --git a/packages/ui/src/types.d.ts b/packages/ui/src/types.d.ts
new file mode 100644
index 000000000..1afa17972
--- /dev/null
+++ b/packages/ui/src/types.d.ts
@@ -0,0 +1,2 @@
+type NonEmptyObject<T> = T extends object ? (keyof T extends never ? never : T) : never
+type ValidKeys<T> = NonEmptyObject<T> extends infer O ? (O extends object ? keyof O : never) : never
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index aaa1cb85f..10b037d95 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -1,14 +1,26 @@
 import { defineMessages } from '@vintl/vintl'
 
 export const commonMessages = defineMessages({
+	analyticsButton: {
+		id: 'button.analytics',
+		defaultMessage: 'Analytics',
+	},
 	allProjectType: {
 		id: 'project-type.all',
 		defaultMessage: 'All',
 	},
+	backButton: {
+		id: 'button.back',
+		defaultMessage: 'Back',
+	},
 	cancelButton: {
 		id: 'button.cancel',
 		defaultMessage: 'Cancel',
 	},
+	changesSavedLabel: {
+		id: 'label.changes-saved',
+		defaultMessage: 'Changes saved',
+	},
 	collectionsLabel: {
 		id: 'label.collections',
 		defaultMessage: 'Collections',
@@ -17,14 +29,6 @@ export const commonMessages = defineMessages({
 		id: 'button.continue',
 		defaultMessage: 'Continue',
 	},
-	nextButton: {
-		id: 'button.next',
-		defaultMessage: 'Next',
-	},
-	backButton: {
-		id: 'button.back',
-		defaultMessage: 'Back',
-	},
 	copyIdButton: {
 		id: 'button.copy-id',
 		defaultMessage: 'Copy ID',
@@ -33,10 +37,6 @@ export const commonMessages = defineMessages({
 		id: 'button.copy-permalink',
 		defaultMessage: 'Copy permanent link',
 	},
-	changesSavedLabel: {
-		id: 'label.changes-saved',
-		defaultMessage: 'Changes saved',
-	},
 	createAProjectButton: {
 		id: 'button.create-a-project',
 		defaultMessage: 'Create a project',
@@ -81,6 +81,10 @@ export const commonMessages = defineMessages({
 		id: 'notification.error.title',
 		defaultMessage: 'An error occurred',
 	},
+	followButton: {
+		id: 'button.follow',
+		defaultMessage: 'Follow',
+	},
 	followedProjectsLabel: {
 		id: 'label.followed-projects',
 		defaultMessage: 'Followed projects',
@@ -105,10 +109,38 @@ export const commonMessages = defineMessages({
 		id: 'label.moderation',
 		defaultMessage: 'Moderation',
 	},
+	moreOptionsButton: {
+		id: 'button.more-options',
+		defaultMessage: 'More options',
+	},
+	newBadge: {
+		id: 'badge.new',
+		defaultMessage: 'New',
+	},
+	nextButton: {
+		id: 'button.next',
+		defaultMessage: 'Next',
+	},
 	notificationsLabel: {
 		id: 'label.notifications',
 		defaultMessage: 'Notifications',
 	},
+	openFolderButton: {
+		id: 'button.open-folder',
+		defaultMessage: 'Open folder',
+	},
+	orLabel: {
+		id: 'label.or',
+		defaultMessage: 'or',
+	},
+	passwordLabel: {
+		id: 'label.password',
+		defaultMessage: 'Password',
+	},
+	paymentMethodCardDisplay: {
+		id: 'omorphia.component.purchase_modal.payment_method_card_display',
+		defaultMessage: '{card_brand} ending in {last_four}',
+	},
 	playButton: {
 		id: 'button.play',
 		defaultMessage: 'Play',
@@ -137,17 +169,17 @@ export const commonMessages = defineMessages({
 		id: 'button.remove',
 		defaultMessage: 'Remove',
 	},
+	removeImageButton: {
+		id: 'button.remove-image',
+		defaultMessage: 'Remove image',
+	},
 	reportButton: {
 		id: 'button.report',
 		defaultMessage: 'Report',
 	},
-	openFolderButton: {
-		id: 'button.open-folder',
-		defaultMessage: 'Open folder',
-	},
-	passwordLabel: {
-		id: 'label.password',
-		defaultMessage: 'Password',
+	resetButton: {
+		id: 'button.reset',
+		defaultMessage: 'Reset',
 	},
 	saveButton: {
 		id: 'button.save',
@@ -157,10 +189,22 @@ export const commonMessages = defineMessages({
 		id: 'button.save-changes',
 		defaultMessage: 'Save changes',
 	},
+	savedLabel: {
+		id: 'label.saved',
+		defaultMessage: 'Saved',
+	},
+	savingButton: {
+		id: 'button.saving',
+		defaultMessage: 'Saving',
+	},
 	scopesLabel: {
 		id: 'label.scopes',
 		defaultMessage: 'Scopes',
 	},
+	searchPlaceholder: {
+		id: 'input.search.placeholder',
+		defaultMessage: 'Search...',
+	},
 	serverLabel: {
 		id: 'label.server',
 		defaultMessage: 'Server',
@@ -193,6 +237,10 @@ export const commonMessages = defineMessages({
 		id: 'label.title',
 		defaultMessage: 'Title',
 	},
+	unfollowButton: {
+		id: 'button.unfollow',
+		defaultMessage: 'Unfollow',
+	},
 	unlistedLabel: {
 		id: 'label.unlisted',
 		defaultMessage: 'Unlisted',
@@ -201,10 +249,6 @@ export const commonMessages = defineMessages({
 		id: 'button.upload-image',
 		defaultMessage: 'Upload image',
 	},
-	removeImageButton: {
-		id: 'button.remove-image',
-		defaultMessage: 'Remove image',
-	},
 	visibilityLabel: {
 		id: 'label.visibility',
 		defaultMessage: 'Visibility',
@@ -213,60 +257,111 @@ export const commonMessages = defineMessages({
 		id: 'label.visit-your-profile',
 		defaultMessage: 'Visit your profile',
 	},
-	paymentMethodCardDisplay: {
-		id: 'omorphia.component.purchase_modal.payment_method_card_display',
-		defaultMessage: '{card_brand} ending in {last_four}',
-	},
 })
 
 export const commonSettingsMessages = defineMessages({
-	appearance: {
-		id: 'settings.appearance.title',
-		defaultMessage: 'Appearance',
-	},
-	language: {
-		id: 'settings.language.title',
-		defaultMessage: 'Language',
-	},
-	profile: {
-		id: 'settings.profile.title',
-		defaultMessage: 'Public profile',
-	},
 	account: {
 		id: 'settings.account.title',
 		defaultMessage: 'Account and security',
 	},
-	authorizedApps: {
-		id: 'settings.authorized-apps.title',
-		defaultMessage: 'Authorized apps',
-	},
-	sessions: {
-		id: 'settings.sessions.title',
-		defaultMessage: 'Sessions',
-	},
-	pats: {
-		id: 'settings.pats.title',
-		defaultMessage: 'Personal access tokens',
+	appearance: {
+		id: 'settings.appearance.title',
+		defaultMessage: 'Appearance',
 	},
 	applications: {
 		id: 'settings.applications.title',
 		defaultMessage: 'Your applications',
 	},
+	authorizedApps: {
+		id: 'settings.authorized-apps.title',
+		defaultMessage: 'Authorized apps',
+	},
 	billing: {
 		id: 'settings.billing.title',
 		defaultMessage: 'Billing and subscriptions',
 	},
+	language: {
+		id: 'settings.language.title',
+		defaultMessage: 'Language',
+	},
+	pats: {
+		id: 'settings.pats.title',
+		defaultMessage: 'Personal access tokens',
+	},
+	profile: {
+		id: 'settings.profile.title',
+		defaultMessage: 'Public profile',
+	},
+	sessions: {
+		id: 'settings.sessions.title',
+		defaultMessage: 'Sessions',
+	},
+})
+
+export const commonProjectSettingsMessages = defineMessages({
+	analytics: {
+		id: 'project.settings.analytics.title',
+		defaultMessage: 'Analytics',
+	},
+	description: {
+		id: 'project.settings.description.title',
+		defaultMessage: 'Description',
+	},
+	environment: {
+		id: 'project.settings.environment.title',
+		defaultMessage: 'Environment',
+	},
+	gallery: {
+		id: 'project.settings.gallery.title',
+		defaultMessage: 'Gallery',
+	},
+	general: {
+		id: 'project.settings.general.title',
+		defaultMessage: 'General',
+	},
+	license: {
+		id: 'project.settings.license.title',
+		defaultMessage: 'License',
+	},
+	links: {
+		id: 'project.settings.links.title',
+		defaultMessage: 'Links',
+	},
+	members: {
+		id: 'project.settings.members.title',
+		defaultMessage: 'Members',
+	},
+	tags: {
+		id: 'project.settings.tags.title',
+		defaultMessage: 'Tags',
+	},
+	upload: {
+		id: 'project.settings.upload.title',
+		defaultMessage: 'Upload',
+	},
+	versions: {
+		id: 'project.settings.versions.title',
+		defaultMessage: 'Versions',
+	},
+	view: {
+		id: 'project.settings.view.title',
+		defaultMessage: 'View',
+	},
 })
 
 export const paymentMethodMessages = defineMessages({
-	visa: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.visa',
-		defaultMessage: 'Visa',
+	amazon_pay: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
+		defaultMessage: 'Amazon Pay',
 	},
 	amex: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.amex',
 		defaultMessage: 'American Express',
 	},
+	cashapp: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
+		defaultMessage: 'Cash App',
+	},
 	diners: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.diners',
 		defaultMessage: 'Diners Club',
@@ -279,29 +374,28 @@ export const paymentMethodMessages = defineMessages({
 		id: 'omorphia.component.purchase_modal.payment_method_type.eftpos',
 		defaultMessage: 'EFTPOS',
 	},
-	jcb: { id: 'omorphia.component.purchase_modal.payment_method_type.jcb', defaultMessage: 'JCB' },
+	jcb: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.jcb',
+		defaultMessage: 'JCB',
+	},
 	mastercard: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.mastercard',
 		defaultMessage: 'MasterCard',
 	},
-	unionpay: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
-		defaultMessage: 'UnionPay',
-	},
 	paypal: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.paypal',
 		defaultMessage: 'PayPal',
 	},
-	cashapp: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
-		defaultMessage: 'Cash App',
-	},
-	amazon_pay: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
-		defaultMessage: 'Amazon Pay',
+	unionpay: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
+		defaultMessage: 'UnionPay',
 	},
 	unknown: {
 		id: 'omorphia.component.purchase_modal.payment_method_type.unknown',
 		defaultMessage: 'Unknown payment method',
 	},
+	visa: {
+		id: 'omorphia.component.purchase_modal.payment_method_type.visa',
+		defaultMessage: 'Visa',
+	},
 })
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 7c8c645cb..2a66710e4 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './common-messages'
 export * from './game-modes'
 export * from './notices'
+export * from './savable'
 export * from './search'
diff --git a/packages/ui/src/utils/savable.ts b/packages/ui/src/utils/savable.ts
new file mode 100644
index 000000000..886b9a1d4
--- /dev/null
+++ b/packages/ui/src/utils/savable.ts
@@ -0,0 +1,38 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+export function useSavable<T extends Record<string, unknown>>(
+	data: () => T,
+	save: (changes: Partial<T>) => void,
+): {
+	saved: ComputedRef<T>
+	current: Ref<T>
+	reset: () => void
+	save: () => void
+} {
+	const savedValues = computed(data)
+	const currentValues = ref({ ...data() }) as Ref<T>
+	const changes = computed<Partial<T>>(() => {
+		const values: Partial<T> = {}
+		const keys = Object.keys(currentValues.value) as (keyof T)[]
+		for (const key of keys) {
+			if (savedValues.value[key] !== currentValues.value[key]) {
+				values[key] = currentValues.value[key]
+			}
+		}
+		return values
+	})
+
+	const reset = () => {
+		currentValues.value = data()
+	}
+
+	const saveInternal = () => (changes.value ? save(changes.value) : {})
+
+	return {
+		saved: savedValues,
+		current: currentValues,
+		reset,
+		save: saveInternal,
+	}
+}
diff --git a/packages/utils/api/default_impl.ts b/packages/utils/api/default_impl.ts
new file mode 100644
index 000000000..79981d2e6
--- /dev/null
+++ b/packages/utils/api/default_impl.ts
@@ -0,0 +1,41 @@
+import type { Project, ProjectV3Partial } from '../types'
+import type { ModrinthApi } from './index'
+import type { ModrinthApiProjects, ProjectEditBody, ProjectV3EditBodyPartial } from './projects'
+
+export class RestModrinthApi implements ModrinthApi {
+	projects: ModrinthApiProjects
+
+	constructor(requestApi: (url: string, options?: object) => Promise<Response>) {
+		this.projects = new RestModrinthApiProjects(requestApi)
+	}
+}
+
+class RestModrinthApiProjects implements ModrinthApiProjects {
+	constructor(private request: (url: string, options?: object) => Promise<Response>) {}
+
+	async get(id: string): Promise<Project> {
+		const res = await this.request(`/v2/project/${id}`)
+		return res.json()
+	}
+
+	async getV3(id: string): Promise<ProjectV3Partial> {
+		const res = await this.request(`/v3/project/${id}`)
+		return res.json()
+	}
+
+	async edit(id: string, data: ProjectEditBody): Promise<void> {
+		await this.request(`/v2/project/${id}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(data),
+		})
+	}
+
+	async editV3(id: string, data: ProjectV3EditBodyPartial): Promise<void> {
+		await this.request(`/v3/project/${id}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(data),
+		})
+	}
+}
diff --git a/packages/utils/api/index.ts b/packages/utils/api/index.ts
new file mode 100644
index 000000000..8dd1355cf
--- /dev/null
+++ b/packages/utils/api/index.ts
@@ -0,0 +1,7 @@
+import type { ModrinthApiProjects } from './projects'
+
+export interface ModrinthApi {
+	projects: ModrinthApiProjects
+}
+
+export { RestModrinthApi } from './default_impl'
diff --git a/packages/utils/api/projects.ts b/packages/utils/api/projects.ts
new file mode 100644
index 000000000..71f265802
--- /dev/null
+++ b/packages/utils/api/projects.ts
@@ -0,0 +1,41 @@
+import type {
+	DonationLink,
+	DonationPlatform,
+	Environment,
+	EnvironmentMigrationReviewStatus,
+	EnvironmentV3,
+	Project,
+	ProjectStatus,
+	ProjectV3Partial,
+	RequestableStatus,
+} from '../types'
+
+export type ProjectEditBody = {
+	slug?: string
+	title?: string
+	description?: string
+	categories?: string[]
+	client_side?: Environment
+	server_side?: Environment
+	status?: ProjectStatus
+	requested_status?: RequestableStatus
+	additional_categories?: string[]
+	issues_url?: string
+	source_url?: string
+	wiki_url?: string
+	discord_url?: string
+	donation_urls?: DonationLink<DonationPlatform>[]
+	license_id?: string
+	license_url?: string
+}
+export type ProjectV3EditBodyPartial = {
+	environment?: EnvironmentV3
+	side_types_migration_review_status: EnvironmentMigrationReviewStatus
+}
+
+export interface ModrinthApiProjects {
+	get(id: string): Promise<Project>
+	getV3(id: string): Promise<ProjectV3Partial>
+	edit(id: string, data: ProjectEditBody): Promise<void>
+	editV3(id: string, data: ProjectV3EditBodyPartial): Promise<void>
+}
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 0a72bb3a9..1555a9e9f 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './api'
 export * from './billing'
 export * from './changelog'
 export * from './highlight'
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index 3d62b28a7..d57ba3dd5 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -112,13 +112,11 @@ export interface ProjectV3 {
 	color?: number
 	thread_id: ModrinthId
 	monetization_status: MonetizationStatus
-	side_types_migration_review_status: 'reviewed' | 'pending'
+	side_types_migration_review_status: EnvironmentMigrationReviewStatus
 
 	[key: string]: unknown
 }
 
-export type SideTypesMigrationReviewStatus = 'reviewed' | 'pending'
-
 export interface Project {
 	id: ModrinthId
 	project_type: ProjectType
@@ -172,6 +170,26 @@ export interface Project {
 	}
 }
 
+export type EnvironmentMigrationReviewStatus = 'reviewed' | 'pending'
+export type EnvironmentV3 =
+	| 'client_and_server'
+	| 'client_only'
+	| 'client_only_server_optional'
+	| 'singleplayer_only'
+	| 'server_only'
+	| 'server_only_client_optional'
+	| 'dedicated_server_only'
+	| 'client_or_server'
+	| 'client_or_server_prefers_both'
+	| 'unknown'
+
+// This is only the fields we care about from v3, since we use v2 for the vast majority of project metadata.
+export interface ProjectV3Partial {
+	side_types_migration_review_status: EnvironmentMigrationReviewStatus
+	environment: EnvironmentV3[]
+	project_types: ProjectType[]
+}
+
 export interface SearchResult {
 	id: ModrinthId
 	project_type: ProjectType