diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue
index 5a2c0b788c..a84e186a23 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/apps/frontend/src/components/ui/NavTabs.vue
@@ -1,23 +1,58 @@
 <template>
 	<nav
 		ref="scrollContainer"
-		class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		:class="[mode === 'navigation' ? 'card-shadow' : undefined]"
 	>
-		<NuxtLink
-			v-for="(link, index) in filteredLinks"
-			v-show="link.shown === undefined ? true : link.shown"
-			:key="index"
-			ref="tabLinkElements"
-			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-			class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
-			:class="{
-				'text-button-textSelected': activeIndex === index && !subpageSelected,
-				'text-contrast': activeIndex === index && subpageSelected,
-			}"
-		>
-			<component :is="link.icon" v-if="link.icon" class="size-5" />
-			<span class="text-nowrap">{{ link.label }}</span>
-		</NuxtLink>
+		<template v-if="mode === 'navigation'">
+			<NuxtLink
+				v-for="(link, index) in filteredLinks"
+				v-show="link.shown === undefined ? true : link.shown"
+				:key="link.href"
+				ref="tabLinkElements"
+				:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
+			>
+				<component
+					:is="link.icon"
+					v-if="link.icon"
+					class="size-5"
+					:class="{
+						'text-brand': currentActiveIndex === index && !subpageSelected,
+						'text-secondary': currentActiveIndex !== index || subpageSelected,
+					}"
+				/>
+				<span class="text-nowrap text-contrast">{{ link.label }}</span>
+			</NuxtLink>
+		</template>
+		<template v-else>
+			<div
+				v-for="(link, index) in filteredLinks"
+				v-show="link.shown === undefined ? true : link.shown"
+				:key="link.href"
+				ref="tabLinkElements"
+				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
+				@click="emit('tabClick', index, link)"
+			>
+				<component
+					:is="link.icon"
+					v-if="link.icon"
+					class="size-5"
+					:class="{
+						'text-brand': currentActiveIndex === index && !subpageSelected,
+						'text-secondary': currentActiveIndex !== index || subpageSelected,
+					}"
+				/>
+				<span
+					class="text-nowrap"
+					:class="{
+						'text-brand': currentActiveIndex === index && !subpageSelected,
+						'text-contrast': currentActiveIndex !== index || subpageSelected,
+					}"
+					>{{ link.label }}</span
+				>
+			</div>
+		</template>
 		<div
 			:class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${
 				subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected'
@@ -27,7 +62,8 @@
 				top: sliderTopPx,
 				right: sliderRightPx,
 				bottom: sliderBottomPx,
-				opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
+				opacity:
+					sliderLeft === 4 && sliderLeft === sliderRight ? 0 : currentActiveIndex === -1 ? 0 : 1,
 			}"
 			aria-hidden="true"
 		></div>
@@ -35,7 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import type { Component } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 const route = useNativeRoute()
 
@@ -43,13 +80,26 @@ interface Tab {
 	label: string
 	href: string
 	shown?: boolean
-	icon?: string
+	icon?: Component
 	subpages?: string[]
 }
 
