diff --git a/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
index f5b1fea8a8..4db8da5d0e 100644
--- a/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
+++ b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ClipboardCopyIcon, LoaderCircleIcon, XIcon } from '@modrinth/assets'
+import { ClipboardCopyIcon, DownloadIcon, LoaderCircleIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, CopyCode, NewModal } from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'
 
@@ -38,15 +38,16 @@ async function fetchVersionHashes(versionIds: string[]) {
 			// TODO: switch to api-client once truman's vers stuff is merged
 			const version = (await useBaseFetch(`version/${versionId}`)) as {
 				files: Array<{
+					id?: string
 					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)
+				if (file.id) {
+					filesMap.set(file.id, file.hashes.sha512)
+				}
 			}
 			versionDataCache.value.set(versionId, { files: filesMap, loading: false })
 		} catch (error) {
@@ -60,8 +61,8 @@ async function fetchVersionHashes(versionIds: string[]) {
 	}
 }
 
-function getFileHash(versionId: string, fileName: string): string | undefined {
-	return versionDataCache.value.get(versionId)?.files.get(fileName)
+function getFileHash(versionId: string, fileId: string): string | undefined {
+	return versionDataCache.value.get(versionId)?.files.get(fileId)
 }
 
 function isHashLoading(versionId: string): boolean {
@@ -114,6 +115,7 @@ defineExpose({ show, hide })
 						<th class="pb-2">Version ID</th>
 						<th class="pb-2">File Name</th>
 						<th class="pb-2">CDN Link</th>
+						<th class="pb-2">Download</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -124,11 +126,11 @@ defineExpose({ show, hide })
 								class="size-4 animate-spin text-secondary"
 							/>
 							<ButtonStyled
-								v-else-if="getFileHash(item.file.version_id, item.file.file_name)"
+								v-else-if="getFileHash(item.file.version_id, item.file.file_id)"
 								size="small"
 								type="standard"
 							>
-								<button @click="copy(getFileHash(item.file.version_id, item.file.file_name)!)">
+								<button @click="copy(getFileHash(item.file.version_id, item.file.file_id)!)">
 									<ClipboardCopyIcon class="size-4" />
 									Copy
 								</button>
@@ -141,7 +143,7 @@ defineExpose({ show, hide })
 						<td class="py-1 pr-2">
 							<CopyCode :text="item.file.file_name" />
 						</td>
-						<td class="py-1">
+						<td class="py-1 pr-2">
 							<ButtonStyled size="small" type="standard">
 								<button @click="copy(item.file.download_url)">
 									<ClipboardCopyIcon class="size-4" />
@@ -149,6 +151,13 @@ defineExpose({ show, hide })
 								</button>
 							</ButtonStyled>
 						</td>
+						<td class="py-1">
+							<ButtonStyled circular size="small">
+								<a :href="item.file.download_url" :download="item.file.file_name" target="_blank">
+									<DownloadIcon />
+								</a>
+							</ButtonStyled>
+						</td>
 					</tr>
 				</tbody>
 			</table>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index 3c962040ed..3d82e85ad3 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -12,6 +12,7 @@ import {
 	LinkIcon,
 	LoaderCircleIcon,
 	ShieldCheckIcon,
+	TimerIcon,
 } from '@modrinth/assets'
 import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/moderation'
 import {
@@ -265,6 +266,13 @@ const severityColor = computed(() => {
 	}
 })
 
+const isProjectApproved = computed(() => {
+	const status = props.item.project.status
+	return (
+		status === 'approved' || status === 'archived' || status === 'unlisted' || status === 'private'
+	)
+})
+
 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())))
@@ -369,12 +377,16 @@ async function updateDetailStatus(detailId: string, verdict: 'safe' | 'unsafe')
 			if (detailKey) break
 		}
 
+		let otherMatchedCount = 0
 		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)
+							if (detail.id !== detailId) {
+								otherMatchedCount++
+							}
 						}
 					}
 				}
