diff --git a/apps/frontend/src/components/ui/auth/CreateAccount.vue b/apps/frontend/src/components/ui/auth/CreateAccount.vue
index 013a469afe..46d4dc5ccd 100644
--- a/apps/frontend/src/components/ui/auth/CreateAccount.vue
+++ b/apps/frontend/src/components/ui/auth/CreateAccount.vue
@@ -244,7 +244,7 @@ const messages = defineMessages({
 		defaultMessage: 'Please enter a valid date of birth. Year cannot be 0000.',
 	},
 	under13HelperText: {
-		id: 'auth.create-account.date-of-birth.under13-helper',
+		id: 'auth.create-account.date-of-birth.not-meet-age-requirement',
 		defaultMessage: 'You do not meet the age requirement to create an account at Modrinth.',
 	},
 	ageRequirementWarningTitle: {
diff --git a/apps/frontend/src/components/ui/moderation/ModerationItemHeader.vue b/apps/frontend/src/components/ui/moderation/ModerationItemHeader.vue
new file mode 100644
index 0000000000..5666f690fb
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/ModerationItemHeader.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Avatar } from '@modrinth/ui'
+
+import ModerationOwnerLink, { type ModerationOwner } from './ModerationOwnerLink.vue'
+export type { ModerationOwner }
+
+defineProps<{
+	avatarUrl?: string | null
+	title: string
+	titleTo?: string | null
+	owner?: ModerationOwner | null
+	circle?: boolean
+	padTransparentCorners?: boolean
+}>()
+</script>
+
+<template>
+	<div class="flex items-center gap-3">
+		<NuxtLink v-if="titleTo" :to="titleTo" target="_blank" tabindex="-1">
+			<Avatar
+				:src="avatarUrl"
+				:circle="circle"
+				:pad-transparent-corners="padTransparentCorners"
+				no-shadow
+				size="4rem"
+			/>
+		</NuxtLink>
+		<Avatar
+			v-else
+			:src="avatarUrl"
+			:circle="circle"
+			:pad-transparent-corners="padTransparentCorners"
+			no-shadow
+			size="4rem"
+		/>
+
+		<div class="flex flex-col gap-1.5">
+			<div class="flex flex-wrap items-center gap-2">
+				<NuxtLink
+					v-if="titleTo"
+					:to="titleTo"
+					target="_blank"
+					class="text-lg font-semibold text-contrast hover:underline focus-visible:underline"
+				>
+					{{ title }}
+				</NuxtLink>
+				<span v-else class="text-lg font-semibold text-contrast">
+					{{ title }}
+				</span>
+				<slot name="badges" />
+			</div>
+
+			<ModerationOwnerLink v-if="owner" :owner="owner" />
+			<slot name="subtitle" />
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationOwnerLink.vue b/apps/frontend/src/components/ui/moderation/ModerationOwnerLink.vue
new file mode 100644
index 0000000000..bf73c0b7a8
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/ModerationOwnerLink.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Avatar, CopyCode } from '@modrinth/ui'
+
+export type ModerationOwner = {
+	kind: 'user' | 'organization'
+	id: string
+	name: string
+	icon_url?: string | null
+}
+
+defineProps<{
+	owner: ModerationOwner
+}>()
+</script>
+
+<template>
+	<div class="flex items-center gap-2">
+		<NuxtLink
+			:to="`/${owner.kind}/${owner.id}`"
+			target="_blank"
+			class="flex items-center gap-1 text-sm font-medium text-secondary hover:underline"
+		>
+			<Avatar :src="owner.icon_url" :circle="owner.kind === 'user'" size="1.5rem" no-shadow />
+			{{ owner.name }}
+		</NuxtLink>
+		<ClientOnly>
+			<CopyCode
+				v-tooltip="owner.kind === 'organization' ? 'Copy organization ID' : 'Copy user ID'"
+				:text="owner.id"
+			/>
+		</ClientOnly>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
index 7df3d9deb1..53275963bf 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
@@ -102,12 +102,20 @@
 				</span>
 
 				<div class="flex items-center gap-2">
-					<IconButton v-tooltip="'Copy ID'" :label="'Copy ID'" @click="copyId">
-						<ClipboardCopyIcon />
-					</IconButton>
-					<IconButton v-tooltip="'Copy link'" :label="'Copy link'" @click="copyLink">
-						<LinkIcon />
-					</IconButton>
+					<CopyCode v-tooltip="'Copy project ID'" :text="queueEntry.project.id" />
+					<CopyLinkButton
+						v-tooltip="'Copy project link'"
+						:url="`https://modrinth.com/project/${queueEntry.project.id}`"
+					/>
+					<ButtonLink
+						v-tooltip="'Open moderation thread'"
+						:href="`/project/${queueEntry.project.id}/moderation`"
+						target="_blank"
+						circular
+						icon-only
+					>
+						<ExternalIcon />
+					</ButtonLink>
 					<IconButton
 						v-tooltip="'Begin review'"
 						type="colored"
@@ -124,13 +132,15 @@
 </template>
 
 <script setup lang="ts">