-const props = defineProps<{
-	links: Tab[]
-	query?: string
+const props = withDefaults(
+	defineProps<{
+		links: Tab[]
+		query?: string
+		mode?: 'navigation' | 'local'
+		activeIndex?: number
+	}>(),
+	{
+		mode: 'navigation',
+		query: undefined,
+		activeIndex: undefined,
+	},
+)
+
+const emit = defineEmits<{
+	tabClick: [index: number, tab: Tab]
 }>()
 
 const scrollContainer = ref<HTMLElement | null>(null)
@@ -58,7 +108,7 @@ const sliderLeft = ref(4)
 const sliderTop = ref(4)
 const sliderRight = ref(4)
 const sliderBottom = ref(4)
-const activeIndex = ref(-1)
+const currentActiveIndex = ref(-1)
 const subpageSelected = ref(false)
 
 const filteredLinks = computed(() =>
@@ -74,30 +124,36 @@ const tabLinkElements = ref()
 function pickLink() {
 	let index = -1
 	subpageSelected.value = false
-	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
-		const link = filteredLinks.value[i]
-		if (props.query) {
-			if (route.query[props.query] === link.href || (!route.query[props.query] && !link.href)) {
+
+	if (props.mode === 'local' && props.activeIndex !== undefined) {
+		index = Math.min(props.activeIndex, filteredLinks.value.length - 1)
+	} else {
+		for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
+			const link = filteredLinks.value[i]
+			if (props.query) {
+				if (route.query[props.query] === link.href || (!route.query[props.query] && !link.href)) {
+					index = i
+					break
+				}
+			} else if (decodeURIComponent(route.path) === link.href) {
+				index = i
+				break
+			} else if (
+				decodeURIComponent(route.path).includes(link.href) ||
+				(link.subpages &&
+					link.subpages.some((subpage) => decodeURIComponent(route.path).includes(subpage)))
+			) {
 				index = i
+				subpageSelected.value = true
 				break
 			}
-		} else if (decodeURIComponent(route.path) === link.href) {
-			index = i
-			break
-		} else if (
-			decodeURIComponent(route.path).includes(link.href) ||
-			(link.subpages &&
-				link.subpages.some((subpage) => decodeURIComponent(route.path).includes(subpage)))
-		) {
-			index = i
-			subpageSelected.value = true
-			break
 		}
 	}
-	activeIndex.value = index
 
-	if (activeIndex.value !== -1) {
-		startAnimation()
+	currentActiveIndex.value = index
+
+	if (currentActiveIndex.value !== -1) {
+		nextTick(() => startAnimation())
 	} else {
 		sliderLeft.value = 0
 		sliderRight.value = 0
@@ -105,7 +161,12 @@ function pickLink() {
 }
 
 function startAnimation() {
-	const el = tabLinkElements.value[activeIndex.value]?.$el
+	// In navigation mode, elements are NuxtLinks with $el property
+	// In local mode, elements are plain divs
+	const el =
+		props.mode === 'navigation'
+			? tabLinkElements.value[currentActiveIndex.value]?.$el
+			: tabLinkElements.value[currentActiveIndex.value]
 
 	if (!el || !el.offsetParent) return
 
@@ -156,7 +217,29 @@ onMounted(() => {
 
 watch(
 	() => [route.path, route.query],
-	() => pickLink(),
+	() => {
+		if (props.mode === 'navigation') {
+			pickLink()
+		}
+	},
+)
+
+watch(
+	() => props.activeIndex,
+	() => {
+		if (props.mode === 'local') {
+			pickLink()
+		}
+	},
+)
+
+watch(
+	() => props.links,
+	() => {
+		// Re-trigger animation when links change
+		pickLink()
+	},
+	{ deep: true },
 )
 </script>
 
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
index 2249cf6af3..b7447ee458 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
@@ -207,6 +207,8 @@ import {
 	financialMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
+	getBlockchainColor,
+	getBlockchainIcon,
 	normalizeChildren,
 } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
@@ -218,12 +220,6 @@ import RevenueInputField from '@/components/ui/dashboard/RevenueInputField.vue'
 import WithdrawFeeBreakdown from '@/components/ui/dashboard/WithdrawFeeBreakdown.vue'
 import { useGeneratedState } from '@/composables/generated'
 import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
-import {
-	getBlockchainColor,
-	getBlockchainIcon,
-	getCurrencyColor,
-	getCurrencyIcon,
-} from '@/utils/finance-icons.ts'
 import { getRailConfig } from '@/utils/muralpay-rails'
 
 const { withdrawData, maxWithdrawAmount, availableMethods, calculateFees } = useWithdrawContext()
diff --git a/apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue b/apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue
new file mode 100644
index 0000000000..a0cc693637
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue
@@ -0,0 +1,39 @@
+<template>
+	<div
+		class="flex flex-col gap-4 rounded-2xl border-[1px] border-solid border-blue bg-highlight-blue p-4"
+	>
+		<div class="flex flex-row justify-between">
+			<div class="flex flex-col text-contrast">
+				<span class="text-xl font-semibold">Batch scan in progress</span>
+				<span>{{ progress?.complete }} of {{ progress?.total }} projects completed</span>
+			</div>
+			<ButtonStyled circular color="blue" type="outlined">
+				<button class="!px-4" @click="emit('cancel-scan')">Cancel scan</button>
+			</ButtonStyled>
+		</div>
+		<div class="w-full rounded-full bg-highlight-blue">
+			<div
+				class="h-3 rounded-[inherit] bg-blue"
+				:style="`width: ${((progress?.complete ?? 0) / (progress?.total ?? 1)) * 100}%`"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled } from '@modrinth/ui'
+import { defineProps } from 'vue'
+
+export interface BatchScanProgress {
+	total: number
+	complete: number
+}
+
+defineProps<{
+	progress?: BatchScanProgress
+}>()
+
+const emit = defineEmits<{
+	(e: 'cancel-scan'): void
+}>()
+</script>
diff --git a/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
new file mode 100644
index 0000000000..f5b1fea8a8
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { ClipboardCopyIcon, LoaderCircleIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, CopyCode, NewModal } from '@modrinth/ui'
+import { ref, useTemplateRef } from 'vue'
+
+export type UnsafeFile = {
+	file: Labrinth.TechReview.Internal.FileReport & { version_id: string }
+	projectName: string
+	projectId: string
+	userId: string
+	username: string
+}
+
+const props = defineProps<{
+	unsafeFiles: UnsafeFile[]
+}>()
+
+const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
+
+const versionDataCache = ref<
+	Map<
+		string,
+		{
+			files: Map<string, string>
+			loading: boolean
+			error?: string
+		}
+	>
+>(new Map())
+
+async function fetchVersionHashes(versionIds: string[]) {
+	const uniqueIds = [...new Set(versionIds)]
+	for (const versionId of uniqueIds) {
+		if (versionDataCache.value.has(versionId)) continue
+		versionDataCache.value.set(versionId, { files: new Map(), loading: true })
+		try {
+			// TODO: switch to api-client once truman's vers stuff is merged
+			const version = (await useBaseFetch(`version/${versionId}`)) as {
+				files: Array<{
+					filename: string
+					file_name?: string
+					hashes: { sha512: string; sha1: string }
+				}>
+			}
+			const filesMap = new Map<string, string>()
+			for (const file of version.files) {
+				const name = file.file_name ?? file.filename
+				filesMap.set(name, file.hashes.sha512)
+			}
+			versionDataCache.value.set(versionId, { files: filesMap, loading: false })
+		} catch (error) {
+			console.error(`Failed to fetch version ${versionId}:`, error)
+			versionDataCache.value.set(versionId, {
+				files: new Map(),
+				loading: false,
+				error: 'Failed',
+			})
+		}
+	}
+}
+
+function getFileHash(versionId: string, fileName: string): string | undefined {
+	return versionDataCache.value.get(versionId)?.files.get(fileName)
+}
+
+function isHashLoading(versionId: string): boolean {
+	return versionDataCache.value.get(versionId)?.loading ?? false
+}
+
+function show() {
+	const versionIds = props.unsafeFiles.map((f) => f.file.version_id)
+	fetchVersionHashes(versionIds)
+	modalRef.value?.show()
+}
+
+function hide() {
+	modalRef.value?.hide()
+}
+
+async function copy(text: string) {
+	await navigator.clipboard.writeText(text)
+}
+
+defineExpose({ show, hide })
+</script>
+
+<template>
+	<NewModal
+		ref="modalRef"
+		header="Malicious file(s) summary"
+		:close-on-click-outside="false"
+		:close-on-esc="false"
+		:closable="false"
+	>
+		<div class="markdown-body inset-0">
+			<div v-if="unsafeFiles.length > 0" class="mb-4 flex flex-col gap-2">
+				<div class="flex items-center gap-2">
+					<span class="text-tertiary text-sm font-medium">Project:</span>
+					<CopyCode :text="unsafeFiles[0].projectName" />
+					<CopyCode :text="unsafeFiles[0].projectId" />
+				</div>
+				<div class="flex items-center gap-2">
+					<span class="text-tertiary text-sm font-medium">User:</span>
+					<CopyCode :text="unsafeFiles[0].username" />
+					<CopyCode :text="unsafeFiles[0].userId" />
+				</div>
+			</div>
+
+			<table v-if="unsafeFiles.length > 0" class="w-full text-sm">
+				<thead>
+					<tr class="text-tertiary text-left text-xs font-medium">
+						<th class="pb-2">Hash</th>
+						<th class="pb-2">Version ID</th>
+						<th class="pb-2">File Name</th>
+						<th class="pb-2">CDN Link</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for="item in unsafeFiles" :key="item.file.file_id">
+						<td class="py-1 pr-2">
+							<LoaderCircleIcon
+								v-if="isHashLoading(item.file.version_id)"
+								class="size-4 animate-spin text-secondary"
+							/>
+							<ButtonStyled
+								v-else-if="getFileHash(item.file.version_id, item.file.file_name)"
+								size="small"
+								type="standard"
+							>
+								<button @click="copy(getFileHash(item.file.version_id, item.file.file_name)!)">
+									<ClipboardCopyIcon class="size-4" />
+									Copy
+								</button>
+							</ButtonStyled>
+							<span v-else class="text-tertiary italic">N/A</span>
+						</td>
+						<td class="py-1 pr-2">
+							<CopyCode :text="item.file.version_id" />
+						</td>
+						<td class="py-1 pr-2">
+							<CopyCode :text="item.file.file_name" />
+						</td>
+						<td class="py-1">
+							<ButtonStyled size="small" type="standard">
+								<button @click="copy(item.file.download_url)">
+									<ClipboardCopyIcon class="size-4" />
+									Copy
+								</button>
+							</ButtonStyled>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<p v-else class="text-sm italic text-secondary">No files currently marked as malicious.</p>
+
+			<div class="flex justify-end">
+				<ButtonStyled>
+					<button @click="hide">
+						<XIcon class="size-4" />
+						Close
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
deleted file mode 100644
index d374418ea7..0000000000
--- a/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<template>
-	<div class="universal-card">
-		<div class="flex flex-col gap-4">
-			<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-				<div class="flex min-w-0 flex-1 items-center gap-3">
-					<Avatar :src="report.project.icon_url" size="3rem" class="flex-shrink-0" />
-					<div class="min-w-0 flex-1">
-						<h3 class="truncate text-lg font-semibold">{{ report.project.title }}</h3>
-
-						<div class="flex flex-col gap-2 text-sm text-secondary sm:flex-row sm:items-center">
-							<nuxt-link
-								v-if="report.target"
-								:to="`/${report.target.type}/${report.target.slug}`"
-								class="inline-flex flex-row items-center gap-1 transition-colors duration-100 ease-in-out hover:text-brand"
-							>
-								<Avatar
-									:src="report.target.avatar_url"
-									:circle="report.target.type === 'user'"
-									size="1rem"
-									class="flex-shrink-0"
-								/>
-								<span class="truncate">
-									<OrganizationIcon
-										v-if="report.target.type === 'organization'"
-										class="align-middle"
-									/>
-									{{ report.target.name }}
-								</span>
-							</nuxt-link>
-
-							<div class="flex flex-wrap items-center gap-2">
-								<span
-									class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold text-secondary"
-								>
-									Score: {{ report.priority_score }}
-								</span>
-								<span
-									class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold"
-									:class="{
-										'text-brand': report.status === 'approved',
-										'text-red': report.status === 'rejected',
-										'text-secondary': report.status === 'pending',
-									}"
-								>
-									{{ report.status.charAt(0).toUpperCase() + report.status.slice(1) }}
-								</span>
-								<span class="max-w-[200px] truncate font-mono text-xs sm:max-w-none">
-									{{
-										report.version.files.find((file) => file.primary)?.filename ||
-										'Unknown primary file'
-									}}
-								</span>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div
-					class="mt-2 flex flex-col items-stretch gap-2 sm:mt-0 sm:flex-row sm:items-center sm:gap-2"
-				>
-					<span class="hidden whitespace-nowrap text-sm text-secondary sm:block">
-						{{ formatRelativeTime(dayjs(report.detected_at).toDate()) }}
-					</span>
-
-					<div class="flex flex-col gap-2 sm:flex-row">
-						<div class="flex gap-2">
-							<ButtonStyled class="flex-1 sm:flex-none">
-								<button
-									v-tooltip="!isPending ? 'This report has already been dealt with.' : undefined"
-									:disabled="!isPending"
-									class="w-full sm:w-auto"
-								>
-									Accept
-								</button>
-							</ButtonStyled>
-							<ButtonStyled class="flex-1 sm:flex-none">
-								<button
-									v-tooltip="!isPending ? 'This report has already been dealt with.' : undefined"
-									:disabled="!isPending"
-									class="w-full sm:w-auto"
-								>
-									Reject
-								</button>
-							</ButtonStyled>
-						</div>
-
-						<div class="flex justify-center gap-2 sm:justify-start">
-							<ButtonStyled circular>
-								<nuxt-link :to="versionUrl">
-									<EyeIcon />
-								</nuxt-link>
-							</ButtonStyled>
-							<ButtonStyled circular>
-								<OverflowMenu :options="quickActions">
-									<template #default>
-										<EllipsisVerticalIcon />
-									</template>
-									<template #copy-id>
-										<ClipboardCopyIcon />
-										<span class="hidden sm:inline">Copy ID</span>
-									</template>
-									<template #copy-link>
-										<LinkIcon />
-										<span class="hidden sm:inline">Copy link</span>
-									</template>
-								</OverflowMenu>
-							</ButtonStyled>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div class="text-sm text-secondary sm:hidden">
-				{{ formatRelativeTime(dayjs(report.detected_at).toDate()) }}
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	ClipboardCopyIcon,
-	EllipsisVerticalIcon,
-	EyeIcon,
-	LinkIcon,
-	OrganizationIcon,
-} from '@modrinth/assets'
-import type { ExtendedDelphiReport } from '@modrinth/moderation'
-import {
-	Avatar,
-	ButtonStyled,
-	injectNotificationManager,
-	OverflowMenu,
-	type OverflowMenuOption,
-	useRelativeTime,
-} from '@modrinth/ui'
-import dayjs from 'dayjs'
-
-const { addNotification } = injectNotificationManager()
-
-const props = defineProps<{
-	report: ExtendedDelphiReport
-}>()
-
-const formatRelativeTime = useRelativeTime()
-const isPending = computed(() => props.report.status === 'pending')
-
-const quickActions: OverflowMenuOption[] = [
-	{
-		id: 'copy-link',
-		action: () => {
-			const base = window.location.origin
-			const reviewUrl = `${base}/moderation/tech-reviews?q=${props.report.version.id}`
-			navigator.clipboard.writeText(reviewUrl).then(() => {
-				addNotification({
-					type: 'success',
-					title: 'Tech review link copied',
-					text: 'The link to this tech review has been copied to your clipboard.',
-				})
-			})
-		},
-	},
-	{
-		id: 'copy-id',
-		action: () => {
-			navigator.clipboard.writeText(props.report.version.id).then(() => {
-				addNotification({
-					type: 'success',
-					title: 'Version ID copied',
-					text: 'The ID of this version has been copied to your clipboard.',
-				})
-			})
-		},
-	},
-]
-
-const versionUrl = computed(() => {
-	return `/${props.report.project.project_type}/${props.report.project.slug}/version/${props.report.version.id}`
-})
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
index f60740c95e..3d34ba13de 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
@@ -1,143 +1,127 @@
 <template>
-	<div
-		class="universal-card flex min-h-[6rem] flex-col justify-between gap-3 rounded-lg p-4 sm:h-24 sm:flex-row sm:items-center sm:gap-0"
-	>
-		<div class="flex min-w-0 flex-1 items-center gap-3">
-			<div class="flex-shrink-0 rounded-lg">
-				<Avatar size="48px" :src="queueEntry.project.icon_url" />
-			</div>
-			<div class="flex min-w-0 flex-1 flex-col">
-				<h3 class="truncate text-lg font-semibold">
-					{{ queueEntry.project.name }}
-				</h3>
-				<nuxt-link
-					v-if="queueEntry.owner"
-					target="_blank"
-					class="flex items-center gap-1 truncate align-middle text-sm hover:text-brand"
-					:to="`/user/${queueEntry.owner.user.username}`"
-				>
-					<Avatar
-						:src="queueEntry.owner.user.avatar_url"
-						circle
-						size="16px"
-						class="inline-block flex-shrink-0"
-					/>
-					<span class="truncate">{{ queueEntry.owner.user.username }}</span>
-				</nuxt-link>
-				<nuxt-link
-					v-else-if="queueEntry.org"
-					target="_blank"
-					class="flex items-center gap-1 truncate align-middle text-sm hover:text-brand"
-					:to="`/organization/${queueEntry.org.slug}`"
-				>
-					<Avatar
-						:src="queueEntry.org.icon_url"
-						circle
-						size="16px"
-						class="inline-block flex-shrink-0"
-					/>
-					<span class="truncate">{{ queueEntry.org.name }}</span>
-				</nuxt-link>
-			</div>
-		</div>
-
-		<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
-			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-1">
-				<span class="flex items-center gap-1 whitespace-nowrap text-sm">
-					<BoxIcon
-						v-if="queueEntry.project.project_type === 'mod'"
-						class="size-4 flex-shrink-0"
-						aria-hidden="true"
-					/>
-					<PaintbrushIcon
-						v-else-if="queueEntry.project.project_type === 'resourcepack'"
-						class="size-4 flex-shrink-0"
-						aria-hidden="true"
-					/>
-					<BracesIcon
-						v-else-if="queueEntry.project.project_type === 'datapack'"
-						class="size-4 flex-shrink-0"
-						aria-hidden="true"
-					/>
-					<PackageOpenIcon
-						v-else-if="queueEntry.project.project_type === 'modpack'"
-						class="size-4 flex-shrink-0"
-						aria-hidden="true"
-					/>
-					<GlassesIcon
-						v-else-if="queueEntry.project.project_type === 'shader'"
-						class="size-4 flex-shrink-0"
-						aria-hidden="true"
-					/>
-					<PlugIcon
-						v-else-if="queueEntry.project.project_type === 'plugin'"
-						class="size-4 flex-shrink-0"
-						aria-hidden="true"
-					/>
-					<span class="hidden sm:inline">{{
-						props.queueEntry.project.project_types.map(formatProjectType).join(', ')
-					}}</span>
-					<span class="sm:hidden">{{
-						props.queueEntry.project.project_types.map(formatProjectType).join(', ')
-					}}</span>
-				</span>
-
-				<span class="hidden text-sm sm:inline">&#x2022;</span>
-
-				<div class="flex flex-row gap-2 text-sm">
-					Requesting
-					<Badge
-						v-if="props.queueEntry.project.requested_status"
-						:type="props.queueEntry.project.requested_status"
-						class="status"
-					/>
+	<div class="shadow-card rounded-2xl border border-surface-5 bg-surface-3 p-4">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<Avatar
+					:src="queueEntry.project.icon_url"
+					size="4rem"
+					class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
+				/>
+				<div class="flex flex-col gap-1.5">
+					<div class="flex items-center gap-2">
+						<NuxtLink
+							:to="`/project/${queueEntry.project.slug}`"
+							target="_blank"
+							class="text-lg font-semibold text-contrast hover:underline"
+						>
+							{{ queueEntry.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"
+						>
+							<component
+								:is="getProjectTypeIcon(queueEntry.project.project_types[0] as any)"
+								aria-hidden="true"
+								class="h-4 w-4"
+							/>
+							<span class="text-sm font-medium text-secondary">
+								{{
+									queueEntry.project.project_types.map((t) => formatProjectType(t, true)).join(', ')
+								}}
+							</span>
+						</div>
+						<div
+							v-if="queueEntry.project.requested_status"
+							class="flex items-center gap-2 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+						>
+							<span class="text-sm text-secondary">Requesting</span>
+							<Badge :type="queueEntry.project.requested_status" class="status" />
+						</div>
+					</div>
+					<div v-if="queueEntry.owner" class="flex items-center gap-1">
+						<Avatar
+							:src="queueEntry.owner.user.avatar_url"
+							size="1.5rem"
+							circle
+							class="border border-surface-5 bg-surface-4 !shadow-none"
+						/>
+						<NuxtLink
+							:to="`/user/${queueEntry.owner.user.username}`"
+							target="_blank"
+							class="text-sm font-medium text-secondary hover:underline"
+						>
+							{{ queueEntry.owner.user.username }}
+						</NuxtLink>
+					</div>
+					<div v-else-if="queueEntry.org" class="flex items-center gap-1">
+						<Avatar
+							:src="queueEntry.org.icon_url"
+							size="1.5rem"
+							circle
+							class="border border-surface-5 bg-surface-4 !shadow-none"
+						/>
+						<NuxtLink
+							:to="`/organization/${queueEntry.org.slug}`"
+							target="_blank"
+							class="text-sm font-medium text-secondary hover:underline"
+						>
+							{{ queueEntry.org.name }}
+						</NuxtLink>
+					</div>
 				</div>
+			</div>
 
-				<span class="hidden text-sm sm:inline">&#x2022;</span>
-
+			<div class="flex items-center gap-3">
 				<span
 					v-tooltip="`Since ${queuedDate.toLocaleString()}`"
-					class="truncate text-sm"
+					class="text-base text-secondary"
 					:class="{
 						'text-red': daysInQueue > 4,
-						'text-orange': daysInQueue > 2,
+						'text-orange': daysInQueue > 2 && daysInQueue <= 4,
 					}"
 				>
-					<span class="hidden sm:inline">{{ getSubmittedTime(queueEntry) }}</span>
-					<span class="sm:hidden">{{
-						getSubmittedTime(queueEntry).replace('Submitted ', '')
-					}}</span>
+					{{ formattedDate }}
 				</span>
-			</div>
 
-			<div class="flex items-center justify-end gap-2 sm:justify-start">
-				<ButtonStyled circular>
-					<NuxtLink target="_blank" :to="`/project/${queueEntry.project.slug}`">
-						<EyeIcon class="size-4" />
-					</NuxtLink>
-				</ButtonStyled>
-				<ButtonStyled circular color="orange" @click="openProjectForReview">
-					<button>
-						<ScaleIcon class="size-4" />
-					</button>
-				</ButtonStyled>
+				<div class="flex items-center gap-2">
+					<ButtonStyled circular color="orange">
+						<button @click="openProjectForReview">
+							<ScaleIcon class="size-5" />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled circular>
+						<OverflowMenu :options="quickActions">
+							<template #default>
+								<EllipsisVerticalIcon class="size-4" />
+							</template>
+							<template #copy-id>
+								<ClipboardCopyIcon />
+								<span class="hidden sm:inline">Copy ID</span>
+							</template>
+							<template #copy-link>
+								<LinkIcon />
+								<span class="hidden sm:inline">Copy link</span>
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { ClipboardCopyIcon, EllipsisVerticalIcon, LinkIcon, ScaleIcon } from '@modrinth/assets'
 import {
-	BoxIcon,
-	BracesIcon,
-	EyeIcon,
-	GlassesIcon,
-	PackageOpenIcon,
-	PaintbrushIcon,
-	PlugIcon,
-	ScaleIcon,
-} from '@modrinth/assets'
-import { Avatar, Badge, ButtonStyled, useRelativeTime } from '@modrinth/ui'
+	Avatar,
+	Badge,
+	ButtonStyled,
+	getProjectTypeIcon,
+	injectNotificationManager,
+	OverflowMenu,
+	type OverflowMenuOption,
+	useRelativeTime,
+} from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
@@ -145,6 +129,7 @@ import { computed } from 'vue'
 import type { ModerationProject } from '~/helpers/moderation'
 import { useModerationStore } from '~/store/moderation.ts'
 
+const { addNotification } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 const moderationStore = useModerationStore()
 
@@ -170,6 +155,49 @@ const daysInQueue = computed(() => {
 	return getDaysQueued(queuedDate.value.toDate())
 })
 
+const formattedDate = computed(() => {
+	const date =
+		props.queueEntry.project.queued ||
+		props.queueEntry.project.created ||
+		props.queueEntry.project.updated
+	if (!date) return 'Unknown'
+
+	try {
+		return formatRelativeTime(dayjs(date).toISOString())
+	} catch {
+		return 'Unknown'
+	}
+})
+
+const quickActions: OverflowMenuOption[] = [
+	{
+		id: 'copy-link',
+		action: () => {
+			const base = window.location.origin
+			const projectUrl = `${base}/project/${props.queueEntry.project.slug}`
+			navigator.clipboard.writeText(projectUrl).then(() => {
+				addNotification({
+					type: 'success',
+					title: 'Project link copied',
+					text: 'The link to this project has been copied to your clipboard.',
+				})
+			})
+		},
+	},
+	{
+		id: 'copy-id',
+		action: () => {
+			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() {
 	moderationStore.setSingleProject(props.queueEntry.project.id)
 	navigateTo({
@@ -183,18 +211,4 @@ function openProjectForReview() {
 		},
 	})
 }
-
-function getSubmittedTime(): string {
-	const date =
-		props.queueEntry.project.queued ||
-		props.queueEntry.project.created ||
-		props.queueEntry.project.updated
-	if (!date) return 'Unknown'
-
-	try {
-		return `Submitted ${formatRelativeTime(dayjs(date).toISOString())}`
-	} catch {
-		return 'Unknown'
-	}
-}
 </script>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 895099a780..3b81942c17 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -1,176 +1,287 @@
 <template>
-	<div class="universal-card">
-		<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">
-					Reported for
-					<span class="whitespace-nowrap rounded-full align-middle font-semibold text-contrast">
-						{{ formattedReportType }}
+	<div class="overflow-hidden rounded-2xl">
+		<div class="bg-bg-raised p-4">
+			<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-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="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>
 					</span>
 				</span>
-				<span class="flex items-center gap-2">
-					<span class="hidden sm:inline">By</span>
-					<span class="sm:hidden">Reporter:</span>
-					<nuxt-link
-						:to="`/user/${report.reporter_user.username}`"
-						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>
-				</span>
-			</span>
 
-			<div class="flex flex-row items-center gap-2 self-end sm:self-auto">
-				<span class="text-md whitespace-nowrap text-secondary">{{
-					formatRelativeTime(report.created)
-				}}</span>
-				<ButtonStyled v-if="visibleQuickReplies.length > 0" circular>
-					<OverflowMenu :options="visibleQuickReplies">
-						<span class="hidden sm:inline">Quick Reply</span>
-						<span class="sr-only sm:hidden">Quick Reply</span>
-						<ChevronDownIcon />
-					</OverflowMenu>
-				</ButtonStyled>
-				<ButtonStyled circular>
-					<OverflowMenu :options="quickActions">
-						<template #default>
-							<EllipsisVerticalIcon />
-						</template>
-						<template #copy-id>
-							<ClipboardCopyIcon />
-							<span class="hidden sm:inline">Copy ID</span>
-						</template>
-						<template #copy-link>
-							<LinkIcon />
-							<span class="hidden sm:inline">Copy link</span>
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<div class="flex flex-row items-center gap-2 self-end sm:self-auto">
+					<span class="whitespace-nowrap text-sm text-secondary">{{
+						formatRelativeTime(report.created)
+					}}</span>
+					<ButtonStyled circular>
+						<OverflowMenu :options="quickActions">
+							<template #default>
+								<EllipsisVerticalIcon class="size-4" />
+							</template>
+							<template #copy-id>
+								<ClipboardCopyIcon />
+								<span class="hidden sm:inline">Copy ID</span>
+							</template>
+							<template #copy-link>
+								<LinkIcon />
+								<span class="hidden sm:inline">Copy link</span>
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+				</div>
 			</div>
-		</div>
 
-		<hr class="my-4 rounded-xl border-solid text-divider" />
+			<div class="my-4 h-px bg-surface-5" />
 
-		<div class="flex flex-col gap-4">
-			<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-				<div class="flex min-w-0 flex-1 items-center gap-3">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-4">
 					<Avatar
 						:src="reportItemAvatarUrl"
 						:circle="report.item_type === 'user'"
-						size="3rem"
-						class="flex-shrink-0"
+						size="4rem"
+						:class="[
+							'flex-shrink-0 border border-surface-5 bg-surface-4 !shadow-none',
+							report.item_type !== 'user' && 'rounded-2xl',
+						]"
 					/>
-					<div class="min-w-0 flex-1">
-						<span class="block truncate text-lg font-semibold">{{ reportItemTitle }}</span>
-						<div class="flex flex-col gap-2 text-sm text-secondary sm:flex-row sm:items-center">
-							<nuxt-link
-								v-if="report.target && report.item_type != 'user'"
-								:to="`/${report.target.type}/${report.target.slug}`"
-								class="inline-flex flex-row items-center gap-1 truncate transition-colors duration-100 ease-in-out hover:text-brand"
+
+					<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="formatExactDate(report.user.created)"
+							class="cursor-help text-sm text-secondary"
+						>
+							Joined {{ formatRelativeTime(report.user.created) }}
+						</span>
+					</div>
+
+					<div v-else class="flex flex-col gap-1.5">
+						<div class="flex items-center gap-2">
+							<NuxtLink
+								:to="reportItemUrl"
+								target="_blank"
+								class="text-base font-semibold text-contrast hover:underline"
 							>
-								<Avatar
-									:src="report.target?.avatar_url"
-									:circle="report.target.type === 'user'"
-									size="1rem"
-									class="flex-shrink-0"
-								/>
-								<span class="truncate">
-									<OrganizationIcon
-										v-if="report.target.type === 'organization'"
-										class="align-middle"
-									/>
-									{{ report.target.name || 'Unknown User' }}
-								</span>
-							</nuxt-link>
+								{{ reportItemTitle }}
+							</NuxtLink>
 
-							<div class="flex flex-wrap items-center gap-2">
-								<span
-									class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold text-secondary"
-								>
-									{{ formattedItemType }}
-								</span>
-								<span
-									v-if="report.item_type === 'version' && report.version"
-									class="max-w-[200px] truncate font-mono text-xs sm:max-w-none"
-								>
-									{{
-										report.version.files.find((file) => file.primary)?.filename || 'Unknown Version'
-									}}
+							<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>
 						</div>
-					</div>
-				</div>
 
-				<div class="flex justify-end sm:justify-start">
-					<ButtonStyled circular>
-						<nuxt-link :to="reportItemUrl">
-							<EyeIcon />
-						</nuxt-link>
-					</ButtonStyled>
+						<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>
 				</div>
 			</div>
 		</div>
-
-		<CollapsibleRegion ref="collapsibleRegion" class="my-4">
-			<ReportThread
-				v-if="report.thread"
-				ref="reportThread"
-				class="mb-16 sm:mb-0"
-				:thread="report.thread"
-				:report="report"
-				:reporter="report.reporter_user"
-				@update-thread="updateThread"
-			/>
+		<CollapsibleRegion
+			v-model:collapsed="isThreadCollapsed"
+			:expand-text="expandText"
+			collapse-text="Collapse thread"
+		>
+			<div class="bg-surface-2 p-4 pt-2">
+				<ThreadView
+					v-if="report.thread"
+					ref="reportThread"
+					:thread="report.thread"
+					:quick-replies="reportQuickReplies"
+					:quick-reply-context="report"
+					:closed="reportClosed"
+					@update-thread="updateThread"
+				>
+					<template #closedActions>
+						<ButtonStyled v-if="isStaff(auth.user)" color="green" class="mt-2">
+							<button class="w-full gap-2 sm:w-auto" @click="reopenReport()">
+								<CheckCircleIcon class="size-4" />
+								Reopen Thread
+							</button>
+						</ButtonStyled>
+					</template>
+					<template #additionalActions="{ hasReply }">
+						<template v-if="isStaff(auth.user)">
+							<ButtonStyled v-if="hasReply" color="red">
+								<button class="w-full gap-2 sm:w-auto" @click="closeReport(true)">
+									<CheckCircleIcon class="size-4" />
+									Reply and close
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-else color="red">
+								<button class="w-full gap-2 sm:w-auto" @click="closeReport()">
+									<CheckCircleIcon class="size-4" />
+									Close report
+								</button>
+							</ButtonStyled>
+						</template>
+					</template>
+				</ThreadView>
+			</div>
 		</CollapsibleRegion>
 	</div>
 </template>
 <script setup lang="ts">
 import {
+	CheckCircleIcon,
 	ClipboardCopyIcon,
 	EllipsisVerticalIcon,
-	EyeIcon,
 	LinkIcon,
-	OrganizationIcon,
 } from '@modrinth/assets'
-import {
-	type ExtendedReport,
-	reportQuickReplies,
-	type ReportQuickReply,
-} from '@modrinth/moderation'
+import { type ExtendedReport, reportQuickReplies } from '@modrinth/moderation'
+import type { OverflowMenuOption } from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
 	CollapsibleRegion,
+	getProjectTypeIcon,
 	injectNotificationManager,
 	OverflowMenu,
-	type OverflowMenuOption,
 	useRelativeTime,
 } from '@modrinth/ui'
+import { formatProjectType } from '@modrinth/utils'
+import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import ChevronDownIcon from '../servers/icons/ChevronDownIcon.vue'
-import ReportThread from '../thread/ReportThread.vue'
+import { isStaff } from '~/helpers/users.js'
+
+import ThreadView from '../thread/ThreadView.vue'
 
 const { addNotification } = injectNotificationManager()
+const auth = await useAuth()
 
 const props = defineProps<{
 	report: ExtendedReport
 }>()
 
-const reportThread = ref<InstanceType<typeof ReportThread> | null>(null)
-const collapsibleRegion = ref<InstanceType<typeof CollapsibleRegion> | null>(null)
+const reportThread = ref<{
+	setReplyContent: (content: string) => void
+	sendReply: (privateMessage?: boolean) => Promise<void>
+} | null>(null)
+const isThreadCollapsed = ref(true)
+
+const didCloseReport = ref(false)
+const reportClosed = computed(() => {
+	return didCloseReport.value || props.report.closed
+})
+
+const remainingMessageCount = computed(() => {
+	if (!props.report.thread?.messages) return 0
+	return Math.max(0, props.report.thread.messages.length - 1)
+})
+
+const expandText = computed(() => {
+	if (remainingMessageCount.value === 0) return 'Expand'
+	if (remainingMessageCount.value === 1) return 'Show 1 more message'
+	return `Show ${remainingMessageCount.value} more messages`
+})
+
+async function closeReport(reply = false) {
+	if (reply && reportThread.value) {
+		await reportThread.value.sendReply()
+	}
+
+	try {
+		await useBaseFetch(`report/${props.report.id}`, {
+			method: 'PATCH',
+			body: {
+				closed: true,
+			},
+		})
+		updateThread(props.report.thread)
+		didCloseReport.value = true
+	} catch (err: any) {
+		addNotification({
+			title: 'Error closing report',
+			text: err.data ? err.data.description : err,
+			type: 'error',
+		})
+	}
+}
+
+async function reopenReport() {
+	try {
+		await useBaseFetch(`report/${props.report.id}`, {
+			method: 'PATCH',
+			body: {
+				closed: false,
+			},
+		})
+		updateThread(props.report.thread)
+		didCloseReport.value = false
+	} catch (err: any) {
+		addNotification({
+			title: 'Error reopening report',
+			text: err.data ? err.data.description : err,
+			type: 'error',
+		})
+	}
+}
 
 const formatRelativeTime = useRelativeTime()
 
+function formatExactDate(date: string): string {
+	return dayjs(date).format('MMMM D, YYYY [at] h:mm A')
+}
+
 function updateThread(newThread: any) {
 	if (props.report.thread) {
 		Object.assign(props.report.thread, newThread)
@@ -206,34 +317,6 @@ const quickActions: OverflowMenuOption[] = [
 	},
 ]
 
-const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
-	return reportQuickReplies
-		.filter((reply) => {
-			if (reply.shouldShow === undefined) return true
-			if (typeof reply.shouldShow === 'function') {
-				return reply.shouldShow(props.report)
-			}
-
-			return reply.shouldShow
-		})
-		.map(
-			(reply) =>
-				({
-					id: reply.label,
-					action: () => handleQuickReply(reply),
-				}) as OverflowMenuOption,
-		)
-})
-
-async function handleQuickReply(reply: ReportQuickReply) {
-	const message =
-		typeof reply.message === 'function' ? await reply.message(props.report) : reply.message
-
-	collapsibleRegion.value?.setCollapsed(false)
-	await nextTick()
-	reportThread.value?.setReplyContent(message)
-}
-
 const reportItemAvatarUrl = computed(() => {
 	switch (props.report.item_type) {
 		case 'project':
@@ -265,11 +348,6 @@ const reportItemUrl = computed(() => {
 	}
 })
 
-const formattedItemType = computed(() => {
-	const itemType = props.report.item_type
-	return itemType.charAt(0).toUpperCase() + itemType.slice(1)
-})
-
 const formattedReportType = computed(() => {
 	const reportType = props.report.report_type
 
@@ -278,5 +356,3 @@ const formattedReportType = computed(() => {
 	return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
new file mode 100644
index 0000000000..4d9b12f2d3
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -0,0 +1,1138 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	BugIcon,
+	CheckIcon,
+	ChevronDownIcon,
+	ClipboardCopyIcon,
+	CodeIcon,
+	CopyIcon,
+	DownloadIcon,
+	EllipsisVerticalIcon,
+	LinkIcon,
+	LoaderCircleIcon,
+	ShieldCheckIcon,
+} from '@modrinth/assets'
+import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/moderation'
+import {
+	Avatar,
+	ButtonStyled,
+	Collapsible,
+	CollapsibleRegion,
+	getProjectTypeIcon,
+	injectModrinthClient,
+	injectNotificationManager,
+	OverflowMenu,
+	type OverflowMenuOption,
+} from '@modrinth/ui'
+import {
+	capitalizeString,
+	formatProjectType,
+	highlightCodeLines,
+	type ThreadMessage,
+	type User,
+} from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed, ref, watch } from 'vue'
+
+import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
+import NavTabs from '~/components/ui/NavTabs.vue'
+import ThreadView from '~/components/ui/thread/ThreadView.vue'
+
+const auth = await useAuth()
+const featureFlags = useFeatureFlags()
+
+type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
+	id: string
+	version_id: string
+}
+
+interface FileDecisions {
+	fileName: string
+	fileSize: number
+	decisions: Array<{
+		filePath: string
+		issueType: string
+		severity: string
+		decision: 'safe' | 'malware'
+	}>
+	maxSeverity: string
+}
+
+const props = defineProps<{
+	item: {
+		project: Labrinth.Projects.v3.Project
+		project_owner: Labrinth.TechReview.Internal.Ownership
+		thread: Labrinth.TechReview.Internal.Thread
+		reports: FlattenedFileReport[]
+	}
+	loadingIssues: Set<string>
+	decompiledSources: Map<string, string>
+}>()
+
+const { addNotification } = injectNotificationManager()
+
+const emit = defineEmits<{
+	refetch: []
+	loadFileSources: [reportId: string]
+	markComplete: [projectId: string]
+	showMaliciousSummary: [unsafeFiles: UnsafeFile[]]
+}>()
+
+const quickActions = computed<OverflowMenuOption[]>(() => {
+	const actions: OverflowMenuOption[] = []
+
+	const sourceUrl = props.item.project.link_urls?.['source']?.url
+	if (sourceUrl) {
+		actions.push({
+			id: 'view-source',
+			action: () => {
+				window.open(sourceUrl, '_blank', 'noopener,noreferrer')
+			},
+		})
+	}
+
+	actions.push(
+		{
+			id: 'copy-link',
+			action: () => {
+				const base = window.location.origin
+				const reportUrl = `${base}/moderation/technical-review/${props.item.project.id}`
+				navigator.clipboard.writeText(reportUrl).then(() => {
+					addNotification({
+						type: 'success',
+						title: 'Technical Review link copied',
+						text: 'The link to this review has been copied to your clipboard.',
+					})
+				})
+			},
+		},
+		{
+			id: 'copy-id',
+			action: () => {
+				navigator.clipboard.writeText(props.item.project.id).then(() => {
+					addNotification({
+						type: 'success',
+						title: 'Technical Report ID copied',
+						text: 'The ID of this report has been copied to your clipboard.',
+					})
+				})
+			},
+		},
+	)
+
+	return actions
+})
+
+type Tab = 'Thread' | 'Files' | 'File'
+const tabs: readonly ('Thread' | 'Files')[] = ['Thread', 'Files']
+const currentTab = ref<Tab>('Thread')
+
+const isThreadCollapsed = ref(true)
+
+const remainingMessageCount = computed(() => {
+	if (!props.item.thread?.messages) return 0
+	return Math.max(0, props.item.thread.messages.length - 1)
+})
+
+const threadExpandText = computed(() => {
+	if (remainingMessageCount.value === 0) return 'Expand'
+	if (remainingMessageCount.value === 1) return 'Show 1 more message'
+	return `Show ${remainingMessageCount.value} more messages`
+})
+
+const selectedFileId = ref<string | null>(null)
+
+const selectedFile = computed(() => {
+	if (!selectedFileId.value) return null
+	return props.item.reports.find((r) => r.id === selectedFileId.value) ?? null
+})
+
+watch(selectedFile, (newFile) => {
+	if (selectedFileId.value && (!newFile || newFile.issues.length === 0)) {
+		backToFileList()
+	}
+})
+
+const client = injectModrinthClient()
+
+const severityOrder = { severe: 3, high: 2, medium: 1, low: 0 } as Record<string, number>
+
+function getFileHighestSeverity(
+	file: FlattenedFileReport,
+): Labrinth.TechReview.Internal.DelphiSeverity {
+	const severities = file.issues
+		.flatMap((i) => i.details ?? [])
+		.map((d) => d.severity)
+		.filter((s): s is Labrinth.TechReview.Internal.DelphiSeverity => !!s)
+
+	return severities.sort((a, b) => (severityOrder[b] ?? 0) - (severityOrder[a] ?? 0))[0] || 'low'
+}
+
+const allFiles = ref<FlattenedFileReport[]>([])
+
+watch(
+	() => props.item.reports,
+	(reports) => {
+		allFiles.value = [...reports].sort((a, b) => {
+			const aComplete = getFileMarkedCount(a) === getFileDetailCount(a)
+			const bComplete = getFileMarkedCount(b) === getFileDetailCount(b)
+			if (aComplete !== bComplete) return aComplete ? 1 : -1
+			const aSeverity = getFileHighestSeverity(a)
+			const bSeverity = getFileHighestSeverity(b)
+			return (severityOrder[bSeverity] ?? 0) - (severityOrder[aSeverity] ?? 0)
+		})
+	},
+	{ immediate: true },
+)
+
+const highestSeverity = computed(() => {
+	const severities = props.item.reports
+		.flatMap((r) => r.issues ?? [])
+		.flatMap((i) => i.details ?? [])
+		.map((d) => d.severity)
+		.filter((s): s is Labrinth.TechReview.Internal.DelphiSeverity => !!s)
+
+	return severities.sort((a, b) => (severityOrder[b] ?? 0) - (severityOrder[a] ?? 0))[0] || 'low'
+})
+
+const navTabsLinks = computed(() => {
+	const links = tabs.map((tab) => ({
+		label: tab as string,
+		href: tab.toLowerCase(),
+	}))
+
+	if (selectedFile.value) {
+		links.push({
+			label: selectedFile.value.file_name,
+			href: 'file',
+		})
+	}
+
+	return links
+})
+
+const activeTabIndex = computed(() => {
+	if (currentTab.value === 'File' && selectedFile.value) {
+		return navTabsLinks.value.length - 1
+	}
+	const idx = tabs.indexOf(currentTab.value as 'Thread' | 'Files')
+	return idx >= 0 ? idx : 0
+})
+
+function handleTabClick(index: number) {
+	if (index < tabs.length) {
+		const newTab = tabs[index]
+		currentTab.value = newTab
+
+		if (newTab === 'Thread') {
+			isThreadCollapsed.value = false
+		}
+	} else if (index === tabs.length && selectedFile.value) {
+		// Clicked the file tab
+		currentTab.value = 'File' as Tab
+	}
+}
+
+function getSeverityBadgeColor(severity: Labrinth.TechReview.Internal.DelphiSeverity): string {
+	switch (severity) {
+		case 'severe':
+			return 'border-red/60 border bg-highlight-red text-red'
+		case 'high':
+			return 'border-orange/60 border bg-highlight-orange text-orange'
+		case 'medium':
+			return 'border-green/60 border bg-highlight-green text-green'
+		case 'low':
+		default:
+			return 'border-blue/60 border bg-highlight-blue text-blue'
+	}
+}
+
+const severityColor = computed(() => {
+	switch (highestSeverity.value) {
+		case 'severe':
+			return 'text-red bg-highlight-red border-solid border-[1px] border-red'
+		case 'high':
+			return 'text-orange bg-highlight-orange border-solid border-[1px] border-orange'
+		case 'medium':
+			return 'text-green bg-highlight-green border-solid border-[1px] border-green'
+		case 'low':
+		default:
+			return 'text-blue bg-highlight-blue border-solid border-[1px] border-blue'
+	}
+})
+
+const formattedDate = computed(() => {
+	const dates = props.item.reports.map((r) => new Date(r.created))
+	const earliest = new Date(Math.min(...dates.map((d) => d.getTime())))
+	const now = new Date()
+	const diffDays = Math.floor((now.getTime() - earliest.getTime()) / (1000 * 60 * 60 * 24))
+	if (diffDays === 0) return 'Today'
+	if (diffDays === 1) return '1 day ago'
+	return `${diffDays} days ago`
+})
+
+function formatFileSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KiB`
+	return `${(bytes / (1024 * 1024)).toFixed(2)} MiB`
+}
+
+function viewFileFlags(file: FlattenedFileReport) {
+	selectedFileId.value = file.id
+	currentTab.value = 'File'
+	emit('loadFileSources', file.id)
+}
+
+function backToFileList() {
+	selectedFileId.value = null
+	if (currentTab.value === 'File') {
+		currentTab.value = 'Files'
+	}
+}
+
+async function copyToClipboard(code: string, detailId: string) {
+	try {
+		await navigator.clipboard.writeText(code)
+		showCopyFeedback.value.set(detailId, true)
+		setTimeout(() => {
+			showCopyFeedback.value.delete(detailId)
+		}, 2000)
+	} catch (error) {
+		console.error('Failed to copy code:', error)
+	}
+}
+
+const detailDecisions = ref<Map<string, 'safe' | 'malware'>>(new Map())
+const updatingDetails = ref<Set<string>>(new Set())
+
+function getDetailDecision(
+	detailId: string,
+	backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+): 'safe' | 'malware' | 'pending' {
+	const localDecision = detailDecisions.value.get(detailId)
+	if (localDecision) return localDecision
+	if (backendStatus === 'safe') return 'safe'
+	if (backendStatus === 'unsafe') return 'malware'
+	return 'pending'
+}
+
+function isPreReviewed(
+	detailId: string,
+	backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+): boolean {
+	return (
+		(backendStatus === 'safe' || backendStatus === 'unsafe') && !detailDecisions.value.has(detailId)
+	)
+}
+
+function getMarkedFlagsCount(flags: ClassGroup['flags']): number {
+	return flags.filter((f) => getDetailDecision(f.detail.id, f.detail.status) !== 'pending').length
+}
+
+function getFileDetailCount(file: FlattenedFileReport): number {
+	return file.issues.reduce((sum, issue) => sum + issue.details.length, 0)
+}
+
+function getFileMarkedCount(file: FlattenedFileReport): number {
+	let count = 0
+	for (const issue of file.issues) {
+		for (const detail of issue.details) {
+			const detailWithStatus = detail as typeof detail & {
+				status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+			}
+			if (getDetailDecision(detailWithStatus.id, detailWithStatus.status) !== 'pending') {
+				count++
+			}
+		}
+	}
+	return count
+}
+
+async function updateDetailStatus(detailId: string, verdict: 'safe' | 'unsafe') {
+	updatingDetails.value.add(detailId)
+
+	try {
+		await client.labrinth.tech_review_internal.updateIssueDetail(detailId, { verdict })
+
+		const decision = verdict === 'safe' ? 'safe' : 'malware'
+
+		let detailKey: string | null = null
+		for (const report of props.item.reports) {
+			for (const issue of report.issues) {
+				const detail = issue.details.find((d) => d.id === detailId)
+				if (detail) {
+					detailKey = detail.key
+					break
+				}
+			}
+			if (detailKey) break
+		}
+
+		if (detailKey) {
+			for (const report of props.item.reports) {
+				for (const issue of report.issues) {
+					for (const detail of issue.details) {
+						if (detail.key === detailKey) {
+							detailDecisions.value.set(detail.id, decision)
+						}
+					}
+				}
+			}
+		} else {
+			detailDecisions.value.set(detailId, decision)
+		}
+
+		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.value.delete(classGroup.filePath)
+				break
+			}
+		}
+
+		if (verdict === 'safe') {
+			addNotification({
+				type: 'success',
+				title: 'Issue marked as pass',
+				text: 'This issue has been marked as a false positive.',
+			})
+		} else {
+			addNotification({
+				type: 'success',
+				title: 'Issue marked as fail',
+				text: 'This issue has been flagged as malicious.',
+			})
+		}
+	} 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.',
+		})
+	} finally {
+		updatingDetails.value.delete(detailId)
+	}
+}
+
+const expandedClasses = ref<Set<string>>(new Set())
+const showCopyFeedback = ref<Map<string, boolean>>(new Map())
+
+interface ClassGroup {
+	filePath: string
+	flags: Array<{
+		issueId: string
+		issueType: string
+		detail: Labrinth.TechReview.Internal.ReportIssueDetail & {
+			status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+		}
+	}>
+}
+
+const groupedByClass = computed<ClassGroup[]>(() => {
+	if (!selectedFile.value) return []
+
+	const classMap = new Map<string, ClassGroup>()
+
+	for (const issue of selectedFile.value.issues) {
+		for (const detail of issue.details) {
+			if (!classMap.has(detail.file_path)) {
+				classMap.set(detail.file_path, { filePath: detail.file_path, flags: [] })
+			}
+			// Cast detail to include status (backend will provide this field)
+			const detailWithStatus = detail as Labrinth.TechReview.Internal.ReportIssueDetail & {
+				status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+			}
+			classMap.get(detail.file_path)!.flags.push({
+				issueId: issue.id,
+				issueType: issue.issue_type,
+				detail: detailWithStatus,
+			})
+		}
+	}
+
+	for (const classGroup of classMap.values()) {
+		classGroup.flags.sort((a, b) => {
+			const aPreReviewed = isPreReviewed(a.detail.id, a.detail.status)
+			const bPreReviewed = isPreReviewed(b.detail.id, b.detail.status)
+
+			if (aPreReviewed !== bPreReviewed) {
+				return aPreReviewed ? 1 : -1
+			}
+
+			return (severityOrder[b.detail.severity] ?? 0) - (severityOrder[a.detail.severity] ?? 0)
+		})
+	}
+
+	return Array.from(classMap.values()).sort((a, b) => {
+		const aSeverity = getHighestSeverityInClass(a.flags)
+		const bSeverity = getHighestSeverityInClass(b.flags)
+		return (severityOrder[bSeverity] ?? 0) - (severityOrder[aSeverity] ?? 0)
+	})
+})
+
+function getHighestSeverityInClass(
+	flags: ClassGroup['flags'],
+): Labrinth.TechReview.Internal.DelphiSeverity {
+	return flags.reduce(
+		(highest, flag) =>
+			(severityOrder[flag.detail.severity] ?? 0) > (severityOrder[highest] ?? 0)
+				? flag.detail.severity
+				: highest,
+		'low' as Labrinth.TechReview.Internal.DelphiSeverity,
+	)
+}
+
+function toggleClass(filePath: string) {
+	if (expandedClasses.value.has(filePath)) {
+		expandedClasses.value.delete(filePath)
+	} else {
+		expandedClasses.value.add(filePath)
+	}
+}
+
+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 handleThreadUpdate() {
+	emit('refetch')
+}
+
+const techReviewContext = computed<TechReviewContext>(() => ({
+	project: props.item.project,
+	project_owner: props.item.project_owner,
+	reports: props.item.reports,
+}))
+
+const threadViewRef = ref<{
+	setReplyContent: (content: string) => void
+	getReplyContent: () => string
+} | null>(null)
+
+const unsafeFiles = computed<UnsafeFile[]>(() => {
+	return props.item.reports
+		.filter((report) =>
+			report.issues.some((issue) =>
+				issue.details.some((detail) => {
+					const detailWithStatus = detail as typeof detail & {
+						status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+					}
+					const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
+					return decision === 'malware'
+				}),
+			),
+		)
+		.map((report) => ({
+			file: report,
+			projectName: props.item.project.name,
+			projectId: props.item.project.id,
+			userId: props.item.project_owner.id,
+			username: props.item.project_owner.name,
+		}))
+})
+
+const reviewSummaryPreview = computed(() => {
+	const fileDecisions = new Map<string, FileDecisions>()
+	let totalSafe = 0
+	let totalUnsafe = 0
+
+	for (const report of props.item.reports) {
+		if (!fileDecisions.has(report.id)) {
+			fileDecisions.set(report.id, {
+				fileName: report.file_name,
+				fileSize: report.file_size,
+				decisions: [],
+				maxSeverity: 'low',
+			})
+		}
+		const fileData = fileDecisions.get(report.id)!
+
+		for (const issue of report.issues) {
+			for (const detail of issue.details) {
+				// TODO: proper types when backend pushes
+				const detailWithStatus = detail as typeof detail & {
+					status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+				}
+				const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
+				if (decision === 'pending') continue
+
+				fileData.decisions.push({
+					filePath: detail.file_path,
+					issueType: issue.issue_type.replace(/_/g, ' '),
+					severity: detail.severity,
+					decision,
+				})
+
+				if ((severityOrder[detail.severity] ?? 0) > (severityOrder[fileData.maxSeverity] ?? 0)) {
+					fileData.maxSeverity = detail.severity
+				}
+
+				if (decision === 'safe') totalSafe++
+				else totalUnsafe++
+			}
+		}
+	}
+
+	const totalDecisions = totalSafe + totalUnsafe
+	if (totalDecisions === 0) return ''
+
+	const timestamp = dayjs().utc().format('MMMM D, YYYY [at] h:mm A [UTC]')
+	let markdown = `## Tech Review Summary\n*${timestamp}*\n\n`
+
+	for (const [, fileData] of fileDecisions) {
+		if (fileData.decisions.length === 0) continue
+
+		const fileSafe = fileData.decisions.filter((d) => d.decision === 'safe').length
+		const fileUnsafe = fileData.decisions.filter((d) => d.decision === 'malware').length
+		const fileVerdict = fileUnsafe > 0 ? 'Unsafe' : 'Safe'
+
+		markdown += `### ${fileData.fileName}\n`
+		markdown += `> ${formatFileSize(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
+		markdown += `<details>\n<summary>Issues (${fileSafe} safe, ${fileUnsafe} unsafe)</summary>\n\n`
+		markdown += `| Class | Issue Type | Severity | Decision |\n`
+		markdown += `|-------|------------|----------|----------|\n`
+
+		for (const d of fileData.decisions) {
+			const decisionText = d.decision === 'safe' ? '✅ Safe' : '❌ Unsafe'
+			markdown += `| \`${d.filePath}\` | ${d.issueType} | ${capitalizeString(d.severity)} | ${decisionText} |\n`
+		}
+
+		markdown += `\n</details>\n\n`
+	}
+
+	markdown += `---\n\n**Total:** ${totalDecisions} issues reviewed (${totalSafe} safe, ${totalUnsafe} unsafe)\n\n`
+
+	return markdown
+})
+
+const threadWithPreview = computed(() => {
+	if (!reviewSummaryPreview.value) return props.item.thread
+
+	const user = auth.value?.user as User | null
+	if (!user) return props.item.thread
+
+	const previewMessage: ThreadMessage & { preview: true } = {
+		id: 'preview-message',
+		author_id: user.id,
+		body: {
+			type: 'text',
+			body: reviewSummaryPreview.value,
+			private: false,
+			replying_to: null,
+			associated_images: [],
+		},
+		created: new Date().toISOString(),
+		hide_identity: false,
+		preview: true,
+	}
+
+	return {
+		...props.item.thread,
+		messages: [...props.item.thread.messages, previewMessage],
+		members: props.item.thread.members.some((m) => m.id === user.id)
+			? props.item.thread.members
+			: [...props.item.thread.members, user],
+	}
+})
+
+const allIssuesResolved = computed(() => {
+	for (const report of props.item.reports) {
+		for (const issue of report.issues) {
+			for (const detail of issue.details) {
+				const detailWithStatus = detail as typeof detail & {
+					status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+				}
+				const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
+				if (decision === 'pending') return false
+			}
+		}
+	}
+	return true
+})
+
+const canSubmitReview = computed(() => {
+	const totalIssues = props.item.reports.reduce((sum, r) => sum + r.issues.length, 0)
+	if (totalIssues === 0) return true
+	return allIssuesResolved.value
+})
+
+async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
+	const editorContent = threadViewRef.value?.getReplyContent() || ''
+
+	let message: string | undefined
+	if (reviewSummaryPreview.value && editorContent) {
+		message = `${reviewSummaryPreview.value}${editorContent}`
+	} else if (reviewSummaryPreview.value) {
+		message = reviewSummaryPreview.value
+	} else if (editorContent) {
+		message = editorContent
+	}
+
+	try {
+		await client.labrinth.tech_review_internal.submitProject(props.item.project.id, {
+			verdict,
+			message,
+		})
+		emit('markComplete', props.item.project.id)
+		addNotification({
+			type: 'success',
+			title: 'Review submitted',
+			text: 'Technical review completed successfully.',
+		})
+
+		if (verdict === 'unsafe') {
+			emit('showMaliciousSummary', unsafeFiles.value)
+		}
+	} catch (error: unknown) {
+		const err = error as { response?: { data?: { issues?: string[] } } }
+		if (err.response?.data?.issues) {
+			const missedCount = err.response.data.issues.length
+			addNotification({
+				type: 'error',
+				title: 'Pending issues remain',
+				text: `${missedCount} issue(s) still need a verdict before submitting.`,
+			})
+		} else {
+			addNotification({
+				type: 'error',
+				title: 'Submit failed',
+				text: 'Failed to submit review. Please try again.',
+			})
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="shadow-card overflow-hidden rounded-2xl border border-surface-5 bg-surface-3">
+		<div class="flex flex-col gap-4 bg-surface-3 p-4">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-4">
+					<Avatar
+						:src="item.project.icon_url"
+						class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
+						size="4rem"
+					/>
+
+					<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"
+							>
+								{{ 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"
+							>
+								<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
+								class="rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+							>
+								<span class="text-sm font-medium text-secondary">Auto-Flagged</span>
+							</div>
+
+							<div class="rounded-full px-2.5 py-1" :class="severityColor">
+								<span class="text-sm font-medium">{{
+									capitalizeString(highestSeverity.toLowerCase())
+								}}</span>
+							</div>
+						</div>
+
+						<div class="flex items-center gap-1">
+							<Avatar
+								:src="item.project_owner.icon_url"
+								class="rounded-full border border-surface-5 bg-surface-4 !shadow-none"
+								size="1.5rem"
+								circle
+							/>
+							<NuxtLink
+								:to="`/${item.project_owner.kind}/${item.project_owner.id}`"
+								target="_blank"
+								class="text-sm font-medium text-secondary hover:underline"
+							>
+								{{ item.project_owner.name }}
+							</NuxtLink>
+							<span class="text-tertiary text-sm">({{ item.project_owner.id }})</span>
+						</div>
+					</div>
+				</div>
+
+				<div class="flex items-center gap-3">
+					<span class="text-base text-secondary">{{ formattedDate }}</span>
+					<ButtonStyled circular>
+						<OverflowMenu :options="quickActions" class="!shadow-none">
+							<template #default>
+								<EllipsisVerticalIcon class="size-4" />
+							</template>
+							<template #copy-id>
+								<ClipboardCopyIcon />
+								<span class="hidden sm:inline">Copy ID</span>
+							</template>
+							<template #copy-link>
+								<LinkIcon />
+								<span class="hidden sm:inline">Copy link</span>
+							</template>
+							<template #view-source>
+								<CodeIcon />
+								<span class="hidden sm:inline">View source</span>
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+				</div>
+			</div>
+
+			<div class="h-px w-full bg-surface-5"></div>
+
+			<NavTabs
+				mode="local"
+				:links="navTabsLinks"
+				:active-index="activeTabIndex"
+				@tab-click="handleTabClick"
+			/>
+		</div>
+
+		<div class="border-t border-surface-3 bg-surface-2">
+			<template v-if="currentTab === 'Thread'">
+				<CollapsibleRegion
+					v-model:collapsed="isThreadCollapsed"
+					:expand-text="threadExpandText"
+					collapse-text="Collapse thread"
+					class="border-x border-b border-solid border-surface-3"
+				>
+					<div class="bg-surface-2 p-4 pt-0">
+						<!-- DEV-531 -->
+						<!-- @vue-expect-error TODO: will convert ThreadView to use api-client types at a later date -->
+						<ThreadView
+							ref="threadViewRef"
+							:thread="threadWithPreview"
+							:quick-replies="techReviewQuickReplies"
+							:quick-reply-context="techReviewContext"
+							@update-thread="handleThreadUpdate"
+						>
+							<template #additionalActions>
+								<ButtonStyled color="brand">
+									<button
+										v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
+										:disabled="!canSubmitReview"
+										@click="handleSubmitReview('safe')"
+									>
+										<ShieldCheckIcon /> Pass
+									</button>
+								</ButtonStyled>
+								<ButtonStyled color="red">
+									<button
+										v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
+										:disabled="!canSubmitReview"
+										@click="handleSubmitReview('unsafe')"
+									>
+										<BugIcon /> Fail
+									</button>
+								</ButtonStyled>
+								<ButtonStyled v-if="featureFlags.developerMode" type="outlined">
+									<button @click="emit('showMaliciousSummary', unsafeFiles)">Debug Summary</button>
+								</ButtonStyled>
+							</template>
+						</ThreadView>
+					</div>
+				</CollapsibleRegion>
+			</template>
+
+			<template v-else-if="currentTab === 'Files'">
+				<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
+							class="font-medium text-contrast"
+							:class="{ 'cursor-pointer hover:underline': getFileDetailCount(file) > 0 }"
+							@click="getFileDetailCount(file) > 0 && viewFileFlags(file)"
+						>
+							{{ file.file_name }}
+						</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">{{
+								formatFileSize(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">
+						<ButtonStyled v-if="getFileDetailCount(file) > 0">
+							<button @click="viewFileFlags(file)">Flags</button>
+						</ButtonStyled>
+						<ButtonStyled type="outlined">
+							<a
+								:href="file.download_url"
+								:title="`Download ${file.file_name}`"
+								:download="file.file_name"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="!border-px !border-surface-4"
+								tabindex="0"
+							>
+								<DownloadIcon /> Download
+							</a>
+						</ButtonStyled>
+					</div>
+				</div>
+			</template>
+
+			<template v-else-if="currentTab === 'File' && selectedFile">
+				<div
+					v-for="(classItem, idx) in groupedByClass"
+					:key="classItem.filePath"
+					class="border-x border-b border-t-0 border-solid border-surface-3 bg-surface-2"
+					:class="{ 'rounded-bl-2xl rounded-br-2xl': idx === groupedByClass.length - 1 }"
+				>
+					<div
+						class="flex cursor-pointer items-center justify-between p-4 transition-colors duration-200 hover:bg-surface-4"
+						@click="toggleClass(classItem.filePath)"
+					>
+						<div class="my-auto flex items-center gap-2">
+							<ButtonStyled type="transparent" circular>
+								<button
+									class="transition-transform"
+									:class="{ 'rotate-180': expandedClasses.has(classItem.filePath) }"
+								>
+									<ChevronDownIcon class="h-5 w-5 text-contrast" />
+								</button>
+							</ButtonStyled>
+
+							<span class="font-mono font-semibold">{{ 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="classItem.flags.some((f) => loadingIssues.has(f.issueId))"
+									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>
+					</div>
+
+					<Collapsible :collapsed="!expandedClasses.has(classItem.filePath)">
+						<div class="mt-2 flex flex-col gap-2 px-4 pb-4">
+							<div
+								v-for="flag in classItem.flags"
+								:key="`${flag.issueId}-${flag.detail.id}`"
+								class="grid grid-cols-[1fr_auto_auto] items-center rounded-lg border-[1px] border-b border-solid border-surface-5 bg-surface-3 py-2 pl-4 last:border-b-0"
+								: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="flex w-20 justify-center">
+									<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="flex w-40 items-center justify-center gap-2">
+									<ButtonStyled
+										color="brand"
+										:type="
+											getDetailDecision(flag.detail.id, flag.detail.status) === 'safe'
+												? undefined
+												: 'outlined'
+										"
+									>
+										<button
+											class="!border-[1px]"
+											:disabled="updatingDetails.has(flag.detail.id)"
+											@click="updateDetailStatus(flag.detail.id, 'safe')"
+										>
+											Pass
+										</button>
+									</ButtonStyled>
+
+									<ButtonStyled
+										color="red"
+										:type="
+											getDetailDecision(flag.detail.id, flag.detail.status) === 'malware'
+												? undefined
+												: 'outlined'
+										"
+									>
+										<button
+											class="!border-[1px]"
+											:disabled="updatingDetails.has(flag.detail.id)"
+											@click="updateDetailStatus(flag.detail.id, 'unsafe')"
+										>
+											Fail
+										</button>
+									</ButtonStyled>
+								</div>
+							</div>
+
+							<div
+								v-if="getClassDecompiledSource(classItem)"
+								class="relative inset-0 overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
+							>
+								<ButtonStyled circular type="transparent">
+									<button
+										v-tooltip="`Copy code`"
+										class="absolute right-2 top-2 border-[1px]"
+										@click="
+											copyToClipboard(getClassDecompiledSource(classItem)!, classItem.filePath)
+										"
+									>
+										<CopyIcon v-if="!showCopyFeedback.get(classItem.filePath)" />
+										<CheckIcon v-else />
+									</button>
+								</ButtonStyled>
+
+								<div class="overflow-x-auto bg-surface-3 py-3">
+									<div
+										v-for="(line, n) in highlightCodeLines(
+											getClassDecompiledSource(classItem)!,
+											'java',
+										)"
+										: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 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>
+			</template>
+		</div>
+	</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/servers/FileItem.vue b/apps/frontend/src/components/ui/servers/FileItem.vue
index ac4c426591..ae4b2cea9d 100644
--- a/apps/frontend/src/components/ui/servers/FileItem.vue
+++ b/apps/frontend/src/components/ui/servers/FileItem.vue
@@ -68,26 +68,18 @@
 import {
 	DownloadIcon,
 	EditIcon,
-	FileArchiveIcon,
-	FileIcon,
 	FolderOpenIcon,
 	MoreHorizontalIcon,
 	PackageOpenIcon,
 	RightArrowIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { ButtonStyled, getFileExtensionIcon } from '@modrinth/ui'
 import { computed, ref, shallowRef } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { useRoute, useRouter } from 'vue-router'
 
-import {
-	UiServersIconsCodeFileIcon,
-	UiServersIconsCogFolderIcon,
-	UiServersIconsEarthIcon,
-	UiServersIconsImageFileIcon,
-	UiServersIconsTextFileIcon,
-} from '#components'
+import { UiServersIconsCogFolderIcon, UiServersIconsEarthIcon } from '#components'
 import PaletteIcon from '~/assets/icons/palette.svg?component'
 
 import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
@@ -116,36 +108,7 @@ const emit = defineEmits<{
 const isDragOver = ref(false)
 const isDragging = ref(false)
 
-const codeExtensions = Object.freeze([
-	'json',
-	'json5',
-	'jsonc',
-	'java',
-	'kt',
-	'kts',
-	'sh',
-	'bat',
-	'ps1',
-	'yml',
-	'yaml',
-	'toml',
-	'js',
-	'ts',
-	'py',
-	'rb',
-	'php',
-	'html',
-	'css',
-	'cpp',
-	'c',
-	'h',
-	'rs',
-	'go',
-])
-
 const textExtensions = Object.freeze(['txt', 'md', 'log', 'cfg', 'conf', 'properties', 'ini', 'sk'])
-const imageExtensions = Object.freeze(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'])
-const supportedArchiveExtensions = Object.freeze(['zip'])
 const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
 
 const route = shallowRef(useRoute())
@@ -199,12 +162,7 @@ const iconComponent = computed(() => {
 		return FolderOpenIcon
 	}
 
-	const ext = fileExtension.value
-	if (codeExtensions.includes(ext)) return UiServersIconsCodeFileIcon
-	if (textExtensions.includes(ext)) return UiServersIconsTextFileIcon
-	if (imageExtensions.includes(ext)) return UiServersIconsImageFileIcon
-	if (supportedArchiveExtensions.includes(ext)) return FileArchiveIcon
-	return FileIcon
+	return getFileExtensionIcon(fileExtension.value)
 })
 
 const subText = computed(() => {
diff --git a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
index 02d0ae05d2..4bd494e49f 100644
--- a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
+++ b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
@@ -1,232 +1,22 @@
 <template>
-	<svg
-		v-if="loader === 'Fabric'"
-		xmlns="http://www.w3.org/2000/svg"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<path fill="none" d="M0 0h24v24H0z" />
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="23"
-			d="m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8"
-			transform="matrix(.08671 0 0 .0867 -49.8 -56)"
-		/>
-	</svg>
-	<svg
-		v-else-if="loader === 'Quilt'"
-		xmlns:xlink="http://www.w3.org/1999/xlink"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="2"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<defs>
-			<path
-				id="quilt"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="65.6"
-				d="M442.5 233.9c0-6.4-5.2-11.6-11.6-11.6h-197c-6.4 0-11.6 5.2-11.6 11.6v197c0 6.4 5.2 11.6 11.6 11.6h197c6.4 0 11.6-5.2 11.6-11.7v-197Z"
-			></path>
-		</defs>
-		<path fill="none" d="M0 0h24v24H0z"></path>
-		<use
-			xlink:href="#quilt"
-			stroke-width="65.6"
-			transform="matrix(.03053 0 0 .03046 -3.2 -3.2)"
-		></use>
-		<use xlink:href="#quilt" stroke-width="65.6" transform="matrix(.03053 0 0 .03046 -3.2 7)"></use>
-		<use
-			xlink:href="#quilt"
-			stroke-width="65.6"
-			transform="matrix(.03053 0 0 .03046 6.9 -3.2)"
-		></use>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="70.4"
-			d="M442.5 234.8c0-7-5.6-12.5-12.5-12.5H234.7c-6.8 0-12.4 5.6-12.4 12.5V430c0 6.9 5.6 12.5 12.4 12.5H430c6.9 0 12.5-5.6 12.5-12.5V234.8Z"
-			transform="rotate(45 3.5 24) scale(.02843 .02835)"
-		></path>
-	</svg>
-	<svg
-		v-else-if="loader === 'Forge'"
-		ml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="1.5"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<path fill="none" d="M0 0h24v24H0z"></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			d="M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z"
-		></path>
-	</svg>
-	<svg
-		v-else-if="loader === 'NeoForge'"
-		enable-background="new 0 0 24 24"
-		version="1.1"
-		viewBox="0 0 24 24"
-		xml:space="preserve"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<g
-			fill="none"
-			stroke="currentColor"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			stroke-width="2"
-		>
-			<path d="m12 19.2v2m0-2v2" />
-			<path
-				d="m8.4 1.3c0.5 1.5 0.7 3 0.1 4.6-0.2 0.5-0.9 1.5-1.6 1.5m8.7-6.1c-0.5 1.5-0.7 3-0.1 4.6 0.2 0.6 0.9 1.5 1.6 1.5"
-			/>
-			<path d="m3.6 15.8h-1.7m18.5 0h1.7" />
-			<path d="m3.2 12.1h-1.7m19.3 0h1.8" />
-			<path d="m8.1 12.7v1.6m7.8-1.6v1.6" />
-			<path d="m10.8 18h1.2m0 1.2-1.2-1.2m2.4 0h-1.2m0 1.2 1.2-1.2" />
-			<path
-				d="m4 9.7c-0.5 1.2-0.8 2.4-0.8 3.7 0 3.1 2.9 6.3 5.3 8.2 0.9 0.7 2.2 1.1 3.4 1.1m0.1-17.8c-1.1 0-2.1 0.2-3.2 0.7m11.2 4.1c0.5 1.2 0.8 2.4 0.8 3.7 0 3.1-2.9 6.3-5.3 8.2-0.9 0.7-2.2 1.1-3.4 1.1m-0.1-17.8c1.1 0 2.1 0.2 3.2 0.7"
-			/>
-			<path
-				d="m4 9.7c-0.2-1.8-0.3-3.7 0.5-5.5s2.2-2.6 3.9-3m11.6 8.5c0.2-1.9 0.3-3.7-0.5-5.5s-2.2-2.6-3.9-3"
-			/>
-			<path d="m12 21.2-2.4 0.4m2.4-0.4 2.4 0.4" />
-		</g>
-	</svg>
-	<svg
-		v-else-if="loader === 'Paper'"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="1.5"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<path fill="none" d="M0 0h24v24H0z" />
-		<path fill="none" stroke="currentColor" stroke-width="2" d="m12 18 6 2 3-17L2 14l6 2" />
-		<path stroke="currentColor" stroke-width="2" d="m9 21-1-5 4 2-3 3Z" />
-		<path fill="currentColor" d="m12 18-4-2 10-9-6 11Z" />
-	</svg>
-	<svg
-		v-else-if="loader === 'Spigot'"
-		viewBox="0 0 332 284"
-		style="
-			fill-rule: evenodd;
-			clip-rule: evenodd;
-			stroke-linejoin: round;
-			fill: none;
-			fill-rule: nonzero;
-			stroke-width: 24px;
-		"
-		stroke="currentColor"
-	>
-		<path
-			d="M147.5,27l27,-15l27.5,15l66.5,0l0,33.5l-73,-0.912l0,45.5l26,-0.088l0,31.5l-12.5,0l0,15.5l16,21.5l35,0l0,-21.5l35.5,0l0,21.5l24.5,0l0,55.5l-24.5,0l0,17l-35.5,0l0,-27l-35,0l-55.5,14.5l-67.5,-14.5l-15,14.5l18,12.5l-3,24.5l-41.5,1.5l-48.5,-19.5l6,-19l24.5,-4.5l16,-41l79,-36l-7,-15.5l0,-31.5l23.5,0l0,-45.5l-73.5,0l0,-32.5l67,0Z"
-		/>
-	</svg>
-	<svg
-		v-else-if="loader === 'Bukkit'"
-		viewBox="0 0 292 319"
-		style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round"
-		stroke="currentColor"
-	>
-		<g transform="matrix(1,0,0,1,0,-5)">
-			<path
-				d="M12,109.5L12,155L34.5,224L57.5,224L57.5,271L81,294L160,294L160,172L259.087,172L265,155L265,109.5M12,109.5L12,64L34.5,64L34.5,41L81,17L195.5,17L241,41L241,64L265,64L265,109.5M12,109.5L81,109.5L81,132L195.5,132L195.5,109.5L265,109.5M264.087,204L264.087,244M207.5,272L207.5,312M250,272L250,312L280,312L280,272L250,272ZM192.5,204L192.5,244L222.5,244L222.5,204L192.5,204Z"
-				style="fill: none; fill-rule: nonzero; stroke-width: 24px"
-			/>
-		</g>
-	</svg>
-	<svg
-		v-else-if="loader === 'Purpur'"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="1.5"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<defs>
-			<path
-				id="purpur"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.68"
-				d="m264 41.95 8-4v8l-8 4v-8Z"
-			></path>
-		</defs>
-		<path fill="none" d="M0 0h24v24H0z"></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="m264 29.95-8 4 8 4.42 8-4.42-8-4Z"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="m272 38.37-8 4.42-8-4.42"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="m260 31.95 8 4.21V45"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="M260 45v-8.84l8-4.21"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<use
-			xlink:href="#purpur"
-			stroke-width="1.68"
-			transform="matrix(1.125 0 0 1.2569 -285 -40.78)"
-		></use>
-		<use
-			xlink:href="#purpur"
-			stroke-width="1.68"
-			transform="matrix(-1.125 0 0 1.2569 309 -40.78)"
-		></use>
-	</svg>
-	<svg v-else-if="loader === 'Vanilla'" viewBox="0 0 20 20" fill="currentColor">
-		<path
-			fill-rule="evenodd"
-			d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z"
-			clip-rule="evenodd"
-		></path>
-	</svg>
+	<div v-if="loaderData?.icon" v-html="loaderData.icon" />
 	<LoaderIcon v-else />
 </template>
 
 <script setup lang="ts">
 import { LoaderIcon } from '@modrinth/assets'
-import type { Loaders } from '@modrinth/utils'
+import { computed } from 'vue'
 
-defineProps<{
-	loader: Loaders
+import { useGeneratedState } from '~/composables/generated'
+
+const props = defineProps<{
+	loader: string
 }>()
+
+const tags = useGeneratedState()
+
+// Find the loader by name (case-insensitive comparison)
+const loaderData = computed(() =>
+	tags.value.loaders.find((l) => l.name.toLowerCase() === props.loader.toLowerCase()),
+)
 </script>
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index 8fb3904538..b288daf781 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -217,6 +217,14 @@
 														hoverFilled: true,
 														disabled: project.status === 'withheld',
 													},
+													{
+														id: 'send-to-review-reply',
+														action: () => {
+															sendReply('processing', true)
+														},
+														hoverFilled: true,
+														disabled: project.status === 'processing',
+													},
 												]
 											: [
 													{
@@ -228,6 +236,14 @@
 														hoverFilled: true,
 														disabled: project.status === 'withheld',
 													},
+													{
+														id: 'send-to-review',
+														action: () => {
+															setStatus('processing')
+														},
+														hoverFilled: true,
+														disabled: project.status === 'processing',
+													},
 												]
 									"
 								>
@@ -240,6 +256,14 @@
 										<EyeOffIcon aria-hidden="true" />
 										Withhold
 									</template>
+									<template #send-to-review-reply>
+										<ScaleIcon aria-hidden="true" />
+										Send to review with reply
+									</template>
+									<template #send-to-review>
+										<ScaleIcon aria-hidden="true" />
+										Send to review
+									</template>
 								</OverflowMenu>
 							</div>
 						</template>
diff --git a/apps/frontend/src/components/ui/thread/ReportThread.vue b/apps/frontend/src/components/ui/thread/ReportThread.vue
deleted file mode 100644
index 7053f8e9e9..0000000000
--- a/apps/frontend/src/components/ui/thread/ReportThread.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<template>
-	<div>
-		<div v-if="flags.developerMode" class="mb-4 font-bold text-heading">
-			Thread ID:
-			<CopyCode :text="thread.id" />
-		</div>
-
-		<div
-			v-if="sortedMessages.length > 0"
-			class="bg-raised flex flex-col space-y-4 rounded-xl p-3 sm:p-4"
-		>
-			<ThreadMessage
-				v-for="message in sortedMessages"
-				:key="'message-' + message.id"
-				:thread="thread"
-				:message="message"
-				:members="members"
-				:report="report"
-				:auth="auth"
-				raised
-				@update-thread="() => updateThreadLocal()"
-			/>
-		</div>
-
-		<template v-if="reportClosed">
-			<p class="text-secondary">This thread is closed and new messages cannot be sent to it.</p>
-			<ButtonStyled v-if="isStaff(auth.user)" color="green" class="mt-2 w-full sm:w-auto">
-				<button
-					class="flex w-full items-center justify-center gap-2 sm:w-auto"
-					@click="reopenReport()"
-				>
-					<CheckCircleIcon class="size-4" />
-					Reopen Thread
-				</button>
-			</ButtonStyled>
-		</template>
-
-		<template v-else>
-			<div class="mt-4">
-				<MarkdownEditor
-					v-model="replyBody"
-					:placeholder="sortedMessages.length > 0 ? 'Reply to thread...' : 'Send a message...'"
-					:on-image-upload="onUploadImage"
-				/>
-			</div>
-
-			<div
-				class="mt-4 flex flex-col items-stretch justify-between gap-3 sm:flex-row sm:items-center sm:gap-2"
-			>
-				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
-					<ButtonStyled v-if="sortedMessages.length > 0" color="brand" class="w-full sm:w-auto">
-						<button
-							:disabled="!replyBody"
-							class="flex w-full items-center justify-center gap-2 sm:w-auto"
-							@click="sendReply()"
-						>
-							<ReplyIcon class="size-4" />
-							Reply
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="brand" class="w-full sm:w-auto">
-						<button
-							:disabled="!replyBody"
-							class="flex w-full items-center justify-center gap-2 sm:w-auto"
-							@click="sendReply()"
-						>
-							<SendIcon class="size-4" />
-							Send
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="isStaff(auth.user)" class="w-full sm:w-auto">
-						<button
-							:disabled="!replyBody"
-							class="flex w-full items-center justify-center gap-2 sm:w-auto"
-							@click="sendReply(true)"
-						>
-							<ScaleIcon class="size-4" />
-							<span class="hidden sm:inline">Add private note</span>
-							<span class="sm:hidden">Private note</span>
-						</button>
-					</ButtonStyled>
-				</div>
-
-				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
-					<template v-if="isStaff(auth.user)">
-						<ButtonStyled v-if="replyBody" color="red" class="w-full sm:w-auto">
-							<button
-								class="flex w-full items-center justify-center gap-2 sm:w-auto"
-								@click="closeReport(true)"
-							>
-								<CheckCircleIcon class="size-4" />
-								<span class="hidden sm:inline">Close with reply</span>
-								<span class="sm:hidden">Close & reply</span>
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-else color="red" class="w-full sm:w-auto">
-							<button
-								class="flex w-full items-center justify-center gap-2 sm:w-auto"
-								@click="closeReport()"
-							>
-								<CheckCircleIcon class="size-4" />
-								Close report
-							</button>
-						</ButtonStyled>
-					</template>
-				</div>
-			</div>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CheckCircleIcon, ReplyIcon, ScaleIcon, SendIcon } from '@modrinth/assets'
-import { ButtonStyled, CopyCode, injectNotificationManager, MarkdownEditor } from '@modrinth/ui'
-import type { Report, Thread, ThreadMessage as TypeThreadMessage, User } from '@modrinth/utils'
-import dayjs from 'dayjs'
-
-import { useImageUpload } from '~/composables/image-upload.ts'
-import { isStaff } from '~/helpers/users.js'
-
-import ThreadMessage from './ThreadMessage.vue'
-
-const { addNotification } = injectNotificationManager()
-
-const props = defineProps<{
-	thread: Thread
-	reporter: User
-	report: Report
-}>()
-
-defineExpose({
-	setReplyContent,
-})
-
-const auth = await useAuth()
-
-const emit = defineEmits<{
-	updateThread: [thread: Thread]
-}>()
-
-const flags = useFeatureFlags()
-
-const members = computed(() => {
-	const membersMap: Record<string, User> = {
-		[props.reporter.id]: props.reporter,
-	}
-	for (const member of props.thread.members) {
-		membersMap[member.id] = member
-	}
-	return membersMap
-})
-
-const replyBody = ref('')
-function setReplyContent(content: string) {
-	replyBody.value = content
-}
-
-const sortedMessages = computed(() => {
-	const messages: TypeThreadMessage[] = [
-		{
-			id: null,
-			author_id: props.reporter.id,
-			body: {
-				type: 'text',
-				body: props.report.body || 'Report opened.',
-				private: false,
-				replying_to: null,
-				associated_images: [],
-			},
-			created: props.report.created,
-			hide_identity: false,
-		},
-	]
-	if (props.thread) {
-		messages.push(
-			...[...props.thread.messages].sort(
-				(a, b) => dayjs(a.created).toDate().getTime() - dayjs(b.created).toDate().getTime(),
-			),
-		)
-	}
-
-	return messages
-})
-
-async function updateThreadLocal() {
-	const threadId = props.report.thread_id
-	if (threadId) {
-		try {
-			const thread = (await useBaseFetch(`thread/${threadId}`)) as Thread
-			emit('updateThread', thread)
-		} catch (error) {
-			console.error('Failed to update thread:', error)
-		}
-	}
-}
-
-const imageIDs = ref<string[]>([])
-
-async function onUploadImage(file: File) {
-	const response = await useImageUpload(file, { context: 'thread_message' })
-
-	imageIDs.value.push(response.id)
-	imageIDs.value = imageIDs.value.slice(-10)
-
-	return response.url
-}
-
-async function sendReply(privateMessage = false) {
-	try {
-		const body: any = {
-			body: {
-				type: 'text',
-				body: replyBody.value,
-				private: privateMessage,
-			},
-		}
-
-		if (imageIDs.value.length > 0) {
-			body.body = {
-				...body.body,
-				uploaded_images: imageIDs.value,
-			}
-		}
-
-		await useBaseFetch(`thread/${props.thread.id}`, {
-			method: 'POST',
-			body,
-		})
-
-		replyBody.value = ''
-		await updateThreadLocal()
-	} catch (err: any) {
-		addNotification({
-			title: 'Error sending message',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-}
-
-const didCloseReport = ref(false)
-const reportClosed = computed(() => {
-	return didCloseReport.value || (props.report && props.report.closed)
-})
-
-async function closeReport(reply = false) {
-	if (reply) {
-		await sendReply()
-	}
-
-	try {
-		await useBaseFetch(`report/${props.report.id}`, {
-			method: 'PATCH',
-			body: {
-				closed: true,
-			},
-		})
-		await updateThreadLocal()
-		didCloseReport.value = true
-	} catch (err: any) {
-		addNotification({
-			title: 'Error closing report',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-}
-
-async function reopenReport() {
-	try {
-		await useBaseFetch(`report/${props.report.id}`, {
-			method: 'PATCH',
-			body: {
-				closed: false,
-			},
-		})
-		await updateThreadLocal()
-	} catch (err: any) {
-		addNotification({
-			title: 'Error reopening report',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-}
-</script>
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index a599329d79..fb5148e287 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -4,7 +4,7 @@
 		:class="{
 			'has-body': message.body.type === 'text' && !forceCompact,
 			'no-actions': noLinks,
-			private: message.body.private,
+			private: isPrivateMessage,
 		}"
 	>
 		<template v-if="members[message.author_id]">
@@ -23,7 +23,7 @@
 			</AutoLink>
 			<span :class="`message__author role-${members[message.author_id].role}`">
 				<LockIcon
-					v-if="message.body.private"
+					v-if="isPrivateMessage"
 					v-tooltip="'Only visible to moderators'"
 					class="private-icon"
 				/>
@@ -40,13 +40,30 @@
 					v-tooltip="'Reporter'"
 					class="reporter-icon"
 				/>
+				<span
+					v-if="message.preview"
+					class="border-blue/60 rounded-full border border-solid bg-highlight-blue px-2 py-0.5 text-xs font-semibold text-blue"
+				>
+					Preview
+				</span>
 			</span>
 		</template>
 		<template v-else>
-			<div class="message__icon backed-svg circle moderation-color" :class="{ raised: raised }">
+			<div
+				class="message__icon backed-svg circle moderation-color"
+				:class="{
+					raised: raised,
+					'system-message-icon': ['tech_review_entered', 'tech_review_exit_file_deleted'].includes(
+						message.body.type,
+					),
+				}"
+			>
 				<ScaleIcon />
 			</div>
-			<span class="message__author moderation-color">
+			<span
+				v-if="!['tech_review_entered', 'tech_review_exit_file_deleted'].includes(message.body.type)"
+				class="message__author moderation-color"
+			>
 				Moderator
 				<ScaleIcon v-tooltip="'Moderator'" />
 			</span>
@@ -69,6 +86,17 @@
 			</template>
 			<span v-else-if="message.body.type === 'thread_closure'">closed the thread.</span>
 			<span v-else-if="message.body.type === 'thread_reopen'">reopened the thread.</span>
+			<span v-else-if="message.body.type === 'tech_review'">
+				completed technical review and marked project as
+				<Badge :type="message.body.verdict" />.
+			</span>
+			<span v-else-if="message.body.type === 'tech_review_entered'">
+				The project has entered the technical review queue.
+			</span>
+			<span v-else-if="message.body.type === 'tech_review_exit_file_deleted'">
+				The project has left the technical review queue as all files pending review were deleted by
+				the user.
+			</span>
 		</div>
 		<span class="message__date">
 			<span v-tooltip="$dayjs(message.created).format('MMMM D, YYYY [at] h:mm A')">
@@ -160,6 +188,15 @@ const formattedMessage = computed(() => {
 const formatRelativeTime = useRelativeTime()
 const timeSincePosted = ref(formatRelativeTime(props.message.created))
 
+const isPrivateMessage = computed(() => {
+	return (
+		props.message.body.private ||
+		['tech_review', 'tech_review_entered', 'tech_review_exit_file_deleted'].includes(
+			props.message.body.type,
+		)
+	)
+})
+
 async function deleteMessage() {
 	await useBaseFetch(`message/${props.message.id}`, {
 		method: 'DELETE',
@@ -333,4 +370,8 @@ a:active + .message__author a,
 .private {
 	color: var(--color-icon);
 }
+
+.system-message-icon {
+	--size: 2rem !important;
+}
 </style>
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
new file mode 100644
index 0000000000..608f0f1f10
--- /dev/null
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -0,0 +1,227 @@
+<template>
+	<div>
+		<div v-if="flags.developerMode" class="mt-4 font-bold text-heading">
+			Thread ID:
+			<CopyCode :text="thread.id" />
+		</div>
+
+		<div v-if="sortedMessages.length > 0" class="flex flex-col space-y-4 rounded-xl p-3 sm:p-4">
+			<ThreadMessage
+				v-for="message in sortedMessages"
+				:key="'message-' + message.id"
+				:thread="thread"
+				:message="message"
+				:members="members"
+				:auth="auth"
+				raised
+				@update-thread="() => updateThreadLocal()"
+			/>
+		</div>
+		<div v-else class="flex flex-col items-center justify-center space-y-3 py-12">
+			<MessageIcon class="size-12 text-secondary" />
+			<p class="text-lg text-secondary">No messages yet</p>
+		</div>
+
+		<template v-if="closed">
+			<p class="text-secondary">This thread is closed and new messages cannot be sent to it.</p>
+			<slot name="closedActions" />
+		</template>
+
+		<template v-else>
+			<div>
+				<MarkdownEditor
+					v-model="replyBody"
+					:placeholder="sortedMessages.length > 0 ? 'Reply to thread...' : 'Send a message...'"
+					:on-image-upload="onUploadImage"
+				/>
+			</div>
+
+			<div
+				class="mt-4 flex flex-col items-stretch justify-between gap-3 sm:flex-row sm:items-center sm:gap-2"
+			>
+				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
+					<ButtonStyled v-if="sortedMessages.length > 0" color="brand">
+						<button :disabled="!replyBody" class="w-full gap-2 sm:w-auto" @click="sendReply()">
+							<ReplyIcon class="size-4" />
+							Reply
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-else color="brand">
+						<button :disabled="!replyBody" class="w-full gap-2 sm:w-auto" @click="sendReply()">
+							<SendIcon class="size-4" />
+							Send
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="isStaff(auth.user)">
+						<button :disabled="!replyBody" class="w-full sm:w-auto" @click="sendReply(true)">
+							Add note
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="visibleQuickReplies.length > 0">
+						<OverflowMenu :options="visibleQuickReplies">
+							Quick Reply
+							<ChevronDownIcon />
+						</OverflowMenu>
+					</ButtonStyled>
+				</div>
+
+				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
+					<slot name="additionalActions" :has-reply="!!replyBody" />
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
+import type { QuickReply } from '@modrinth/moderation'
+import {
+	ButtonStyled,
+	CopyCode,
+	injectNotificationManager,
+	MarkdownEditor,
+	OverflowMenu,
+	type OverflowMenuOption,
+} from '@modrinth/ui'
+import type { Thread, User } from '@modrinth/utils'
+import dayjs from 'dayjs'
+
+import { useImageUpload } from '~/composables/image-upload.ts'
+import { isStaff } from '~/helpers/users.js'
+
+import ChevronDownIcon from '../servers/icons/ChevronDownIcon.vue'
+import ThreadMessage from './ThreadMessage.vue'
+
+const { addNotification } = injectNotificationManager()
+
+const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
+	const replies = props.quickReplies
+	const context = props.quickReplyContext
+
+	if (!replies || !context) return []
+
+	return replies
+		.filter((reply) => {
+			if (reply.shouldShow === undefined) return true
+			return reply.shouldShow(context)
+		})
+		.map(
+			(reply) =>
+				({
+					id: reply.label,
+					action: () => handleQuickReply(reply, context),
+				}) as OverflowMenuOption,
+		)
+})
+
+const props = defineProps<{
+	thread: Thread
+	quickReplies?: ReadonlyArray<QuickReply<T>>
+	quickReplyContext?: T
+	closed?: boolean
+}>()
+
+async function handleQuickReply(reply: QuickReply<T>, context: T) {
+	const message = typeof reply.message === 'function' ? await reply.message(context) : reply.message
+
+	await nextTick()
+	setReplyContent(message)
+}
+
+defineExpose({
+	setReplyContent,
+	getReplyContent,
+	sendReply,
+})
+
+const auth = await useAuth()
+
+const emit = defineEmits<{
+	updateThread: [thread: Thread]
+}>()
+
+const flags = useFeatureFlags()
+
+const members = computed(() => {
+	const membersMap: Record<string, User> = {}
+	for (const member of props.thread.members) {
+		membersMap[member.id] = member
+	}
+	return membersMap
+})
+
+const replyBody = ref('')
+
+function setReplyContent(content: string) {
+	replyBody.value = content
+}
+
+function getReplyContent(): string {
+	return replyBody.value
+}
+
+const sortedMessages = computed(() => {
+	if (!props.thread) return []
+
+	return [...props.thread.messages].sort(
+		(a, b) => dayjs(a.created).toDate().getTime() - dayjs(b.created).toDate().getTime(),
+	)
+})
+
+async function updateThreadLocal() {
+	const threadId = props.thread.id
+	if (threadId) {
+		try {
+			const thread = (await useBaseFetch(`thread/${threadId}`)) as Thread
+			emit('updateThread', thread)
+		} catch (error) {
+			console.error('Failed to update thread:', error)
+		}
+	}
+}
+
+const imageIDs = ref<string[]>([])
+
+async function onUploadImage(file: File) {
+	const response = await useImageUpload(file, { context: 'thread_message' })
+
+	imageIDs.value.push(response.id)
+	imageIDs.value = imageIDs.value.slice(-10)
+
+	return response.url
+}
+
+async function sendReply(privateMessage = false) {
+	try {
+		const body: any = {
+			body: {
+				type: 'text',
+				body: replyBody.value,
+				private: privateMessage,
+			},
+		}
+
+		if (imageIDs.value.length > 0) {
+			body.body = {
+				...body.body,
+				uploaded_images: imageIDs.value,
+			}
+		}
+
+		await useBaseFetch(`thread/${props.thread.id}`, {
+			method: 'POST',
+			body,
+		})
+
+		replyBody.value = ''
+		await updateThreadLocal()
+	} catch (err: any) {
+		addNotification({
+			title: 'Error sending message',
+			text: err.data ? err.data.description : err,
+			type: 'error',
+		})
+	}
+}
+</script>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 30a2203484..e5d1fe387a 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -464,6 +464,11 @@
 								color: 'orange',
 								link: '/moderation/',
 							},
+							{
+								id: 'tech-review',
+								color: 'orange',
+								link: '/moderation/technical-review',
+							},
 							{
 								id: 'review-reports',
 								color: 'orange',
@@ -511,6 +516,9 @@
 						<template #review-projects>
 							<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.reviewProjects) }}
 						</template>
+						<template #tech-review>
+							<ShieldAlertIcon aria-hidden="true" /> {{ formatMessage(messages.techReview) }}
+						</template>
 						<template #review-reports>
 							<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.reports) }}
 						</template>
@@ -942,6 +950,7 @@ import {
 	SearchIcon,
 	ServerIcon,
 	SettingsIcon,
+	ShieldAlertIcon,
 	SunIcon,
 	TwitterIcon,
 	UserIcon,
@@ -1197,11 +1206,15 @@ const messages = defineMessages({
 	},
 	reviewProjects: {
 		id: 'layout.action.review-projects',
-		defaultMessage: 'Review projects',
+		defaultMessage: 'Project review',
+	},
+	techReview: {
+		id: 'layout.action.tech-review',
+		defaultMessage: 'Tech review',
 	},
 	reports: {
 		id: 'layout.action.reports',
-		defaultMessage: 'Reports',
+		defaultMessage: 'Review reports',
 	},
 	lookupByEmail: {
 		id: 'layout.action.lookup-by-email',
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index ea60bf3a66..04e03a5099 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1281,10 +1281,13 @@
     "message": "New project"
   },
   "layout.action.reports": {
-    "message": "Reports"
+    "message": "Review reports"
   },
   "layout.action.review-projects": {
-    "message": "Review projects"
+    "message": "Project review"
+  },
+  "layout.action.tech-review": {
+    "message": "Tech review"
   },
   "layout.avatar.alt": {
     "message": "Your avatar"
@@ -1523,9 +1526,6 @@
   "moderation.sort.by": {
     "message": "Sort by"
   },
-  "moderation.technical.search.placeholder": {
-    "message": "Search tech reviews..."
-  },
   "muralpay.account-type.checking": {
     "message": "Checking"
   },
diff --git a/apps/frontend/src/pages/moderation.vue b/apps/frontend/src/pages/moderation.vue
index fffb638736..f0bccdfe2a 100644
--- a/apps/frontend/src/pages/moderation.vue
+++ b/apps/frontend/src/pages/moderation.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+import { FolderIcon, ReportIcon, ShieldCheckIcon } from '@modrinth/assets'
 import { Chips } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 
@@ -46,9 +47,13 @@ const messages = defineMessages({
 })
 
 const moderationLinks = [
-	{ label: formatMessage(messages.projectsTitle), href: '/moderation' },
-	{ label: formatMessage(messages.technicalReviewTitle), href: '/moderation/technical-review' },
-	{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports' },
+	{ label: formatMessage(messages.projectsTitle), href: '/moderation', icon: FolderIcon },
+	{
+		label: formatMessage(messages.technicalReviewTitle),
+		href: '/moderation/technical-review',
+		icon: ShieldCheckIcon,
+	},
+	{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports', icon: ReportIcon },
 ]
 
 const mobileNavOptions = [
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index 5be97ba649..b64f9a0709 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-3">
+	<div class="flex flex-col gap-4">
 		<div class="flex flex-col justify-between gap-3 lg:flex-row">
 			<div class="iconified-input flex-1 lg:max-w-md">
 				<SearchIcon aria-hidden="true" class="text-lg" />
@@ -24,34 +24,41 @@
 
 			<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
 				<div class="flex flex-col gap-2 sm:flex-row">
-					<DropdownSelect
-						v-slot="{ selected }"
+					<Combobox
 						v-model="currentFilterType"
 						class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
-						:name="formatMessage(messages.filterBy)"
-						:options="filterTypes as unknown[]"
-						@change="goToPage(1)"
+						:options="filterTypes"
+						:placeholder="formatMessage(messages.filterBy)"
+						@select="goToPage(1)"
 					>
-						<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
-							<FilterIcon class="size-4 flex-shrink-0" />
-							<span class="truncate">{{ selected }} ({{ filteredProjects.length }})</span>
-						</span>
-					</DropdownSelect>
-
-					<DropdownSelect
-						v-slot="{ selected }"
+						<template #selected>
+							<span class="flex flex-row gap-2 align-middle font-semibold">
+								<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
+								<span class="truncate text-contrast"
+									>{{ currentFilterType }} ({{ filteredProjects.length }})</span
+								>
+							</span>
+						</template>
+					</Combobox>
+
+					<Combobox
 						v-model="currentSortType"
 						class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
-						:name="formatMessage(messages.sortBy)"
-						:options="sortTypes as unknown[]"
-						@change="goToPage(1)"
+						:options="sortTypes"
+						:placeholder="formatMessage(messages.sortBy)"
+						@select="goToPage(1)"
 					>
-						<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
-							<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
-							<SortDescIcon v-else class="size-4 flex-shrink-0" />
-							<span class="truncate">{{ selected }}</span>
-						</span>
-					</DropdownSelect>
+						<template #selected>
+							<span class="flex flex-row gap-2 align-middle font-semibold">
+								<SortAscIcon
+									v-if="currentSortType === 'Oldest'"
+									class="size-5 flex-shrink-0 text-secondary"
+								/>
+								<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
+								<span class="truncate text-contrast">{{ currentSortType }}</span>
+							</span>
+						</template>
+					</Combobox>
 				</div>
 
 				<ButtonStyled color="orange" class="w-full sm:w-auto">
@@ -59,7 +66,7 @@
 						class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
 						@click="moderateAllInFilter()"
 					>
-						<ScaleIcon class="size-4 flex-shrink-0" />
+						<ScaleIcon class="flex-shrink-0" />
 						<span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
 						<span class="sm:hidden">Moderate</span>
 					</button>
@@ -72,7 +79,7 @@
 			<ConfettiExplosion v-if="visible" />
 		</div>
 
-		<div class="mt-4 flex flex-col gap-2">
+		<div class="flex flex-col gap-4">
 			<div v-if="paginatedProjects.length === 0" class="universal-card h-24 animate-pulse"></div>
 			<ModerationQueueCard
 				v-for="item in paginatedProjects"
@@ -91,14 +98,14 @@
 </template>
 <script setup lang="ts">
 import {
-	FilterIcon,
+	ListFilterIcon,
 	ScaleIcon,
 	SearchIcon,
 	SortAscIcon,
 	SortDescIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, DropdownSelect, Pagination } from '@modrinth/ui'
+import { Button, ButtonStyled, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import Fuse from 'fuse.js'
 import ConfettiExplosion from 'vue-confetti-explosion'
@@ -215,18 +222,21 @@ watch(
 )
 
 const currentFilterType = ref('All projects')
-const filterTypes: readonly string[] = readonly([
-	'All projects',
-	'Modpacks',
-	'Mods',
-	'Resource Packs',
-	'Data Packs',
-	'Plugins',
-	'Shaders',
-])
+const filterTypes: ComboboxOption<string>[] = [
+	{ value: 'All projects', label: 'All projects' },
+	{ value: 'Modpacks', label: 'Modpacks' },
+	{ value: 'Mods', label: 'Mods' },
+	{ value: 'Resource Packs', label: 'Resource Packs' },
+	{ value: 'Data Packs', label: 'Data Packs' },
+	{ value: 'Plugins', label: 'Plugins' },
+	{ value: 'Shaders', label: 'Shaders' },
+]
 
 const currentSortType = ref('Oldest')
-const sortTypes: readonly string[] = readonly(['Oldest', 'Newest'])
+const sortTypes: ComboboxOption<string>[] = [
+	{ value: 'Oldest', label: 'Oldest' },
+	{ value: 'Newest', label: 'Newest' },
+]
 
 const currentPage = ref(1)
 const itemsPerPage = 15
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index 62fab3a181..d7a848330e 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-3">
+	<div class="flex flex-col gap-4">
 		<div class="flex flex-col justify-between gap-3 lg:flex-row">
 			<div class="iconified-input flex-1 lg:max-w-md">
 				<SearchIcon aria-hidden="true" class="text-lg" />
@@ -22,34 +22,41 @@
 			</div>
 
 			<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
-				<DropdownSelect
-					v-slot="{ selected }"
+				<Combobox
 					v-model="currentFilterType"
 					class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
-					:name="formatMessage(messages.filterBy)"
-					:options="filterTypes as unknown[]"
-					@change="goToPage(1)"
+					:options="filterTypes"
+					:placeholder="formatMessage(messages.filterBy)"
+					@select="goToPage(1)"
 				>
-					<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
-						<FilterIcon class="size-4 flex-shrink-0" />
-						<span class="truncate">{{ selected }} ({{ filteredReports.length }})</span>
-					</span>
-				</DropdownSelect>
-
-				<DropdownSelect
-					v-slot="{ selected }"
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
+							<span class="truncate text-contrast"
+								>{{ currentFilterType }} ({{ filteredReports.length }})</span
+							>
+						</span>
+					</template>
+				</Combobox>
+
+				<Combobox
 					v-model="currentSortType"
 					class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
-					:name="formatMessage(messages.sortBy)"
-					:options="sortTypes as unknown[]"
-					@change="goToPage(1)"
+					:options="sortTypes"
+					:placeholder="formatMessage(messages.sortBy)"
+					@select="goToPage(1)"
 				>
-					<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
-						<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
-						<SortDescIcon v-else class="size-4 flex-shrink-0" />
-						<span class="truncate">{{ selected }}</span>
-					</span>
-				</DropdownSelect>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<SortAscIcon
+								v-if="currentSortType === 'Oldest'"
+								class="size-5 flex-shrink-0 text-secondary"
+							/>
+							<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
+							<span class="truncate text-contrast">{{ currentSortType }}</span>
+						</span>
+					</template>
+				</Combobox>
 			</div>
 		</div>
 
@@ -57,7 +64,7 @@
 			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
 		</div>
 
-		<div class="mt-4 flex flex-col gap-2">
+		<div class="flex flex-col gap-4">
 			<div v-if="paginatedReports.length === 0" class="universal-card h-24 animate-pulse"></div>
 			<ReportCard v-for="report in paginatedReports" v-else :key="report.id" :report="report" />
 		</div>
@@ -69,9 +76,9 @@
 </template>
 
 <script setup lang="ts">
-import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
+import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
 import type { ExtendedReport } from '@modrinth/moderation'
-import { Button, DropdownSelect, Pagination } from '@modrinth/ui'
+import { Button, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
 import type { Report } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import Fuse from 'fuse.js'
@@ -169,10 +176,17 @@ watch(
 )
 
 const currentFilterType = ref('All')
-const filterTypes: readonly string[] = readonly(['All', 'Unread', 'Read'])
+const filterTypes: ComboboxOption<string>[] = [
+	{ value: 'All', label: 'All' },
+	{ value: 'Unread', label: 'Unread' },
+	{ value: 'Read', label: 'Read' },
+]
 
 const currentSortType = ref('Oldest')
-const sortTypes: readonly string[] = readonly(['Oldest', 'Newest'])
+const sortTypes: ComboboxOption<string>[] = [
+	{ value: 'Oldest', label: 'Oldest' },
+	{ value: 'Newest', label: 'Newest' },
+]
 
 const currentPage = ref(1)
 const itemsPerPage = 15
diff --git a/apps/frontend/src/pages/moderation/technical-review-mockup.vue b/apps/frontend/src/pages/moderation/technical-review-mockup.vue
deleted file mode 100644
index 95e4c1fbb3..0000000000
--- a/apps/frontend/src/pages/moderation/technical-review-mockup.vue
+++ /dev/null
@@ -1,387 +0,0 @@
-<template>
-	<div class="flex flex-col gap-3">
-		<div class="flex flex-col justify-between gap-3 lg:flex-row">
-			<div class="iconified-input flex-1 lg:max-w-md">
-				<SearchIcon aria-hidden="true" class="text-lg" />
-				<input
-					v-model="query"
-					class="h-[40px]"
-					autocomplete="off"
-					spellcheck="false"
-					type="text"
-					:placeholder="formatMessage(messages.searchPlaceholder)"
-					@input="updateSearchResults()"
-				/>
-				<Button v-if="query" class="r-btn" @click="() => (query = '')">
-					<XIcon />
-				</Button>
-			</div>
-
-			<div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
-				<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-			</div>
-
-			<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
-				<DropdownSelect
-					v-slot="{ selected }"
-					v-model="currentFilterType"
-					class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
-					:name="formatMessage(messages.filterBy)"
-					:options="filterTypes as unknown[]"
-					@change="updateSearchResults()"
-				>
-					<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
-						<FilterIcon class="size-4 flex-shrink-0" />
-						<span class="truncate">{{ selected }} ({{ filteredReports.length }})</span>
-					</span>
-				</DropdownSelect>
-
-				<DropdownSelect
-					v-slot="{ selected }"
-					v-model="currentSortType"
-					class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
-					:name="formatMessage(messages.sortBy)"
-					:options="sortTypes as unknown[]"
-					@change="updateSearchResults()"
-				>
-					<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
-						<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
-						<SortDescIcon v-else class="size-4 flex-shrink-0" />
-						<span class="truncate">{{ selected }}</span>
-					</span>
-				</DropdownSelect>
-			</div>
-		</div>
-
-		<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
-			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-		</div>
-
-		<div class="mt-4 flex flex-col gap-2">
-			<DelphiReportCard
-				v-for="report in paginatedReports"
-				:key="report.version.id"
-				:report="report"
-			/>
-			<div
-				v-if="!paginatedReports || paginatedReports.length === 0"
-				class="universal-card h-24 animate-pulse"
-			></div>
-		</div>
-
-		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
-			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
-import type { ExtendedDelphiReport, OwnershipTarget } from '@modrinth/moderation'
-import { Button, DropdownSelect, Pagination } from '@modrinth/ui'
-import type { DelphiReport, Organization, Project, TeamMember, Version } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { useLocalStorage } from '@vueuse/core'
-import Fuse from 'fuse.js'
-
-import DelphiReportCard from '~/components/ui/moderation/ModerationDelphiReportCard.vue'
-import { asEncodedJsonArray, fetchSegmented } from '~/utils/fetch-helpers.ts'
-
-const { formatMessage } = useVIntl()
-const route = useRoute()
-const router = useRouter()
-
-const messages = defineMessages({
-	searchPlaceholder: {
-		id: 'moderation.technical.search.placeholder',
-		defaultMessage: 'Search tech reviews...',
-	},
-	filterBy: {
-		id: 'moderation.filter.by',
-		defaultMessage: 'Filter by',
-	},
-	sortBy: {
-		id: 'moderation.sort.by',
-		defaultMessage: 'Sort by',
-	},
-})
-
-async function getProjectQuicklyForMock(projectId: string): Promise<Project> {
-	return (await useBaseFetch(`project/${projectId}`)) as Project
-}
-
-async function getVersionQuicklyForMock(versionId: string): Promise<Version> {
-	return (await useBaseFetch(`version/${versionId}`)) as Version
-}
-
-const mockDelphiReports: DelphiReport[] = [
-	{
-		project: await getProjectQuicklyForMock('7MoE34WK'),
-		version: await getVersionQuicklyForMock('cTkKLWgA'),
-		trace_type: 'url_usage',
-		file_path: 'me/decce/gnetum/ASMEventHandlerHelper.java',
-		priority_score: 29,
-		status: 'pending',
-		detected_at: '2025-04-01T12:00:00Z',
-	} as DelphiReport,
-	{
-		project: await getProjectQuicklyForMock('7MoE34WK'),
-		version: await getVersionQuicklyForMock('cTkKLWgA'),
-		trace_type: 'url_usage',
-		file_path: 'me/decce/gnetum/SomeOtherFile.java',
-		priority_score: 48,
-		status: 'rejected',
-		detected_at: '2025-03-02T12:00:00Z',
-	} as DelphiReport,
-	{
-		project: await getProjectQuicklyForMock('7MoE34WK'),
-		version: await getVersionQuicklyForMock('cTkKLWgA'),
-		trace_type: 'url_usage',
-		file_path: 'me/decce/gnetum/YetAnotherFile.java',
-		priority_score: 15,
-		status: 'approved',
-		detected_at: '2025-02-03T12:00:00Z',
-	} as DelphiReport,
-]
-
-const { data: allReports } = await useAsyncData('moderation-tech-reviews', async () => {
-	// TODO: replace with actual API call
-	const delphiReports = mockDelphiReports
-
-	if (delphiReports.length === 0) {
-		return []
-	}
-
-	const teamIds = [...new Set(delphiReports.map((report) => report.project.team).filter(Boolean))]
-	const orgIds = [
-		...new Set(delphiReports.map((report) => report.project.organization).filter(Boolean)),
-	]
-
-	const [teamsData, orgsData]: [TeamMember[][], Organization[]] = await Promise.all([
-		teamIds.length > 0
-			? fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
-			: Promise.resolve([]),
-		orgIds.length > 0
-			? fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
-					apiVersion: 3,
-				})
-			: Promise.resolve([]),
-	])
-
-	const orgTeamIds = orgsData.map((org) => org.team_id).filter(Boolean)
-	const orgTeamsData: TeamMember[][] =
-		orgTeamIds.length > 0
-			? await fetchSegmented(orgTeamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
-			: []
-
-	const teamMap = new Map<string, TeamMember[]>()
-	const orgMap = new Map<string, Organization>()
-
-	teamsData.forEach((team) => {
-		let teamId = null
-		for (const member of team) {
-			teamId = member.team_id
-			if (!teamMap.has(teamId)) {
-				teamMap.set(teamId, team)
-				break
-			}
-		}
-	})
-
-	orgTeamsData.forEach((team) => {
-		let teamId = null
-		for (const member of team) {
-			teamId = member.team_id
-			if (!teamMap.has(teamId)) {
-				teamMap.set(teamId, team)
-				break
-			}
-		}
-	})
-
-	orgsData.forEach((org: Organization) => {
-		orgMap.set(org.id, org)
-	})
-
-	const extendedReports: ExtendedDelphiReport[] = delphiReports.map((report) => {
-		let target: OwnershipTarget | undefined
-		const project = report.project
-
-		if (project) {
-			let owner: TeamMember | null = null
-			let org: Organization | null = null
-
-			if (project.team) {
-				const teamMembers = teamMap.get(project.team)
-				if (teamMembers) {
-					owner = teamMembers.find((member) => member.role === 'Owner') || null
-				}
-			}
-
-			if (project.organization) {
-				org = orgMap.get(project.organization) || null
-			}
-
-			if (org) {
-				target = {
-					name: org.name,
-					avatar_url: org.icon_url,
-					type: 'organization',
-					slug: org.slug,
-				}
-			} else if (owner) {
-				target = {
-					name: owner.user.username,
-					avatar_url: owner.user.avatar_url,
-					type: 'user',
-					slug: owner.user.username,
-				}
-			}
-		}
-
-		return {
-			...report,
-			target,
-		}
-	})
-
-	extendedReports.sort((a, b) => b.priority_score - a.priority_score)
-
-	return extendedReports
-})
-
-const query = ref(route.query.q?.toString() || '')
-watch(
-	query,
-	(newQuery) => {
-		const currentQuery = { ...route.query }
-		if (newQuery) {
-			currentQuery.q = newQuery
-		} else {
-			delete currentQuery.q
-		}
-
-		router.replace({
-			path: route.path,
-			query: currentQuery,
-		})
-	},
-	{ immediate: false },
-)
-
-watch(
-	() => route.query.q,
-	(newQueryParam) => {
-		const newValue = newQueryParam?.toString() || ''
-		if (query.value !== newValue) {
-			query.value = newValue
-		}
-	},
-)
-
-const currentFilterType = useLocalStorage('moderation-tech-reviews-filter-type', () => 'Pending')
-const filterTypes: readonly string[] = readonly(['All', 'Pending', 'Approved', 'Rejected'])
-
-const currentSortType = useLocalStorage('moderation-tech-reviews-sort-type', () => 'Priority')
-const sortTypes: readonly string[] = readonly(['Priority', 'Oldest', 'Newest'])
-
-const currentPage = ref(1)
-const itemsPerPage = 15
-const totalPages = computed(() => Math.ceil((filteredReports.value?.length || 0) / itemsPerPage))
-
-const fuse = computed(() => {
-	if (!allReports.value || allReports.value.length === 0) return null
-	return new Fuse(allReports.value, {
-		keys: [
-			{
-				name: 'version.id',
-				weight: 3,
-			},
-			{
-				name: 'version.version_number',
-				weight: 3,
-			},
-			{
-				name: 'project.title',
-				weight: 3,
-			},
-			{
-				name: 'project.slug',
-				weight: 3,
-			},
-			{
-				name: 'version.files.filename',
-				weight: 2,
-			},
-			{
-				name: 'trace_type',
-				weight: 2,
-			},
-			{
-				name: 'content',
-				weight: 0.5,
-			},
-			'file_path',
-			'project.id',
-			'target.name',
-			'target.slug',
-		],
-		includeScore: true,
-		threshold: 0.4,
-	})
-})
-
-const filteredReports = computed(() => {
-	if (!allReports.value) return []
-
-	let filtered
-
-	if (query.value && fuse.value) {
-		const results = fuse.value.search(query.value)
-		filtered = results.map((result) => result.item)
-	} else {
-		filtered = [...allReports.value]
-	}
-
-	if (currentFilterType.value === 'Pending') {
-		filtered = filtered.filter((report) => report.status === 'pending')
-	} else if (currentFilterType.value === 'Approved') {
-		filtered = filtered.filter((report) => report.status === 'approved')
-	} else if (currentFilterType.value === 'Rejected') {
-		filtered = filtered.filter((report) => report.status === 'rejected')
-	}
-
-	if (currentSortType.value === 'Priority') {
-		filtered.sort((a, b) => b.priority_score - a.priority_score)
-	} else if (currentSortType.value === 'Oldest') {
-		filtered.sort((a, b) => {
-			const dateA = new Date(a.detected_at).getTime()
-			const dateB = new Date(b.detected_at).getTime()
-			return dateA - dateB
-		})
-	} else {
-		filtered.sort((a, b) => {
-			const dateA = new Date(a.detected_at).getTime()
-			const dateB = new Date(b.detected_at).getTime()
-			return dateB - dateA
-		})
-	}
-
-	return filtered
-})
-
-const paginatedReports = computed(() => {
-	if (!filteredReports.value) return []
-	const start = (currentPage.value - 1) * itemsPerPage
-	const end = start + itemsPerPage
-	return filteredReports.value.slice(start, end)
-})
-
-function updateSearchResults() {
-	currentPage.value = 1
-}
-
-function goToPage(page: number) {
-	currentPage.value = page
-}
-</script>
diff --git a/apps/frontend/src/pages/moderation/technical-review.vue b/apps/frontend/src/pages/moderation/technical-review.vue
index 3a5ae57552..b1ff7150b2 100644
--- a/apps/frontend/src/pages/moderation/technical-review.vue
+++ b/apps/frontend/src/pages/moderation/technical-review.vue
@@ -1,3 +1,572 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
+import {
+	Button,
+	Combobox,
+	type ComboboxOption,
+	injectModrinthClient,
+	Pagination,
+} from '@modrinth/ui'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import Fuse from 'fuse.js'
+
+import MaliciousSummaryModal, {
+	type UnsafeFile,
+} from '~/components/ui/moderation/MaliciousSummaryModal.vue'
+import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
+
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+const currentPage = ref(1)
+const API_PAGE_SIZE = 50
+const UI_PAGE_SIZE = 4
+const { formatMessage } = useVIntl()
+const route = useRoute()
+const router = useRouter()
+
+const CACHE_TTL = 24 * 60 * 60 * 1000
+const CACHE_KEY_PREFIX = 'tech_review_source_'
+
+type CachedSource = {
+	source: string
+	timestamp: number
+}
+
+function getCachedSource(detailId: string): string | null {
+	try {
+		const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
+		if (!cached) return null
+
+		const data: CachedSource = JSON.parse(cached)
+		const now = Date.now()
+
+		if (now - data.timestamp > CACHE_TTL) {
+			localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
+			return null
+		}
+
+		return data.source
+	} catch {
+		return null
+	}
+}
+
+function setCachedSource(detailId: string, source: string): void {
+	try {
+		const data: CachedSource = {
+			source,
+			timestamp: Date.now(),
+		}
+		localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
+	} catch (error) {
+		console.error('Failed to cache source:', error)
+	}
+}
+
+function clearExpiredCache(): void {
+	try {
+		const now = Date.now()
+		const keys = Object.keys(localStorage)
+
+		for (const key of keys) {
+			if (key.startsWith(CACHE_KEY_PREFIX)) {
+				const cached = localStorage.getItem(key)
+				if (cached) {
+					const data: CachedSource = JSON.parse(cached)
+					if (now - data.timestamp > CACHE_TTL) {
+						localStorage.removeItem(key)
+					}
+				}
+			}
+		}
+	} catch (error) {
+		console.error('Failed to clear expired cache:', error)
+	}
+}
+
+clearExpiredCache()
+
+const loadingIssues = ref<Set<string>>(new Set())
+const decompiledSources = ref<Map<string, string>>(new Map())
+
+async function loadIssueSource(issueId: string): Promise<void> {
+	if (loadingIssues.value.has(issueId)) return
+
+	loadingIssues.value.add(issueId)
+
+	try {
+		const issueData = await client.labrinth.tech_review_internal.getIssue(issueId)
+
+		for (const detail of issueData.details) {
+			if (detail.decompiled_source) {
+				decompiledSources.value.set(detail.id, detail.decompiled_source)
+				setCachedSource(detail.id, detail.decompiled_source)
+			}
+		}
+	} catch (error) {
+		console.error('Failed to load issue source:', error)
+	} finally {
+		loadingIssues.value.delete(issueId)
+	}
+}
+
+function tryLoadCachedSourcesForFile(reportId: string): void {
+	for (const review of reviewItems.value) {
+		const report = review.reports.find((r) => r.id === reportId)
+		if (report) {
+			for (const issue of report.issues) {
+				for (const detail of issue.details) {
+					if (!decompiledSources.value.has(detail.id)) {
+						const cached = getCachedSource(detail.id)
+						if (cached) {
+							decompiledSources.value.set(detail.id, cached)
+						}
+					}
+				}
+			}
+			return
+		}
+	}
+}
+
+function handleLoadFileSources(reportId: string): void {
+	tryLoadCachedSourcesForFile(reportId)
+
+	for (const review of reviewItems.value) {
+		const report = review.reports.find((r) => r.id === reportId)
+		if (report) {
+			for (const issue of report.issues) {
+				const hasUncached = issue.details.some((d) => !decompiledSources.value.has(d.id))
+				if (hasUncached) {
+					loadIssueSource(issue.id)
+				}
+			}
+			return
+		}
+	}
+}
+
+const messages = defineMessages({
+	searchPlaceholder: {
+		id: 'moderation.search.placeholder',
+		defaultMessage: 'Search...',
+	},
+	filterBy: {
+		id: 'moderation.filter.by',
+		defaultMessage: 'Filter by',
+	},
+	sortBy: {
+		id: 'moderation.sort.by',
+		defaultMessage: 'Sort by',
+	},
+})
+
+const query = ref(route.query.q?.toString() || '')
+
+watch(
+	query,
+	(newQuery) => {
+		const currentQuery = { ...route.query }
+		if (newQuery) {
+			currentQuery.q = newQuery
+		} else {
+			delete currentQuery.q
+		}
+
+		router.replace({
+			path: route.path,
+			query: currentQuery,
+		})
+		goToPage(1)
+	},
+	{ immediate: false },
+)
+
+watch(
+	() => route.query.q,
+	(newQueryParam) => {
+		const newValue = newQueryParam?.toString() || ''
+		if (query.value !== newValue) {
+			query.value = newValue
+		}
+	},
+)
+
+const currentFilterType = ref('All issues')
+
+const filterTypes = computed<ComboboxOption<string>[]>(() => {
+	const base: ComboboxOption<string>[] = [{ value: 'All issues', label: 'All issues' }]
+	if (!reviewItems.value) return base
+
+	const issueTypes = new Set(
+		reviewItems.value
+			.flatMap((review) => review.reports)
+			.flatMap((report) => report.issues)
+			.map((issue) => issue.issue_type),
+	)
+
+	const sortedTypes = Array.from(issueTypes).sort()
+	return [...base, ...sortedTypes.map((type) => ({ value: type, label: type }))]
+})
+
+const currentSortType = ref('Severe first')
+const sortTypes: ComboboxOption<string>[] = [
+	{ value: 'Oldest', label: 'Oldest' },
+	{ value: 'Newest', label: 'Newest' },
+	{ value: 'Severe first', label: 'Severe first' },
+	{ value: 'Severe last', label: 'Severe last' },
+]
+
+const fuse = computed(() => {
+	if (!reviewItems.value || reviewItems.value.length === 0) return null
+	return new Fuse(reviewItems.value, {
+		keys: [
+			{ name: 'project.title', weight: 4 },
+			{ name: 'project.slug', weight: 3 },
+			{ name: 'reports.file_name', weight: 2 },
+			{ name: 'reports.issues.issue_type', weight: 3 },
+			{ name: 'project_owner.name', weight: 2 },
+		],
+		includeScore: true,
+		threshold: 0.4,
+	})
+})
+
+const searchResults = computed(() => {
+	if (!query.value || !fuse.value) return null
+	return fuse.value.search(query.value).map((result) => result.item)
+})
+
+const baseFiltered = computed(() => {
+	if (!reviewItems.value) return []
+	return query.value && searchResults.value ? searchResults.value : [...reviewItems.value]
+})
+
+const typeFiltered = computed(() => {
+	if (currentFilterType.value === 'All issues') return baseFiltered.value
+	const type = currentFilterType.value
+
+	return baseFiltered.value.filter((review) => {
+		return review.reports.some((report: Labrinth.TechReview.Internal.FileReport) =>
+			report.issues.some(
+				(issue: Labrinth.TechReview.Internal.FileIssue) => issue.issue_type === type,
+			),
+		)
+	})
+})
+
+const filteredItems = computed(() => typeFiltered.value)
+
+const filteredIssuesCount = computed(() => {
+	return filteredItems.value.reduce((total, review) => {
+		if (currentFilterType.value === 'All issues') {
+			return total + review.reports.reduce((sum, report) => sum + report.issues.length, 0)
+		} else {
+			return (
+				total +
+				review.reports.reduce((sum, report) => {
+					return (
+						sum +
+						report.issues.filter((issue) => issue.issue_type === currentFilterType.value).length
+					)
+				}, 0)
+			)
+		}
+	}, 0)
+})
+
+const totalPages = computed(() => Math.ceil((filteredItems.value?.length || 0) / UI_PAGE_SIZE))
+const paginatedItems = computed(() => {
+	if (!filteredItems.value) return []
+	const start = (currentPage.value - 1) * UI_PAGE_SIZE
+	const end = start + UI_PAGE_SIZE
+	return filteredItems.value.slice(start, end)
+})
+function goToPage(page: number, top = false) {
+	currentPage.value = page
+
+	if (top && window) {
+		window.scrollTo({
+			top: 0,
+			left: 0,
+			behavior: 'smooth',
+		})
+	}
+}
+
+function toApiSort(label: string): Labrinth.TechReview.Internal.SearchProjectsSort {
+	switch (label) {
+		case 'Oldest':
+			return 'created_asc'
+		case 'Newest':
+			return 'created_desc'
+		case 'Severe first':
+			return 'severity_desc'
+		case 'Severe last':
+			return 'severity_asc'
+		default:
+			return 'severity_desc'
+	}
+}
+
+const {
+	data: infiniteData,
+	isLoading,
+	isFetchingNextPage,
+	fetchNextPage,
+	hasNextPage,
+	refetch,
+} = useInfiniteQuery({
+	queryKey: ['tech-reviews', currentSortType],
+	queryFn: async ({ pageParam = 0 }) => {
+		return await client.labrinth.tech_review_internal.searchProjects({
+			limit: API_PAGE_SIZE,
+			page: pageParam,
+			sort_by: toApiSort(currentSortType.value),
+		})
+	},
+	getNextPageParam: (lastPage, allPages) => {
+		// If we got a full page, there's probably more
+		return lastPage.project_reports.length >= API_PAGE_SIZE ? allPages.length : undefined
+	},
+	initialPageParam: 0,
+})
+
+watch(
+	[() => infiniteData.value, hasNextPage],
+	() => {
+		if (hasNextPage.value && !isFetchingNextPage.value) {
+			fetchNextPage()
+		}
+	},
+	{ immediate: true },
+)
+
+const mergedSearchResponse = computed(() => {
+	if (!infiniteData.value?.pages?.length) return null
+
+	return infiniteData.value.pages.reduce(
+		(merged, page) => ({
+			project_reports: [...merged.project_reports, ...page.project_reports],
+			projects: { ...merged.projects, ...page.projects },
+			threads: { ...merged.threads, ...page.threads },
+			ownership: { ...merged.ownership, ...page.ownership },
+		}),
+		{
+			project_reports: [] as Labrinth.TechReview.Internal.ProjectReport[],
+			projects: {} as Record<string, Labrinth.TechReview.Internal.ProjectModerationInfo>,
+			threads: {} as Record<string, Labrinth.TechReview.Internal.Thread>,
+			ownership: {} as Record<string, Labrinth.TechReview.Internal.Ownership>,
+		},
+	)
+})
+
+type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
+	id: string
+	version_id: string
+}
+
+const reviewItems = computed(() => {
+	if (!mergedSearchResponse.value?.project_reports?.length) {
+		return []
+	}
+
+	const response = mergedSearchResponse.value
+
+	return response.project_reports
+		.map((projectReport) => {
+			const project = response.projects[projectReport.project_id]
+			const thread = project?.thread_id ? response.threads[project.thread_id] : undefined
+
+			if (!thread) return null
+
+			const reports: FlattenedFileReport[] = projectReport.versions.flatMap((version) =>
+				version.files.map((file) => ({
+					...file,
+					id: file.report_id,
+					version_id: version.version_id,
+				})),
+			)
+
+			return {
+				project,
+				project_owner: response.ownership[projectReport.project_id],
+				thread,
+				reports,
+			}
+		})
+		.filter(
+			(
+				item,
+			): item is {
+				project: Labrinth.TechReview.Internal.ProjectModerationInfo
+				project_owner: Labrinth.TechReview.Internal.Ownership
+				thread: Labrinth.TechReview.Internal.Thread
+				reports: FlattenedFileReport[]
+			} => item !== null,
+		)
+})
+
+function handleMarkComplete(projectId: string) {
+	queryClient.setQueryData(
+		['tech-reviews', currentSortType],
+		(
+			oldData:
+				| {
+						pages: Labrinth.TechReview.Internal.SearchResponse[]
+						pageParams: number[]
+				  }
+				| undefined,
+		) => {
+			if (!oldData) return oldData
+
+			return {
+				...oldData,
+				pages: oldData.pages.map((page) => ({
+					...page,
+					project_reports: page.project_reports.filter((pr) => pr.project_id !== projectId),
+					projects: Object.fromEntries(
+						Object.entries(page.projects).filter(([id]) => id !== projectId),
+					),
+					ownership: Object.fromEntries(
+						Object.entries(page.ownership).filter(([id]) => id !== projectId),
+					),
+				})),
+			}
+		},
+	)
+}
+
+const maliciousSummaryModalRef = ref<InstanceType<typeof MaliciousSummaryModal>>()
+const currentUnsafeFiles = ref<UnsafeFile[]>([])
+
+function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
+	currentUnsafeFiles.value = unsafeFiles
+	maliciousSummaryModalRef.value?.show()
+}
+
+watch(currentSortType, () => {
+	goToPage(1)
+})
+
+// TODO: Reimpl when backend is available
+// const batchScanProgressInformation = computed<BatchScanProgress | undefined>(() => {
+// 	return {
+// 		total: 58,
+// 		complete: 20,
+// 	}
+// })
+</script>
+
 <template>
-	<p>Not yet implemented.</p>
+	<div class="flex flex-col gap-4">
+		<!-- TODO: Reimpl when backend is available -->
+		<!-- <BatchScanProgressAlert
+			v-if="batchScanProgressInformation"
+			:progress="batchScanProgressInformation"
+		/> -->
+
+		<div class="flex flex-col justify-between gap-2 lg:flex-row">
+			<div class="iconified-input flex-1 lg:max-w-md">
+				<SearchIcon aria-hidden="true" class="text-lg" />
+				<input
+					v-model="query"
+					class="!h-10"
+					autocomplete="off"
+					spellcheck="false"
+					type="text"
+					:placeholder="formatMessage(messages.searchPlaceholder)"
+					@input="goToPage(1)"
+				/>
+				<Button v-if="query" class="r-btn" @click="() => (query = '')">
+					<XIcon />
+				</Button>
+			</div>
+
+			<div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
+				<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+			</div>
+
+			<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
+				<Combobox
+					v-model="currentFilterType"
+					class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
+					:options="filterTypes"
+					:placeholder="formatMessage(messages.filterBy)"
+					searchable
+					@select="goToPage(1)"
+				>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
+							<span class="truncate text-contrast"
+								>{{ currentFilterType }} ({{ filteredIssuesCount }})</span
+							>
+						</span>
+					</template>
+				</Combobox>
+
+				<Combobox
+					v-model="currentSortType"
+					class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[175px]"
+					:options="sortTypes"
+					:placeholder="formatMessage(messages.sortBy)"
+					@select="goToPage(1)"
+				>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<SortAscIcon
+								v-if="currentSortType === 'Oldest'"
+								class="size-5 flex-shrink-0 text-secondary"
+							/>
+							<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
+							<span class="truncate text-contrast">{{ currentSortType }}</span>
+						</span>
+					</template>
+				</Combobox>
+
+				<!-- <ButtonStyled color="orange">
+					<button class="!h-10"><ShieldAlertIcon /> Batch scan</button>
+				</ButtonStyled> -->
+			</div>
+		</div>
+
+		<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
+			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+		</div>
+
+		<div class="flex flex-col gap-4">
+			<div v-if="isLoading || isFetchingNextPage" class="universal-card h-24 animate-pulse"></div>
+			<div
+				v-else-if="paginatedItems.length === 0"
+				class="universal-card flex h-24 items-center justify-center text-secondary"
+			>
+				No projects in queue.
+			</div>
+			<div v-for="(item, idx) in paginatedItems" :key="item.project.id ?? idx">
+				<ModerationTechRevCard
+					:item="item"
+					:loading-issues="loadingIssues"
+					:decompiled-sources="decompiledSources"
+					@refetch="refetch"
+					@load-file-sources="handleLoadFileSources"
+					@mark-complete="handleMarkComplete"
+					@show-malicious-summary="handleShowMaliciousSummary"
+				/>
+			</div>
+		</div>
+
+		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
+			<Pagination
+				:page="currentPage"
+				:count="totalPages"
+				@switch-page="(num) => goToPage(num, true)"
+			/>
+		</div>
+
+		<MaliciousSummaryModal ref="maliciousSummaryModalRef" :unsafe-files="currentUnsafeFiles" />
+	</div>
 </template>
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index ecc510ac9f..da4a1033d9 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -510,9 +510,7 @@
 				class="universal-card recessed !mb-0 flex items-center justify-between"
 			>
 				<div class="flex gap-2">
-					<CardIcon v-if="method.type === 'card'" class="h-8 w-8" />
-					<CurrencyIcon v-else-if="method.type === 'cashapp'" class="h-8 w-8" />
-					<PayPalIcon v-else-if="method.type === 'paypal'" class="h-8 w-8" />
+					<component :is="getPaymentMethodIcon(method.type)" class="h-8 w-8" />
 					<div class="flex flex-col">
 						<div class="flex items-center gap-2">
 							<div class="font-bold text-contrast">
@@ -599,14 +597,11 @@
 <script setup>
 import {
 	ArrowBigUpDashIcon,
-	CardIcon,
 	CheckCircleIcon,
-	CurrencyIcon,
 	EditIcon,
 	HistoryIcon,
 	ModrinthPlusIcon,
 	MoreVerticalIcon,
-	PayPalIcon,
 	PlusIcon,
 	RightArrowIcon,
 	SpinnerIcon,
@@ -622,6 +617,7 @@ import {
 	commonMessages,
 	ConfirmModal,
 	CopyCode,
+	getPaymentMethodIcon,
 	injectNotificationManager,
 	OverflowMenu,
 	PurchaseModal,
diff --git a/apps/frontend/src/providers/creator-withdraw.ts b/apps/frontend/src/providers/creator-withdraw.ts
index 86c570f20b..7a9e709357 100644
--- a/apps/frontend/src/providers/creator-withdraw.ts
+++ b/apps/frontend/src/providers/creator-withdraw.ts
@@ -6,7 +6,7 @@ import {
 	PayPalColorIcon,
 	VenmoColorIcon,
 } from '@modrinth/assets'
-import { createContext, paymentMethodMessages, useDebugLogger } from '@modrinth/ui'
+import { createContext, getCurrencyIcon, paymentMethodMessages, useDebugLogger } from '@modrinth/ui'
 import type { MessageDescriptor } from '@vintl/vintl'
 import { type Component, computed, type ComputedRef, type Ref, ref } from 'vue'
 
diff --git a/apps/frontend/src/utils/finance-icons.ts b/apps/frontend/src/utils/finance-icons.ts
deleted file mode 100644
index 3fcf014dc9..0000000000
--- a/apps/frontend/src/utils/finance-icons.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { PolygonIcon, USDCColorIcon } from '@modrinth/assets'
-import type { Component } from 'vue'
-
-export function getCurrencyIcon(currency: string): Component | null {
-	const lower = currency.toLocaleLowerCase()
-
-	if (lower.includes('usdc')) return USDCColorIcon
-
-	return null
-}
-
-export function getCurrencyColor(currency: string): string {
-	const lower = currency.toLowerCase()
-
-	if (lower.includes('usdc')) return 'text-blue'
-
-	return 'text-contrast'
-}
-
-export function getBlockchainIcon(blockchain: string): Component | null {
-	const lower = blockchain.toLowerCase()
-
-	if (lower.includes('polygon')) return PolygonIcon
-
-	return null
-}
-
-export function getBlockchainColor(blockchain: string): string {
-	const lower = blockchain.toLowerCase()
-
-	if (lower.includes('polygon')) return 'text-purple'
-
-	return 'text-contrast'
-}
diff --git a/apps/labrinth/.sqlx/query-3240e4b5abc9850b5d3c09fafcac71674941487c15be1e8ce0ebc78e7c26b34d.json b/apps/labrinth/.sqlx/query-3240e4b5abc9850b5d3c09fafcac71674941487c15be1e8ce0ebc78e7c26b34d.json
new file mode 100644
index 0000000000..736375ee54
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-3240e4b5abc9850b5d3c09fafcac71674941487c15be1e8ce0ebc78e7c26b34d.json
@@ -0,0 +1,15 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n            UPDATE mods\n            SET status = $1\n            FROM delphi_report_issues dri\n            INNER JOIN delphi_reports dr ON dr.id = dri.report_id\n            INNER JOIN files f ON f.id = dr.file_id\n            INNER JOIN versions v ON v.id = f.version_id\n            INNER JOIN mods m ON v.mod_id = m.id\n            WHERE dri.id = $2\n            ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Varchar",
+        "Int8"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "3240e4b5abc9850b5d3c09fafcac71674941487c15be1e8ce0ebc78e7c26b34d"
+}
diff --git a/apps/labrinth/.sqlx/query-3961aa17ce3219c057c398dca0ed3aaeb30a8da4721959fdee99cf649a8b29e3.json b/apps/labrinth/.sqlx/query-3961aa17ce3219c057c398dca0ed3aaeb30a8da4721959fdee99cf649a8b29e3.json
new file mode 100644
index 0000000000..134a39e34d
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-3961aa17ce3219c057c398dca0ed3aaeb30a8da4721959fdee99cf649a8b29e3.json
@@ -0,0 +1,49 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        SELECT\n            project_id AS \"project_id: DBProjectId\",\n            project_thread_id AS \"project_thread_id: DBThreadId\",\n            report AS \"report!: sqlx::types::Json<FileReport>\"\n        FROM (\n            SELECT DISTINCT ON (dr.id)\n                dr.id       AS report_id,\n                dr.created  AS report_created,\n                dr.severity AS report_severity,\n                m.id        AS project_id,\n                t.id        AS project_thread_id,\n\n                to_jsonb(dr)\n                || jsonb_build_object(\n                    'file_id', to_base62(f.id),\n                    'version_id', to_base62(v.id),\n                    'project_id', to_base62(v.mod_id),\n                    'file_name', f.filename,\n                    'file_size', f.size,\n                    'flag_reason', 'delphi',\n                    'download_url', f.url,\n                    -- TODO: replace with `json_array` in Postgres 16\n                    'issues', (\n                        SELECT json_agg(\n                            to_jsonb(dri)\n                            || jsonb_build_object(\n                                -- TODO: replace with `json_array` in Postgres 16\n                                'details', (\n                                    SELECT json_agg(\n                                        jsonb_build_object(\n                                            'id', drid.id,\n                                            'issue_id', drid.issue_id,\n                                            'key', drid.key,\n                                            'file_path', drid.file_path,\n                                            -- ignore `decompiled_source`\n                                            'data', drid.data,\n                                            'severity', drid.severity\n                                        )\n                                    )\n                                    FROM delphi_report_issue_details drid\n                                    WHERE drid.issue_id = dri.id\n                                )\n                            )\n                        )\n                        FROM delphi_report_issues dri\n                        WHERE dri.report_id = dr.id\n                    )\n                ) AS report\n            FROM delphi_reports dr\n            INNER JOIN files f ON f.id = dr.file_id\n            INNER JOIN versions v ON v.id = f.version_id\n            INNER JOIN mods m ON m.id = v.mod_id\n            INNER JOIN threads t ON t.mod_id = m.id\n\n            -- filtering\n            LEFT JOIN mods_categories mc ON mc.joining_mod_id = m.id\n            LEFT JOIN categories c ON c.id = mc.joining_category_id\n            WHERE\n                -- project type\n                (cardinality($4::int[]) = 0 OR c.project_type = ANY($4::int[]))\n                AND dr.status = $5\n        ) t\n\n        -- sorting\n        ORDER BY\n            CASE WHEN $3 = 'created_asc' THEN t.report_created ELSE TO_TIMESTAMP(0) END ASC,\n            CASE WHEN $3 = 'created_desc' THEN t.report_created ELSE TO_TIMESTAMP(0) END DESC,\n            CASE WHEN $3 = 'severity_asc' THEN t.report_severity ELSE 'low'::delphi_severity END ASC,\n            CASE WHEN $3 = 'severity_desc' THEN t.report_severity ELSE 'low'::delphi_severity END DESC\n\n        -- pagination\n        LIMIT $1\n        OFFSET $2\n        ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "project_id: DBProjectId",
+        "type_info": "Int8"
+      },
+      {
+        "ordinal": 1,
+        "name": "project_thread_id: DBThreadId",
+        "type_info": "Int8"
+      },
+      {
+        "ordinal": 2,
+        "name": "report!: sqlx::types::Json<FileReport>",
+        "type_info": "Jsonb"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Int8",
+        "Int8",
+        "Text",
+        "Int4Array",
+        {
+          "Custom": {
+            "name": "delphi_report_issue_status",
+            "kind": {
+              "Enum": [
+                "pending",
+                "safe",
+                "unsafe"
+              ]
+            }
+          }
+        }
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      null
+    ]
+  },
+  "hash": "3961aa17ce3219c057c398dca0ed3aaeb30a8da4721959fdee99cf649a8b29e3"
+}
diff --git a/apps/labrinth/.sqlx/query-6cf1862b3c197d42f9183dcbbd3d07b7d42c37e089403961ee16be0f99958ea0.json b/apps/labrinth/.sqlx/query-6cf1862b3c197d42f9183dcbbd3d07b7d42c37e089403961ee16be0f99958ea0.json
new file mode 100644
index 0000000000..f2f509efc7
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-6cf1862b3c197d42f9183dcbbd3d07b7d42c37e089403961ee16be0f99958ea0.json
@@ -0,0 +1,15 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n            UPDATE mods\n            SET status = $1\n            FROM delphi_reports dr\n            INNER JOIN files f ON f.id = dr.file_id\n            INNER JOIN versions v ON v.id = f.version_id\n            INNER JOIN mods m ON v.mod_id = m.id\n            WHERE dr.id = $2\n            ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Varchar",
+        "Int8"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "6cf1862b3c197d42f9183dcbbd3d07b7d42c37e089403961ee16be0f99958ea0"
+}
diff --git a/apps/labrinth/.sqlx/query-b1df83f4592701f8aa03f6d16bac9e2bd27ac9a87987eafd79b06f1c4ecdb659.json b/apps/labrinth/.sqlx/query-b1df83f4592701f8aa03f6d16bac9e2bd27ac9a87987eafd79b06f1c4ecdb659.json
new file mode 100644
index 0000000000..216435cf2b
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-b1df83f4592701f8aa03f6d16bac9e2bd27ac9a87987eafd79b06f1c4ecdb659.json
@@ -0,0 +1,26 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        UPDATE delphi_report_issues\n        SET status = $1\n        WHERE id = $2\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        {
+          "Custom": {
+            "name": "delphi_report_issue_status",
+            "kind": {
+              "Enum": [
+                "pending",
+                "safe",
+                "unsafe"
+              ]
+            }
+          }
+        },
+        "Int8"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "b1df83f4592701f8aa03f6d16bac9e2bd27ac9a87987eafd79b06f1c4ecdb659"
+}
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 9aa3a21ba8..610a0b9910 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -12,6 +12,7 @@ import { LabrinthCollectionsModule } from './labrinth/collections'
 import { LabrinthProjectsV2Module } from './labrinth/projects/v2'
 import { LabrinthProjectsV3Module } from './labrinth/projects/v3'
 import { LabrinthStateModule } from './labrinth/state'
+import { LabrinthTechReviewInternalModule } from './labrinth/tech-review/internal'
 
 type ModuleConstructor = new (client: AbstractModrinthClient) => AbstractModule
 
@@ -36,6 +37,7 @@ export const MODULE_REGISTRY = {
 	labrinth_projects_v2: LabrinthProjectsV2Module,
 	labrinth_projects_v3: LabrinthProjectsV3Module,
 	labrinth_state: LabrinthStateModule,
+	labrinth_tech_review_internal: LabrinthTechReviewInternalModule,
 	labrinth_versions_v3: LabrinthVersionsV3Module,
 } as const satisfies Record<string, ModuleConstructor>
 
diff --git a/packages/api-client/src/modules/labrinth/index.ts b/packages/api-client/src/modules/labrinth/index.ts
index 1b5c1d6f08..38bc3f22b6 100644
--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -3,4 +3,5 @@ export * from './collections'
 export * from './projects/v2'
 export * from './projects/v3'
 export * from './state'
+export * from './tech-review/internal'
 export * from './versions/v3'
diff --git a/packages/api-client/src/modules/labrinth/tech-review/internal.ts b/packages/api-client/src/modules/labrinth/tech-review/internal.ts
new file mode 100644
index 0000000000..7967b6ac13
--- /dev/null
+++ b/packages/api-client/src/modules/labrinth/tech-review/internal.ts
@@ -0,0 +1,124 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Labrinth } from '../types'
+
+export class LabrinthTechReviewInternalModule extends AbstractModule {
+	public getModuleID(): string {
+		return 'labrinth_tech_review_internal'
+	}
+
+	/**
+	 * Search for projects awaiting technical review.
+	 *
+	 * Returns a flat list of file reports with associated project data, ownership
+	 * information, and moderation threads provided as lookup maps.
+	 *
+	 * @param params - Search parameters including pagination, filters, and sorting
+	 * @returns Response object containing reports array and lookup maps for projects, threads, and ownership
+	 *
+	 * @example
+	 * ```typescript
+	 * const response = await client.labrinth.tech_review_internal.searchProjects({
+	 *   limit: 20,
+	 *   page: 0,
+	 *   sort_by: 'created_asc',
+	 *   filter: {
+	 *     project_type: ['mod', 'modpack']
+	 *   }
+	 * })
+	 * // Access reports: response.reports
+	 * // Access project by ID: response.projects[projectId]
+	 * ```
+	 */
+	public async searchProjects(
+		params: Labrinth.TechReview.Internal.SearchProjectsRequest,
+	): Promise<Labrinth.TechReview.Internal.SearchResponse> {
+		return this.client.request<Labrinth.TechReview.Internal.SearchResponse>(
+			'/moderation/tech-review/search',
+			{
+				api: 'labrinth',
+				version: 'internal',
+				method: 'POST',
+				body: params,
+			},
+		)
+	}
+
+	/**
+	 * Get detailed information about a specific file report.
+	 *
+	 * @param reportId - The Delphi report ID
+	 * @returns Full report with all issues and details
+	 *
+	 * @example
+	 * ```typescript
+	 * const report = await client.labrinth.tech_review_internal.getReport('report-123')
+	 * console.log(report.file_name, report.issues.length)
+	 * ```
+	 */
+	public async getReport(reportId: string): Promise<Labrinth.TechReview.Internal.FileReport> {
+		return this.client.request<Labrinth.TechReview.Internal.FileReport>(
+			`/moderation/tech-review/report/${reportId}`,
+			{
+				api: 'labrinth',
+				version: 'internal',
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Get detailed information about a specific issue.
+	 *
+	 * @param issueId - The issue ID
+	 * @returns Issue with all its details
+	 *
+	 * @example
+	 * ```typescript
+	 * const issue = await client.labrinth.tech_review_internal.getIssue('issue-123')
+	 * console.log(issue.issue_type, issue.status)
+	 * ```
+	 */
+	public async getIssue(issueId: string): Promise<Labrinth.TechReview.Internal.FileIssue> {
+		return this.client.request<Labrinth.TechReview.Internal.FileIssue>(
+			`/moderation/tech-review/issue/${issueId}`,
+			{
+				api: 'labrinth',
+				version: 'internal',
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Update the status of a technical review issue detail.
+	 *
+	 * Allows moderators to mark an individual issue detail as safe (false positive) or unsafe (malicious).
+	 *
+	 * @param detailId - The ID of the issue detail to update
+	 * @param data - The verdict for the detail
+	 * @returns Promise that resolves when the update is complete
+	 */
+	public async updateIssueDetail(
+		detailId: string,
+		data: Labrinth.TechReview.Internal.UpdateIssueRequest,
+	): Promise<void> {
+		return this.client.request<void>(`/moderation/tech-review/issue-detail/${detailId}`, {
+			api: 'labrinth',
+			version: 'internal',
+			method: 'PATCH',
+			body: data,
+		})
+	}
+
+	public async submitProject(
+		projectId: string,
+		data: Labrinth.TechReview.Internal.SubmitProjectRequest,
+	): Promise<void> {
+		return this.client.request<void>(`/moderation/tech-review/submit/${projectId}`, {
+			api: 'labrinth',
+			version: 'internal',
+			method: 'POST',
+			body: data,
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index e728999e6b..f2b50f500b 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -13,7 +13,7 @@ export namespace Labrinth {
 				price_id: string
 				interval: PriceDuration
 				status: SubscriptionStatus
-				created: string // ISO datetime string
+				created: string
 				metadata?: SubscriptionMetadata
 			}
 
@@ -40,8 +40,8 @@ export namespace Labrinth {
 				amount: number
 				currency_code: string
 				status: ChargeStatus
-				due: string // ISO datetime string
-				last_attempt: string | null // ISO datetime string
+				due: string
+				last_attempt: string | null
 				type: ChargeType
 				subscription_id: string | null
 				subscription_interval: PriceDuration | null
@@ -337,6 +337,10 @@ export namespace Labrinth {
 				monetization_status: v2.MonetizationStatus
 				side_types_migration_review_status: 'reviewed' | 'pending'
 				environment?: Environment[]
+
+				/**
+				 * @deprecated Not recommended to use.
+				 **/
 				[key: string]: unknown
 			}
 
@@ -719,4 +723,181 @@ export namespace Labrinth {
 			errors: unknown[]
 		}
 	}
+
+	export namespace TechReview {
+		export namespace Internal {
+			export type SearchProjectsRequest = {
+				limit?: number
+				page?: number
+				filter?: SearchProjectsFilter
+				sort_by?: SearchProjectsSort
+			}
+
+			export type SearchProjectsFilter = {
+				project_type?: string[]
+			}
+
+			export type SearchProjectsSort =
+				| 'created_asc'
+				| 'created_desc'
+				| 'severity_asc'
+				| 'severity_desc'
+
+			export type UpdateIssueRequest = {
+				verdict: 'safe' | 'unsafe'
+			}
+
+			export type SubmitProjectRequest = {
+				verdict: 'safe' | 'unsafe'
+				message?: string
+			}
+
+			export type SearchResponse = {
+				project_reports: ProjectReport[]
+				projects: Record<string, ProjectModerationInfo>
+				threads: Record<string, Thread>
+				ownership: Record<string, Ownership>
+			}
+
+			export type ProjectModerationInfo = {
+				id: string
+				thread_id: string
+				name: string
+				project_types: string[]
+				icon_url: string | null
+			} & Projects.v3.Project
+
+			export type ProjectReport = {
+				project_id: string
+				max_severity: DelphiSeverity | null
+				versions: VersionReport[]
+			}
+
+			export type VersionReport = {
+				version_id: string
+				files: FileReport[]
+			}
+
+			export type FileReport = {
+				report_id: string
+				file_id: string
+				created: string
+				flag_reason: FlagReason
+				severity: DelphiSeverity
+				file_name: string
+				file_size: number
+				download_url: string
+				issues: FileIssue[]
+			}
+
+			export type FileIssue = {
+				id: string
+				report_id: string
+				issue_type: string
+				details: ReportIssueDetail[]
+			}
+
+			export type ReportIssueDetail = {
+				id: string
+				issue_id: string
+				key: string
+				file_path: string
+				decompiled_source: string | null
+				data: Record<string, unknown>
+				severity: DelphiSeverity
+				status: DelphiReportIssueStatus
+			}
+
+			export type Ownership =
+				| {
+						kind: 'user'
+						id: string
+						name: string
+						icon_url?: string
+				  }
+				| {
+						kind: 'organization'
+						id: string
+						name: string
+						icon_url?: string
+				  }
+
+			export type DBThread = {
+				id: string
+				project_id?: string
+				report_id?: string
+				type_: ThreadType
+				messages: DBThreadMessage[]
+				members: string[]
+			}
+
+			export type DBThreadMessage = {
+				id: string
+				thread_id: string
+				author_id?: string
+				body: MessageBody
+				created: string
+				hide_identity: boolean
+			}
+
+			export type MessageBody =
+				| {
+						type: 'text'
+						body: string
+						private?: boolean
+						replying_to?: string
+						associated_images?: string[]
+				  }
+				| {
+						type: 'status_change'
+						new_status: Projects.v2.ProjectStatus
+						old_status: Projects.v2.ProjectStatus
+				  }
+				| {
+						type: 'thread_closure'
+				  }
+				| {
+						type: 'thread_reopen'
+				  }
+				| {
+						type: 'deleted'
+						private?: boolean
+				  }
+
+			export type ThreadType = 'report' | 'project' | 'direct_message'
+
+			export type User = {
+				id: string
+				username: string
+				avatar_url: string
+				role: string
+				badges: number
+				created: string
+				bio?: string
+			}
+
+			export type ThreadMessage = {
+				id: string | null
+				author_id: string | null
+				body: MessageBody
+				created: string
+				hide_identity: boolean
+			}
+
+			export type Thread = {
+				id: string
+				type: ThreadType
+				project_id: string | null
+				report_id: string | null
+				messages: ThreadMessage[]
+				members: User[]
+			}
+
+			export type FlagReason = 'delphi'
+
+			export type DelphiSeverity = 'low' | 'medium' | 'high' | 'severe'
+
+			export type DelphiReportIssueStatus = 'pending' | 'safe' | 'unsafe'
+		}
+	}
 }
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 6c9987620b..060333fe14 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -28,6 +28,7 @@ import _BoxIcon from './icons/box.svg?component'
 import _BoxImportIcon from './icons/box-import.svg?component'
 import _BracesIcon from './icons/braces.svg?component'
 import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
+import _BugIcon from './icons/bug.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChangeSkinIcon from './icons/change-skin.svg?component'
@@ -35,6 +36,7 @@ import _ChartIcon from './icons/chart.svg?component'
 import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
 import _CheckCircleIcon from './icons/check-circle.svg?component'
+import _ChevronDownIcon from './icons/chevron-down.svg?component'
 import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _CircleUserIcon from './icons/circle-user.svg?component'
@@ -69,9 +71,12 @@ import _EyeIcon from './icons/eye.svg?component'
 import _EyeOffIcon from './icons/eye-off.svg?component'
 import _FileIcon from './icons/file.svg?component'
 import _FileArchiveIcon from './icons/file-archive.svg?component'
+import _FileCodeIcon from './icons/file-code.svg?component'
+import _FileImageIcon from './icons/file-image.svg?component'
 import _FileTextIcon from './icons/file-text.svg?component'
 import _FilterIcon from './icons/filter.svg?component'
 import _FilterXIcon from './icons/filter-x.svg?component'
+import _FolderIcon from './icons/folder.svg?component'
 import _FolderArchiveIcon from './icons/folder-archive.svg?component'
 import _FolderOpenIcon from './icons/folder-open.svg?component'
 import _FolderSearchIcon from './icons/folder-search.svg?component'
@@ -114,6 +119,7 @@ import _LinkIcon from './icons/link.svg?component'
 import _ListIcon from './icons/list.svg?component'
 import _ListBulletedIcon from './icons/list-bulleted.svg?component'
 import _ListEndIcon from './icons/list-end.svg?component'
+import _ListFilterIcon from './icons/list-filter.svg?component'
 import _ListOrderedIcon from './icons/list-ordered.svg?component'
 import _LoaderIcon from './icons/loader.svg?component'
 import _LoaderCircleIcon from './icons/loader-circle.svg?component'
@@ -170,6 +176,8 @@ import _ServerPlusIcon from './icons/server-plus.svg?component'
 import _SettingsIcon from './icons/settings.svg?component'
 import _ShareIcon from './icons/share.svg?component'
 import _ShieldIcon from './icons/shield.svg?component'
+import _ShieldAlertIcon from './icons/shield-alert.svg?component'
+import _ShieldCheckIcon from './icons/shield-check.svg?component'
 import _SignalIcon from './icons/signal.svg?component'
 import _SkullIcon from './icons/skull.svg?component'
 import _SlashIcon from './icons/slash.svg?component'
@@ -246,6 +254,7 @@ export const BoxImportIcon = _BoxImportIcon
 export const BoxIcon = _BoxIcon
 export const BracesIcon = _BracesIcon
 export const BrushCleaningIcon = _BrushCleaningIcon
+export const BugIcon = _BugIcon
 export const CalendarIcon = _CalendarIcon
 export const CardIcon = _CardIcon
 export const ChangeSkinIcon = _ChangeSkinIcon
@@ -253,6 +262,7 @@ export const ChartIcon = _ChartIcon
 export const CheckCheckIcon = _CheckCheckIcon
 export const CheckCircleIcon = _CheckCircleIcon
 export const CheckIcon = _CheckIcon
+export const ChevronDownIcon = _ChevronDownIcon
 export const ChevronLeftIcon = _ChevronLeftIcon
 export const ChevronRightIcon = _ChevronRightIcon
 export const CircleUserIcon = _CircleUserIcon
@@ -286,6 +296,8 @@ export const ExternalIcon = _ExternalIcon
 export const EyeOffIcon = _EyeOffIcon
 export const EyeIcon = _EyeIcon
 export const FileArchiveIcon = _FileArchiveIcon
+export const FileCodeIcon = _FileCodeIcon
+export const FileImageIcon = _FileImageIcon
 export const FileTextIcon = _FileTextIcon
 export const FileIcon = _FileIcon
 export const FilterXIcon = _FilterXIcon
@@ -293,6 +305,7 @@ export const FilterIcon = _FilterIcon
 export const FolderArchiveIcon = _FolderArchiveIcon
 export const FolderOpenIcon = _FolderOpenIcon
 export const FolderSearchIcon = _FolderSearchIcon
+export const FolderIcon = _FolderIcon
 export const FolderUpIcon = _FolderUpIcon
 export const GameIcon = _GameIcon
 export const GapIcon = _GapIcon
@@ -331,6 +344,7 @@ export const LightBulbIcon = _LightBulbIcon
 export const LinkIcon = _LinkIcon
 export const ListBulletedIcon = _ListBulletedIcon
 export const ListEndIcon = _ListEndIcon
+export const ListFilterIcon = _ListFilterIcon
 export const ListOrderedIcon = _ListOrderedIcon
 export const ListIcon = _ListIcon
 export const LoaderCircleIcon = _LoaderCircleIcon
@@ -387,6 +401,8 @@ export const ServerPlusIcon = _ServerPlusIcon
 export const ServerIcon = _ServerIcon
 export const SettingsIcon = _SettingsIcon
 export const ShareIcon = _ShareIcon
+export const ShieldAlertIcon = _ShieldAlertIcon
+export const ShieldCheckIcon = _ShieldCheckIcon
 export const ShieldIcon = _ShieldIcon
 export const SignalIcon = _SignalIcon
 export const SkullIcon = _SkullIcon
diff --git a/packages/assets/icons/bug.svg b/packages/assets/icons/bug.svg
new file mode 100644
index 0000000000..6f1643c1a8
--- /dev/null
+++ b/packages/assets/icons/bug.svg
@@ -0,0 +1,14 @@
+<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-bug-icon lucide-bug">
+	<path d="M12 20v-9" />
+	<path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" />
+	<path d="M14.12 3.88 16 2" />
+	<path d="M21 21a4 4 0 0 0-3.81-4" />
+	<path d="M21 5a4 4 0 0 1-3.55 3.97" />
+	<path d="M22 13h-4" />
+	<path d="M3 21a4 4 0 0 1 3.81-4" />
+	<path d="M3 5a4 4 0 0 0 3.55 3.97" />
+	<path d="M6 13H2" />
+	<path d="m8 2 1.88 1.88" />
+	<path d="M9 7.13V6a3 3 0 1 1 6 0v1.13" />
+</svg>
diff --git a/packages/assets/icons/chevron-down.svg b/packages/assets/icons/chevron-down.svg
new file mode 100644
index 0000000000..d374f2b0b4
--- /dev/null
+++ b/packages/assets/icons/chevron-down.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down">
+	<path d="m6 9 6 6 6-6" />
+</svg>
diff --git a/packages/assets/icons/file-code.svg b/packages/assets/icons/file-code.svg
new file mode 100644
index 0000000000..abb3cf1f50
--- /dev/null
+++ b/packages/assets/icons/file-code.svg
@@ -0,0 +1,8 @@
+<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-file-code-icon lucide-file-code">
+	<path
+		d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+	<path d="M14 2v5a1 1 0 0 0 1 1h5" />
+	<path d="M10 12.5 8 15l2 2.5" />
+	<path d="m14 12.5 2 2.5-2 2.5" />
+</svg>
diff --git a/packages/assets/icons/file-image.svg b/packages/assets/icons/file-image.svg
new file mode 100644
index 0000000000..772528537d
--- /dev/null
+++ b/packages/assets/icons/file-image.svg
@@ -0,0 +1,9 @@
+<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-file-image-icon lucide-file-image">
+	<path
+		d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+	<path d="M14 2v5a1 1 0 0 0 1 1h5" />
+	<circle cx="10" cy="12" r="2" />
+	<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" />
+</svg>
diff --git a/packages/assets/icons/folder.svg b/packages/assets/icons/folder.svg
new file mode 100644
index 0000000000..6f01566548
--- /dev/null
+++ b/packages/assets/icons/folder.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-icon lucide-folder">
+	<path
+		d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
diff --git a/packages/assets/icons/list-filter.svg b/packages/assets/icons/list-filter.svg
new file mode 100644
index 0000000000..fa1645bdd2
--- /dev/null
+++ b/packages/assets/icons/list-filter.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-filter-icon lucide-list-filter">
+	<path d="M2 5h20" />
+	<path d="M6 12h12" />
+	<path d="M9 19h6" />
+</svg>
diff --git a/packages/assets/icons/shield-alert.svg b/packages/assets/icons/shield-alert.svg
new file mode 100644
index 0000000000..94cfbb72f9
--- /dev/null
+++ b/packages/assets/icons/shield-alert.svg
@@ -0,0 +1,18 @@
+<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-shield-alert-icon lucide-shield-alert"
+>
+	<path
+		d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+	/>
+	<path d="M12 8v4" />
+	<path d="M12 16h.01" />
+</svg>
diff --git a/packages/assets/icons/shield-check.svg b/packages/assets/icons/shield-check.svg
new file mode 100644
index 0000000000..5aa1a179a1
--- /dev/null
+++ b/packages/assets/icons/shield-check.svg
@@ -0,0 +1,7 @@
+<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-shield-check-icon lucide-shield-check">
+	<path
+		d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+	<path d="m9 12 2 2 4-4" />
+</svg>
diff --git a/packages/moderation/package.json b/packages/moderation/package.json
index 7b784d475d..7f1d4dfa07 100644
--- a/packages/moderation/package.json
+++ b/packages/moderation/package.json
@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/utils": "workspace:*",
+		"@modrinth/api-client": "workspace:*",
 		"vue": "^3.5.13"
 	},
 	"devDependencies": {
diff --git a/packages/moderation/src/data/report-quick-replies.ts b/packages/moderation/src/data/report-quick-replies.ts
index d8847f4cd9..f2f3ff22bb 100644
--- a/packages/moderation/src/data/report-quick-replies.ts
+++ b/packages/moderation/src/data/report-quick-replies.ts
@@ -1,4 +1,5 @@
-import type { ReportQuickReply } from '../types/reports'
+import type { QuickReply } from '../types/quick-reply'
+import type { ExtendedReport } from '../types/reports'
 
 export default [
 	{
@@ -67,4 +68,4 @@ export default [
 		message: async () => (await import('./messages/reports/stale.md?raw')).default,
 		private: false,
 	},
-] as ReadonlyArray<ReportQuickReply>
+] as ReadonlyArray<QuickReply<ExtendedReport>>
diff --git a/packages/moderation/src/data/tech-review-quick-replies.ts b/packages/moderation/src/data/tech-review-quick-replies.ts
new file mode 100644
index 0000000000..bac3fcb333
--- /dev/null
+++ b/packages/moderation/src/data/tech-review-quick-replies.ts
@@ -0,0 +1,11 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { QuickReply } from '../types/quick-reply'
+
+export interface TechReviewContext {
+	project: Labrinth.Projects.v3.Project
+	project_owner: Labrinth.TechReview.Internal.Ownership
+	reports: Labrinth.TechReview.Internal.FileReport[]
+}
+
+export default [] as ReadonlyArray<QuickReply<TechReviewContext>>
diff --git a/packages/moderation/src/index.ts b/packages/moderation/src/index.ts
index f10b4d0294..312751a376 100644
--- a/packages/moderation/src/index.ts
+++ b/packages/moderation/src/index.ts
@@ -4,10 +4,15 @@ export { finalPermissionMessages } from './data/modpack-permissions-stage'
 export { default as nags } from './data/nags'
 export * from './data/nags/index'
 export { default as reportQuickReplies } from './data/report-quick-replies'
+export {
+	type TechReviewContext,
+	default as techReviewQuickReplies,
+} from './data/tech-review-quick-replies'
 export * from './types/actions'
 export * from './types/keybinds'
 export * from './types/messages'
 export * from './types/nags'
+export * from './types/quick-reply'
 export * from './types/reports'
 export * from './types/stage'
 export * from './utils'
diff --git a/packages/moderation/src/types/quick-reply.ts b/packages/moderation/src/types/quick-reply.ts
new file mode 100644
index 0000000000..e27ec70f02
--- /dev/null
+++ b/packages/moderation/src/types/quick-reply.ts
@@ -0,0 +1,6 @@
+export interface QuickReply<T = undefined> {
+	label: string
+	message: string | ((context: T) => Promise<string> | string)
+	shouldShow?: (context: T) => boolean
+	private?: boolean
+}
diff --git a/packages/moderation/src/types/reports.ts b/packages/moderation/src/types/reports.ts
index c5e0c1e042..cb02f8c354 100644
--- a/packages/moderation/src/types/reports.ts
+++ b/packages/moderation/src/types/reports.ts
@@ -1,4 +1,4 @@
-import type { DelphiReport, Project, Report, Thread, User, Version } from '@modrinth/utils'
+import type { Project, Report, Thread, User, Version } from '@modrinth/utils'
 
 export interface OwnershipTarget {
 	name: string
@@ -15,14 +15,3 @@ export interface ExtendedReport extends Report {
 	version?: Version
 	target?: OwnershipTarget
 }
-
-export interface ExtendedDelphiReport extends DelphiReport {
-	target?: OwnershipTarget
-}
-
-export interface ReportQuickReply {
-	label: string
-	message: string | ((report: ExtendedReport) => Promise<string> | string)
-	shouldShow?: (report: ExtendedReport) => boolean
-	private?: boolean
-}
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index 125c15cd5f..e00bac0c1a 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -8,7 +8,10 @@
 		<div :class="['flex gap-2 items-start', (header || $slots.header) && 'flex-col']">
 			<div class="flex gap-2 items-start" :class="header || $slots.header ? 'w-full' : 'contents'">
 				<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
-					<component :is="icons[type]" :class="['h-6 w-6 flex-none', iconClasses[type]]" />
+					<component
+						:is="getSeverityIcon(type)"
+						:class="['h-6 w-6 flex-none', iconClasses[type]]"
+					/>
 				</slot>
 				<div v-if="header || $slots.header" class="font-semibold text-base">
 					<slot name="header">{{ header }}</slot>
@@ -25,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
+import { getSeverityIcon } from '../../utils'
 
 withDefaults(
 	defineProps<{
@@ -53,10 +56,4 @@ const iconClasses = {
 	warning: 'text-brand-orange',
 	critical: 'text-brand-red',
 }
-
-const icons = {
-	info: InfoIcon,
-	warning: IssuesIcon,
-	critical: XCircleIcon,
-}
 </script>
diff --git a/packages/ui/src/components/base/Badge.vue b/packages/ui/src/components/base/Badge.vue
index 6971905430..b057b6fd4b 100644
--- a/packages/ui/src/components/base/Badge.vue
+++ b/packages/ui/src/components/base/Badge.vue
@@ -69,6 +69,14 @@
 			<XIcon aria-hidden="true" /> {{ formatMessage(messages.closedLabel) }}
 		</template>
 
+		<!-- Technical review verdicts -->
+		<template v-else-if="type === 'safe'">
+			<ShieldCheckIcon aria-hidden="true" /> {{ formatMessage(messages.safeLabel) }}
+		</template>
+		<template v-else-if="type === 'unsafe'">
+			<BugIcon aria-hidden="true" /> {{ formatMessage(messages.unsafeLabel) }}
+		</template>
+
 		<!-- Other -->
 		<template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
 	</span>
@@ -78,6 +86,7 @@
 import {
 	ArchiveIcon,
 	BoxIcon,
+	BugIcon,
 	CalendarIcon,
 	CheckIcon,
 	EyeOffIcon,
@@ -86,6 +95,7 @@ import {
 	LockIcon,
 	ModrinthIcon,
 	ScaleIcon,
+	ShieldCheckIcon,
 	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
@@ -153,6 +163,10 @@ const messages = defineMessages({
 		id: 'omorphia.component.badge.label.returned',
 		defaultMessage: 'Returned',
 	},
+	safeLabel: {
+		id: 'omorphia.component.badge.label.safe',
+		defaultMessage: 'Pass',
+	},
 	scheduledLabel: {
 		id: 'omorphia.component.badge.label.scheduled',
 		defaultMessage: 'Scheduled',
@@ -165,6 +179,10 @@ const messages = defineMessages({
 		id: 'omorphia.component.badge.label.unlisted',
 		defaultMessage: 'Unlisted',
 	},
+	unsafeLabel: {
+		id: 'omorphia.component.badge.label.unsafe',
+		defaultMessage: 'Fail',
+	},
 	withheldLabel: {
 		id: 'omorphia.component.badge.label.withheld',
 		defaultMessage: 'Withheld',
@@ -204,6 +222,7 @@ defineProps<{
 	&.type--rejected,
 	&.type--returned,
 	&.type--failed,
+	&.type--unsafe,
 	&.red {
 		--badge-color: var(--color-red);
 	}
@@ -220,6 +239,7 @@ defineProps<{
 	&.type--admin,
 	&.type--processed,
 	&.type--approved-general,
+	&.type--safe,
 	&.green {
 		--badge-color: var(--color-green);
 	}
diff --git a/packages/ui/src/components/base/CollapsibleRegion.vue b/packages/ui/src/components/base/CollapsibleRegion.vue
index 0d9f27f04b..04a47d13dd 100644
--- a/packages/ui/src/components/base/CollapsibleRegion.vue
+++ b/packages/ui/src/components/base/CollapsibleRegion.vue
@@ -1,29 +1,27 @@
 <template>
-	<div
-		class="relative overflow-hidden rounded-xl border-[2px] border-solid border-divider shadow-lg"
-		:class="{ 'max-h-32': isCollapsed }"
-	>
+	<div class="relative overflow-hidden">
 		<div
-			class="px-4 pt-4"
-			:class="{
-				'content-disabled pb-16': isCollapsed,
-				'pb-4': !isCollapsed,
-			}"
+			class="collapsible-region-content"
+			:class="{ open: !collapsed }"
+			:style="{ '--collapsed-height': collapsedHeight }"
 		>
-			<slot />
+			<div :class="{ 'pointer-events-none select-none pb-16': collapsed }">
+				<slot />
+			</div>
 		</div>
 
 		<div
-			v-if="isCollapsed"
-			class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-button-bg"
-		></div>
+			v-if="collapsed"
+			class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent"
+			:class="gradientTo"
+		/>
 
 		<div class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
 			<ButtonStyled circular type="transparent">
-				<button class="flex items-center gap-1 text-xs" @click="toggleCollapsed">
-					<ExpandIcon v-if="isCollapsed" />
+				<button class="flex items-center gap-1 text-xs" @click="collapsed = !collapsed">
+					<ExpandIcon v-if="collapsed" />
 					<CollapseIcon v-else />
-					{{ isCollapsed ? expandText : collapseText }}
+					{{ collapsed ? expandText : collapseText }}
 				</button>
 			</ButtonStyled>
 		</div>
@@ -32,67 +30,51 @@
 
 <script setup lang="ts">
 import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
-import { ref } from 'vue'
 
 import ButtonStyled from './ButtonStyled.vue'
 
-const props = withDefaults(
+withDefaults(
 	defineProps<{
-		initiallyCollapsed?: boolean
 		expandText?: string
 		collapseText?: string
+		collapsedHeight?: string
+		gradientTo?: string
 	}>(),
 	{
-		initiallyCollapsed: true,
 		expandText: 'Expand',
 		collapseText: 'Collapse',
+		collapsedHeight: '8rem',
+		gradientTo: 'to-surface-2',
 	},
 )
 
-const isCollapsed = ref(props.initiallyCollapsed)
+const collapsed = defineModel<boolean>('collapsed', { default: true })
+</script>
 
-function toggleCollapsed() {
-	isCollapsed.value = !isCollapsed.value
+<style scoped>
+.collapsible-region-content {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows 0.3s linear;
 }
 
-function setCollapsed(value: boolean) {
-	isCollapsed.value = value
+@media (prefers-reduced-motion) {
+	.collapsible-region-content {
+		transition: none !important;
+	}
 }
 
-defineExpose({
-	isCollapsed,
-	setCollapsed,
-	toggleCollapsed,
-})
-</script>
-
-<style lang="scss" scoped>
-.content-disabled {
-	pointer-events: none;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-
-	:deep(*) {
-		pointer-events: none !important;
-		user-select: none !important;
-		-webkit-user-select: none !important;
-		-moz-user-select: none !important;
-		-ms-user-select: none !important;
-	}
+.collapsible-region-content.open {
+	grid-template-rows: 1fr;
+}
 
-	:deep(button),
-	:deep(input),
-	:deep(textarea),
-	:deep(select),
-	:deep(a),
-	:deep([tabindex]) {
-		tabindex: -1 !important;
-	}
+.collapsible-region-content > div {
+	overflow: hidden;
+	min-height: var(--collapsed-height);
+	transition: min-height 0.3s linear;
+}
 
-	:deep(*:focus) {
-		outline: none !important;
-	}
+.collapsible-region-content.open > div {
+	min-height: 0;
 }
 </style>
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 7c156f0a88..41954c1773 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -4,7 +4,7 @@
 			ref="triggerRef"
 			role="button"
 			tabindex="0"
-			class="max-h-[36px] relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
+			class="relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
 			:class="[
 				triggerClasses,
 				{
@@ -129,7 +129,7 @@ import {
 	watch,
 } from 'vue'
 
-export interface DropdownOption<T> {
+export interface ComboboxOption<T> {
 	value: T
 	label: string
 	icon?: Component
@@ -145,19 +145,19 @@ const DROPDOWN_VIEWPORT_MARGIN = 8
 const DEFAULT_MAX_HEIGHT = 300
 
 function isDropdownOption<T>(
-	opt: DropdownOption<T> | { type: 'divider' },
-): opt is DropdownOption<T> {
+	opt: ComboboxOption<T> | { type: 'divider' },
+): opt is ComboboxOption<T> {
 	return 'value' in opt
 }
 
-function isDivider<T>(opt: DropdownOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
+function isDivider<T>(opt: ComboboxOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
 	return opt.type === 'divider'
 }
 
 const props = withDefaults(
 	defineProps<{
 		modelValue?: T
-		options: (DropdownOption<T> | { type: 'divider' })[]
+		options: (ComboboxOption<T> | { type: 'divider' })[]
 		placeholder?: string
 		disabled?: boolean
 		searchable?: boolean
@@ -187,7 +187,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
 	'update:modelValue': [value: T]
-	select: [option: DropdownOption<T>]
+	select: [option: ComboboxOption<T>]
 	open: []
 	close: []
 	searchInput: [query: string]
@@ -204,6 +204,7 @@ const dropdownRef = ref<HTMLElement>()
 const searchInputRef = ref<HTMLInputElement>()
 const optionsContainerRef = ref<HTMLElement>()
 const optionRefs = ref<(HTMLElement | null)[]>([])
+const rafId = ref<number | null>(null)
 
 const dropdownStyle = ref({
 	top: '0px',
@@ -225,9 +226,9 @@ const triggerClasses = computed(() => {
 	return classes
 })
 
-const selectedOption = computed<DropdownOption<T> | undefined>(() => {
+const selectedOption = computed<ComboboxOption<T> | undefined>(() => {
 	return props.options.find(
-		(opt): opt is DropdownOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
+		(opt): opt is ComboboxOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
 	)
 })
 
@@ -259,7 +260,7 @@ const filteredOptions = computed(() => {
 const shouldRoundBottomCorners = computed(() => isOpen.value && openDirection.value === 'down')
 const shouldRoundTopCorners = computed(() => isOpen.value && openDirection.value === 'up')
 
-function getOptionClasses(item: DropdownOption<T> & { key: string }, index: number) {
+function getOptionClasses(item: ComboboxOption<T> & { key: string }, index: number) {
 	return [
 		item.class,
 		{
@@ -368,11 +369,13 @@ async function openDropdown() {
 
 	setInitialFocus()
 	focusSearchInput()
+	startPositionTracking()
 }
 
 function closeDropdown() {
 	if (!isOpen.value) return
 
+	stopPositionTracking()
 	isOpen.value = false
 	searchQuery.value = ''
 	focusedIndex.value = -1
@@ -391,7 +394,7 @@ function handleTriggerClick() {
 	}
 }
 
-function handleOptionClick(option: DropdownOption<T>, index: number) {
+function handleOptionClick(option: ComboboxOption<T>, index: number) {
 	if (option.disabled || option.type === 'divider') return
 
 	focusedIndex.value = index
@@ -514,6 +517,21 @@ function handleWindowResize() {
 	}
 }
 
+function startPositionTracking() {
+	function track() {
+		updateDropdownPosition()
+		rafId.value = requestAnimationFrame(track)
+	}
+	rafId.value = requestAnimationFrame(track)
+}
+
+function stopPositionTracking() {
+	if (rafId.value !== null) {
+		cancelAnimationFrame(rafId.value)
+		rafId.value = null
+	}
+}
+
 onClickOutside(
 	dropdownRef,
 	() => {
@@ -528,6 +546,7 @@ onMounted(() => {
 
 onUnmounted(() => {
 	window.removeEventListener('resize', handleWindowResize)
+	stopPositionTracking()
 })
 
 watch(isOpen, (value) => {
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index e123b2033b..71ae8c6400 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -13,6 +13,7 @@ export { default as Checkbox } from './Checkbox.vue'
 export { default as Chips } from './Chips.vue'
 export { default as Collapsible } from './Collapsible.vue'
 export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
+export type { ComboboxOption } from './Combobox.vue'
 export { default as Combobox } from './Combobox.vue'
 export { default as ContentPageHeader } from './ContentPageHeader.vue'
 export { default as CopyCode } from './CopyCode.vue'
diff --git a/packages/ui/src/components/billing/FormattedPaymentMethod.vue b/packages/ui/src/components/billing/FormattedPaymentMethod.vue
index d8e9d68ac8..cd452c48c9 100644
--- a/packages/ui/src/components/billing/FormattedPaymentMethod.vue
+++ b/packages/ui/src/components/billing/FormattedPaymentMethod.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { CardIcon, CurrencyIcon, PayPalIcon, UnknownIcon } from '@modrinth/assets'
 import { useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'
 
-import { commonMessages, paymentMethodMessages } from '../../utils'
+import { commonMessages, getPaymentMethodIcon, paymentMethodMessages } from '../../utils'
 
 const { formatMessage } = useVIntl()
 defineProps<{
@@ -13,10 +12,7 @@ defineProps<{
 
 <template>
 	<template v-if="'type' in method">
-		<CardIcon v-if="method.type === 'card'" class="size-[1.5em]" />
-		<CurrencyIcon v-else-if="method.type === 'cashapp'" class="size-[1.5em]" />
-		<PayPalIcon v-else-if="method.type === 'paypal'" class="size-[1.5em]" />
-		<UnknownIcon v-else class="size-[1.5em]" />
+		<component :is="getPaymentMethodIcon(method.type)" class="size-[1.5em]" />
 		<span v-if="method.type === 'card' && 'card' in method && method.card">
 			{{
 				formatMessage(commonMessages.paymentMethodCardDisplay, {
diff --git a/packages/ui/src/components/nav/PagewideBanner.vue b/packages/ui/src/components/nav/PagewideBanner.vue
index 2e4d44ab59..913fb1ec42 100644
--- a/packages/ui/src/components/nav/PagewideBanner.vue
+++ b/packages/ui/src/components/nav/PagewideBanner.vue
@@ -8,12 +8,7 @@
 				iconClasses[variant],
 			]"
 		>
-			<IssuesIcon
-				v-if="variant === 'warning' || variant === 'error'"
-				aria-hidden="true"
-				class="w-6 h-6 flex-shrink-0"
-			/>
-			<InfoIcon v-if="variant === 'info'" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
+			<component :is="getSeverityIcon(variant)" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
 			<slot name="title" />
 		</div>
 
@@ -32,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { InfoIcon, IssuesIcon } from '@modrinth/assets'
+import { getSeverityIcon } from '../../utils'
 
 defineProps<{
 	variant: 'error' | 'warning' | 'info'
diff --git a/packages/ui/src/components/project/ProjectStatusBadge.vue b/packages/ui/src/components/project/ProjectStatusBadge.vue
index 41d54f1794..ede844d961 100644
--- a/packages/ui/src/components/project/ProjectStatusBadge.vue
+++ b/packages/ui/src/components/project/ProjectStatusBadge.vue
@@ -3,22 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import {
-	ArchiveIcon,
-	CalendarIcon,
-	FileTextIcon,
-	GlobeIcon,
-	LinkIcon,
-	LockIcon,
-	UnknownIcon,
-	UpdatedIcon,
-	XIcon,
-} from '@modrinth/assets'
 import type { ProjectStatus } from '@modrinth/utils'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
-import type { Component } from 'vue'
 import { computed } from 'vue'
 
+import { PROJECT_STATUS_ICONS } from '../../utils'
 import Badge from '../base/SimpleBadge.vue'
 
 const props = defineProps<{
@@ -28,76 +17,66 @@ const props = defineProps<{
 const { formatMessage } = useVIntl()
 
 const metadata = computed(() => ({
-	icon: statusMetadata[props.status]?.icon ?? statusMetadata.unknown.icon,
+	icon: PROJECT_STATUS_ICONS[props.status] ?? PROJECT_STATUS_ICONS.unknown,
 	formattedName: formatMessage(statusMetadata[props.status]?.message ?? props.status),
 }))
 
-const statusMetadata: Record<ProjectStatus, { icon?: Component; message: MessageDescriptor }> = {
+const statusMetadata: Record<ProjectStatus, { message: MessageDescriptor }> = {
 	approved: {
-		icon: GlobeIcon,
 		message: defineMessage({
 			id: 'project.visibility.public',
 			defaultMessage: 'Public',
 		}),
 	},
 	unlisted: {
-		icon: LinkIcon,
 		message: defineMessage({
 			id: 'project.visibility.unlisted',
 			defaultMessage: 'Unlisted',
 		}),
 	},
 	withheld: {
-		icon: LinkIcon,
 		message: defineMessage({
 			id: 'project.visibility.unlisted-by-staff',
 			defaultMessage: 'Unlisted by staff',
 		}),
 	},
 	private: {
-		icon: LockIcon,
 		message: defineMessage({
 			id: 'project.visibility.private',
 			defaultMessage: 'Private',
 		}),
 	},
 	scheduled: {
-		icon: CalendarIcon,
 		message: defineMessage({
 			id: 'project.visibility.scheduled',
 			defaultMessage: 'Scheduled',
 		}),
 	},
 	draft: {
-		icon: FileTextIcon,
 		message: defineMessage({
 			id: 'project.visibility.draft',
 			defaultMessage: 'Draft',
 		}),
 	},
 	archived: {
-		icon: ArchiveIcon,
 		message: defineMessage({
 			id: 'project.visibility.archived',
 			defaultMessage: 'Archived',
 		}),
 	},
 	rejected: {
-		icon: XIcon,
 		message: defineMessage({
 			id: 'project.visibility.rejected',
 			defaultMessage: 'Rejected',
 		}),
 	},
 	processing: {
-		icon: UpdatedIcon,
 		message: defineMessage({
 			id: 'project.visibility.under-review',
 			defaultMessage: 'Under review',
 		}),
 	},
 	unknown: {
-		icon: UnknownIcon,
 		message: defineMessage({
 			id: 'project.visibility.unknown',
 			defaultMessage: 'Unknown',
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index dd4e335c37..5e75d51289 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -416,6 +416,9 @@
   "omorphia.component.badge.label.returned": {
     "defaultMessage": "Returned"
   },
+  "omorphia.component.badge.label.safe": {
+    "defaultMessage": "Pass"
+  },
   "omorphia.component.badge.label.scheduled": {
     "defaultMessage": "Scheduled"
   },
@@ -425,6 +428,9 @@
   "omorphia.component.badge.label.unlisted": {
     "defaultMessage": "Unlisted"
   },
+  "omorphia.component.badge.label.unsafe": {
+    "defaultMessage": "Fail"
+  },
   "omorphia.component.badge.label.withheld": {
     "defaultMessage": "Withheld"
   },
diff --git a/packages/ui/src/utils/auto-icons.ts b/packages/ui/src/utils/auto-icons.ts
new file mode 100644
index 0000000000..8c3de0dca7
--- /dev/null
+++ b/packages/ui/src/utils/auto-icons.ts
@@ -0,0 +1,201 @@
+import {
+	ArchiveIcon,
+	BoxIcon,
+	BracesIcon,
+	CalendarIcon,
+	CardIcon,
+	CurrencyIcon,
+	FileArchiveIcon,
+	FileCodeIcon,
+	FileIcon,
+	FileImageIcon,
+	FileTextIcon,
+	FolderOpenIcon,
+	GithubIcon,
+	GlassesIcon,
+	GlobeIcon,
+	InfoIcon,
+	IssuesIcon,
+	LinkIcon,
+	LockIcon,
+	PackageOpenIcon,
+	PaintbrushIcon,
+	PayPalIcon,
+	PlugIcon,
+	PolygonIcon,
+	UnknownIcon,
+	UpdatedIcon,
+	USDCColorIcon,
+	XCircleIcon,
+	XIcon,
+} from '@modrinth/assets'
+import type { ProjectStatus, ProjectType } from '@modrinth/utils'
+import type { Component } from 'vue'
+
+export const PROJECT_TYPE_ICONS: Record<ProjectType, Component> = {
+	mod: BoxIcon,
+	modpack: PackageOpenIcon,
+	resourcepack: PaintbrushIcon,
+	shader: GlassesIcon,
+	plugin: PlugIcon,
+	datapack: BracesIcon,
+	project: BoxIcon,
+}
+
+export const PAYMENT_METHOD_ICONS: Record<string, Component> = {
+	card: CardIcon,
+	cashapp: CurrencyIcon,
+	paypal: PayPalIcon,
+}
+
+export const SOCIAL_PLATFORM_ICONS: Record<string, Component> = {
+	discord: GithubIcon,
+	github: GithubIcon,
+}
+
+export const SEVERITY_ICONS: Record<string, Component> = {
+	info: InfoIcon,
+	warning: IssuesIcon,
+	error: XCircleIcon,
+	critical: XCircleIcon,
+}
+
+export const PROJECT_STATUS_ICONS: Record<ProjectStatus, Component> = {
+	approved: GlobeIcon,
+	unlisted: LinkIcon,
+	withheld: LinkIcon,
+	private: LockIcon,
+	scheduled: CalendarIcon,
+	draft: FileTextIcon,
+	archived: ArchiveIcon,
+	rejected: XIcon,
+	processing: UpdatedIcon,
+	unknown: UnknownIcon,
+}
+
+export const DIRECTORY_ICONS: Record<string, Component> = {
+	config: FolderOpenIcon,
+	world: FolderOpenIcon,
+	resourcepacks: PaintbrushIcon,
+	_default: FolderOpenIcon,
+}
+
+const CURRENCY_CONFIG: Record<string, { icon: Component; color: string }> = {
+	usdc: { icon: USDCColorIcon, color: 'text-blue' },
+}
+
+const BLOCKCHAIN_CONFIG: Record<string, { icon: Component; color: string }> = {
+	polygon: { icon: PolygonIcon, color: 'text-purple' },
+}
+
+const CODE_EXTENSIONS: string[] = [
+	'json',
+	'json5',
+	'jsonc',
+	'java',
+	'kt',
+	'kts',
+	'sh',
+	'bat',
+	'ps1',
+	'yml',
+	'yaml',
+	'toml',
+	'js',
+	'ts',
+	'py',
+	'rb',
+	'php',
+	'html',
+	'css',
+	'cpp',
+	'c',
+	'h',
+	'rs',
+	'go',
+] as const
+
+const TEXT_EXTENSIONS: string[] = [
+	'txt',
+	'md',
+	'log',
+	'cfg',
+	'conf',
+	'properties',
+	'ini',
+	'sk',
+] as const
+const IMAGE_EXTENSIONS: string[] = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
+const ARCHIVE_EXTENSIONS: string[] = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
+
+export function getProjectTypeIcon(projectType: ProjectType): Component {
+	return PROJECT_TYPE_ICONS[projectType] ?? BoxIcon
+}
+
+export function getPaymentMethodIcon(method: string): Component {
+	return PAYMENT_METHOD_ICONS[method] ?? UnknownIcon
+}
+
+export function getSocialPlatformIcon(platform: string): Component {
+	return SOCIAL_PLATFORM_ICONS[platform.toLowerCase()] ?? UnknownIcon
+}
+
+export function getSeverityIcon(severity: string): Component {
+	return SEVERITY_ICONS[severity] ?? InfoIcon
+}
+
+export function getProjectStatusIcon(status: ProjectStatus): Component {
+	return PROJECT_STATUS_ICONS[status] ?? UnknownIcon
+}
+
+export function getDirectoryIcon(name: string): Component {
+	return DIRECTORY_ICONS[name.toLowerCase()] ?? DIRECTORY_ICONS._default
+}
+
+export function getFileExtensionIcon(extension: string): Component {
+	const ext: string = extension.toLowerCase()
+
+	if (CODE_EXTENSIONS.includes(ext)) {
+		return FileCodeIcon
+	}
+	if (TEXT_EXTENSIONS.includes(ext)) {
+		return FileTextIcon
+	}
+	if (IMAGE_EXTENSIONS.includes(ext)) {
+		return FileImageIcon
+	}
+	if (ARCHIVE_EXTENSIONS.includes(ext)) {
+		return FileArchiveIcon
+	}
+
+	return FileIcon
+}
+
+export function getFileIcon(fileName: string): Component {
+	const extension = fileName.split('.').pop()?.toLowerCase() || ''
+	return getFileExtensionIcon(extension)
+}
+
+export function getCurrencyIcon(currency: string): Component | null {
+	const lower = currency.toLowerCase()
+	const key = Object.keys(CURRENCY_CONFIG).find((k) => lower.includes(k))
+	return key ? CURRENCY_CONFIG[key].icon : null
+}
+
+export function getCurrencyColor(currency: string): string {
+	const lower = currency.toLowerCase()
+	const key = Object.keys(CURRENCY_CONFIG).find((k) => lower.includes(k))
+	return key ? CURRENCY_CONFIG[key].color : 'text-contrast'
+}
+
+export function getBlockchainIcon(blockchain: string): Component | null {
+	const lower = blockchain.toLowerCase()
+	const key = Object.keys(BLOCKCHAIN_CONFIG).find((k) => lower.includes(k))
+	return key ? BLOCKCHAIN_CONFIG[key].icon : null
+}
+
+export function getBlockchainColor(blockchain: string): string {
+	const lower = blockchain.toLowerCase()
+	const key = Object.keys(BLOCKCHAIN_CONFIG).find((k) => lower.includes(k))
+	return key ? BLOCKCHAIN_CONFIG[key].color : 'text-contrast'
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 85802d45c6..6d77f1b6aa 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './auto-icons'
 export * from './common-messages'
 export * from './game-modes'
 export * from './notices'
diff --git a/packages/utils/highlightjs/index.ts b/packages/utils/highlightjs/index.ts
index c8e7ba5c32..dbfbae0892 100644
--- a/packages/utils/highlightjs/index.ts
+++ b/packages/utils/highlightjs/index.ts
@@ -55,6 +55,8 @@ hljs.registerAliases(['toml'], { languageName: 'ini' })
 hljs.registerAliases(['yml'], { languageName: 'yaml' })
 hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], { languageName: 'xml' })
 
+export { hljs }
+
 export const renderHighlightedString = (string) =>
 	configuredXss.process(
 		md({
@@ -71,3 +73,34 @@ export const renderHighlightedString = (string) =>
 			},
 		}).render(string),
 	)
+
+export const highlightCodeLines = (code: string, language: string): string[] => {
+	if (!code) return []
+
+	if (!hljs.getLanguage(language)) {
+		return code.split('\n')
+	}
+
+	try {
+		const highlighted = hljs.highlight(code, { language }).value
+		const openTags: string[] = []
+
+		const processedHtml = highlighted.replace(/(<span [^>]+>)|(<\/span>)|(\n)/g, (match) => {
+			if (match === '\n') {
+				return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
+			}
+
+			if (match === '</span>') {
+				openTags.pop()
+			} else {
+				openTags.push(match)
+			}
+
+			return match
+		})
+
+		return processedHtml.split('\n')
+	} catch {
+		return code.split('\n')
+	}
+}
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index 6bb2fdd231..b536d89b11 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -134,11 +134,29 @@ export const formatWallet = (name) => {
 	return capitalizeString(name)
 }
 
-export const formatProjectType = (name) => {
+export const formatProjectType = (name, short = false) => {
+	if (short) {
+		if (name === 'resourcepack') {
+			return 'RPK'
+		} else if (name === 'mod') {
+			return 'MOD'
+		} else if (name === 'modpack') {
+			return 'MPK'
+		} else if (name === 'shader') {
+			return 'SHD'
+		} else if (name === 'plugin') {
+			return 'PLG'
+		} else if (name === 'datapack') {
+			return 'DPK'
+		}
+	}
+
 	if (name === 'resourcepack') {
 		return 'Resource Pack'
 	} else if (name === 'datapack') {
 		return 'Data Pack'
+	} else if (name === 'modpack') {
+		return 'Modpack'
 	}
 
 	return capitalizeString(name)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e864f67a52..426871fb39 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -479,6 +479,9 @@ importers:
 
   packages/moderation:
     dependencies:
+      '@modrinth/api-client':
+        specifier: workspace:*
+        version: link:../api-client
       '@modrinth/assets':
         specifier: workspace:*
         version: link:../assets