@@ -391,17 +403,31 @@ async function updateDetailStatus(detailId: string, verdict: 'safe' | 'unsafe')
 			}
 		}
 
+		// Jump back to Files tab when all flags in the current file are marked
+		if (selectedFile.value) {
+			const markedCount = getFileMarkedCount(selectedFile.value)
+			const totalCount = getFileDetailCount(selectedFile.value)
+			if (markedCount === totalCount) {
+				backToFileList()
+			}
+		}
+
+		const otherText =
+			otherMatchedCount > 0
+				? ` (${otherMatchedCount} other trace${otherMatchedCount === 1 ? '' : 's'} also marked)`
+				: ''
+
 		if (verdict === 'safe') {
 			addNotification({
 				type: 'success',
 				title: 'Issue marked as pass',
-				text: 'This issue has been marked as a false positive.',
+				text: `This issue has been marked as a false positive.${otherText}`,
 			})
 		} else {
 			addNotification({
 				type: 'success',
 				title: 'Issue marked as fail',
-				text: 'This issue has been flagged as malicious.',
+				text: `This issue has been flagged as malicious.${otherText}`,
 			})
 		}
 	} catch (error) {
@@ -472,6 +498,17 @@ const groupedByClass = computed<ClassGroup[]>(() => {
 	})
 })
 
