diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index e8262adf8..a14bbec46 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -338,7 +338,7 @@ body {
 
 	--size-navbar-height: 3.5rem;
 	--size-mobile-navbar-height: 3.5rem;
-	--size-mobile-navbar-height-expanded: 13.75rem;
+	--size-mobile-navbar-height-expanded: 26.5rem;
 
 	--spacing-card-lg: 1.5rem;
 	--spacing-card-bg: 1rem;
@@ -367,16 +367,8 @@ body {
 	--font-weight-heading: var(--font-weight-extrabold);
 	--font-weight-title: var(--font-weight-extrabold);
 
-	@media screen and (min-width: 320px) {
-		--size-mobile-navbar-height-expanded: 11.5rem;
-	}
-
-	@media screen and (min-width: 432px) {
-		--size-mobile-navbar-height-expanded: 9.25rem;
-	}
-
-	@media screen and (min-width: 765px) {
-		--size-mobile-navbar-height-expanded: 7rem;
+	@media screen and (min-width: 354px) {
+		--size-mobile-navbar-height-expanded: 15.5rem;
 	}
 }
 
diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss
index d0010f7aa..751974d9d 100644
--- a/apps/frontend/src/assets/styles/layout.scss
+++ b/apps/frontend/src/assets/styles/layout.scss
@@ -49,7 +49,7 @@
 		/ 100%;
 
 	@media screen and (max-width: 1024px) {
-		margin-top: var(--spacing-card-md);
+		margin-top: 1.5rem;
 	}
 
 	.normal-page__sidebar {
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 54d39bf84..6a66e9b91 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -770,6 +770,15 @@
   "project.download.title": {
     "message": "Download {title}"
   },
+  "project.environment.migration-no-permission.message": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified."
+  },
+  "project.environment.migration-no-permission.title": {
+    "message": "Environment metadata needs to be reviewed"
+  },
+  "project.environment.migration.learn-more": {
+    "message": "Learn more about this change"
+  },
   "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."
   },
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index d9094b278..236753cac 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -5,7 +5,7 @@
 	<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"
+				class="mb-4 flex flex-wrap items-center gap-x-2 gap-y-3 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}`"
@@ -759,21 +759,31 @@
 						projectV3.environment[0] !== 'unknown'
 					"
 					type="warning"
-					:header="formatMessage(messages.environmentMigrationTitle)"
+					:header="
+						formatMessage(
+							hasEditDetailsPermission
+								? messages.environmentMigrationTitle
+								: messages.environmentMigrationNoPermissionTitle,
+						)
+					"
 					class="mt-3"
 				>
-					{{ formatMessage(messages.environmentMigrationMessage) }}
-					<ButtonStyled color="orange">
-						<nuxt-link
-							v-tooltip="
-								hasEditDetailsPermission
-									? undefined
-									: formatMessage(commonProjectSettingsMessages.noPermissionDescription)
-							"
-							:to="`/project/${project.id}/settings/environment`"
-							class="mt-3 w-fit"
-							:disabled="!hasEditDetailsPermission"
-						>
+					{{
+						formatMessage(
+							hasEditDetailsPermission
+								? messages.environmentMigrationMessage
+								: messages.environmentMigrationNoPermissionMessage,
+						)
+					}}
+					<nuxt-link
+						to="/news/article/new-environments"
+						target="_blank"
+						class="mt-1 block w-fit font-semibold text-orange hover:underline"
+					>
+						{{ formatMessage(messages.environmentMigrationLink) }}
+					</nuxt-link>
+					<ButtonStyled v-if="hasEditDetailsPermission" color="orange">
+						<nuxt-link :to="`/project/${project.id}/settings/environment`" class="mt-3 w-fit">
 							<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
 						</nuxt-link>
 					</ButtonStyled>
@@ -966,7 +976,6 @@ import {
 	ButtonStyled,
 	Checkbox,
 	commonMessages,
-	commonProjectSettingsMessages,
 	injectNotificationManager,
 	NewModal,
 	OverflowMenu,
@@ -1152,6 +1161,19 @@ const messages = defineMessages({
 		id: 'project.environment.migration.title',
 		defaultMessage: 'Please review environment metadata',
 	},
+	environmentMigrationNoPermissionMessage: {
+		id: 'project.environment.migration-no-permission.message',
+		defaultMessage:
+			"We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified.",
+	},
+	environmentMigrationNoPermissionTitle: {
+		id: 'project.environment.migration-no-permission.title',
+		defaultMessage: 'Environment metadata needs to be reviewed',
+	},
+	environmentMigrationLink: {
+		id: 'project.environment.migration.learn-more',
+		defaultMessage: 'Learn more about this change',
+	},
 	followersStat: {
 		id: 'project.stats.followers-label',
 		defaultMessage: 'follower{count, plural, one {} other {s}}',
diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue
index 7992ba4fa..96fd6c516 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings.vue
@@ -41,7 +41,7 @@ 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 class="experimental-styles-within grid gap-4 lg:grid-cols-[1fr_3fr]">
 		<div>
 			<aside class="universal-card">
 				<NavStack>
@@ -140,7 +140,7 @@ const organization = defineModel<any>('organization')
 				</NavStack>
 			</aside>
 		</div>
-		<div>
+		<div class="min-w-0">
 			<NuxtPage
 				v-model:project="project"
 				v-model:project-v3="projectV3"
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
index 62c4fbc7e..72e1bf86b 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
@@ -110,18 +110,6 @@ const messages = defineMessages({
 </script>
 <template>
 	<div>
-		<UnsavedChangesPopup
-			v-if="supportsEnvironment && hasPermission"
-			: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) }}
@@ -166,8 +154,23 @@ const messages = defineMessages({
 					:body="formatMessage(messages.reviewOptionsDescription)"
 					class="mb-3"
 				/>
-				<ProjectSettingsEnvSelector v-model="current.environment" :disabled="!hasPermission" />
+				<ProjectSettingsEnvSelector
+					v-model="current.environment"
+					:disabled="!hasPermission || projectV3?.environment?.length > 1"
+				/>
 			</template>
 		</div>
+		<UnsavedChangesPopup
+			v-if="supportsEnvironment && hasPermission"
+			: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>
 </template>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 180cb4d10..8824d1784 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -67,7 +67,9 @@
 			</label>
 			<div class="text-input-wrapper">
 				<div class="text-input-wrapper__before">
-					https://modrinth.com/{{ $getProjectTypeForUrl(project.project_type, project.loaders) }}/
+					<span class="hidden sm:inline">https://modrinth.com</span>/{{
+						$getProjectTypeForUrl(project.project_type, project.loaders)
+					}}/
 				</div>
 				<input
 					id="project-slug"
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index 16cdf23cb..8571b64bd 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -13,7 +13,7 @@
 			<div class="font-semibold flex justify-between gap-4">
 				<slot name="header">{{ header }}</slot>
 			</div>
-			<div class="font-normal">
+			<div class="font-normal text-sm sm:text-base">
 				<slot>{{ body }}</slot>
 			</div>
 		</div>
diff --git a/packages/ui/src/components/base/LargeRadioButton.vue b/packages/ui/src/components/base/LargeRadioButton.vue
index 9e5ae0061..f7a199c3b 100644
--- a/packages/ui/src/components/base/LargeRadioButton.vue
+++ b/packages/ui/src/components/base/LargeRadioButton.vue
@@ -1,5 +1,8 @@
 <template>
 	<button
+		role="radio"
+		:aria-checked="selected"
+		:aria-disabled="disabled"
 		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 rounded-xl"
 		:class="
 			(selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent') +
@@ -10,8 +13,8 @@
 		:disabled="disabled"
 		@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" />
+		<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" aria-hidden="true" />
+		<RadioButtonIcon v-else class="h-5 w-5 shrink-0" aria-hidden="true" />
 		<slot />
 	</button>
 </template>
diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue
index d8fcc5605..c150f5840 100644
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -50,20 +50,15 @@ const shown = computed(() => {
 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 v-if="shown" class="fixed w-full z-10 left-0 p-4 unsaved-changes-popup">
 			<div
-				class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
+				class="flex items-center gap-2 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>
+				<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
 				<div class="ml-auto flex gap-2">
 					<ButtonStyled v-if="canReset" type="transparent">
 						<button :disabled="saving" @click="(e) => emit('reset', e)">
@@ -74,7 +69,7 @@ const saveText = computed(() =>
 						<button :disabled="saving" @click="(e) => emit('save', e)">
 							<SpinnerIcon v-if="saving" class="animate-spin" />
 							<component :is="saveIcon" v-else />
-							{{ saveText }}
+							{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
 						</button>
 					</ButtonStyled>
 				</div>
@@ -103,4 +98,19 @@ const saveText = computed(() =>
 	translate: 0 0.25rem;
 	opacity: 0;
 }
+
+.unsaved-changes-popup {
+	transition: bottom 0.25s ease-in-out;
+	bottom: 0;
+}
+
+@media (any-hover: none) and (max-width: 640px) {
+	.unsaved-changes-popup {
+		bottom: var(--size-mobile-navbar-height);
+	}
+
+	.expanded-mobile-nav .unsaved-changes-popup {
+		bottom: var(--size-mobile-navbar-height-expanded);
+	}
+}
 </style>
diff --git a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
index d868a8c00..372a2f722 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
@@ -3,6 +3,7 @@ import type { EnvironmentV3 } from '@modrinth/utils'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
 
+import { commonProjectSettingsMessages } from '../../../../utils'
 import LargeRadioButton from '../../../base/LargeRadioButton.vue'
 
 const { formatMessage } = useVIntl()
@@ -23,6 +24,15 @@ type EnvironmentRadioOption = {
 	description?: MessageDescriptor
 }
 
+const subOptionLabel = defineMessage({
+	id: 'project.settings.environment.suboption.accessibility-suboption-group-label',
+	defaultMessage: 'Suboptions of {option}',
+})
+const optionLabelFormat = defineMessage({
+	id: 'project.settings.environment.suboption.accessibility-option-label',
+	defaultMessage: '{title}: {description}',
+})
+
 const OUTER_OPTIONS = {
 	client: {
 		title: defineMessage({
@@ -225,58 +235,68 @@ 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"
-			:disabled="disabled"
-			@select="
-				() => {
-					if (currentOuterOption !== key) {
-						currentSubOption = suboptions ? (Object.keys(suboptions)[0] as SubOptionKey) : undefined
-					}
-					currentOuterOption = key
-					simulateSave = false
-				}
-			"
+	<div role="radiogroup" :aria-label="formatMessage(commonProjectSettingsMessages.environment)">
+		<template
+			v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
+			:key="`env-option-${key}`"
 		>
-			<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"
+				class="!w-full"
+				:class="{ 'mt-2': index > 0 }"
+				:selected="currentOuterOption === key"
 				:disabled="disabled"
+				:aria-label="formatMessage(optionLabelFormat, { title: formatMessage(title), description: formatMessage(description)})"
 				@select="
 					() => {
+						if (currentOuterOption !== key) {
+							currentSubOption = suboptions
+								? (Object.keys(suboptions)[0] as SubOptionKey)
+								: undefined
+						}
 						currentOuterOption = key
-						currentSubOption = suboptionKey
+						simulateSave = false
 					}
 				"
 			>
 				<span class="flex flex-col">
-					<span>{{ formatMessage(suboptionTitle) }}</span>
-					<span v-if="suboptionDescription" class="text-sm text-secondary">{{
-						formatMessage(suboptionDescription)
+					<span>{{ formatMessage(title) }}</span>
+					<span v-if="description" class="text-sm text-secondary">{{
+						formatMessage(description)
 					}}</span>
 				</span>
 			</LargeRadioButton>
-		</div>
-	</template>
+			<div
+				v-if="suboptions"
+				class="pl-8"
+				role="radiogroup"
+				:aria-label="formatMessage(subOptionLabel, { option: formatMessage(title) })"
+			>
+				<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"
+					:disabled="disabled"
+					@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>
+	</div>
 </template>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 27c3a0c33..56e73095e 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -488,6 +488,12 @@
   "project.settings.environment.singleplayer.title": {
     "defaultMessage": "Singleplayer only"
   },
+  "project.settings.environment.suboption.accessibility-option-label": {
+    "defaultMessage": "{title}: {description}"
+  },
+  "project.settings.environment.suboption.accessibility-suboption-group-label": {
+    "defaultMessage": "Suboptions of {option}"
+  },
   "project.settings.environment.title": {
     "defaultMessage": "Environment"
   },