diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
index 6ea636cea2..6de03d7e8d 100644
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -3,6 +3,7 @@ import {
 	CoffeeIcon,
 	GameIcon,
 	GaugeIcon,
+	HeartHandshakeIcon,
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
@@ -24,6 +25,7 @@ import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/
 import { computed, ref, watch } from 'vue'
 
 import PrivacySettings from '@/components/ui/settings/account/PrivacySettings.vue'
+import SafetySettings from '@/components/ui/settings/account/SafetySettings.vue'
 import AppearanceSettings from '@/components/ui/settings/display/AppearanceSettings.vue'
 import BehaviorSettings from '@/components/ui/settings/display/BehaviorSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/display/FeatureFlagSettings.vue'
@@ -98,6 +100,15 @@ const tabs = [
 		content: FeatureFlagSettings,
 		developerOnly: true,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.safety',
+			defaultMessage: 'Safety',
+		}),
+		category: tabCategories.account,
+		icon: HeartHandshakeIcon,
+		content: SafetySettings,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.privacy',
diff --git a/apps/app-frontend/src/components/ui/settings/account/SafetySettings.vue b/apps/app-frontend/src/components/ui/settings/account/SafetySettings.vue
new file mode 100644
index 0000000000..07295a4819
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/settings/account/SafetySettings.vue
@@ -0,0 +1,20 @@
+<template>
+	<AccountSafetySettings
+		:get-blocked-users="get_blocked_users"
+		:get-users="getUsers"
+		:unblock-user="unblock_user"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { AccountSafetySettings, injectModrinthClient } from '@modrinth/ui'
+
+import { get_blocked_users, unblock_user } from '@/helpers/users'
+
+const client = injectModrinthClient()
+
+function getUsers(userIds: string[]): Promise<Labrinth.Users.v2.User[]> {
+	return client.labrinth.users_v2.getMultiple(userIds)
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/AccountSafetySettings.vue b/packages/ui/src/layouts/wrapped/AccountSafetySettings.vue
new file mode 100644
index 0000000000..3c43bd5a1d
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/AccountSafetySettings.vue
@@ -0,0 +1,331 @@
+<template>
+	<section class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1">
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.blockedUsersTitle) }}
+			</h2>
+			<p class="m-0 text-secondary">
+				{{ formatMessage(messages.blockedUsersDescription) }}
+			</p>
+			<ul class="m-0 flex list-disc flex-col gap-1 pl-5 text-secondary">
+				<li>{{ formatMessage(messages.friendRequestsRestriction) }}</li>
+				<li>{{ formatMessage(messages.sharedInstancesRestriction) }}</li>
+				<li>{{ formatMessage(messages.hostingRestriction) }}</li>
+			</ul>
+		</div>
+
+		<div class="relative overflow-hidden rounded-2xl border border-solid border-surface-4">
+			<Transition
+				enter-active-class="transition-all duration-200 ease-out"
+				enter-from-class="opacity-0 max-h-0"
+				enter-to-class="opacity-100 max-h-3"
+				leave-active-class="transition-all duration-200 ease-in"
+				leave-from-class="opacity-100 max-h-3"
+				leave-to-class="opacity-0 max-h-0"
+			>
+				<div
+					v-if="showTopFade"
+					class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-3 bg-gradient-to-b from-bg-raised to-transparent"
+				/>
+			</Transition>
+
+			<div
+				ref="blockedUsersTable"
+				class="max-h-[20.5rem] overflow-y-auto"
+				@scroll="checkScrollState"
+			>
+				<Table
+					class="!rounded-none !border-0"
+					:columns="columns"
+					:data="blockedUsers"
+					row-key="id"
+				>
+					<template #empty-state>
+						<div class="flex h-40 items-center justify-center px-4 text-center text-secondary">
+							<div v-if="isLoading" class="flex items-center gap-2">
+								<SpinnerIcon class="size-5 animate-spin" aria-hidden="true" />
+								{{ formatMessage(messages.loadingBlockedUsers) }}
+							</div>
+							<div v-else-if="loadError" class="flex flex-col items-center gap-3">
+								<span>{{ formatMessage(messages.loadError) }}</span>
+								<ButtonStyled type="outlined">
+									<button type="button" @click="retry">
+										{{ formatMessage(commonMessages.retryButton) }}
+									</button>
+								</ButtonStyled>
+							</div>
+							<span v-else-if="!auth.user.value">
+								{{ formatMessage(messages.signInRequired) }}
+							</span>
+							<span v-else>{{ formatMessage(messages.noBlockedUsers) }}</span>
+						</div>
+					</template>
+
+					<template #cell-user="{ row }">
+						<div class="flex min-w-0 items-center gap-3">
+							<Avatar
+								:src="row.avatar_url"
+								:alt="formatMessage(messages.userAvatarAlt, { username: row.username })"
+								:tint-by="row.username"
+								size="32px"
+								circle
+								no-shadow
+							/>
+							<div class="flex min-w-0 flex-col">
+								<span class="truncate font-semibold text-contrast">
+									{{ row.name ?? row.username }}
+								</span>
+								<span v-if="row.name" class="truncate text-sm text-secondary">
+									{{ row.username }}
+								</span>
+							</div>
+						</div>
+					</template>
+
+					<template #cell-actions="{ row }">
+						<div class="flex justify-end">
+							<ButtonStyled type="outlined">
+								<button
+									type="button"
+									:disabled="unblockingUserId !== null"
+									:aria-label="
+										formatMessage(messages.unblockUserAriaLabel, {
+											username: row.username,
+										})
+									"
+									@click="unblock(row)"
+								>
+									<SpinnerIcon
+										v-if="unblockingUserId === row.id"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									{{ formatMessage(messages.unblockButton) }}
+								</button>
+							</ButtonStyled>
+						</div>
+					</template>
+				</Table>
+			</div>
+
+			<Transition
+				enter-active-class="transition-all duration-200 ease-out"
+				enter-from-class="opacity-0 max-h-0"
+				enter-to-class="opacity-100 max-h-3"
+				leave-active-class="transition-all duration-200 ease-in"
+				leave-from-class="opacity-100 max-h-3"
+				leave-to-class="opacity-0 max-h-0"
+			>
+				<div
+					v-if="showBottomFade"
+					class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-3 bg-gradient-to-t from-bg-raised to-transparent"
+				/>
+			</Transition>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+// TODO this will be moved in with the rest of the xplat settings.
+import type { Labrinth } from '@modrinth/api-client'
+import { SpinnerIcon } from '@modrinth/assets'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import Avatar from '#ui/components/base/Avatar.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Table, { type TableColumn } from '#ui/components/base/Table.vue'
+import { defineMessages, useScrollIndicator, useVIntl } from '#ui/composables'
+import { injectAuth, injectNotificationManager } from '#ui/providers'
+import { commonMessages } from '#ui/utils'
+
+import { blockedUsersQueryKey } from '../shared/user-profile/providers'
+
+type BlockedUserTableColumn = 'user' | 'actions'
+type BlockedUser = Labrinth.Users.v2.User & Record<BlockedUserTableColumn, unknown>
+
+const props = defineProps<{
+	getBlockedUsers: () => Promise<Labrinth.BlockedUsers.v3.BlockedUserId[]>
+	getUsers: (userIds: string[]) => Promise<Labrinth.Users.v2.User[]>
+	unblockUser: (userId: string) => Promise<void>
+}>()
+
+const auth = injectAuth()
+const notificationManager = injectNotificationManager()
+const queryClient = useQueryClient()
+const { formatMessage } = useVIntl()
+const blockedUsersTable = ref<HTMLElement | null>(null)
+const unblockingUserId = ref<string | null>(null)
+const { showTopFade, showBottomFade, checkScrollState } =
+	useScrollIndicator(blockedUsersTable)
+
+const columns = computed<TableColumn<BlockedUserTableColumn>[]>(() => [
+	{
+		key: 'user',
+		label: formatMessage(messages.userColumn),
+	},
+	{
+		key: 'actions',
+		label: formatMessage(messages.actionsColumn),
+		align: 'right',
+		width: '8rem',
+	},
+])
+
+const blockedUserIdsQuery = useQuery({
+	queryKey: computed(() => blockedUsersQueryKey(auth.user.value?.id)),
+	queryFn: props.getBlockedUsers,
+	enabled: computed(() => Boolean(auth.user.value)),
+	staleTime: 30_000,
+})
+const blockedUserIds = computed(() => blockedUserIdsQuery.data.value ?? [])
+const blockedUserProfilesQueryKey = computed(
+	() => ['blocked-user-profiles', auth.user.value?.id ?? null, blockedUserIds.value] as const,
+)
+const blockedUserProfilesQuery = useQuery({
+	queryKey: blockedUserProfilesQueryKey,
+	queryFn: () => props.getUsers(blockedUserIds.value),
+	enabled: computed(() => Boolean(auth.user.value && blockedUserIds.value.length)),
+	staleTime: 30_000,
+})
+const blockedUsers = computed<BlockedUser[]>(() => {
+	const profilesById = new Map(
+		(blockedUserProfilesQuery.data.value ?? []).map((user) => [user.id, user]),
+	)
+	return blockedUserIds.value
+		.map((userId) => profilesById.get(userId))
+		.filter((user): user is Labrinth.Users.v2.User => Boolean(user))
+		.map((user) => ({
+			...user,
+			user: user.username,
+			actions: null,
+		}))
+})
+const isLoading = computed(
+	() =>
+		Boolean(auth.user.value) &&
+		(blockedUserIdsQuery.isPending.value ||
+			(blockedUserIds.value.length > 0 && blockedUserProfilesQuery.isPending.value)),
+)
+const loadError = computed(
+	() => blockedUserIdsQuery.error.value ?? blockedUserProfilesQuery.error.value,
+)
+
+async function retry(): Promise<void> {
+	await blockedUserIdsQuery.refetch()
+	if (blockedUserIds.value.length > 0) {
+		await blockedUserProfilesQuery.refetch()
+	}
+}
+
+async function unblock(user: BlockedUser): Promise<void> {
+	if (unblockingUserId.value) return
+
+	unblockingUserId.value = user.id
+	try {
+		await props.unblockUser(user.id)
+
+		const remainingIds = blockedUserIds.value.filter((userId) => userId !== user.id)
+		const remainingUsers = blockedUsers.value.filter((blockedUser) => blockedUser.id !== user.id)
+		queryClient.setQueryData(
+			['blocked-user-profiles', auth.user.value?.id ?? null, remainingIds],
+			remainingUsers,
+		)
+		queryClient.setQueryData<Labrinth.BlockedUsers.v3.BlockedUserId[]>(
+			blockedUsersQueryKey(auth.user.value?.id),
+			remainingIds,
+		)
+
+		notificationManager.addNotification({
+			type: 'success',
+			title: formatMessage(messages.userUnblocked),
+			text: formatMessage(messages.userUnblockedDescription, {
+				username: user.username,
+			}),
+		})
+	} catch {
+		notificationManager.addNotification({
+			type: 'error',
+			title: formatMessage(messages.unblockError),
+			text: formatMessage(messages.unblockErrorDescription),
+		})
+	} finally {
+		unblockingUserId.value = null
+	}
+}
+
+const messages = defineMessages({
+	blockedUsersTitle: {
+		id: 'settings.safety.blocked-users.title',
+		defaultMessage: 'Blocked users',
+	},
+	blockedUsersDescription: {
+		id: 'settings.safety.blocked-users.description',
+		defaultMessage: 'These are the users you have blocked on Modrinth. They cannot:',
+	},
+	friendRequestsRestriction: {
+		id: 'settings.safety.blocked-users.restriction.friend-requests',
+		defaultMessage: 'Send you friend requests',
+	},
+	sharedInstancesRestriction: {
+		id: 'settings.safety.blocked-users.restriction.shared-instances',
+		defaultMessage: 'Invite you to shared instances',
+	},
+	hostingRestriction: {
+		id: 'settings.safety.blocked-users.restriction.hosting',
+		defaultMessage: 'Invite you to manage a Modrinth Hosting server.',
+	},
+	userColumn: {
+		id: 'settings.safety.blocked-users.column.user',
+		defaultMessage: 'User',
+	},
+	actionsColumn: {
+		id: 'settings.safety.blocked-users.column.actions',
+		defaultMessage: 'Actions',
+	},
+	unblockButton: {
+		id: 'settings.safety.blocked-users.unblock',
+		defaultMessage: 'Unblock',
+	},
+	unblockUserAriaLabel: {
+		id: 'settings.safety.blocked-users.unblock-user',
+		defaultMessage: 'Unblock {username}',
+	},
+	loadingBlockedUsers: {
+		id: 'settings.safety.blocked-users.loading',
+		defaultMessage: 'Loading blocked users…',
+	},
+	noBlockedUsers: {
+		id: 'settings.safety.blocked-users.empty',
+		defaultMessage: "You haven't blocked anyone.",
+	},
+	signInRequired: {
+		id: 'settings.safety.blocked-users.sign-in-required',
+		defaultMessage: 'Sign in to manage your blocked users.',
+	},
+	loadError: {
+		id: 'settings.safety.blocked-users.load-error',
+		defaultMessage: 'Blocked users could not be loaded.',
+	},
+	userAvatarAlt: {
+		id: 'settings.safety.blocked-users.user-avatar',
+		defaultMessage: "{username}'s avatar",
+	},
+	userUnblocked: {
+		id: 'settings.safety.blocked-users.unblocked',
+		defaultMessage: 'User unblocked',
+	},
+	userUnblockedDescription: {
+		id: 'settings.safety.blocked-users.unblocked-description',
+		defaultMessage: '{username} has been unblocked.',
+	},
+	unblockError: {
+		id: 'settings.safety.blocked-users.unblock-error',
+		defaultMessage: 'Failed to unblock user',
+	},
+	unblockErrorDescription: {
+		id: 'settings.safety.blocked-users.unblock-error-description',
+		defaultMessage: 'An error occurred while unblocking this user. Please try again.',
+	},
+})
+</script>
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 0690e1a3c0..056469ba4b 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -1,3 +1,4 @@
+export { default as AccountSafetySettings } from './AccountSafetySettings.vue'
 export { default as ServersManageAccessPage } from './hosting/manage/[id]/access/access.vue'
 export { default as ServerOnboardingPanelPage } from './hosting/manage/[id]/onboarding.vue'
 export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'