diff --git a/apps/frontend/src/components/ui/ModrinthFooter.vue b/apps/frontend/src/components/ui/ModrinthFooter.vue
index 73109a3e55..2cb0d38283 100644
--- a/apps/frontend/src/components/ui/ModrinthFooter.vue
+++ b/apps/frontend/src/components/ui/ModrinthFooter.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { BlueskyIcon, DiscordIcon, GithubIcon, MastodonIcon, TwitterIcon } from '@modrinth/assets'
+import {
+	BlueskyIcon,
+	DiscordIcon,
+	GithubIcon,
+	MastodonIcon,
+	ToggleRightIcon,
+	TwitterIcon,
+} from '@modrinth/assets'
 import {
 	AutoLink,
 	ButtonStyled,
@@ -10,6 +17,7 @@ import {
 	type MessageDescriptor,
 	useVIntl,
 } from '@modrinth/ui'
+import { commonSettingsMessages } from '@modrinth/ui/src/utils/common-messages.js'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
 
@@ -233,11 +241,21 @@ function developerModeIncrement() {
 					role="region"
 					:aria-label="formatMessage(messages.modrinthInformation)"
 				>
-					<TextLogo
-						aria-hidden="true"
-						class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
-						@click="developerModeIncrement()"
-					/>
+					<div class="flex items-center gap-2">
+						<TextLogo
+							aria-hidden="true"
+							class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
+							@click="developerModeIncrement()"
+						/>
+						<ButtonStyled v-if="flags.developerMode" circular type="transparent" color="brand">
+							<nuxt-link
+								v-tooltip="formatMessage(commonSettingsMessages.featureFlags)"
+								to="/settings/flags"
+							>
+								<ToggleRightIcon />
+							</nuxt-link>
+						</ButtonStyled>
+					</div>
 					<div class="flex flex-wrap justify-center gap-px sm:-mx-2">
 						<ButtonStyled
 							v-for="(social, index) in socialLinks"
diff --git a/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue b/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue
index 6aecf51246..e03b7d370c 100644
--- a/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue
+++ b/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { XCircleIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
+const flags = useFeatureFlags()
+
+const tempIgnored = ref(false)
 
 const messages = defineMessages({
 	title: {
@@ -13,16 +17,34 @@ const messages = defineMessages({
 		defaultMessage:
 			"This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}",
 	},
+	ignoreErrors: {
+		id: 'layout.banner.build-fail.ignore',
+		defaultMessage: 'Ignore',
+	},
+	alwaysIgnore: {
+		id: 'layout.banner.build-fail.always-ignore',
+		defaultMessage: 'Always ignore',
+	},
 })
 
 defineProps<{
 	errors: any[] | undefined
 	apiUrl: string
 }>()
+
+function alwaysIgnoreBanner() {
+	flags.value.alwaysIgnoreErrorBanner = true
+	saveFeatureFlags()
+}
 </script>
 
 <template>
-	<PagewideBanner v-if="errors?.length" variant="error">
+	<PagewideBanner
+		v-if="
+			flags.showAllBanners || (errors?.length && !tempIgnored && !flags.alwaysIgnoreErrorBanner)
+		"
+		variant="error"
+	>
 		<template #title>
 			<span>{{ formatMessage(messages.title) }}</span>
 		</template>
@@ -34,5 +56,19 @@ defineProps<{
 				})
 			}}
 		</template>
+		<template #actions_right>
+			<ButtonStyled color="red" type="transparent" hover-color-fill="background">
+				<button @click="alwaysIgnoreBanner">
+					<XCircleIcon />
+					{{ formatMessage(messages.alwaysIgnore) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled color="red">
+				<button @click="tempIgnored = true">
+					<XIcon />
+					{{ formatMessage(messages.ignoreErrors) }}
+				</button>
+			</ButtonStyled>
+		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/PreviewBanner.vue b/apps/frontend/src/components/ui/banner/PreviewBanner.vue
index 141f65649a..7fc253caf5 100644
--- a/apps/frontend/src/components/ui/banner/PreviewBanner.vue
+++ b/apps/frontend/src/components/ui/banner/PreviewBanner.vue
@@ -13,6 +13,7 @@ import {
 const { formatMessage } = useVIntl()
 const flags = useFeatureFlags()
 const config = useRuntimeConfig()
+const route = useRoute()
 
 const messages = defineMessages({
 	title: {
@@ -21,7 +22,7 @@ const messages = defineMessages({
 	},
 	description: {
 		id: 'layout.banner.preview.description',
-		defaultMessage: `If you meant to access the official Modrinth website, visit <link>https://modrinth.com</link>. This preview deploy is used by Modrinth staff for testing purposes. It was built using <branch-link>{owner}/{branch}</branch-link> @ {commit}.`,
+		defaultMessage: `If you meant to access the official Modrinth website, visit {url}. This preview deploy is used by Modrinth staff for testing purposes. It was built using <branch-link>{owner}/{branch}</branch-link> @ {commit}.`,
 	},
 })
 
@@ -29,10 +30,12 @@ function hidePreviewBanner() {
 	flags.value.hidePreviewBanner = true
 	saveFeatureFlags()
 }
+
+const url = computed(() => `https://modrinth.com${route.fullPath}`)
 </script>
 
 <template>
-	<PagewideBanner v-if="!flags.hidePreviewBanner" variant="info">
+	<PagewideBanner v-if="!flags.hidePreviewBanner || flags.showAllBanners" variant="info">
 		<template #title>
 			<span>{{ formatMessage(messages.title) }}</span>
 		</template>
@@ -45,9 +48,9 @@ function hidePreviewBanner() {
 						branch: config.public.branch,
 					}"
 				>
-					<template #link="{ children }">
-						<a href="https://modrinth.com" target="_blank" rel="noopener" class="text-link">
-							<component :is="() => normalizeChildren(children)" />
+					<template #url>
+						<a :href="url" target="_blank" rel="noopener" class="text-link">
+							{{ url }}
 						</a>
 					</template>
 					<template #branch-link="{ children }">
@@ -75,7 +78,7 @@ function hidePreviewBanner() {
 				</IntlFormatted>
 			</span>
 		</template>
-		<template #actions_right>
+		<template #actions_top_right>
 			<ButtonStyled type="transparent" circular>
 				<button :aria-label="formatMessage(commonMessages.closeButton)" @click="hidePreviewBanner">
 					<XIcon aria-hidden="true" />
diff --git a/apps/frontend/src/components/ui/banner/RussiaBanner.vue b/apps/frontend/src/components/ui/banner/RussiaBanner.vue
index 59491234d2..35f426f217 100644
--- a/apps/frontend/src/components/ui/banner/RussiaBanner.vue
+++ b/apps/frontend/src/components/ui/banner/RussiaBanner.vue
@@ -47,7 +47,7 @@ function hideRussiaCensorshipBanner() {
 						<span class="text-xs font-medium">(Перевод на русский)</span>
 					</nuxt-link>
 				</ButtonStyled>
-				<ButtonStyled>
+				<ButtonStyled type="transparent" hover-color-fill="background">
 					<nuxt-link to="/news/article/standing-by-our-values">
 						<BookTextIcon /> Read our full statement
 						<span class="text-xs font-medium">(English)</span>
@@ -55,7 +55,7 @@ function hideRussiaCensorshipBanner() {
 				</ButtonStyled>
 			</div>
 		</template>
-		<template #actions_right>
+		<template #actions_top_right>
 			<ButtonStyled circular type="transparent">
 				<button
 					v-tooltip="formatMessage(commonMessages.closeButton)"
diff --git a/apps/frontend/src/components/ui/banner/StagingBanner.vue b/apps/frontend/src/components/ui/banner/StagingBanner.vue
index 607974ec79..0f699793c9 100644
--- a/apps/frontend/src/components/ui/banner/StagingBanner.vue
+++ b/apps/frontend/src/components/ui/banner/StagingBanner.vue
@@ -10,6 +10,7 @@ import {
 
 const { formatMessage } = useVIntl()
 const cosmetics = useCosmetics()
+const flags = useFeatureFlags()
 
 const messages = defineMessages({
 	title: {
@@ -29,14 +30,14 @@ function hideStagingBanner() {
 </script>
 
 <template>
-	<PagewideBanner v-if="!cosmetics.hideStagingBanner" variant="warning">
+	<PagewideBanner v-if="flags.showAllBanners || !cosmetics.hideStagingBanner" variant="warning">
 		<template #title>
 			<span>{{ formatMessage(messages.title) }}</span>
 		</template>
 		<template #description>
 			{{ formatMessage(messages.description) }}
 		</template>
-		<template #actions_right>
+		<template #actions_top_right>
 			<ButtonStyled type="transparent" circular>
 				<button :aria-label="formatMessage(commonMessages.closeButton)" @click="hideStagingBanner">
 					<XIcon aria-hidden="true" />
diff --git a/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue b/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
index 91f6285859..d53ba3a264 100644
--- a/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
+++ b/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
@@ -29,8 +29,8 @@ const messages = defineMessages({
 		<template #description>
 			<span>{{ formatMessage(messages.description) }}</span>
 		</template>
-		<template #actions>
-			<ButtonStyled>
+		<template #actions_right>
+			<ButtonStyled color="red">
 				<nuxt-link to="/settings/billing">
 					<SettingsIcon aria-hidden="true" />
 					{{ formatMessage(messages.action) }}
diff --git a/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue b/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
index 6d6bffe701..b40dc5be71 100644
--- a/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
+++ b/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
@@ -55,7 +55,7 @@ function openTaxForm(e: MouseEvent) {
 				formatMessage(messages.description, { threshold: formatMoney(taxThreshold) })
 			}}</span>
 		</template>
-		<template #actions>
+		<template #actions_right>
 			<ButtonStyled color="orange">
 				<button @click="openTaxForm"><FileTextIcon /> {{ formatMessage(messages.action) }}</button>
 			</ButtonStyled>
diff --git a/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue b/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue
index 8762d8d1af..50b2996f2f 100644
--- a/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue
+++ b/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue
@@ -29,7 +29,7 @@ const messages = defineMessages({
 		<template #description>
 			<span>{{ formatMessage(messages.description) }}</span>
 		</template>
-		<template #actions>
+		<template #actions_right>
 			<div class="flex w-fit flex-row">
 				<ButtonStyled color="red">
 					<nuxt-link to="https://support.modrinth.com" target="_blank" rel="noopener">
diff --git a/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue b/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
index c33f2a16b9..eb00ae63cd 100644
--- a/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
+++ b/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
@@ -96,14 +96,12 @@ async function handleResendEmailVerification() {
 				}}
 			</span>
 		</template>
-		<template #actions>
-			<ButtonStyled v-if="hasEmail">
-				<button @click="handleResendEmailVerification">
+		<template #actions_right>
+			<ButtonStyled color="orange">
+				<button v-if="hasEmail" @click="handleResendEmailVerification">
 					{{ formatMessage(verifyEmailBannerMessages.action) }}
 				</button>
-			</ButtonStyled>
-			<ButtonStyled v-else>
-				<nuxt-link to="/settings/account">
+				<nuxt-link v-else to="/settings/account">
 					<SettingsIcon aria-hidden="true" />
 					{{ formatMessage(addEmailBannerMessages.action) }}
 				</nuxt-link>
diff --git a/apps/frontend/src/components/ui/banner/ViewOnModrinthBanner.vue b/apps/frontend/src/components/ui/banner/ViewOnModrinthBanner.vue
new file mode 100644
index 0000000000..d0e347cda7
--- /dev/null
+++ b/apps/frontend/src/components/ui/banner/ViewOnModrinthBanner.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { PagewideBanner } from '@modrinth/ui'
+
+const flags = useFeatureFlags()
+const route = useRoute()
+
+const url = computed(() => `https://modrinth.com${route.fullPath}`)
+
+const bannerRoot = ref<HTMLElement | null>(null)
+
+function onProdLinkClick(e: MouseEvent) {
+	e.preventDefault()
+	const el = bannerRoot.value
+	if (el) {
+		const { height } = el.getBoundingClientRect()
+		window.scrollBy({ top: Math.ceil(height), behavior: 'auto' })
+	}
+	window.open(url.value, '_blank', 'noopener,noreferrer')
+}
+</script>
+
+<template>
+	<div v-if="flags.showViewProdRouteBanner || flags.showAllBanners" ref="bannerRoot">
+		<PagewideBanner variant="info" slim>
+			<template #description>
+				<span>
+					View route on production:
+					<a
+						:href="url"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-link"
+						@click="onProdLinkClick"
+					>
+						{{ url }}
+					</a>
+				</span>
+			</template>
+		</PagewideBanner>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
index 973ada56db..8c3154fbd3 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="shadow-card rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4">
+	<div class="shadow-card rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4">
 		<div class="flex items-center justify-between">
 			<div class="flex items-center gap-4">
 				<NuxtLink
@@ -107,8 +107,8 @@
 							<LinkIcon />
 						</button>
 					</ButtonStyled>
-					<ButtonStyled v-tooltip="'Begin review'" circular color="orange">
-						<button @click="openProjectForReview">
+					<ButtonStyled circular color="orange">
+						<button v-tooltip="'Begin review'" @click="openProjectForReview">
 							<ScaleIcon />
 						</button>
 					</ButtonStyled>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 6d21482061..743f7a7131 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -143,7 +143,7 @@
 			:expand-text="expandText"
 			collapse-text="Collapse thread"
 		>
-			<div class="bg-surface-2 p-4 pt-2">
+			<div class="bg-surface-2 pt-2">
 				<ThreadView
 					v-if="threadWithReportBody"
 					ref="reportThread"
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index e80906a9c1..07991f83d4 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -1075,6 +1075,7 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 				mode="local"
 				:links="navTabsLinks"
 				:active-index="activeTabIndex"
+				class="bg-surface-3! shadow-none!"
 				@tab-click="handleTabClick"
 			/>
 		</div>
@@ -1087,7 +1088,7 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 					collapse-text="Collapse thread"
 					class="border-x border-b border-solid border-surface-3"
 				>
-					<div class="bg-surface-2 p-4 pt-0">
+					<div class="bg-surface-2 pt-0">
 						<!-- DEV-531 -->
 						<!-- @vue-expect-error TODO: will convert ThreadView to use api-client types at a later date -->
 						<ThreadView
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 1b737d9e5c..1ec2bc93f8 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -358,26 +358,44 @@
 
 							<div v-else-if="generatedMessage" class="flex items-center gap-2">
 								<ButtonStyled>
-									<button @click="goBackToStages">
+									<button :disabled="loadingModerationDecision" @click="goBackToStages">
 										<LeftArrowIcon aria-hidden="true" />
 										Edit
 									</button>
 								</ButtonStyled>
 								<ButtonStyled color="red">
-									<button @click="sendMessage('rejected')">
-										<XIcon aria-hidden="true" />
+									<button :disabled="loadingModerationDecision" @click="sendMessage('rejected')">
+										<SpinnerIcon
+											v-if="moderationDecision === 'rejected'"
+											class="animate-spin"
+											aria-hidden="true"
+										/>
+										<XIcon v-else aria-hidden="true" />
 										Reject
 									</button>
 								</ButtonStyled>
 								<ButtonStyled color="orange">
-									<button @click="sendMessage('withheld')">
-										<EyeOffIcon aria-hidden="true" />
+									<button :disabled="loadingModerationDecision" @click="sendMessage('withheld')">
+										<SpinnerIcon
+											v-if="moderationDecision === 'withheld'"
+											class="animate-spin"
+											aria-hidden="true"
+										/>
+										<LinkIcon v-else aria-hidden="true" />
 										Withhold
 									</button>
 								</ButtonStyled>
 								<ButtonStyled color="green">
-									<button @click="sendMessage(projectV2.requested_status ?? 'approved')">
-										<CheckIcon aria-hidden="true" />
+									<button
+										:disabled="loadingModerationDecision"
+										@click="sendMessage(approveSendStatus)"
+									>
+										<SpinnerIcon
+											v-if="moderationDecision === approveSendStatus"
+											class="animate-spin"
+											aria-hidden="true"
+										/>
+										<CheckIcon v-else aria-hidden="true" />
 										Approve
 									</button>
 								</ButtonStyled>
@@ -428,14 +446,15 @@ import {
 	BrushCleaningIcon,
 	CheckIcon,
 	DropdownIcon,
-	EyeOffIcon,
 	FileTextIcon,
 	KeyboardIcon,
 	LeftArrowIcon,
+	LinkIcon,
 	ListBulletedIcon,
 	LockIcon,
 	RightArrowIcon,
 	ScaleIcon,
+	SpinnerIcon,
 	ToggleLeftIcon,
 	ToggleRightIcon,
 	XIcon,
@@ -760,6 +779,12 @@ const message = ref(
 )
 const generatedMessage = ref(persistedGeneratedMessage.generated === true)
 const loadingMessage = ref(false)
+const moderationDecision = ref<ProjectStatus | null>(null)
+const loadingModerationDecision = computed(() => moderationDecision.value !== null)
+const approveSendStatus = computed<ProjectStatus>(() => {
+	const requested = projectV2.value.requested_status
+	return requested ?? 'approved'
+})
 const done = ref(false)
 
 function persistGeneratedMessageState() {
@@ -1074,6 +1099,7 @@ function resetProgress() {
 	done.value = false
 	clearGeneratedMessageState()
 	loadingMessage.value = false
+	moderationDecision.value = null
 
 	localStorage.removeItem(`modpack-permissions-${projectV2.value.id}`)
 	localStorage.removeItem(`modpack-permissions-index-${projectV2.value.id}`)
@@ -1190,7 +1216,7 @@ function handleKeybinds(event: KeyboardEvent) {
 				tryResetProgress: resetProgress,
 				tryExitModeration: handleExit,
 
-				tryApprove: () => sendMessage(projectV2.value.requested_status ?? 'approved'),
+				tryApprove: () => sendMessage(approveSendStatus.value),
 				tryReject: () => sendMessage('rejected'),
 				tryWithhold: () => sendMessage('withheld'),
 				tryEditMessage: goBackToStages,
@@ -1977,6 +2003,7 @@ async function sendMessage(status: ProjectStatus) {
 		return
 	}
 
+	moderationDecision.value = status
 	try {
 		await useBaseFetch(`project/${projectId}`, {
 			method: 'PATCH',
@@ -2026,6 +2053,8 @@ async function sendMessage(status: ProjectStatus) {
 			text: 'Failed to submit moderation decision. Please try again.',
 			type: 'error',
 		})
+	} finally {
+		moderationDecision.value = null
 	}
 }
 
diff --git a/apps/frontend/src/components/ui/report/ReportView.vue b/apps/frontend/src/components/ui/report/ReportView.vue
index c8b08d9118..7989da545c 100644
--- a/apps/frontend/src/components/ui/report/ReportView.vue
+++ b/apps/frontend/src/components/ui/report/ReportView.vue
@@ -1,17 +1,31 @@
 <template>
 	<div>
-		<section class="universal-card">
+		<section>
 			<Breadcrumbs
 				v-if="breadcrumbsStack"
 				:current-title="`Report ${reportId}`"
 				:link-stack="breadcrumbsStack"
 			/>
 			<h2>Report details</h2>
-			<ReportInfo :report="report" :show-thread="false" :show-message="false" :auth="auth" />
+			<ReportInfo
+				:report="report"
+				:show-thread="false"
+				:show-message="false"
+				:auth="auth"
+				class="card-shadow mb-4 rounded-2xl border border-solid border-surface-4 bg-surface-2 p-4"
+			/>
 		</section>
-		<section v-if="report && thread" class="universal-card">
-			<h2>Messages</h2>
+		<section
+			v-if="report && thread"
+			class="card-shadow rounded-2xl border border-solid border-surface-4 bg-surface-3"
+		>
+			<h2 class="m-4 mb-2 text-xl font-semibold text-contrast">Messages with the moderators</h2>
+			<p class="mx-4 mt-0">
+				Make sure to include evidence of all claims you make, or your report may be closed without
+				action.
+			</p>
 			<ConversationThread
+				class="overflow-clip rounded-b-2xl border-0 border-t border-solid border-surface-4 bg-surface-2"
 				:thread="thread"
 				:report="report"
 				:auth="auth"
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index 39602efc17..4145dbf9af 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -78,283 +78,305 @@
 				</div>
 			</div>
 		</Modal>
-		<div v-if="flags.developerMode" class="thread-id">
+		<div v-if="flags.developerMode" class="thread-id mx-4">
 			Thread ID:
 			<CopyCode :text="thread.id" />
 		</div>
-		<div v-if="sortedMessages.length > 0" class="messages universal-card recessed">
-			<ThreadMessage
-				v-for="message in sortedMessages"
-				:key="'message-' + message.id"
-				:thread="thread"
-				:message="message"
-				:members="members"
-				:report="report"
-				:auth="auth"
-				raised
-				@update-thread="() => updateThreadLocal()"
-			/>
-		</div>
-		<template v-if="report && report.closed">
-			<p>This thread is closed and new messages cannot be sent to it.</p>
-			<ButtonStyled v-if="isStaff(auth.user)">
-				<button :disabled="isLoading" @click="runBlockingAction('reopen', () => reopenReport())">
-					<SpinnerIcon v-if="loadingAction === 'reopen'" class="animate-spin" aria-hidden="true" />
-					<CheckCircleIcon v-else aria-hidden="true" />
-					Reopen thread
-				</button>
-			</ButtonStyled>
-		</template>
-		<template v-else-if="!report || !report.closed">
-			<div class="markdown-editor-spacing">
-				<MarkdownEditor
-					v-model="replyBody"
-					:placeholder="sortedMessages.length > 0 ? 'Reply to thread...' : 'Send a message...'"
-					:on-image-upload="onUploadImage"
+		<div v-bind="$attrs" class="flex flex-col">
+			<div v-if="sortedMessages.length > 0" class="flex flex-col pt-2">
+				<ThreadMessage
+					v-for="message in sortedMessages"
+					:key="'message-' + message.id"
+					:thread="thread"
+					:message="message"
+					:members="members"
+					:report="report"
+					:auth="auth"
+					raised
+					@update-thread="() => updateThreadLocal()"
 				/>
 			</div>
-			<div class="input-group">
-				<ButtonStyled color="brand">
-					<button
-						v-if="sortedMessages.length > 0"
-						:disabled="!replyBody || isLoading"
-						@click="
-							isApproved(project) && !isStaff(auth.user)
-								? openReplyModal()
-								: runBlockingAction('reply', () => sendReply())
-						"
-					>
-						<SpinnerIcon v-if="loadingAction === 'reply'" class="animate-spin" aria-hidden="true" />
-						<ReplyIcon v-else aria-hidden="true" />
-						Reply
-					</button>
-					<button
-						v-else
-						:disabled="!replyBody || isLoading"
-						@click="
-							isApproved(project) && !isStaff(auth.user)
-								? openReplyModal()
-								: runBlockingAction('send', () => sendReply())
-						"
-					>
-						<SpinnerIcon v-if="loadingAction === 'send'" class="animate-spin" aria-hidden="true" />
-						<SendIcon v-else aria-hidden="true" />
-						Send
-					</button>
-				</ButtonStyled>
+			<template v-if="report && report.closed">
+				<p>This thread is closed and new messages cannot be sent to it.</p>
 				<ButtonStyled v-if="isStaff(auth.user)">
-					<button
-						:disabled="!replyBody || isLoading"
-						@click="runBlockingAction('private-note', () => sendReply(null, true))"
-					>
+					<button :disabled="isLoading" @click="runBlockingAction('reopen', () => reopenReport())">
 						<SpinnerIcon
-							v-if="loadingAction === 'private-note'"
+							v-if="loadingAction === 'reopen'"
 							class="animate-spin"
 							aria-hidden="true"
 						/>
-						<ScaleIcon v-else aria-hidden="true" />
-						Add private note
+						<CheckCircleIcon v-else aria-hidden="true" />
+						Reopen thread
 					</button>
 				</ButtonStyled>
-				<template v-if="currentMember && !isStaff(auth.user)">
-					<template v-if="isRejected(project)">
-						<ButtonStyled color="orange">
-							<button v-if="replyBody" :disabled="isLoading" @click="openResubmitModal(true)">
-								<ScaleIcon aria-hidden="true" />
-								Resubmit for review with reply
-							</button>
-							<button v-else :disabled="isLoading" @click="openResubmitModal(false)">
-								<ScaleIcon aria-hidden="true" />
-								Resubmit for review
-							</button>
-						</ButtonStyled>
-					</template>
-				</template>
-				<div class="spacer"></div>
-				<div class="input-group extra-options">
-					<template v-if="report">
-						<template v-if="isStaff(auth.user)">
-							<ButtonStyled color="red">
-								<button
-									v-if="replyBody"
-									:disabled="isLoading"
-									@click="runBlockingAction('close-with-reply', () => closeReport(true))"
-								>
-									<SpinnerIcon
-										v-if="loadingAction === 'close-with-reply'"
-										class="animate-spin"
-										aria-hidden="true"
-									/>
-									<CheckCircleIcon v-else aria-hidden="true" />
-									Close with reply
+			</template>
+			<template v-else-if="!report || !report.closed">
+				<div class="markdown-editor-spacing mx-4 mt-2">
+					<MarkdownEditor
+						v-model="replyBody"
+						:placeholder="sortedMessages.length > 0 ? 'Reply to thread...' : 'Send a message...'"
+						:on-image-upload="onUploadImage"
+					/>
+				</div>
+				<div class="input-group m-4 mt-3">
+					<ButtonStyled color="brand">
+						<button
+							v-if="sortedMessages.length > 0"
+							:disabled="!replyBody || isLoading"
+							@click="
+								isApproved(project) && !isStaff(auth.user)
+									? openReplyModal()
+									: runBlockingAction('reply', () => sendReply())
+							"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'reply'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<ReplyIcon v-else aria-hidden="true" />
+							Reply
+						</button>
+						<button
+							v-else
+							:disabled="!replyBody || isLoading"
+							@click="
+								isApproved(project) && !isStaff(auth.user)
+									? openReplyModal()
+									: runBlockingAction('send', () => sendReply())
+							"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'send'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<SendIcon v-else aria-hidden="true" />
+							Send
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="isStaff(auth.user)">
+						<button
+							:disabled="!replyBody || isLoading"
+							@click="runBlockingAction('private-note', () => sendReply(null, true))"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'private-note'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<ScaleIcon v-else aria-hidden="true" />
+							Add private note
+						</button>
+					</ButtonStyled>
+					<template v-if="currentMember && !currentMember.staffOnly">
+						<template v-if="isRejected(project)">
+							<ButtonStyled color="orange">
+								<button v-if="replyBody" :disabled="isLoading" @click="openResubmitModal(true)">
+									<ScaleIcon aria-hidden="true" />
+									Resubmit for review with reply
 								</button>
-								<button
-									v-else
-									:disabled="isLoading"
-									@click="runBlockingAction('close', () => closeReport())"
-								>
-									<SpinnerIcon
-										v-if="loadingAction === 'close'"
-										class="animate-spin"
-										aria-hidden="true"
-									/>
-									<CheckCircleIcon v-else aria-hidden="true" />
-									Close thread
+								<button v-else :disabled="isLoading" @click="openResubmitModal(false)">
+									<ScaleIcon aria-hidden="true" />
+									Resubmit for review
 								</button>
 							</ButtonStyled>
 						</template>
 					</template>
-					<template v-if="project">
-						<template v-if="isStaff(auth.user)">
-							<ButtonStyled v-if="replyBody" color="green">
-								<button
-									:disabled="isApproved(project) || isLoading"
-									@click="runBlockingAction('approve-with-reply', () => sendReply(requestedStatus))"
-								>
-									<SpinnerIcon
-										v-if="loadingAction === 'approve-with-reply'"
-										class="animate-spin"
-										aria-hidden="true"
-									/>
-									<CheckIcon v-else aria-hidden="true" />
-									Approve with reply
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-else color="green">
-								<button
-									:disabled="isApproved(project) || isLoading"
-									@click="runBlockingAction('approve', () => setStatus(requestedStatus))"
-								>
-									<SpinnerIcon
-										v-if="loadingAction === 'approve'"
-										class="animate-spin"
-										aria-hidden="true"
-									/>
-									<CheckIcon v-else aria-hidden="true" />
-									Approve
-								</button>
-							</ButtonStyled>
-							<div class="joined-buttons">
-								<ButtonStyled v-if="replyBody" color="red">
+					<div class="spacer"></div>
+					<div class="input-group extra-options">
+						<template v-if="report">
+							<template v-if="isStaff(auth.user)">
+								<ButtonStyled color="red">
 									<button
-										:disabled="project.status === 'rejected' || isLoading"
-										@click="runBlockingAction('reject-with-reply', () => sendReply('rejected'))"
+										v-if="replyBody"
+										:disabled="isLoading"
+										@click="runBlockingAction('close-with-reply', () => closeReport(true))"
 									>
 										<SpinnerIcon
-											v-if="loadingAction === 'reject-with-reply'"
+											v-if="loadingAction === 'close-with-reply'"
 											class="animate-spin"
 											aria-hidden="true"
 										/>
-										<XIcon v-else aria-hidden="true" />
-										Reject with reply
+										<CheckCircleIcon v-else aria-hidden="true" />
+										Close with reply
 									</button>
-								</ButtonStyled>
-								<ButtonStyled v-else color="red">
 									<button
-										:disabled="project.status === 'rejected' || isLoading"
-										@click="runBlockingAction('reject', () => setStatus('rejected'))"
+										v-else
+										:disabled="isLoading"
+										@click="runBlockingAction('close', () => closeReport())"
 									>
 										<SpinnerIcon
-											v-if="loadingAction === 'reject'"
+											v-if="loadingAction === 'close'"
 											class="animate-spin"
 											aria-hidden="true"
 										/>
-										<XIcon v-else aria-hidden="true" />
-										Reject
+										<CheckCircleIcon v-else aria-hidden="true" />
+										Close thread
 									</button>
 								</ButtonStyled>
-								<ButtonStyled color="red">
-									<OverflowMenu
-										class="btn-dropdown-animation"
-										:disabled="isLoading"
-										:options="
-											replyBody
-												? [
-														{
-															id: 'withhold-reply',
-															color: 'danger',
-															action: () =>
-																runBlockingAction('withhold-reply', () => sendReply('withheld')),
-															hoverFilled: true,
-															disabled: project.status === 'withheld' || isLoading,
-														},
-														{
-															id: 'set-to-draft-reply',
-															action: () =>
-																runBlockingAction('set-to-draft-reply', () => sendReply('draft')),
-															hoverFilled: true,
-															disabled: project.status === 'draft' || isLoading,
-														},
-														{
-															id: 'send-to-review-reply',
-															action: () =>
-																runBlockingAction('send-to-review-reply', () =>
-																	sendReply('processing', true),
-																),
-															hoverFilled: true,
-															disabled: project.status === 'processing' || isLoading,
-														},
-													]
-												: [
-														{
-															id: 'withhold',
-															color: 'danger',
-															action: () =>
-																runBlockingAction('withhold', () => setStatus('withheld')),
-															hoverFilled: true,
-															disabled: project.status === 'withheld' || isLoading,
-														},
-														{
-															id: 'set-to-draft',
-															action: () =>
-																runBlockingAction('set-to-draft', () => setStatus('draft')),
-															hoverFilled: true,
-															disabled: project.status === 'draft' || isLoading,
-														},
-														{
-															id: 'send-to-review',
-															action: () =>
-																runBlockingAction('send-to-review', () => setStatus('processing')),
-															hoverFilled: true,
-															disabled: project.status === 'processing' || isLoading,
-														},
-													]
+							</template>
+						</template>
+						<template v-if="project">
+							<template v-if="isStaff(auth.user)">
+								<ButtonStyled v-if="replyBody" color="green">
+									<button
+										:disabled="isApproved(project) || isLoading"
+										@click="
+											runBlockingAction('approve-with-reply', () => sendReply(requestedStatus))
 										"
 									>
-										<SpinnerIcon v-if="isDropdownLoading" class="animate-spin" aria-hidden="true" />
-										<DropdownIcon v-else aria-hidden="true" />
-										<template #withhold-reply>
-											<EyeOffIcon aria-hidden="true" />
-											Withhold with reply
-										</template>
-										<template #withhold>
-											<EyeOffIcon aria-hidden="true" />
-											Withhold
-										</template>
-										<template #set-to-draft-reply>
-											<FileTextIcon aria-hidden="true" />
-											Set to draft with reply
-										</template>
-										<template #set-to-draft>
-											<FileTextIcon aria-hidden="true" />
-											Set to draft
-										</template>
-										<template #send-to-review-reply>
-											<ScaleIcon aria-hidden="true" />
-											Send to review with reply
-										</template>
-										<template #send-to-review>
-											<ScaleIcon aria-hidden="true" />
-											Send to review
-										</template>
-									</OverflowMenu>
+										<SpinnerIcon
+											v-if="loadingAction === 'approve-with-reply'"
+											class="animate-spin"
+											aria-hidden="true"
+										/>
+										<CheckIcon v-else aria-hidden="true" />
+										Approve with reply
+									</button>
 								</ButtonStyled>
-							</div>
+								<ButtonStyled v-else color="green">
+									<button
+										:disabled="isApproved(project) || isLoading"
+										@click="runBlockingAction('approve', () => setStatus(requestedStatus))"
+									>
+										<SpinnerIcon
+											v-if="loadingAction === 'approve'"
+											class="animate-spin"
+											aria-hidden="true"
+										/>
+										<CheckIcon v-else aria-hidden="true" />
+										Approve
+									</button>
+								</ButtonStyled>
+								<div class="joined-buttons">
+									<ButtonStyled v-if="replyBody" color="red">
+										<button
+											:disabled="project.status === 'rejected' || isLoading"
+											@click="runBlockingAction('reject-with-reply', () => sendReply('rejected'))"
+										>
+											<SpinnerIcon
+												v-if="loadingAction === 'reject-with-reply'"
+												class="animate-spin"
+												aria-hidden="true"
+											/>
+											<XIcon v-else aria-hidden="true" />
+											Reject with reply
+										</button>
+									</ButtonStyled>
+									<ButtonStyled v-else color="red">
+										<button
+											:disabled="project.status === 'rejected' || isLoading"
+											@click="runBlockingAction('reject', () => setStatus('rejected'))"
+										>
+											<SpinnerIcon
+												v-if="loadingAction === 'reject'"
+												class="animate-spin"
+												aria-hidden="true"
+											/>
+											<XIcon v-else aria-hidden="true" />
+											Reject
+										</button>
+									</ButtonStyled>
+									<ButtonStyled color="red">
+										<OverflowMenu
+											class="btn-dropdown-animation"
+											:disabled="isLoading"
+											:options="
+												replyBody
+													? [
+															{
+																id: 'withhold-reply',
+																color: 'danger',
+																action: () =>
+																	runBlockingAction('withhold-reply', () => sendReply('withheld')),
+																hoverFilled: true,
+																disabled: project.status === 'withheld' || isLoading,
+															},
+															{
+																id: 'set-to-draft-reply',
+																action: () =>
+																	runBlockingAction('set-to-draft-reply', () => sendReply('draft')),
+																hoverFilled: true,
+																disabled: project.status === 'draft' || isLoading,
+															},
+															{
+																id: 'send-to-review-reply',
+																action: () =>
+																	runBlockingAction('send-to-review-reply', () =>
+																		sendReply('processing', true),
+																	),
+																hoverFilled: true,
+																disabled: project.status === 'processing' || isLoading,
+															},
+														]
+													: [
+															{
+																id: 'withhold',
+																color: 'danger',
+																action: () =>
+																	runBlockingAction('withhold', () => setStatus('withheld')),
+																hoverFilled: true,
+																disabled: project.status === 'withheld' || isLoading,
+															},
+															{
+																id: 'set-to-draft',
+																action: () =>
+																	runBlockingAction('set-to-draft', () => setStatus('draft')),
+																hoverFilled: true,
+																disabled: project.status === 'draft' || isLoading,
+															},
+															{
+																id: 'send-to-review',
+																action: () =>
+																	runBlockingAction('send-to-review', () =>
+																		setStatus('processing'),
+																	),
+																hoverFilled: true,
+																disabled: project.status === 'processing' || isLoading,
+															},
+														]
+											"
+										>
+											<SpinnerIcon
+												v-if="isDropdownLoading"
+												class="animate-spin"
+												aria-hidden="true"
+											/>
+											<DropdownIcon v-else aria-hidden="true" />
+											<template #withhold-reply>
+												<EyeOffIcon aria-hidden="true" />
+												Withhold with reply
+											</template>
+											<template #withhold>
+												<EyeOffIcon aria-hidden="true" />
+												Withhold
+											</template>
+											<template #set-to-draft-reply>
+												<FileTextIcon aria-hidden="true" />
+												Set to draft with reply
+											</template>
+											<template #set-to-draft>
+												<FileTextIcon aria-hidden="true" />
+												Set to draft
+											</template>
+											<template #send-to-review-reply>
+												<ScaleIcon aria-hidden="true" />
+												Send to review with reply
+											</template>
+											<template #send-to-review>
+												<ScaleIcon aria-hidden="true" />
+												Send to review
+											</template>
+										</OverflowMenu>
+									</ButtonStyled>
+								</div>
+							</template>
 						</template>
-					</template>
+					</div>
 				</div>
-			</div>
-		</template>
+			</template>
+		</div>
 	</div>
 </template>
 
@@ -604,6 +626,10 @@ async function resubmit() {
 }
 
 const requestedStatus = computed(() => props.project.requested_status ?? 'approved')
+
+defineOptions({
+	inheritAttrs: false,
+})
 </script>
 
 <style lang="scss" scoped>
@@ -611,12 +637,6 @@ const requestedStatus = computed(() => props.project.requested_status ?? 'approv
 	margin-bottom: var(--gap-md);
 }
 
-.messages {
-	display: flex;
-	flex-direction: column;
-	padding: var(--spacing-card-md);
-}
-
 .thread-id {
 	margin-bottom: var(--spacing-card-md);
 	font-weight: bold;
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index 750187244c..9b5a7cac4c 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="message"
+		class="message px-4 py-3"
 		:class="{
 			'has-body': message.body.type === 'text' && !forceCompact,
 			'no-actions': noLinks,
@@ -79,6 +79,12 @@
 				<span v-if="message.body.new_status === 'processing'">
 					submitted the project for review.
 				</span>
+				<span v-else-if="message.body.old_status === 'processing'">
+					reviewed the project and set its status to <Badge :type="message.body.new_status" />.
+				</span>
+				<span v-else-if="message.body.new_status === 'draft'">
+					reverted this project back to a <Badge :type="message.body.new_status" />.
+				</span>
 				<span v-else>
 					changed the project's status from <Badge :type="message.body.old_status" /> to
 					<Badge :type="message.body.new_status" />.
@@ -228,8 +234,6 @@ async function deleteMessage() {
 	gap: var(--gap-size);
 	flex-wrap: wrap;
 	align-items: center;
-	border-radius: var(--size-rounded-card);
-	padding: var(--spacing-card-md);
 	word-break: break-word;
 
 	.avatar,
@@ -260,7 +264,7 @@ async function deleteMessage() {
 
 	&:not(.no-actions):hover,
 	&:not(.no-actions):focus-within {
-		background-color: var(--color-table-alternate-row);
+		background-color: var(--surface-3);
 
 		.message__actions {
 			opacity: 1;
@@ -363,6 +367,7 @@ a:active + .message__author a,
 				'icon body actions'
 				'date date date';
 			grid-template-columns: min-content auto 1fr;
+			grid-template-rows: min-content 1fr auto;
 		}
 	}
 }
@@ -377,7 +382,7 @@ a:active + .message__author a,
 				'icon author date actions'
 				'icon body body actions';
 			grid-template-columns: min-content auto 1fr;
-			grid-template-rows: min-content 1fr auto;
+			grid-template-rows: min-content 1fr;
 		}
 	}
 }
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index dc9bcaa6c4..a753014aac 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -1,11 +1,11 @@
 <template>
 	<div>
-		<div v-if="flags.developerMode" class="mt-4 font-bold text-heading">
+		<div v-if="flags.developerMode" class="m-4 font-bold text-heading">
 			Thread ID:
 			<CopyCode :text="thread.id" />
 		</div>
 
-		<div v-if="sortedMessages.length > 0" class="flex flex-col space-y-4 rounded-xl p-3 sm:p-4">
+		<div v-if="sortedMessages.length > 0" class="flex flex-col rounded-xl">
 			<ThreadMessage
 				v-for="message in sortedMessages"
 				:key="'message-' + message.id"
@@ -28,7 +28,7 @@
 		</template>
 
 		<template v-else>
-			<div>
+			<div class="px-4 py-2">
 				<MarkdownEditor
 					v-model="replyBody"
 					:placeholder="sortedMessages.length > 0 ? 'Reply to thread...' : 'Send a message...'"
@@ -37,7 +37,7 @@
 			</div>
 
 			<div
-				class="mt-4 flex flex-col items-stretch justify-between gap-3 sm:flex-row sm:items-center sm:gap-2"
+				class="mt-4 flex flex-col items-stretch justify-between gap-3 px-4 pb-4 sm:flex-row sm:items-center sm:gap-2"
 			>
 				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
 					<ButtonStyled v-if="sortedMessages.length > 0" color="brand">
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index 6ea39583d2..a94747045d 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -49,6 +49,9 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	labrinthApiCanary: false,
 	dismissedExternalProjectsInfo: false,
 	modpackPermissionsPage: false,
+	showAllBanners: false,
+	alwaysIgnoreErrorBanner: false,
+	showViewProdRouteBanner: false,
 } as const)
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 48c723ed05..9ccf69797f 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -34,25 +34,39 @@
 			'modrinth-parent__no-modal-blurs': !cosmetics.advancedRendering,
 		}"
 	>
-		<RussiaBanner v-if="isRussia" />
-		<TaxIdMismatchBanner v-if="showTinMismatchBanner" />
-		<TaxComplianceBanner v-if="showTaxComplianceBanner" />
+		<RussiaBanner v-if="flags.showAllBanners || isRussia" />
+		<TaxIdMismatchBanner v-if="flags.showAllBanners || showTinMismatchBanner" />
+		<TaxComplianceBanner v-if="flags.showAllBanners || showTaxComplianceBanner" />
 		<VerifyEmailBanner
-			v-if="auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email'"
+			v-if="
+				flags.showAllBanners ||
+				(auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email')
+			"
 			:has-email="!!auth?.user?.email"
 		/>
 		<SubscriptionPaymentFailedBanner
 			v-if="
-				user.subscriptions.some((x) => x.status === 'payment-failed') &&
-				route.path !== '/settings/billing'
+				flags.showAllBanners ||
+				(user.subscriptions.some((x) => x.status === 'payment-failed') &&
+					route.path !== '/settings/billing')
+			"
+		/>
+		<PreviewBanner
+			v-if="
+				flags.showAllBanners || (config.public.buildEnv === 'production' && config.public.preview)
+			"
+		/>
+		<StagingBanner
+			v-if="
+				flags.showAllBanners ||
+				config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com')
 			"
 		/>
-		<PreviewBanner v-if="config.public.buildEnv === 'production' && config.public.preview" />
-		<StagingBanner v-if="config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com')" />
 		<GeneratedStateErrorsBanner
 			:errors="generatedStateErrors"
 			:api-url="config.public.apiBaseUrl"
 		/>
+		<ViewOnModrinthBanner />
 		<header
 			class="desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
 		>
@@ -767,6 +781,7 @@ import SubscriptionPaymentFailedBanner from '~/components/ui/banner/Subscription
 import TaxComplianceBanner from '~/components/ui/banner/TaxComplianceBanner.vue'
 import TaxIdMismatchBanner from '~/components/ui/banner/TaxIdMismatchBanner.vue'
 import VerifyEmailBanner from '~/components/ui/banner/VerifyEmailBanner.vue'
+import ViewOnModrinthBanner from '~/components/ui/banner/ViewOnModrinthBanner.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 8092c8b0db..5a49652719 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -875,23 +875,8 @@
   "dashboard.head-title": {
     "message": "Dashboard"
   },
-  "dashboard.notifications.button.mark-all-as-read": {
-    "message": "Mark all as read"
-  },
-  "dashboard.notifications.button.view-history": {
-    "message": "View history"
-  },
   "dashboard.notifications.empty.no-unread": {
-    "message": "You don't have any unread notifications."
-  },
-  "dashboard.notifications.error.loading": {
-    "message": "Error loading notifications:"
-  },
-  "dashboard.notifications.history.label": {
-    "message": "History"
-  },
-  "dashboard.notifications.history.title": {
-    "message": "Notification history"
+    "message": "You have no unread notifications."
   },
   "dashboard.notifications.link.see-all": {
     "message": "See all"
@@ -902,9 +887,6 @@
   "dashboard.notifications.link.view-more": {
     "message": "View {extraNotifs} more {extraNotifs, plural, one {notification} other {notifications}}"
   },
-  "dashboard.notifications.loading": {
-    "message": "Loading notifications..."
-  },
   "dashboard.organizations.button.create": {
     "message": "Create organization"
   },
@@ -920,6 +902,27 @@
   "dashboard.organizations.title": {
     "message": "Organizations"
   },
+  "dashboard.overview.notifications.button.mark-all-as-read": {
+    "message": "Mark all as read"
+  },
+  "dashboard.overview.notifications.button.view-history": {
+    "message": "View history"
+  },
+  "dashboard.overview.notifications.empty.no-unread": {
+    "message": "You don't have any unread notifications."
+  },
+  "dashboard.overview.notifications.error.loading": {
+    "message": "Error loading notifications:"
+  },
+  "dashboard.overview.notifications.history.label": {
+    "message": "History"
+  },
+  "dashboard.overview.notifications.history.title": {
+    "message": "Notification history"
+  },
+  "dashboard.overview.notifications.loading": {
+    "message": "Loading notifications..."
+  },
   "dashboard.projects.bulk-edit-hint": {
     "message": "You can edit multiple projects at once by selecting them below."
   },
@@ -1754,14 +1757,20 @@
   "layout.banner.add-email.description": {
     "message": "For security reasons, Modrinth needs you to register an email address to your account."
   },
+  "layout.banner.build-fail.always-ignore": {
+    "message": "Always ignore"
+  },
   "layout.banner.build-fail.description": {
     "message": "This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}"
   },
+  "layout.banner.build-fail.ignore": {
+    "message": "Ignore"
+  },
   "layout.banner.build-fail.title": {
     "message": "Error generating state from API when building."
   },
   "layout.banner.preview.description": {
-    "message": "If you meant to access the official Modrinth website, visit <link>https://modrinth.com</link>. This preview deploy is used by Modrinth staff for testing purposes. It was built using <branch-link>{owner}/{branch}</branch-link> @ {commit}."
+    "message": "If you meant to access the official Modrinth website, visit {url}. This preview deploy is used by Modrinth staff for testing purposes. It was built using <branch-link>{owner}/{branch}</branch-link> @ {commit}."
   },
   "layout.banner.preview.title": {
     "message": "This is a preview deploy of the Modrinth website."
@@ -2591,6 +2600,90 @@
   "project.license.title": {
     "message": "License"
   },
+  "project.moderation.admonition.approved.body.private": {
+    "message": "Your project is private, meaning it can only be accessed by you and people you invite"
+  },
+  "project.moderation.admonition.approved.body.public": {
+    "message": "Your project is published and discoverable on Modrinth."
+  },
+  "project.moderation.admonition.approved.body.unlisted": {
+    "message": "Your project is unlisted, meaning it can only be accessed with a direct link and is not discoverable on Modrinth."
+  },
+  "project.moderation.admonition.approved.body.visibility-message": {
+    "message": "You can change the visibility of your project in your project's <visibility-settings-link>visibility settings</visibility-settings-link>."
+  },
+  "project.moderation.admonition.approved.header": {
+    "message": "Project approved"
+  },
+  "project.moderation.admonition.draft.body": {
+    "message": "This is a draft project that cannot be seen by others until submitted for review and approved by Modrinth's moderation team."
+  },
+  "project.moderation.admonition.draft.header": {
+    "message": "Draft project"
+  },
+  "project.moderation.admonition.draft.submit-for-review": {
+    "message": "Once you have completed all required steps and ensured your project complies with <rules-link>Modrinth's Content Rules</rules-link> you can submit your project for review."
+  },
+  "project.moderation.admonition.rejected.address-all-concerns": {
+    "message": "Please address all moderation concerns, including any issues listed in messages below before resubmitting this project."
+  },
+  "project.moderation.admonition.rejected.body": {
+    "message": "Modrinth's moderation team found issues with this project that prevent it from being published on Modrinth, this may include violations of <rules-link>Modrinth's Content Rules</rules-link> or <terms-link>Terms of Use</terms-link>."
+  },
+  "project.moderation.admonition.rejected.header": {
+    "message": "Changes requested"
+  },
+  "project.moderation.admonition.rejected.spam-notice": {
+    "message": "Repeatedly submitting your project without addressing all moderation concerns first may result in account suspension."
+  },
+  "project.moderation.admonition.under-review.body.1": {
+    "message": "Your project is in queue to be reviewed by Modrinth's moderation team."
+  },
+  "project.moderation.admonition.under-review.body.2": {
+    "message": "While you wait, please ensure your project is compliant with <rules-link>Modrinth's Content Rules</rules-link> and <terms-link>Terms of Use</terms-link>."
+  },
+  "project.moderation.admonition.under-review.body.3": {
+    "message": "You may freely modify or update your project while under review. It won't affect your position in the queue."
+  },
+  "project.moderation.admonition.under-review.body.4": {
+    "message": "We aim to review projects within 24-48 hours of submission."
+  },
+  "project.moderation.admonition.under-review.body.delay.1": {
+    "message": "<emphasis>Due to delays, some reviews may take longer than expected, this does not reflect an issue with your submission and is not a cause for alarm.</emphasis>"
+  },
+  "project.moderation.admonition.under-review.body.delay.2": {
+    "message": "<emphasis>We appreciate your patience while our content moderators work hard to keep Modrinth safe.</emphasis>"
+  },
+  "project.moderation.admonition.under-review.header": {
+    "message": "Project under review"
+  },
+  "project.moderation.admonition.withheld.header": {
+    "message": "Unlisted by staff"
+  },
+  "project.moderation.admonition.withheld.still-accessible": {
+    "message": "Your project can still be accessed via a direct link, but will not appear publicly.{requestedStatus, select, unlisted { Based on your selected <visibility-settings-link>visibility settings</visibility-settings-link>, most likely no action is necessary.} other { Please address all moderation concerns, including any issues listed in messages below before resubmitting this project.}}"
+  },
+  "project.moderation.error.unauthorized": {
+    "message": "Unauthorized"
+  },
+  "project.moderation.thread.approved-warning": {
+    "message": "This thread is not actively monitored, but may be reviewed for information about your project if needed."
+  },
+  "project.moderation.thread.help-center-note.1": {
+    "message": "Content moderators cannot provide support for most issues and messages to this thread do not notify staff."
+  },
+  "project.moderation.thread.help-center-note.2": {
+    "message": "If you need assistance or have additional inquiries, please visit the <help-center-link>Modrinth Help Center</help-center-link> and click the blue bubble to contact support."
+  },
+  "project.moderation.thread.moderator-see-user-ui-toggle": {
+    "message": "See what users see"
+  },
+  "project.moderation.thread.private-description": {
+    "message": "This is a private conversation thread with the Modrinth moderators. They may message you with issues concerning this project."
+  },
+  "project.moderation.thread.title": {
+    "message": "Moderation messages"
+  },
   "project.moderation.title": {
     "message": "Moderation"
   },
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 9352ef0b06..0e4ae85771 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -2302,6 +2302,7 @@ const currentMember = computed(() => {
 			payouts_split: 0,
 			avatar_url: auth.value.user.avatar_url,
 			name: auth.value.user.username,
+			staffOnly: true,
 		}
 	}
 
diff --git a/apps/frontend/src/pages/[type]/[id]/moderation.vue b/apps/frontend/src/pages/[type]/[id]/moderation.vue
index b575a48890..b742e729c6 100644
--- a/apps/frontend/src/pages/[type]/[id]/moderation.vue
+++ b/apps/frontend/src/pages/[type]/[id]/moderation.vue
@@ -1,91 +1,90 @@
 <template>
-	<div v-if="canAccess">
-		<section class="universal-card">
-			<h2>Project status</h2>
-			<Badge :type="project.status" />
-			<p v-if="isApproved(project)">
-				Your project has been approved by the moderators and you may freely change project
-				visibility in
-				<router-link :to="`${getProjectLink(project)}/settings`" class="text-link"
-					>your project's settings</router-link
-				>.
-			</p>
-			<div v-else-if="isUnderReview(project)">
-				<p>
-					Modrinth's team of content moderators work hard to review all submitted projects.
-					Typically, you can expect a new project to be reviewed within 24 to 48 hours. Please keep
-					in mind that larger projects, especially modpacks, may require more time to review.
-					Certain holidays or events may also lead to delays depending on moderator availability.
-					Modrinth's moderators will leave a message below if they have any questions or concerns
-					for you.
-				</p>
-				<p>
-					If your review has taken more than 48 hours, check our
-					<a
-						class="text-link"
-						href="https://support.modrinth.com/en/articles/8793355-modrinth-project-review-times"
-						target="_blank"
+	<template v-if="canAccess">
+		<Admonition
+			v-if="userFacingUiVisible && moderationAdmonition"
+			:type="moderationAdmonition.type"
+			class="mb-4"
+			:header="formatMessage(moderationAdmonition.header)"
+		>
+			<template
+				v-for="(message, index) in moderationAdmonition.body"
+				:key="`moderation-admonition.${project.status}+${project.requested_status ?? 'none'}.body.${index}`"
+			>
+				<p v-if="message" class="preserve-lines mb-0 mt-2 leading-tight first:mt-0">
+					<IntlFormatted
+						:message-id="message"
+						:values="{
+							requestedStatus: project.requested_status ?? 'none',
+						}"
 					>
-						support article on review times
-					</a>
-					for moderation delays.
-				</p>
-			</div>
-			<template v-else-if="isRejected(project)">
-				<p>
-					Your project does not currently meet Modrinth's
-					<nuxt-link to="/legal/rules" class="text-link" target="_blank">content rules</nuxt-link>
-					and the moderators have requested you make changes before it can be approved. Read the
-					messages from the moderators below and address their comments before resubmitting.
-				</p>
-				<p class="warning">
-					<IssuesIcon /> Repeated submissions without addressing the moderators' comments may result
-					in an account suspension.
+						<template #rules-link="{ children }">
+							<nuxt-link to="/legal/rules" class="text-link" target="_blank">
+								<component :is="() => normalizeChildren(children)" />
+							</nuxt-link>
+						</template>
+						<template #terms-link="{ children }">
+							<nuxt-link to="/legal/terms" class="text-link" target="_blank">
+								<component :is="() => normalizeChildren(children)" />
+							</nuxt-link>
+						</template>
+						<template #visibility-settings-link="{ children }">
+							<router-link :to="`${getProjectLink(project)}/settings#visibility`" class="text-link">
+								<component :is="() => normalizeChildren(children)" />
+							</router-link>
+						</template>
+						<template #emphasis="{ children }">
+							<span class="font-semibold">
+								<component :is="() => normalizeChildren(children)" />
+							</span>
+						</template>
+					</IntlFormatted>
 				</p>
 			</template>
-			<h3>Current visibility</h3>
-			<ul class="visibility-info">
-				<li v-if="isListed(project)">
-					<CheckIcon class="good" />
-					Listed in search results
-				</li>
-				<li v-else>
-					<XIcon class="bad" />
-					Not listed in search results
-				</li>
-				<li v-if="isListed(project)">
-					<CheckIcon class="good" />
-					Listed on the profiles of members
-				</li>
-				<li v-else>
-					<XIcon class="bad" />
-					Not listed on the profiles of members
-				</li>
-				<li v-if="isPrivate(project)">
-					<XIcon class="bad" />
-					Not accessible with a direct link
-				</li>
-				<li v-else>
-					<CheckIcon class="good" />
-					Accessible with a direct link
-				</li>
-			</ul>
-		</section>
-		<section id="messages" class="universal-card">
-			<h2>Messages</h2>
-			<p>
-				This is a private conversation thread with the Modrinth moderators. They may message you
-				with issues concerning this project. This thread is only checked when you submit your
-				project for review. For additional inquiries, please go to the
-				<a class="text-link" href="https://support.modrinth.com" target="_blank">
-					Modrinth Help Center
-				</a>
-				and click the green bubble to contact support.
-			</p>
-			<p v-if="isApproved(project)" class="warning">
-				<IssuesIcon /> The moderators do not actively monitor this chat. However, they may still see
-				messages here if there is a problem with your project.
-			</p>
+		</Admonition>
+		<div class="card-shadow mb-6 rounded-2xl border border-solid border-surface-4 bg-surface-3">
+			<div class="flex flex-col p-4">
+				<div class="flex items-center justify-between">
+					<h2 id="messages" class="m-0 text-xl font-semibold text-contrast">
+						{{ formatMessage(messages.threadSectionTitle) }}
+					</h2>
+					<div v-if="currentMember?.staffOnly" class="flex items-center gap-2">
+						<Toggle id="moderator-see-user-ui-toggle" v-model="moderatorSeeUserUi" small />
+						<label for="moderator-see-user-ui-toggle">
+							{{ formatMessage(messages.moderatorSeeUserUiToggle) }}
+						</label>
+					</div>
+				</div>
+				<template v-if="userFacingUiVisible">
+					<p class="m-0 mt-2 leading-tight">
+						{{ formatMessage(messages.threadPrivateDescription) }}
+					</p>
+					<p class="mb-0 mt-3 leading-tight">
+						<IntlFormatted :message-id="messages.threadHelpCenterNote1">
+							<template #help-center-link="{ children }">
+								<a class="text-link" href="https://support.modrinth.com" target="_blank">
+									<component :is="() => normalizeChildren(children)" />
+								</a>
+							</template>
+						</IntlFormatted>
+					</p>
+					<p class="mb-0 mt-2 leading-tight">
+						<IntlFormatted :message-id="messages.threadHelpCenterNote2">
+							<template #help-center-link="{ children }">
+								<a class="text-link" href="https://support.modrinth.com" target="_blank">
+									<component :is="() => normalizeChildren(children)" />
+								</a>
+							</template>
+						</IntlFormatted>
+					</p>
+					<p
+						v-if="isApproved(project)"
+						class="mb-0 mt-3 flex items-center gap-2 font-semibold text-orange"
+					>
+						<IssuesIcon />
+						{{ formatMessage(messages.threadApprovedWarning) }}
+					</p>
+				</template>
+			</div>
 			<ConversationThread
 				v-if="thread"
 				:thread="thread"
@@ -93,45 +92,276 @@
 				:set-status="setStatus"
 				:current-member="currentMember"
 				:auth="auth"
+				class="overflow-clip rounded-b-2xl border-0 border-t border-solid border-surface-4 bg-surface-2"
 				@update-thread="updateThread"
 			/>
-		</section>
-	</div>
+		</div>
+	</template>
 </template>
-<script setup>
-import { CheckIcon, IssuesIcon, XIcon } from '@modrinth/assets'
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { IssuesIcon } from '@modrinth/assets'
 import {
-	Badge,
+	Admonition,
+	commonMessages,
+	defineMessage,
+	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
+	IntlFormatted,
+	type MessageDescriptor,
+	normalizeChildren,
+	Toggle,
+	useVIntl,
 } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, watch } from 'vue'
+import { computed, type Ref, ref, watch } from 'vue'
 
 import ConversationThread from '~/components/ui/thread/ConversationThread.vue'
-import {
-	getProjectLink,
-	isApproved,
-	isListed,
-	isPrivate,
-	isRejected,
-	isUnderReview,
-} from '~/helpers/projects.js'
+import { getProjectLink, isApproved, isRejected, isUnderReview } from '~/helpers/projects.js'
+
+const { formatMessage } = useVIntl()
+
+const showDelayMessage = ref(true)
+
+type ProjectPageMember = Labrinth.Projects.v3.TeamMember & { staffOnly?: boolean }
+
+const messages = defineMessages({
+	admonitionRejectedBody: {
+		id: 'project.moderation.admonition.rejected.body',
+		defaultMessage:
+			"Modrinth's moderation team found issues with this project that prevent it from being published on Modrinth, this may include violations of <rules-link>Modrinth's Content Rules</rules-link> or <terms-link>Terms of Use</terms-link>.",
+	},
+	admonitionRejectedSpamNotice: {
+		id: 'project.moderation.admonition.rejected.spam-notice',
+		defaultMessage:
+			'Repeatedly submitting your project without addressing all moderation concerns first may result in account suspension.',
+	},
+	threadSectionTitle: {
+		id: 'project.moderation.thread.title',
+		defaultMessage: 'Moderation messages',
+	},
+	moderatorSeeUserUiToggle: {
+		id: 'project.moderation.thread.moderator-see-user-ui-toggle',
+		defaultMessage: 'See what users see',
+	},
+	threadPrivateDescription: {
+		id: 'project.moderation.thread.private-description',
+		defaultMessage:
+			'This is a private conversation thread with the Modrinth moderators. They may message you with issues concerning this project.',
+	},
+	threadHelpCenterNote1: {
+		id: 'project.moderation.thread.help-center-note.1',
+		defaultMessage:
+			'Content moderators cannot provide support for most issues and messages to this thread do not notify staff.',
+	},
+	threadHelpCenterNote2: {
+		id: 'project.moderation.thread.help-center-note.2',
+		defaultMessage:
+			'If you need assistance or have additional inquiries, please visit the <help-center-link>Modrinth Help Center</help-center-link> and click the blue bubble to contact support.',
+	},
+	threadApprovedWarning: {
+		id: 'project.moderation.thread.approved-warning',
+		defaultMessage:
+			'This thread is not actively monitored, but may be reviewed for information about your project if needed.',
+	},
+	approvedProjectVisibilityMessage: {
+		id: 'project.moderation.admonition.approved.body.visibility-message',
+		defaultMessage:
+			"You can change the visibility of your project in your project's <visibility-settings-link>visibility settings</visibility-settings-link>.",
+	},
+})
 
 const { addNotification } = injectNotificationManager()
-const { projectV2: project, currentMember, invalidate } = injectProjectPageContext()
+const {
+	projectV2: project,
+	currentMember: currentMemberRaw,
+	invalidate,
+	allMembers,
+} = injectProjectPageContext()
+const currentMember = currentMemberRaw as Ref<ProjectPageMember | null>
 
 const canAccess = computed(() => !!currentMember.value)
+const userFacingUiVisible = computed(
+	() => !!currentMember.value && (!currentMember.value.staffOnly || moderatorSeeUserUi.value),
+)
+
+const approvedAdmonitionMessage = computed<MessageDescriptor | null>(() => {
+	switch (project.value?.status) {
+		case 'approved':
+		case 'archived':
+			return defineMessage({
+				id: 'project.moderation.admonition.approved.body.public',
+				defaultMessage: 'Your project is published and discoverable on Modrinth.',
+			})
+		case 'unlisted':
+			return defineMessage({
+				id: 'project.moderation.admonition.approved.body.unlisted',
+				defaultMessage:
+					'Your project is unlisted, meaning it can only be accessed with a direct link and is not discoverable on Modrinth.',
+			})
+
+		case 'private':
+			return defineMessage({
+				id: 'project.moderation.admonition.approved.body.private',
+				defaultMessage:
+					'Your project is private, meaning it can only be accessed by you and people you invite',
+			})
+		default:
+			return null
+	}
+})
+
+const moderationAdmonition = computed<{
+	type: InstanceType<typeof Admonition>['type']
+	header: MessageDescriptor
+	body: (MessageDescriptor | null)[]
+} | null>(() => {
+	const currentProject = project.value
+
+	if (currentProject.status === 'draft') {
+		return {
+			type: 'info',
+			header: defineMessage({
+				id: 'project.moderation.admonition.draft.header',
+				defaultMessage: 'Draft project',
+			}),
+			body: [
+				defineMessage({
+					id: 'project.moderation.admonition.draft.body',
+					defaultMessage:
+						"This is a draft project that cannot be seen by others until submitted for review and approved by Modrinth's moderation team.",
+				}),
+				defineMessage({
+					id: 'project.moderation.admonition.draft.submit-for-review',
+					defaultMessage: `Once you have completed all required steps and ensured your project complies with <rules-link>Modrinth's Content Rules</rules-link> you can submit your project for review.`,
+				}),
+			],
+		}
+	}
+
+	if (isApproved(currentProject) && approvedAdmonitionMessage.value) {
+		return {
+			type: 'success',
+			header: defineMessage({
+				id: 'project.moderation.admonition.approved.header',
+				defaultMessage: 'Project approved',
+			}),
+			body: [approvedAdmonitionMessage.value, messages.approvedProjectVisibilityMessage],
+		}
+	}
+
+	if (isUnderReview(currentProject)) {
+		return {
+			type: 'moderation',
+			header: defineMessage({
+				id: 'project.moderation.admonition.under-review.header',
+				defaultMessage: 'Project under review',
+			}),
+			body: [
+				defineMessage({
+					id: 'project.moderation.admonition.under-review.body.1',
+					defaultMessage: `Your project is in queue to be reviewed by Modrinth's moderation team.`,
+				}),
+				defineMessage({
+					id: 'project.moderation.admonition.under-review.body.2',
+					defaultMessage: `While you wait, please ensure your project is compliant with <rules-link>Modrinth's Content Rules</rules-link> and <terms-link>Terms of Use</terms-link>.`,
+				}),
+				defineMessage({
+					id: 'project.moderation.admonition.under-review.body.3',
+					defaultMessage: `You may freely modify or update your project while under review. It won't affect your position in the queue.`,
+				}),
+				defineMessage({
+					id: 'project.moderation.admonition.under-review.body.4',
+					defaultMessage: `We aim to review projects within 24-48 hours of submission.`,
+				}),
+				showDelayMessage.value
+					? defineMessage({
+							id: 'project.moderation.admonition.under-review.body.delay.1',
+							defaultMessage: `<emphasis>Due to delays, some reviews may take longer than expected, this does not reflect an issue with your submission and is not a cause for alarm.</emphasis>`,
+						})
+					: null,
+				showDelayMessage.value
+					? defineMessage({
+							id: 'project.moderation.admonition.under-review.body.delay.2',
+							defaultMessage: `<emphasis>We appreciate your patience while our content moderators work hard to keep Modrinth safe.</emphasis>`,
+						})
+					: null,
+			],
+		}
+	}
+
+	if (currentProject.status === 'withheld') {
+		return {
+			type: 'warning',
+			header: defineMessage({
+				id: 'project.moderation.admonition.withheld.header',
+				defaultMessage: 'Unlisted by staff',
+			}),
+			body: [
+				messages.admonitionRejectedBody,
+				defineMessage({
+					id: 'project.moderation.admonition.withheld.still-accessible',
+					defaultMessage:
+						'Your project can still be accessed via a direct link, but will not appear publicly.{requestedStatus, select, unlisted { Based on your selected <visibility-settings-link>visibility settings</visibility-settings-link>, most likely no action is necessary.} other { Please address all moderation concerns, including any issues listed in messages below before resubmitting this project.}}',
+				}),
+				messages.admonitionRejectedSpamNotice,
+			],
+		}
+	}
+
+	if (isRejected(currentProject)) {
+		return {
+			type: 'critical',
+			header: defineMessage({
+				id: 'project.moderation.admonition.rejected.header',
+				defaultMessage: 'Changes requested',
+			}),
+			body: [
+				messages.admonitionRejectedBody,
+				defineMessage({
+					id: 'project.moderation.admonition.rejected.address-all-concerns',
+					defaultMessage:
+						'Please address all moderation concerns, including any issues listed in messages below before resubmitting this project.',
+				}),
+				messages.admonitionRejectedSpamNotice,
+			],
+		}
+	}
+
+	return null
+})
+
+const moderatorSeeUserUiCookie = useCookie('moderation-see-user-ui', {
+	default: () => false,
+	maxAge: 60 * 60 * 24 * 365,
+	sameSite: 'lax',
+	path: '/',
+})
+
+const moderatorSeeUserUi = computed<boolean>({
+	get() {
+		return moderatorSeeUserUiCookie.value ?? false
+	},
+	set(value: boolean) {
+		moderatorSeeUserUiCookie.value = value
+	},
+})
 
 watch(
-	[currentMember, project],
+	[currentMember, allMembers],
 	() => {
-		if (project.value && !canAccess.value) {
+		if (allMembers.value.length > 0 && !canAccess.value) {
 			showError({
 				fatal: true,
 				statusCode: 401,
-				statusMessage: 'Unauthorized',
+				statusMessage: formatMessage(
+					defineMessage({
+						id: 'project.moderation.error.unauthorized',
+						defaultMessage: 'Unauthorized',
+					}),
+				),
 			})
 		}
 	},
@@ -148,14 +378,17 @@ const { data: thread } = useQuery({
 	enabled: computed(() => !!project.value?.thread_id),
 })
 
-function updateThread(newThread) {
+function updateThread(newThread: Labrinth.Threads.v3.Thread | null | undefined) {
 	const threadId = newThread?.id ?? project.value?.thread_id
 	if (!threadId) return
 
-	queryClient.setQueryData(['thread', threadId], newThread)
+	queryClient.setQueryData<Labrinth.Threads.v3.Thread | null | undefined>(
+		['thread', threadId],
+		newThread,
+	)
 }
 
-async function setStatus(status) {
+async function setStatus(status: Labrinth.Projects.v2.ProjectStatus) {
 	startLoading()
 
 	try {
@@ -166,69 +399,21 @@ async function setStatus(status) {
 		await queryClient.invalidateQueries({ queryKey: ['thread', project.value?.thread_id] })
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
+			title: formatMessage(commonMessages.errorNotificationTitle),
+			text: getErrorDescription(err),
 			type: 'error',
 		})
 	}
 
 	stopLoading()
 }
-</script>
-<style lang="scss" scoped>
-.stacked {
-	display: flex;
-	flex-direction: column;
-}
 
-.status-message {
-	:deep(.badge) {
-		display: contents;
-
-		svg {
-			vertical-align: top;
-			margin: 0;
-		}
+function getErrorDescription(err: unknown): string {
+	if (typeof err === 'object' && err !== null && 'data' in err) {
+		const data = (err as { data?: { description?: string } }).data
+		if (data?.description) return data.description
 	}
 
-	p:last-child {
-		margin-bottom: 0;
-	}
-}
-
-.unavailable-error {
-	.code {
-		margin-top: var(--spacing-card-sm);
-	}
-
-	svg {
-		vertical-align: top;
-	}
-}
-
-.visibility-info {
-	padding: 0;
-	list-style: none;
-
-	li {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-card-xs);
-	}
+	return err instanceof Error ? err.message : String(err)
 }
-
-svg {
-	&.good {
-		color: var(--color-green);
-	}
-
-	&.bad {
-		color: var(--color-red);
-	}
-}
-
-.warning {
-	color: var(--color-orange);
-	font-weight: bold;
-}
-</style>
+</script>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index a96fe4bad4..9e755434f0 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -230,7 +230,7 @@
 						/>
 					</div>
 				</template>
-				<div>
+				<div id="visibility">
 					<label>
 						<span class="label__title">Visibility</span>
 					</label>
@@ -242,36 +242,6 @@
 							:disabled="!hasPermission"
 							:max-height="500"
 						/>
-						<div>If approved by the moderators:</div>
-						<ul class="visibility-info m-0">
-							<li>
-								<CheckIcon
-									v-if="visibility === 'approved' || visibility === 'archived'"
-									class="good"
-								/>
-								<XIcon v-else class="bad" />
-								{{ hasModifiedVisibility() ? 'Will be v' : 'V' }}isible in search
-							</li>
-							<li>
-								<XIcon v-if="visibility === 'unlisted' || visibility === 'private'" class="bad" />
-								<CheckIcon v-else class="good" />
-								{{ hasModifiedVisibility() ? 'Will be v' : 'V' }}isible on profile
-							</li>
-							<li>
-								<CheckIcon v-if="visibility !== 'private'" class="good" />
-								<IssuesIcon
-									v-else
-									v-tooltip="{
-										content:
-											visibility === 'private'
-												? 'Only members will be able to view the project.'
-												: '',
-									}"
-									class="warn"
-								/>
-								{{ hasModifiedVisibility() ? 'Will be v' : 'V' }}isible via URL
-							</li>
-						</ul>
 					</div>
 				</div>
 			</div>
@@ -360,16 +330,7 @@
 </template>
 
 <script setup>
-import {
-	CheckIcon,
-	ImageIcon,
-	IssuesIcon,
-	ScaleIcon,
-	TrashIcon,
-	TriangleAlertIcon,
-	UploadIcon,
-	XIcon,
-} from '@modrinth/assets'
+import { ImageIcon, ScaleIcon, TrashIcon, TriangleAlertIcon, UploadIcon } from '@modrinth/assets'
 import { MIN_SUMMARY_CHARS } from '@modrinth/moderation'
 import {
 	Avatar,
@@ -605,14 +566,6 @@ async function updateMonetizationStatus(status) {
 	}
 }
 
-const hasModifiedVisibility = () => {
-	const originalVisibility = tags.value.approvedStatuses.includes(project.value.status)
-		? project.value.status
-		: project.value.requested_status
-
-	return originalVisibility !== visibility.value
-}
-
 async function handleSave() {
 	saving.value = true
 	try {
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index dbf11ee9b7..d3fabd8988 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -94,31 +94,31 @@ const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
 	historyLabel: {
-		id: 'dashboard.notifications.history.label',
+		id: 'dashboard.overview.notifications.history.label',
 		defaultMessage: 'History',
 	},
 	notificationHistoryTitle: {
-		id: 'dashboard.notifications.history.title',
+		id: 'dashboard.overview.notifications.history.title',
 		defaultMessage: 'Notification history',
 	},
 	viewHistory: {
-		id: 'dashboard.notifications.button.view-history',
+		id: 'dashboard.overview.notifications.button.view-history',
 		defaultMessage: 'View history',
 	},
 	markAllAsRead: {
-		id: 'dashboard.notifications.button.mark-all-as-read',
+		id: 'dashboard.overview.notifications.button.mark-all-as-read',
 		defaultMessage: 'Mark all as read',
 	},
 	loadingNotifications: {
-		id: 'dashboard.notifications.loading',
+		id: 'dashboard.overview.notifications.loading',
 		defaultMessage: 'Loading notifications...',
 	},
 	errorLoadingNotifications: {
-		id: 'dashboard.notifications.error.loading',
+		id: 'dashboard.overview.notifications.error.loading',
 		defaultMessage: 'Error loading notifications:',
 	},
 	noUnreadNotifications: {
-		id: 'dashboard.notifications.empty.no-unread',
+		id: 'dashboard.overview.notifications.empty.no-unread',
 		defaultMessage: "You don't have any unread notifications.",
 	},
 })
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index 10786ab0d9..c18ad5d017 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -462,7 +462,7 @@ const emptyStateDescription = computed(() => {
 		return 'Check that your search query is correct!'
 	}
 	if (currentFilterType.value !== DEFAULT_FILTER_TYPE) {
-		return `There are no ${currentFilterType.value.toLowerCase()} in the queue`
+		return `There are no ${currentFilterType.value.toLowerCase()} in the queue.`
 	}
 	return 'you will probably never see this but if you do, congrats!!! :D'
 })
diff --git a/apps/frontend/src/pages/settings/flags.vue b/apps/frontend/src/pages/settings/flags.vue
index d175e0f471..796f6f6a69 100644
--- a/apps/frontend/src/pages/settings/flags.vue
+++ b/apps/frontend/src/pages/settings/flags.vue
@@ -50,7 +50,7 @@ useSeoMeta({
 			wrapper-class="w-full rounded-xl bg-bg-raised"
 		/>
 	</div>
-	<div class="flex flex-col gap-2">
+	<div class="mb-6 flex flex-col gap-2">
 		<div
 			v-for="flag in filteredFlags"
 			:key="`flag-${flag}`"
diff --git a/packages/moderation/src/data/messages/post-approval/missed-deadline.md b/packages/moderation/src/data/messages/post-approval/missed-deadline.md
index e8b6af1299..deb0bebd14 100644
--- a/packages/moderation/src/data/messages/post-approval/missed-deadline.md
+++ b/packages/moderation/src/data/messages/post-approval/missed-deadline.md
@@ -1,2 +1,3 @@
-In accordance with the above notice, this project will be temporarily %STATUS%.</br>
+In accordance with the above notice, this project will be temporarily %STATUS%.
+
 We ask that you resubmit this project once all moderation concerns have been addressed.
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index e057d7aff1..9de5d88dd1 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -24,7 +24,7 @@
 					{{ relativeTimeLabel }}
 				</span>
 			</div>
-			<div class="font-normal text-contrast/85">
+			<div class="font-normal text-contrast/85 leading-tight">
 				<slot>{{ body }}</slot>
 			</div>
 			<div v-if="showActionsUnderneath || $slots.actions" class="mt-2">
@@ -80,7 +80,7 @@ import ButtonStyled from './ButtonStyled.vue'
 
 const props = withDefaults(
 	defineProps<{
-		type?: 'info' | 'warning' | 'critical' | 'success'
+		type?: 'info' | 'warning' | 'critical' | 'success' | 'moderation'
 		header?: string
 		body?: string
 		showActionsUnderneath?: boolean
@@ -141,6 +141,7 @@ const typeClasses = {
 	warning: 'border-brand-orange bg-bg-orange',
 	critical: 'border-brand-red bg-bg-red',
 	success: 'border-brand-green bg-bg-green',
+	moderation: 'border-brand-orange bg-bg-orange',
 }
 
 const iconClasses = {
@@ -148,6 +149,7 @@ const iconClasses = {
 	warning: 'text-brand-orange',
 	critical: 'text-brand-red',
 	success: 'text-brand-green',
+	moderation: 'text-brand-orange',
 }
 
 const buttonColors = {
@@ -155,6 +157,7 @@ const buttonColors = {
 	warning: 'orange',
 	critical: 'red',
 	success: 'green',
+	moderation: 'orange',
 } as const
 
 const progressTrackClasses = {
@@ -162,6 +165,7 @@ const progressTrackClasses = {
 	warning: 'bg-brand-orange/20',
 	critical: 'bg-brand-red/20',
 	success: 'bg-brand-green/20',
+	moderation: 'bg-brand-orange/20',
 }
 
 const progressFillClasses = {
diff --git a/packages/ui/src/components/base/Badge.vue b/packages/ui/src/components/base/Badge.vue
index e8bf21d2d4..3586fd0af7 100644
--- a/packages/ui/src/components/base/Badge.vue
+++ b/packages/ui/src/components/base/Badge.vue
@@ -21,10 +21,10 @@
 			<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.approvedLabel) }}
 		</template>
 		<template v-else-if="type === 'unlisted'">
-			<EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.unlistedLabel) }}
+			<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.unlistedLabel) }}
 		</template>
 		<template v-else-if="type === 'withheld'">
-			<EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.withheldLabel) }}
+			<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.withheldLabel) }}
 		</template>
 		<template v-else-if="type === 'private'">
 			<LockIcon aria-hidden="true" /> {{ formatMessage(messages.privateLabel) }}
@@ -89,9 +89,9 @@ import {
 	BugIcon,
 	CalendarIcon,
 	CheckIcon,
-	EyeOffIcon,
 	FileTextIcon,
 	GlobeIcon,
+	LinkIcon,
 	LockIcon,
 	ModrinthIcon,
 	ScaleIcon,
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index e1df616cec..76b095746e 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -2,8 +2,8 @@
 	<nav
 		v-if="filteredLinks.length > 1"
 		ref="scrollContainer"
-		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold drop-shadow-xl"
-		:class="{ 'shadow-sm': mode === 'navigation' }"
+		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		:class="{ 'drop-shadow-xl': mode === 'navigation' }"
 	>
 		<template v-if="mode === 'navigation'">
 			<RouterLink
diff --git a/packages/ui/src/components/nav/PagewideBanner.vue b/packages/ui/src/components/nav/PagewideBanner.vue
index 913fb1ec42..4de3356089 100644
--- a/packages/ui/src/components/nav/PagewideBanner.vue
+++ b/packages/ui/src/components/nav/PagewideBanner.vue
@@ -1,6 +1,10 @@
 <template>
 	<div
-		:class="['banner-grid relative border-b-2 border-solid border-0', containerClasses[variant]]"
+		:class="[
+			'banner-grid relative border-b-2 border-solid border-0 z-10',
+			containerClasses[variant],
+			{ 'no-actions': !$slots.actions, slim: slim },
+		]"
 	>
 		<div
 			:class="[
@@ -16,12 +20,20 @@
 			<slot name="description" />
 		</div>
 
-		<div v-if="$slots.actions" class="grid-area-[actions]">
+		<div v-if="$slots.actions" class="grid-area-[actions] flex items-center gap-2">
 			<slot name="actions" />
 		</div>
 
-		<div v-if="$slots.actions_right" class="grid-area-[actions_right]">
-			<slot name="actions_right" />
+		<div
+			v-if="$slots.actions_right || $slots.actions_top_right"
+			class="grid-area-[actions_right] flex flex-col gap-2 items-end"
+		>
+			<div v-if="$slots.actions_top_right" class="flex items-center gap-2 justify-end">
+				<slot name="actions_top_right" />
+			</div>
+			<div v-if="$slots.actions_right" class="flex items-center gap-2 justify-end my-auto">
+				<slot name="actions_right" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -29,9 +41,15 @@
 <script lang="ts" setup>
 import { getSeverityIcon } from '../../utils'
 
-defineProps<{
-	variant: 'error' | 'warning' | 'info'
-}>()
+withDefaults(
+	defineProps<{
+		variant: 'error' | 'warning' | 'info'
+		slim?: boolean
+	}>(),
+	{
+		slim: false,
+	},
+)
 
 const containerClasses = {
 	error: 'bg-banners-error-bg text-banners-error-text border-banners-error-border',
@@ -58,6 +76,16 @@ const iconClasses = {
 	padding-inline: max(calc((100% - 80rem) / 2 + var(--gap-md)), var(--gap-xl));
 }
 
+.banner-grid.no-actions {
+	grid-template-areas:
+		'title         actions_right'
+		'description   actions_right';
+}
+
+.banner-grid.slim {
+	@apply flex py-4 gap-2 items-center;
+}
+
 .grid-area-\[title\] {
 	grid-area: title;
 }
diff --git a/packages/ui/src/utils/auto-icons.ts b/packages/ui/src/utils/auto-icons.ts
index 6750446a60..e6094446f7 100644
--- a/packages/ui/src/utils/auto-icons.ts
+++ b/packages/ui/src/utils/auto-icons.ts
@@ -25,6 +25,8 @@ import {
 	PayPalIcon,
 	PlugIcon,
 	PolygonIcon,
+	ScaleIcon,
+	ServerIcon,
 	UnknownIcon,
 	UpdatedIcon,
 	USDCColorIcon,
@@ -49,6 +51,7 @@ export const PROJECT_TYPE_ICONS: Record<ProjectType, Component> = {
 	plugin: PlugIcon,
 	datapack: BracesIcon,
 	project: BoxIcon,
+	minecraft_java_server: ServerIcon,
 }
 
 export const PAYMENT_METHOD_ICONS: Record<string, Component> = {
@@ -68,6 +71,7 @@ export const SEVERITY_ICONS: Record<string, Component> = {
 	error: XCircleIcon,
 	critical: XCircleIcon,
 	success: CheckCircleIcon,
+	moderation: ScaleIcon,
 }
 
 export const PROJECT_STATUS_ICONS: Record<ProjectStatus, Component> = {
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index 5850da392d..286c823460 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -119,7 +119,7 @@ export const formatProjectType = (name, short = false) => {
 			return 'PLG'
 		} else if (name === 'datapack') {
 			return 'DPK'
-		} else if (name === 'server') {
+		} else if (name === 'minecraft_java_server') {
 			return 'SRV'
 		}
 	}