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..42c8b80de0
--- /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 @click="emit('cancel-scan')" class="!px-4">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/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/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 895099a780..b813f87385 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -1,126 +1,123 @@
 <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>
+		<div class="rounded-t-3xl 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="whitespace-nowrap rounded-full bg-button-bg px-2 py-0.5 align-middle text-xs font-semibold text-secondary"
+						>
+							{{ 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}`"
+							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" />
+			<hr class="my-4 border-t border-divider" />
 
-		<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="reportItemAvatarUrl"
-						:circle="report.item_type === 'user'"
-						size="3rem"
-						class="flex-shrink-0"
-					/>
-					<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"
-							>
-								<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>
-
-							<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"
+			<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="reportItemAvatarUrl"
+							:circle="report.item_type === 'user'"
+							size="3rem"
+							class="flex-shrink-0"
+						/>
+						<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"
 								>
-									{{
-										report.version.files.find((file) => file.primary)?.filename || 'Unknown Version'
-									}}
-								</span>
+									<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>
+
+								<div class="flex flex-wrap items-center gap-2">
+									<span
+										class="whitespace-nowrap rounded-full bg-button-bg px-2 py-0.5 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'
+										}}
+									</span>
+								</div>
 							</div>
 						</div>
 					</div>
-				</div>
 
-				<div class="flex justify-end sm:justify-start">
-					<ButtonStyled circular>
-						<nuxt-link :to="reportItemUrl">
-							<EyeIcon />
-						</nuxt-link>
-					</ButtonStyled>
+					<div class="flex justify-end sm:justify-start">
+						<ButtonStyled circular>
+							<nuxt-link :to="reportItemUrl">
+								<EyeIcon class="size-4" />
+							</nuxt-link>
+						</ButtonStyled>
+					</div>
 				</div>
 			</div>
 		</div>
-
-		<CollapsibleRegion ref="collapsibleRegion" class="my-4">
+		<div class="border-1 bg-surface-l2 rounded-b-3xl border-solid border-bg-raised p-4">
 			<ReportThread
 				v-if="report.thread"
 				ref="reportThread"
@@ -130,7 +127,7 @@
 				:reporter="report.reporter_user"
 				@update-thread="updateThread"
 			/>
-		</CollapsibleRegion>
+		</div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -141,11 +138,7 @@ import {
 	LinkIcon,
 	OrganizationIcon,
 } from '@modrinth/assets'
-import {
-	type ExtendedReport,
-	reportQuickReplies,
-	type ReportQuickReply,
-} from '@modrinth/moderation'
+import { type ExtendedReport, type ReportQuickReply } from '@modrinth/moderation'
 import {
 	Avatar,
 	ButtonStyled,
@@ -157,7 +150,6 @@ import {
 } from '@modrinth/ui'
 import { computed } from 'vue'
 
-import ChevronDownIcon from '../servers/icons/ChevronDownIcon.vue'
 import ReportThread from '../thread/ReportThread.vue'
 
 const { addNotification } = injectNotificationManager()
@@ -206,25 +198,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
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..9817e088d4
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { CheckIcon, MoreVerticalIcon, ScanEyeIcon, XIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+import type { DelphiIssueResult } from '~/helpers/tech-review.dummy'
+
+const props = defineProps<{
+	item: DelphiIssueResult
+}>()
+
+type Tab = 'Thread' | 'Files'
+const tabs: readonly Tab[] = ['Thread', 'Files']
+const currentTab = ref<Tab>('Thread')
+
+const severityColor = computed(() => {
+	switch (props.item.report.severity) {
+		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-blue bg-highlight-blue border-solid border-[1px] border-blue'
+		case 'LOW':
+		default:
+			return 'text-green bg-highlight-green border-solid border-[1px] border-green'
+	}
+})
+
+const createdAt = computed(() => new Date(props.item.report.created).toLocaleDateString())
+</script>
+
+<template>
+	<div
+		class="overflow-hidden rounded-2xl border-[1px] border-solid border-surface-l4 bg-surface-l3"
+	>
+		<div class="flex flex-col gap-4 bg-surface-l3 p-4 pb-0">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-4">
+					<Avatar
+						src="https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp"
+						class="border-[1px] border-solid border-surface-l5 bg-surface-l4"
+						size="4rem"
+					/>
+
+					<div class="flex flex-col gap-1">
+						<div class="flex items-center gap-2">
+							<span class="my-auto text-xl font-semibold text-contrast">Sodium</span>
+							<div
+								class="flex items-center gap-1 rounded-full border-[1px] border-solid border-surface-l5 bg-surface-l4 px-2.5 py-1"
+							>
+								<div class="h-4 w-4 rounded-full bg-surface-l5"></div>
+								<span class="text-sm font-medium text-secondary">MPK</span>
+							</div>
+
+							<div
+								class="rounded-full border-[1px] border-solid border-surface-l5 bg-surface-l4 px-2.5 py-1"
+							>
+								<span class="text-sm font-medium text-secondary">Auto-Flagged</span>
+							</div>
+
+							<div
+								class="rounded-full border-[1px] border-solid px-2.5 py-1"
+								:class="severityColor"
+							>
+								<span class="text-sm font-medium">{{
+									item.report.severity.charAt(0) + item.report.severity.slice(1).toLowerCase()
+								}}</span>
+							</div>
+						</div>
+
+						<div class="flex items-center gap-1">
+							<Avatar
+								src="https://cdn.modrinth.com/user/TEZXhE2U/f4705a5f2388c65029ae2e59f1434b3e6e4de23a.png"
+								class="border-[1px] border-solid border-surface-l5 bg-surface-l4"
+								size="1.5rem"
+								circle
+							/>
+							<span class="text-sm font-medium text-secondary">JellySquid</span>
+						</div>
+					</div>
+				</div>
+
+				<div class="flex items-center gap-3">
+					<span class="text-base text-secondary">{{ createdAt }}</span>
+					<div class="flex items-center gap-2">
+						<ButtonStyled circular color="green">
+							<button><CheckIcon /></button>
+						</ButtonStyled>
+
+						<ButtonStyled circular color="red">
+							<button><XIcon /></button>
+						</ButtonStyled>
+
+						<ButtonStyled>
+							<button>
+								<ScanEyeIcon />
+								<span class="font-semibold">Scan</span>
+							</button>
+						</ButtonStyled>
+
+						<ButtonStyled circular>
+							<button>
+								<MoreVerticalIcon />
+							</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</div>
+
+			<div class="h-[1px] w-full bg-surface-l5" />
+
+			<div class="flex items-center">
+				<div
+					v-for="tab in tabs"
+					:key="tab"
+					class="cursor-pointer border-2 border-solid border-transparent px-4 pb-3 pt-2 text-base font-semibold transition-colors"
+					:class="{
+						'border-b-contrast text-contrast': currentTab === tab,
+						'border-b-transparent text-secondary': currentTab !== tab,
+					}"
+					@click="currentTab = tab"
+				>
+					{{ tab }}
+				</div>
+			</div>
+		</div>
+
+		<div class="min-h-[200px] border-t border-surface-l3 bg-surface-l2 p-4">
+			<div v-if="currentTab === 'Thread'" class="flex min-h-[200px] items-center justify-center">
+				<div class="text-center text-secondary">
+					<p class="mt-1 text-sm">TBD</p>
+				</div>
+			</div>
+
+			<div v-else class="flex min-h-[200px] items-center justify-center">
+				<div class="text-center text-secondary">
+					<p class="mt-1 text-sm">TBD</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/frontend/src/components/ui/thread/ReportThread.vue b/apps/frontend/src/components/ui/thread/ReportThread.vue
index 7053f8e9e9..6c6483afc4 100644
--- a/apps/frontend/src/components/ui/thread/ReportThread.vue
+++ b/apps/frontend/src/components/ui/thread/ReportThread.vue
@@ -1,14 +1,11 @@
 <template>
 	<div>
-		<div v-if="flags.developerMode" class="mb-4 font-bold text-heading">
+		<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="bg-raised flex flex-col space-y-4 rounded-xl p-3 sm:p-4"
-		>
+		<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"
@@ -74,11 +71,15 @@
 							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>
+							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">
@@ -89,8 +90,7 @@
 								@click="closeReport(true)"
 							>
 								<CheckCircleIcon class="size-4" />
-								<span class="hidden sm:inline">Close with reply</span>
-								<span class="sm:hidden">Close & reply</span>
+								Reply and close
 							</button>
 						</ButtonStyled>
 						<ButtonStyled v-else color="red" class="w-full sm:w-auto">
@@ -110,24 +110,63 @@
 </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 { CheckCircleIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
+import {
+	reportQuickReplies,
+	type ExtendedReport,
+	type ReportQuickReply,
+} from '@modrinth/moderation'
+import {
+	ButtonStyled,
+	CopyCode,
+	injectNotificationManager,
+	MarkdownEditor,
+	OverflowMenu,
+	type OverflowMenuOption,
+} from '@modrinth/ui'
+import type { 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'
 
+import ChevronDownIcon from '../servers/icons/ChevronDownIcon.vue'
+
 const { addNotification } = injectNotificationManager()
 
+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,
+		)
+})
+
 const props = defineProps<{
 	thread: Thread
 	reporter: User
-	report: Report
+	report: ExtendedReport
 }>()
 
+async function handleQuickReply(reply: ReportQuickReply) {
+	const message =
+		typeof reply.message === 'function' ? await reply.message(props.report) : reply.message
+
+	await nextTick()
+	setReplyContent(message)
+}
+
 defineExpose({
 	setReplyContent,
 })
diff --git a/apps/frontend/src/helpers/tech-review.dummy.ts b/apps/frontend/src/helpers/tech-review.dummy.ts
new file mode 100644
index 0000000000..852e1f719b
--- /dev/null
+++ b/apps/frontend/src/helpers/tech-review.dummy.ts
@@ -0,0 +1,105 @@
+// Dummy data for the technical review queue, used when backend is unavailable
+
+export type DelphiReportSeverity = 'LOW' | 'MEDIUM' | 'HIGH' | 'SEVERE'
+export type DelphiReportIssueStatus = 'pending' | 'approved' | 'rejected'
+
+export interface DelphiIssueJavaClass {
+	id: number
+	issue_id: number
+	internal_class_name: string
+	decompiled_source?: string | null
+}
+
+export interface DelphiReportSummary {
+	id: number
+	file_id?: number | null
+	delphi_version: number
+	artifact_url: string
+	created: string // ISO date
+	severity: DelphiReportSeverity
+}
+
+export interface DelphiIssueSummary {
+	id: number
+	report_id: number
+	issue_type: string
+	status: DelphiReportIssueStatus
+}
+
+export interface DelphiIssueResult {
+	issue: DelphiIssueSummary
+	report: DelphiReportSummary
+	java_classes: DelphiIssueJavaClass[]
+	project_id?: number | null
+	project_published?: string | null
+}
+
+export const DUMMY_ISSUE_TYPES: string[] = [
+	'reflection_indirection',
+	'xor_obfuscation',
+	'included_libraries',
+	'suspicious_binaries',
+	'corrupt_classes',
+	'suspicious_classes',
+	'url_usage',
+	'classloader_usage',
+	'processbuilder_usage',
+	'runtime_exec_usage',
+	'jni_usage',
+	'main_method',
+	'native_loading',
+	'malformed_jar',
+	'nested_jar_too_deep',
+	'failed_decompilation',
+	'analysis_failure',
+	'malware_easyforme',
+	'malware_simplyloader',
+]
+
+export const DUMMY_ISSUES: DelphiIssueResult[] = [
+	{
+		issue: {
+			id: 1001,
+			report_id: 501,
+			issue_type: 'suspicious_classes',
+			status: 'pending',
+		},
+		report: {
+			id: 501,
+			file_id: 90001,
+			delphi_version: 47,
+			artifact_url: 'https://cdn.modrinth.com/data/abc/versions/1.0.0.jar',
+			created: new Date(Date.now() - 3 * 24 * 3600 * 1000).toISOString(),
+			severity: 'SEVERE',
+		},
+		java_classes: [
+			{
+				id: 7001,
+				issue_id: 1001,
+				internal_class_name: 'com/example/Suspect',
+				decompiled_source: 'public class Suspect { /* ... */ }',
+			},
+		],
+		project_id: 123456,
+		project_published: new Date(Date.now() - 30 * 24 * 3600 * 1000).toISOString(),
+	},
+	{
+		issue: {
+			id: 1002,
+			report_id: 502,
+			issue_type: 'url_usage',
+			status: 'pending',
+		},
+		report: {
+			id: 502,
+			file_id: 90002,
+			delphi_version: 47,
+			artifact_url: 'https://cdn.modrinth.com/data/def/versions/2.3.4.jar',
+			created: new Date(Date.now() - 1 * 24 * 3600 * 1000).toISOString(),
+			severity: 'HIGH',
+		},
+		java_classes: [],
+		project_id: 789012,
+		project_published: new Date(Date.now() - 45 * 24 * 3600 * 1000).toISOString(),
+	},
+]
diff --git a/apps/frontend/src/helpers/tech-review.ts b/apps/frontend/src/helpers/tech-review.ts
new file mode 100644
index 0000000000..7a6e58fc6c
--- /dev/null
+++ b/apps/frontend/src/helpers/tech-review.ts
@@ -0,0 +1,49 @@
+import { DUMMY_ISSUE_TYPES, DUMMY_ISSUES, type DelphiIssueResult } from './tech-review.dummy'
+
+// TODO: @modrinth/api-client package
+
+export type OrderBy =
+	| 'created_asc'
+	| 'created_desc'
+	| 'pending_status_first'
+	| 'severity_asc'
+	| 'severity_desc'
+
+export interface FetchIssuesParams {
+	type?: string | null
+	status?: 'pending' | 'approved' | 'rejected' | null
+	order_by?: OrderBy | null
+	count?: number
+	offset?: number
+}
+
+export async function fetchIssueTypeSchema(): Promise<string[]> {
+	try {
+		const schema = await useBaseFetch('internal/delphi/issue_type/schema', { internal: true })
+		// Expecting a JSON object map of type -> metadata; return its keys
+		if (schema && typeof schema === 'object') {
+			return Object.keys(schema as Record<string, unknown>)
+		}
+		return DUMMY_ISSUE_TYPES
+	} catch {
+		return DUMMY_ISSUE_TYPES
+	}
+}
+
+export async function fetchDelphiIssues(params: FetchIssuesParams): Promise<DelphiIssueResult[]> {
+	const query = new URLSearchParams()
+	if (params.type) query.set('type', params.type)
+	if (params.status) query.set('status', params.status)
+	if (params.order_by) query.set('order_by', params.order_by)
+	if (params.count != null) query.set('count', String(params.count))
+	if (params.offset != null) query.set('offset', String(params.offset))
+
+	return DUMMY_ISSUES
+
+	// try {
+	// 	const res = await useBaseFetch(`internal/delphi/issues?${query.toString()}`, { internal: true })
+	// 	return (res as any[]) || []
+	// } catch {
+	// 	return DUMMY_ISSUES
+	// }
+}
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..4f1b739e5d 100644
--- a/apps/frontend/src/pages/moderation/technical-review.vue
+++ b/apps/frontend/src/pages/moderation/technical-review.vue
@@ -1,3 +1,290 @@
+<script setup lang="ts">
+import {
+	FilterIcon,
+	SearchIcon,
+	ShieldAlertIcon,
+	SortAscIcon,
+	SortDescIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { Button, ButtonStyled, DropdownSelect, Pagination } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import Fuse from 'fuse.js'
+import BatchScanProgressAlert, {
+	type BatchScanProgress,
+} from '~/components/ui/moderation/BatchScanProgressAlert.vue'
+import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
+import { fetchDelphiIssues, fetchIssueTypeSchema, type OrderBy } from '~/helpers/tech-review'
+
+type TechReviewItem = Awaited<ReturnType<typeof fetchDelphiIssues>>[number]
+const reviewItems = ref<TechReviewItem[]>([])
+
+const currentPage = ref(1)
+const itemsPerPage = 15
+const { formatMessage } = useVIntl()
+const route = useRoute()
+const router = useRouter()
+
+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 rawIssueTypes = ref<string[] | null>(null)
+const filterTypes = computed<readonly string[]>(() => {
+	const base: string[] = ['All issues']
+	if (rawIssueTypes.value && rawIssueTypes.value.length) base.push(...rawIssueTypes.value)
+	return base
+})
+
+const currentSortType = ref('Oldest')
+const sortTypes: readonly string[] = readonly([
+	'Oldest',
+	'Newest',
+	'Pending first',
+	'Severity ↑',
+	'Severity ↓',
+])
+
+const fuse = computed(() => {
+	if (!reviewItems.value || reviewItems.value.length === 0) return null
+	return new Fuse(reviewItems.value, {
+		keys: [
+			{ name: 'issue.issue_type', weight: 3 },
+			{ name: 'report.artifact_url', weight: 2 },
+			{ name: 'java_classes.internal_class_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 as TechReviewItem)
+})
+
+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((it) => it.issue.issue_type === type)
+})
+
+const filteredItems = computed(() => {
+	const filtered = [...typeFiltered.value]
+
+	switch (currentSortType.value) {
+		case 'Oldest':
+			filtered.sort(
+				(a, b) => new Date(a.report.created).getTime() - new Date(b.report.created).getTime(),
+			)
+			break
+		case 'Newest':
+			filtered.sort(
+				(a, b) => new Date(b.report.created).getTime() - new Date(a.report.created).getTime(),
+			)
+			break
+		case 'Pending first': {
+			const p = (s: string) => (s === 'pending' ? 0 : 1)
+			filtered.sort((a, b) => p(a.issue.status) - p(b.issue.status))
+			break
+		}
+		case 'Severity ↑': {
+			const order = { LOW: 0, MEDIUM: 1, HIGH: 2, SEVERE: 3 } as Record<string, number>
+			filtered.sort((a, b) => (order[a.report.severity] ?? 0) - (order[b.report.severity] ?? 0))
+			break
+		}
+		case 'Severity ↓': {
+			const order = { LOW: 0, MEDIUM: 1, HIGH: 2, SEVERE: 3 } as Record<string, number>
+			filtered.sort((a, b) => (order[b.report.severity] ?? 0) - (order[a.report.severity] ?? 0))
+			break
+		}
+	}
+
+	return filtered
+})
+
+const totalPages = computed(() => Math.ceil((filteredItems.value?.length || 0) / itemsPerPage))
+const paginatedItems = computed(() => {
+	if (!filteredItems.value) return []
+	const start = (currentPage.value - 1) * itemsPerPage
+	const end = start + itemsPerPage
+	return filteredItems.value.slice(start, end)
+})
+function goToPage(page: number) {
+	currentPage.value = page
+}
+
+function toOrderBy(label: string): OrderBy | null {
+	switch (label) {
+		case 'Oldest':
+			return 'created_asc'
+		case 'Newest':
+			return 'created_desc'
+		case 'Pending first':
+			return 'pending_status_first'
+		case 'Severity ↑':
+			return 'severity_asc'
+		case 'Severity ↓':
+			return 'severity_desc'
+		default:
+			return null
+	}
+}
+
+onMounted(async () => {
+	rawIssueTypes.value = await fetchIssueTypeSchema()
+	const order_by = toOrderBy(currentSortType.value)
+	reviewItems.value = await fetchDelphiIssues({ count: 350, offset: 0, order_by })
+})
+
+watch(currentFilterType, async (val) => {
+	const type = val === 'All issues' ? null : val
+	const order_by = toOrderBy(currentSortType.value)
+	reviewItems.value = await fetchDelphiIssues({ type, count: 350, offset: 0, order_by })
+	goToPage(1)
+})
+
+watch(currentSortType, async (val) => {
+	const type = currentFilterType.value === 'All issues' ? null : currentFilterType.value
+	const order_by = toOrderBy(val)
+	reviewItems.value = await fetchDelphiIssues({ type, count: 350, offset: 0, order_by })
+	goToPage(1)
+})
+
+// TODO: Live way to update this via the backend, polling?
+const batchScanProgressInformation = computed<BatchScanProgress | undefined>(() => {
+	return {
+		total: 58,
+		complete: 20,
+	}
+})
+</script>
+
 <template>
-	<p>Not yet implemented.</p>
+	<div class="flex flex-col gap-6">
+		<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-[40px]"
+					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">
+				<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="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 }} ({{ filteredItems.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="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>
+
+				<ButtonStyled color="orange">
+					<button><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="paginatedItems.length === 0" class="universal-card h-24 animate-pulse"></div>
+			<div v-else v-for="(item, idx) in paginatedItems" :key="item.issue.id ?? idx" class="">
+				<ModerationTechRevCard :item="item" />
+			</div>
+		</div>
+
+		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
+			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+		</div>
+	</div>
 </template>
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
index 8ecce39e94..4f776ccebc 100644
--- a/apps/frontend/tailwind.config.ts
+++ b/apps/frontend/tailwind.config.ts
@@ -14,6 +14,13 @@ const config: Config = {
 	theme: {
 		extend: {
 			colors: {
+				surface: {
+					l1: 'var(--surface-l1)',
+					l2: 'var(--surface-l2)',
+					l3: 'var(--surface-l3)',
+					l4: 'var(--surface-l4)',
+					l5: 'var(--surface-l5)',
+				},
 				icon: 'var(--color-base)',
 				// Text
 				primary: 'var(--color-base)',
@@ -29,13 +36,13 @@ const config: Config = {
 				blue: 'var(--color-blue)',
 				purple: 'var(--color-purple)',
 				bg: {
-					DEFAULT: 'var(--color-bg)',
+					DEFAULT: 'var(--surface-l1)', // var(--color-bg)
 					red: 'var(--color-red-bg)',
 					orange: 'var(--color-orange-bg)',
 					green: 'var(--color-green-bg)',
 					blue: 'var(--color-blue-bg)',
 					purple: 'var(--color-purple-bg)',
-					raised: 'var(--color-raised-bg)',
+					raised: 'var(--surface-l3)', // var(--color-raised-bg)
 				},
 				banners: {
 					error: {
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 4adb0cf0e4..ba9a84ef94 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -154,6 +154,7 @@ 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 _SignalIcon from './icons/signal.svg?component'
 import _SkullIcon from './icons/skull.svg?component'
 import _SlashIcon from './icons/slash.svg?component'
@@ -351,6 +352,7 @@ export const ServerPlusIcon = _ServerPlusIcon
 export const ServerIcon = _ServerIcon
 export const SettingsIcon = _SettingsIcon
 export const ShareIcon = _ShareIcon
+export const ShieldAlertIcon = _ShieldAlertIcon
 export const ShieldIcon = _ShieldIcon
 export const SignalIcon = _SignalIcon
 export const SkullIcon = _SkullIcon
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/styles/variables.scss b/packages/assets/styles/variables.scss
index 77f2407107..85574ed746 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -1,8 +1,15 @@
 .light-properties {
-	--color-bg: #ebebeb;
-	--color-raised-bg: #ffffff;
-	--color-super-raised-bg: #e9e9e9;
-	--color-button-bg: #f5f5f5;
+	--surface-l1: #ebebeb;
+	--surface-l2: #ffffff;
+	--surface-l3: #f5f5f5;
+	--surface-l4: #eeeeee;
+	--surface-l5: #e6e6e6;
+
+	--color-bg: var(--surface-l1);
+	--color-raised-bg: var(--surface-l3);
+	--color-super-raised-bg: var(--surface-l4);
+
+	--color-button-bg: var(--surface-l4);
 	--color-button-border: rgba(161, 161, 161, 0.35);
 	--color-scrollbar: #96a2b0;
 
@@ -133,10 +140,17 @@ html {
 .dark-mode,
 .dark,
 :root[data-theme='dark'] {
-	--color-bg: #16181c;
-	--color-raised-bg: #26292f;
-	--color-super-raised-bg: #40434a;
-	--color-button-bg: #33363d;
+	--surface-l1: #16181c;
+	--surface-l2: #1d1f23;
+	--surface-l3: #27292e;
+	--surface-l4: #34363c;
+	--surface-l5: #42444a;
+
+	--color-bg: var(--surface-l1);
+	--color-raised-bg: var(--surface-l3);
+	--color-super-raised-bg: var(--surface-l4);
+
+	--color-button-bg: var(--surface-l4);
 	--color-button-border: rgba(193, 190, 209, 0.12);
 	--color-scrollbar: var(--color-button-bg);
 
@@ -220,8 +234,12 @@ html {
 
 .oled-mode {
 	@extend .dark-mode;
-	--color-bg: #000000;
-	--color-raised-bg: #101013;
+	--surface-l1: #000000;
+	--surface-l2: #101013;
+	--surface-l3: #1b1b20;
+	--surface-l4: #25262b;
+	--surface-l5: #2e2f34;
+
 	--color-button-bg: #222329;
 
 	--color-ad: #0d1828;
diff --git a/packages/moderation/src/types/reports.ts b/packages/moderation/src/types/reports.ts
index c5e0c1e042..16122b6778 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
@@ -16,10 +16,6 @@ export interface ExtendedReport extends Report {
 	target?: OwnershipTarget
 }
 
-export interface ExtendedDelphiReport extends DelphiReport {
-	target?: OwnershipTarget
-}
-
 export interface ReportQuickReply {
 	label: string
 	message: string | ((report: ExtendedReport) => Promise<string> | string)
diff --git a/packages/ui/src/components/settings/ThemeSelector.vue b/packages/ui/src/components/settings/ThemeSelector.vue
index 32b496ec14..239115d23d 100644
--- a/packages/ui/src/components/settings/ThemeSelector.vue
+++ b/packages/ui/src/components/settings/ThemeSelector.vue
@@ -4,7 +4,7 @@ import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 
-defineProps<{
+const { updateColorTheme, currentTheme, themeOptions, systemThemeColor } = defineProps<{
 	updateColorTheme: (theme: T) => void
 	currentTheme: T
 	themeOptions: readonly T[]
@@ -53,6 +53,11 @@ const colorTheme = defineMessages({
 function asString(theme: T): string {
 	return theme
 }
+
+function getPreviewClass(option: T): string {
+	const base = option === 'system' ? systemThemeColor : option
+	return base.endsWith('-mode') ? base : `${base}-mode`
+}
 </script>
 
 <template>
@@ -64,7 +69,7 @@ function asString(theme: T): string {
 			:class="{ selected: currentTheme === option }"
 			@click="() => updateColorTheme(option)"
 		>
-			<div class="preview" :class="`${option === 'system' ? systemThemeColor : option}-mode`">
+			<div class="preview" :class="getPreviewClass(option)">
 				<div class="example-card card card">
 					<div class="example-icon"></div>
 					<div class="example-text-1"></div>
@@ -96,6 +101,24 @@ function asString(theme: T): string {
 	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 	gap: var(--gap-lg);
 
+	.preview {
+		&.light-mode {
+			@extend .light-mode;
+		}
+
+		&.dark-mode {
+			@extend .dark-mode;
+		}
+
+		&.oled-mode {
+			@extend .oled-mode;
+		}
+
+		&.retro-mode {
+			@extend .retro-mode;
+		}
+	}
+
 	.preview .example-card {
 		margin: 0;
 		padding: 1rem;
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index d57ba3dd56..9aeeda36d4 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -562,38 +562,3 @@ export interface Charge {
 export type SubscriptionMetadata =
 	| { type: 'pyro'; id: string; region?: string }
 	| { type: 'medal'; id: string }
-
-// Delphi
-export interface DelphiReport {
-	id: string
-	project: Project
-	version: Version
-	priority_score: number
-	detected_at: string
-	trace_type:
-		| 'reflection_indirection'
-		| 'xor_obfuscation'
-		| 'included_libraries'
-		| 'suspicious_binaries'
-		| 'corrupt_classes'
-		| 'suspicious_classes'
-		| 'url_usage'
-		| 'classloader_usage'
-		| 'processbuilder_usage'
-		| 'runtime_exec_usage'
-		| 'jni_usage'
-		| 'main_method'
-		| 'native_loading'
-		| 'malformed_jar'
-		| 'nested_jar_too_deep'
-		| 'failed_decompilation'
-		| 'analysis_failure'
-		| 'malware_easyforme'
-		| 'malware_simplyloader'
-	file_path: string
-	// pending = not reviewed yet.
-	// approved = approved as malicious, removed from modrinth
-	// rejected = not approved as malicious, remains on modrinth?
-	status: 'pending' | 'approved' | 'rejected'
-	content?: string
-}