diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index e8262adf85..a14bbec46d 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 d0010f7aab..751974d9d4 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 54d39bf840..6a66e9b91f 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 d9094b2785..236753cac9 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 7992ba4fa5..96fd6c516c 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 62c4fbc7e2..72e1bf86b3 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 180cb4d10d..8824d1784d 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 16cdf23cbf..8571b64bd6 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 9e5ae00612..f7a199c3ba 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 d8fcc5605b..c150f5840a 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 d868a8c006..372a2f7226 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 27c3a0c333..56e73095ed 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"
   },