+// Auto-expand if there's only one class in the file
+watch(
+	groupedByClass,
+	(classes) => {
+		if (classes.length === 1) {
+			expandedClasses.value.add(classes[0].filePath)
+		}
+	},
+	{ immediate: true },
+)
+
 function getHighestSeverityInClass(
 	flags: ClassGroup['flags'],
 ): Labrinth.TechReview.Internal.DelphiSeverity {
@@ -623,7 +660,7 @@ const threadWithPreview = computed(() => {
 		body: {
 			type: 'text',
 			body: reviewSummaryPreview.value,
-			private: false,
+			private: true,
 			replying_to: null,
 			associated_images: [],
 		},
@@ -747,9 +784,21 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 							</div>
 
 							<div
-								class="rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+								class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1"
+								:class="
+									isProjectApproved
+										? 'border-green bg-highlight-green'
+										: 'border-orange bg-highlight-orange'
+								"
 							>
-								<span class="text-sm font-medium text-secondary">Auto-Flagged</span>
+								<CheckIcon v-if="isProjectApproved" aria-hidden="true" class="h-4 w-4 text-green" />
+								<TimerIcon v-else aria-hidden="true" class="h-4 w-4 text-orange" />
+								<span
+									class="text-sm font-medium"
+									:class="isProjectApproved ? 'text-green' : 'text-orange'"
+								>
+									{{ isProjectApproved ? 'Live' : 'In review' }}
+								</span>
 							</div>
 
 							<div class="rounded-full px-2.5 py-1" :class="severityColor">
@@ -929,8 +978,6 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 								: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"
 							>
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index 5fe85b9d06..ef74e9b911 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -124,6 +124,8 @@ import ModerationQueueCard from '~/components/ui/moderation/ModerationQueueCard.
 import { enrichProjectBatch, type ModerationProject } from '~/helpers/moderation.ts'
 import { useModerationStore } from '~/store/moderation.ts'
 
+useHead({ title: 'Projects queue - Modrinth' })
+
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const moderationStore = useModerationStore()
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index b04e9180da..ebbe836192 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -92,6 +92,8 @@ import Fuse from 'fuse.js'
 import ReportCard from '~/components/ui/moderation/ModerationReportCard.vue'
 import { enrichReportBatch } from '~/helpers/moderation.ts'
 
+useHead({ title: 'Reports queue - Modrinth' })
+
 const { formatMessage } = useVIntl()
 const route = useRoute()
 const router = useRouter()
diff --git a/apps/frontend/src/pages/moderation/technical-review.vue b/apps/frontend/src/pages/moderation/technical-review.vue
index 8805653b9f..ababb5c19b 100644
--- a/apps/frontend/src/pages/moderation/technical-review.vue
+++ b/apps/frontend/src/pages/moderation/technical-review.vue
@@ -1,23 +1,35 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
+import {
+	BlendIcon,
+	ListFilterIcon,
+	SearchIcon,
+	SortAscIcon,
+	SortDescIcon,
+	XIcon,
+} from '@modrinth/assets'
 import {
 	Button,
 	Combobox,
 	type ComboboxOption,
 	defineMessages,
+	FloatingPanel,
 	injectModrinthClient,
 	Pagination,
+	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
 import Fuse from 'fuse.js'
+import { nextTick } from 'vue'
 
 import MaliciousSummaryModal, {
 	type UnsafeFile,
 } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
 import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
 
+useHead({ title: 'Tech review queue - Modrinth' })
+
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 
@@ -196,10 +208,10 @@ watch(
 	},
 )
 
-const currentFilterType = ref('All issues')
+const currentFilterType = ref('All flags')
 
 const filterTypes = computed<ComboboxOption<string>[]>(() => {
-	const base: ComboboxOption<string>[] = [{ value: 'All issues', label: 'All issues' }]
+	const base: ComboboxOption<string>[] = [{ value: 'All flags', label: 'All flags' }]
 	if (!reviewItems.value) return base
 
 	const issueTypes = new Set(
@@ -213,14 +225,23 @@ const filterTypes = computed<ComboboxOption<string>[]>(() => {
 	return [...base, ...sortedTypes.map((type) => ({ value: type, label: type }))]
 })
 
-const currentSortType = ref('Severe first')
+const currentSortType = ref('Severity highest')
 const sortTypes: ComboboxOption<string>[] = [
+	{ value: 'Severity highest', label: 'Severity highest' },
+	{ value: 'Severity lowest', label: 'Severity lowest' },
 	{ value: 'Oldest', label: 'Oldest' },
 	{ value: 'Newest', label: 'Newest' },
-	{ value: 'Severe first', label: 'Severe first' },
-	{ value: 'Severe last', label: 'Severe last' },
 ]
 
+const currentResponseFilter = ref('All')
+const responseFilterTypes: ComboboxOption<string>[] = [
+	{ value: 'All', label: 'All' },
+	{ value: 'Unread', label: 'Unread' },
+	{ value: 'Read', label: 'Read' },
+]
+
+const inOtherQueueFilter = ref(false)
+
 const fuse = computed(() => {
 	if (!reviewItems.value || reviewItems.value.length === 0) return null
 	return new Fuse(reviewItems.value, {
@@ -246,36 +267,11 @@ const baseFiltered = computed(() => {
 	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 filteredItems = computed(() => baseFiltered.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)
-			)
-		}
+		return total + review.reports.reduce((sum, report) => sum + report.issues.length, 0)
 	}, 0)
 })
 
@@ -304,9 +300,9 @@ function toApiSort(label: string): Labrinth.TechReview.Internal.SearchProjectsSo
 			return 'created_asc'
 		case 'Newest':
 			return 'created_desc'
-		case 'Severe first':
+		case 'Severity highest':
 			return 'severity_desc'
-		case 'Severe last':
+		case 'Severity lowest':
 			return 'severity_asc'
 		default:
 			return 'severity_desc'
@@ -321,12 +317,36 @@ const {
 	hasNextPage,
 	refetch,
 } = useInfiniteQuery({
-	queryKey: ['tech-reviews', currentSortType],
+	enabled: true,
+	queryKey: [
+		'tech-reviews',
+		currentSortType,
+		currentResponseFilter,
+		inOtherQueueFilter,
+		currentFilterType,
+	],
 	queryFn: async ({ pageParam = 0 }) => {
+		const filter: Labrinth.TechReview.Internal.SearchProjectsFilter = {}
+
+		if (currentResponseFilter.value === 'Unread') {
+			filter.replied_to = 'unreplied'
+		} else if (currentResponseFilter.value === 'Read') {
+			filter.replied_to = 'replied'
+		}
+
+		if (inOtherQueueFilter.value) {
+			filter.project_status = ['pending']
+		}
+
+		if (currentFilterType.value !== 'All flags') {
+			filter.issue_types = [currentFilterType.value]
+		}
+
 		return await client.labrinth.tech_review_internal.searchProjects({
 			limit: API_PAGE_SIZE,
 			page: pageParam,
 			sort_by: toApiSort(currentSortType.value),
+			filter,
 		})
 	},
 	getNextPageParam: (lastPage, allPages) => {
@@ -412,8 +432,11 @@ const reviewItems = computed(() => {
 })
 
 function handleMarkComplete(projectId: string) {
+	// Find the index of the current card before removing it
+	const currentIndex = paginatedItems.value.findIndex((item) => item.project.id === projectId)
+
 	queryClient.setQueryData(
-		['tech-reviews', currentSortType],
+		['tech-reviews', currentSortType, currentResponseFilter, inOtherQueueFilter, currentFilterType],
 		(
 			oldData:
 				| {
@@ -439,17 +462,29 @@ function handleMarkComplete(projectId: string) {
 			}
 		},
 	)
+
+	// Scroll to the next card after Vue updates the DOM
+	nextTick(() => {
+		const targetIndex = currentIndex
+		if (targetIndex >= 0 && cardRefs.value[targetIndex]) {
+			cardRefs.value[targetIndex].scrollIntoView({
+				behavior: 'smooth',
+				block: 'start',
+			})
+		}
+	})
 }
 
 const maliciousSummaryModalRef = ref<InstanceType<typeof MaliciousSummaryModal>>()
 const currentUnsafeFiles = ref<UnsafeFile[]>([])
+const cardRefs = ref<HTMLElement[]>([])
 
 function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
 	currentUnsafeFiles.value = unsafeFiles
 	maliciousSummaryModalRef.value?.show()
 }
 
-watch(currentSortType, () => {
+watch([currentSortType, currentResponseFilter, inOtherQueueFilter, currentFilterType], () => {
 	goToPage(1)
 })
 
@@ -471,7 +506,7 @@ watch(currentSortType, () => {
 		/> -->
 
 		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<div class="iconified-input flex-1 lg:max-w-md">
+			<div class="iconified-input flex-1 lg:max-w-56">
 				<SearchIcon aria-hidden="true" class="text-lg" />
 				<input
 					v-model="query"
@@ -491,36 +526,32 @@ watch(currentSortType, () => {
 				<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">
+			<div
+				class="flex flex-col items-stretch justify-end gap-2 sm:flex-row sm:items-center 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)"
+					v-model="currentResponseFilter"
+					class="!w-full flex-grow sm:!w-[120px] sm:flex-grow-0"
+					:options="responseFilterTypes"
 				>
 					<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 class="truncate text-contrast">{{ currentResponseFilter }}</span>
 						</span>
 					</template>
 				</Combobox>
 
 				<Combobox
 					v-model="currentSortType"
-					class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[175px]"
+					class="!w-full flex-grow sm:!w-[215px] sm:flex-grow-0"
 					: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'"
+								v-if="currentSortType === 'Oldest' || currentSortType === 'Severity lowest'"
 								class="size-5 flex-shrink-0 text-secondary"
 							/>
 							<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
@@ -529,9 +560,34 @@ watch(currentSortType, () => {
 					</template>
 				</Combobox>
 
-				<!-- <ButtonStyled color="orange">
-					<button class="!h-10"><ShieldAlertIcon /> Batch scan</button>
-				</ButtonStyled> -->
+				<FloatingPanel button-class="!h-10 !shadow-none !text-contrast">
+					<BlendIcon class="size-5" /> Advanced filters
+					<template #panel>
+						<div class="flex min-w-64 flex-col gap-3">
+							<label class="flex cursor-pointer items-center justify-between gap-2 text-sm">
+								<span class="whitespace-nowrap">In other queue</span>
+								<Toggle v-model="inOtherQueueFilter" class="!border-solid !border-surface-3" />
+							</label>
+							<div class="flex flex-col gap-2">
+								<span class="text-sm text-secondary">Flag type ({{ filteredIssuesCount }})</span>
+								<Combobox
+									v-model="currentFilterType"
+									class="!w-full"
+									:options="filterTypes"
+									:placeholder="formatMessage(messages.filterBy)"
+									searchable
+								>
+									<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 }}</span>
+										</span>
+									</template>
+								</Combobox>
+							</div>
+						</div>
+					</template>
+				</FloatingPanel>
 			</div>
 		</div>
 
@@ -547,7 +603,15 @@ watch(currentSortType, () => {
 			>
 				No projects in queue.
 			</div>
-			<div v-for="(item, idx) in paginatedItems" :key="item.project.id ?? idx">
+			<div
+				v-for="(item, idx) in paginatedItems"
+				:key="item.project.id ?? idx"
+				:ref="
+					(el) => {
+						if (el) cardRefs[idx] = el as HTMLElement
+					}
+				"
+			>
 				<ModerationTechRevCard
 					:item="item"
 					:loading-issues="loadingIssues"
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index c36e1cb1c1..3c4d0423ab 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -749,6 +749,9 @@ export namespace Labrinth {
 
 			export type SearchProjectsFilter = {
 				project_type?: string[]
+				replied_to?: 'replied' | 'unreplied'
+				project_status?: string[]
+				issue_types?: string[]
 			}
 
 			export type SearchProjectsSort =
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 01fefe7ca0..7f7ada2ef1 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -17,6 +17,7 @@ import _BadgeDollarSignIcon from './icons/badge-dollar-sign.svg?component'
 import _BanIcon from './icons/ban.svg?component'
 import _BellIcon from './icons/bell.svg?component'
 import _BellRingIcon from './icons/bell-ring.svg?component'
+import _BlendIcon from './icons/blend.svg?component'
 import _BlocksIcon from './icons/blocks.svg?component'
 import _BoldIcon from './icons/bold.svg?component'
 import _BookIcon from './icons/book.svg?component'
@@ -250,6 +251,7 @@ export const BadgeDollarSignIcon = _BadgeDollarSignIcon
 export const BanIcon = _BanIcon
 export const BellIcon = _BellIcon
 export const BellRingIcon = _BellRingIcon
+export const BlendIcon = _BlendIcon
 export const BlocksIcon = _BlocksIcon
 export const BoldIcon = _BoldIcon
 export const BookIcon = _BookIcon
diff --git a/packages/assets/icons/blend.svg b/packages/assets/icons/blend.svg
new file mode 100644
index 0000000000..24b40d3c98
--- /dev/null
+++ b/packages/assets/icons/blend.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-blend"
+  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"
+>
+  <circle cx="9" cy="9" r="7" />
+  <circle cx="15" cy="15" r="7" />
+</svg>
diff --git a/packages/ui/src/components/base/FloatingPanel.vue b/packages/ui/src/components/base/FloatingPanel.vue
new file mode 100644
index 0000000000..1fa9a0ba3a
--- /dev/null
+++ b/packages/ui/src/components/base/FloatingPanel.vue
@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+
+import ButtonStyled from './ButtonStyled.vue'
+
+const PANEL_VIEWPORT_MARGIN = 8
+
+const props = withDefaults(
+	defineProps<{
+		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
+		distance?: number
+		disabled?: boolean
+		buttonClass?: string
+		panelClass?: string
+	}>(),
+	{
+		placement: 'bottom-end',
+		distance: 8,
+		disabled: false,
+	},
+)
+
+const emit = defineEmits<{
+	open: []
+	close: []
+}>()
+
+const isOpen = ref(false)
+const triggerRef = ref<HTMLElement>()
+const panelRef = ref<HTMLElement>()
+const rafId = ref<number | null>(null)
+
+const openDirection = ref<'up' | 'down'>('down')
+const horizontalAlignment = ref<'start' | 'end'>('end')
+
+const panelStyle = ref({
+	top: '0px',
+	left: '0px',
+})
+
+const transformOrigin = computed(() => {
+	const vertical = openDirection.value === 'down' ? 'top' : 'bottom'
+	const horizontal = horizontalAlignment.value === 'end' ? 'right' : 'left'
+	return `${vertical} ${horizontal}`
+})
+
+function determineOpenDirection(
+	triggerRect: DOMRect,
+	panelRect: DOMRect,
+	viewportHeight: number,
+): 'up' | 'down' {
+	const preferDown = props.placement.startsWith('bottom')
+
+	const hasSpaceBelow =
+		triggerRect.bottom + props.distance + panelRect.height + PANEL_VIEWPORT_MARGIN <= viewportHeight
+	const hasSpaceAbove =
+		triggerRect.top - props.distance - panelRect.height - PANEL_VIEWPORT_MARGIN >= 0
+
+	if (preferDown) {
+		return hasSpaceBelow ? 'down' : hasSpaceAbove ? 'up' : 'down'
+	} else {
+		return hasSpaceAbove ? 'up' : hasSpaceBelow ? 'down' : 'up'
+	}
+}
+
+function calculateVerticalPosition(
+	triggerRect: DOMRect,
+	panelRect: DOMRect,
+	direction: 'up' | 'down',
+): number {
+	return direction === 'up'
+		? triggerRect.top - panelRect.height - props.distance
+		: triggerRect.bottom + props.distance
+}
+
+function calculateHorizontalPosition(
+	triggerRect: DOMRect,
+	panelRect: DOMRect,
+	viewportWidth: number,
+): number {
+	const alignEnd = props.placement.endsWith('end')
+	let left: number
+
+	if (alignEnd) {
+		left = triggerRect.right - panelRect.width
+	} else {
+		left = triggerRect.left
+	}
+
+	if (left + panelRect.width > viewportWidth - PANEL_VIEWPORT_MARGIN) {
+		left = Math.max(PANEL_VIEWPORT_MARGIN, viewportWidth - panelRect.width - PANEL_VIEWPORT_MARGIN)
+	}
+	if (left < PANEL_VIEWPORT_MARGIN) {
+		left = PANEL_VIEWPORT_MARGIN
+	}
+
+	return left
+}
+
+async function updatePanelPosition() {
+	if (!triggerRef.value || !panelRef.value) return
+
+	await nextTick()
+
+	const triggerRect = triggerRef.value.getBoundingClientRect()
+	const panelRect = panelRef.value.getBoundingClientRect()
+	const viewportHeight = window.innerHeight
+	const viewportWidth = window.innerWidth
+
+	const direction = determineOpenDirection(triggerRect, panelRect, viewportHeight)
+	const top = calculateVerticalPosition(triggerRect, panelRect, direction)
+	const left = calculateHorizontalPosition(triggerRect, panelRect, viewportWidth)
+
+	panelStyle.value = {
+		top: `${top}px`,
+		left: `${left}px`,
+	}
+
+	openDirection.value = direction
+	horizontalAlignment.value = props.placement.endsWith('end') ? 'end' : 'start'
+}
+
+function startPositionTracking() {
+	function track() {
+		updatePanelPosition()
+		rafId.value = requestAnimationFrame(track)
+	}
+	rafId.value = requestAnimationFrame(track)
+}
+
+function stopPositionTracking() {
+	if (rafId.value !== null) {
+		cancelAnimationFrame(rafId.value)
+		rafId.value = null
+	}
+}
+
+function focusPanelContent() {
+	if (!panelRef.value) return
+
+	const focusable = panelRef.value.querySelector<HTMLElement>(
+		'button:not([data-focus-trap]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+	)
+	if (focusable) {
+		focusable.focus()
+	}
+}
+
+async function open() {
+	if (props.disabled || isOpen.value) return
+
+	isOpen.value = true
+	emit('open')
+
+	await nextTick()
+	await updatePanelPosition()
+	startPositionTracking()
+
+	setTimeout(() => {
+		focusPanelContent()
+	}, 50)
+}
+
+function close() {
+	if (!isOpen.value) return
+
+	stopPositionTracking()
+	isOpen.value = false
+	emit('close')
+
+	nextTick(() => {
+		triggerRef.value?.focus()
+	})
+}
+
+function toggle() {
+	if (isOpen.value) {
+		close()
+	} else {
+		open()
+	}
+}
+
+onClickOutside(
+	panelRef,
+	() => {
+		close()
+	},
+	{ ignore: [triggerRef] },
+)
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+	switch (event.key) {
+		case 'Enter':
+		case ' ':
+			event.preventDefault()
+			toggle()
+			break
+		case 'ArrowDown':
+			event.preventDefault()
+			open()
+			break
+		case 'ArrowUp':
+			event.preventDefault()
+			open()
+			break
+		case 'Escape':
+			if (isOpen.value) {
+				event.preventDefault()
+				close()
+			}
+			break
+	}
+}
+
+function handlePanelKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		close()
+	}
+}
+
+function handleWindowResize() {
+	if (isOpen.value) {
+		updatePanelPosition()
+	}
+}
+
+onMounted(() => {
+	window.addEventListener('resize', handleWindowResize)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleWindowResize)
+	stopPositionTracking()
+})
+
+defineExpose({
+	open,
+	close,
+	toggle,
+})
+</script>
+
+<template>
+	<div class="relative inline-block">
+		<ButtonStyled v-bind="$attrs">
+			<button
+				ref="triggerRef"
+				:class="buttonClass"
+				:disabled="disabled"
+				:aria-expanded="isOpen"
+				aria-haspopup="true"
+				@click="toggle"
+				@keydown="handleTriggerKeydown"
+			>
+				<slot></slot>
+			</button>
+		</ButtonStyled>
+
+		<Teleport to="body">
+			<Transition
+				enter-active-class="floating-panel-enter-active"
+				enter-from-class="floating-panel-enter-from"
+				enter-to-class="floating-panel-enter-to"
+				leave-active-class="floating-panel-leave-active"
+				leave-from-class="floating-panel-leave-from"
+				leave-to-class="floating-panel-leave-to"
+			>
+				<div
+					v-if="isOpen"
+					ref="panelRef"
+					class="fixed z-[9999] w-fit rounded-[14px] border border-surface-5 bg-surface-4 p-3 shadow-2xl"
+					:class="panelClass"
+					:style="[panelStyle, { transformOrigin }]"
+					role="dialog"
+					tabindex="-1"
+					@keydown="handlePanelKeydown"
+					@mousedown.stop
+				>
+					<button class="sr-only" data-focus-trap @focusin="close"></button>
+					<slot name="panel"></slot>
+					<button class="sr-only" data-focus-trap @focusin="close"></button>
+				</div>
+			</Transition>
+		</Teleport>
+	</div>
+</template>
+
+<style scoped>
+.floating-panel-enter-active,
+.floating-panel-leave-active {
+	transition:
+		transform 0.125s ease-in-out,
+		opacity 0.125s ease-in-out;
+}
+
+.floating-panel-enter-from,
+.floating-panel-leave-to {
+	transform: scale(0.85);
+	opacity: 0;
+}
+
+.floating-panel-enter-to,
+.floating-panel-leave-from {
+	transform: scale(1);
+	opacity: 1;
+}
+</style>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 6cb7af60ef..ebe2c79014 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -27,6 +27,7 @@ export { default as FileInput } from './FileInput.vue'
 export type { FilterBarOption } from './FilterBar.vue'
 export { default as FilterBar } from './FilterBar.vue'
 export { default as FloatingActionBar } from './FloatingActionBar.vue'
+export { default as FloatingPanel } from './FloatingPanel.vue'
 export { default as HeadingLink } from './HeadingLink.vue'
 export { default as HorizontalRule } from './HorizontalRule.vue'
 export { default as IconSelect } from './IconSelect.vue'