-import { ClipboardCopyIcon, FileIcon, LinkIcon, ScaleIcon } from '@modrinth/assets'
+import { ExternalIcon, FileIcon, ScaleIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	Badge,
+	ButtonLink,
+	CopyCode,
+	CopyLinkButton,
 	getProjectTypeIcon,
 	IconButton,
-	injectNotificationManager,
 	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
@@ -140,7 +150,6 @@ import { computed } from 'vue'
 
 import type { ModerationProject } from '~/helpers/moderation'
 
-const { addNotification } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 const formatDateTimeFull = useFormatDateTime({
 	weekday: 'short',
@@ -199,28 +208,6 @@ const formattedDate = computed(() => {
 	}
 })
 
-function copyLink() {
-	const base = window.location.origin
-	const projectUrl = `${base}/project/${projectRouteParam.value}`
-	navigator.clipboard.writeText(projectUrl).then(() => {
-		addNotification({
-			type: 'success',
-			title: 'Project link copied',
-			text: 'The link to this project has been copied to your clipboard.',
-		})
-	})
-}
-
-function copyId() {
-	navigator.clipboard.writeText(props.queueEntry.project.id).then(() => {
-		addNotification({
-			type: 'success',
-			title: 'Project ID copied',
-			text: 'The ID of this project has been copied to your clipboard.',
-		})
-	})
-}
-
 function openProjectForReview() {
 	emit('startFromProject', props.queueEntry.project.id)
 }
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueToolbar.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueToolbar.vue
index 80151d115c..e39644b0c9 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationQueueToolbar.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueToolbar.vue
@@ -18,19 +18,28 @@
 				<slot name="actions" />
 			</div>
 		</div>
-
 		<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
 			<div class="flex min-w-0 flex-wrap items-center gap-3">
-				<slot name="meta" />
+				<div v-if="loading" class="h-6 w-64 animate-pulse rounded-full bg-surface-3"></div>
+				<slot v-else name="meta" />
 			</div>
 			<div class="flex shrink-0 items-center justify-end gap-2 sm:ml-auto">
-				<slot name="pagination-extra" />
-				<Pagination
-					v-if="totalPages > 1"
-					:page="page"
-					:count="totalPages"
-					@switch-page="$emit('switch-page', $event)"
-				/>
+				<div v-if="loading && !(totalPages > 1)" class="flex items-center gap-2">
+					<div
+						v-for="i in 3"
+						:key="`loading-skeleton-${i}`"
+						class="h-9 w-9 animate-pulse rounded-full bg-surface-3"
+					></div>
+				</div>
+				<template v-else>
+					<slot name="pagination-extra" />
+					<Pagination
+						v-if="totalPages > 1"
+						:page="page"
+						:count="totalPages"
+						@switch-page="$emit('switch-page', $event)"
+					/>
+				</template>
 			</div>
 		</div>
 	</div>
@@ -45,6 +54,7 @@ const query = defineModel<string>({ required: true })
 defineProps<{
 	page: number
 	totalPages: number
+	loading?: boolean
 }>()
 
 defineEmits<{
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index adcfcd69e1..7a572ef66f 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -7,29 +7,17 @@
 			<div
 				class="flex w-full flex-col items-start justify-between gap-3 sm:flex-row sm:items-center sm:gap-0"
 			>
-				<span class="text-md flex flex-col gap-2 sm:flex-row sm:items-center">
-					<span class="flex items-center gap-2">
+				<span class="text-md flex flex-col flex-wrap gap-1 sm:flex-row sm:items-center">
+					<span class="flex items-center gap-1">
 						<span class="text-secondary">Reported for</span>
 						<span class="font-semibold text-contrast">
 							{{ formattedReportType }}
 						</span>
 					</span>
-					<span class="flex items-center gap-2">
-						<span class="hidden text-secondary sm:inline">By</span>
+					<span class="flex items-center gap-1">
+						<span class="hidden text-secondary sm:inline">by</span>
 						<span class="text-secondary sm:hidden">Reporter:</span>
-						<nuxt-link
-							:to="`/user/${report.reporter_user.username}`"
-							target="_blank"
-							class="inline-flex flex-row items-center gap-1 transition-colors duration-100 ease-in-out hover:text-brand"
-						>
-							<Avatar
-								:src="report.reporter_user.avatar_url"
-								circle
-								size="1.75rem"
-								class="flex-shrink-0"
-							/>
-							<span class="truncate">{{ report.reporter_user.username }}</span>
-						</nuxt-link>
+						<ModerationOwnerLink :owner="reporter" />
 					</span>
 				</span>
 
@@ -41,14 +29,17 @@
 						{{ formatRelativeTime(report.created) }}
 					</span>
 					<div class="flex items-center gap-2">
-						<IconButton v-tooltip="'Copy ID'" :label="'Copy ID'" @click="copyId">
-							<ClipboardCopyIcon />
-						</IconButton>
+						<CopyCode v-tooltip="'Copy report ID'" :text="report.id" />
+						<CopyLinkButton
+							copy-label="Copy report link"
+							:url="`https://modrinth.com/moderation/reports/${props.report.id}`"
+						/>
 						<ButtonLink
 							v-tooltip="'Open in new tab'"
 							:href="`/moderation/reports/${props.report.id}`"
 							target="_blank"
-							class="!w-9 !rounded-full !px-0"
+							circular
+							icon-only
 						>
 							<ExternalIcon />
 						</ButtonLink>
@@ -58,126 +49,75 @@
 
 			<div class="my-4 h-px bg-surface-5" />
 
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-4">
-					<Avatar
-						:src="reportItemAvatarUrl"
-						:circle="report.item_type === 'user'"
-						size="4rem"
-						:pad-transparent-corners="report.item_type === 'shared-instance'"
-						:class="[
-							'flex-shrink-0 border border-surface-5 bg-surface-4 !shadow-none',
-							report.item_type !== 'user' && 'rounded-2xl',
-						]"
-					/>
-
-					<div v-if="report.item_type === 'user'" class="flex flex-col gap-1.5">
-						<NuxtLink
-							:to="`/user/${report.user?.username}`"
-							target="_blank"
-							class="text-base font-semibold text-contrast hover:underline"
-						>
-							{{ report.user?.username || 'Unknown User' }}
-						</NuxtLink>
-
-						<span
-							v-if="report.user?.created"
-							v-tooltip="formatDateTime(report.user.created)"
-							class="cursor-help text-sm text-secondary"
-						>
-							Joined {{ formatRelativeTime(report.user.created) }}
+			<ModerationItemHeader
+				:avatar-url="reportItemAvatarUrl"
+				:title="reportItemTitle"
+				:title-to="reportItemTitleTo"
+				:owner="itemOwner"
+				:circle="report.item_type === 'user'"
+				:pad-transparent-corners="report.item_type === 'shared-instance'"
+			>
+				<template #badges>
+					<div
+						v-if="report.project?.project_type"
+						class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+					>
+						<component
+							:is="getProjectTypeIcon(report.project.project_type as any)"
+							aria-hidden="true"
+							class="h-4 w-4"
+						/>
+						<span class="text-sm font-medium text-secondary">
+							{{ formatProjectType(report.project.project_type, true) }}
 						</span>
 					</div>
 
-					<div v-else class="flex flex-col gap-1.5">
-						<div class="flex flex-wrap items-center gap-2">
-							<NuxtLink
-								v-if="report.item_type !== 'shared-instance'"
-								:to="reportItemUrl"
-								target="_blank"
-								class="text-base font-semibold text-contrast hover:underline"
-							>
-								{{ reportItemTitle }}
-							</NuxtLink>
-							<span v-else class="text-base font-semibold text-contrast">
-								{{ reportItemTitle }}
-							</span>
-
-							<div
-								v-if="report.project?.project_type"
-								class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
-							>
-								<component
-									:is="getProjectTypeIcon(report.project.project_type as any)"
-									aria-hidden="true"
-									class="h-4 w-4"
-								/>
-								<span class="text-sm font-medium text-secondary">
-									{{ formatProjectType(report.project.project_type, true) }}
-								</span>
-							</div>
-
-							<span
-								v-if="report.item_type === 'version' && report.version"
-								class="text-sm text-secondary"
-							>
-								{{ report.version.files.find((f) => f.primary)?.filename || 'Unknown Version' }}
-							</span>
-							<span
-								v-if="
-									report.item_type === 'shared-instance' &&
-									report.shared_instance_version_id !== undefined
-								"
-								class="text-sm text-secondary"
-							>
-								Version {{ report.shared_instance_version_id }}
-							</span>
-							<CopyCode v-if="report.item_type === 'shared-instance'" :text="report.item_id" />
-							<span
-								v-if="report.item_type === 'shared-instance' && sharedInstanceQuarantined"
-								class="bg-orange-highlight inline-flex items-center gap-1 rounded-full border border-solid border-orange px-2.5 py-1 text-sm font-semibold text-orange"
-							>
-								<LockIcon class="size-4" />
-								Quarantined
-							</span>
-						</div>
-
-						<div v-if="report.target" class="flex items-center gap-1">
-							<Avatar
-								:src="report.target.avatar_url"
-								size="1.5rem"
-								circle
-								class="border border-surface-5 bg-surface-4 !shadow-none"
-							/>
-							<NuxtLink
-								:to="`/${report.target.type}/${report.target.slug}`"
-								target="_blank"
-								class="text-sm font-medium text-secondary hover:underline"
-							>
-								{{ report.target.name }}
-							</NuxtLink>
-						</div>
-						<div
-							v-else-if="report.item_type === 'shared-instance' && sharedInstanceDetails"
-							class="flex items-center gap-1"
-						>
-							<Avatar
-								:src="sharedInstanceDetails.owner.avatar_url"
-								size="1.5rem"
-								circle
-								class="border border-surface-5 bg-surface-4 !shadow-none"
-							/>
-							<NuxtLink
-								:to="`/user/${sharedInstanceDetails.owner.username}`"
-								target="_blank"
-								class="text-sm font-medium text-secondary hover:underline"
-							>
-								{{ sharedInstanceDetails.owner.username }}
-							</NuxtLink>
-						</div>
-					</div>
-				</div>
-			</div>
+					<span
+						v-if="report.item_type === 'version' && report.version"
+						class="text-sm text-secondary"
+					>
+						{{ report.version.files.find((f) => f.primary)?.filename || 'Unknown Version' }}
+					</span>
+					<span
+						v-if="
+							report.item_type === 'shared-instance' &&
+							report.shared_instance_version_id !== undefined
+						"
+						class="text-sm text-secondary"
+					>
+						Version {{ report.shared_instance_version_id }}
+					</span>
+					<CopyCode v-if="report.item_type === 'shared-instance'" :text="report.item_id" />
+					<span
+						v-if="report.item_type === 'shared-instance' && sharedInstanceQuarantined"
+						class="bg-orange-highlight inline-flex items-center gap-1 rounded-full border border-solid border-orange px-2.5 py-1 text-sm font-semibold text-orange"
+					>
+						<LockIcon class="size-4" />
+						Quarantined
+					</span>
+				</template>
+				<template #subtitle>
+					<span
+						v-if="report.item_type === 'user' && report.user?.created"
+						v-tooltip="formatDateTime(report.user.created)"
+						class="cursor-help text-sm text-secondary"
+					>
+						Joined {{ formatRelativeTime(report.user.created) }}
+					</span>
+					<Button
+						v-else-if="report.item_type === 'shared-instance' && !itemOwner"
+						type="outlined"
+						size="sm"
+						class="w-fit"
+						:loading="sharedInstanceLoading"
+						@click="loadSharedInstanceDetails"
+					>
+						<LoaderCircleIcon v-if="sharedInstanceLoading" class="animate-spin" />
+						<ReceiptTextIcon v-else />
+						Load shared instance details
+					</Button>
+				</template>
+			</ModerationItemHeader>
 		</div>
 		<CollapsibleRegion
 			v-model:collapsed="isThreadCollapsed"
@@ -282,18 +222,19 @@
 import type { Labrinth, SharedInstances } from '@modrinth/api-client'
 import {
 	CheckCircleIcon,
-	ClipboardCopyIcon,
 	ExternalIcon,
 	LoaderCircleIcon,
 	LockIcon,
+	ReceiptTextIcon,
 } from '@modrinth/assets'
 import { type ExtendedReport, reportQuickReplies } from '@modrinth/moderation'
-import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
-	Avatar,
+	Button,
+	ButtonLink,
 	CollapsibleRegion,
 	type ContentItem,
 	CopyCode,
+	CopyLinkButton,
 	formatReportType,
 	getProjectTypeIcon,
 	injectModrinthClient,
@@ -309,6 +250,8 @@ import { computed, onUnmounted, ref, watch } from 'vue'
 import { isStaff } from '~/helpers/users.js'
 
 import ThreadView from '../thread/ThreadView.vue'
+import ModerationItemHeader from './ModerationItemHeader.vue'
+import ModerationOwnerLink, { type ModerationOwner } from './ModerationOwnerLink.vue'
 import SharedInstanceReportContext, {
 	type SharedInstanceOwnerInstance,
 	type SharedInstanceReportDetails,
@@ -430,6 +373,13 @@ const expandText = computed(() => {
 	return `Show ${remainingMessageCount.value} more messages`
 })
 
+const reporter = computed<ModerationOwner>(() => ({
+	kind: 'user',
+	id: props.report.reporter_user.id,
+	name: props.report.reporter_user.username,
+	icon_url: props.report.reporter_user.avatar_url,
+}))
+
 async function closeReport(reply = false) {
 	if (reply && reportThread.value) {
 		await reportThread.value.sendReply()
@@ -888,20 +838,40 @@ const reportItemUrl = computed(() => {
 	}
 })
 
+const reportItemTitleTo = computed(() =>
+	props.report.item_type === 'shared-instance' ? undefined : reportItemUrl.value,
+)
+
+const itemOwner = computed((): ModerationOwner | null => {
+	if (props.report.item_type === 'user') return null
+
+	if (props.report.item_type === 'shared-instance') {
+		const owner = sharedInstanceDetails.value?.owner
+		if (!owner) return null
+
+		return {
+			kind: 'user',
+			id: owner.id,
+			name: owner.username,
+			icon_url: owner.avatar_url ?? null,
+		}
+	}
+
+	const target = props.report.target
+	if (!target) return null
+
+	return {
+		kind: target.type,
+		id: target.id,
+		name: target.name,
+		icon_url: target.avatar_url ?? null,
+	}
+})
+
 const formattedReportType = computed(() =>
 	formatReportType(formatMessage, props.report.report_type),
 )
 
-function copyId() {
-	navigator.clipboard.writeText(props.report.id).then(() => {
-		addNotification({
-			type: 'success',
-			title: 'Report ID copied',
-			text: 'The ID of this report has been copied to your clipboard.',
-		})
-	})
-}
-
 async function banSharedInstanceOwner(owner: SharedInstanceReportUser) {
 	if (sharedInstanceBanPending.value) return
 	sharedInstanceBanPending.value = true
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index a816490fad..0a56144bfb 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -1,33 +1,18 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import {
-	CheckIcon,
-	CodeIcon,
-	DownloadIcon,
-	ExternalIcon,
-	TimerIcon,
-	VersionIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonLink,
-	CopyCode,
-	CopyLinkButton,
-	getProjectTypeIcon,
-	NavTabs,
-	useFormatBytes,
-} from '@modrinth/ui'
+import { CheckIcon, CodeIcon, ExternalIcon, TimerIcon, VersionIcon } from '@modrinth/assets'
+import { ButtonLink, CopyCode, CopyLinkButton, getProjectTypeIcon, NavTabs } from '@modrinth/ui'
 import { capitalizeString, formatProjectType } from '@modrinth/utils'
 import { computed, provide, ref, watch } from 'vue'
 
 import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
+import ModerationItemHeader from '~/components/ui/moderation/ModerationItemHeader.vue'
 import {
-	getFileHighestSeverity,
+	getHighestSeverity,
 	getSeverityBadgeColor,
-	getVersionLabel,
 	getVersionPageHref,
-	severityOrder,
 } from '~/components/ui/moderation/tech-review/helpers'
+import TechRevFileActions from '~/components/ui/moderation/tech-review/TechRevFileActions.vue'
 import TechRevFileDetailTab from '~/components/ui/moderation/tech-review/TechRevFileDetailTab.vue'
 import TechRevFilesTab from '~/components/ui/moderation/tech-review/TechRevFilesTab.vue'
 import TechRevThreadTab from '~/components/ui/moderation/tech-review/TechRevThreadTab.vue'
@@ -51,8 +36,6 @@ const props = defineProps<{
 	disableCollapsing?: boolean
 }>()
 
-const formatBytes = useFormatBytes()
-
 const emit = defineEmits<{
 	refetch: []
 	loadIssueSources: [issueIds: string[]]
@@ -90,14 +73,11 @@ watch(selectedFile, (newFile) => {
 	}
 })
 
-const highestSeverity = computed(() => {
-	let highest: Labrinth.TechReview.Internal.DelphiSeverity = 'low'
-	for (const report of props.item.reports) {
-		const severity = getFileHighestSeverity(report)
-		if (severityOrder[severity] > severityOrder[highest]) highest = severity
-	}
-	return highest
-})
+const highestSeverity = computed(() =>
+	getHighestSeverity(
+		props.item.reports.flatMap((report) => report.issues.flatMap((issue) => issue.details)),
+	),
+)
 
 const navTabsLinks = computed(() => {
 	const links = tabs.map((tab) => ({
@@ -189,122 +169,91 @@ watch(
 		class="shadow-card overflow-hidden rounded-2xl border border-solid border-surface-4 bg-surface-3"
 	>
 		<div
-			class="flex flex-col gap-4 border-0 border-b border-solid border-surface-4 bg-surface-3 p-4"
+			class="flex flex-col gap-3 border-0 border-b border-solid border-surface-4 bg-surface-3 p-4 pb-3"
 		>
-			<div class="flex items-start justify-between">
-				<div class="flex items-center gap-3">
-					<NuxtLink
-						:to="`/${item.project.project_types[0]}/${item.project.slug ?? item.project.id}`"
-						target="_blank"
-						tabindex="-1"
-					>
-						<Avatar
-							:src="item.project.icon_url"
-							class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
-							size="4rem"
-						/>
-					</NuxtLink>
-
-					<div class="flex flex-col gap-1.5">
-						<div class="flex items-center gap-2">
-							<NuxtLink
-								:to="`/${item.project.project_types[0]}/${item.project.slug ?? item.project.id}`"
-								target="_blank"
-								class="text-lg font-semibold text-contrast hover:underline focus-visible:underline"
-							>
-								{{ item.project.name }}
-							</NuxtLink>
-
-							<div
-								class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+			<div class="flex flex-wrap items-start justify-between">
+				<ModerationItemHeader
+					:avatar-url="item.project.icon_url"
+					:title="item.project.name"
+					:title-to="`/${item.project.project_types[0]}/${item.project.slug ?? item.project.id}`"
+					:owner="item.project_owner"
+				>
+					<template #badges>
+						<div
+							class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+						>
+							<component
+								:is="getProjectTypeIcon(item.project.project_types[0] as any)"
+								aria-hidden="true"
+								class="h-4 w-4"
+							/>
+							<span
+								v-for="project_type in item.project.project_types"
+								:key="project_type + item.project.id"
+								class="text-sm font-medium text-secondary"
+								>{{ formatProjectType(project_type, true) }}</span
 							>
-								<component
-									:is="getProjectTypeIcon(item.project.project_types[0] as any)"
-									aria-hidden="true"
-									class="h-4 w-4"
-								/>
-								<span
-									v-for="project_type in item.project.project_types"
-									:key="project_type + item.project.id"
-									class="text-sm font-medium text-secondary"
-									>{{ formatProjectType(project_type, true) }}</span
-								>
-							</div>
+						</div>
 
-							<div
-								class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1"
-								:class="
-									isProjectApproved
-										? 'border-green bg-highlight-green'
-										: 'border-orange bg-highlight-orange'
-								"
+						<div
+							class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1"
+							:class="
+								isProjectApproved
+									? 'border-green bg-highlight-green'
+									: 'border-orange bg-highlight-orange'
+							"
+						>
+							<CheckIcon v-if="isProjectApproved" aria-hidden="true" class="h-4 w-4 text-green" />
+							<TimerIcon v-else aria-hidden="true" class="h-4 w-4 text-orange" />
+							<span
+								class="text-sm font-medium"
+								:class="isProjectApproved ? 'text-green' : 'text-orange'"
 							>
-								<CheckIcon v-if="isProjectApproved" aria-hidden="true" class="h-4 w-4 text-green" />
-								<TimerIcon v-else aria-hidden="true" class="h-4 w-4 text-orange" />
-								<span
-									class="text-sm font-medium"
-									:class="isProjectApproved ? 'text-green' : 'text-orange'"
-								>
-									{{ isProjectApproved ? 'Live' : 'In review' }}
-								</span>
-							</div>
+								{{ isProjectApproved ? 'Live' : 'In review' }}
+							</span>
+						</div>
 
-							<div class="rounded-full border-solid px-2.5 py-1" :class="severityColor">
-								<span class="text-sm font-medium">{{
-									capitalizeString(highestSeverity.toLowerCase())
-								}}</span>
-							</div>
+						<div class="rounded-full border-solid px-2.5 py-1" :class="severityColor">
+							<span class="text-sm font-medium">
+								{{ capitalizeString(highestSeverity.toLowerCase()) }}
+							</span>
 						</div>
+					</template>
+				</ModerationItemHeader>
 
+				<div class="flex flex-col items-end gap-2">
+					<div class="flex flex-wrap items-center justify-end gap-3">
+						<span class="text-base text-secondary">{{ formattedDate }}</span>
 						<div class="flex items-center gap-2">
-							<NuxtLink
-								:to="`/${item.project_owner.kind}/${item.project_owner.id}`"
+							<ButtonLink
+								v-if="props.item.project.link_urls?.['source']?.url"
+								v-tooltip="'Open sources in new tab'"
+								:href="props.item.project.link_urls?.['source']?.url"
+								target="_blank"
+								circular
+								icon-only
+							>
+								<CodeIcon />
+							</ButtonLink>
+							<CopyLinkButton
+								copy-label="Copy tech review link"
+								:url="`https://modrinth.com/moderation/technical-review/${props.item.project.id}`"
+							/>
+							<ButtonLink
+								v-tooltip="'Open tech review in new tab'"
+								:href="`/moderation/technical-review/${props.item.project.id}`"
 								target="_blank"
-								class="flex items-center gap-1 text-sm font-medium text-secondary hover:underline"
+								circular
+								icon-only
 							>
-								<Avatar
-									:src="item.project_owner.icon_url"
-									class="rounded-full border border-surface-5 bg-surface-4 !shadow-none"
-									size="1.5rem"
-									circle
-								/>
-								{{ item.project_owner.name }}
-							</NuxtLink>
-							<CopyCode v-tooltip="'Copy user ID'" :text="item.project_owner.id" />
+								<ExternalIcon />
+							</ButtonLink>
 						</div>
 					</div>
-				</div>
-
-				<div class="flex items-center gap-3">
-					<span class="text-base text-secondary">{{ formattedDate }}</span>
-					<div class="flex items-center gap-2">
-						<ButtonLink
-							v-if="props.item.project.link_urls?.['source']?.url"
-							v-tooltip="'Open sources in new tab'"
-							:href="props.item.project.link_urls?.['source']?.url"
-							target="_blank"
-							class="!w-9 !rounded-full !px-0"
-						>
-							<CodeIcon />
-						</ButtonLink>
-						<CopyCode v-tooltip="'Copy project ID'" :text="item.project.id" />
-						<CopyLinkButton
-							copy-label="Copy project link"
-							:url="`https://modrinth.com/moderation/technical-review/${props.item.project.id}`"
-						/>
-						<ButtonLink
-							v-tooltip="'Open tech review in new tab'"
-							:href="`/moderation/technical-review/${props.item.project.id}`"
-							target="_blank"
-							circular
-							icon-only
-						>
-							<ExternalIcon />
-						</ButtonLink>
-					</div>
+					<CopyCode v-tooltip="'Copy project ID'" :text="item.project.id" />
 				</div>
 			</div>
-			<div class="flex flex-row justify-between">
+			<div class="flex flex-row flex-wrap justify-between">
 				<NavTabs
 					mode="local"
 					:links="navTabsLinks"
@@ -312,42 +261,19 @@ watch(
 					class="border border-solid border-surface-4 bg-surface-2"
 					@tab-click="handleTabClick"
 				/>
-
-				<div v-if="currentTab === 'File' && selectedFile" class="flex flex-row items-end gap-2">
-					<ButtonLink
-						type="outlined"
-						target="_blank"
-						:href="getVersionPageHref(item.project, selectedFile.version_id)"
-						class="!bg-surface-2"
-						:aria-label="`Open version ${getVersionLabel(selectedFile)}`"
-					>
-						<VersionIcon aria-hidden="true" />
-						{{ getVersionLabel(selectedFile) }}
-					</ButtonLink>
-					<ButtonLink
-						type="outlined"
-						:target="selectedFile.file_id"
-						:href="`https://slicer.run/?url=${encodeURIComponent(selectedFile.download_url)}`"
-						class="!bg-surface-2"
-						aria-label="Open in Slicer"
-					>
-						<ExternalIcon aria-hidden="true" /> Slicer
-					</ButtonLink>
-					<ButtonLink
-						v-tooltip="
-							`Download ${selectedFile.file_name} (${formatBytes(selectedFile.file_size)})`
-						"
-						type="outlined"
-						target="_blank"
-						:href="selectedFile.download_url"
-						:download="selectedFile.file_name"
-						class="!bg-surface-2"
-						aria-label="Download"
-						icon-only
-						circular
-					>
-						<DownloadIcon aria-hidden="true" />
-					</ButtonLink>
+				<div v-if="currentTab === 'File' && selectedFile" class="flex items-center gap-2">
+					<div class="flex items-center gap-1">
+						<ButtonLink
+							v-tooltip="'View version'"
+							type="outlined"
+							target="_blank"
+							:href="getVersionPageHref(item.project, selectedFile.version_id)"
+						>
+							<VersionIcon aria-hidden="true" />
+							{{ selectedFile.version_number }}
+						</ButtonLink>
+					</div>
+					<TechRevFileActions :file="selectedFile" />
 				</div>
 			</div>
 		</div>
diff --git a/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue b/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
index 861b6b04ca..3c66a6191a 100644
--- a/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
+++ b/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
@@ -488,7 +488,7 @@ defineExpose({ show, hide })
 							</summary>
 							<div class="flex flex-wrap gap-1 pt-2">
 								<span
-									v-for="name of row.scan?.scanned_file_names ?? []"
+									v-for="name in row.scan?.scanned_file_names ?? []"
 									:key="name"
 									v-tooltip="name"
 									class="flex items-center gap-1 text-wrap rounded-full bg-button-bg px-2 py-0.5 text-xs font-medium text-contrast"
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
index 93ea0e6f34..eb22ba2d38 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { moderationSettings, type SettingDefinition } from '@modrinth/moderation'
-import { Combobox, Toggle } from '@modrinth/ui'
+import { Button, Combobox, Input, Toggle } from '@modrinth/ui'
+
+const localhostHostname = 'localhost:3000'
 
 const flattenedSettings = Object.entries(moderationSettings).reduce(
 	(acc, [group, settings]) => {
@@ -35,27 +37,28 @@ const displayedSettings = ref<{ [name: string]: SettingDefinition[] }>(flattened
 </script>
 
 <template>
-	<div v-for="[name, page] of Object.entries(displayedSettings)" :key="name" class="universal-card">
+	<div v-for="[name, page] in Object.entries(displayedSettings)" :key="name" class="universal-card">
 		<h2 class="text-2xl">{{ name }}</h2>
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-3">
 			<div
 				v-for="setting in page"
 				:key="setting.id"
 				class="flex flex-row flex-wrap items-center justify-between gap-2"
 			>
 				<label class="flex-1">
-					<span class="block font-semibold text-contrast">{{ setting.title }}</span>
+					<span class="mb-1 block font-semibold text-contrast">{{ setting.title }}</span>
 					<span class="block text-secondary">{{ setting.description }}</span>
-					<span class="block text-secondary">
+					<span class="mt-1 block text-secondary">
 						Default:
 						<span
-							class="font-semibold"
+							class="font-medium"
 							:class="{
 								'text-red': setting.type === 'toggle' && !setting.default,
 								'text-green': setting.type === 'toggle' && setting.default,
+								'italic opacity-50': setting.default === null,
 							}"
-							>{{ setting.default }}</span
-						>
+							>{{ setting.default ?? '(none)' }}
+						</span>
 					</span>
 				</label>
 
@@ -72,15 +75,23 @@ const displayedSettings = ref<{ [name: string]: SettingDefinition[] }>(flattened
 					class="!w-1/4"
 					@update:model-value="(value) => configuredSettings.set(setting, value)"
 				/>
-				<input
-					v-if="setting.type === 'string'"
-					type="text"
-					:value="configuredSettings.get(setting)"
-					class="input !w-1/4"
-					@input="
-						(event) => configuredSettings.set(setting, (event.target as HTMLInputElement).value)
-					"
-				/>
+				<div v-if="setting.type === 'string'" class="flex !w-1/4 flex-col items-start gap-2">
+					<Input
+						type="text"
+						:model-value="configuredSettings.get(setting) ?? ''"
+						@update:model-value="(value) => configuredSettings.set(setting, String(value ?? ''))"
+					/>
+					<Button
+						v-if="setting.id === 'alternative-hostname'"
+						type="outlined"
+						size="sm"
+						class="shrink-0"
+						:disabled="configuredSettings.get(setting) === localhostHostname"
+						@click="configuredSettings.set(setting, localhostHostname)"
+					>
+						Set to {{ localhostHostname }}
+					</Button>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue
new file mode 100644
index 0000000000..2a5fde90a1
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import {
+	CheckIcon,
+	ChevronDownIcon,
+	CopyIcon,
+	ExternalIcon,
+	LoaderCircleIcon,
+} from '@modrinth/assets'
+import { ButtonLink, IconButton } from '@modrinth/ui'
+import { capitalizeString, highlightCodeLines } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+
+import { getSeverityBadgeColor, truncateMiddle } from './helpers'
+import TechRevFlagBadges from './TechRevFlagBadges.vue'
+import TechRevVerdictButtons from './TechRevVerdictButtons.vue'
+import type { ClassGroup, FlattenedFileReport, TraceVerdictEvent } from './types'
+import { injectTechReviewDecisions } from './use-tech-review-decisions'
+
+const props = defineProps<{
+	file: FlattenedFileReport
+	classItem: ClassGroup
+	expanded: boolean
+	focusedDetailId?: string | null
+	loadingIssues: Set<string>
+	decompiledSources: Map<string, string>
+}>()
+
+const emit = defineEmits<{
+	toggle: []
+	verdict: [event: TraceVerdictEvent]
+}>()
+
+const { isPreReviewed, getMarkedFlagsCount } = injectTechReviewDecisions()
+
+const showCopyFeedback = ref(false)
+
+const truncatedPath = computed(() => truncateMiddle(props.classItem.filePath))
+const pathTooltip = computed(() =>
+	truncatedPath.value !== props.classItem.filePath ? props.classItem.filePath : undefined,
+)
+
+const flagDetails = computed(() => props.classItem.flags.map((flag) => flag.detail))
+const allFlagsMarked = computed(
+	() => getMarkedFlagsCount(props.classItem.flags) === props.classItem.flags.length,
+)
+
+const isLoadingSource = computed(() =>
+	props.classItem.flags.some((flag) => props.loadingIssues.has(flag.issueId)),
+)
+
+const decompiledSource = computed(() => {
+	for (const flag of props.classItem.flags) {
+		const source = props.decompiledSources.get(flag.detail.id)
+		if (source) return source
+	}
+	return undefined
+})
+
+const highlightedSource = computed(() => {
+	const source = decompiledSource.value
+	if (!source) return []
+	return highlightCodeLines(source, 'java')
+})
+
+function emitVerdict(event: TraceVerdictEvent) {
+	emit('verdict', event)
+}
+
+async function copyToClipboard() {
+	const source = decompiledSource.value
+	if (!source) return
+
+	try {
+		await navigator.clipboard.writeText(source)
+		showCopyFeedback.value = true
+		setTimeout(() => {
+			showCopyFeedback.value = false
+		}, 2000)
+	} catch (error) {
+		console.error('Failed to copy code:', error)
+	}
+}
+
+function trimSlashes(path: string): string {
+	if (path.startsWith('/')) {
+		path = path.slice(1)
+	}
+	if (path.endsWith('/')) {
+		path = path.slice(0, -1)
+	}
+	return path
+}
+
+// Creates a slicer link with a group, removes trailing and leading slashes, and if no file extension found assume .class
+function createSlicerLink(url: string, group: ClassGroup | undefined) {
+	const uri = new URL(url)
+	const filename = uri.pathname.split('/').pop() || ''
+	if (group) {
+		const jarPath = trimSlashes(group.jar ? group.jar.replace('#', '/') : filename)
+		const filePath = trimSlashes(
+			group.filePath.startsWith('/') ? group.filePath.slice(1) : group.filePath,
+		)
+		const hasFileExtension = (filePath.split('/').pop() || '').includes('.')
+		const file = `${jarPath}/${hasFileExtension ? filePath : `${filePath}.class`}`
+		return `https://slicer.run/?url=${encodeURIComponent(url)}&file=${encodeURIComponent(file)}`
+	}
+	return `https://slicer.run/?url=${encodeURIComponent(url)}`
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-1">
+		<div
+			class="flex cursor-pointer items-center justify-between rounded-xl px-2 py-1 transition-colors duration-200 hover:bg-surface-3"
+			@click="emit('toggle')"
+		>
+			<div class="flex grow items-center gap-2">
+				<IconButton
+					type="quiet"
+					label="Toggle details"
+					class="transition-transform"
+					:class="{ 'rotate-180': expanded }"
+				>
+					<ChevronDownIcon class="h-5 w-5 text-contrast" />
+				</IconButton>
+
+				<span
+					v-tooltip="pathTooltip"
+					class="font-mono text-sm font-semibold"
+					:class="{ 'opacity-50': allFlagsMarked }"
+				>
+					{{ truncatedPath }}
+				</span>
+
+				<TechRevFlagBadges :details="flagDetails" />
+
+				<div class="ml-auto flex items-center gap-2">
+					<Transition name="fade">
+						<div
+							v-if="isLoadingSource"
+							class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
+						>
+							<span class="flex items-center gap-1.5 text-sm font-medium text-secondary">
+								<LoaderCircleIcon class="size-4 animate-spin" />
+								Loading source...
+							</span>
+						</div>
+					</Transition>
+					<ButtonLink
+						v-tooltip="'Open file in slicer'"
+						type="outlined"
+						:href="createSlicerLink(file.download_url, classItem)"
+						:target="file.file_id"
+						circular
+						icon-only
+						@click="$event.stopPropagation()"
+					>
+						<ExternalIcon />
+					</ButtonLink>
+				</div>
+			</div>
+		</div>
+
+		<template v-if="expanded">
+			<div
+				v-for="flag in classItem.flags"
+				:id="`tech-review-detail-${flag.detail.id}`"
+				:key="`${flag.issueId}-${flag.detail.id}`"
+				class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 bg-surface-3 py-2 pl-4"
+				:class="{
+					'!border-brand bg-brand-highlight': focusedDetailId === flag.detail.id,
+				}"
+			>
+				<div class="grid grid-cols-[1fr_auto] items-center">
+					<div
+						class="flex items-center gap-2"
+						:class="{
+							'opacity-50': isPreReviewed(flag.detail.id, flag.detail.status),
+						}"
+					>
+						<span class="text-base font-semibold text-contrast">{{
+							flag.issueType.replace(/_/g, ' ')
+						}}</span>
+						<div
+							class="rounded-full border-solid px-2.5 py-1"
+							:class="getSeverityBadgeColor(flag.detail.severity)"
+						>
+							<span class="text-sm font-medium">{{ capitalizeString(flag.detail.severity) }}</span>
+						</div>
+					</div>
+
+					<div class="me-2 flex items-center justify-end gap-2">
+						<TechRevVerdictButtons
+							variant="trace"
+							:detail="flag.detail"
+							@global-safe="emitVerdict({ detail: flag.detail, decision: 'safe', scope: 'global' })"
+							@local-safe="emitVerdict({ detail: flag.detail, decision: 'safe', scope: 'local' })"
+							@local-unsafe="
+								emitVerdict({ detail: flag.detail, decision: 'malware', scope: 'local' })
+							"
+							@global-unsafe="
+								emitVerdict({ detail: flag.detail, decision: 'malware', scope: 'global' })
+							"
+						/>
+					</div>
+				</div>
+				<div
+					v-if="flag.detail.data && Object.keys(flag.detail.data).length > 0"
+					class="flex flex-wrap gap-x-4 gap-y-1 pr-4 text-sm"
+				>
+					<div
+						v-for="[key, value] in Object.entries(flag.detail.data).sort(([a], [b]) =>
+							a.localeCompare(b),
+						)"
+						:key="key"
+						class="flex items-center gap-1.5"
+					>
+						<span class="text-secondary">{{ key }}:</span>
+						<a
+							v-if="typeof value === 'string' && value.startsWith('http')"
+							:href="value"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="text-brand-blue hover:underline"
+						>
+							{{ value }}
+						</a>
+						<span v-else class="font-mono text-contrast">{{ value }}</span>
+					</div>
+				</div>
+			</div>
+
+			<div
+				v-if="highlightedSource.length > 0"
+				class="relative overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
+			>
+				<IconButton
+					v-tooltip="'Copy code'"
+					type="quiet"
+					label="Copy code"
+					class="!absolute right-2 top-2 border-[1px]"
+					@click.stop="copyToClipboard"
+				>
+					<CopyIcon v-if="!showCopyFeedback" />
+					<CheckIcon v-else />
+				</IconButton>
+
+				<div class="overflow-x-auto bg-surface-3 py-3">
+					<div
+						v-for="(line, n) in highlightedSource"
+						:key="n"
+						class="flex font-mono text-[13px] leading-[1.6]"
+					>
+						<div
+							class="select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
+							style="min-width: 3.5rem"
+						>
+							{{ n + 1 }}
+						</div>
+						<div class="flex-1 px-4 py-0 text-primary">
+							<pre v-html="line || ' '"></pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div
+				v-else-if="!isLoadingSource"
+				class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
+			>
+				<p class="text-sm text-secondary">
+					Source code not available or failed to decompile for this file.
+				</p>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style scoped>
+pre {
+	all: unset;
+	display: inline;
+	white-space: pre;
+}
+
+.fade-enter-active {
+	transition: opacity 0.3s ease-in;
+	transition-delay: 0.2s;
+}
+
+.fade-leave-active {
+	transition: opacity 0.15s ease-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue
new file mode 100644
index 0000000000..1959bd53e5
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { DownloadIcon, ExternalIcon } from '@modrinth/assets'
+import { ButtonLink, useFormatBytes } from '@modrinth/ui'
+
+import type { FlattenedFileReport } from './types'
+
+defineProps<{
+	file: FlattenedFileReport
+}>()
+
+const formatBytes = useFormatBytes()
+</script>
+
+<template>
+	<div class="flex items-center gap-2">
+		<ButtonLink
+			v-tooltip="`Download ${file.file_name} (${formatBytes(file.file_size)})`"
+			type="outlined"
+			target="_blank"
+			:href="file.download_url"
+			:download="file.file_name"
+			aria-label="Download"
+			icon-only
+			circular
+		>
+			<DownloadIcon aria-hidden="true" />
+		</ButtonLink>
+		<ButtonLink
+			v-tooltip="'Open in Slicer'"
+			type="outlined"
+			:target="file.file_id"
+			:href="`https://slicer.run/?url=${encodeURIComponent(file.download_url)}`"
+			aria-label="Open in Slicer"
+		>
+			<ExternalIcon aria-hidden="true" /> Slicer
+		</ButtonLink>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue
index 39ebac686e..40fbfcb214 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue
@@ -1,33 +1,19 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import {
-	CheckIcon,
-	ChevronDownIcon,
-	ChevronRightIcon,
-	CopyIcon,
-	ExternalIcon,
-	LoaderCircleIcon,
-} from '@modrinth/assets'
-import {
-	ButtonLink,
-	Collapsible,
-	IconButton,
-	injectNotificationManager,
-	Toggle,
-} from '@modrinth/ui'
-import { capitalizeString, highlightCodeLines } from '@modrinth/utils'
+import { ChevronRightIcon } from '@modrinth/assets'
+import { injectNotificationManager, Toggle } from '@modrinth/ui'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 
-import {
-	canUpdateGlobalDetail,
-	getFileDetailCount,
-	getSeverityBadgeColor,
-	severityOrder,
-	truncateMiddle,
-	verdictToDecision,
-} from './helpers'
+import { canUpdateGlobalDetail, getFileDetailCount, verdictToDecision } from './helpers'
+import TechRevClassItem from './TechRevClassItem.vue'
 import TechRevVerdictButtons from './TechRevVerdictButtons.vue'
-import type { ClassGroup, FlagItem, FlattenedFileReport, JarGroup } from './types'
+import type {
+	ClassGroup,
+	FlagItem,
+	FlattenedFileReport,
+	JarGroup,
+	TraceVerdictEvent,
+} from './types'
 import { injectTechReviewDecisions } from './use-tech-review-decisions'
 
 const props = defineProps<{
@@ -63,8 +49,6 @@ const hideGloballyPassed = ref(true)
 const isBatchUpdating = ref(false)
 const expandedClasses = reactive<Set<string>>(new Set())
 const autoExpandedFileIds = reactive<Set<string>>(new Set())
-const showCopyFeedback = reactive<Map<string, boolean>>(new Map())
-const highlightedSourceCache = reactive<Map<string, { source: string; lines: string[] }>>(new Map())
 const LAZY_LOAD_CLASS_SOURCE_MINIMUM = 2
 
 const globallyPassedCount = computed(() => {
@@ -116,12 +100,35 @@ function getRemainingGlobalDetailCount(flags: FlagItem[]): number {
 	).size
 }
 
+function notifySuccess(title: string, text: string) {
+	addNotification({ type: 'success', title, text, autoCloseMs: 3000 })
+}
+
+function notifyError(title: string, text: string) {
+	addNotification({ type: 'error', title, text })
+}
+
 function maybeReturnToFileList() {
 	if (getFileMarkedCount(props.file) === getFileDetailCount(props.file)) {
 		emit('allFlagsResolved')
 	}
 }
 
+function collapseCompletedClasses() {
+	for (const classGroup of groupedByClass.value) {
+		if (getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
+			expandedClasses.delete(classGroup.key)
+		}
+	}
+}
+
+function afterSuccessfulMark(previousMarkedCount: number) {
+	collapseCompletedClasses()
+	if (previousMarkedCount !== getFileMarkedCount(props.file)) {
+		maybeReturnToFileList()
+	}
+}
+
 async function batchMarkRemainingGlobally(flags: FlagItem[], verdict: 'safe' | 'unsafe') {
 	if (isBatchUpdating.value) return
 
@@ -148,23 +155,18 @@ async function batchMarkRemainingGlobally(flags: FlagItem[], verdict: 'safe' | '
 			'global',
 		)
 
-		addNotification({
-			type: 'success',
-			title: `Globally marked ${details.length} trace keys as ${verdict}`,
-			text: `All remaining eligible traces have been globally marked as ${
+		notifySuccess(
+			`Globally marked ${details.length} trace keys as ${verdict}`,
+			`All remaining eligible traces have been globally marked as ${
 				verdict === 'safe' ? 'false positives' : 'malicious'
 			}.`,
-		})
+		)
 
 		maybeReturnToFileList()
 		emit('refetch')
 	} catch (error) {
 		console.error('Failed to batch update global traces:', error)
-		addNotification({
-			type: 'error',
-			title: 'Global batch update failed',
-			text: 'An error occurred while globally updating traces.',
-		})
+		notifyError('Global batch update failed', 'An error occurred while globally updating traces.')
 	} finally {
 		isBatchUpdating.value = false
 	}
@@ -184,23 +186,18 @@ async function batchMarkRemaining(flags: FlagItem[], verdict: 'safe' | 'unsafe',
 		await updateIssueDetails(detailIds.map((detail_id) => ({ detail_id, verdict })))
 		applyDecisionToRelatedDetails(detailIds, verdictToDecision(verdict), 'local')
 
-		addNotification({
-			type: 'success',
-			title: `Marked ${detailIds.length} traces as ${verdict}`,
-			text: `All remaining traces${inJar ? ' in this JAR' : ''} have been marked as ${
+		notifySuccess(
+			`Marked ${detailIds.length} traces as ${verdict}`,
+			`All remaining traces${inJar ? ' in this JAR' : ''} have been marked as ${
 				verdict === 'safe' ? 'false positives' : 'malicious'
 			}.`,
-		})
+		)
 
 		maybeReturnToFileList()
 		emit('refetch')
 	} catch (error) {
 		console.error('Failed to batch update:', error)
-		addNotification({
-			type: 'error',
-			title: 'Batch update failed',
-			text: 'An error occurred while updating traces.',
-		})
+		notifyError('Batch update failed', 'An error occurred while updating traces.')
 	} finally {
 		isBatchUpdating.value = false
 	}
@@ -220,13 +217,17 @@ function updateGlobalDetailAction(
 	return updateGlobalDetailStatus(detail, getToggledDetailVerdict(detail, decision, 'global'))
 }
 
+function handleTraceVerdict({ detail, decision, scope }: TraceVerdictEvent) {
+	if (scope === 'global') {
+		return updateGlobalDetailAction(detail, decision)
+	}
+	return updateLocalDetailAction(detail, decision)
+}
+
 async function updateDetailStatus(
 	detailId: string,
 	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
 ) {
-	const detail = props.file.issues.flatMap((issue) => issue.details).find((d) => d.id === detailId)
-	const priorDecision = detail ? getDetailDecision(detail.id, detail.status) : 'pending'
-
 	updatingDetails.add(detailId)
 
 	const previousMarkedCount = getFileMarkedCount(props.file)
@@ -240,22 +241,8 @@ async function updateDetailStatus(
 			'local',
 		)
 
-		if (verdict !== 'pending' && priorDecision === 'pending') {
-			for (const classGroup of groupedByClass.value) {
-				const hasThisDetail = classGroup.flags.some((f) => f.detail.id === detailId)
-				if (hasThisDetail && getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
-					expandedClasses.delete(classGroup.key)
-					break
-				}
-			}
-		}
-
 		if (verdict !== 'pending') {
-			const markedCount = getFileMarkedCount(props.file)
-			const totalCount = getFileDetailCount(props.file)
-			if (previousMarkedCount != markedCount && markedCount === totalCount) {
-				emit('allFlagsResolved')
-			}
+			afterSuccessfulMark(previousMarkedCount)
 		}
 
 		const otherText =
@@ -264,33 +251,23 @@ async function updateDetailStatus(
 				: ''
 
 		if (verdict === 'pending') {
-			addNotification({
-				type: 'success',
-				title: 'Local trace verdict unset',
-				text: `The project-local verdict has been removed.${otherText}`,
-			})
+			notifySuccess(
+				'Local trace verdict unset',
+				`The project-local verdict has been removed.${otherText}`,
+			)
 		} else if (verdict === 'safe') {
-			addNotification({
-				type: 'success',
-				title: 'Issue marked as pass',
-				text: `This issue has been marked as a false positive.${otherText}`,
-			})
+			notifySuccess(
+				'Issue marked as pass',
+				`This issue has been marked as a false positive.${otherText}`,
+			)
 		} else {
-			addNotification({
-				type: 'success',
-				title: 'Issue marked as fail',
-				text: `This issue has been flagged as malicious.${otherText}`,
-			})
+			notifySuccess('Issue marked as fail', `This issue has been flagged as malicious.${otherText}`)
 		}
 
 		emit('refetch')
 	} catch (error) {
 		console.error('Failed to update detail status:', error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to update issue',
-			text: 'An error occurred while updating the issue status.',
-		})
+		notifyError('Failed to update issue', 'An error occurred while updating the issue status.')
 	} finally {
 		updatingDetails.delete(detailId)
 	}
@@ -301,11 +278,7 @@ async function updateGlobalDetailStatus(
 	verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
 ) {
 	if (!canUpdateGlobalDetail(detail)) {
-		addNotification({
-			type: 'error',
-			title: 'Global update unavailable',
-			text: 'Generated trace keys cannot be marked globally.',
-		})
+		notifyError('Global update unavailable', 'Generated trace keys cannot be marked globally.')
 		return
 	}
 
@@ -323,19 +296,7 @@ async function updateGlobalDetailStatus(
 		)
 
 		if (verdict !== 'pending') {
-			for (const classGroup of groupedByClass.value) {
-				if (getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
-					expandedClasses.delete(classGroup.key)
-				}
-			}
-		}
-
-		if (verdict !== 'pending') {
-			const markedCount = getFileMarkedCount(props.file)
-			const totalCount = getFileDetailCount(props.file)
-			if (previousMarkedCount != markedCount && markedCount === totalCount) {
-				emit('allFlagsResolved')
-			}
+			afterSuccessfulMark(previousMarkedCount)
 		}
 
 		const otherText =
@@ -344,31 +305,26 @@ async function updateGlobalDetailStatus(
 				: ''
 
 		if (verdict === 'pending') {
-			addNotification({
-				type: 'success',
-				title: 'Global trace verdict unset',
-				text: `The global verdict for this trace key has been removed.${otherText}`,
-			})
+			notifySuccess(
+				'Global trace verdict unset',
+				`The global verdict for this trace key has been removed.${otherText}`,
+			)
 		} else {
-			addNotification({
-				type: 'success',
-				title:
-					verdict === 'safe' ? 'Trace globally marked as pass' : 'Trace globally marked as fail',
-				text:
-					verdict === 'safe'
-						? `This trace key has been marked as a global false positive.${otherText}`
-						: `This trace key has been globally flagged as malicious.${otherText}`,
-			})
+			notifySuccess(
+				verdict === 'safe' ? 'Trace globally marked as pass' : 'Trace globally marked as fail',
+				verdict === 'safe'
+					? `This trace key has been marked as a global false positive.${otherText}`
+					: `This trace key has been globally flagged as malicious.${otherText}`,
+			)
 		}
 
 		emit('refetch')
 	} catch (error) {
 		console.error('Failed to update global detail status:', error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to update global trace',
-			text: 'An error occurred while updating the global trace status.',
-		})
+		notifyError(
+			'Failed to update global trace',
+			'An error occurred while updating the global trace status.',
+		)
 	} finally {
 		updatingGlobalDetailKeys.delete(detail.key)
 	}
@@ -446,38 +402,6 @@ const groupedByJar = computed<JarGroup[]>(() => {
 	})
 })
 
-function getHighestSeverityInClass(flags: FlagItem[]): Labrinth.TechReview.Internal.DelphiSeverity {
-	return flags.reduce(
-		(highest, flag) =>
-			severityOrder[flag.detail.severity] > severityOrder[highest] ? flag.detail.severity : highest,
-		'low' as Labrinth.TechReview.Internal.DelphiSeverity,
-	)
-}
-
-function getClassDecompiledSource(classItem: ClassGroup): string | undefined {
-	for (const flag of classItem.flags) {
-		const source = props.decompiledSources.get(flag.detail.id)
-		if (source) return source
-	}
-	return undefined
-}
-
-function getHighlightedClassSource(classItem: ClassGroup): string[] {
-	const source = getClassDecompiledSource(classItem)
-	if (!source) return []
-
-	const cached = highlightedSourceCache.get(classItem.key)
-	if (cached?.source === source) return cached.lines
-
-	const lines = highlightCodeLines(source, 'java')
-	highlightedSourceCache.set(classItem.key, { source, lines })
-	return lines
-}
-
-function isClassLoadingSource(classItem: ClassGroup): boolean {
-	return classItem.flags.some((flag) => props.loadingIssues.has(flag.issueId))
-}
-
 function loadClassSources(classItem: ClassGroup) {
 	const issueIds = [...new Set(classItem.flags.map((flag) => flag.issueId))]
 	if (issueIds.length > 0) {
@@ -499,18 +423,6 @@ function toggleClass(classItem: ClassGroup) {
 	}
 }
 
-async function copyToClipboard(code: string, detailId: string) {
-	try {
-		await navigator.clipboard.writeText(code)
-		showCopyFeedback.set(detailId, true)
-		setTimeout(() => {
-			showCopyFeedback.delete(detailId)
-		}, 2000)
-	} catch (error) {
-		console.error('Failed to copy code:', error)
-	}
-}
-
 async function focusDetail(detailId: string) {
 	await nextTick()
 
@@ -534,32 +446,6 @@ async function focusDetail(detailId: string) {
 	})
 }
 
-function trimSlashes(path: string): string {
-	if (path.startsWith('/')) {
-		path = path.slice(1)
-	}
-	if (path.endsWith('/')) {
-		path = path.slice(0, -1)
-	}
-	return path
-}
-
-// Creates a slicer link with a group, removes trailing and leading slashes, and if no file extension found assume .class
-function createSlicerLink(url: string, group: ClassGroup | undefined) {
-	const uri = new URL(url)
-	const filename = uri.pathname.split('/').pop() || ''
-	if (group) {
-		const jarPath = trimSlashes(group.jar ? group.jar.replace('#', '/') : filename)
-		const filePath = trimSlashes(
-			group.filePath.startsWith('/') ? group.filePath.slice(1) : group.filePath,
-		)
-		const hasFileExtension = (filePath.split('/').pop() || '').includes('.')
-		const file = `${jarPath}/${hasFileExtension ? filePath : `${filePath}.class`}`
-		return `https://slicer.run/?url=${encodeURIComponent(url)}&file=${encodeURIComponent(file)}`
-	}
-	return `https://slicer.run/?url=${encodeURIComponent(url)}`
-}
-
 watch(
 	[() => props.focusedDetailId, () => props.file.id],
 	([detailId]) => {
@@ -652,218 +538,17 @@ watch(
 			</div>
 		</div>
 
-		<div
+		<TechRevClassItem
 			v-for="classItem in jarGroup.classes"
 			:key="classItem.key"
-			class="overflow-clip rounded-xl border border-solid border-surface-4"
-		>
-			<div
-				class="flex cursor-pointer items-center justify-between bg-surface-3 p-2 transition-colors duration-200 hover:bg-surface-4"
-				@click="toggleClass(classItem)"
-			>
-				<div class="my-auto flex items-center gap-2">
-					<IconButton
-						type="quiet"
-						label="Toggle details"
-						class="transition-transform"
-						:class="{ 'rotate-180': expandedClasses.has(classItem.key) }"
-					>
-						<ChevronDownIcon class="h-5 w-5 text-contrast" />
-					</IconButton>
-
-					<span v-tooltip="classItem.filePath" class="font-mono text-sm font-semibold">{{
-						truncateMiddle(classItem.filePath)
-					}}</span>
-
-					<div
-						class="rounded-full border-solid px-2.5 py-1"
-						:class="getSeverityBadgeColor(getHighestSeverityInClass(classItem.flags))"
-					>
-						<span class="text-sm font-medium">{{
-							capitalizeString(getHighestSeverityInClass(classItem.flags))
-						}}</span>
-					</div>
-
-					<div
-						class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
-						:class="
-							getMarkedFlagsCount(classItem.flags) === classItem.flags.length
-								? 'border-green/60 bg-highlight-green text-green'
-								: 'border-red/60 bg-highlight-red text-red'
-						"
-					>
-						<CheckIcon
-							v-if="getMarkedFlagsCount(classItem.flags) === classItem.flags.length"
-							class="size-4"
-						/>
-						{{ getMarkedFlagsCount(classItem.flags) }}/{{ classItem.flags.length }} flags
-					</div>
-
-					<Transition name="fade">
-						<div
-							v-if="isClassLoadingSource(classItem)"
-							class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
-						>
-							<span class="flex items-center gap-1.5 text-sm font-medium text-secondary">
-								<LoaderCircleIcon class="size-4 animate-spin" />
-								Loading source...
-							</span>
-						</div>
-					</Transition>
-				</div>
-
-				<ButtonLink
-					v-tooltip="'Open file in slicer'"
-					type="outlined"
-					:href="createSlicerLink(props.file.download_url, classItem)"
-					:target="props.file.file_id"
-					circular
-					icon-only
-					@click="$event.stopPropagation()"
-				>
-					<ExternalIcon />
-				</ButtonLink>
-			</div>
-
-			<Collapsible :collapsed="!expandedClasses.has(classItem.key)">
-				<div class="flex flex-col gap-2 border-0 border-t border-solid border-surface-4 p-2">
-					<div
-						v-for="flag in classItem.flags"
-						:id="`tech-review-detail-${flag.detail.id}`"
-						:key="`${flag.issueId}-${flag.detail.id}`"
-						class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 bg-surface-3 py-2 pl-4 last:border-b-0"
-						:class="{
-							'!border-brand bg-brand-highlight': focusedDetailId === flag.detail.id,
-						}"
-					>
-						<div class="grid grid-cols-[1fr_auto] items-center">
-							<div
-								class="flex items-center gap-2"
-								:class="{
-									'opacity-50': isPreReviewed(flag.detail.id, flag.detail.status),
-								}"
-							>
-								<span class="text-base font-semibold text-contrast">{{
-									flag.issueType.replace(/_/g, ' ')
-								}}</span>
-								<div
-									class="rounded-full border-solid px-2.5 py-1"
-									:class="getSeverityBadgeColor(flag.detail.severity)"
-								>
-									<span class="text-sm font-medium">{{
-										capitalizeString(flag.detail.severity)
-									}}</span>
-								</div>
-							</div>
-
-							<div class="me-2 flex items-center justify-end gap-2">
-								<TechRevVerdictButtons
-									variant="trace"
-									:detail="flag.detail"
-									@global-safe="updateGlobalDetailAction(flag.detail, 'safe')"
-									@local-safe="updateLocalDetailAction(flag.detail, 'safe')"
-									@local-unsafe="updateLocalDetailAction(flag.detail, 'malware')"
-									@global-unsafe="updateGlobalDetailAction(flag.detail, 'malware')"
-								/>
-							</div>
-						</div>
-						<div
-							v-if="flag.detail.data && Object.keys(flag.detail.data).length > 0"
-							class="flex flex-wrap gap-x-4 gap-y-1 pr-4 text-sm"
-						>
-							<div
-								v-for="[key, value] in Object.entries(flag.detail.data).sort(([a], [b]) =>
-									a.localeCompare(b),
-								)"
-								:key="key"
-								class="flex items-center gap-1.5"
-							>
-								<span class="text-secondary">{{ key }}:</span>
-								<a
-									v-if="typeof value === 'string' && value.startsWith('http')"
-									:href="value"
-									target="_blank"
-									rel="noopener noreferrer"
-									class="text-brand-blue hover:underline"
-								>
-									{{ value }}
-								</a>
-								<span v-else class="font-mono text-contrast">{{ value }}</span>
-							</div>
-						</div>
-					</div>
-
-					<div
-						v-if="getHighlightedClassSource(classItem).length > 0"
-						class="relative inset-0 overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
-					>
-						<IconButton
-							v-tooltip="`Copy code`"
-							type="quiet"
-							:label="`Copy code`"
-							class="!absolute right-2 top-2 border-[1px]"
-							@click="copyToClipboard(getClassDecompiledSource(classItem)!, classItem.key)"
-						>
-							<CopyIcon v-if="!showCopyFeedback.get(classItem.key)" />
-							<CheckIcon v-else />
-						</IconButton>
-
-						<div class="overflow-x-auto bg-surface-3 py-3">
-							<div
-								v-for="(line, n) in getHighlightedClassSource(classItem)"
-								:key="n"
-								class="flex font-mono text-[13px] leading-[1.6]"
-							>
-								<div
-									class="select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
-									style="min-width: 3.5rem"
-								>
-									{{ n + 1 }}
-								</div>
-								<div class="flex-1 px-4 py-0 text-primary">
-									<pre v-html="line || ' '"></pre>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div
-						v-else-if="isClassLoadingSource(classItem)"
-						class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
-					>
-						<p class="flex items-center gap-2 text-sm text-secondary">
-							<LoaderCircleIcon class="size-4 animate-spin" />
-							Loading source...
-						</p>
-					</div>
-					<div v-else class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4">
-						<p class="text-sm text-secondary">
-							Source code not available or failed to decompile for this file.
-						</p>
-					</div>
-				</div>
-			</Collapsible>
-		</div>
+			:file="file"
+			:class-item="classItem"
+			:expanded="expandedClasses.has(classItem.key)"
+			:focused-detail-id="focusedDetailId"
+			:loading-issues="loadingIssues"
+			:decompiled-sources="decompiledSources"
+			@toggle="toggleClass(classItem)"
+			@verdict="handleTraceVerdict"
+		/>
 	</div>
 </template>
-
-<style scoped>
-pre {
-	all: unset;
-	display: inline;
-	white-space: pre;
-}
-
-.fade-enter-active {
-	transition: opacity 0.3s ease-in;
-	transition-delay: 0.2s;
-}
-
-.fade-leave-active {
-	transition: opacity 0.15s ease-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileItem.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileItem.vue
new file mode 100644
index 0000000000..199ce12afb
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileItem.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { RightArrowIcon, VersionIcon } from '@modrinth/assets'
+import { Button, ButtonLink, useFormatBytes } from '@modrinth/ui'
+import { computed } from 'vue'
+
+import { getFileDetailCount, getVersionPageHref, truncateMiddle } from './helpers'
+import TechRevFileActions from './TechRevFileActions.vue'
+import TechRevFlagBadges from './TechRevFlagBadges.vue'
+import type { FlattenedFileReport, TechRevProjectRef } from './types'
+import { injectTechReviewDecisions } from './use-tech-review-decisions'
+
+const props = defineProps<{
+	file: FlattenedFileReport
+	project: TechRevProjectRef
+}>()
+
+const emit = defineEmits<{
+	viewFlags: [file: FlattenedFileReport]
+}>()
+
+const formatBytes = useFormatBytes()
+const { getFileMarkedCount } = injectTechReviewDecisions()
+const details = computed(() => props.file.issues.flatMap((issue) => issue.details))
+const hasFlags = computed(() => details.value.length > 0)
+const isManualReview = computed(() => props.file.flag_reason.toString() === 'manual')
+const allFlagsMarked = computed(
+	() => hasFlags.value && getFileMarkedCount(props.file) === getFileDetailCount(props.file),
+)
+
+const truncatedFileName = computed(() => truncateMiddle(props.file.file_name, 50))
+const versionHref = computed(() => getVersionPageHref(props.project, props.file.version_id))
+const fileSizeLabel = computed(() => formatBytes(props.file.file_size))
+
+function viewFlags() {
+	if (hasFlags.value) {
+		emit('viewFlags', props.file)
+	}
+}
+</script>
+
+<template>
+	<div class="flex items-center justify-between px-4 py-3">
+		<div class="flex items-center gap-2">
+			<ButtonLink
+				v-tooltip="'View version'"
+				type="outlined"
+				target="_blank"
+				:href="versionHref"
+				class="!bg-surface-2"
+				icon-only
+				circular
+			>
+				<VersionIcon aria-hidden="true" />
+			</ButtonLink>
+			<div
+				v-tooltip="file.file_name === truncatedFileName ? undefined : file.file_name"
+				class="group flex h-9 cursor-pointer flex-col justify-center rounded-sm font-medium text-contrast hover:underline"
+				:class="{ 'opacity-50': allFlagsMarked }"
+				@click="viewFlags"
+			>
+				{{ truncatedFileName }}
+			</div>
+			<div
+				class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
+				:class="{ 'opacity-50': allFlagsMarked }"
+			>
+				<span class="text-sm font-medium text-secondary">{{ fileSizeLabel }}</span>
+			</div>
+			<TechRevFlagBadges v-if="hasFlags" :details="details" />
+			<!-- TODO: remove toString when backend supports it properly -->
+			<div
+				v-else-if="isManualReview"
+				class="border-blue/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-blue px-2.5 py-1 text-sm text-blue"
+			>
+				Manual review
+			</div>
+			<div
+				v-else
+				class="border-green/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-green px-2.5 py-1 text-sm text-green"
+			>
+				No flags
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<Button v-if="hasFlags" @click="viewFlags"> Flags <RightArrowIcon /> </Button>
+			<TechRevFileActions :file="file" />
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue
index 96fccf3b42..6228ef2e9c 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue
@@ -1,34 +1,20 @@
 <script setup lang="ts">
-import { CheckIcon, DownloadIcon, ExternalIcon, VersionIcon } from '@modrinth/assets'
-import { ButtonLink, useFormatBytes } from '@modrinth/ui'
-import { capitalizeString } from '@modrinth/utils'
 import { computed } from 'vue'
 
-import {
-	getFileDetailCount,
-	getFileHighestSeverity,
-	getSeverityBadgeColor,
-	getVersionLabel,
-	getVersionPageHref,
-	truncateMiddle,
-} from './helpers'
-import type { FlattenedFileReport } from './types'
+import { getFileDetailCount } from './helpers'
+import TechRevFileItem from './TechRevFileItem.vue'
+import type { FlattenedFileReport, TechRevProjectRef } from './types'
 import { injectTechReviewDecisions } from './use-tech-review-decisions'
 
 const props = defineProps<{
 	reports: FlattenedFileReport[]
-	project: {
-		id: string
-		slug?: string
-		project_types: string[]
-	}
+	project: TechRevProjectRef
 }>()
 
 const emit = defineEmits<{
 	viewFlags: [file: FlattenedFileReport]
 }>()
 
-const formatBytes = useFormatBytes()
 const { getFileMarkedCount } = injectTechReviewDecisions()
 
 const allFiles = computed(() => {
@@ -41,93 +27,14 @@ const allFiles = computed(() => {
 </script>
 
 <template>
-	<div
-		v-for="(file, idx) in allFiles"
-		:key="idx"
-		class="flex items-center justify-between border-0 border-x border-b border-solid border-surface-3 bg-surface-2 px-4 py-3"
-		:class="{
-			'rounded-bl-2xl rounded-br-2xl': idx === allFiles.length - 1,
-			'bg-[#E8E8E8] dark:bg-[#1A1C20]': idx % 2 === 1,
-		}"
-	>
-		<div class="flex items-center gap-3">
-			<span
-				v-tooltip="file.file_name"
-				class="py-2 font-medium text-contrast"
-				:aria-label="`View flags for ${file.file_name}`"
-				tabindex="0"
-				:class="{ 'cursor-pointer hover:underline': getFileDetailCount(file) > 0 }"
-				@click="getFileDetailCount(file) > 0 && emit('viewFlags', file)"
-			>
-				{{ truncateMiddle(file.file_name, 50) }}
-			</span>
-			<div class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1">
-				<span class="text-sm font-medium text-secondary">{{ formatBytes(file.file_size) }}</span>
-			</div>
-			<div
-				v-if="getFileDetailCount(file) > 0"
-				class="rounded-full border-solid px-2.5 py-1"
-				:class="getSeverityBadgeColor(getFileHighestSeverity(file))"
-			>
-				<span class="text-sm font-medium">{{
-					capitalizeString(getFileHighestSeverity(file))
-				}}</span>
-			</div>
-			<div
-				v-if="getFileDetailCount(file) > 0"
-				class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
-				:class="
-					getFileMarkedCount(file) === getFileDetailCount(file)
-						? 'border-green/60 bg-highlight-green text-green'
-						: 'border-red/60 bg-highlight-red text-red'
-				"
-			>
-				<CheckIcon v-if="getFileMarkedCount(file) === getFileDetailCount(file)" class="size-4" />
-				{{ getFileMarkedCount(file) }}/{{ getFileDetailCount(file) }} flags
-			</div>
-			<!-- TODO: remove toString when backend supports it properly -->
-			<div
-				v-else-if="file.flag_reason.toString() === 'manual'"
-				class="border-blue/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-blue px-2.5 py-1 text-sm text-blue"
-			>
-				Manual review
-			</div>
-			<div
-				v-else
-				class="border-green/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-green px-2.5 py-1 text-sm text-green"
-			>
-				No flags
-			</div>
-		</div>
-
-		<div class="flex items-center gap-2">
-			<ButtonLink
-				type="outlined"
-				target="_blank"
-				:href="getVersionPageHref(project, file.version_id)"
-				:aria-label="`Open version ${getVersionLabel(file)}`"
-			>
-				<VersionIcon aria-hidden="true" /> {{ getVersionLabel(file) }}
-			</ButtonLink>
-			<ButtonLink
-				type="outlined"
-				target="_blank"
-				:href="`https://slicer.run/?url=${encodeURIComponent(file.download_url)}`"
-				aria-label="Open in Slicer"
-			>
-				<ExternalIcon aria-hidden="true" /> Slicer
-			</ButtonLink>
-			<ButtonLink
-				v-tooltip="`Download ${file.file_name} (${formatBytes(file.file_size)})`"
-				type="outlined"
-				:href="file.download_url"
-				:download="file.file_name"
-				tabindex="0"
-				icon-only
-				circular
-			>
-				<DownloadIcon />
-			</ButtonLink>
-		</div>
+	<div>
+		<TechRevFileItem
+			v-for="file in allFiles"
+			:key="file.id"
+			class="bg-surface-2 last:rounded-bl-2xl last:rounded-br-2xl even:bg-surface-1.5"
+			:file="file"
+			:project="project"
+			@view-flags="emit('viewFlags', $event)"
+		/>
 	</div>
 </template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFlagBadges.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFlagBadges.vue
new file mode 100644
index 0000000000..f51c07c3d6
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFlagBadges.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { ShieldAlertIcon } from '@modrinth/assets'
+import { capitalizeString } from '@modrinth/utils'
+import { computed } from 'vue'
+
+import { getHighestSeverity, getSeverityBadgeColor } from './helpers'
+import { injectTechReviewDecisions } from './use-tech-review-decisions'
+
+const props = defineProps<{
+	details: Labrinth.TechReview.Internal.ReportIssueDetail[]
+}>()
+
+const { getDetailDecision } = injectTechReviewDecisions()
+
+const highestSeverity = computed(() => getHighestSeverity(props.details))
+const highestSeverityLabel = computed(() => capitalizeString(highestSeverity.value))
+const severityBadgeClass = computed(() => getSeverityBadgeColor(highestSeverity.value))
+
+const markedCount = computed(
+	() =>
+		props.details.filter((detail) => getDetailDecision(detail.id, detail.status) !== 'pending')
+			.length,
+)
+const failedCount = computed(
+	() =>
+		props.details.filter((detail) => getDetailDecision(detail.id, detail.status) === 'malware')
+			.length,
+)
+const allFlagsMarked = computed(
+	() => props.details.length > 0 && markedCount.value === props.details.length,
+)
+</script>
+
+<template>
+	<div v-if="details.length > 0" class="flex items-center gap-2">
+		<div
+			class="rounded-full border-solid px-2.5 py-1"
+			:class="[
+				severityBadgeClass,
+				{
+					'!bg-transparent opacity-50': allFlagsMarked,
+				},
+			]"
+		>
+			<span class="text-sm font-medium">{{ highestSeverityLabel }}</span>
+		</div>
+
+		<div
+			class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1 text-sm text-primary"
+			:class="{
+				'bg-transparent opacity-50': allFlagsMarked,
+			}"
+		>
+			{{ markedCount }}/{{ details.length }} done
+		</div>
+
+		<div
+			v-if="failedCount > 0"
+			v-tooltip="`${failedCount} failed`"
+			class="flex items-center gap-1 rounded-full border border-solid border-red bg-bg-red p-1 text-sm font-bold text-red"
+		>
+			<ShieldAlertIcon class="size-5" />
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue
index fe473219d5..18d9525679 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import {
-	BugIcon,
 	CheckIcon,
 	DropdownIcon,
 	EyeOffIcon,
 	ScaleIcon,
+	ShieldAlertIcon,
 	ShieldCheckIcon,
 	SpinnerIcon,
 	XIcon,
@@ -390,7 +390,7 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 						:disabled="!canSubmitReview"
 						@click="handleSubmitReview('unsafe')"
 					>
-						<BugIcon /> Fail
+						<ShieldAlertIcon /> Fail
 					</Button>
 					<TeleportOverflowMenu
 						label="More options"
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue
index c6df2d508a..0e1dd197a9 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue
@@ -91,14 +91,17 @@ const isLocalDisabled = computed(() => {
 })
 
 const BUTTON_BASE_CLASS =
-	'custom-focus-indicator flex size-8 cursor-pointer items-center justify-center border-0 border-l border-solid border-l-surface-5 bg-transparent p-0 transition-[background-color,filter] duration-150 ease-in-out first:rounded-s-[calc(var(--radius-md)-1px)] first:border-l-0 last:rounded-e-[calc(var(--radius-md)-1px)] disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4'
+	'custom-focus-indicator flex size-8 cursor-pointer items-center justify-center border-0 border-l border-solid border-l-surface-5 p-0 transition-[background-color,filter] duration-150 ease-in-out first:rounded-s-[calc(var(--radius-md)-1px)] first:border-l-0 last:rounded-e-[calc(var(--radius-md)-1px)] disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4'
 
 function buttonClass(decision: 'safe' | 'malware', scope: 'local' | 'global') {
+	const isSelected = selected(decision, scope)
+
 	return [
 		BUTTON_BASE_CLASS,
 		decision === 'safe' ? 'text-green' : 'text-red',
-		selected(decision, scope)
-			? 'bg-bg-green shadow-[inset_0_0_0_1px_var(--color-green)] hover:bg-bg-green focus-visible:bg-bg-green focus-visible:shadow-[inset_0_0_0_2px_var(--color-green)]'
+		isSelected && (decision === 'safe' ? 'bg-bg-green' : 'bg-bg-red'),
+		isSelected
+			? 'shadow-[inset_0_0_0_1px_currentColor] hover:bg-currentColor focus-visible:bg-currentColor focus-visible:shadow-[inset_0_0_0_2px_currentColor]'
 			: 'hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:shadow-[inset_0_0_0_2px_var(--color-brand)]',
 	]
 }
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts b/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts
index 00d2809bd0..d35e11da2d 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts
+++ b/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts
@@ -1,6 +1,6 @@
 import type { Labrinth } from '@modrinth/api-client'
 
-import type { DetailDecision, FlattenedFileReport } from './types'
+import type { DetailDecision, FlattenedFileReport, TechRevProjectRef } from './types'
 
 export const severityOrder: Record<Labrinth.TechReview.Internal.DelphiSeverity, number> = {
 	severe: 3,
@@ -32,15 +32,13 @@ export function truncateMiddle(str: string, maxLength = 120): string {
 	return str.slice(0, front) + '...' + str.slice(front - keep)
 }
 
-export function getFileHighestSeverity(
-	file: FlattenedFileReport,
+export function getHighestSeverity(
+	details: { severity: Labrinth.TechReview.Internal.DelphiSeverity }[],
 ): Labrinth.TechReview.Internal.DelphiSeverity {
 	let highest: Labrinth.TechReview.Internal.DelphiSeverity = 'low'
-	for (const issue of file.issues) {
-		for (const detail of issue.details) {
-			if (severityOrder[detail.severity] > severityOrder[highest]) {
-				highest = detail.severity
-			}
+	for (const detail of details) {
+		if (severityOrder[detail.severity] > severityOrder[highest]) {
+			highest = detail.severity
 		}
 	}
 	return highest
@@ -67,10 +65,7 @@ export function getVersionLabel(file: FlattenedFileReport): string {
 	return file.version_number || file.version_id
 }
 
-export function getVersionPageHref(
-	project: { id: string; slug?: string; project_types: string[] },
-	versionId: string,
-): string {
+export function getVersionPageHref(project: TechRevProjectRef, versionId: string): string {
 	return `/${project.project_types[0] ?? 'project'}/${project.slug ?? project.id}/version/${versionId}`
 }
 
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/types.ts b/apps/frontend/src/components/ui/moderation/tech-review/types.ts
index b4eab27aec..349f8a8633 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/types.ts
+++ b/apps/frontend/src/components/ui/moderation/tech-review/types.ts
@@ -6,6 +6,12 @@ export type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
 	version_number?: string
 }
 
+export type TechRevProjectRef = {
+	id: string
+	slug?: string
+	project_types: string[]
+}
+
 export type DetailDecision = 'safe' | 'malware' | 'pending'
 export type DetailDecisionScope = 'local' | 'global'
 
@@ -28,3 +34,9 @@ export type JarGroup = {
 	segments: string[]
 	classes: ClassGroup[]
 }
+
+export type TraceVerdictEvent = {
+	detail: Labrinth.TechReview.Internal.ReportIssueDetail
+	decision: Exclude<DetailDecision, 'pending'>
+	scope: DetailDecisionScope
+}
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index 071bfa87cb..4204c23409 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -188,7 +188,7 @@
 								class="animate-spin"
 								aria-hidden="true"
 							/>
-							<ScaleIcon v-else aria-hidden="true" />
+							<StickyNotePlusIcon v-else aria-hidden="true" />
 							{{ formatMessage(messages.actionAddPrivateNote) }}
 						</Button>
 						<template v-if="currentMember && !currentMember.staffOnly">
@@ -403,6 +403,7 @@ import {
 	ScaleIcon,
 	SendIcon,
 	SpinnerIcon,
+	StickyNotePlusIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index 61668d6462..c1855b5cef 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -43,18 +43,22 @@
 				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">
-					<SplitButton
-						v-if="primaryAction === 'note' && isStaff(auth.user)"
-						type="colored"
-						color="brand"
-						menu-label="More send options"
-						:disabled="!replyBody"
-						:options="publicMessageOptions"
-						class="w-full sm:w-auto"
-						@click="sendReply(true)"
-					>
-						Add note
-					</SplitButton>
+					<template v-if="primaryAction === 'note' && isStaff(auth.user)">
+						<Button
+							type="colored"
+							color="brand"
+							:disabled="!replyBody"
+							class="w-full sm:w-auto"
+							@click="sendReply(false)"
+						>
+							<SendIcon />
+							Send publicly
+						</Button>
+						<Button :disabled="!replyBody" class="w-full sm:w-auto" @click="sendReply(true)">
+							<StickyNotePlusIcon />
+							Add private note
+						</Button>
+					</template>
 					<template v-else>
 						<Button
 							v-if="sortedMessages.length > 0"
@@ -76,7 +80,7 @@
 							@click="sendReply()"
 						>
 							<SendIcon class="size-4" />
-							Send
+							Send publicly
 						</Button>
 						<Button
 							v-if="isStaff(auth.user)"
@@ -84,11 +88,13 @@
 							class="w-full sm:w-auto"
 							@click="sendReply(true)"
 						>
-							Add note
+							<StickyNotePlusIcon />
+							Add private note
 						</Button>
 					</template>
 					<TeleportOverflowMenu
 						v-if="visibleQuickReplies.length > 0"
+						type="outlined"
 						label="More options"
 						:options="visibleQuickReplies"
 						class="!w-auto !rounded-xl !px-2.5"
@@ -114,9 +120,10 @@ import {
 	MessageIcon,
 	ReplyIcon,
 	SendIcon,
+	StickyNotePlusIcon,
 } from '@modrinth/assets'
 import type { QuickReply } from '@modrinth/moderation'
-import { Button, SplitButton, TeleportOverflowMenu } from '@modrinth/ui'
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	type ButtonMenuOption,
 	CopyCode,
@@ -198,16 +205,6 @@ const members = computed(() => {
 
 const replyBody = ref('')
 
-const publicMessageOptions = computed<ButtonMenuOption[]>(() => [
-	{
-		id: 'send-public',
-		label: 'Send publicly',
-		icon: SendIcon,
-		action: () => sendReply(false),
-		disabled: !replyBody.value,
-	},
-])
-
 function setReplyContent(content: string) {
 	replyBody.value = content
 }
diff --git a/apps/frontend/src/helpers/moderation.ts b/apps/frontend/src/helpers/moderation.ts
index e511e1758a..9a3f7bbc21 100644
--- a/apps/frontend/src/helpers/moderation.ts
+++ b/apps/frontend/src/helpers/moderation.ts
@@ -149,6 +149,7 @@ export async function enrichReportBatch(
 			const targetUser = cache.users.value.get(report.item_id)
 			if (targetUser) {
 				target = {
+					id: targetUser.id,
 					name: targetUser.username,
 					slug: targetUser.username,
 					avatar_url: targetUser.avatar_url,
@@ -172,6 +173,7 @@ export async function enrichReportBatch(
 
 			if (org) {
 				target = {
+					id: org.id,
 					name: org.name,
 					avatar_url: org.icon_url,
 					type: 'organization',
@@ -179,6 +181,7 @@ export async function enrichReportBatch(
 				}
 			} else if (owner) {
 				target = {
+					id: owner.user.id,
 					name: owner.user.username,
 					avatar_url: owner.user.avatar_url,
 					type: 'user',
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index 0f03f6c968..27be807d53 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -3443,12 +3443,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Zurück zu allen Projekten"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Zurück zur Projektseite"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Entpacktes Modpack prüfen"
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index 6effcf80be..8156327126 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -3443,12 +3443,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Zurück zu allen Projekten"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Zurück zur Projektseite"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Entpacktes Modpack prüfen"
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index b55ccfdf5d..85e2195dd9 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -782,6 +782,9 @@
   "auth.create-account.date-of-birth.label": {
     "message": "Date of birth"
   },
+  "auth.create-account.date-of-birth.not-meet-age-requirement": {
+    "message": "You do not meet the age requirement to create an account at Modrinth."
+  },
   "auth.create-account.date-of-birth.placeholder": {
     "message": "Select your date of birth"
   },
@@ -792,7 +795,7 @@
     "message": "Date of birth required"
   },
   "auth.create-account.date-of-birth.under13-helper": {
-    "message": "You do not meet the age requirement to create an account at Modrinth."
+    "message": "You cannot create an account at Modrinth unless you are over 13 years old."
   },
   "auth.create-account.info-panel.source-code-link": {
     "message": "Relevant source code"
@@ -3512,12 +3515,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Back to all projects"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Back to project page"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Check modpack unzip"
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index 194bc96123..583ab7685a 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -3443,12 +3443,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Volver a todos los proyectos"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Volver a la página del proyecto"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Comprueba el descomprimido del Modpack"
   },
diff --git a/apps/frontend/src/locales/es-ES/index.json b/apps/frontend/src/locales/es-ES/index.json
index 5425a5dfe4..593feaf7bb 100644
--- a/apps/frontend/src/locales/es-ES/index.json
+++ b/apps/frontend/src/locales/es-ES/index.json
@@ -3434,12 +3434,6 @@
   "project-type.shader.singular": {
     "message": "Sombreador"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Volver a todos los proyectos"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Volver a la página del proyecto"
-  },
   "project.actions.checking-modpack-archives": {
     "message": "Comprobando..."
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index 479eb460ad..cd813e7afa 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -3443,12 +3443,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Retour à tous les projets"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Retour à la page du projet"
-  },
   "project.actions.create-server": {
     "message": "Créer un serveur"
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index 69b585c535..235a366e36 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -3434,12 +3434,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Torna a tutti i progetti"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Torna alla pagina del progetto"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Controlla il pacchetto"
   },
diff --git a/apps/frontend/src/locales/nl-NL/index.json b/apps/frontend/src/locales/nl-NL/index.json
index 334a5465fc..011aa1e4da 100644
--- a/apps/frontend/src/locales/nl-NL/index.json
+++ b/apps/frontend/src/locales/nl-NL/index.json
@@ -3440,12 +3440,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Terug naar alle projecten"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Terug naar project pagina"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Uitpakken van modpack controleren"
   },
diff --git a/apps/frontend/src/locales/pt-BR/index.json b/apps/frontend/src/locales/pt-BR/index.json
index 9aa7c48301..d1a02d15f7 100644
--- a/apps/frontend/src/locales/pt-BR/index.json
+++ b/apps/frontend/src/locales/pt-BR/index.json
@@ -3443,12 +3443,6 @@
   "project-type.shader.singular": {
     "message": "Sombreador"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Voltar aos projetos"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Voltar à página do projeto"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Verificar arquivo do pacote de mods"
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index fe9c8c96cb..40d4999a13 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -3434,12 +3434,6 @@
   "project-type.shader.singular": {
     "message": "Шейдер"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Вернуться ко всем проектам"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Вернуться на страницу проекта"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Проверить распаковку сборки"
   },
diff --git a/apps/frontend/src/locales/sv-SE/index.json b/apps/frontend/src/locales/sv-SE/index.json
index 149f8fd755..9528eac19c 100644
--- a/apps/frontend/src/locales/sv-SE/index.json
+++ b/apps/frontend/src/locales/sv-SE/index.json
@@ -3113,12 +3113,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Tillbaka till alla projekt"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Tillbaka till projektsidan"
-  },
   "project.actions.create-server": {
     "message": "Skapa en server"
   },
diff --git a/apps/frontend/src/locales/tr-TR/index.json b/apps/frontend/src/locales/tr-TR/index.json
index 50cd9bac2e..246c3ddc7c 100644
--- a/apps/frontend/src/locales/tr-TR/index.json
+++ b/apps/frontend/src/locales/tr-TR/index.json
@@ -3434,12 +3434,6 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Tüm projelere geri dön"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Proje sayfasına geri dön"
-  },
   "project.actions.checking-modpack-archives": {
     "message": "Kontrol ediliyor..."
   },
diff --git a/apps/frontend/src/locales/uk-UA/index.json b/apps/frontend/src/locales/uk-UA/index.json
index 408c0b7075..b115b41de9 100644
--- a/apps/frontend/src/locales/uk-UA/index.json
+++ b/apps/frontend/src/locales/uk-UA/index.json
@@ -3440,12 +3440,6 @@
   "project-type.shader.singular": {
     "message": "Шейдер"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "Назад до всіх проєктів"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "Назад до сторінки проєкту"
-  },
   "project.actions.check-modpack-archives": {
     "message": "Перевірити розпакування збірки"
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index 77fffff085..e7989fd5c4 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -3443,12 +3443,6 @@
   "project-type.shader.singular": {
     "message": "光影包"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "回到全部项目列表"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "回到项目页"
-  },
   "project.actions.check-modpack-archives": {
     "message": "检查整合包解压"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index 984d673a02..c33294eb04 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -3443,12 +3443,6 @@
   "project-type.shader.singular": {
     "message": "光影包"
   },
-  "project.actions.back-to-all-projects": {
-    "message": "回到所有專案"
-  },
-  "project.actions.back-to-project-page": {
-    "message": "回到專案頁面"
-  },
   "project.actions.check-modpack-archives": {
     "message": "檢查模組包解壓縮"
   },
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index e7956f8963..6676ffe757 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -844,14 +844,6 @@ const messages = defineMessages({
 		id: 'project.actions.project-page',
 		defaultMessage: 'Project page',
 	},
-	backToProjectPage: {
-		id: 'project.actions.back-to-project-page',
-		defaultMessage: 'Back to project page',
-	},
-	backToAllProjects: {
-		id: 'project.actions.back-to-all-projects',
-		defaultMessage: 'Back to all projects',
-	},
 	reviewProject: {
 		id: 'project.actions.review-project',
 		defaultMessage: 'Review project',
diff --git a/apps/frontend/src/pages/[type]/[project]/version/[version].vue b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
index 13c0843d36..86b2c71b0e 100644
--- a/apps/frontend/src/pages/[type]/[project]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
@@ -150,14 +150,12 @@
 								modSettings.get(moderationSettings.General.SlicerButtonInVersions)
 							"
 							v-tooltip="`Open in Slicer`"
-							type="quiet"
 							target="_blank"
 							:href="`https://slicer.run/?url=${encodeURIComponent(primaryFile?.url)}`"
-							class="!bg-button-bg"
 							aria-label="Open in Slicer"
 						>
 							<ExternalIcon aria-hidden="true" />
-							Open
+							Slicer
 						</ButtonLink>
 						<ButtonLink
 							v-for="file in promotedFiles.filter(
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index efa648356e..eddc11790c 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -4,6 +4,7 @@
 			v-model="query"
 			:page="currentPage"
 			:total-pages="totalPages"
+			:loading="pending"
 			@search="goToPage(1)"
 			@switch-page="goToPage"
 		>
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index dafe872cd7..8baf641883 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -4,6 +4,7 @@
 			v-model="query"
 			:page="currentPage"
 			:total-pages="totalPages"
+			:loading="isLoading"
 			@search="goToPage(1)"
 			@switch-page="goToPage"
 		>
@@ -165,7 +166,7 @@
 				</TeleportPopoutMenu>
 			</template>
 			<template #meta>
-				<div v-if="sortedReports.length > 0">
+				<div v-if="!isLoading && sortedReports.length > 0">
 					Showing {{ formatNumber(pageStart) }}–{{ formatNumber(pageEnd) }} of
 					{{ formatNumber(sortedReports.length) }} reports
 				</div>
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
index 9edb7a0aba..f200b8112f 100644
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/index.vue
@@ -608,6 +608,7 @@ onUnmounted(() => {
 			v-model="query"
 			:page="currentPage"
 			:total-pages="totalPages"
+			:loading="isLoading"
 			@search="goToPage(1)"
 			@switch-page="goToPage"
 		>
diff --git a/apps/frontend/src/plugins/open-on-modrinth.client.ts b/apps/frontend/src/plugins/open-on-modrinth.client.ts
index 413460355a..e709473ad1 100644
--- a/apps/frontend/src/plugins/open-on-modrinth.client.ts
+++ b/apps/frontend/src/plugins/open-on-modrinth.client.ts
@@ -1,4 +1,10 @@
-import { notifyCopied, useModerationKeybinds } from '~/composables/moderation.ts'
+import { moderationSettings } from '@modrinth/moderation'
+
+import {
+	notifyCopied,
+	useModerationKeybinds,
+	useModerationSettings,
+} from '~/composables/moderation.ts'
 
 function getOfficialOrigin(apiBaseUrl: string): string {
 	if (apiBaseUrl.startsWith('https://staging-api.modrinth.com')) {
@@ -7,19 +13,42 @@ function getOfficialOrigin(apiBaseUrl: string): string {
 	return 'https://modrinth.com'
 }
 
+function getAlternativeOrigin(hostname: string | null | undefined): string | null {
+	const trimmed = hostname?.trim()
+	if (!trimmed) {
+		return null
+	}
+
+	try {
+		const url = trimmed.includes('://') ? new URL(trimmed) : new URL(`http://${trimmed}`)
+		if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+			return null
+		}
+		return url.origin
+	} catch {
+		return null
+	}
+}
+
 export default defineNuxtPlugin(() => {
 	const config = useRuntimeConfig()
 	const keybinds = useModerationKeybinds()
+	const settings = useModerationSettings()
 
 	window.addEventListener('keydown', (event) => {
 		if (event.repeat) {
 			return
 		}
 
+		const pathAndSearch = `${window.location.pathname}${window.location.search}`
+		const alternativeOrigin = getAlternativeOrigin(
+			settings.value.get(moderationSettings.General.AlternativeHostname),
+		)
+
 		keybinds.value.handle(event, {
 			scope: 'global',
-			officialUrl: `${getOfficialOrigin(String(config.public.apiBaseUrl))}${window.location.pathname}${window.location.search}`,
-			localhostUrl: `http://localhost:3000${window.location.pathname}${window.location.search}`,
+			officialUrl: `${getOfficialOrigin(String(config.public.apiBaseUrl))}${pathAndSearch}`,
+			alternativeUrl: alternativeOrigin ? `${alternativeOrigin}${pathAndSearch}` : '',
 			notifyCopied,
 		})
 	})
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/JavaInfo.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/JavaInfo.class
new file mode 100644
index 0000000000..648d07c0d2
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/JavaInfo.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/MinecraftLaunch.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/MinecraftLaunch.class
new file mode 100644
index 0000000000..d1bb51beee
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/MinecraftLaunch.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/InsnPattern.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/InsnPattern.class
new file mode 100644
index 0000000000..7175d018da
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/InsnPattern.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/QuickPlayServerVersion.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/QuickPlayServerVersion.class
new file mode 100644
index 0000000000..15ec815897
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/QuickPlayServerVersion.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/TheseusAgent.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/TheseusAgent.class
new file mode 100644
index 0000000000..66a10f38ae
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/TheseusAgent.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/ClassNodeTransformer.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/ClassNodeTransformer.class
new file mode 100644
index 0000000000..477fa25d80
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/ClassNodeTransformer.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/ClassTransformer.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/ClassTransformer.class
new file mode 100644
index 0000000000..4d271e095e
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/ClassTransformer.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/MinecraftTransformer.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/MinecraftTransformer.class
new file mode 100644
index 0000000000..81ee25fcd4
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/agent/transformers/MinecraftTransformer.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/RpcHandlers.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/RpcHandlers.class
new file mode 100644
index 0000000000..c6b1ab59c2
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/RpcHandlers.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/RpcMethodException.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/RpcMethodException.class
new file mode 100644
index 0000000000..434e0f70e0
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/RpcMethodException.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc$ResponseWaiter.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc$ResponseWaiter.class
new file mode 100644
index 0000000000..d9d5a31e69
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc$ResponseWaiter.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc$RpcMessage.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc$RpcMessage.class
new file mode 100644
index 0000000000..bfd8bfda4d
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc$RpcMessage.class differ
diff --git a/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc.class b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc.class
new file mode 100644
index 0000000000..518c2978f3
Binary files /dev/null and b/packages/app-lib/java/bin/main/com/modrinth/theseus/rpc/TheseusRpc.class differ
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 65e948ca7b..7bd890e1fd 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -279,6 +279,7 @@ import _SplitIcon from './icons/split.svg?component'
 import _SquareIcon from './icons/square.svg?component'
 import _SquarePlusIcon from './icons/square-plus.svg?component'
 import _StarIcon from './icons/star.svg?component'
+import _StickyNotePlusIcon from './icons/sticky-note-plus.svg?component'
 import _StopCircleIcon from './icons/stop-circle.svg?component'
 import _StoreIcon from './icons/store.svg?component'
 import _StrikethroughIcon from './icons/strikethrough.svg?component'
@@ -737,6 +738,7 @@ export const SplitIcon = _SplitIcon
 export const SquareIcon = _SquareIcon
 export const SquarePlusIcon = _SquarePlusIcon
 export const StarIcon = _StarIcon
+export const StickyNotePlusIcon = _StickyNotePlusIcon
 export const StopCircleIcon = _StopCircleIcon
 export const StoreIcon = _StoreIcon
 export const StrikethroughIcon = _StrikethroughIcon
diff --git a/packages/assets/icons/sticky-note-plus.svg b/packages/assets/icons/sticky-note-plus.svg
new file mode 100644
index 0000000000..a63427d1a8
--- /dev/null
+++ b/packages/assets/icons/sticky-note-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sticky-note-plus-icon lucide-sticky-note-plus"><path d="M15 3v5a1 1 0 0 0 1 1h5"/><path d="M18 15v6"/><path d="M21 12.356V9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.355"/><path d="M21 18h-6"/></svg>
\ No newline at end of file
diff --git a/packages/moderation/src/data/keybinds.ts b/packages/moderation/src/data/keybinds.ts
index 4ca0f406c9..92ba270e67 100644
--- a/packages/moderation/src/data/keybinds.ts
+++ b/packages/moderation/src/data/keybinds.ts
@@ -34,11 +34,6 @@ function isOfficialModrinthHost(): boolean {
 	return host === 'modrinth.com' || host === 'www.modrinth.com' || host === 'staging.modrinth.com'
 }
 
-function isLocalhost(): boolean {
-	const host = globalThis.location?.hostname
-	return host === 'localhost' || host === '127.0.0.1' || host === '[::1]'
-}
-
 const keybinds: { [id: string]: KeybindListener } = {
 	'next-stage': {
 		keybind: 'ArrowRight',
@@ -125,27 +120,21 @@ const keybinds: { [id: string]: KeybindListener } = {
 	},
 	'open-official-site': {
 		keybind: 'Ctrl+Shift+P',
-		description: 'Open current page on production/staging',
+		description: isOfficialModrinthHost()
+			? 'Open current page on production/staging'
+			: 'Open current page on alternative host',
 		scope: 'global',
-		enabled: () => !isOfficialModrinthHost(),
+		enabled: (ctx) => !isOfficialModrinthHost() || !!ctx.alternativeUrl,
 		action: (ctx) => {
-			globalThis.open(ctx.officialUrl, '_blank', 'noopener,noreferrer')
-		},
-	},
-	'open-localhost': {
-		keybind: [],
-		description: 'Open current page on localhost',
-		scope: 'global',
-		enabled: () => !isLocalhost(),
-		action: (ctx) => {
-			globalThis.open(ctx.localhostUrl, '_blank', 'noopener,noreferrer')
+			const url = isOfficialModrinthHost() ? ctx.alternativeUrl : ctx.officialUrl
+			globalThis.open(url, '_blank', 'noopener,noreferrer')
 		},
 	},
 	'copy-official-site': {
 		keybind: 'Ctrl+Shift+O',
-		description: 'Copy production/staging URL (localhost only)',
+		description: 'Copy official URL',
 		scope: 'global',
-		enabled: () => isLocalhost(),
+		enabled: () => !isOfficialModrinthHost(),
 		action: async (ctx) => {
 			await navigator.clipboard.writeText(ctx.officialUrl)
 			const environment = ctx.officialUrl.startsWith('https://staging.modrinth.com')
diff --git a/packages/moderation/src/data/settings.ts b/packages/moderation/src/data/settings.ts
index d62436821c..4e35197972 100644
--- a/packages/moderation/src/data/settings.ts
+++ b/packages/moderation/src/data/settings.ts
@@ -5,7 +5,7 @@ const settings = {
 		ChecklistPosition: setting.asEnum({
 			type: 'enum',
 			id: 'checklist-position',
-			title: 'Checklist Position',
+			title: 'Checklist position',
 			description: 'Where the checklist should be displayed on the page',
 			entries: [
 				{ value: 'left', label: 'Left' },
@@ -16,28 +16,28 @@ const settings = {
 		ProjectKeybinds: setting.asToggle({
 			type: 'toggle',
 			id: 'project-keybinds',
-			title: 'Enable Project Keybinds',
+			title: 'Enable project keybinds',
 			description: 'Weather certain keybinds should work without the checklist visible.',
 			default: false,
 		}),
 		PrivateMessageHighlight: setting.asToggle({
 			type: 'toggle',
 			id: 'private-message-highlight',
-			title: 'Highlight Private Messages',
+			title: 'Highlight private messages',
 			description: 'Whether private messages should be highlighted in the chat.',
 			default: true,
 		}),
 		SlicerButtonInVersions: setting.asToggle({
 			type: 'toggle',
 			id: 'slicer-button-in-versions',
-			title: 'Show Slicer Button in Versions Table and Page',
+			title: 'Show Slicer button in versions table and page',
 			description: 'Whether the slicer button should be shown in the versions table and page.',
 			default: false,
 		}),
 		AdjustPageAlignment: setting.asEnum({
 			type: 'enum',
 			id: 'adjust-page-alignment',
-			title: 'Adjust Page Alignment',
+			title: 'Adjust page alignment',
 			description:
 				'Whether the main page elements should be centered or offset opposite to the Checklist Position.',
 			entries: [
@@ -47,6 +47,14 @@ const settings = {
 			],
 			default: 'never',
 		}),
+		AlternativeHostname: setting.asString({
+			type: 'string',
+			id: 'alternative-hostname',
+			title: 'Alternative hostname',
+			description:
+				'When Open production/staging is used on an official host, open this hostname instead. Example: localhost:3000',
+			default: null,
+		}),
 	},
 } as const
 
diff --git a/packages/moderation/src/types/keybinds.ts b/packages/moderation/src/types/keybinds.ts
index 5cf798be74..3b78460ddd 100644
--- a/packages/moderation/src/types/keybinds.ts
+++ b/packages/moderation/src/types/keybinds.ts
@@ -58,7 +58,7 @@ export type ModerationTechReviewContext = {
 export type ModerationGlobalContext = {
 	scope: 'global'
 	officialUrl: string
-	localhostUrl: string
+	alternativeUrl: string
 	notifyCopied: (value: string, title: string) => void
 }
 
diff --git a/packages/moderation/src/types/reports.ts b/packages/moderation/src/types/reports.ts
index e83b72570b..ad00065449 100644
--- a/packages/moderation/src/types/reports.ts
+++ b/packages/moderation/src/types/reports.ts
@@ -2,6 +2,7 @@ import type { Labrinth, SharedInstances } from '@modrinth/api-client'
 import type { Thread, User, Version } from '@modrinth/utils'
 
 export interface OwnershipTarget {
+	id: string
 	name: string
 	slug: string
 	avatar_url?: string
diff --git a/packages/ui/src/components/base/Badge.vue b/packages/ui/src/components/base/Badge.vue
index 3586fd0af7..0f7e023989 100644
--- a/packages/ui/src/components/base/Badge.vue
+++ b/packages/ui/src/components/base/Badge.vue
@@ -74,7 +74,7 @@
 			<ShieldCheckIcon aria-hidden="true" /> {{ formatMessage(messages.safeLabel) }}
 		</template>
 		<template v-else-if="type === 'unsafe'">
-			<BugIcon aria-hidden="true" /> {{ formatMessage(messages.unsafeLabel) }}
+			<ShieldAlertIcon aria-hidden="true" /> {{ formatMessage(messages.unsafeLabel) }}
 		</template>
 
 		<!-- Other -->
@@ -86,7 +86,6 @@
 import {
 	ArchiveIcon,
 	BoxIcon,
-	BugIcon,
 	CalendarIcon,
 	CheckIcon,
 	FileTextIcon,
@@ -95,6 +94,7 @@ import {
 	LockIcon,
 	ModrinthIcon,
 	ScaleIcon,
+	ShieldAlertIcon,
 	ShieldCheckIcon,
 	UpdatedIcon,
 	XIcon,