From ad3fc31206ba3cd20e6e89a1212e7069b087caa7 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 20 Oct 2026 13:17:34 +0100
Subject: [PATCH 1/8] refactor: align backups page to new design

---
 .../src/pages/hosting/manage/Backups.vue      |   9 +-
 .../src/pages/hosting/manage/[id]/backups.vue |   9 +-
 .../src/modules/archon/backups-queue/v1.ts    |  30 +
 .../api-client/src/modules/archon/types.ts    |  24 +
 packages/assets/generated-icons.ts            |   2 +
 packages/assets/icons/calendar-clock.svg      |  20 +
 .../servers/ServerSettingsModal.vue           |   2 +
 .../composables/hosting/backup-interval.ts    |  53 ++
 .../composables/hosting/backups-selection.ts  |  74 --
 .../src/composables/server-backups-queue.ts   |  23 +-
 .../shared/server-settings/pages/backups.vue  | 254 ++++++
 .../shared/server-settings/pages/index.ts     |   1 +
 .../layouts/shared/server-settings/tabs.ts    |   7 +
 .../wrapped/hosting/manage/backups.vue        | 859 ------------------
 .../hosting/manage/backups/history-table.vue  | 274 ++++++
 .../wrapped/hosting/manage/backups/index.vue  | 414 +++++++++
 .../hosting/manage/backups/slot-card.vue      |  66 ++
 .../manage/backups/use-focused-backup.ts      |  48 +
 packages/ui/src/layouts/wrapped/index.ts      |   2 +-
 packages/ui/src/locales/cs-CZ/index.json      |  13 -
 packages/ui/src/locales/de-CH/index.json      |  28 -
 packages/ui/src/locales/de-DE/index.json      |  28 -
 packages/ui/src/locales/en-US/index.json      | 146 ++-
 packages/ui/src/locales/es-419/index.json     |  28 -
 packages/ui/src/locales/es-ES/index.json      |  27 -
 packages/ui/src/locales/fil-PH/index.json     |   4 -
 packages/ui/src/locales/fr-FR/index.json      |  27 -
 packages/ui/src/locales/hu-HU/index.json      |  27 -
 packages/ui/src/locales/it-IT/index.json      |  28 -
 packages/ui/src/locales/ja-JP/index.json      |  24 -
 packages/ui/src/locales/ko-KR/index.json      |  27 -
 packages/ui/src/locales/ms-MY/index.json      |  25 -
 packages/ui/src/locales/nl-NL/index.json      |  27 -
 packages/ui/src/locales/pl-PL/index.json      |  27 -
 packages/ui/src/locales/pt-BR/index.json      |  28 -
 packages/ui/src/locales/pt-PT/index.json      |   4 -
 packages/ui/src/locales/ru-RU/index.json      |  27 -
 packages/ui/src/locales/sr-CS/index.json      |  28 -
 packages/ui/src/locales/sv-SE/index.json      |  24 -
 packages/ui/src/locales/tr-TR/index.json      |  24 -
 packages/ui/src/locales/uk-UA/index.json      |  27 -
 packages/ui/src/locales/vi-VN/index.json      |  28 -
 packages/ui/src/locales/zh-CN/index.json      |  28 -
 packages/ui/src/locales/zh-TW/index.json      |  28 -
 44 files changed, 1348 insertions(+), 1555 deletions(-)
 create mode 100644 packages/assets/icons/calendar-clock.svg
 create mode 100644 packages/ui/src/composables/hosting/backup-interval.ts
 delete mode 100644 packages/ui/src/composables/hosting/backups-selection.ts
 create mode 100644 packages/ui/src/layouts/shared/server-settings/pages/backups.vue
 delete mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts

diff --git a/apps/app-frontend/src/pages/hosting/manage/Backups.vue b/apps/app-frontend/src/pages/hosting/manage/Backups.vue
index 0ebb7bd800b..2c0b548e88b 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Backups.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Backups.vue
@@ -2,6 +2,7 @@
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
+	serverBackupsQueueQueryOptions,
 	ServersManageBackupsPage,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -12,11 +13,9 @@ const queryClient = useQueryClient()
 
 if (worldId.value) {
 	try {
-		await queryClient.ensureQueryData({
-			queryKey: ['backups', 'list', serverId],
-			queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
-			staleTime: 30_000,
-		})
+		await queryClient.ensureQueryData(
+			serverBackupsQueueQueryOptions(client, serverId, worldId.value),
+		)
 	} catch {
 		// Let mounted layouts' useQuery surface errors; do not fail route setup.
 	}
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/backups.vue b/apps/frontend/src/pages/hosting/manage/[id]/backups.vue
index 467662653f8..70232e31b36 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/backups.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/backups.vue
@@ -2,6 +2,7 @@
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
+	serverBackupsQueueQueryOptions,
 	ServersManageBackupsPage,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -13,11 +14,9 @@ const flags = useFeatureFlags()
 
 if (worldId.value) {
 	try {
-		await queryClient.ensureQueryData({
-			queryKey: ['backups', 'list', serverId],
-			queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
-			staleTime: 30_000,
-		})
+		await queryClient.ensureQueryData(
+			serverBackupsQueueQueryOptions(client, serverId, worldId.value),
+		)
 	} catch {
 		// Let mounted layouts' useQuery surface errors; do not fail route setup.
 	}
diff --git a/packages/api-client/src/modules/archon/backups-queue/v1.ts b/packages/api-client/src/modules/archon/backups-queue/v1.ts
index 4e36201f144..2cee50301e7 100644
--- a/packages/api-client/src/modules/archon/backups-queue/v1.ts
+++ b/packages/api-client/src/modules/archon/backups-queue/v1.ts
@@ -17,6 +17,36 @@ export class ArchonBackupsQueueV1Module extends AbstractModule {
 		)
 	}
 
+	/** GET /v1/servers/:server_id/worlds/:world_id/backups-queue/with-options */
+	public async listWithOptions(
+		serverId: string,
+		worldId: string,
+	): Promise<Archon.BackupsQueue.v1.BackupsQueueWithOptionsResponse> {
+		return this.client.request<Archon.BackupsQueue.v1.BackupsQueueWithOptionsResponse>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/with-options`,
+			{ api: 'archon', version: 1, method: 'GET' },
+		)
+	}
+
+	/** PATCH /v1/servers/:server_id/worlds/:world_id/backups-queue/with-options */
+	public async patchOptions(
+		serverId: string,
+		worldId: string,
+		request: Archon.BackupsQueue.v1.PatchWorldBackupOptions,
+		acknowledgeRotation = false,
+	): Promise<Archon.BackupsQueue.v1.PatchWorldBackupOptionsResponse> {
+		return this.client.request<Archon.BackupsQueue.v1.PatchWorldBackupOptionsResponse>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/with-options`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'PATCH',
+				body: request,
+				params: acknowledgeRotation ? { ar: 'true' } : undefined,
+			},
+		)
+	}
+
 	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue */
 	public async create(
 		serverId: string,
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index a6c916a5b61..2be0e9acdad 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -953,6 +953,7 @@ export namespace Archon {
 				status: BackupStatus
 				locked: boolean
 				automated: boolean
+				rotates_at?: string
 				history: BackupQueueOperation[]
 			}
 
@@ -960,6 +961,29 @@ export namespace Archon {
 				active_operations: ActiveOperation[]
 				backups: BackupQueueBackup[]
 			}
+
+			export type WorldBackupOptions = {
+				split_automatic: number
+				split_manual: number
+				limit: number
+				interval: number
+			}
+
+			export type BackupsQueueWithOptionsResponse = BackupsQueueResponse & {
+				options: WorldBackupOptions
+				next_auto_backup_at: string | null
+			}
+
+			export type PatchWorldBackupOptions = {
+				split_automatic?: number
+				split_manual?: number
+				interval?: number
+			}
+
+			export type PatchWorldBackupOptionsResponse = {
+				applied: boolean
+				backup_ids?: string[]
+			}
 		}
 	}
 
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index ab13292e761..392dc102040 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -70,6 +70,7 @@ import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
 import _BugIcon from './icons/bug.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CalendarArrowDownIcon from './icons/calendar-arrow-down.svg?component'
+import _CalendarClockIcon from './icons/calendar-clock.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
 import _ChartAreaIcon from './icons/chart-area.svg?component'
@@ -551,6 +552,7 @@ export const BrushCleaningIcon = _BrushCleaningIcon
 export const BugIcon = _BugIcon
 export const CalendarIcon = _CalendarIcon
 export const CalendarArrowDownIcon = _CalendarArrowDownIcon
+export const CalendarClockIcon = _CalendarClockIcon
 export const CardIcon = _CardIcon
 export const ChartIcon = _ChartIcon
 export const ChartAreaIcon = _ChartAreaIcon
diff --git a/packages/assets/icons/calendar-clock.svg b/packages/assets/icons/calendar-clock.svg
new file mode 100644
index 00000000000..a23eaff0b60
--- /dev/null
+++ b/packages/assets/icons/calendar-clock.svg
@@ -0,0 +1,20 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-calendar-clock"
+  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"
+>
+  <path d="M16 14v2.2l1.6 1" />
+  <path d="M16 2v4" />
+  <path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5" />
+  <path d="M3 10h5" />
+  <path d="M8 2v4" />
+  <circle cx="16" cy="16" r="6" />
+</svg>
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index 983c34cb55a..a3209b03f8a 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -9,6 +9,7 @@ import { TabbedModal } from '#ui/components'
 import { defineMessage, defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
 	ServerSettingsAdvancedPage,
+	ServerSettingsBackupsPage,
 	ServerSettingsGeneralPage,
 	ServerSettingsInstallationPage,
 	ServerSettingsNetworkPage,
@@ -76,6 +77,7 @@ const serverSettingsTabComponentMap = {
 	general: ServerSettingsGeneralPage,
 	installation: ServerSettingsInstallationPage,
 	network: ServerSettingsNetworkPage,
+	backups: ServerSettingsBackupsPage,
 	properties: ServerSettingsPropertiesPage,
 	advanced: ServerSettingsAdvancedPage,
 	support: ServerSettingsSupportPage,
diff --git a/packages/ui/src/composables/hosting/backup-interval.ts b/packages/ui/src/composables/hosting/backup-interval.ts
new file mode 100644
index 00000000000..5590e75d38a
--- /dev/null
+++ b/packages/ui/src/composables/hosting/backup-interval.ts
@@ -0,0 +1,53 @@
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+const HOURS_PER_DAY = 24
+const HOURS_PER_WEEK = HOURS_PER_DAY * 7
+
+export const BACKUP_INTERVAL_PRESETS = [6, 12, 24, 48, HOURS_PER_WEEK]
+
+const messages = defineMessages({
+	hours: {
+		id: 'servers.backups.interval.hours',
+		defaultMessage: '{hours}h',
+	},
+	days: {
+		id: 'servers.backups.interval.days',
+		defaultMessage: '{days, plural, one {# day} other {# days}}',
+	},
+	weekly: {
+		id: 'servers.backups.interval.weekly',
+		defaultMessage: 'Weekly',
+	},
+	everyHours: {
+		id: 'servers.backups.interval.every-hours',
+		defaultMessage: 'Every {hours}h',
+	},
+	everyDays: {
+		id: 'servers.backups.interval.every-days',
+		defaultMessage: 'Every {days, plural, one {day} other {# days}}',
+	},
+})
+
+export function useBackupIntervalFormat() {
+	const { formatMessage } = useVIntl()
+
+	function isWholeDays(hours: number) {
+		return hours > HOURS_PER_DAY && hours % HOURS_PER_DAY === 0
+	}
+
+	function formatInterval(hours: number) {
+		if (hours === HOURS_PER_WEEK) return formatMessage(messages.weekly)
+		if (isWholeDays(hours)) return formatMessage(messages.days, { days: hours / HOURS_PER_DAY })
+		return formatMessage(messages.hours, { hours })
+	}
+
+	function formatFrequency(hours: number) {
+		if (hours === HOURS_PER_WEEK) return formatMessage(messages.weekly)
+		if (isWholeDays(hours)) {
+			return formatMessage(messages.everyDays, { days: hours / HOURS_PER_DAY })
+		}
+		return formatMessage(messages.everyHours, { hours })
+	}
+
+	return { formatInterval, formatFrequency }
+}
diff --git a/packages/ui/src/composables/hosting/backups-selection.ts b/packages/ui/src/composables/hosting/backups-selection.ts
deleted file mode 100644
index fd8e65331d8..00000000000
--- a/packages/ui/src/composables/hosting/backups-selection.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { Archon } from '@modrinth/api-client'
-import type { ComputedRef, Ref } from 'vue'
-import { computed, ref, watch } from 'vue'
-
-type BackupQueueBackup = Archon.BackupsQueue.v1.BackupQueueBackup
-
-export function useBackupsSelection(
-	visibleBackups: Ref<BackupQueueBackup[]>,
-	displayOrderedBackups: ComputedRef<BackupQueueBackup[]>,
-) {
-	const selectedIds = ref<Set<string>>(new Set())
-
-	watch(visibleBackups, () => {
-		const ids = new Set(visibleBackups.value.map((b) => b.id))
-		const next = new Set<string>()
-		for (const id of selectedIds.value) {
-			if (ids.has(id)) next.add(id)
-		}
-		if (next.size !== selectedIds.value.size) {
-			selectedIds.value = next
-		}
-	})
-
-	function toggleSelection(id: string) {
-		const next = new Set(selectedIds.value)
-		if (next.has(id)) next.delete(id)
-		else next.add(id)
-		selectedIds.value = next
-	}
-
-	function selectAll() {
-		selectedIds.value = new Set(visibleBackups.value.map((b) => b.id))
-	}
-
-	function deselectAll() {
-		selectedIds.value = new Set()
-	}
-
-	function toggleSelectAll() {
-		if (allSelected.value) deselectAll()
-		else selectAll()
-	}
-
-	const allSelected = computed(
-		() =>
-			visibleBackups.value.length > 0 &&
-			visibleBackups.value.every((b) => selectedIds.value.has(b.id)),
-	)
-
-	const someSelected = computed(() => {
-		const vis = visibleBackups.value
-		if (vis.length === 0) return false
-		let n = 0
-		for (const b of vis) {
-			if (selectedIds.value.has(b.id)) n++
-		}
-		return n > 0 && n < vis.length
-	})
-
-	const selectedBackups = computed(() =>
-		displayOrderedBackups.value.filter((b) => selectedIds.value.has(b.id)),
-	)
-
-	return {
-		selectedIds,
-		toggleSelection,
-		selectAll,
-		deselectAll,
-		toggleSelectAll,
-		allSelected,
-		someSelected,
-		selectedBackups,
-	}
-}
diff --git a/packages/ui/src/composables/server-backups-queue.ts b/packages/ui/src/composables/server-backups-queue.ts
index e05a7166268..f121dfe34cd 100644
--- a/packages/ui/src/composables/server-backups-queue.ts
+++ b/packages/ui/src/composables/server-backups-queue.ts
@@ -1,4 +1,4 @@
-import type { Archon } from '@modrinth/api-client'
+import type { AbstractModrinthClient, Archon } from '@modrinth/api-client'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, reactive, type Ref } from 'vue'
 
@@ -8,6 +8,17 @@ import { defineMessage } from './i18n'
 
 type ProgressKey = `${string}:${'create' | 'restore'}`
 
+export function serverBackupsQueueQueryOptions(
+	client: AbstractModrinthClient,
+	serverId: string,
+	worldId: string,
+) {
+	return {
+		queryKey: ['backups', 'queue', serverId] as const,
+		queryFn: () => client.archon.backups_queue_v1.listWithOptions(serverId, worldId),
+	}
+}
+
 export function useServerBackupsQueue(serverId: Ref<string>, worldId: Ref<string | null>) {
 	const client = injectModrinthClient()
 	const queryClient = useQueryClient()
@@ -19,15 +30,19 @@ export function useServerBackupsQueue(serverId: Ref<string>, worldId: Ref<string
 
 	const query = useQuery({
 		queryKey,
-		queryFn: () => client.archon.backups_queue_v1.list(serverId.value, worldId.value!),
+		queryFn: () => client.archon.backups_queue_v1.listWithOptions(serverId.value, worldId.value!),
 		enabled: computed(() => !!worldId.value),
 		refetchInterval: (q) => {
-			const data = q.state.data as Archon.BackupsQueue.v1.BackupsQueueResponse | undefined
+			const data = q.state.data as
+				| Archon.BackupsQueue.v1.BackupsQueueWithOptionsResponse
+				| undefined
 			return data?.active_operations?.length ? 30_000 : false
 		},
 	})
 
 	const data = computed(() => query.data.value)
+	const options = computed(() => data.value?.options ?? null)
+	const nextAutoBackupAt = computed(() => data.value?.next_auto_backup_at ?? null)
 	const activeOperations = computed(() => data.value?.active_operations ?? [])
 	const backups = computed(() =>
 		[...(data.value?.backups ?? [])].sort(
@@ -118,6 +133,8 @@ export function useServerBackupsQueue(serverId: Ref<string>, worldId: Ref<string
 		query,
 		queryKey,
 		data,
+		options,
+		nextAutoBackupAt,
 		activeOperations,
 		activeOperationByBackupId,
 		backups,
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
new file mode 100644
index 00000000000..c4e9d00b2e1
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
@@ -0,0 +1,254 @@
+<template>
+	<div class="relative h-full w-full">
+		<ConfirmModal
+			ref="rotationModal"
+			:title="formatMessage(messages.rotationTitle)"
+			:description="formatMessage(messages.rotationDescription, { count: rotatedBackupCount })"
+			:proceed-label="formatMessage(messages.rotationProceed)"
+			:markdown="false"
+			@proceed="saveOptions(true)"
+		/>
+
+		<div v-if="!options" class="flex h-40 items-center justify-center">
+			<SpinnerIcon class="size-6 animate-spin text-secondary" aria-hidden="true" />
+		</div>
+
+		<div v-else class="flex flex-col gap-6">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<label for="auto-backups-toggle" class="text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.autoTitle) }}
+					</label>
+					<span>{{ formatMessage(messages.autoDescription) }}</span>
+				</div>
+				<Toggle
+					id="auto-backups-toggle"
+					v-model="autoEnabled"
+					v-tooltip="manageTooltip"
+					:disabled="!canManageBackups"
+				/>
+			</div>
+
+			<template v-if="autoEnabled">
+				<div class="flex flex-col gap-2.5">
+					<span id="backup-interval-label" class="text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.intervalTitle) }}
+					</span>
+					<Chips
+						v-model="interval"
+						:items="intervalOptions"
+						:format-label="formatInterval"
+						:capitalize="false"
+						:disabled-items="canManageBackups ? [] : intervalOptions"
+						:disabled-tooltip="manageTooltip"
+						:aria-label="formatMessage(messages.intervalTitle)"
+						hide-checkmark-icon
+					/>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<span class="text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.manualSlotsTitle) }}
+					</span>
+					<Slider
+						v-model="manualSlots"
+						:min="0"
+						:max="options.limit"
+						:step="1"
+						:disabled="!canManageBackups"
+						:aria-label="formatMessage(messages.manualSlotsTitle)"
+					/>
+					<span>{{
+						formatMessage(messages.manualSlotsDescription, { limit: options.limit })
+					}}</span>
+				</div>
+			</template>
+		</div>
+
+		<SaveBanner
+			:is-visible="hasUnsavedChanges || isPending"
+			:server-id="serverId"
+			:is-updating="isPending"
+			:save="() => saveOptions(false)"
+			:reset="syncForm"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { SpinnerIcon } from '@modrinth/assets'
+import { useMutation } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+import Chips from '#ui/components/base/Chips.vue'
+import Slider from '#ui/components/base/Slider.vue'
+import Toggle from '#ui/components/base/Toggle.vue'
+import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
+import SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import {
+	BACKUP_INTERVAL_PRESETS,
+	useBackupIntervalFormat,
+} from '#ui/composables/hosting/backup-interval'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useServerPermissions } from '#ui/composables/server-permissions'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const DEFAULT_AUTO_SLOTS = 5
+
+const messages = defineMessages({
+	autoTitle: {
+		id: 'servers.settings.backups.auto.title',
+		defaultMessage: 'Auto backups',
+	},
+	autoDescription: {
+		id: 'servers.settings.backups.auto.description',
+		defaultMessage: 'Automatically back up your server at regular intervals.',
+	},
+	intervalTitle: {
+		id: 'servers.settings.backups.interval.title',
+		defaultMessage: 'Backup interval',
+	},
+	manualSlotsTitle: {
+		id: 'servers.settings.backups.manual-slots.title',
+		defaultMessage: 'Manual backup slots',
+	},
+	manualSlotsDescription: {
+		id: 'servers.settings.backups.manual-slots.description',
+		defaultMessage:
+			'Choose how many of your {limit} backup slots to use for manual and automatic backups.',
+	},
+	rotationTitle: {
+		id: 'servers.settings.backups.rotation.title',
+		defaultMessage: 'Remove auto backups?',
+	},
+	rotationDescription: {
+		id: 'servers.settings.backups.rotation.description',
+		defaultMessage:
+			'Fewer auto backup slots means {count, plural, one {your oldest auto backup} other {your # oldest auto backups}} will be deleted.',
+	},
+	rotationProceed: {
+		id: 'servers.settings.backups.rotation.proceed',
+		defaultMessage: 'Save and delete',
+	},
+	saveSuccessTitle: {
+		id: 'servers.settings.backups.save.success-title',
+		defaultMessage: 'Backup settings updated',
+	},
+	saveErrorTitle: {
+		id: 'servers.settings.backups.save.error-title',
+		defaultMessage: 'Failed to update backup settings',
+	},
+})
+
+const { formatMessage } = useVIntl()
+const { formatInterval } = useBackupIntervalFormat()
+const client = injectModrinthClient()
+const { addNotification } = injectNotificationManager()
+const { serverId, worldId } = injectModrinthServerContext()
+const { canManageBackups, permissionDeniedMessage } = useServerPermissions()
+const { options, invalidate } = useServerBackupsQueue(
+	computed(() => serverId),
+	worldId,
+)
+
+const manageTooltip = computed(() =>
+	canManageBackups.value ? undefined : permissionDeniedMessage.value,
+)
+
+const autoEnabled = ref(false)
+const interval = ref(24)
+const manualSlots = ref(0)
+
+const intervalOptions = computed(() => {
+	const saved = options.value?.interval
+	if (saved === undefined || BACKUP_INTERVAL_PRESETS.includes(saved)) return BACKUP_INTERVAL_PRESETS
+	return [...BACKUP_INTERVAL_PRESETS, saved].sort((a, b) => a - b)
+})
+
+const pendingPatch = computed<Archon.BackupsQueue.v1.PatchWorldBackupOptions | null>(() => {
+	if (!options.value) return null
+	const { limit } = options.value
+	return autoEnabled.value
+		? {
+				split_automatic: limit - manualSlots.value,
+				split_manual: manualSlots.value,
+				interval: interval.value,
+			}
+		: { split_automatic: 0, split_manual: limit }
+})
+
+const hasUnsavedChanges = computed(() => {
+	const saved = options.value
+	if (!saved) return false
+	if (autoEnabled.value !== saved.split_automatic > 0) return true
+	return (
+		autoEnabled.value &&
+		(manualSlots.value !== saved.split_manual || interval.value !== saved.interval)
+	)
+})
+
+function syncForm() {
+	if (!options.value) return
+	autoEnabled.value = options.value.split_automatic > 0
+	interval.value = options.value.interval
+	manualSlots.value = options.value.split_manual
+}
+
+watch(
+	options,
+	(saved, previous) => {
+		if (saved && (!previous || !hasUnsavedChanges.value)) syncForm()
+	},
+	{ immediate: true },
+)
+
+watch(autoEnabled, (enabled) => {
+	const limit = options.value?.limit ?? 0
+	if (enabled && manualSlots.value >= limit) {
+		manualSlots.value = Math.max(limit - DEFAULT_AUTO_SLOTS, 0)
+	}
+})
+
+const rotationModal = ref<InstanceType<typeof ConfirmModal>>()
+const rotatedBackupCount = ref(0)
+
+const { mutateAsync: patchOptions, isPending } = useMutation({
+	mutationFn: ({ acknowledgeRotation }: { acknowledgeRotation: boolean }) =>
+		client.archon.backups_queue_v1.patchOptions(
+			serverId,
+			worldId.value!,
+			pendingPatch.value!,
+			acknowledgeRotation,
+		),
+})
+
+async function saveOptions(acknowledgeRotation: boolean) {
+	if (!canManageBackups.value || !pendingPatch.value) return false
+
+	try {
+		const result = await patchOptions({ acknowledgeRotation })
+		if (!result.applied) {
+			rotatedBackupCount.value = result.backup_ids?.length ?? 0
+			rotationModal.value?.show()
+			return false
+		}
+
+		await invalidate()
+		syncForm()
+		addNotification({ type: 'success', title: formatMessage(messages.saveSuccessTitle) })
+	} catch (error) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.saveErrorTitle),
+			text: error instanceof Error ? error.message : String(error),
+		})
+		return false
+	}
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/index.ts b/packages/ui/src/layouts/shared/server-settings/pages/index.ts
index 1577c34b3d1..feea577932a 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/index.ts
+++ b/packages/ui/src/layouts/shared/server-settings/pages/index.ts
@@ -1,4 +1,5 @@
 export { default as ServerSettingsAdvancedPage } from './advanced.vue'
+export { default as ServerSettingsBackupsPage } from './backups.vue'
 export { default as ServerSettingsGeneralPage } from './general.vue'
 export { default as ServerSettingsInstallationPage } from './installation.vue'
 export { default as ServerSettingsNetworkPage } from './network.vue'
diff --git a/packages/ui/src/layouts/shared/server-settings/tabs.ts b/packages/ui/src/layouts/shared/server-settings/tabs.ts
index 518ceb40d6c..c1c8ade5266 100644
--- a/packages/ui/src/layouts/shared/server-settings/tabs.ts
+++ b/packages/ui/src/layouts/shared/server-settings/tabs.ts
@@ -1,6 +1,7 @@
 import type { Archon } from '@modrinth/api-client'
 import {
 	CardIcon,
+	DatabaseBackupIcon,
 	ListIcon,
 	ModrinthIcon,
 	SettingsIcon,
@@ -15,6 +16,7 @@ export type ServerSettingsTabId =
 	| 'general'
 	| 'installation'
 	| 'network'
+	| 'backups'
 	| 'properties'
 	| 'advanced'
 	| 'support'
@@ -54,6 +56,11 @@ export const serverSettingsTabDefinitions: ServerSettingsTabDefinition[] = [
 		label: 'Network',
 		icon: VersionIcon,
 	},
+	{
+		id: 'backups',
+		label: 'Backups',
+		icon: DatabaseBackupIcon,
+	},
 	{
 		id: 'properties',
 		label: 'Properties',
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
deleted file mode 100644
index 8baa6978917..00000000000
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ /dev/null
@@ -1,859 +0,0 @@
-<template>
-	<Transition name="fade" mode="out-in">
-		<div
-			v-if="error"
-			key="error"
-			class="flex w-full flex-col items-center justify-center gap-4 p-4"
-		>
-			<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-				<div class="flex flex-col items-center text-center">
-					<div class="flex flex-col items-center gap-4">
-						<div class="grid place-content-center rounded-full bg-bg-orange p-4">
-							<IssuesIcon class="size-12 text-orange" />
-						</div>
-						<h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load backups</h1>
-					</div>
-					<p class="text-lg text-secondary">
-						We couldn't load your server's backups. Here's what went wrong:
-					</p>
-					<p>
-						<span class="break-all font-mono">{{ error.message }}</span>
-					</p>
-					<Button type="colored" color="brand" size="xl" class="mt-6 !w-full" @click="refetch"
-						>Retry</Button
-					>
-				</div>
-			</div>
-		</div>
-
-		<div v-else key="content" class="contents">
-			<ReadyTransition :pending="backupsReadyPending">
-				<BackupCreateModal
-					ref="createBackupModal"
-					:backups="completedBackups"
-					:can-create="canManageBackups"
-					:permission-denied-message="permissionDeniedMessage"
-				/>
-				<BackupRenameModal
-					ref="renameBackupModal"
-					:backups="completedBackups"
-					:can-rename="canManageBackups"
-					:permission-denied-message="permissionDeniedMessage"
-				/>
-				<BackupRestoreModal
-					ref="restoreBackupModal"
-					:can-restore="canManageBackups"
-					:permission-denied-message="permissionDeniedMessage"
-				/>
-				<BackupDeleteModal
-					ref="deleteBackupModal"
-					:can-delete="canManageBackups"
-					:permission-denied-message="permissionDeniedMessage"
-					@delete="deleteBackup"
-					@bulk-delete="bulkDelete"
-				/>
-
-				<div
-					v-if="completedBackups.length"
-					class="mb-2 flex flex-wrap items-center justify-between gap-4"
-				>
-					<div class="flex min-w-0 flex-wrap items-center gap-4">
-						<Checkbox
-							:model-value="allSelected"
-							:indeterminate="someSelected"
-							:label="formatMessage(messages.selectAll)"
-							class="shrink-0"
-							label-class="text-secondary font-semibold"
-							@update:model-value="toggleSelectAll"
-						/>
-						<div class="hidden h-6 w-px bg-surface-5 sm:block" />
-						<FilterPills v-model="selectedFilters" :options="filterPillOptions">
-							<template #all>{{ formatMessage(commonMessages.allProjectType) }}</template>
-						</FilterPills>
-					</div>
-					<div class="flex flex-wrap items-center gap-2">
-						<Button
-							type="outlined"
-							:disabled="!server.node || !worldId"
-							:loading="isDownloadingFiles"
-							@click="downloadFiles"
-						>
-							<DownloadIcon class="size-5" />
-							{{ formatMessage(commonMessages.downloadFilesButton) }}
-						</Button>
-						<Button
-							v-tooltip="backupCreationDisabled"
-							type="colored"
-							color="brand"
-							:disabled="!!backupCreationDisabled"
-							@click="showCreateModel"
-						>
-							<PlusIcon class="size-5" />
-							{{ formatMessage(messages.createBackup) }}
-						</Button>
-					</div>
-				</div>
-
-				<div class="flex w-full flex-col gap-1.5">
-					<div
-						v-if="groupedBackups.length === 0"
-						class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
-					>
-						<EmptyState
-							v-if="completedBackups.length === 0"
-							type="empty-inbox"
-							:heading="formatMessage(messages.emptyHeading)"
-							:description="formatMessage(messages.emptyDescription)"
-						>
-							<template #actions>
-								<div class="flex flex-wrap justify-center gap-2">
-									<Button
-										type="outlined"
-										:disabled="!server.node || !worldId"
-										:loading="isDownloadingFiles"
-										@click="downloadFiles"
-									>
-										<DownloadIcon class="size-5" />
-										{{ formatMessage(commonMessages.downloadFilesButton) }}
-									</Button>
-									<Button
-										v-tooltip="backupCreationDisabled"
-										type="colored"
-										color="brand"
-										:disabled="!!backupCreationDisabled"
-										@click="showCreateModel"
-									>
-										<PlusIcon class="size-5" />
-										{{ formatMessage(messages.createBackup) }}
-									</Button>
-								</div>
-							</template>
-						</EmptyState>
-						<EmptyState
-							v-else
-							type="empty-inbox"
-							:heading="formatMessage(messages.filteredEmptyHeading)"
-							:description="formatMessage(messages.filteredEmptyDescription)"
-						>
-							<template #actions>
-								<Button type="outlined" @click="clearBackupFilters">
-									{{ formatMessage(messages.clearFilters) }}
-								</Button>
-							</template>
-						</EmptyState>
-					</div>
-
-					<div v-else class="flex flex-col gap-3">
-						<template v-for="group in groupedBackups" :key="group.label">
-							<div class="flex items-center gap-2">
-								<div class="flex w-5 shrink-0 items-center justify-center">
-									<component :is="group.icon" v-if="group.icon" class="size-5" />
-								</div>
-								<span class="text-lg font-semibold leading-5 text-contrast">{{ group.label }}</span>
-							</div>
-
-							<TransitionGroup name="list" tag="div" class="flex flex-col">
-								<div
-									v-for="(backup, backupIndex) in group.backups"
-									:key="`backup-${backup.id}`"
-									class="flex gap-2"
-									:data-backup-id="backup.id"
-								>
-									<div class="flex w-5 flex-col items-center">
-										<div
-											class="w-px flex-1 bg-surface-5"
-											:class="{ '-mt-1.5': backupIndex === 0 }"
-										/>
-										<Checkbox
-											:model-value="selectedIds.has(backup.id)"
-											:description="formatMessage(messages.selectBackupAria, { name: backup.name })"
-											class="shrink-0"
-											@update:model-value="toggleSelection(backup.id)"
-										/>
-										<div class="w-px flex-1 bg-surface-5" />
-									</div>
-									<BackupItem
-										class="my-1.5 min-w-0 flex-1"
-										:backup="backup"
-										:creator="backupCreator(backup)"
-										:selected="selectedIds.has(backup.id)"
-										:highlighted="highlightedBackupId === backup.id"
-										:restore-disabled="backupRestoreDisabled"
-										:write-disabled="!canManageBackups"
-										:write-disabled-tooltip="permissionDeniedMessage"
-										:kyros-url="server.node?.instance"
-										:jwt="server.node?.token"
-										:show-copy-id-action="showCopyIdAction"
-										:show-debug-info="showDebugInfo"
-										@download="() => triggerDownloadAnimation()"
-										@rename="() => showRenameBackupModal(backup)"
-										@restore="() => showRestoreBackupModal(backup)"
-										@delete="
-											(skipConfirmation?: boolean) =>
-												skipConfirmation ? deleteBackup(backup) : showDeleteBackupModal(backup)
-										"
-									/>
-								</div>
-							</TransitionGroup>
-						</template>
-					</div>
-				</div>
-
-				<FloatingActionBar
-					below-modal
-					:shown="selectedIds.size > 0 || isBulkOperating"
-					:aria-label="
-						formatMessage(messages.bulkBarAriaLabel, {
-							count: isBulkOperating ? bulkTotal : selectedIds.size,
-						})
-					"
-				>
-					<div class="flex items-center gap-0.5">
-						<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-contrast">
-							{{
-								formatMessage(messages.selectedCount, {
-									count: isBulkOperating ? bulkTotal : selectedIds.size,
-								})
-							}}
-						</span>
-						<div class="mx-1 h-6 w-px bg-surface-5" />
-						<Button
-							type="quiet"
-							native-type="button"
-							:disabled="isBulkOperating"
-							:class="{ 'pointer-events-none opacity-60': isBulkOperating }"
-							@click="deselectAll"
-						>
-							{{ formatMessage(commonMessages.clearButton) }}
-						</Button>
-					</div>
-
-					<div v-if="!isBulkOperating" class="ml-auto flex items-center gap-0.5">
-						<Button
-							v-tooltip="!canManageBackups ? permissionDeniedMessage : undefined"
-							type="quiet"
-							color="red"
-							native-type="button"
-							:disabled="!canManageBackups"
-							class="hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
-							@click="confirmBulkDelete"
-						>
-							<TrashIcon />
-							<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
-						</Button>
-					</div>
-
-					<div v-else class="ml-auto flex items-center" aria-live="polite">
-						<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-secondary">
-							{{ formatMessage(messages.bulkDeleting, { total: bulkTotal }) }}
-						</span>
-					</div>
-
-					<div v-if="isBulkOperating" class="absolute bottom-0 left-0 right-0 h-1">
-						<div
-							class="animate-indeterminate h-full rounded-l-full bg-brand"
-							role="progressbar"
-							:aria-valuemin="0"
-							:aria-valuemax="bulkTotal"
-							style="
-								box-shadow: 0px -2px 4px 0px color-mix(in srgb, var(--color-brand) 10%, transparent);
-							"
-						/>
-					</div>
-				</FloatingActionBar>
-
-				<div
-					class="over-the-top-download-animation"
-					:class="{ 'animation-hidden': !overTheTopDownloadAnimation }"
-				>
-					<div>
-						<div
-							class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
-						></div>
-						<div
-							class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
-						></div>
-						<div
-							class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight"
-						>
-							<DownloadIcon class="h-20 w-20 text-contrast" />
-						</div>
-					</div>
-				</div>
-			</ReadyTransition>
-		</div>
-	</Transition>
-</template>
-
-<script setup lang="ts">
-import type { Archon } from '@modrinth/api-client'
-import { CalendarIcon, DownloadIcon, IssuesIcon, PlusIcon, TrashIcon } from '@modrinth/assets'
-import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import dayjs from 'dayjs'
-import type { Component } from 'vue'
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-
-import { Button } from '#ui/components/base/buttons'
-import Checkbox from '#ui/components/base/Checkbox.vue'
-import EmptyState from '#ui/components/base/EmptyState.vue'
-import FilterPills, { type FilterPillOption } from '#ui/components/base/FilterPills.vue'
-import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
-import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
-import BackupCreateModal from '#ui/components/servers/backups/BackupCreateModal.vue'
-import BackupDeleteModal from '#ui/components/servers/backups/BackupDeleteModal.vue'
-import BackupItem from '#ui/components/servers/backups/BackupItem.vue'
-import BackupRenameModal from '#ui/components/servers/backups/BackupRenameModal.vue'
-import BackupRestoreModal from '#ui/components/servers/backups/BackupRestoreModal.vue'
-import { useBackupsSelection } from '#ui/composables/hosting/backups-selection'
-import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
-import { useServerWorldDownload } from '#ui/composables/server-download'
-import { useServerPermissions } from '#ui/composables/server-permissions'
-import { useBulkOperation } from '#ui/layouts/shared/content-tab/composables/bulk-operations'
-import {
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-} from '#ui/providers'
-import { commonMessages } from '#ui/utils/common-messages'
-
-const messages = defineMessages({
-	selectAll: {
-		id: 'servers.backups.toolbar.select-all',
-		defaultMessage: 'Select all',
-	},
-	selectBackupAria: {
-		id: 'servers.backups.select-backup-aria',
-		defaultMessage: 'Select backup {name}',
-	},
-	filterManual: {
-		id: 'servers.backups.toolbar.filter-manual',
-		defaultMessage: 'Manual',
-	},
-	filterAuto: {
-		id: 'servers.backups.toolbar.filter-auto',
-		defaultMessage: 'Auto',
-	},
-	selectedCount: {
-		id: 'servers.backups.bulk-bar.selected-count',
-		defaultMessage: '{count, plural, one {# backup selected} other {# backups selected}}',
-	},
-	bulkBarAriaLabel: {
-		id: 'servers.backups.bulk-bar.aria-label',
-		defaultMessage:
-			'{count, plural, one {Bulk actions for one selected backup} other {Bulk actions for # selected backups}}',
-	},
-	createBackup: {
-		id: 'servers.backups.toolbar.create-backup',
-		defaultMessage: 'Create backup',
-	},
-	emptyHeading: {
-		id: 'servers.backups.empty.heading',
-		defaultMessage: 'No backups yet',
-	},
-	emptyDescription: {
-		id: 'servers.backups.empty.description',
-		defaultMessage: 'Create your first backup',
-	},
-	filteredEmptyHeading: {
-		id: 'servers.backups.filtered-empty.heading',
-		defaultMessage: 'No backups match',
-	},
-	filteredEmptyDescription: {
-		id: 'servers.backups.filtered-empty.description',
-		defaultMessage: 'Try a different filter or clear filters to see all backups.',
-	},
-	clearFilters: {
-		id: 'servers.backups.filtered-empty.clear-filters',
-		defaultMessage: 'Clear filters',
-	},
-	bulkDeleting: {
-		id: 'servers.backups.bulk-bar.deleting',
-		defaultMessage: 'Deleting {total, plural, one {# backup} other {# backups}}...',
-	},
-})
-
-const { addNotification } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-const { canManageBackups, permissionDeniedMessage } = useServerPermissions()
-
-const filterPillOptions = computed<FilterPillOption[]>(() => [
-	{ id: 'manual', label: formatMessage(messages.filterManual) },
-	{ id: 'auto', label: formatMessage(messages.filterAuto) },
-])
-const client = injectModrinthClient()
-const queryClient = useQueryClient()
-const { server, worldId, busyReasons } = injectModrinthServerContext()
-const { downloadWorldFiles } = useServerWorldDownload()
-const isDownloadingFiles = ref(false)
-
-async function downloadFiles() {
-	const node = server.value.node
-	const currentWorldId = worldId.value
-	if (!node || !currentWorldId || isDownloadingFiles.value) return
-
-	isDownloadingFiles.value = true
-	try {
-		await downloadWorldFiles(node.instance, currentWorldId)
-	} finally {
-		isDownloadingFiles.value = false
-	}
-}
-
-const props = defineProps<{
-	isServerRunning: boolean
-	showCopyIdAction?: boolean
-	showDebugInfo?: boolean
-}>()
-
-const route = useRoute()
-const serverId = route.params.id as string
-const BACKUP_HIGHLIGHT_DURATION_MS = 5_000
-
-defineEmits(['onDownload'])
-
-const { backups, invalidate, activeOperationByBackupId, hasActiveCreate, hasActiveRestore, query } =
-	useServerBackupsQueue(
-		computed(() => serverId),
-		worldId,
-	)
-
-const error = computed(() => {
-	const err = query.error.value
-	return err instanceof Error ? err : err ? new Error(String(err)) : null
-})
-const refetch = () => query.refetch()
-
-/** Until world exists we cannot fetch; `isLoading` is false while the query is disabled, which would flash empty state. */
-const backupsReadyPending = computed(
-	() => !worldId.value || (query.data.value === undefined && !query.error.value),
-)
-
-const selectedFilters = ref<string[]>([])
-
-const completedBackups = computed(() => backups.value.filter((backup) => backup.status === 'done'))
-
-const filteredBackups = computed(() => {
-	const f = selectedFilters.value
-	if (f.length === 0 || f.length === 2) {
-		return completedBackups.value
-	}
-	const wantAuto = f.includes('auto')
-	return completedBackups.value.filter((b) => b.automated === wantAuto)
-})
-
-/** Completed backups with a snapshot: queue API schedules deletion. */
-const deleteQueueMutation = useMutation({
-	mutationFn: (backupId: string) =>
-		client.archon.backups_queue_v1.delete(serverId, worldId.value!, backupId),
-	onSuccess: async () => {
-		await invalidate()
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-	},
-})
-
-const cancelOperationMutation = useMutation({
-	mutationFn: async (backup: Archon.BackupsQueue.v1.BackupQueueBackup) => {
-		const activeOperation = activeOperationByBackupId.value.get(backup.id)
-		const historyOperation = backup.history.find(
-			(op) => (op.state === 'pending' || op.state === 'ongoing') && op.operation_id != null,
-		)
-		const operation = activeOperation?.operation_id != null ? activeOperation : historyOperation
-
-		if (operation?.operation_id == null) {
-			await client.archon.backups_v1.delete(serverId, worldId.value!, backup.id)
-		} else if (operation.operation_type === 'create') {
-			await client.archon.backups_queue_v1.cancelCreate(
-				serverId,
-				worldId.value!,
-				operation.operation_id,
-			)
-		} else {
-			await client.archon.backups_queue_v1.cancelRestore(
-				serverId,
-				worldId.value!,
-				operation.operation_id,
-			)
-		}
-	},
-	onSuccess: async () => {
-		await invalidate()
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-	},
-})
-
-/** Bulk delete selected backups via queue API. */
-const deleteManyMutation = useMutation({
-	mutationFn: (backupIds: string[]) =>
-		client.archon.backups_queue_v1.deleteMany(serverId, worldId.value!, backupIds),
-	onSuccess: async () => {
-		await invalidate()
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-	},
-})
-
-type BackupGroup = {
-	label: string
-	icon: Component | null
-	backups: Archon.BackupsQueue.v1.BackupQueueBackup[]
-}
-
-function backupCreator(
-	backup: Archon.BackupsQueue.v1.BackupQueueBackup,
-): Archon.BackupsQueue.v1.UserInfo | null {
-	return (
-		backup.history.find((operation) => operation.operation_type === 'create' && operation.user_info)
-			?.user_info ?? null
-	)
-}
-
-const groupedBackups = computed((): BackupGroup[] => {
-	if (!filteredBackups.value.length) return []
-
-	const now = dayjs()
-	const groups: BackupGroup[] = []
-
-	const addToGroup = (
-		label: string,
-		icon: Component | null,
-		backup: Archon.BackupsQueue.v1.BackupQueueBackup,
-	) => {
-		let group = groups.find((g) => g.label === label)
-		if (!group) {
-			group = { label, icon, backups: [] }
-			groups.push(group)
-		}
-		group.backups.push(backup)
-	}
-
-	for (const backup of filteredBackups.value) {
-		const created = dayjs(backup.created_at)
-		const diffMinutes = now.diff(created, 'minute')
-		const isToday = created.isSame(now, 'day')
-		const isYesterday = created.isSame(now.subtract(1, 'day'), 'day')
-		const diffDays = now.diff(created, 'day')
-
-		if (diffMinutes < 30 && isToday) {
-			addToGroup('Just now', CalendarIcon, backup)
-		} else if (isToday) {
-			addToGroup('Earlier today', CalendarIcon, backup)
-		} else if (isYesterday) {
-			addToGroup('Yesterday', CalendarIcon, backup)
-		} else if (diffDays <= 14) {
-			addToGroup('Last 2 weeks', CalendarIcon, backup)
-		} else {
-			addToGroup('Older', CalendarIcon, backup)
-		}
-	}
-
-	return groups
-})
-
-const displayOrderedBackups = computed(() => groupedBackups.value.flatMap((g) => g.backups))
-const focusedBackupId = computed(() =>
-	typeof route.query.backup === 'string' ? route.query.backup : null,
-)
-const highlightedBackupId = ref<string | null>(null)
-let highlightedBackupTimeout: ReturnType<typeof setTimeout> | null = null
-let lastHighlightedFocusedBackupId: string | null = null
-let lastScrolledFocusedBackupId: string | null = null
-
-watch(
-	[focusedBackupId, displayOrderedBackups],
-	async ([backupId]) => {
-		if (!backupId) {
-			lastHighlightedFocusedBackupId = null
-			lastScrolledFocusedBackupId = null
-			clearHighlightedBackup()
-			return
-		}
-		if (!displayOrderedBackups.value.some((backup) => backup.id === backupId)) return
-
-		if (lastHighlightedFocusedBackupId !== backupId) {
-			lastHighlightedFocusedBackupId = backupId
-			highlightBackup(backupId)
-		}
-		if (lastScrolledFocusedBackupId === backupId) return
-		if (typeof document === 'undefined') return
-
-		lastScrolledFocusedBackupId = backupId
-		await nextTick()
-		const escapedBackupId =
-			typeof CSS !== 'undefined' && CSS.escape
-				? CSS.escape(backupId)
-				: backupId.replaceAll('"', '\\"')
-		document
-			.querySelector(`[data-backup-id="${escapedBackupId}"]`)
-			?.scrollIntoView({ block: 'center', behavior: 'smooth' })
-	},
-	{ immediate: true },
-)
-
-onBeforeUnmount(() => {
-	if (highlightedBackupTimeout) {
-		clearTimeout(highlightedBackupTimeout)
-	}
-})
-
-function highlightBackup(backupId: string) {
-	highlightedBackupId.value = backupId
-
-	if (highlightedBackupTimeout) {
-		clearTimeout(highlightedBackupTimeout)
-	}
-
-	highlightedBackupTimeout = setTimeout(() => {
-		highlightedBackupId.value = null
-		highlightedBackupTimeout = null
-	}, BACKUP_HIGHLIGHT_DURATION_MS)
-}
-
-function clearHighlightedBackup() {
-	highlightedBackupId.value = null
-
-	if (highlightedBackupTimeout) {
-		clearTimeout(highlightedBackupTimeout)
-		highlightedBackupTimeout = null
-	}
-}
-
-const {
-	selectedIds,
-	toggleSelection,
-	deselectAll,
-	toggleSelectAll,
-	allSelected,
-	someSelected,
-	selectedBackups,
-} = useBackupsSelection(filteredBackups, displayOrderedBackups)
-
-const { isBulkOperating, bulkTotal } = useBulkOperation()
-
-const overTheTopDownloadAnimation = ref()
-const createBackupModal = ref<InstanceType<typeof BackupCreateModal>>()
-const renameBackupModal = ref<InstanceType<typeof BackupRenameModal>>()
-const restoreBackupModal = ref<InstanceType<typeof BackupRestoreModal>>()
-const deleteBackupModal = ref<InstanceType<typeof BackupDeleteModal>>()
-
-const backupRestoreDisabled = computed(() => {
-	if (!canManageBackups.value) {
-		return permissionDeniedMessage.value
-	}
-	if (props.isServerRunning) {
-		return 'Cannot restore backup while server is running'
-	}
-	if (busyReasons.value.length > 0) {
-		return formatMessage(busyReasons.value[0].reason)
-	}
-	if (hasActiveCreate.value || hasActiveRestore.value) {
-		return 'A backup operation is already queued or in progress'
-	}
-	return undefined
-})
-
-const backupCreationDisabled = computed(() => {
-	if (!canManageBackups.value) {
-		return permissionDeniedMessage.value
-	}
-	const quota = server.value.backup_quota
-	if (quota !== undefined) {
-		const usedCount = backups.value.length ?? server.value.used_backup_quota ?? 0
-		if (usedCount >= quota) {
-			return `All ${quota} of your backup slots are in use`
-		}
-	}
-	if (busyReasons.value.length > 0) {
-		return formatMessage(busyReasons.value[0].reason)
-	}
-	if (hasActiveCreate.value) {
-		return 'A backup is already queued or in progress'
-	}
-	return undefined
-})
-
-const showCreateModel = () => {
-	if (backupCreationDisabled.value) return
-	createBackupModal.value?.show()
-}
-
-function showRenameBackupModal(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
-	if (!canManageBackups.value) return
-	renameBackupModal.value?.show(backup)
-}
-
-function showRestoreBackupModal(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
-	if (backupRestoreDisabled.value) return
-	restoreBackupModal.value?.show(backup)
-}
-
-function showDeleteBackupModal(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
-	if (!canManageBackups.value) return
-	deleteBackupModal.value?.show(backup)
-}
-
-function clearBackupFilters() {
-	selectedFilters.value = []
-}
-
-function confirmBulkDelete() {
-	if (!canManageBackups.value) return
-	if (!selectedBackups.value.length) return
-	deleteBackupModal.value?.showBulk(selectedBackups.value)
-}
-
-async function bulkDelete(toRemove: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
-	if (!canManageBackups.value) return
-	if (!toRemove.length) return
-
-	isBulkOperating.value = true
-	bulkTotal.value = toRemove.length
-
-	try {
-		await deleteManyMutation.mutateAsync(toRemove.map((b) => b.id))
-	} catch (err) {
-		addNotification({
-			type: 'error',
-			title: `Failed to delete ${toRemove.length} backup${toRemove.length === 1 ? '' : 's'}`,
-			text: err instanceof Error ? err.message : String(err),
-		})
-	} finally {
-		deselectAll()
-		isBulkOperating.value = false
-		bulkTotal.value = 0
-	}
-}
-
-function triggerDownloadAnimation() {
-	overTheTopDownloadAnimation.value = true
-	setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
-}
-
-function useQueueDeleteFor(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
-	return backup.status === 'done'
-}
-
-function deleteBackup(backup?: Archon.BackupsQueue.v1.BackupQueueBackup) {
-	if (!canManageBackups.value) return
-	if (!backup) {
-		addNotification({
-			type: 'error',
-			title: 'Error deleting backup',
-			text: 'Backup is null',
-		})
-		return
-	}
-
-	const onError = (err: unknown) => {
-		const message = err instanceof Error ? err.message : String(err)
-		addNotification({
-			type: 'error',
-			title: 'Error deleting backup',
-			text: message,
-		})
-	}
-
-	if (useQueueDeleteFor(backup)) {
-		deleteQueueMutation.mutate(backup.id, { onError })
-	} else {
-		cancelOperationMutation.mutate(backup, { onError })
-	}
-}
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition:
-		opacity 300ms ease-in-out,
-		transform 300ms ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-	transform: scale(0.98);
-}
-
-.list-enter-active,
-.list-leave-active {
-	transition: all 200ms ease-in-out;
-}
-
-.list-enter-from {
-	opacity: 0;
-	transform: translateY(-10px);
-}
-
-.list-leave-to {
-	opacity: 0;
-	transform: translateY(10px);
-}
-
-.list-move {
-	transition: transform 200ms ease-in-out;
-}
-
-@keyframes indeterminate {
-	0% {
-		width: 20%;
-		margin-left: -20%;
-	}
-	100% {
-		width: 60%;
-		margin-left: 100%;
-	}
-}
-
-.animate-indeterminate {
-	animation: indeterminate 1.5s ease-in-out infinite;
-}
-
-.over-the-top-download-animation {
-	position: fixed;
-	z-index: 100;
-	inset: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	pointer-events: none;
-	scale: 0.5;
-	transition: all 0.5s ease-out;
-	opacity: 1;
-
-	&.animation-hidden {
-		scale: 0.8;
-		opacity: 0;
-
-		.animation-ring-1 {
-			width: 25rem;
-			height: 25rem;
-		}
-		.animation-ring-2 {
-			width: 50rem;
-			height: 50rem;
-		}
-		.animation-ring-3 {
-			width: 100rem;
-			height: 100rem;
-		}
-	}
-
-	> div {
-		position: relative;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: fit-content;
-		height: fit-content;
-
-		> * {
-			position: absolute;
-			scale: 1;
-			transition: all 0.2s ease-out;
-			width: 20rem;
-			height: 20rem;
-		}
-	}
-}
-</style>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
new file mode 100644
index 00000000000..d4e37997576
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
@@ -0,0 +1,274 @@
+<template>
+	<Table
+		v-model:selected-ids="tableSelectedIds"
+		:columns="columns"
+		:data="rows"
+		:row-class="rowClass"
+		:row-below-visible="showDebugInfo"
+		show-selection
+		table-min-width="44rem"
+	>
+		<template #cell-name="{ row: backup }">
+			<span
+				:data-backup-id="backup.id"
+				class="block truncate font-medium text-primary"
+				:title="backup.name"
+			>
+				{{ backup.name }}
+			</span>
+		</template>
+
+		<template #cell-created="{ row: backup }">
+			<span v-tooltip="formatDateTime(backup.created_at)" class="font-medium">
+				{{ formatRelativeTime(backup.created_at) }}
+			</span>
+		</template>
+
+		<template #cell-createdBy="{ row: backup }">
+			<span
+				v-if="backup.creator"
+				class="inline-flex min-w-0 max-w-full items-center gap-2 font-medium text-primary"
+			>
+				<Avatar
+					:src="backup.creator.avatar"
+					:alt="formatMessage(messages.creatorAvatarAlt, { username: backup.creator.name })"
+					:tint-by="backup.creator.name"
+					size="24px"
+					circle
+					no-shadow
+				/>
+				<span class="min-w-0 truncate">{{ backup.creator.name }}</span>
+			</span>
+			<span
+				v-else-if="backup.automated"
+				class="inline-flex h-7 items-center rounded-full border border-solid border-blue bg-highlight-blue px-2.5 text-sm font-semibold text-blue"
+			>
+				{{ formatMessage(messages.autoBadge) }}
+			</span>
+		</template>
+
+		<template #cell-actions="{ row: backup }">
+			<div class="flex items-center justify-end gap-1">
+				<Button
+					v-tooltip="restoreDisabled"
+					type="outlined"
+					size="sm"
+					:disabled="!!restoreDisabled"
+					@click="emit('restore', backup)"
+				>
+					<RotateCounterClockwiseIcon aria-hidden="true" />
+					{{ formatMessage(messages.restore) }}
+				</Button>
+				<TeleportOverflowMenu
+					type="quiet"
+					size="sm"
+					:label="formatMessage(messages.moreOptions, { name: backup.name })"
+					:options="overflowOptions(backup)"
+				>
+					<MoreHorizontalIcon aria-hidden="true" />
+				</TeleportOverflowMenu>
+			</div>
+		</template>
+
+		<template #row-below="{ row: backup }">
+			<pre class="m-2 overflow-x-auto rounded-xl bg-surface-3 p-2 text-xs">{{ backup }}</pre>
+		</template>
+
+		<template #empty-state>
+			<div class="flex h-40 items-center justify-center text-secondary">
+				{{ formatMessage(messages.noResults) }}
+			</div>
+		</template>
+	</Table>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import {
+	ClipboardCopyIcon,
+	DownloadIcon,
+	EditIcon,
+	IntercomBubbleIcon,
+	MoreHorizontalIcon,
+	RotateCounterClockwiseIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import { computed } from 'vue'
+
+import type { TableColumn } from '#ui/components/base'
+import Avatar from '#ui/components/base/Avatar.vue'
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
+import { Button, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import Table from '#ui/components/base/Table.vue'
+import { useFormatDateTime } from '#ui/composables/format-date-time'
+import { useRelativeTime } from '#ui/composables/how-ago'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+type Backup = Archon.BackupsQueue.v1.BackupQueueBackup
+
+const props = defineProps<{
+	backups: Backup[]
+	restoreDisabled?: string
+	writeDisabledTooltip?: string
+	canManage: boolean
+	highlightedId?: string | null
+	showCopyIdAction?: boolean
+	showDebugInfo?: boolean
+	downloadHref: (backup: Backup) => string | undefined
+}>()
+
+const emit = defineEmits<{
+	restore: [backup: Backup]
+	rename: [backup: Backup]
+	delete: [backup: Backup]
+}>()
+
+const selectedIds = defineModel<string[]>('selectedIds', { required: true })
+const tableSelectedIds = computed<unknown[]>({
+	get: () => selectedIds.value,
+	set: (ids) => {
+		selectedIds.value = ids.filter((id): id is string => typeof id === 'string')
+	},
+})
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({ dateStyle: 'long', timeStyle: 'short' })
+
+const messages = defineMessages({
+	nameColumn: {
+		id: 'servers.backups.history.column.name',
+		defaultMessage: 'Name',
+	},
+	createdColumn: {
+		id: 'servers.backups.history.column.created',
+		defaultMessage: 'Created',
+	},
+	createdByColumn: {
+		id: 'servers.backups.history.column.created-by',
+		defaultMessage: 'Created by',
+	},
+	autoBadge: {
+		id: 'servers.backups.history.auto-badge',
+		defaultMessage: 'Auto',
+	},
+	support: {
+		id: 'servers.backups.history.creator.support',
+		defaultMessage: 'Support',
+	},
+	creatorAvatarAlt: {
+		id: 'servers.backups.history.creator-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
+	restore: {
+		id: 'servers.backups.history.restore',
+		defaultMessage: 'Restore',
+	},
+	rename: {
+		id: 'servers.backups.history.rename',
+		defaultMessage: 'Rename',
+	},
+	moreOptions: {
+		id: 'servers.backups.history.more-options',
+		defaultMessage: 'More options for {name}',
+	},
+	noResults: {
+		id: 'servers.backups.history.no-results',
+		defaultMessage: 'No backups match your search.',
+	},
+})
+
+const columns = computed<TableColumn<'name' | 'created' | 'createdBy' | 'actions'>[]>(() => [
+	{ key: 'name', label: formatMessage(messages.nameColumn) },
+	{ key: 'created', label: formatMessage(messages.createdColumn), width: '20%' },
+	{ key: 'createdBy', label: formatMessage(messages.createdByColumn), width: '24%' },
+	{
+		key: 'actions',
+		label: formatMessage(commonMessages.actionsLabel),
+		width: '11rem',
+		align: 'right',
+	},
+])
+
+const rows = computed(() =>
+	props.backups.map((backup) => {
+		const user = backup.history.find(
+			(operation) => operation.operation_type === 'create' && operation.user_info,
+		)?.user_info
+		const isSupport = user?.id === 'support'
+
+		return {
+			...backup,
+			creator: user
+				? {
+						name: isSupport ? formatMessage(messages.support) : user.username,
+						avatar: isSupport ? IntercomBubbleIcon : (user.avatar_url ?? undefined),
+					}
+				: null,
+		}
+	}),
+)
+
+function rowClass(backup: Backup) {
+	return backup.id === props.highlightedId ? 'backup-row-highlighted' : ''
+}
+
+function overflowOptions(backup: Backup): ButtonMenuOption[] {
+	const writeTooltip = props.canManage ? undefined : props.writeDisabledTooltip
+	const downloadHref = props.downloadHref(backup)
+
+	return [
+		{
+			id: 'copy-id',
+			label: formatMessage(commonMessages.copyIdButton),
+			icon: ClipboardCopyIcon,
+			shown: !!props.showCopyIdAction,
+			action: () => navigator.clipboard.writeText(backup.id),
+		},
+		{ type: 'divider', shown: !!props.showCopyIdAction },
+		{
+			id: 'download',
+			type: 'link',
+			label: formatMessage(commonMessages.downloadButton),
+			icon: DownloadIcon,
+			href: downloadHref,
+			disabled: !downloadHref,
+		},
+		{
+			id: 'rename',
+			label: formatMessage(messages.rename),
+			icon: EditIcon,
+			disabled: !props.canManage,
+			tooltip: writeTooltip,
+			action: () => emit('rename', backup),
+		},
+		{ type: 'divider' },
+		{
+			id: 'delete',
+			label: formatMessage(commonMessages.deleteLabel),
+			icon: TrashIcon,
+			tone: 'red',
+			disabled: !props.canManage,
+			tooltip: writeTooltip,
+			action: () => emit('delete', backup),
+		},
+	]
+}
+</script>
+
+<style scoped>
+@keyframes backup-row-highlight {
+	0%,
+	100% {
+		background-color: transparent;
+	}
+	50% {
+		background-color: var(--color-purple-highlight);
+	}
+}
+
+:deep(.backup-row-highlighted) {
+	animation: backup-row-highlight 1.25s ease-in-out infinite;
+}
+</style>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
new file mode 100644
index 00000000000..2965ecf2fc1
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
@@ -0,0 +1,414 @@
+<template>
+	<div v-if="error" class="flex w-full justify-center p-4">
+		<ErrorInformationCard
+			:title="formatMessage(messages.loadErrorTitle)"
+			:description="formatMessage(messages.loadErrorDescription)"
+			:icon="IssuesIcon"
+			:error-details="[
+				{ label: formatMessage(commonMessages.errorLabel), value: error.message, type: 'block' },
+			]"
+			:action="{ label: formatMessage(commonMessages.retryButton), onClick: () => query.refetch() }"
+		/>
+	</div>
+
+	<ReadyTransition v-else :pending="readyPending">
+		<div class="flex flex-col gap-6">
+			<div class="grid gap-4 md:grid-cols-2">
+				<SlotCard
+					:title="formatMessage(messages.autoTitle)"
+					:icon="CalendarClockIcon"
+					:used="autoUsed"
+					:limit="options?.split_automatic ?? 0"
+					:off-label="autoEnabled ? undefined : formatMessage(messages.autoOff)"
+					color="blue"
+				>
+					<template v-if="autoEnabled && options">
+						<span>{{ formatFrequency(options.interval) }}</span>
+						<BulletDivider />
+						<span>{{ nextAutoBackupLabel }}</span>
+					</template>
+					<span v-else>{{ formatMessage(messages.autoOffDescription) }}</span>
+				</SlotCard>
+				<SlotCard
+					:title="formatMessage(messages.manualTitle)"
+					:icon="SaveIcon"
+					:used="manualUsed"
+					:limit="options?.split_manual ?? 0"
+					color="purple"
+				>
+					{{ formatMessage(messages.manualDescription) }}
+				</SlotCard>
+			</div>
+
+			<section class="flex flex-col gap-4">
+				<h2 class="m-0 text-2xl font-semibold text-contrast">
+					{{ formatMessage(messages.historyTitle) }}
+				</h2>
+
+				<div class="flex flex-col gap-2 md:flex-row">
+					<Input
+						v-model="search"
+						:icon="SearchIcon"
+						type="search"
+						size="medium"
+						wrapper-class="min-w-0 flex-1"
+						:placeholder="
+							formatMessage(messages.searchPlaceholder, { count: completedBackups.length })
+						"
+						:aria-label="formatMessage(messages.searchLabel)"
+						:clear-label="formatMessage(commonMessages.clearButton)"
+						clearable
+					/>
+					<div class="flex shrink-0 gap-2">
+						<Button
+							v-if="settingsModal"
+							size="lg"
+							class="flex-1 md:flex-none"
+							@click="settingsModal.openServerSettings({ tabId: 'backups' })"
+						>
+							<Settings2Icon aria-hidden="true" />
+							{{ formatMessage(commonMessages.settingsLabel) }}
+						</Button>
+						<Button
+							v-tooltip="createDisabledReason"
+							type="colored"
+							color="brand"
+							size="lg"
+							class="flex-1 md:flex-none"
+							:disabled="!!createDisabledReason"
+							@click="createModal?.show()"
+						>
+							<PlusIcon aria-hidden="true" />
+							{{ formatMessage(messages.createBackup) }}
+						</Button>
+					</div>
+				</div>
+
+				<EmptyState
+					v-if="completedBackups.length === 0"
+					type="empty-inbox"
+					:heading="formatMessage(messages.emptyHeading)"
+					:description="formatMessage(messages.emptyDescription)"
+				/>
+				<HistoryTable
+					v-else
+					v-model:selected-ids="selectedIds"
+					:backups="filteredBackups"
+					:restore-disabled="restoreDisabledReason"
+					:can-manage="canManageBackups"
+					:write-disabled-tooltip="permissionDeniedMessage"
+					:highlighted-id="highlightedBackupId"
+					:show-copy-id-action="showCopyIdAction"
+					:show-debug-info="showDebugInfo"
+					:download-href="downloadHref"
+					@restore="(backup) => restoreModal?.show(backup)"
+					@rename="(backup) => renameModal?.show(backup)"
+					@delete="(backup) => deleteModal?.show(backup)"
+				/>
+			</section>
+		</div>
+
+		<FloatingActionBar
+			:shown="selectedBackups.length > 0"
+			:aria-label="formatMessage(messages.selectedCount, { count: selectedBackups.length })"
+		>
+			<span class="px-4 py-2.5 font-semibold tabular-nums text-contrast">
+				{{ formatMessage(messages.selectedCount, { count: selectedBackups.length }) }}
+			</span>
+			<div class="mx-1 h-6 w-px bg-surface-5" />
+			<Button type="quiet" :disabled="deleteMutation.isPending.value" @click="selectedIds = []">
+				{{ formatMessage(commonMessages.clearButton) }}
+			</Button>
+			<Button
+				v-tooltip="canManageBackups ? undefined : permissionDeniedMessage"
+				type="quiet"
+				color="red"
+				interaction="filled"
+				class="ml-auto"
+				:disabled="!canManageBackups"
+				:loading="deleteMutation.isPending.value"
+				@click="deleteModal?.showBulk(selectedBackups)"
+			>
+				<TrashIcon aria-hidden="true" />
+				{{ formatMessage(commonMessages.deleteLabel) }}
+			</Button>
+		</FloatingActionBar>
+
+		<BackupCreateModal
+			ref="createModal"
+			:backups="completedBackups"
+			:can-create="canManageBackups"
+			:permission-denied-message="permissionDeniedMessage"
+		/>
+		<BackupRenameModal
+			ref="renameModal"
+			:backups="completedBackups"
+			:can-rename="canManageBackups"
+			:permission-denied-message="permissionDeniedMessage"
+		/>
+		<BackupRestoreModal
+			ref="restoreModal"
+			:can-restore="canManageBackups"
+			:permission-denied-message="permissionDeniedMessage"
+		/>
+		<BackupDeleteModal
+			ref="deleteModal"
+			:can-delete="canManageBackups"
+			:permission-denied-message="permissionDeniedMessage"
+			@delete="(backup) => backup && deleteBackups([backup])"
+			@bulk-delete="deleteBackups"
+		/>
+	</ReadyTransition>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import {
+	CalendarClockIcon,
+	IssuesIcon,
+	PlusIcon,
+	SaveIcon,
+	SearchIcon,
+	Settings2Icon,
+	TrashIcon,
+} from '@modrinth/assets'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import BulletDivider from '#ui/components/base/BulletDivider.vue'
+import { Button } from '#ui/components/base/buttons'
+import EmptyState from '#ui/components/base/EmptyState.vue'
+import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
+import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
+import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
+import BackupCreateModal from '#ui/components/servers/backups/BackupCreateModal.vue'
+import BackupDeleteModal from '#ui/components/servers/backups/BackupDeleteModal.vue'
+import BackupRenameModal from '#ui/components/servers/backups/BackupRenameModal.vue'
+import BackupRestoreModal from '#ui/components/servers/backups/BackupRestoreModal.vue'
+import { useBackupIntervalFormat } from '#ui/composables/hosting/backup-interval'
+import { useRelativeTime } from '#ui/composables/how-ago'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useServerPermissions } from '#ui/composables/server-permissions'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+import { injectServerSettingsModal } from '#ui/providers/server-settings-modal'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import HistoryTable from './history-table.vue'
+import SlotCard from './slot-card.vue'
+import { useFocusedBackup } from './use-focused-backup'
+
+type Backup = Archon.BackupsQueue.v1.BackupQueueBackup
+
+const props = defineProps<{
+	isServerRunning: boolean
+	showCopyIdAction?: boolean
+	showDebugInfo?: boolean
+}>()
+
+const messages = defineMessages({
+	loadErrorTitle: {
+		id: 'servers.backups.load-error.title',
+		defaultMessage: 'Failed to load backups',
+	},
+	loadErrorDescription: {
+		id: 'servers.backups.load-error.description',
+		defaultMessage: "We couldn't load your server's backups.",
+	},
+	autoTitle: {
+		id: 'servers.backups.slots.auto.title',
+		defaultMessage: 'Auto backups',
+	},
+	autoOff: {
+		id: 'servers.backups.slots.auto.off',
+		defaultMessage: 'Off',
+	},
+	autoOffDescription: {
+		id: 'servers.backups.slots.auto.off-description',
+		defaultMessage: 'Turn on auto backups in settings',
+	},
+	nextBackup: {
+		id: 'servers.backups.slots.auto.next',
+		defaultMessage: 'Next {time}',
+	},
+	nextBackupSoon: {
+		id: 'servers.backups.slots.auto.next-soon',
+		defaultMessage: 'Next backup starting soon',
+	},
+	manualTitle: {
+		id: 'servers.backups.slots.manual.title',
+		defaultMessage: 'Manual backups',
+	},
+	manualDescription: {
+		id: 'servers.backups.slots.manual.description',
+		defaultMessage: 'Manually created',
+	},
+	historyTitle: {
+		id: 'servers.backups.history.title',
+		defaultMessage: 'Backup history',
+	},
+	searchPlaceholder: {
+		id: 'servers.backups.history.search-placeholder',
+		defaultMessage: 'Search {count, plural, one {# backup} other {# backups}}...',
+	},
+	searchLabel: {
+		id: 'servers.backups.history.search-label',
+		defaultMessage: 'Search backups',
+	},
+	createBackup: {
+		id: 'servers.backups.toolbar.create-backup',
+		defaultMessage: 'Create backup',
+	},
+	emptyHeading: {
+		id: 'servers.backups.empty.heading',
+		defaultMessage: 'No backups yet',
+	},
+	emptyDescription: {
+		id: 'servers.backups.empty.description',
+		defaultMessage: 'Create your first backup',
+	},
+	selectedCount: {
+		id: 'servers.backups.bulk-bar.selected-count',
+		defaultMessage: '{count, plural, one {# backup selected} other {# backups selected}}',
+	},
+	manualSlotsFull: {
+		id: 'servers.backups.create.slots-full',
+		defaultMessage:
+			'All {limit, plural, one {# manual backup slot is} other {# manual backup slots are}} in use',
+	},
+	backupInProgress: {
+		id: 'servers.backups.create.in-progress',
+		defaultMessage: 'A backup is already queued or in progress',
+	},
+	restoreWhileRunning: {
+		id: 'servers.backups.restore.server-running',
+		defaultMessage: 'Stop your server before restoring a backup',
+	},
+	operationInProgress: {
+		id: 'servers.backups.restore.operation-in-progress',
+		defaultMessage: 'A backup operation is already queued or in progress',
+	},
+	deleteError: {
+		id: 'servers.backups.delete.error',
+		defaultMessage: 'Failed to delete {count, plural, one {backup} other {# backups}}',
+	},
+})
+
+const LIVE_STATUSES: Backup['status'][] = ['pending', 'in_progress', 'done']
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const { formatFrequency } = useBackupIntervalFormat()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const { addNotification } = injectNotificationManager()
+const { server, serverId, worldId, busyReasons } = injectModrinthServerContext()
+const settingsModal = injectServerSettingsModal(null)
+const { canManageBackups, permissionDeniedMessage } = useServerPermissions()
+
+const { query, backups, options, nextAutoBackupAt, hasActiveCreate, hasActiveRestore, invalidate } =
+	useServerBackupsQueue(
+		computed(() => serverId),
+		worldId,
+	)
+
+const error = computed(() => query.error.value)
+const readyPending = computed(
+	() => !worldId.value || (query.data.value === undefined && !query.error.value),
+)
+
+const completedBackups = computed(() => backups.value.filter((b) => b.status === 'done'))
+const search = ref('')
+const filteredBackups = computed(() => {
+	const term = search.value.trim().toLowerCase()
+	if (!term) return completedBackups.value
+	return completedBackups.value.filter((backup) => backup.name.toLowerCase().includes(term))
+})
+
+const selectedIds = ref<string[]>([])
+const selectedBackups = computed(() =>
+	completedBackups.value.filter((backup) => selectedIds.value.includes(backup.id)),
+)
+
+const { highlightedBackupId } = useFocusedBackup(
+	computed(() => completedBackups.value.map((backup) => backup.id)),
+)
+
+const autoEnabled = computed(() => (options.value?.split_automatic ?? 0) > 0)
+const autoUsed = computed(() => backups.value.filter((b) => b.rotates_at).length)
+const manualUsed = computed(
+	() => backups.value.filter((b) => !b.automated && LIVE_STATUSES.includes(b.status)).length,
+)
+
+const nextAutoBackupLabel = computed(() => {
+	const next = nextAutoBackupAt.value
+	if (!next || new Date(next).getTime() <= Date.now()) {
+		return formatMessage(messages.nextBackupSoon)
+	}
+	return formatMessage(messages.nextBackup, { time: formatRelativeTime(next) })
+})
+
+const createDisabledReason = computed(() => {
+	if (!canManageBackups.value) return permissionDeniedMessage.value
+	const limit = options.value?.split_manual ?? 0
+	if (manualUsed.value >= limit) return formatMessage(messages.manualSlotsFull, { limit })
+	if (busyReasons.value.length > 0) return formatMessage(busyReasons.value[0].reason)
+	if (hasActiveCreate.value) return formatMessage(messages.backupInProgress)
+	return undefined
+})
+
+const restoreDisabledReason = computed(() => {
+	if (!canManageBackups.value) return permissionDeniedMessage.value
+	if (props.isServerRunning) return formatMessage(messages.restoreWhileRunning)
+	if (busyReasons.value.length > 0) return formatMessage(busyReasons.value[0].reason)
+	if (hasActiveCreate.value || hasActiveRestore.value) {
+		return formatMessage(messages.operationInProgress)
+	}
+	return undefined
+})
+
+function downloadHref(backup: Backup) {
+	const node = server.value.node
+	if (!node) return undefined
+	return `https://${node.instance}/modrinth/v0/backups/${backup.id}/download?auth=${node.token}`
+}
+
+const createModal = ref<InstanceType<typeof BackupCreateModal>>()
+const renameModal = ref<InstanceType<typeof BackupRenameModal>>()
+const restoreModal = ref<InstanceType<typeof BackupRestoreModal>>()
+const deleteModal = ref<InstanceType<typeof BackupDeleteModal>>()
+
+const deleteMutation = useMutation({
+	mutationFn: (backupIds: string[]) =>
+		backupIds.length === 1
+			? client.archon.backups_queue_v1.delete(serverId, worldId.value!, backupIds[0])
+			: client.archon.backups_queue_v1.deleteMany(serverId, worldId.value!, backupIds),
+	onSuccess: async () => {
+		await invalidate()
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+	},
+})
+
+function deleteBackups(toDelete: Backup[]) {
+	if (!canManageBackups.value || toDelete.length === 0) return
+
+	const ids = toDelete.map((backup) => backup.id)
+	deleteMutation.mutate(ids, {
+		onSuccess: () => {
+			selectedIds.value = selectedIds.value.filter((id) => !ids.includes(id))
+		},
+		onError: (err) => {
+			addNotification({
+				type: 'error',
+				title: formatMessage(messages.deleteError, { count: ids.length }),
+				text: err instanceof Error ? err.message : String(err),
+			})
+		},
+	})
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
new file mode 100644
index 00000000000..e8a921aa522
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
@@ -0,0 +1,66 @@
+<template>
+	<div
+		class="flex flex-col gap-4 rounded-2xl border border-solid border-surface-4 bg-surface-2 p-5"
+	>
+		<div class="flex items-start justify-between gap-4">
+			<div class="flex min-w-0 flex-col gap-2">
+				<span class="text-lg font-medium text-secondary">{{ title }}</span>
+				<span v-if="offLabel" class="text-3xl font-semibold text-contrast">{{ offLabel }}</span>
+				<span v-else class="text-2xl font-semibold text-contrast">
+					<IntlFormatted :message-id="messages.slotsUsed" :values="{ used, limit }">
+						<template #used="{ children }">
+							<span class="text-4xl font-bold tabular-nums">
+								<component :is="() => children" />
+							</span>
+						</template>
+					</IntlFormatted>
+				</span>
+			</div>
+			<component :is="icon" class="size-8 shrink-0 text-secondary" aria-hidden="true" />
+		</div>
+
+		<div
+			class="flex h-2 gap-1.5"
+			role="progressbar"
+			:aria-label="title"
+			:aria-valuemin="0"
+			:aria-valuemax="limit"
+			:aria-valuenow="Math.min(used, limit)"
+		>
+			<div
+				v-for="segment in limit"
+				:key="segment"
+				class="h-full flex-1 rounded-full"
+				:class="[color === 'blue' ? 'bg-blue' : 'bg-purple', { 'opacity-30': segment > used }]"
+			/>
+			<div v-if="limit === 0" class="h-full flex-1 rounded-full bg-surface-4" />
+		</div>
+
+		<div class="flex flex-wrap items-center gap-2 font-medium text-secondary">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
+import { defineMessages } from '#ui/composables/i18n'
+
+defineProps<{
+	title: string
+	icon: Component
+	used: number
+	limit: number
+	color: 'blue' | 'purple'
+	offLabel?: string
+}>()
+
+const messages = defineMessages({
+	slotsUsed: {
+		id: 'servers.backups.slots.used',
+		defaultMessage: '<used>{used}</used> / {limit, plural, one {# slot} other {# slots}}',
+	},
+})
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts b/packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts
new file mode 100644
index 00000000000..25f8053be6a
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts
@@ -0,0 +1,48 @@
+import { computed, nextTick, onBeforeUnmount, type Ref, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const HIGHLIGHT_DURATION_MS = 5_000
+
+export function useFocusedBackup(backupIds: Ref<string[]>) {
+	const route = useRoute()
+	const focusedBackupId = computed(() =>
+		typeof route.query.backup === 'string' ? route.query.backup : null,
+	)
+
+	const highlightedBackupId = ref<string | null>(null)
+	let handledBackupId: string | null = null
+	let highlightTimeout: ReturnType<typeof setTimeout> | undefined
+
+	function clearHighlight() {
+		highlightedBackupId.value = null
+		clearTimeout(highlightTimeout)
+	}
+
+	watch(
+		[focusedBackupId, backupIds],
+		async ([backupId, ids]) => {
+			if (!backupId) {
+				handledBackupId = null
+				clearHighlight()
+				return
+			}
+			if (backupId === handledBackupId || !ids.includes(backupId)) return
+
+			handledBackupId = backupId
+			highlightedBackupId.value = backupId
+			clearTimeout(highlightTimeout)
+			highlightTimeout = setTimeout(clearHighlight, HIGHLIGHT_DURATION_MS)
+
+			if (typeof document === 'undefined') return
+			await nextTick()
+			document
+				.querySelector(`[data-backup-id="${CSS.escape(backupId)}"]`)
+				?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+		},
+		{ immediate: true },
+	)
+
+	onBeforeUnmount(() => clearTimeout(highlightTimeout))
+
+	return { highlightedBackupId }
+}
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 59ba8d71097..cd9d3a6076e 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -1,6 +1,6 @@
 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'
+export { default as ServersManageBackupsPage } from './hosting/manage/backups/index.vue'
 export { default as ServersManageContentPage } from './hosting/manage/content.vue'
 export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
 export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
diff --git a/packages/ui/src/locales/cs-CZ/index.json b/packages/ui/src/locales/cs-CZ/index.json
index b0e4c623850..22175966e33 100644
--- a/packages/ui/src/locales/cs-CZ/index.json
+++ b/packages/ui/src/locales/cs-CZ/index.json
@@ -4310,9 +4310,6 @@
   "servers.backups.delete-modal.header": {
     "defaultMessage": "Smazat {count, plural, one {zálohu} other {zálohy}}"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Vymazat filtry"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Automaticky"
   },
@@ -4337,15 +4334,6 @@
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Vytvořit zálohu"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatický"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manuální"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Vybrat vše"
-  },
   "servers.grant-access-modal.already-member-tooltip": {
     "defaultMessage": "Uživatel je již pozván"
   },
@@ -5190,4 +5178,3 @@
     "defaultMessage": "Typ"
   }
 }
-
diff --git a/packages/ui/src/locales/de-CH/index.json b/packages/ui/src/locales/de-CH/index.json
index 774034f023b..60829d0f8b4 100644
--- a/packages/ui/src/locales/de-CH/index.json
+++ b/packages/ui/src/locales/de-CH/index.json
@@ -5240,12 +5240,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Wiederherstellung aus Sicherung"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "Massenactionen für {count, plural, one {ein ausgewähltes Backup} other {# ausgewählte Backups}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Lösche {total, plural, one {eine Sicherung} other {# Sicherungen}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# Sicherung ausgewählt} other {# Sicherungen ausgewählt}}"
   },
@@ -5270,15 +5264,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Noch keine Sicherungen"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Filter entfernen"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Versuche es mit einem anderen Filter oder entferne alle Filter, um alle Sicherungen anzuzeigen."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Keine übereinstimmenden Sicherungen"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -5300,21 +5285,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Wiederherstellen"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Sicherung {name} auswählen"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Sicherung erstellen"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatisch"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manuell"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Alle auswählen"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Backup-Erstellung im gange"
   },
@@ -7275,4 +7248,3 @@
     "defaultMessage": "Typ"
   }
 }
-
diff --git a/packages/ui/src/locales/de-DE/index.json b/packages/ui/src/locales/de-DE/index.json
index 4a2bd95729d..a62b9d7e789 100644
--- a/packages/ui/src/locales/de-DE/index.json
+++ b/packages/ui/src/locales/de-DE/index.json
@@ -5240,12 +5240,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Wiederherstellung aus Sicherung"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Massenaktionen für ein ausgewähltes Backup} other {Massenaktionen für # ausgewählte Backups}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "{total, plural, one {# Sicherung wird} other {# Sicherungen werden}} gelöscht..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# Sicherung ausgewählt} other {# Sicherungen ausgewählt}}"
   },
@@ -5270,15 +5264,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Noch keine Sicherungen"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Filter entfernen"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Versuche es mit einem anderen Filter oder entferne alle Filter, um alle Sicherungen anzuzeigen."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Keine übereinstimmenden Sicherungen"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -5300,21 +5285,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Wiederherstellen"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Sicherung {name} auswählen"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Sicherung erstellen"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatisch"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manuell"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Alle auswählen"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Sicherung wird erstellt"
   },
@@ -7275,4 +7248,3 @@
     "defaultMessage": "Typ"
   }
 }
-
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 8f6d71baecf..7270fc23f41 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -5315,15 +5315,15 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Restoring from backup"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Bulk actions for one selected backup} other {Bulk actions for # selected backups}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Deleting {total, plural, one {# backup} other {# backups}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# backup selected} other {# backups selected}}"
   },
+  "servers.backups.create.in-progress": {
+    "defaultMessage": "A backup is already queued or in progress"
+  },
+  "servers.backups.create.slots-full": {
+    "defaultMessage": "All {limit, plural, one {# manual backup slot is} other {# manual backup slots are}} in use"
+  },
   "servers.backups.delete-modal.admonition-body": {
     "defaultMessage": "Once deleted, {count, plural, one {this backup cannot} other {these backups cannot}} be recovered. Deletion is permanent."
   },
@@ -5339,20 +5339,68 @@
   "servers.backups.delete-modal.header": {
     "defaultMessage": "Delete {count, plural, one {backup} other {backups}}"
   },
+  "servers.backups.delete.error": {
+    "defaultMessage": "Failed to delete {count, plural, one {backup} other {# backups}}"
+  },
   "servers.backups.empty.description": {
     "defaultMessage": "Create your first backup"
   },
   "servers.backups.empty.heading": {
     "defaultMessage": "No backups yet"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Clear filters"
+  "servers.backups.history.auto-badge": {
+    "defaultMessage": "Auto"
+  },
+  "servers.backups.history.column.created": {
+    "defaultMessage": "Created"
+  },
+  "servers.backups.history.column.created-by": {
+    "defaultMessage": "Created by"
+  },
+  "servers.backups.history.column.name": {
+    "defaultMessage": "Name"
+  },
+  "servers.backups.history.creator-avatar-alt": {
+    "defaultMessage": "{username}'s avatar"
+  },
+  "servers.backups.history.creator.support": {
+    "defaultMessage": "Support"
+  },
+  "servers.backups.history.more-options": {
+    "defaultMessage": "More options for {name}"
+  },
+  "servers.backups.history.no-results": {
+    "defaultMessage": "No backups match your search."
+  },
+  "servers.backups.history.rename": {
+    "defaultMessage": "Rename"
+  },
+  "servers.backups.history.restore": {
+    "defaultMessage": "Restore"
+  },
+  "servers.backups.history.search-label": {
+    "defaultMessage": "Search backups"
+  },
+  "servers.backups.history.search-placeholder": {
+    "defaultMessage": "Search {count, plural, one {# backup} other {# backups}}..."
+  },
+  "servers.backups.history.title": {
+    "defaultMessage": "Backup history"
+  },
+  "servers.backups.interval.days": {
+    "defaultMessage": "{days, plural, one {# day} other {# days}}"
   },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Try a different filter or clear filters to see all backups."
+  "servers.backups.interval.every-days": {
+    "defaultMessage": "Every {days, plural, one {day} other {# days}}"
   },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "No backups match"
+  "servers.backups.interval.every-hours": {
+    "defaultMessage": "Every {hours}h"
+  },
+  "servers.backups.interval.hours": {
+    "defaultMessage": "{hours}h"
+  },
+  "servers.backups.interval.weekly": {
+    "defaultMessage": "Weekly"
   },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
@@ -5375,20 +5423,44 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restore"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Select backup {name}"
+  "servers.backups.load-error.description": {
+    "defaultMessage": "We couldn't load your server's backups."
   },
-  "servers.backups.toolbar.create-backup": {
-    "defaultMessage": "Create backup"
+  "servers.backups.load-error.title": {
+    "defaultMessage": "Failed to load backups"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Auto"
+  "servers.backups.restore.operation-in-progress": {
+    "defaultMessage": "A backup operation is already queued or in progress"
   },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manual"
+  "servers.backups.restore.server-running": {
+    "defaultMessage": "Stop your server before restoring a backup"
   },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Select all"
+  "servers.backups.slots.auto.next": {
+    "defaultMessage": "Next {time}"
+  },
+  "servers.backups.slots.auto.next-soon": {
+    "defaultMessage": "Next backup starting soon"
+  },
+  "servers.backups.slots.auto.off": {
+    "defaultMessage": "Off"
+  },
+  "servers.backups.slots.auto.off-description": {
+    "defaultMessage": "Turn on auto backups in settings"
+  },
+  "servers.backups.slots.auto.title": {
+    "defaultMessage": "Auto backups"
+  },
+  "servers.backups.slots.manual.description": {
+    "defaultMessage": "Manually created"
+  },
+  "servers.backups.slots.manual.title": {
+    "defaultMessage": "Manual backups"
+  },
+  "servers.backups.slots.used": {
+    "defaultMessage": "<used>{used}</used> / {limit, plural, one {# slot} other {# slots}}"
+  },
+  "servers.backups.toolbar.create-backup": {
+    "defaultMessage": "Create backup"
   },
   "servers.busy.backup-creating": {
     "defaultMessage": "Backup creation in progress"
@@ -6014,6 +6086,36 @@
   "servers.settings.advanced.sftp.roll-credentials-success-title": {
     "defaultMessage": "SFTP credentials rotated"
   },
+  "servers.settings.backups.auto.description": {
+    "defaultMessage": "Automatically back up your server at regular intervals."
+  },
+  "servers.settings.backups.auto.title": {
+    "defaultMessage": "Auto backups"
+  },
+  "servers.settings.backups.interval.title": {
+    "defaultMessage": "Backup interval"
+  },
+  "servers.settings.backups.manual-slots.description": {
+    "defaultMessage": "Choose how many of your {limit} backup slots to use for manual and automatic backups."
+  },
+  "servers.settings.backups.manual-slots.title": {
+    "defaultMessage": "Manual backup slots"
+  },
+  "servers.settings.backups.rotation.description": {
+    "defaultMessage": "Fewer auto backup slots means {count, plural, one {your oldest auto backup} other {your # oldest auto backups}} will be deleted."
+  },
+  "servers.settings.backups.rotation.proceed": {
+    "defaultMessage": "Save and delete"
+  },
+  "servers.settings.backups.rotation.title": {
+    "defaultMessage": "Remove auto backups?"
+  },
+  "servers.settings.backups.save.error-title": {
+    "defaultMessage": "Failed to update backup settings"
+  },
+  "servers.settings.backups.save.success-title": {
+    "defaultMessage": "Backup settings updated"
+  },
   "servers.settings.support.action-log-title": {
     "defaultMessage": "Action log"
   },
diff --git a/packages/ui/src/locales/es-419/index.json b/packages/ui/src/locales/es-419/index.json
index ce8ada6bc58..5def6108e3d 100644
--- a/packages/ui/src/locales/es-419/index.json
+++ b/packages/ui/src/locales/es-419/index.json
@@ -5225,12 +5225,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Restaurando desde respaldo"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Acciones masivas para un respaldo seleccionado} other {Acciones masivas para # respaldos seleccionados}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Eliminando {total, plural, one {# respaldo} other {# respaldos}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# respaldo seleccionado} other {# respaldos seleccionados}}"
   },
@@ -5255,15 +5249,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Aún no hay respaldos"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Limpiar filtros"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Prueba con otro filtro o desactiva los filtros para ver todos los respaldos."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Ningún respaldo coincide"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -5285,21 +5270,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restaurar"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Selecciona el respaldo {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Crear respaldo"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automático"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manual"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Seleccionar todo"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Creación de respaldo en curso"
   },
@@ -7236,4 +7209,3 @@
     "defaultMessage": "Tipo"
   }
 }
-
diff --git a/packages/ui/src/locales/es-ES/index.json b/packages/ui/src/locales/es-ES/index.json
index 0a4176cead2..99956dbef2a 100644
--- a/packages/ui/src/locales/es-ES/index.json
+++ b/packages/ui/src/locales/es-ES/index.json
@@ -5117,12 +5117,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Restaurando desde una copia de seguridad"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural,one {Acciones masivas seleccionado para un respaldo} other {Acciones masivas seleccionados para # respaldos}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Borrando {total, plural, one {# respaldo} other {# respaldos}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# respaldo seleccionado} other {# respaldos seleccionados}}"
   },
@@ -5147,15 +5141,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Ningún respaldo todavía"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Limpiar filtros"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Intenta un filtro diferente o borre los filtros para ver todos los respaldos."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Ningún respaldo coincide"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -5177,21 +5162,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restaurar"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Selecciona respaldo {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Crear respaldo"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Auto"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manual"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Seleccionar todo"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Creación de copia de seguridad en curso"
   },
diff --git a/packages/ui/src/locales/fil-PH/index.json b/packages/ui/src/locales/fil-PH/index.json
index d87864a80b7..bc57e2a8b03 100644
--- a/packages/ui/src/locales/fil-PH/index.json
+++ b/packages/ui/src/locales/fil-PH/index.json
@@ -2042,9 +2042,6 @@
   "servers.backups.item.restore": {
     "defaultMessage": "I-restore"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Kusa"
-  },
   "servers.list-empty.already-have-server-label": {
     "defaultMessage": "Mayroon ka nang server?"
   },
@@ -2736,4 +2733,3 @@
     "defaultMessage": "Uri"
   }
 }
-
diff --git a/packages/ui/src/locales/fr-FR/index.json b/packages/ui/src/locales/fr-FR/index.json
index f7d260cf59a..e4a6c71ccb1 100644
--- a/packages/ui/src/locales/fr-FR/index.json
+++ b/packages/ui/src/locales/fr-FR/index.json
@@ -5126,12 +5126,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Restauration de la sauvegarde"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "Actions groupées pour {count, plural, one {une sauvegarde sélectionnée} other {# sauvegardes sélectionnées}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Suppression de {total, plural, one {# sauvegarde} other {# sauvegardes}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# sauvegarde sélectionnée} other {# sauvegardes sélectionnées}}"
   },
@@ -5156,15 +5150,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Aucune sauvegarde"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Effacer les filtres"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Essayez un filtre différent ou effacez les filtres pour voir toutes les sauvegardes."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Aucune sauvegarde ne correspond aux filtres sélectionnés"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -5186,21 +5171,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restaurer"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Sélectionner une sauvegarde {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Sauvegarder"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Auto"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manuelle"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Tout sélectionner"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Création d'une sauvegarde en cours"
   },
diff --git a/packages/ui/src/locales/hu-HU/index.json b/packages/ui/src/locales/hu-HU/index.json
index 9fb8f6b3cf1..97ad9de5831 100644
--- a/packages/ui/src/locales/hu-HU/index.json
+++ b/packages/ui/src/locales/hu-HU/index.json
@@ -5207,12 +5207,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Visszaállítás biztonsági mentésből"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Tömeges műveletek 1 kiválasztott biztonsági mentéshez} other {Tömeges műveletek # kiválasztott biztonsági mentéshez}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "{total} biztonsági mentés törlése..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count} biztonsági mentés kiválasztva"
   },
@@ -5237,15 +5231,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Még nincsenek biztonsági mentések"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Szűrők törlése"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Próbálj ki egy másik szűrőt, vagy töröld a szűrőket, hogy az összes biztonsági mentést megtekinthesd."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Nincs találat"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Automatikus"
   },
@@ -5267,21 +5252,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Visszaállítás"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "{name} biztonsági mentés kiválasztása"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Biztonsági mentés létrehozása"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatikus"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Kézi"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Összes kijelölése"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Biztonsági mentés létrehozás folyamatban van"
   },
diff --git a/packages/ui/src/locales/it-IT/index.json b/packages/ui/src/locales/it-IT/index.json
index 0e421a02252..93a45dc4f5a 100644
--- a/packages/ui/src/locales/it-IT/index.json
+++ b/packages/ui/src/locales/it-IT/index.json
@@ -5240,12 +5240,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Ripristinando dal backup..."
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Operazioni su un backup selezionato} other {Operazioni su # backup selezionati}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Eliminazione di {total} backup..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# backup selezionato} other {# backup selezionati}}"
   },
@@ -5270,15 +5264,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Ancora nessun backup"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Rimuovi filtri"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Cambia o rimuovi i filtri per mostrare i backup."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Nessun backup trovato"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Automatico"
   },
@@ -5300,21 +5285,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Ripristina"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Seleziona il backup {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Crea backup"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatico"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manuale"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Seleziona tutto"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Creazione del backup in corso"
   },
@@ -7275,4 +7248,3 @@
     "defaultMessage": "Tipo"
   }
 }
-
diff --git a/packages/ui/src/locales/ja-JP/index.json b/packages/ui/src/locales/ja-JP/index.json
index 0fae7c2a6ee..833ca72e6e3 100644
--- a/packages/ui/src/locales/ja-JP/index.json
+++ b/packages/ui/src/locales/ja-JP/index.json
@@ -4958,9 +4958,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "バックアップから復元しています"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {選択したバックアップ1件に対する一括操作} other {選択したバックアップ#件に対する一括操作}}"
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural,one {# バックアップが選択されました} other {# バックアップが選択されました}}"
   },
@@ -4985,15 +4982,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "バックアップパックはありません"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "フィルターを除く"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "すべてのバックアップを閲覧するには違ったフィルターまたはフィルターを除いてください。"
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "一致するバックアップがありません"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "自動"
   },
@@ -5015,21 +5003,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "修復"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "{name}というバックアップを選択する"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "バックアップを作成"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "自動"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "手動"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "すべて選択"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "バックアップ作成中"
   },
diff --git a/packages/ui/src/locales/ko-KR/index.json b/packages/ui/src/locales/ko-KR/index.json
index fcd700c1d0b..e9fcd66e206 100644
--- a/packages/ui/src/locales/ko-KR/index.json
+++ b/packages/ui/src/locales/ko-KR/index.json
@@ -4865,12 +4865,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "백업으로부터 복원하는 중"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "백업 {count, plural, other {#}}개 선택됨"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "백업 {total, plural, other {#}}개 삭제 중..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "백업 {count, plural, other {#}}개 선택됨"
   },
@@ -4895,15 +4889,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "백업이 없습니다"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "필터 초기화"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "다른 필터를 적용하거나 필터를 모두 해제하여 모든 백업을 확인해 보세요."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "일치하는 백업 없음"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "자동"
   },
@@ -4925,21 +4910,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "복원"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "{name} 백업 선택"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "백업 생성"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "자동"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "수동"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "모두 선택"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "백업 생성 진행 중"
   },
diff --git a/packages/ui/src/locales/ms-MY/index.json b/packages/ui/src/locales/ms-MY/index.json
index 2de9b975920..a1ed075359d 100644
--- a/packages/ui/src/locales/ms-MY/index.json
+++ b/packages/ui/src/locales/ms-MY/index.json
@@ -3773,12 +3773,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Memulihkan daripada sandaran"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, other {Tindakan pukal untuk # sandaran yang dipilih}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Sedang memadamkan {total, plural, other {# sandaran}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, other {# sandaran dipilih}}"
   },
@@ -3794,12 +3788,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Belum ada sandaran"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Kosongkan tapisan"
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Tiada sandaran yang sepadan"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -3821,21 +3809,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Pulihkan"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Pilih sandaran {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Cipta sandaran"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Auto"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manual"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Pilih semua"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Penciptaan sandaran sedang dijalankan"
   },
@@ -4959,4 +4935,3 @@
     "defaultMessage": "Jenis"
   }
 }
-
diff --git a/packages/ui/src/locales/nl-NL/index.json b/packages/ui/src/locales/nl-NL/index.json
index 3b377ea5b36..dba16980070 100644
--- a/packages/ui/src/locales/nl-NL/index.json
+++ b/packages/ui/src/locales/nl-NL/index.json
@@ -5096,12 +5096,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Terugzetten vanuit een back-up"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Bulkacties voor één geselecteerde back-up} other {Bulkacties voor # geselecteerde back-ups}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "{total, plural, one {# back-up} other {# back-ups}} verwijderen..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# back-up geselecteerd} other {# back-ups geselecteerd}}"
   },
@@ -5126,15 +5120,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Nog geen back-ups"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Filters verwijderen"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Probeer een ander filter of verwijder de filters om alle back-ups te bekijken."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Geen back-ups gevonden"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Automatisch"
   },
@@ -5156,21 +5141,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Herstel"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Selecteer back-up {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Back-up maken"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatisch"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Handmatig"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Alles selecteren"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Back-up wordt gemaakt"
   },
diff --git a/packages/ui/src/locales/pl-PL/index.json b/packages/ui/src/locales/pl-PL/index.json
index 5fd9e080976..8b0df0d6e9a 100644
--- a/packages/ui/src/locales/pl-PL/index.json
+++ b/packages/ui/src/locales/pl-PL/index.json
@@ -5222,12 +5222,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Przywracanie z kopii zapasowej"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "Masowe akcje dla {count, plural, one {jednej wybranej kopii zapasowej} other {# wybranych kopii zapasowych}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Usuwanie {total, plural, one {# kopii zapasowej} other {# kopii zapasowych}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "Wybrano {count, plural, one {# kopię zapasową} few {# kopie zapasowe} other {# kopii zapasowych}}"
   },
@@ -5252,15 +5246,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Nie masz jeszcze żadnych kopii zapasowych"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Wyczyść filtry"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Spróbuj użyć innego filtru lub wyczyść filtry, by zobaczyć wszystkie kopie zapasowe."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Nie znaleziono pasujących kopii zapasowych"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Automatyczne"
   },
@@ -5282,21 +5267,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Przywróć"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Wybierz kopię zapasową {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Utwórz kopię zapasową"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatyczne"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Ręczne"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Wybierz wszystkie"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Trwa tworzenie kopii zapasowej"
   },
diff --git a/packages/ui/src/locales/pt-BR/index.json b/packages/ui/src/locales/pt-BR/index.json
index 2c3bcd71f7c..88d59f13061 100644
--- a/packages/ui/src/locales/pt-BR/index.json
+++ b/packages/ui/src/locales/pt-BR/index.json
@@ -5240,12 +5240,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Restaurando da cópia de segurança"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "Ações em massa para {count, plural, one {uma cópia de segurança selecionada} other {# cópias de segurança selecionadas}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Excluindo {total, plural, one {# cópia de segurança} other {# cópias de segurança}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# cópia de segurança selecionada} other {# cópias de segurança selecionadas}}"
   },
@@ -5270,15 +5264,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Ainda não há cópias de segurança"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Limpar filtros"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Tente um filtro diferente ou limpe os filtros para ver todas as cópias de segurança."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Nenhuma cópia de segurança corresponde"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Automático"
   },
@@ -5300,21 +5285,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restaurar"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Selecionar cópia de segurança {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Criar cópia de segurança"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automático"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manual"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Selecionar tudo"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Criação de cópia de segurança em andamento"
   },
@@ -7275,4 +7248,3 @@
     "defaultMessage": "Tipo"
   }
 }
-
diff --git a/packages/ui/src/locales/pt-PT/index.json b/packages/ui/src/locales/pt-PT/index.json
index 6c868d17a98..f7ba67a0f44 100644
--- a/packages/ui/src/locales/pt-PT/index.json
+++ b/packages/ui/src/locales/pt-PT/index.json
@@ -2321,9 +2321,6 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restaurar"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automático"
-  },
   "servers.listing.new-label": {
     "defaultMessage": "Novo"
   },
@@ -3045,4 +3042,3 @@
     "defaultMessage": "Tipo"
   }
 }
-
diff --git a/packages/ui/src/locales/ru-RU/index.json b/packages/ui/src/locales/ru-RU/index.json
index eec162a49bc..fa8f70d267e 100644
--- a/packages/ui/src/locales/ru-RU/index.json
+++ b/packages/ui/src/locales/ru-RU/index.json
@@ -5153,12 +5153,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Восстановление из резервной копии"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "Действия с выбранными резервными копиями"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Удаление {total, plural, one {# резервной копии} other {# резервных копий}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural,one {# резервная копия выбрана} other {резервная копия выбрана}}"
   },
@@ -5183,15 +5177,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Резервных копий ещё нет"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Очистить фильтры"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Попробуйте изменить или сбросить фильтры, чтобы увидеть все резервные копии."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Резервных копий не найдено"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Авто"
   },
@@ -5213,21 +5198,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Восстановить"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Выбрать резервную копию {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Создать резервную копию"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Автоматические"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Ручные"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Выбрать всё"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Выполняется создание резервной копии"
   },
diff --git a/packages/ui/src/locales/sr-CS/index.json b/packages/ui/src/locales/sr-CS/index.json
index ec17a17ffe1..1f507fb25b9 100644
--- a/packages/ui/src/locales/sr-CS/index.json
+++ b/packages/ui/src/locales/sr-CS/index.json
@@ -4988,12 +4988,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Vraćanje iz backupa"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Grupne radnje za jedan izabran backup} other {Grupna radnja za # izabranih backupa}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Brisanje {total, plural, one {# backupa} other {# backupa}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# backup izabran} few {# backupa izabrana} other {# backupa izabranih}}"
   },
@@ -5018,15 +5012,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Nema još backupa"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Očisti filtere"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Isprobaj drugi filter ili ukloni filtere da bi vidio sve backupe."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Nema podudaranja backupa"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Automatski"
   },
@@ -5048,21 +5033,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Vrati"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Izaberi backup {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Napravi backup"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Automatski"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manualno"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Izaberi sve"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Kreacija backupa u toku"
   },
@@ -6429,4 +6402,3 @@
     "defaultMessage": "Tip"
   }
 }
-
diff --git a/packages/ui/src/locales/sv-SE/index.json b/packages/ui/src/locales/sv-SE/index.json
index 2728dd01927..ff46ebb8e78 100644
--- a/packages/ui/src/locales/sv-SE/index.json
+++ b/packages/ui/src/locales/sv-SE/index.json
@@ -4952,9 +4952,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Återställer från säkerhetskopia"
   },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Raderar {total, plural, one {# säkerhetskopia} other {# säkerhetskopior}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# säkerhetskopia markerad} other {# säkerhetskopior markerade}}"
   },
@@ -4979,15 +4976,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Inga säkerhetskopior än"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Rensa filter"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Prova ett annat filer eller rensa filtren för att se alla säkerhetskopior."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Inga säkerhetskopior matchar"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -5009,21 +4997,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Återställ"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Markera säkerhetskopia {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Skapa säkerhetskopia"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Auto"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manuellt"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Markera alla"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Säkerhetskopiering pågår"
   },
diff --git a/packages/ui/src/locales/tr-TR/index.json b/packages/ui/src/locales/tr-TR/index.json
index 884212845a4..bb3cdf3bc10 100644
--- a/packages/ui/src/locales/tr-TR/index.json
+++ b/packages/ui/src/locales/tr-TR/index.json
@@ -5159,9 +5159,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Yedekten geri yükleniyor"
   },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "{total, plural, one {# yedek} other {# yedek}} siliniyor..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# yedek seçildi} other {# yedek seçildi}}"
   },
@@ -5183,15 +5180,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Henüz yedekleme yok"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Filtreleri temizle"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Tüm yedekleri görmek için farklı bir filtre deneyin veya filtreleri temizleyin."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Yedekler eşleşmiyor"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Otomatik"
   },
@@ -5213,21 +5201,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Geri yükle"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "{name} yedek dosyasını seçin"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Yedek oluştur"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Otomatik"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Manüel"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Hepsini seç"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Yedek oluşturma sürüyor"
   },
diff --git a/packages/ui/src/locales/uk-UA/index.json b/packages/ui/src/locales/uk-UA/index.json
index 09867163063..da19befbf4c 100644
--- a/packages/ui/src/locales/uk-UA/index.json
+++ b/packages/ui/src/locales/uk-UA/index.json
@@ -5192,12 +5192,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Відновлення з резервної копії"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, one {Групові дії для однієї вибраної резервної копії} other {Групові дії для # вибраних резервних копій}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Видалення {total, plural, one {# резервоної копії} few {# резервних копій} many {# резервних копій} other {# резервних копій}}…"
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# резервну копію вибрано} few {# резевні копії вибрано} many {# резевних копій вибрано} other {# резевних копій вибрано}}"
   },
@@ -5222,15 +5216,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Резервних копій ще немає"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Очистити фільтр"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Спробуйте інший фільтр або очистіть фільтри, щоб переглянути всі резервні копії."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Немає відповідних резервних копій"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Автоматично"
   },
@@ -5252,21 +5237,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Відновлення"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Вибрати резервну копію {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Створити резервну копію"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Авто"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Уручну"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Вибрати все"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Триває створення резервної копії"
   },
diff --git a/packages/ui/src/locales/vi-VN/index.json b/packages/ui/src/locales/vi-VN/index.json
index 7f0ea3dc295..09431455d8e 100644
--- a/packages/ui/src/locales/vi-VN/index.json
+++ b/packages/ui/src/locales/vi-VN/index.json
@@ -5240,12 +5240,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Đang khôi phục từ bản sao lưu"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, other {Hành động cho # bản sao lưu}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Đang xóa {total, plural, other {# bản sao lưu}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, other {Đã chọn # bản sao lưu}}"
   },
@@ -5270,15 +5264,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "Không có bản sao lưu"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "Hủy lọc"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "Thử loại lọc khác hoặc hủy lọc để xem tất cả các bản sao lưu."
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "Không tìm được bản sao lưu"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "Tự động"
   },
@@ -5300,21 +5285,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Khôi phục"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "Chọn bản sao lưu {name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Tạo bản sao lưu"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "Tự động"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "Thủ công"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "Chọn tất cả"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Đang tạo bản sao lưu"
   },
@@ -7275,4 +7248,3 @@
     "defaultMessage": "Loại"
   }
 }
-
diff --git a/packages/ui/src/locales/zh-CN/index.json b/packages/ui/src/locales/zh-CN/index.json
index 679de37a531..e4898279d88 100644
--- a/packages/ui/src/locales/zh-CN/index.json
+++ b/packages/ui/src/locales/zh-CN/index.json
@@ -5240,12 +5240,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "从备份中恢复"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "已选择 {count} 个备份的批量操作"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "正在删除 {total, plural,one {#个备份}other {#个备份}}……"
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count,plural,one {#个备份被选中} other {个备份被选中}}"
   },
@@ -5270,15 +5264,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "暂无备份"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "清空筛选"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "尝试使用其他筛选条件或清除筛选条件以查看所有备份。"
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "没有匹配的备份"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "自动"
   },
@@ -5300,21 +5285,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "恢复"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "选择备份{name}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "创建备份"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "自动"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "手动"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "选择全部"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "正在创建备份"
   },
@@ -7275,4 +7248,3 @@
     "defaultMessage": "类型"
   }
 }
-
diff --git a/packages/ui/src/locales/zh-TW/index.json b/packages/ui/src/locales/zh-TW/index.json
index cf8b474d282..12c9222780c 100644
--- a/packages/ui/src/locales/zh-TW/index.json
+++ b/packages/ui/src/locales/zh-TW/index.json
@@ -5240,12 +5240,6 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "從備份還原"
   },
-  "servers.backups.bulk-bar.aria-label": {
-    "defaultMessage": "{count, plural, other {對 # 個選取的備份執行批次動作}}"
-  },
-  "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "正在刪除 {total, plural, other {# 個備份}}..."
-  },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, other {已選取 # 個備份}}"
   },
@@ -5270,15 +5264,6 @@
   "servers.backups.empty.heading": {
     "defaultMessage": "尚無備份"
   },
-  "servers.backups.filtered-empty.clear-filters": {
-    "defaultMessage": "清除篩選條件"
-  },
-  "servers.backups.filtered-empty.description": {
-    "defaultMessage": "試試使用不同的篩選條件，或清除篩選條件以查看所有備份。"
-  },
-  "servers.backups.filtered-empty.heading": {
-    "defaultMessage": "沒有相符的備份"
-  },
   "servers.backups.item.auto": {
     "defaultMessage": "自動備份"
   },
@@ -5300,21 +5285,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "還原"
   },
-  "servers.backups.select-backup-aria": {
-    "defaultMessage": "選擇備份「{name}」"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "建立備份"
   },
-  "servers.backups.toolbar.filter-auto": {
-    "defaultMessage": "自動備份"
-  },
-  "servers.backups.toolbar.filter-manual": {
-    "defaultMessage": "手動備份"
-  },
-  "servers.backups.toolbar.select-all": {
-    "defaultMessage": "全選"
-  },
   "servers.busy.backup-creating": {
     "defaultMessage": "正在建立備份"
   },
@@ -7275,4 +7248,3 @@
     "defaultMessage": "類型"
   }
 }
-

From 5e3c03aa3033a0b6001d7550b5dfa8aa0e248c99 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 20 Oct 2026 13:30:05 +0100
Subject: [PATCH 2/8] fix: qa

---
 .../game-settings-modal/boolean-control.vue   | 53 ++---------
 .../src/components/base/SegmentedControl.vue  | 64 +++++++++++++
 packages/ui/src/components/base/index.ts      |  1 +
 .../components/servers/ServerManageStats.vue  | 71 +++++---------
 .../servers/ServerSettingsModal.vue           | 29 +++---
 .../src/components/servers/ServerStatCard.vue | 52 +++++++++++
 .../servers/backups/BackupDeleteModal.vue     | 61 ++----------
 .../servers/backups/BackupPreviewList.vue     | 64 +++++++++++++
 .../servers/backups/BackupRotationModal.vue   | 89 ++++++++++++++++++
 .../src/components/servers/backups/index.ts   |  2 +
 packages/ui/src/components/servers/index.ts   |  1 +
 .../shared/server-settings/pages/backups.vue  | 93 +++++++++----------
 .../hosting/manage/backups/history-table.vue  | 39 ++++++--
 .../wrapped/hosting/manage/backups/index.vue  |  2 +-
 .../hosting/manage/backups/slot-card.vue      | 77 +++++++--------
 packages/ui/src/locales/en-US/index.json      | 30 +++---
 .../stories/base/SegmentedControl.stories.ts  | 55 +++++++++++
 .../stories/servers/ServerStatCard.stories.ts | 47 ++++++++++
 18 files changed, 554 insertions(+), 276 deletions(-)
 create mode 100644 packages/ui/src/components/base/SegmentedControl.vue
 create mode 100644 packages/ui/src/components/servers/ServerStatCard.vue
 create mode 100644 packages/ui/src/components/servers/backups/BackupPreviewList.vue
 create mode 100644 packages/ui/src/components/servers/backups/BackupRotationModal.vue
 create mode 100644 packages/ui/src/stories/base/SegmentedControl.stories.ts
 create mode 100644 packages/ui/src/stories/servers/ServerStatCard.stories.ts

diff --git a/apps/app-frontend/src/features/settings/syncing/game-settings-modal/boolean-control.vue b/apps/app-frontend/src/features/settings/syncing/game-settings-modal/boolean-control.vue
index 7b299577450..50feba1b019 100644
--- a/apps/app-frontend/src/features/settings/syncing/game-settings-modal/boolean-control.vue
+++ b/apps/app-frontend/src/features/settings/syncing/game-settings-modal/boolean-control.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@modrinth/ui'
+import { SegmentedControl } from '@modrinth/ui'
 
-defineProps<{
+const props = defineProps<{
 	modelValue?: boolean
 	disabled?: boolean
 	label: string
@@ -16,47 +16,14 @@ const emit = defineEmits<{
 </script>
 
 <template>
-	<div
+	<SegmentedControl
 		v-tooltip="modelValue === undefined ? placeholder : undefined"
-		role="group"
+		:model-value="modelValue"
+		:items="[true, false]"
+		:format-label="(value) => (value ? props.onLabel : props.offLabel)"
+		:neutral-items="[false]"
 		:aria-label="label"
-		class="inline-flex h-9 items-center gap-0.5 rounded-xl border border-solid border-surface-5 p-px shadow-[0_1px_3px_rgba(0,0,0,0.15)]"
-		:class="{ 'opacity-50': disabled }"
-	>
-		<Button
-			type="quiet"
-			size="sm"
-			:interaction="modelValue === true ? 'none' : 'surface'"
-			class="boolean-control-on !rounded-[10px] !px-3 !font-medium disabled:!opacity-100"
-			:class="modelValue === true ? '!text-green' : '!text-contrast'"
-			:aria-pressed="modelValue === true"
-			:disabled="disabled"
-			@click="emit('update:model-value', true)"
-		>
-			{{ onLabel }}
-		</Button>
-		<Button
-			type="quiet"
-			size="sm"
-			:interaction="modelValue === false ? 'none' : 'surface'"
-			class="boolean-control-off !rounded-[10px] !px-3 !font-medium !text-contrast disabled:!opacity-100"
-			:aria-pressed="modelValue === false"
-			:disabled="disabled"
-			@click="emit('update:model-value', false)"
-		>
-			{{ offLabel }}
-		</Button>
-	</div>
+		:disabled="disabled"
+		@update:model-value="(value) => value !== undefined && emit('update:model-value', value)"
+	/>
 </template>
-
-<style scoped>
-.boolean-control-on[aria-pressed='true'] {
-	background-color: color-mix(in srgb, var(--color-green) 30%, var(--surface-3));
-	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-green) 60%, transparent);
-}
-
-.boolean-control-off[aria-pressed='true'] {
-	background-color: var(--surface-4);
-	box-shadow: inset 0 0 0 1px var(--surface-5);
-}
-</style>
diff --git a/packages/ui/src/components/base/SegmentedControl.vue b/packages/ui/src/components/base/SegmentedControl.vue
new file mode 100644
index 00000000000..8b5df95a025
--- /dev/null
+++ b/packages/ui/src/components/base/SegmentedControl.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts" generic="T">
+import { Button } from '#ui/components/base/buttons'
+
+const props = withDefaults(
+	defineProps<{
+		items: T[]
+		ariaLabel: string
+		formatLabel?: (item: T) => string
+		neutralItems?: T[]
+		disabled?: boolean
+		fullWidth?: boolean
+	}>(),
+	{
+		formatLabel: (item: T) => String(item),
+		neutralItems: () => [],
+		disabled: false,
+		fullWidth: false,
+	},
+)
+
+const selected = defineModel<T>()
+
+function isGreenSelection(item: T) {
+	return selected.value === item && !props.neutralItems.includes(item)
+}
+</script>
+
+<template>
+	<div
+		role="radiogroup"
+		:aria-label="ariaLabel"
+		class="h-9 items-center gap-0.5 rounded-xl border border-solid border-surface-5 p-px shadow-[0_1px_3px_rgba(0,0,0,0.15)]"
+		:class="[fullWidth ? 'flex w-full' : 'inline-flex', { 'opacity-50': disabled }]"
+	>
+		<Button
+			v-for="item in items"
+			:key="String(item)"
+			type="quiet"
+			size="sm"
+			role="radio"
+			:aria-checked="selected === item"
+			:data-tone="neutralItems.includes(item) ? 'neutral' : 'green'"
+			:interaction="selected === item ? 'none' : 'surface'"
+			class="segment !rounded-[10px] !px-3 !font-medium disabled:!opacity-100"
+			:class="[isGreenSelection(item) ? '!text-green' : '!text-contrast', { 'flex-1': fullWidth }]"
+			:disabled="disabled"
+			@click="selected = item"
+		>
+			{{ formatLabel(item) }}
+		</Button>
+	</div>
+</template>
+
+<style scoped>
+.segment[aria-checked='true'][data-tone='green'] {
+	background-color: color-mix(in srgb, var(--color-green) 30%, var(--surface-3));
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-green) 60%, transparent);
+}
+
+.segment[aria-checked='true'][data-tone='neutral'] {
+	background-color: var(--surface-4);
+	box-shadow: inset 0 0 0 1px var(--surface-5);
+}
+</style>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 65f391109d9..6e44e3f7216 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -126,6 +126,7 @@ export { default as RadialHeader } from './RadialHeader.vue'
 export { default as RadioButtons } from './RadioButtons.vue'
 export { default as ReadyTransition } from './ReadyTransition.vue'
 export { default as ScrollablePanel } from './ScrollablePanel.vue'
+export { default as SegmentedControl } from './SegmentedControl.vue'
 export { default as ServerNotice } from './ServerNotice.vue'
 export { default as SettingsFormGroup } from './SettingsFormGroup.vue'
 export { default as SettingsInlineWarning } from './SettingsInlineWarning.vue'
diff --git a/packages/ui/src/components/servers/ServerManageStats.vue b/packages/ui/src/components/servers/ServerManageStats.vue
index ef3f54d31ee..c6994208e25 100644
--- a/packages/ui/src/components/servers/ServerManageStats.vue
+++ b/packages/ui/src/components/servers/ServerManageStats.vue
@@ -6,55 +6,29 @@
 		:class="{ 'pointer-events-none': loading }"
 		:aria-hidden="loading"
 	>
-		<component
-			:is="metric.link ? RouterLink : 'div'"
+		<ServerStatCard
 			v-for="(metric, index) in metrics"
 			:key="index"
-			:to="metric.link && !loading ? metric.link : undefined"
-			class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] bg-surface-3 p-5"
-			:class="
-				metric.link && !loading
-					? 'cursor-pointer transition-transform duration-100 hover:brightness-125 active:scale-95'
-					: ''
-			"
+			:title="metric.title"
+			:icon="metric.icon"
+			:value="metric.value"
+			:secondary="metric.secondary"
+			:to="loading ? null : metric.link"
 		>
-			<div class="relative z-10 flex flex-col gap-2">
-				<div class="flex items-center justify-between">
-					<span class="stat-drop-shadow flex items-center gap-2 font-medium text-lg text-primary">
-						{{ metric.title }}
-					</span>
-					<span class="relative">
-						<component :is="metric.icon" class="stat-drop-shadow relative z-10 size-8" />
-						<!-- <div
-							class="absolute -right-4 -top-4 -z-10 size-14 rounded-full bg-surface-3 opacity-50 blur-lg"
-						/> -->
-					</span>
+			<template v-if="metric.showGraph" #background>
+				<div class="chart-space absolute bottom-0 left-0 right-0">
+					<VueApexCharts
+						v-if="isClient && !loading && metric.chartOptions"
+						type="area"
+						height="142"
+						:options="metric.chartOptions"
+						:series="metric.series!"
+						class="chart"
+						:class="chartsReady.has(index) ? 'opacity-100' : 'opacity-0'"
+					/>
 				</div>
-				<span class="stat-drop-shadow text-4xl font-bold text-contrast">
-					{{ metric.value
-					}}<span
-						v-if="metric.secondary"
-						class="ml-1 text-sm font-normal stat-drop-shadow text-secondary"
-						>{{ metric.secondary }}</span
-					>
-				</span>
-				<!-- <div
-					class="absolute -left-8 -top-4 -z-10 h-28 w-56 rounded-full bg-surface-3 opacity-50 blur-lg"
-				/> -->
-			</div>
-
-			<div v-if="metric.showGraph" class="chart-space absolute bottom-0 left-0 right-0">
-				<VueApexCharts
-					v-if="isClient && !loading && metric.chartOptions"
-					type="area"
-					height="142"
-					:options="metric.chartOptions"
-					:series="metric.series!"
-					class="chart"
-					:class="chartsReady.has(index) ? 'opacity-100' : 'opacity-0'"
-				/>
-			</div>
-		</component>
+			</template>
+		</ServerStatCard>
 	</div>
 </template>
 
@@ -62,12 +36,13 @@
 import { CpuIcon, DatabaseIcon, FolderOpenIcon } from '@modrinth/assets'
 import { useStorage } from '@vueuse/core'
 import { computed, defineAsyncComponent, onMounted, ref, shallowRef, watch } from 'vue'
-import { RouterLink } from 'vue-router'
 
 import { useFormatBytes } from '#ui/composables'
 import { injectModrinthServerContext, injectPageContext } from '#ui/providers'
 import type { ServerStats } from '#ui/providers/server-context'
 
+import ServerStatCard from './ServerStatCard.vue'
+
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
 // apexcharts touches `window` at module load time, so we must not let SSR
@@ -259,10 +234,6 @@ watch(
 </script>
 
 <style scoped>
-.stat-drop-shadow {
-	filter: drop-shadow(0 4px 6px var(--surface-3));
-}
-
 .chart-space {
 	height: 142px;
 	width: calc(100% + 40px);
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index a3209b03f8a..3b000caa30c 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -2,7 +2,7 @@
 import type { Archon } from '@modrinth/api-client'
 import { ChevronRightIcon } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import type { TabbedModalTab } from '#ui/components'
 import { TabbedModal } from '#ui/components'
@@ -141,6 +141,17 @@ async function fetchViewer() {
 	currentUserRole.value = result.userRole
 }
 
+function resolveVisibleTabIndex(tabIndex?: number, tabId?: ServerSettingsTabId) {
+	const visibleTabs = tabs.value.filter((tab) => tab.shown !== false)
+	let requestedTab = tabIndex ?? 0
+	if (tabId) {
+		const defIndex = serverSettingsTabDefinitions.findIndex((d) => d.id === tabId)
+		const visibleIndex = visibleTabs.findIndex((tab) => tabs.value.indexOf(tab) === defIndex)
+		if (visibleIndex >= 0) requestedTab = visibleIndex
+	}
+	return Math.min(Math.max(requestedTab, 0), Math.max(visibleTabs.length - 1, 0))
+}
+
 async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 	try {
 		const targetServerId = currentServerId
@@ -162,6 +173,7 @@ async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 			targetServerId,
 		])
 
+		modal.value?.setTab(resolveVisibleTabIndex(tabIndex, tabId))
 		modal.value?.show()
 		const fetchPromises: Promise<unknown>[] = [fetchViewer()]
 
@@ -184,20 +196,7 @@ async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 		}
 
 		await Promise.all(fetchPromises)
-
-		const visibleTabs = tabs.value.filter((tab) => tab.shown !== false)
-		let requestedTab = tabIndex ?? 0
-		if (tabId) {
-			const defIndex = serverSettingsTabDefinitions.findIndex((d) => d.id === tabId)
-			if (defIndex >= 0) {
-				const visibleIndex = visibleTabs.findIndex(
-					(_, i) => tabs.value.indexOf(visibleTabs[i]) === defIndex,
-				)
-				if (visibleIndex >= 0) requestedTab = visibleIndex
-			}
-		}
-		const clampedTab = Math.min(Math.max(requestedTab, 0), Math.max(visibleTabs.length - 1, 0))
-		nextTick(() => modal.value?.setTab(clampedTab))
+		modal.value?.setTab(resolveVisibleTabIndex(tabIndex, tabId))
 
 		if (worldId.value) {
 			queryClient.prefetchQuery({
diff --git a/packages/ui/src/components/servers/ServerStatCard.vue b/packages/ui/src/components/servers/ServerStatCard.vue
new file mode 100644
index 00000000000..63b5f2217ab
--- /dev/null
+++ b/packages/ui/src/components/servers/ServerStatCard.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { type RouteLocationRaw, RouterLink } from 'vue-router'
+
+defineProps<{
+	title: string
+	icon: Component
+	value?: string
+	secondary?: string | null
+	to?: RouteLocationRaw | null
+}>()
+</script>
+
+<template>
+	<component
+		:is="to ? RouterLink : 'div'"
+		:to="to ?? undefined"
+		class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] border border-solid border-surface-4 bg-surface-3 p-5"
+		:class="
+			to
+				? 'cursor-pointer transition-transform duration-100 hover:brightness-125 active:scale-95'
+				: ''
+		"
+	>
+		<div class="relative z-10 flex flex-col gap-2">
+			<div class="flex items-center justify-between">
+				<span class="stat-drop-shadow flex items-center gap-2 text-lg font-medium text-primary">
+					{{ title }}
+				</span>
+				<component :is="icon" class="stat-drop-shadow relative z-10 size-8" aria-hidden="true" />
+			</div>
+			<span class="stat-drop-shadow text-4xl font-bold text-contrast">
+				<slot name="value">
+					{{ value
+					}}<span
+						v-if="secondary"
+						class="stat-drop-shadow ml-1 text-sm font-normal text-secondary"
+						>{{ secondary }}</span
+					>
+				</slot>
+			</span>
+			<slot />
+		</div>
+		<slot name="background" />
+	</component>
+</template>
+
+<style scoped>
+.stat-drop-shadow {
+	filter: drop-shadow(0 4px 6px var(--surface-3));
+}
+</style>
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index 860b81264a4..58a995ad2e2 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -10,52 +10,11 @@
 				{{ formatMessage(messages.admonitionBody, { count }) }}
 			</Admonition>
 
-			<div v-if="displayBackups.length" class="flex min-w-0 flex-col gap-2">
-				<span class="font-semibold text-contrast">
-					{{ formatMessage(messages.backupsLabel, { count }) }}
-				</span>
-				<div class="relative">
-					<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-2"
-						leave-active-class="transition-all duration-200 ease-in"
-						leave-from-class="opacity-100 max-h-2"
-						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-2 bg-gradient-to-b from-bg-raised to-transparent"
-						/>
-					</Transition>
-					<div
-						ref="backupListRef"
-						class="flex max-h-[240px] flex-col gap-2 overflow-y-auto"
-						@scroll="checkScrollState"
-					>
-						<BackupItem
-							v-for="backup in displayBackups"
-							:key="backup.id"
-							:backup="backup"
-							preview
-							class="!bg-surface-2 !shadow-none"
-						/>
-					</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-2"
-						leave-active-class="transition-all duration-200 ease-in"
-						leave-from-class="opacity-100 max-h-2"
-						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-2 bg-gradient-to-t from-bg-raised to-transparent"
-						/>
-					</Transition>
-				</div>
-			</div>
+			<BackupPreviewList
+				v-if="displayBackups.length"
+				:backups="displayBackups"
+				:label="formatMessage(messages.backupsLabel, { count })"
+			/>
 		</div>
 
 		<template #actions>
@@ -82,16 +41,15 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { TrashIcon, XIcon } from '@modrinth/assets'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { Button } from '#ui/components/base/buttons'
 
 import { defineMessages, useVIntl } from '../../../composables/i18n'
-import { useScrollIndicator } from '../../../composables/scroll-indicator'
 import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
 import NewModal from '../../modal/NewModal.vue'
-import BackupItem from './BackupItem.vue'
+import BackupPreviewList from './BackupPreviewList.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -136,11 +94,8 @@ const messages = defineMessages({
 })
 
 const modal = ref<InstanceType<typeof NewModal>>()
-const backupListRef = ref<HTMLElement | null>(null)
 const singleBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup>()
 const bulkBackups = ref<Archon.BackupsQueue.v1.BackupQueueBackup[]>([])
-const { showTopFade, showBottomFade, checkScrollState, forceCheck } =
-	useScrollIndicator(backupListRef)
 
 const isBulk = computed(() => bulkBackups.value.length > 0)
 const count = computed(() => (isBulk.value ? bulkBackups.value.length : 1))
@@ -157,14 +112,12 @@ function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	singleBackup.value = backup
 	bulkBackups.value = []
 	modal.value?.show()
-	nextTick(() => forceCheck())
 }
 
 function showBulk(backups: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
 	singleBackup.value = undefined
 	bulkBackups.value = [...backups]
 	modal.value?.show()
-	nextTick(() => forceCheck())
 }
 
 function confirmDelete() {
diff --git a/packages/ui/src/components/servers/backups/BackupPreviewList.vue b/packages/ui/src/components/servers/backups/BackupPreviewList.vue
new file mode 100644
index 00000000000..6cf72c8933e
--- /dev/null
+++ b/packages/ui/src/components/servers/backups/BackupPreviewList.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { onMounted, ref } from 'vue'
+
+import { useScrollIndicator } from '../../../composables/scroll-indicator'
+import BackupItem from './BackupItem.vue'
+
+defineProps<{
+	backups: Archon.BackupsQueue.v1.BackupQueueBackup[]
+	label: string
+}>()
+
+const listRef = ref<HTMLElement | null>(null)
+const { showTopFade, showBottomFade, checkScrollState, forceCheck } = useScrollIndicator(listRef)
+
+onMounted(forceCheck)
+</script>
+
+<template>
+	<div class="flex min-w-0 flex-col gap-2">
+		<span class="font-semibold text-contrast">{{ label }}</span>
+		<div class="relative">
+			<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-2"
+				leave-active-class="transition-all duration-200 ease-in"
+				leave-from-class="opacity-100 max-h-2"
+				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-2 bg-gradient-to-b from-bg-raised to-transparent"
+				/>
+			</Transition>
+			<div
+				ref="listRef"
+				class="flex max-h-[240px] flex-col gap-2 overflow-y-auto"
+				@scroll="checkScrollState"
+			>
+				<BackupItem
+					v-for="backup in backups"
+					:key="backup.id"
+					:backup="backup"
+					preview
+					class="!bg-surface-2 !shadow-none"
+				/>
+			</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-2"
+				leave-active-class="transition-all duration-200 ease-in"
+				leave-from-class="opacity-100 max-h-2"
+				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-2 bg-gradient-to-t from-bg-raised to-transparent"
+				/>
+			</Transition>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/servers/backups/BackupRotationModal.vue b/packages/ui/src/components/servers/backups/BackupRotationModal.vue
new file mode 100644
index 00000000000..9fa1268449d
--- /dev/null
+++ b/packages/ui/src/components/servers/backups/BackupRotationModal.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { TrashIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import { Button } from '#ui/components/base/buttons'
+
+import { defineMessages, useVIntl } from '../../../composables/i18n'
+import { commonMessages } from '../../../utils'
+import Admonition from '../../base/Admonition.vue'
+import NewModal from '../../modal/NewModal.vue'
+import BackupPreviewList from './BackupPreviewList.vue'
+
+const emit = defineEmits<{
+	proceed: []
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'servers.backups.rotation-modal.header',
+		defaultMessage: 'Remove auto backups?',
+	},
+	admonitionHeader: {
+		id: 'servers.backups.rotation-modal.admonition-header',
+		defaultMessage: 'Deletion warning',
+	},
+	admonitionBody: {
+		id: 'servers.backups.rotation-modal.admonition-body',
+		defaultMessage:
+			'Fewer auto backup slots means {count, plural, one {your oldest auto backup} other {your # oldest auto backups}} will be permanently deleted. This cannot be undone.',
+	},
+	backupsLabel: {
+		id: 'servers.backups.rotation-modal.backups-label',
+		defaultMessage: '{count, plural, one {Backup} other {Backups ({count})}}',
+	},
+	confirm: {
+		id: 'servers.backups.rotation-modal.confirm',
+		defaultMessage: 'Save and delete',
+	},
+})
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const backups = ref<Archon.BackupsQueue.v1.BackupQueueBackup[]>([])
+const count = ref(0)
+
+function show(rotatedBackups: Archon.BackupsQueue.v1.BackupQueueBackup[], rotatedCount: number) {
+	backups.value = rotatedBackups
+	count.value = rotatedCount
+	modal.value?.show()
+}
+
+function confirm() {
+	modal.value?.hide()
+	emit('proceed')
+}
+
+defineExpose({ show })
+</script>
+
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" width="500px">
+		<div class="flex flex-col gap-6">
+			<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
+				{{ formatMessage(messages.admonitionBody, { count }) }}
+			</Admonition>
+
+			<BackupPreviewList
+				v-if="backups.length"
+				:backups="backups"
+				:label="formatMessage(messages.backupsLabel, { count: backups.length })"
+			/>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="confirm">
+					<TrashIcon aria-hidden="true" />
+					{{ formatMessage(messages.confirm) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
diff --git a/packages/ui/src/components/servers/backups/index.ts b/packages/ui/src/components/servers/backups/index.ts
index f63786bed2c..afdd5d234fd 100644
--- a/packages/ui/src/components/servers/backups/index.ts
+++ b/packages/ui/src/components/servers/backups/index.ts
@@ -1,6 +1,8 @@
 export { default as BackupCreateModal } from './BackupCreateModal.vue'
 export { default as BackupDeleteModal } from './BackupDeleteModal.vue'
 export { default as BackupItem } from './BackupItem.vue'
+export { default as BackupPreviewList } from './BackupPreviewList.vue'
 export { default as BackupRenameModal } from './BackupRenameModal.vue'
 export { default as BackupRestoreModal } from './BackupRestoreModal.vue'
+export { default as BackupRotationModal } from './BackupRotationModal.vue'
 export { default as BackupWarning } from './BackupWarning.vue'
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index 2b3dd1cd54d..0d608f1830d 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -15,3 +15,4 @@ export { type PendingChange, default as ServerListing } from './ServerListing.vu
 export { default as ServerSettingsModal } from './ServerSettingsModal.vue'
 export { default as ServerSetupModal } from './ServerSetupModal.vue'
 export { default as ServersPromo } from './ServersPromo.vue'
+export { default as ServerStatCard } from './ServerStatCard.vue'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
index c4e9d00b2e1..bc515d09509 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
@@ -1,13 +1,6 @@
 <template>
 	<div class="relative h-full w-full">
-		<ConfirmModal
-			ref="rotationModal"
-			:title="formatMessage(messages.rotationTitle)"
-			:description="formatMessage(messages.rotationDescription, { count: rotatedBackupCount })"
-			:proceed-label="formatMessage(messages.rotationProceed)"
-			:markdown="false"
-			@proceed="saveOptions(true)"
-		/>
+		<BackupRotationModal ref="rotationModal" @proceed="saveOptions(true)" />
 
 		<div v-if="!options" class="flex h-40 items-center justify-center">
 			<SpinnerIcon class="size-6 animate-spin text-secondary" aria-hidden="true" />
@@ -15,52 +8,58 @@
 
 		<div v-else class="flex flex-col gap-6">
 			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<label for="auto-backups-toggle" class="text-lg font-semibold text-contrast">
+				<div>
+					<h3 id="auto-backups-label" class="m-0 text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.autoTitle) }}
-					</label>
-					<span>{{ formatMessage(messages.autoDescription) }}</span>
+					</h3>
+					<p id="auto-backups-description" class="m-0 mt-1">
+						{{ formatMessage(messages.autoDescription) }}
+					</p>
 				</div>
-				<Toggle
-					id="auto-backups-toggle"
-					v-model="autoEnabled"
-					v-tooltip="manageTooltip"
-					:disabled="!canManageBackups"
-				/>
+				<span v-tooltip="manageTooltip" class="inline-flex shrink-0">
+					<Toggle
+						id="auto-backups"
+						v-model="autoEnabled"
+						:disabled="!canManageBackups"
+						aria-labelledby="auto-backups-label"
+						aria-describedby="auto-backups-description"
+					/>
+				</span>
 			</div>
 
 			<template v-if="autoEnabled">
 				<div class="flex flex-col gap-2.5">
-					<span id="backup-interval-label" class="text-lg font-semibold text-contrast">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.intervalTitle) }}
-					</span>
-					<Chips
+					</h3>
+					<SegmentedControl
 						v-model="interval"
+						v-tooltip="manageTooltip"
 						:items="intervalOptions"
 						:format-label="formatInterval"
-						:capitalize="false"
-						:disabled-items="canManageBackups ? [] : intervalOptions"
-						:disabled-tooltip="manageTooltip"
 						:aria-label="formatMessage(messages.intervalTitle)"
-						hide-checkmark-icon
+						:disabled="!canManageBackups"
+						full-width
 					/>
 				</div>
 
 				<div class="flex flex-col gap-2.5">
-					<span class="text-lg font-semibold text-contrast">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.manualSlotsTitle) }}
-					</span>
+					</h3>
 					<Slider
 						v-model="manualSlots"
 						:min="0"
 						:max="options.limit"
 						:step="1"
+						:snap-points="manualSlotSnapPoints"
+						:snap-range="1"
 						:disabled="!canManageBackups"
 						:aria-label="formatMessage(messages.manualSlotsTitle)"
 					/>
-					<span>{{
-						formatMessage(messages.manualSlotsDescription, { limit: options.limit })
-					}}</span>
+					<p class="m-0">
+						{{ formatMessage(messages.manualSlotsDescription, { limit: options.limit }) }}
+					</p>
 				</div>
 			</template>
 		</div>
@@ -81,10 +80,10 @@ import { SpinnerIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import Chips from '#ui/components/base/Chips.vue'
+import SegmentedControl from '#ui/components/base/SegmentedControl.vue'
 import Slider from '#ui/components/base/Slider.vue'
 import Toggle from '#ui/components/base/Toggle.vue'
-import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
+import BackupRotationModal from '#ui/components/servers/backups/BackupRotationModal.vue'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import {
 	BACKUP_INTERVAL_PRESETS,
@@ -123,19 +122,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'Choose how many of your {limit} backup slots to use for manual and automatic backups.',
 	},
-	rotationTitle: {
-		id: 'servers.settings.backups.rotation.title',
-		defaultMessage: 'Remove auto backups?',
-	},
-	rotationDescription: {
-		id: 'servers.settings.backups.rotation.description',
-		defaultMessage:
-			'Fewer auto backup slots means {count, plural, one {your oldest auto backup} other {your # oldest auto backups}} will be deleted.',
-	},
-	rotationProceed: {
-		id: 'servers.settings.backups.rotation.proceed',
-		defaultMessage: 'Save and delete',
-	},
 	saveSuccessTitle: {
 		id: 'servers.settings.backups.save.success-title',
 		defaultMessage: 'Backup settings updated',
@@ -152,7 +138,7 @@ const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { serverId, worldId } = injectModrinthServerContext()
 const { canManageBackups, permissionDeniedMessage } = useServerPermissions()
-const { options, invalidate } = useServerBackupsQueue(
+const { backups, options, invalidate } = useServerBackupsQueue(
 	computed(() => serverId),
 	worldId,
 )
@@ -171,6 +157,11 @@ const intervalOptions = computed(() => {
 	return [...BACKUP_INTERVAL_PRESETS, saved].sort((a, b) => a - b)
 })
 
+const manualSlotSnapPoints = computed(() => {
+	const limit = options.value?.limit ?? 0
+	return [...new Set([1, 2, 3].map((quarter) => Math.round((limit * quarter) / 4)))]
+})
+
 const pendingPatch = computed<Archon.BackupsQueue.v1.PatchWorldBackupOptions | null>(() => {
 	if (!options.value) return null
 	const { limit } = options.value
@@ -215,8 +206,7 @@ watch(autoEnabled, (enabled) => {
 	}
 })
 
-const rotationModal = ref<InstanceType<typeof ConfirmModal>>()
-const rotatedBackupCount = ref(0)
+const rotationModal = ref<InstanceType<typeof BackupRotationModal>>()
 
 const { mutateAsync: patchOptions, isPending } = useMutation({
 	mutationFn: ({ acknowledgeRotation }: { acknowledgeRotation: boolean }) =>
@@ -234,8 +224,11 @@ async function saveOptions(acknowledgeRotation: boolean) {
 	try {
 		const result = await patchOptions({ acknowledgeRotation })
 		if (!result.applied) {
-			rotatedBackupCount.value = result.backup_ids?.length ?? 0
-			rotationModal.value?.show()
+			const rotatedIds = result.backup_ids ?? []
+			rotationModal.value?.show(
+				backups.value.filter((backup) => rotatedIds.includes(backup.id)),
+				rotatedIds.length,
+			)
 			return false
 		}
 
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
index d4e37997576..457f0b7c7f9 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
@@ -1,6 +1,8 @@
 <template>
 	<Table
 		v-model:selected-ids="tableSelectedIds"
+		v-model:sort-column="sortColumn"
+		v-model:sort-direction="sortDirection"
 		:columns="columns"
 		:data="rows"
 		:row-class="rowClass"
@@ -51,17 +53,14 @@
 			<div class="flex items-center justify-end gap-1">
 				<Button
 					v-tooltip="restoreDisabled"
-					type="outlined"
-					size="sm"
 					:disabled="!!restoreDisabled"
 					@click="emit('restore', backup)"
 				>
-					<RotateCounterClockwiseIcon aria-hidden="true" />
+					<RefreshCwIcon aria-hidden="true" />
 					{{ formatMessage(messages.restore) }}
 				</Button>
 				<TeleportOverflowMenu
 					type="quiet"
-					size="sm"
 					:label="formatMessage(messages.moreOptions, { name: backup.name })"
 					:options="overflowOptions(backup)"
 				>
@@ -90,12 +89,12 @@ import {
 	EditIcon,
 	IntercomBubbleIcon,
 	MoreHorizontalIcon,
-	RotateCounterClockwiseIcon,
+	RefreshCwIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
-import type { TableColumn } from '#ui/components/base'
+import type { SortDirection, TableColumn } from '#ui/components/base'
 import Avatar from '#ui/components/base/Avatar.vue'
 import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { Button, TeleportOverflowMenu } from '#ui/components/base/buttons'
@@ -180,8 +179,14 @@ const messages = defineMessages({
 })
 
 const columns = computed<TableColumn<'name' | 'created' | 'createdBy' | 'actions'>[]>(() => [
-	{ key: 'name', label: formatMessage(messages.nameColumn) },
-	{ key: 'created', label: formatMessage(messages.createdColumn), width: '20%' },
+	{ key: 'name', label: formatMessage(messages.nameColumn), enableSorting: true },
+	{
+		key: 'created',
+		label: formatMessage(messages.createdColumn),
+		width: '20%',
+		enableSorting: true,
+		defaultSortDirection: 'desc',
+	},
 	{ key: 'createdBy', label: formatMessage(messages.createdByColumn), width: '24%' },
 	{
 		key: 'actions',
@@ -191,8 +196,22 @@ const columns = computed<TableColumn<'name' | 'created' | 'createdBy' | 'actions
 	},
 ])
 
+const sortColumn = ref<string | undefined>('created')
+const sortDirection = ref<SortDirection>('desc')
+
+const sortedBackups = computed(() => {
+	const direction = sortDirection.value === 'asc' ? 1 : -1
+	return [...props.backups].sort((a, b) => {
+		const order =
+			sortColumn.value === 'name'
+				? a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
+				: new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+		return order * direction
+	})
+})
+
 const rows = computed(() =>
-	props.backups.map((backup) => {
+	sortedBackups.value.map((backup) => {
 		const user = backup.history.find(
 			(operation) => operation.operation_type === 'create' && operation.user_info,
 		)?.user_info
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
index 2965ecf2fc1..7ce8a1aede3 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
@@ -13,7 +13,7 @@
 
 	<ReadyTransition v-else :pending="readyPending">
 		<div class="flex flex-col gap-6">
-			<div class="grid gap-4 md:grid-cols-2">
+			<div class="grid gap-3 md:grid-cols-2">
 				<SlotCard
 					:title="formatMessage(messages.autoTitle)"
 					:icon="CalendarClockIcon"
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
index e8a921aa522..35d6ea13afb 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
@@ -1,52 +1,45 @@
 <template>
-	<div
-		class="flex flex-col gap-4 rounded-2xl border border-solid border-surface-4 bg-surface-2 p-5"
-	>
-		<div class="flex items-start justify-between gap-4">
-			<div class="flex min-w-0 flex-col gap-2">
-				<span class="text-lg font-medium text-secondary">{{ title }}</span>
-				<span v-if="offLabel" class="text-3xl font-semibold text-contrast">{{ offLabel }}</span>
-				<span v-else class="text-2xl font-semibold text-contrast">
-					<IntlFormatted :message-id="messages.slotsUsed" :values="{ used, limit }">
-						<template #used="{ children }">
-							<span class="text-4xl font-bold tabular-nums">
-								<component :is="() => children" />
-							</span>
-						</template>
-					</IntlFormatted>
+	<ServerStatCard :title="title" :icon="icon">
+		<template #value>
+			<template v-if="offLabel">{{ offLabel }}</template>
+			<template v-else>
+				<span class="tabular-nums">{{ used }}</span>
+				<span class="ml-1 text-2xl font-semibold">
+					{{ formatMessage(messages.slotLimit, { limit }) }}
 				</span>
-			</div>
-			<component :is="icon" class="size-8 shrink-0 text-secondary" aria-hidden="true" />
-		</div>
+			</template>
+		</template>
 
-		<div
-			class="flex h-2 gap-1.5"
-			role="progressbar"
-			:aria-label="title"
-			:aria-valuemin="0"
-			:aria-valuemax="limit"
-			:aria-valuenow="Math.min(used, limit)"
-		>
+		<div class="mt-2 flex flex-col gap-3">
 			<div
-				v-for="segment in limit"
-				:key="segment"
-				class="h-full flex-1 rounded-full"
-				:class="[color === 'blue' ? 'bg-blue' : 'bg-purple', { 'opacity-30': segment > used }]"
-			/>
-			<div v-if="limit === 0" class="h-full flex-1 rounded-full bg-surface-4" />
-		</div>
+				class="flex h-3 gap-1"
+				role="progressbar"
+				:aria-label="title"
+				:aria-valuemin="0"
+				:aria-valuemax="limit"
+				:aria-valuenow="Math.min(used, limit)"
+			>
+				<div
+					v-for="segment in limit"
+					:key="segment"
+					class="h-full flex-1 rounded-full"
+					:class="[color === 'blue' ? 'bg-blue' : 'bg-purple', { 'opacity-30': segment > used }]"
+				/>
+				<div v-if="limit === 0" class="h-full flex-1 rounded-full bg-surface-5" />
+			</div>
 
-		<div class="flex flex-wrap items-center gap-2 font-medium text-secondary">
-			<slot />
+			<div class="flex flex-wrap items-center gap-2 font-medium text-secondary">
+				<slot />
+			</div>
 		</div>
-	</div>
+	</ServerStatCard>
 </template>
 
 <script setup lang="ts">
 import type { Component } from 'vue'
 
-import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
-import { defineMessages } from '#ui/composables/i18n'
+import ServerStatCard from '#ui/components/servers/ServerStatCard.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 defineProps<{
 	title: string
@@ -57,10 +50,12 @@ defineProps<{
 	offLabel?: string
 }>()
 
+const { formatMessage } = useVIntl()
+
 const messages = defineMessages({
-	slotsUsed: {
-		id: 'servers.backups.slots.used',
-		defaultMessage: '<used>{used}</used> / {limit, plural, one {# slot} other {# slots}}',
+	slotLimit: {
+		id: 'servers.backups.slots.limit',
+		defaultMessage: '/ {limit, plural, one {# slot} other {# slots}}',
 	},
 })
 </script>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 7270fc23f41..2ce221ce218 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -5435,6 +5435,21 @@
   "servers.backups.restore.server-running": {
     "defaultMessage": "Stop your server before restoring a backup"
   },
+  "servers.backups.rotation-modal.admonition-body": {
+    "defaultMessage": "Fewer auto backup slots means {count, plural, one {your oldest auto backup} other {your # oldest auto backups}} will be permanently deleted. This cannot be undone."
+  },
+  "servers.backups.rotation-modal.admonition-header": {
+    "defaultMessage": "Deletion warning"
+  },
+  "servers.backups.rotation-modal.backups-label": {
+    "defaultMessage": "{count, plural, one {Backup} other {Backups ({count})}}"
+  },
+  "servers.backups.rotation-modal.confirm": {
+    "defaultMessage": "Save and delete"
+  },
+  "servers.backups.rotation-modal.header": {
+    "defaultMessage": "Remove auto backups?"
+  },
   "servers.backups.slots.auto.next": {
     "defaultMessage": "Next {time}"
   },
@@ -5450,15 +5465,15 @@
   "servers.backups.slots.auto.title": {
     "defaultMessage": "Auto backups"
   },
+  "servers.backups.slots.limit": {
+    "defaultMessage": "/ {limit, plural, one {# slot} other {# slots}}"
+  },
   "servers.backups.slots.manual.description": {
     "defaultMessage": "Manually created"
   },
   "servers.backups.slots.manual.title": {
     "defaultMessage": "Manual backups"
   },
-  "servers.backups.slots.used": {
-    "defaultMessage": "<used>{used}</used> / {limit, plural, one {# slot} other {# slots}}"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Create backup"
   },
@@ -6101,15 +6116,6 @@
   "servers.settings.backups.manual-slots.title": {
     "defaultMessage": "Manual backup slots"
   },
-  "servers.settings.backups.rotation.description": {
-    "defaultMessage": "Fewer auto backup slots means {count, plural, one {your oldest auto backup} other {your # oldest auto backups}} will be deleted."
-  },
-  "servers.settings.backups.rotation.proceed": {
-    "defaultMessage": "Save and delete"
-  },
-  "servers.settings.backups.rotation.title": {
-    "defaultMessage": "Remove auto backups?"
-  },
   "servers.settings.backups.save.error-title": {
     "defaultMessage": "Failed to update backup settings"
   },
diff --git a/packages/ui/src/stories/base/SegmentedControl.stories.ts b/packages/ui/src/stories/base/SegmentedControl.stories.ts
new file mode 100644
index 00000000000..a36d5046a77
--- /dev/null
+++ b/packages/ui/src/stories/base/SegmentedControl.stories.ts
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SegmentedControl from '../../components/base/SegmentedControl.vue'
+
+const meta = {
+	title: 'Base/SegmentedControl',
+	// @ts-ignore - error comes from generically typed component
+	component: SegmentedControl,
+} satisfies Meta<typeof SegmentedControl>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		items: ['6h', '12h', '24h', '2 days', 'Weekly'],
+		ariaLabel: 'Backup interval',
+	},
+	render: (args) => ({
+		components: { SegmentedControl },
+		setup() {
+			const selected = ref('24h')
+			return { args, selected }
+		},
+		template: '<SegmentedControl v-bind="args" v-model="selected" />',
+	}),
+}
+
+export const FullWidth: Story = {
+	...Default,
+	args: { ...Default.args, fullWidth: true },
+}
+
+export const NeutralItems: Story = {
+	args: {
+		items: [true, false],
+		ariaLabel: 'Fullscreen',
+		formatLabel: (value: unknown) => (value ? 'On' : 'Off'),
+		neutralItems: [false],
+	},
+	render: (args) => ({
+		components: { SegmentedControl },
+		setup() {
+			const selected = ref(false)
+			return { args, selected }
+		},
+		template: '<SegmentedControl v-bind="args" v-model="selected" />',
+	}),
+}
+
+export const Disabled: Story = {
+	...Default,
+	args: { ...Default.args, disabled: true },
+}
diff --git a/packages/ui/src/stories/servers/ServerStatCard.stories.ts b/packages/ui/src/stories/servers/ServerStatCard.stories.ts
new file mode 100644
index 00000000000..a5acb954739
--- /dev/null
+++ b/packages/ui/src/stories/servers/ServerStatCard.stories.ts
@@ -0,0 +1,47 @@
+import { CalendarClockIcon, CpuIcon, DatabaseIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ServerStatCard from '../../components/servers/ServerStatCard.vue'
+
+const meta = {
+	title: 'Servers/ServerStatCard',
+	component: ServerStatCard,
+	decorators: [() => ({ template: '<div class="max-w-sm"><story /></div>' })],
+} satisfies Meta<typeof ServerStatCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		title: 'CPU',
+		icon: CpuIcon,
+		value: '12.50%',
+	},
+}
+
+export const WithSecondary: Story = {
+	args: {
+		title: 'Memory',
+		icon: DatabaseIcon,
+		value: '1.2 GiB',
+		secondary: '/ 4 GiB',
+	},
+}
+
+export const CustomContent: Story = {
+	args: {
+		title: 'Auto backups',
+		icon: CalendarClockIcon,
+	},
+	render: (args) => ({
+		components: { ServerStatCard },
+		setup: () => ({ args }),
+		template: `
+			<ServerStatCard v-bind="args">
+				<template #value>8<span class="ml-1 text-2xl font-semibold">/ 10 slots</span></template>
+				<span class="text-secondary">Every 24h</span>
+			</ServerStatCard>
+		`,
+	}),
+}

From 9777cd6c9ffd0ac79c3a8bc07ce3265c1f13a007 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 20 Oct 2026 13:37:34 +0100
Subject: [PATCH 3/8] fix: qa

---
 .../src/components/base/SegmentedControl.vue  | 105 ++++++++++++++++--
 .../ui/src/components/servers/SaveBanner.vue  |  43 +++++--
 .../shared/server-settings/pages/backups.vue  |  28 ++---
 packages/ui/src/locales/en-US/index.json      |   6 +-
 4 files changed, 147 insertions(+), 35 deletions(-)

diff --git a/packages/ui/src/components/base/SegmentedControl.vue b/packages/ui/src/components/base/SegmentedControl.vue
index 8b5df95a025..6cc31244a63 100644
--- a/packages/ui/src/components/base/SegmentedControl.vue
+++ b/packages/ui/src/components/base/SegmentedControl.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts" generic="T">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
 import { Button } from '#ui/components/base/buttons'
 
 const props = withDefaults(
@@ -20,29 +22,102 @@ const props = withDefaults(
 
 const selected = defineModel<T>()
 
-function isGreenSelection(item: T) {
-	return selected.value === item && !props.neutralItems.includes(item)
+const STAGGER_DELAY = '175ms'
+
+const container = ref<HTMLElement | null>(null)
+const buttonElements: (HTMLElement | null)[] = []
+const indicator = ref<{ left: number; right: number } | null>(null)
+const delays = ref({ left: '0ms', right: '0ms' })
+const transitionsEnabled = ref(false)
+
+const selectedIndex = computed(() => props.items.indexOf(selected.value as T))
+const indicatorTone = computed(() =>
+	props.neutralItems.includes(selected.value as T) ? 'neutral' : 'green',
+)
+const leftDelay = computed(() => delays.value.left)
+const rightDelay = computed(() => delays.value.right)
+
+function positionIndicator(animate: boolean) {
+	const element = buttonElements[selectedIndex.value]
+	const parent = container.value
+	if (!element || !parent) {
+		indicator.value = null
+		return
+	}
+
+	const next = {
+		left: element.offsetLeft,
+		right: parent.clientWidth - element.offsetLeft - element.offsetWidth,
+	}
+	const movingLeft = indicator.value !== null && next.left < indicator.value.left
+	delays.value = {
+		left: movingLeft ? '0ms' : STAGGER_DELAY,
+		right: movingLeft ? STAGGER_DELAY : '0ms',
+	}
+
+	if (!animate || indicator.value === null) {
+		transitionsEnabled.value = false
+		indicator.value = next
+		requestAnimationFrame(() => {
+			transitionsEnabled.value = true
+		})
+		return
+	}
+
+	indicator.value = next
 }
+
+watch(selectedIndex, () => nextTick(() => positionIndicator(true)))
+watch(
+	() => props.items,
+	() => nextTick(() => positionIndicator(false)),
+)
+
+function setButtonRef(index: number, button: unknown) {
+	buttonElements[index] = (button as { element: HTMLElement | null } | null)?.element ?? null
+}
+
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+	positionIndicator(false)
+	resizeObserver = new ResizeObserver(() => positionIndicator(false))
+	if (container.value) resizeObserver.observe(container.value)
+})
+
+onUnmounted(() => resizeObserver?.disconnect())
 </script>
 
 <template>
 	<div
+		ref="container"
 		role="radiogroup"
 		:aria-label="ariaLabel"
-		class="h-9 items-center gap-0.5 rounded-xl border border-solid border-surface-5 p-px shadow-[0_1px_3px_rgba(0,0,0,0.15)]"
+		class="relative h-9 items-center gap-0.5 rounded-xl border border-solid border-surface-5 p-px shadow-[0_1px_3px_rgba(0,0,0,0.15)]"
 		:class="[fullWidth ? 'flex w-full' : 'inline-flex', { 'opacity-50': disabled }]"
 	>
+		<div
+			v-if="indicator"
+			class="indicator pointer-events-none absolute inset-y-px rounded-[10px]"
+			:class="{ 'indicator-transition': transitionsEnabled }"
+			:data-tone="indicatorTone"
+			:style="{ left: `${indicator.left}px`, right: `${indicator.right}px` }"
+			aria-hidden="true"
+		/>
 		<Button
-			v-for="item in items"
+			v-for="(item, index) in items"
 			:key="String(item)"
+			:ref="(button) => setButtonRef(index, button)"
 			type="quiet"
 			size="sm"
 			role="radio"
-			:aria-checked="selected === item"
-			:data-tone="neutralItems.includes(item) ? 'neutral' : 'green'"
-			:interaction="selected === item ? 'none' : 'surface'"
-			class="segment !rounded-[10px] !px-3 !font-medium disabled:!opacity-100"
-			:class="[isGreenSelection(item) ? '!text-green' : '!text-contrast', { 'flex-1': fullWidth }]"
+			:aria-checked="index === selectedIndex"
+			:interaction="index === selectedIndex ? 'none' : 'surface'"
+			class="relative z-[1] !rounded-[10px] !px-3 !font-medium disabled:!opacity-100"
+			:class="[
+				index === selectedIndex && indicatorTone === 'green' ? '!text-green' : '!text-contrast',
+				{ 'flex-1': fullWidth },
+			]"
 			:disabled="disabled"
 			@click="selected = item"
 		>
@@ -52,13 +127,21 @@ function isGreenSelection(item: T) {
 </template>
 
 <style scoped>
-.segment[aria-checked='true'][data-tone='green'] {
+.indicator[data-tone='green'] {
 	background-color: color-mix(in srgb, var(--color-green) 30%, var(--surface-3));
 	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-green) 60%, transparent);
 }
 
-.segment[aria-checked='true'][data-tone='neutral'] {
+.indicator[data-tone='neutral'] {
 	background-color: var(--surface-4);
 	box-shadow: inset 0 0 0 1px var(--surface-5);
 }
+
+.indicator-transition {
+	transition:
+		left 80ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
+		right 80ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
+		background-color 100ms ease,
+		box-shadow 100ms ease;
+}
 </style>
diff --git a/packages/ui/src/components/servers/SaveBanner.vue b/packages/ui/src/components/servers/SaveBanner.vue
index a13fbbbec4f..6a3359408cb 100644
--- a/packages/ui/src/components/servers/SaveBanner.vue
+++ b/packages/ui/src/components/servers/SaveBanner.vue
@@ -3,26 +3,27 @@
 		<FloatingActionBar :shown="props.isVisible" :inline="!!saveBanner">
 			<p class="m-0 font-semibold text-sm md:text-base">You have unsaved changes.</p>
 			<div class="ml-auto flex gap-2">
-				<Button type="quiet" :disabled="props.isUpdating" @click="props.reset"
+				<Button type="quiet" :disabled="props.isUpdating || saved" @click="handleReset"
 					><HistoryIcon /> Reset</Button
 				>
 				<span v-tooltip="saveDisabledTooltip" class="flex">
 					<Button
 						:type="props.restart ? 'base' : 'colored'"
 						:color="props.restart ? undefined : 'brand'"
-						:disabled="props.isUpdating || props.hasErrors"
-						@click="props.save"
+						:disabled="props.isUpdating || props.hasErrors || saved"
+						@click="handleSave"
 					>
 						<SpinnerIcon v-if="props.isUpdating" class="animate-spin" />
+						<CheckIcon v-else-if="saved" />
 						<SaveIcon v-else />
-						{{ props.isUpdating ? 'Saving...' : 'Save' }}
+						{{ saveButtonLabel }}
 					</Button>
 				</span>
 				<span v-if="props.restart" v-tooltip="saveDisabledTooltip" class="flex">
 					<Button
 						type="colored"
 						color="brand"
-						:disabled="props.isUpdating || isTransitioning || props.hasErrors"
+						:disabled="props.isUpdating || isTransitioning || props.hasErrors || saved"
 						@click="saveAndPower"
 					>
 						<SpinnerIcon v-if="props.isUpdating || isTransitioning" class="animate-spin" />
@@ -35,8 +36,8 @@
 </template>
 
 <script setup lang="ts">
-import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
-import { computed, onBeforeUnmount, watch } from 'vue'
+import { CheckIcon, HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
 import { Button } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
@@ -63,12 +64,38 @@ const saveDisabledTooltip = computed(() =>
 	props.hasErrors ? formatMessage(resolveErrorsMessage) : undefined,
 )
 
+const savedMessage = defineMessage({
+	id: 'hosting.save-banner.saved',
+	defaultMessage: 'Saved',
+})
+
 const saveBanner = injectServerSettings(null)?.saveBanner
 
+const saveRequested = ref(false)
+const saved = ref(false)
+
+const saveButtonLabel = computed(() => {
+	if (props.isUpdating) return 'Saving...'
+	if (saved.value) return formatMessage(savedMessage)
+	return 'Save'
+})
+
+function handleSave() {
+	saveRequested.value = true
+	return props.save()
+}
+
+function handleReset() {
+	saveRequested.value = false
+	props.reset()
+}
+
 watch(
 	() => props.isVisible,
 	(shown) => {
 		if (saveBanner) saveBanner.shown.value = shown
+		saved.value = !shown && saveRequested.value
+		saveRequested.value = false
 	},
 	{ immediate: true },
 )
@@ -96,7 +123,7 @@ const powerButtonLabel = computed(() => {
 const saveAndPower = async () => {
 	if (props.hasErrors) return
 	try {
-		if ((await props.save()) === false) return
+		if ((await handleSave()) === false) return
 	} catch {
 		return
 	}
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
index bc515d09509..1b1fcd4059f 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
@@ -7,7 +7,9 @@
 		</div>
 
 		<div v-else class="flex flex-col gap-6">
-			<div class="flex items-center justify-between gap-4">
+			<div
+				class="flex items-center justify-between gap-4 border-0 border-b border-solid border-surface-5 pb-6"
+			>
 				<div>
 					<h3 id="auto-backups-label" class="m-0 text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.autoTitle) }}
@@ -27,7 +29,7 @@
 				</span>
 			</div>
 
-			<template v-if="autoEnabled">
+			<div class="flex flex-col gap-6" :class="{ 'opacity-50': !autoEnabled }">
 				<div class="flex flex-col gap-2.5">
 					<h3 class="m-0 text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.intervalTitle) }}
@@ -38,7 +40,7 @@
 						:items="intervalOptions"
 						:format-label="formatInterval"
 						:aria-label="formatMessage(messages.intervalTitle)"
-						:disabled="!canManageBackups"
+						:disabled="!canManageBackups || !autoEnabled"
 						full-width
 					/>
 				</div>
@@ -54,20 +56,20 @@
 						:step="1"
 						:snap-points="manualSlotSnapPoints"
 						:snap-range="1"
-						:disabled="!canManageBackups"
+						:disabled="!canManageBackups || !autoEnabled"
 						:aria-label="formatMessage(messages.manualSlotsTitle)"
 					/>
 					<p class="m-0">
 						{{ formatMessage(messages.manualSlotsDescription, { limit: options.limit }) }}
 					</p>
 				</div>
-			</template>
+			</div>
 		</div>
 
 		<SaveBanner
-			:is-visible="hasUnsavedChanges || isPending"
+			:is-visible="hasUnsavedChanges || isSaving"
 			:server-id="serverId"
-			:is-updating="isPending"
+			:is-updating="isSaving"
 			:save="() => saveOptions(false)"
 			:reset="syncForm"
 		/>
@@ -122,10 +124,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'Choose how many of your {limit} backup slots to use for manual and automatic backups.',
 	},
-	saveSuccessTitle: {
-		id: 'servers.settings.backups.save.success-title',
-		defaultMessage: 'Backup settings updated',
-	},
 	saveErrorTitle: {
 		id: 'servers.settings.backups.save.error-title',
 		defaultMessage: 'Failed to update backup settings',
@@ -208,7 +206,9 @@ watch(autoEnabled, (enabled) => {
 
 const rotationModal = ref<InstanceType<typeof BackupRotationModal>>()
 
-const { mutateAsync: patchOptions, isPending } = useMutation({
+const isSaving = ref(false)
+
+const { mutateAsync: patchOptions } = useMutation({
 	mutationFn: ({ acknowledgeRotation }: { acknowledgeRotation: boolean }) =>
 		client.archon.backups_queue_v1.patchOptions(
 			serverId,
@@ -221,6 +221,7 @@ const { mutateAsync: patchOptions, isPending } = useMutation({
 async function saveOptions(acknowledgeRotation: boolean) {
 	if (!canManageBackups.value || !pendingPatch.value) return false
 
+	isSaving.value = true
 	try {
 		const result = await patchOptions({ acknowledgeRotation })
 		if (!result.applied) {
@@ -234,7 +235,6 @@ async function saveOptions(acknowledgeRotation: boolean) {
 
 		await invalidate()
 		syncForm()
-		addNotification({ type: 'success', title: formatMessage(messages.saveSuccessTitle) })
 	} catch (error) {
 		addNotification({
 			type: 'error',
@@ -242,6 +242,8 @@ async function saveOptions(acknowledgeRotation: boolean) {
 			text: error instanceof Error ? error.message : String(error),
 		})
 		return false
+	} finally {
+		isSaving.value = false
 	}
 }
 </script>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 2ce221ce218..20eb23462e8 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2069,6 +2069,9 @@
   "hosting.save-banner.resolve-errors": {
     "defaultMessage": "Please resolve the errors in your changes before saving."
   },
+  "hosting.save-banner.saved": {
+    "defaultMessage": "Saved"
+  },
   "hosting.settings.properties.motd-profanity": {
     "defaultMessage": "Due to Minecraft Usage Guidelines, your server's MOTD cannot contain profanity. Detected: “{value}”."
   },
@@ -6119,9 +6122,6 @@
   "servers.settings.backups.save.error-title": {
     "defaultMessage": "Failed to update backup settings"
   },
-  "servers.settings.backups.save.success-title": {
-    "defaultMessage": "Backup settings updated"
-  },
   "servers.settings.support.action-log-title": {
     "defaultMessage": "Action log"
   },

From c916725e796a0c50210a4239916d698c4d4e87d2 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 21 Oct 2026 20:48:18 +0100
Subject: [PATCH 4/8] fix: qa

---
 .../src/providers/setup/file-download.ts      |  32 +-
 packages/api-client/src/modules/index.ts      |   2 +
 .../src/modules/kyros/backups/v1.ts           |  46 +++
 .../api-client/src/modules/kyros/types.ts     |  10 +
 .../src/components/base/SegmentedControl.vue  |   9 +-
 .../src/components/servers/ServerStatCard.vue |  21 +-
 .../components/servers/backups/BackupItem.vue | 341 ++----------------
 .../servers/backups/BackupPreviewList.vue     |   8 +-
 .../servers/backups/BackupRestoreModal.vue    |   2 +-
 .../shared/server-settings/pages/backups.vue  |   4 +-
 .../hosting/manage/backups/history-table.vue  | 273 +++++++++-----
 .../wrapped/hosting/manage/backups/index.vue  | 100 ++++-
 .../hosting/manage/backups/slot-card.vue      |   4 +-
 .../manage/backups/use-focused-backup.ts      |   7 +-
 packages/ui/src/locales/cs-CZ/index.json      |  18 -
 packages/ui/src/locales/da-DK/index.json      |  13 -
 packages/ui/src/locales/de-CH/index.json      |  18 -
 packages/ui/src/locales/de-DE/index.json      |  18 -
 packages/ui/src/locales/en-US/index.json      |  21 +-
 packages/ui/src/locales/es-419/index.json     |  18 -
 packages/ui/src/locales/es-ES/index.json      |  18 -
 packages/ui/src/locales/fil-PH/index.json     |  12 -
 packages/ui/src/locales/fr-FR/index.json      |  18 -
 packages/ui/src/locales/hu-HU/index.json      |  18 -
 packages/ui/src/locales/id-ID/index.json      |  13 -
 packages/ui/src/locales/it-IT/index.json      |  18 -
 packages/ui/src/locales/ja-JP/index.json      |  18 -
 packages/ui/src/locales/ko-KR/index.json      |  18 -
 packages/ui/src/locales/ms-MY/index.json      |  18 -
 packages/ui/src/locales/nl-NL/index.json      |  18 -
 packages/ui/src/locales/no-NO/index.json      |  13 -
 packages/ui/src/locales/pl-PL/index.json      |  18 -
 packages/ui/src/locales/pt-BR/index.json      |  18 -
 packages/ui/src/locales/pt-PT/index.json      |  12 -
 packages/ui/src/locales/ro-RO/index.json      |  12 -
 packages/ui/src/locales/ru-RU/index.json      |  18 -
 packages/ui/src/locales/sr-CS/index.json      |  18 -
 packages/ui/src/locales/sv-SE/index.json      |  18 -
 packages/ui/src/locales/tr-TR/index.json      |  18 -
 packages/ui/src/locales/uk-UA/index.json      |  18 -
 packages/ui/src/locales/vi-VN/index.json      |  18 -
 packages/ui/src/locales/zh-CN/index.json      |  18 -
 packages/ui/src/locales/zh-TW/index.json      |  18 -
 packages/ui/src/providers/file-download.ts    |  14 +-
 .../stories/base/SegmentedControl.stories.ts  |   5 +
 .../src/stories/servers/BackupItem.stories.ts |  91 +----
 46 files changed, 455 insertions(+), 1006 deletions(-)
 create mode 100644 packages/api-client/src/modules/kyros/backups/v1.ts

diff --git a/apps/app-frontend/src/providers/setup/file-download.ts b/apps/app-frontend/src/providers/setup/file-download.ts
index eb6be894ac1..da4a07d63dc 100644
--- a/apps/app-frontend/src/providers/setup/file-download.ts
+++ b/apps/app-frontend/src/providers/setup/file-download.ts
@@ -1,5 +1,5 @@
 import type { AbstractModrinthClient } from '@modrinth/api-client'
-import { provideFileDownload } from '@modrinth/ui'
+import { type FileDownload, provideFileDownload } from '@modrinth/ui'
 import { Channel, invoke } from '@tauri-apps/api/core'
 
 import {
@@ -11,6 +11,29 @@ interface NativeSaveError {
 	message?: string
 }
 
+async function authorizeDownloadUrl(client: AbstractModrinthClient, file: FileDownload) {
+	if (file.type === 'server-backup') {
+		const { token } = await client.kyros.backups_v1.authorizeDownload(
+			file.nodeUrlHost,
+			file.worldId,
+			file.backupId,
+		)
+		return client.kyros.backups_v1.getDownloadUrl(
+			file.nodeUrlHost,
+			file.worldId,
+			file.backupId,
+			token,
+		)
+	}
+
+	const { token } = await client.kyros.files_v1.authorizeFileDownload(
+		file.nodeUrlHost,
+		file.worldId,
+		file.path,
+	)
+	return client.kyros.files_v1.getFileDownloadUrl(file.nodeUrlHost, file.worldId, token)
+}
+
 export function setupFileDownloadProvider(client: AbstractModrinthClient) {
 	provideFileDownload({
 		async download(file) {
@@ -39,13 +62,8 @@ export function setupFileDownloadProvider(client: AbstractModrinthClient) {
 			})
 
 			try {
-				const { token } = await client.kyros.files_v1.authorizeFileDownload(
-					file.nodeUrlHost,
-					file.worldId,
-					file.path,
-				)
+				const url = await authorizeDownloadUrl(client, file)
 				if (cancelled) return false
-				const url = client.kyros.files_v1.getFileDownloadUrl(file.nodeUrlHost, file.worldId, token)
 				const savedFilename = await invoke<string>('plugin:files|files_save_external', {
 					saveId,
 					request: { url },
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 6740b7a674e..93fcbad9ada 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -14,6 +14,7 @@ import { ArchonServersV0Module } from './archon/servers/v0'
 import { ArchonServersV1Module } from './archon/servers/v1'
 import { ArchonTransfersInternalModule } from './archon/transfers/internal'
 import { ISO3166Module } from './iso3166'
+import { KyrosBackupsV1Module } from './kyros/backups/v1'
 import { KyrosContentV1Module } from './kyros/content/v1'
 import { KyrosFilesV0Module } from './kyros/files/v0'
 import { KyrosFilesV1Module } from './kyros/files/v1'
@@ -97,6 +98,7 @@ export const MODULE_REGISTRY = {
 	mclogs_insights_v1: MclogsInsightsV1Module,
 	mclogs_logs_v1: MclogsLogsV1Module,
 	launchermeta_manifest_v0: LauncherMetaManifestV0Module,
+	kyros_backups_v1: KyrosBackupsV1Module,
 	kyros_content_v1: KyrosContentV1Module,
 	kyros_files_v0: KyrosFilesV0Module,
 	kyros_files_v1: KyrosFilesV1Module,
diff --git a/packages/api-client/src/modules/kyros/backups/v1.ts b/packages/api-client/src/modules/kyros/backups/v1.ts
new file mode 100644
index 00000000000..439ffd025d9
--- /dev/null
+++ b/packages/api-client/src/modules/kyros/backups/v1.ts
@@ -0,0 +1,46 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import { getNodeBaseUrl } from '../../../utils/node-url'
+import type { Kyros } from '../types'
+
+export class KyrosBackupsV1Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'kyros_backups_v1'
+	}
+
+	/**
+	 * Authorize a short-lived, single-use backup download.
+	 */
+	public async authorizeDownload(
+		nodeUrlHost: string,
+		worldId: string,
+		backupId: string,
+		format?: Kyros.Backups.v1.BackupDumpFormat,
+	): Promise<Kyros.Backups.v1.BackupDownloadAuthorization> {
+		return this.client.request<Kyros.Backups.v1.BackupDownloadAuthorization>(
+			`/worlds/${worldId}/backups/${backupId}/download/authorize`,
+			{
+				api: getNodeBaseUrl(nodeUrlHost),
+				version: 'v1',
+				method: 'GET',
+				params: format ? { format } : undefined,
+			},
+		)
+	}
+
+	/**
+	 * Build the browser URL for a previously authorized backup download.
+	 */
+	public getDownloadUrl(
+		nodeUrlHost: string,
+		worldId: string,
+		backupId: string,
+		token: string,
+	): string {
+		const url = new URL(
+			`/v1/worlds/${worldId}/backups/${backupId}/download`,
+			getNodeBaseUrl(nodeUrlHost),
+		)
+		url.searchParams.set('token', token)
+		return url.toString()
+	}
+}
diff --git a/packages/api-client/src/modules/kyros/types.ts b/packages/api-client/src/modules/kyros/types.ts
index 533a2178073..5cce0079906 100644
--- a/packages/api-client/src/modules/kyros/types.ts
+++ b/packages/api-client/src/modules/kyros/types.ts
@@ -27,6 +27,16 @@ export namespace Kyros {
 		}
 	}
 
+	export namespace Backups {
+		export namespace v1 {
+			export type BackupDumpFormat = 'zip'
+
+			export interface BackupDownloadAuthorization {
+				token: string
+			}
+		}
+	}
+
 	export namespace Files {
 		export namespace v1 {
 			export interface FileDownloadAuthorization {
diff --git a/packages/ui/src/components/base/SegmentedControl.vue b/packages/ui/src/components/base/SegmentedControl.vue
index 6cc31244a63..f2d285b707f 100644
--- a/packages/ui/src/components/base/SegmentedControl.vue
+++ b/packages/ui/src/components/base/SegmentedControl.vue
@@ -11,12 +11,14 @@ const props = withDefaults(
 		neutralItems?: T[]
 		disabled?: boolean
 		fullWidth?: boolean
+		equalWidth?: boolean
 	}>(),
 	{
 		formatLabel: (item: T) => String(item),
 		neutralItems: () => [],
 		disabled: false,
 		fullWidth: false,
+		equalWidth: false,
 	},
 )
 
@@ -30,6 +32,11 @@ const indicator = ref<{ left: number; right: number } | null>(null)
 const delays = ref({ left: '0ms', right: '0ms' })
 const transitionsEnabled = ref(false)
 
+const layoutClass = computed(() => {
+	if (props.equalWidth) return 'inline-grid w-fit auto-cols-fr grid-flow-col'
+	return props.fullWidth ? 'flex w-full' : 'inline-flex'
+})
+
 const selectedIndex = computed(() => props.items.indexOf(selected.value as T))
 const indicatorTone = computed(() =>
 	props.neutralItems.includes(selected.value as T) ? 'neutral' : 'green',
@@ -94,7 +101,7 @@ onUnmounted(() => resizeObserver?.disconnect())
 		role="radiogroup"
 		:aria-label="ariaLabel"
 		class="relative h-9 items-center gap-0.5 rounded-xl border border-solid border-surface-5 p-px shadow-[0_1px_3px_rgba(0,0,0,0.15)]"
-		:class="[fullWidth ? 'flex w-full' : 'inline-flex', { 'opacity-50': disabled }]"
+		:class="[layoutClass, { 'opacity-50': disabled }]"
 	>
 		<div
 			v-if="indicator"
diff --git a/packages/ui/src/components/servers/ServerStatCard.vue b/packages/ui/src/components/servers/ServerStatCard.vue
index 63b5f2217ab..6e03a1f7d78 100644
--- a/packages/ui/src/components/servers/ServerStatCard.vue
+++ b/packages/ui/src/components/servers/ServerStatCard.vue
@@ -15,7 +15,7 @@ defineProps<{
 	<component
 		:is="to ? RouterLink : 'div'"
 		:to="to ?? undefined"
-		class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] border border-solid border-surface-4 bg-surface-3 p-5"
+		class="@container relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] border border-solid border-surface-4 bg-surface-3 p-5"
 		:class="
 			to
 				? 'cursor-pointer transition-transform duration-100 hover:brightness-125 active:scale-95'
@@ -27,16 +27,19 @@ defineProps<{
 				<span class="stat-drop-shadow flex items-center gap-2 text-lg font-medium text-primary">
 					{{ title }}
 				</span>
-				<component :is="icon" class="stat-drop-shadow relative z-10 size-8" aria-hidden="true" />
+				<component :is="icon" class="stat-drop-shadow relative z-10 size-6" aria-hidden="true" />
 			</div>
-			<span class="stat-drop-shadow text-4xl font-bold text-contrast">
+			<span class="stat-drop-shadow text-3xl font-bold text-contrast @[13rem]:text-4xl">
 				<slot name="value">
-					{{ value
-					}}<span
-						v-if="secondary"
-						class="stat-drop-shadow ml-1 text-sm font-normal text-secondary"
-						>{{ secondary }}</span
-					>
+					<span class="flex flex-wrap items-baseline gap-x-1">
+						<span class="whitespace-nowrap">{{ value }}</span>
+						<span
+							v-if="secondary"
+							class="stat-drop-shadow whitespace-nowrap text-sm font-normal text-secondary"
+						>
+							{{ secondary }}
+						</span>
+					</span>
 				</slot>
 			</span>
 			<slot />
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 629da5609a0..f0ef67a048e 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -1,26 +1,15 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import {
-	ClipboardCopyIcon,
-	DownloadIcon,
-	EditIcon,
-	IntercomBubbleIcon,
-	MoreVerticalIcon,
-	RotateCounterClockwiseIcon,
-	ShieldIcon,
-	TrashIcon,
-	UserRoundIcon,
-} from '@modrinth/assets'
-import { computed, ref } from 'vue'
-
-import type { ButtonMenuOption } from '#ui/components/base/buttons'
-import { Button, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import { CalendarClockIcon, SaveIcon } from '@modrinth/assets'
+import { ref } from 'vue'
 
 import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
-import { commonMessages, truncatedTooltip } from '../../../utils'
-import AutoLink from '../../base/AutoLink.vue'
-import Avatar from '../../base/Avatar.vue'
+import { truncatedTooltip } from '../../../utils'
+
+defineProps<{
+	backup: Archon.BackupsQueue.v1.BackupQueueBackup
+}>()
 
 const { formatMessage } = useVIntl()
 const formatDateTime = useFormatDateTime({
@@ -28,305 +17,47 @@ const formatDateTime = useFormatDateTime({
 	dateStyle: 'long',
 })
 
-const emit = defineEmits<{
-	(e: 'download' | 'rename' | 'restore'): void
-	(e: 'delete', skipConfirmation?: boolean): void
-}>()
-
-const props = withDefaults(
-	defineProps<{
-		backup: Archon.BackupsQueue.v1.BackupQueueBackup
-		creator?: Archon.BackupsQueue.v1.UserInfo | null
-		preview?: boolean
-		kyrosUrl?: string
-		jwt?: string
-		showCopyIdAction?: boolean
-		showDebugInfo?: boolean
-		restoreDisabled?: string
-		writeDisabled?: boolean
-		writeDisabledTooltip?: string
-		selected?: boolean
-		highlighted?: boolean
-	}>(),
-	{
-		creator: undefined,
-		preview: false,
-		kyrosUrl: undefined,
-		jwt: undefined,
-		showCopyIdAction: false,
-		showDebugInfo: false,
-		restoreDisabled: undefined,
-		writeDisabled: false,
-		writeDisabledTooltip: undefined,
-		selected: false,
-		highlighted: false,
-	},
-)
-
 const nameRef = ref<HTMLElement | null>(null)
 
-const backupCreator = computed(() => {
-	if (props.creator !== undefined) return props.creator
-
-	return (
-		props.backup.history.find(
-			(operation) => operation.operation_type === 'create' && operation.user_info,
-		)?.user_info ?? null
-	)
-})
-
-const creatorProfileLink = computed(() =>
-	backupCreator.value && backupCreator.value.id !== 'support'
-		? `/user/${encodeURIComponent(backupCreator.value.username)}`
-		: undefined,
-)
-
-const backupIcon = computed(() => {
-	if (props.backup.automated) {
-		return ShieldIcon
-	}
-	return UserRoundIcon
-})
-
-const itemBorderClass = computed(() => {
-	if (props.selected) return 'border-brand-green'
-	if (props.highlighted) return 'border-purple backup-item-highlighted'
-	return 'border-transparent'
-})
-
-const overflowMenuOptions = computed<ButtonMenuOption[]>(() => {
-	const options: ButtonMenuOption[] = []
-
-	if (props.showCopyIdAction) {
-		options.push({
-			id: 'copy-id',
-			label: formatMessage(commonMessages.copyIdButton),
-			action: () => copyId(),
-		})
-	}
-
-	if (options.length > 0) {
-		options.push({ type: 'divider' })
-	}
-
-	options.push({
-		id: 'download',
-		label: formatMessage(commonMessages.downloadButton),
-		type: 'link',
-		href: `https://${props.kyrosUrl}/modrinth/v0/backups/${props.backup.id}/download?auth=${props.jwt}`,
-		disabled: !props.kyrosUrl || !props.jwt,
-	})
-
-	options.push({
-		id: 'rename',
-		label: formatMessage(messages.rename),
-		action: () => emit('rename'),
-		disabled: props.writeDisabled,
-		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
-	})
-
-	options.push({ type: 'divider' })
-	options.push({
-		id: 'delete',
-		label: formatMessage(commonMessages.deleteLabel),
-		tone: 'red',
-		action: () => emit('delete'),
-		disabled: props.writeDisabled,
-		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
-	})
-
-	return options
-})
-
-async function copyId() {
-	await navigator.clipboard.writeText(props.backup.id)
-}
-
 const messages = defineMessages({
-	restore: {
-		id: 'servers.backups.item.restore',
-		defaultMessage: 'Restore',
-	},
-	rename: {
-		id: 'servers.backups.item.rename',
-		defaultMessage: 'Rename',
-	},
 	auto: {
 		id: 'servers.backups.item.auto',
 		defaultMessage: 'Auto',
 	},
-	backupSchedule: {
-		id: 'servers.backups.item.backup-schedule',
-		defaultMessage: 'Backup schedule',
-	},
-	manualBackup: {
-		id: 'servers.backups.item.manual-backup',
-		defaultMessage: 'Manual backup',
-	},
-	creatorAvatarAlt: {
-		id: 'servers.backups.item.creator-avatar-alt',
-		defaultMessage: "{username}'s avatar",
-	},
-	supportCreator: {
-		id: 'servers.backups.item.creator.support',
-		defaultMessage: 'Support',
-	},
 })
-
-const creatorName = computed(() => {
-	if (!backupCreator.value) return ''
-	if (backupCreator.value.id !== 'support') return backupCreator.value.username
-	return backupCreator.value.username === 'support'
-		? formatMessage(messages.supportCreator)
-		: backupCreator.value.username
-})
-
-const creatorAvatarSrc = computed(() =>
-	backupCreator.value?.id === 'support'
-		? IntercomBubbleIcon
-		: (backupCreator.value?.avatar_url ?? undefined),
-)
 </script>
-<template>
-	<div
-		class="flex items-center gap-4 rounded-[20px] border border-solid bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
-		:class="itemBorderClass"
-	>
-		<div class="flex min-w-0 flex-1 items-center gap-4">
-			<!-- Icon tile -->
-			<div
-				class="flex shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5 bg-surface-4"
-				:class="preview ? 'size-10' : 'size-14'"
-			>
-				<component
-					:is="backupIcon"
-					class="text-secondary"
-					:class="preview ? 'size-6' : 'size-10'"
-				/>
-			</div>
-
-			<!-- Name + badge + subtitle -->
-			<div class="flex min-w-0 flex-col gap-1.5">
-				<div class="flex min-w-0 items-center gap-2">
-					<span
-						ref="nameRef"
-						v-tooltip="truncatedTooltip(nameRef, backup.name)"
-						class="min-w-0 truncate font-semibold text-contrast"
-					>
-						{{ backup.name }}
-					</span>
-					<span
-						v-if="backup.automated"
-						class="shrink-0 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-secondary"
-					>
-						{{ formatMessage(messages.auto) }}
-					</span>
-				</div>
-				<div class="flex items-center gap-2 text-sm font-medium text-secondary">
-					<template v-if="preview">
-						<span>{{ formatDateTime(backup.created_at) }}</span>
-					</template>
-					<template v-else-if="backupCreator">
-						<AutoLink
-							:to="creatorProfileLink"
-							class="group flex min-w-0 items-center gap-1.5"
-							:class="creatorProfileLink ? 'text-secondary hover:underline' : 'text-primary'"
-						>
-							<Avatar
-								:src="creatorAvatarSrc"
-								:alt="formatMessage(messages.creatorAvatarAlt, { username: creatorName })"
-								:tint-by="creatorName"
-								size="24px"
-								circle
-								no-shadow
-								class="shrink-0 transition"
-								:class="creatorProfileLink ? 'group-hover:brightness-125' : ''"
-							/>
-							<span
-								class="min-w-0 truncate font-medium"
-								:class="backupCreator.id === 'support' ? 'text-blue' : ''"
-							>
-								{{ creatorName }}
-							</span>
-						</AutoLink>
-					</template>
-					<template v-else>
-						<span>
-							{{
-								formatMessage(backup.automated ? messages.backupSchedule : messages.manualBackup)
-							}}
-						</span>
-					</template>
-				</div>
-			</div>
-		</div>
 
-		<!-- Date (middle column) -->
-		<div v-if="!preview" class="flex shrink-0 items-center">
-			<span class="whitespace-nowrap font-medium text-contrast">{{
-				formatDateTime(backup.created_at)
-			}}</span>
+<template>
+	<div class="flex min-w-0 items-center gap-4 rounded-[20px] bg-surface-2 p-4">
+		<div
+			class="flex size-10 shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5 bg-surface-4"
+		>
+			<component
+				:is="backup.automated ? CalendarClockIcon : SaveIcon"
+				class="size-6 text-secondary"
+				aria-hidden="true"
+			/>
 		</div>
 
-		<!-- Right side actions -->
-		<div v-if="!preview" class="flex min-w-0 flex-1 items-center justify-end gap-2">
-			<Button
-				v-tooltip="props.restoreDisabled"
-				type="outlined"
-				class="!border !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)]"
-				:disabled="!!props.restoreDisabled"
-				@click="() => emit('restore')"
-			>
-				<RotateCounterClockwiseIcon class="size-5" />
-				{{ formatMessage(messages.restore) }}
-			</Button>
-			<TeleportOverflowMenu
-				type="quiet"
-				label="More options"
-				:options="overflowMenuOptions"
-				@select="(option) => option.id === 'download' && emit('download')"
-			>
-				<MoreVerticalIcon class="size-5" />
-				<template #copy-id>
-					<ClipboardCopyIcon class="size-5" />
-					{{ formatMessage(commonMessages.copyIdButton) }}
-				</template>
-				<template #download>
-					<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
-				</template>
-				<template #rename>
-					<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
-				</template>
-				<template #delete>
-					<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
-				</template>
-			</TeleportOverflowMenu>
+		<div class="flex min-w-0 flex-col gap-1.5">
+			<div class="flex min-w-0 items-center gap-2">
+				<span
+					ref="nameRef"
+					v-tooltip="truncatedTooltip(nameRef, backup.name)"
+					class="min-w-0 truncate font-semibold text-contrast"
+				>
+					{{ backup.name }}
+				</span>
+				<span
+					v-if="backup.automated"
+					class="inline-flex h-7 shrink-0 items-center rounded-full border border-solid border-blue bg-highlight-blue px-2.5 text-sm font-semibold text-blue"
+				>
+					{{ formatMessage(messages.auto) }}
+				</span>
+			</div>
+			<span class="text-sm font-medium text-secondary">
+				{{ formatDateTime(backup.created_at) }}
+			</span>
 		</div>
-
-		<pre v-if="!preview && showDebugInfo" class="w-full rounded-xl bg-surface-4 p-2 text-xs">{{
-			backup
-		}}</pre>
 	</div>
 </template>
-
-<style scoped>
-@keyframes backup-item-highlight-pulse {
-	0%,
-	100% {
-		box-shadow:
-			0 0 0 0 var(--color-purple-highlight),
-			0px 1px 2px 0px rgba(0, 0, 0, 0.3),
-			0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-	}
-	50% {
-		box-shadow:
-			0 0 0 3px var(--color-purple-highlight),
-			0px 1px 2px 0px rgba(0, 0, 0, 0.3),
-			0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-	}
-}
-
-.backup-item-highlighted {
-	animation: backup-item-highlight-pulse 1.25s ease-in-out infinite;
-}
-</style>
diff --git a/packages/ui/src/components/servers/backups/BackupPreviewList.vue b/packages/ui/src/components/servers/backups/BackupPreviewList.vue
index 6cf72c8933e..1ff45edaccd 100644
--- a/packages/ui/src/components/servers/backups/BackupPreviewList.vue
+++ b/packages/ui/src/components/servers/backups/BackupPreviewList.vue
@@ -38,13 +38,7 @@ onMounted(forceCheck)
 				class="flex max-h-[240px] flex-col gap-2 overflow-y-auto"
 				@scroll="checkScrollState"
 			>
-				<BackupItem
-					v-for="backup in backups"
-					:key="backup.id"
-					:backup="backup"
-					preview
-					class="!bg-surface-2 !shadow-none"
-				/>
+				<BackupItem v-for="backup in backups" :key="backup.id" :backup="backup" />
 			</div>
 			<Transition
 				enter-active-class="transition-all duration-200 ease-out"
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index 016dccbe370..663b255c9a5 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -11,7 +11,7 @@
 
 			<div v-if="currentBackup" class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">Backup</span>
-				<BackupItem :backup="currentBackup" preview class="!bg-surface-2 !shadow-none" />
+				<BackupItem :backup="currentBackup" />
 			</div>
 		</div>
 
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
index 1b1fcd4059f..6aa60395bb1 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
@@ -41,7 +41,7 @@
 						:format-label="formatInterval"
 						:aria-label="formatMessage(messages.intervalTitle)"
 						:disabled="!canManageBackups || !autoEnabled"
-						full-width
+						equal-width
 					/>
 				</div>
 
@@ -157,7 +157,7 @@ const intervalOptions = computed(() => {
 
 const manualSlotSnapPoints = computed(() => {
 	const limit = options.value?.limit ?? 0
-	return [...new Set([1, 2, 3].map((quarter) => Math.round((limit * quarter) / 4)))]
+	return Array.from({ length: Math.floor(limit / 5) }, (_, index) => (index + 1) * 5)
 })
 
 const pendingPatch = computed<Archon.BackupsQueue.v1.PatchWorldBackupOptions | null>(() => {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
index 457f0b7c7f9..38d02bce1f4 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/history-table.vue
@@ -1,84 +1,172 @@
 <template>
-	<Table
-		v-model:selected-ids="tableSelectedIds"
-		v-model:sort-column="sortColumn"
-		v-model:sort-direction="sortDirection"
-		:columns="columns"
-		:data="rows"
-		:row-class="rowClass"
-		:row-below-visible="showDebugInfo"
-		show-selection
-		table-min-width="44rem"
-	>
-		<template #cell-name="{ row: backup }">
-			<span
-				:data-backup-id="backup.id"
-				class="block truncate font-medium text-primary"
-				:title="backup.name"
-			>
-				{{ backup.name }}
-			</span>
-		</template>
-
-		<template #cell-created="{ row: backup }">
-			<span v-tooltip="formatDateTime(backup.created_at)" class="font-medium">
-				{{ formatRelativeTime(backup.created_at) }}
-			</span>
-		</template>
+	<div class="@container">
+		<Table
+			v-model:selected-ids="tableSelectedIds"
+			v-model:sort-column="sortColumn"
+			v-model:sort-direction="sortDirection"
+			:columns="columns"
+			:data="rows"
+			:row-class="rowClass"
+			:row-below-visible="showDebugInfo"
+			show-selection
+			table-min-width="40rem"
+			class="hidden @[44rem]:block"
+		>
+			<template #cell-name="{ row: backup }">
+				<span :data-backup-id="backup.id" class="block truncate text-primary" :title="backup.name">
+					{{ backup.name }}
+				</span>
+			</template>
 
-		<template #cell-createdBy="{ row: backup }">
-			<span
-				v-if="backup.creator"
-				class="inline-flex min-w-0 max-w-full items-center gap-2 font-medium text-primary"
-			>
-				<Avatar
-					:src="backup.creator.avatar"
-					:alt="formatMessage(messages.creatorAvatarAlt, { username: backup.creator.name })"
-					:tint-by="backup.creator.name"
-					size="24px"
-					circle
-					no-shadow
-				/>
-				<span class="min-w-0 truncate">{{ backup.creator.name }}</span>
-			</span>
-			<span
-				v-else-if="backup.automated"
-				class="inline-flex h-7 items-center rounded-full border border-solid border-blue bg-highlight-blue px-2.5 text-sm font-semibold text-blue"
-			>
-				{{ formatMessage(messages.autoBadge) }}
-			</span>
-		</template>
+			<template #cell-created="{ row: backup }">
+				<span v-tooltip="formatDateTime(backup.created_at)" class="whitespace-nowrap">
+					{{ formatRelativeTime(backup.created_at) }}
+				</span>
+			</template>
 
-		<template #cell-actions="{ row: backup }">
-			<div class="flex items-center justify-end gap-1">
-				<Button
-					v-tooltip="restoreDisabled"
-					:disabled="!!restoreDisabled"
-					@click="emit('restore', backup)"
+			<template #cell-createdBy="{ row: backup }">
+				<span
+					v-if="backup.creator"
+					class="inline-flex min-w-0 max-w-full items-center gap-2 whitespace-nowrap text-primary"
 				>
-					<RefreshCwIcon aria-hidden="true" />
-					{{ formatMessage(messages.restore) }}
-				</Button>
-				<TeleportOverflowMenu
-					type="quiet"
-					:label="formatMessage(messages.moreOptions, { name: backup.name })"
-					:options="overflowOptions(backup)"
+					<Avatar
+						:src="backup.creator.avatar"
+						:alt="formatMessage(messages.creatorAvatarAlt, { username: backup.creator.name })"
+						:tint-by="backup.creator.name"
+						size="22px"
+						circle
+						no-shadow
+					/>
+					<span
+						class="min-w-0 truncate font-medium"
+						:class="backup.creator.isSupport ? 'text-blue' : ''"
+					>
+						{{ backup.creator.name }}
+					</span>
+				</span>
+				<span
+					v-else-if="backup.automated"
+					class="inline-flex h-7 items-center rounded-full border border-solid border-blue bg-highlight-blue px-2.5 text-sm font-semibold text-blue"
 				>
-					<MoreHorizontalIcon aria-hidden="true" />
-				</TeleportOverflowMenu>
-			</div>
-		</template>
+					{{ formatMessage(messages.autoBadge) }}
+				</span>
+			</template>
+
+			<template #cell-actions="{ row: backup }">
+				<div class="flex items-center justify-end gap-1">
+					<Button
+						v-tooltip="restoreDisabled"
+						:disabled="!!restoreDisabled"
+						@click="emit('restore', backup)"
+					>
+						<RefreshCwIcon aria-hidden="true" />
+						{{ formatMessage(messages.restore) }}
+					</Button>
+					<TeleportOverflowMenu
+						type="quiet"
+						:label="formatMessage(messages.moreOptions, { name: backup.name })"
+						:options="overflowOptions(backup)"
+					>
+						<MoreHorizontalIcon aria-hidden="true" />
+					</TeleportOverflowMenu>
+				</div>
+			</template>
 
-		<template #row-below="{ row: backup }">
-			<pre class="m-2 overflow-x-auto rounded-xl bg-surface-3 p-2 text-xs">{{ backup }}</pre>
-		</template>
+			<template #row-below="{ row: backup }">
+				<pre class="m-2 overflow-x-auto rounded-xl bg-surface-3 p-2 text-xs">{{ backup }}</pre>
+			</template>
 
-		<template #empty-state>
-			<div class="flex h-40 items-center justify-center text-secondary">
-				{{ formatMessage(messages.noResults) }}
+			<template #empty-state>
+				<div class="flex h-40 items-center justify-center text-secondary">
+					{{ formatMessage(messages.noResults) }}
+				</div>
+			</template>
+		</Table>
+
+		<div v-if="rows.length > 0" class="flex flex-col gap-3 @[44rem]:hidden">
+			<div
+				v-for="backup in rows"
+				:key="backup.id"
+				class="flex min-w-0 flex-col gap-3 rounded-2xl border border-solid border-surface-4 bg-surface-2 p-4"
+				:class="rowClass(backup)"
+			>
+				<div class="flex min-w-0 items-center gap-3">
+					<Checkbox
+						:model-value="selectedIds.includes(backup.id)"
+						class="shrink-0"
+						@update:model-value="(value) => toggleSelected(backup.id, value)"
+					/>
+					<div class="flex min-w-0 flex-1 flex-col gap-1">
+						<span
+							:data-backup-id="backup.id"
+							class="truncate font-medium text-primary"
+							:title="backup.name"
+						>
+							{{ backup.name }}
+						</span>
+						<div class="flex min-w-0 items-center gap-1.5 text-sm text-secondary">
+							<span
+								v-if="backup.creator"
+								class="inline-flex min-w-0 items-center gap-1.5 text-primary"
+							>
+								<Avatar
+									:src="backup.creator.avatar"
+									:alt="formatMessage(messages.creatorAvatarAlt, { username: backup.creator.name })"
+									:tint-by="backup.creator.name"
+									size="18px"
+									circle
+									no-shadow
+								/>
+								<span
+									class="min-w-0 truncate font-medium"
+									:class="backup.creator.isSupport ? 'text-blue' : ''"
+								>
+									{{ backup.creator.name }}
+								</span>
+							</span>
+							<span v-else-if="backup.automated" class="shrink-0 font-semibold text-blue">
+								{{ formatMessage(messages.autoBadge) }}
+							</span>
+							<BulletDivider v-if="backup.creator || backup.automated" class="shrink-0" />
+							<span
+								v-tooltip="formatDateTime(backup.created_at)"
+								class="shrink-0 whitespace-nowrap"
+							>
+								{{ formatRelativeTime(backup.created_at) }}
+							</span>
+						</div>
+					</div>
+					<div class="flex shrink-0 items-center gap-1">
+						<IconButton
+							v-tooltip="restoreDisabled ?? formatMessage(messages.restore)"
+							:label="formatMessage(messages.restore)"
+							:circular="false"
+							:disabled="!!restoreDisabled"
+							@click="emit('restore', backup)"
+						>
+							<RefreshCwIcon aria-hidden="true" />
+						</IconButton>
+						<TeleportOverflowMenu
+							type="quiet"
+							:label="formatMessage(messages.moreOptions, { name: backup.name })"
+							:options="overflowOptions(backup)"
+						>
+							<MoreHorizontalIcon aria-hidden="true" />
+						</TeleportOverflowMenu>
+					</div>
+				</div>
+				<pre v-if="showDebugInfo" class="m-0 overflow-x-auto rounded-xl bg-surface-3 p-2 text-xs">{{
+					backup
+				}}</pre>
 			</div>
-		</template>
-	</Table>
+		</div>
+		<div
+			v-else
+			class="flex h-40 items-center justify-center rounded-2xl border border-solid border-surface-4 text-secondary @[44rem]:hidden"
+		>
+			{{ formatMessage(messages.noResults) }}
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -96,8 +184,10 @@ import { computed, ref } from 'vue'
 
 import type { SortDirection, TableColumn } from '#ui/components/base'
 import Avatar from '#ui/components/base/Avatar.vue'
+import BulletDivider from '#ui/components/base/BulletDivider.vue'
 import type { ButtonMenuOption } from '#ui/components/base/buttons'
-import { Button, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import { Button, IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import Checkbox from '#ui/components/base/Checkbox.vue'
 import Table from '#ui/components/base/Table.vue'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { useRelativeTime } from '#ui/composables/how-ago'
@@ -114,11 +204,12 @@ const props = defineProps<{
 	highlightedId?: string | null
 	showCopyIdAction?: boolean
 	showDebugInfo?: boolean
-	downloadHref: (backup: Backup) => string | undefined
+	canDownload: boolean
 }>()
 
 const emit = defineEmits<{
 	restore: [backup: Backup]
+	download: [backup: Backup]
 	rename: [backup: Backup]
 	delete: [backup: Backup]
 }>()
@@ -179,19 +270,30 @@ const messages = defineMessages({
 })
 
 const columns = computed<TableColumn<'name' | 'created' | 'createdBy' | 'actions'>[]>(() => [
-	{ key: 'name', label: formatMessage(messages.nameColumn), enableSorting: true },
+	{
+		key: 'name',
+		label: formatMessage(messages.nameColumn),
+		enableSorting: true,
+		cellClass: 'pr-4',
+	},
 	{
 		key: 'created',
 		label: formatMessage(messages.createdColumn),
-		width: '20%',
+		width: '8rem',
 		enableSorting: true,
 		defaultSortDirection: 'desc',
+		cellClass: 'pr-4',
+	},
+	{
+		key: 'createdBy',
+		label: formatMessage(messages.createdByColumn),
+		width: '10rem',
+		cellClass: 'pr-4',
 	},
-	{ key: 'createdBy', label: formatMessage(messages.createdByColumn), width: '24%' },
 	{
 		key: 'actions',
 		label: formatMessage(commonMessages.actionsLabel),
-		width: '11rem',
+		width: '10.5rem',
 		align: 'right',
 	},
 ])
@@ -223,19 +325,25 @@ const rows = computed(() =>
 				? {
 						name: isSupport ? formatMessage(messages.support) : user.username,
 						avatar: isSupport ? IntercomBubbleIcon : (user.avatar_url ?? undefined),
+						isSupport,
 					}
 				: null,
 		}
 	}),
 )
 
+function toggleSelected(id: string, selected: boolean) {
+	selectedIds.value = selected
+		? [...selectedIds.value, id]
+		: selectedIds.value.filter((selectedId) => selectedId !== id)
+}
+
 function rowClass(backup: Backup) {
 	return backup.id === props.highlightedId ? 'backup-row-highlighted' : ''
 }
 
 function overflowOptions(backup: Backup): ButtonMenuOption[] {
 	const writeTooltip = props.canManage ? undefined : props.writeDisabledTooltip
-	const downloadHref = props.downloadHref(backup)
 
 	return [
 		{
@@ -248,11 +356,10 @@ function overflowOptions(backup: Backup): ButtonMenuOption[] {
 		{ type: 'divider', shown: !!props.showCopyIdAction },
 		{
 			id: 'download',
-			type: 'link',
 			label: formatMessage(commonMessages.downloadButton),
 			icon: DownloadIcon,
-			href: downloadHref,
-			disabled: !downloadHref,
+			disabled: !props.canDownload,
+			action: () => emit('download', backup),
 		},
 		{
 			id: 'rename',
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
index 7ce8a1aede3..c5fc30f5cf0 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/index.vue
@@ -51,7 +51,7 @@
 						:icon="SearchIcon"
 						type="search"
 						size="medium"
-						wrapper-class="min-w-0 flex-1"
+						wrapper-class="min-w-0 md:flex-1"
 						:placeholder="
 							formatMessage(messages.searchPlaceholder, { count: completedBackups.length })
 						"
@@ -59,28 +59,33 @@
 						:clear-label="formatMessage(commonMessages.clearButton)"
 						clearable
 					/>
-					<div class="flex shrink-0 gap-2">
+					<div class="flex shrink-0 flex-col gap-2 md:flex-row">
 						<Button
 							v-if="settingsModal"
 							size="lg"
-							class="flex-1 md:flex-none"
 							@click="settingsModal.openServerSettings({ tabId: 'backups' })"
 						>
 							<Settings2Icon aria-hidden="true" />
 							{{ formatMessage(commonMessages.settingsLabel) }}
 						</Button>
-						<Button
+						<SplitButton
 							v-tooltip="createDisabledReason"
 							type="colored"
 							color="brand"
 							size="lg"
-							class="flex-1 md:flex-none"
-							:disabled="!!createDisabledReason"
+							class="[&>[data-button]:first-child]:flex-1"
+							:options="createMenuOptions"
+							:menu-label="formatMessage(messages.moreCreateOptions)"
+							:primary-disabled="!!createDisabledReason"
 							@click="createModal?.show()"
 						>
 							<PlusIcon aria-hidden="true" />
 							{{ formatMessage(messages.createBackup) }}
-						</Button>
+							<template #download-files>
+								<DownloadIcon aria-hidden="true" />
+								{{ formatMessage(commonMessages.downloadFilesButton) }}
+							</template>
+						</SplitButton>
 					</div>
 				</div>
 
@@ -100,7 +105,8 @@
 					:highlighted-id="highlightedBackupId"
 					:show-copy-id-action="showCopyIdAction"
 					:show-debug-info="showDebugInfo"
-					:download-href="downloadHref"
+					:can-download="!!server.node && !!worldId"
+					@download="downloadBackup"
 					@restore="(backup) => restoreModal?.show(backup)"
 					@rename="(backup) => renameModal?.show(backup)"
 					@delete="(backup) => deleteModal?.show(backup)"
@@ -165,6 +171,7 @@
 import type { Archon } from '@modrinth/api-client'
 import {
 	CalendarClockIcon,
+	DownloadIcon,
 	IssuesIcon,
 	PlusIcon,
 	SaveIcon,
@@ -176,7 +183,7 @@ import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
-import { Button } from '#ui/components/base/buttons'
+import { Button, type ButtonMenuOption, SplitButton } from '#ui/components/base/buttons'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
@@ -190,8 +197,10 @@ import { useBackupIntervalFormat } from '#ui/composables/hosting/backup-interval
 import { useRelativeTime } from '#ui/composables/how-ago'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useServerWorldDownload } from '#ui/composables/server-download'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
+	injectFileDownload,
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
@@ -264,6 +273,10 @@ const messages = defineMessages({
 		id: 'servers.backups.toolbar.create-backup',
 		defaultMessage: 'Create backup',
 	},
+	moreCreateOptions: {
+		id: 'servers.backups.toolbar.more-create-options',
+		defaultMessage: 'More backup options',
+	},
 	emptyHeading: {
 		id: 'servers.backups.empty.heading',
 		defaultMessage: 'No backups yet',
@@ -309,6 +322,7 @@ const queryClient = useQueryClient()
 const { addNotification } = injectNotificationManager()
 const { server, serverId, worldId, busyReasons } = injectModrinthServerContext()
 const settingsModal = injectServerSettingsModal(null)
+const fileDownload = injectFileDownload(null)
 const { canManageBackups, permissionDeniedMessage } = useServerPermissions()
 
 const { query, backups, options, nextAutoBackupAt, hasActiveCreate, hasActiveRestore, invalidate } =
@@ -362,6 +376,31 @@ const createDisabledReason = computed(() => {
 	return undefined
 })
 
+const { downloadWorldFiles } = useServerWorldDownload()
+const isDownloadingFiles = ref(false)
+
+async function downloadFiles() {
+	const node = server.value.node
+	const currentWorldId = worldId.value
+	if (!node || !currentWorldId || isDownloadingFiles.value) return
+
+	isDownloadingFiles.value = true
+	try {
+		await downloadWorldFiles(node.instance, currentWorldId)
+	} finally {
+		isDownloadingFiles.value = false
+	}
+}
+
+const createMenuOptions = computed<ButtonMenuOption[]>(() => [
+	{
+		id: 'download-files',
+		label: formatMessage(commonMessages.downloadFilesButton),
+		disabled: !server.value.node || !worldId.value || isDownloadingFiles.value,
+		action: downloadFiles,
+	},
+])
+
 const restoreDisabledReason = computed(() => {
 	if (!canManageBackups.value) return permissionDeniedMessage.value
 	if (props.isServerRunning) return formatMessage(messages.restoreWhileRunning)
@@ -372,10 +411,47 @@ const restoreDisabledReason = computed(() => {
 	return undefined
 })
 
-function downloadHref(backup: Backup) {
+async function downloadBackup(backup: Backup) {
 	const node = server.value.node
-	if (!node) return undefined
-	return `https://${node.instance}/modrinth/v0/backups/${backup.id}/download?auth=${node.token}`
+	const currentWorldId = worldId.value
+	if (!node || !currentWorldId) return
+
+	try {
+		if (fileDownload) {
+			await fileDownload.download({
+				type: 'server-backup',
+				filename: `${backup.name}.zip`,
+				serverId,
+				serverName: server.value.name,
+				nodeUrlHost: node.instance,
+				worldId: currentWorldId,
+				backupId: backup.id,
+			})
+			return
+		}
+
+		const { token } = await client.kyros.backups_v1.authorizeDownload(
+			node.instance,
+			currentWorldId,
+			backup.id,
+		)
+		const link = document.createElement('a')
+		link.href = client.kyros.backups_v1.getDownloadUrl(
+			node.instance,
+			currentWorldId,
+			backup.id,
+			token,
+		)
+		link.download = ''
+		link.rel = 'noopener'
+		link.click()
+	} catch (error) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(commonMessages.downloadFailedLabel),
+			text: error instanceof Error ? error.message : String(error),
+		})
+	}
 }
 
 const createModal = ref<InstanceType<typeof BackupCreateModal>>()
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
index 35d6ea13afb..f3b53281360 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/slot-card.vue
@@ -4,13 +4,13 @@
 			<template v-if="offLabel">{{ offLabel }}</template>
 			<template v-else>
 				<span class="tabular-nums">{{ used }}</span>
-				<span class="ml-1 text-2xl font-semibold">
+				<span class="ml-1 whitespace-nowrap text-2xl font-semibold">
 					{{ formatMessage(messages.slotLimit, { limit }) }}
 				</span>
 			</template>
 		</template>
 
-		<div class="mt-2 flex flex-col gap-3">
+		<div class="flex flex-col gap-3">
 			<div
 				class="flex h-3 gap-1"
 				role="progressbar"
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts b/packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts
index 25f8053be6a..390d2fb118a 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups/use-focused-backup.ts
@@ -35,9 +35,10 @@ export function useFocusedBackup(backupIds: Ref<string[]>) {
 
 			if (typeof document === 'undefined') return
 			await nextTick()
-			document
-				.querySelector(`[data-backup-id="${CSS.escape(backupId)}"]`)
-				?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+			const target = [
+				...document.querySelectorAll(`[data-backup-id="${CSS.escape(backupId)}"]`),
+			].find((element) => element.getClientRects().length > 0)
+			target?.scrollIntoView({ block: 'center', behavior: 'smooth' })
 		},
 		{ immediate: true },
 	)
diff --git a/packages/ui/src/locales/cs-CZ/index.json b/packages/ui/src/locales/cs-CZ/index.json
index 22175966e33..5b905088222 100644
--- a/packages/ui/src/locales/cs-CZ/index.json
+++ b/packages/ui/src/locales/cs-CZ/index.json
@@ -4313,24 +4313,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automaticky"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Plán zálohování"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar uživatele {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Podpora"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Ruční zálohování"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Přejmenovat"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Obnovit"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Vytvořit zálohu"
   },
diff --git a/packages/ui/src/locales/da-DK/index.json b/packages/ui/src/locales/da-DK/index.json
index 9a0ffc109a2..2bb168a5b64 100644
--- a/packages/ui/src/locales/da-DK/index.json
+++ b/packages/ui/src/locales/da-DK/index.json
@@ -1928,18 +1928,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automatisk"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Sikkerhedskopiering plan"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manuel sikkerhedskopiering"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Ændre navn"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Genopret"
-  },
   "servers.grant-access-modal.header": {
     "defaultMessage": "Tilføj bruger"
   },
@@ -2220,4 +2208,3 @@
     "defaultMessage": "Du har ændringer, der ikke er gemt"
   }
 }
-
diff --git a/packages/ui/src/locales/de-CH/index.json b/packages/ui/src/locales/de-CH/index.json
index 60829d0f8b4..c126cc91ea9 100644
--- a/packages/ui/src/locales/de-CH/index.json
+++ b/packages/ui/src/locales/de-CH/index.json
@@ -5267,24 +5267,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Sicherungszeitplan"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar von {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Support"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manuelle Sicherung"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Umbenennen"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Wiederherstellen"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Sicherung erstellen"
   },
diff --git a/packages/ui/src/locales/de-DE/index.json b/packages/ui/src/locales/de-DE/index.json
index a62b9d7e789..c0b2aeee7d0 100644
--- a/packages/ui/src/locales/de-DE/index.json
+++ b/packages/ui/src/locales/de-DE/index.json
@@ -5267,24 +5267,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Sicherungszeitplan"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar von {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Support"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manuelle Sicherung"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Umbenennen"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Wiederherstellen"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Sicherung erstellen"
   },
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 20eb23462e8..e0ebe61e0d7 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -5408,24 +5408,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Backup schedule"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username}'s avatar"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Support"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manual backup"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Rename"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Restore"
-  },
   "servers.backups.load-error.description": {
     "defaultMessage": "We couldn't load your server's backups."
   },
@@ -5480,6 +5462,9 @@
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Create backup"
   },
+  "servers.backups.toolbar.more-create-options": {
+    "defaultMessage": "More backup options"
+  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Backup creation in progress"
   },
diff --git a/packages/ui/src/locales/es-419/index.json b/packages/ui/src/locales/es-419/index.json
index 5def6108e3d..8fbab07c29c 100644
--- a/packages/ui/src/locales/es-419/index.json
+++ b/packages/ui/src/locales/es-419/index.json
@@ -5252,24 +5252,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Respaldo programado"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar de {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Soporte"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Respaldo manual"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Renombrar"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Restaurar"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Crear respaldo"
   },
diff --git a/packages/ui/src/locales/es-ES/index.json b/packages/ui/src/locales/es-ES/index.json
index 99956dbef2a..29c2fb1e5b0 100644
--- a/packages/ui/src/locales/es-ES/index.json
+++ b/packages/ui/src/locales/es-ES/index.json
@@ -5144,24 +5144,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Programa de respaldo"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar de {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Soporte"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Copia de seguridad manual"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Renombrar"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Restaurar"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Crear respaldo"
   },
diff --git a/packages/ui/src/locales/fil-PH/index.json b/packages/ui/src/locales/fil-PH/index.json
index bc57e2a8b03..bd75291aa5c 100644
--- a/packages/ui/src/locales/fil-PH/index.json
+++ b/packages/ui/src/locales/fil-PH/index.json
@@ -2030,18 +2030,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Backup schedule"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manual backup"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "I-rename"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "I-restore"
-  },
   "servers.list-empty.already-have-server-label": {
     "defaultMessage": "Mayroon ka nang server?"
   },
diff --git a/packages/ui/src/locales/fr-FR/index.json b/packages/ui/src/locales/fr-FR/index.json
index e4a6c71ccb1..40c015aa594 100644
--- a/packages/ui/src/locales/fr-FR/index.json
+++ b/packages/ui/src/locales/fr-FR/index.json
@@ -5153,24 +5153,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Planification de sauvegarde"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar de {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Support"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Sauvegarde manuelle"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Renommer"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Restaurer"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Sauvegarder"
   },
diff --git a/packages/ui/src/locales/hu-HU/index.json b/packages/ui/src/locales/hu-HU/index.json
index 97ad9de5831..570503c8b6a 100644
--- a/packages/ui/src/locales/hu-HU/index.json
+++ b/packages/ui/src/locales/hu-HU/index.json
@@ -5234,24 +5234,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automatikus"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Biztonsági mentés ütemezés"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username} avatárja"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Támogatás"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manuális biztonsági mentés"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Átnevezés"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Visszaállítás"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Biztonsági mentés létrehozása"
   },
diff --git a/packages/ui/src/locales/id-ID/index.json b/packages/ui/src/locales/id-ID/index.json
index 2fe2a5130eb..3f16efa2b7a 100644
--- a/packages/ui/src/locales/id-ID/index.json
+++ b/packages/ui/src/locales/id-ID/index.json
@@ -2348,18 +2348,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Otomatis"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Jadwal pencadangan"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Pencadangan manual"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Ganti nama"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Pulihkan"
-  },
   "servers.listing.owner-tooltip": {
     "defaultMessage": "Dimiliki oleh {username}"
   },
@@ -2952,4 +2940,3 @@
     "defaultMessage": "Anda memiliki perubahan yang belum tersimpan."
   }
 }
-
diff --git a/packages/ui/src/locales/it-IT/index.json b/packages/ui/src/locales/it-IT/index.json
index 93a45dc4f5a..cf56a60bb05 100644
--- a/packages/ui/src/locales/it-IT/index.json
+++ b/packages/ui/src/locales/it-IT/index.json
@@ -5267,24 +5267,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automatico"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Pianificazione del backup"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Foto profilo di {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Assistenza"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Backup manuale"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Rinomina"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Ripristina"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Crea backup"
   },
diff --git a/packages/ui/src/locales/ja-JP/index.json b/packages/ui/src/locales/ja-JP/index.json
index 833ca72e6e3..4418a08b844 100644
--- a/packages/ui/src/locales/ja-JP/index.json
+++ b/packages/ui/src/locales/ja-JP/index.json
@@ -4985,24 +4985,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "自動"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "バックアップスケジュール"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username}のアバター"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "サポート"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "手動バックアップ"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "リネーム"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "修復"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "バックアップを作成"
   },
diff --git a/packages/ui/src/locales/ko-KR/index.json b/packages/ui/src/locales/ko-KR/index.json
index e9fcd66e206..fc65671f50c 100644
--- a/packages/ui/src/locales/ko-KR/index.json
+++ b/packages/ui/src/locales/ko-KR/index.json
@@ -4892,24 +4892,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "자동"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "백업 스케쥴"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username}의 아바타"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "지원자"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "백업 메뉴얼"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "이름 변경"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "복원"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "백업 생성"
   },
diff --git a/packages/ui/src/locales/ms-MY/index.json b/packages/ui/src/locales/ms-MY/index.json
index a1ed075359d..1fd837e0a74 100644
--- a/packages/ui/src/locales/ms-MY/index.json
+++ b/packages/ui/src/locales/ms-MY/index.json
@@ -3791,24 +3791,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Jadual penyandaran"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Sokongan"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Penyandaran manual"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Namakan semula"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Pulihkan"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Cipta sandaran"
   },
diff --git a/packages/ui/src/locales/nl-NL/index.json b/packages/ui/src/locales/nl-NL/index.json
index dba16980070..43253afe203 100644
--- a/packages/ui/src/locales/nl-NL/index.json
+++ b/packages/ui/src/locales/nl-NL/index.json
@@ -5123,24 +5123,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automatisch"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Back-upschema"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar van {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Ondersteuning"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Handmatige back-up"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Hernoemen"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Herstel"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Back-up maken"
   },
diff --git a/packages/ui/src/locales/no-NO/index.json b/packages/ui/src/locales/no-NO/index.json
index bbff4874381..2cb17389851 100644
--- a/packages/ui/src/locales/no-NO/index.json
+++ b/packages/ui/src/locales/no-NO/index.json
@@ -2237,18 +2237,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automatisk"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Sikkerhetskopiplan"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manuell sikkerhetskopiering"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Endre navn"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Gjenopprett"
-  },
   "servers.list-empty.new-server-button": {
     "defaultMessage": "Ny server"
   },
@@ -2775,4 +2763,3 @@
     "defaultMessage": "Du har ulagrede endringer."
   }
 }
-
diff --git a/packages/ui/src/locales/pl-PL/index.json b/packages/ui/src/locales/pl-PL/index.json
index 8b0df0d6e9a..e61f269bbb4 100644
--- a/packages/ui/src/locales/pl-PL/index.json
+++ b/packages/ui/src/locales/pl-PL/index.json
@@ -5249,24 +5249,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automatyczne"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Harmonogram kopii zapasowych"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Awatar użytkownika {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Obsługa Modrinth"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Ręczne kopie zapasowe"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Zmień nazwę"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Przywróć"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Utwórz kopię zapasową"
   },
diff --git a/packages/ui/src/locales/pt-BR/index.json b/packages/ui/src/locales/pt-BR/index.json
index 88d59f13061..8935ce9ab31 100644
--- a/packages/ui/src/locales/pt-BR/index.json
+++ b/packages/ui/src/locales/pt-BR/index.json
@@ -5267,24 +5267,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automático"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Agendamento de cópia de segurança"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar de {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Suporte"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Cópia de segurança manual"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Renomear"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Restaurar"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Criar cópia de segurança"
   },
diff --git a/packages/ui/src/locales/pt-PT/index.json b/packages/ui/src/locales/pt-PT/index.json
index f7ba67a0f44..0dede5fc5f0 100644
--- a/packages/ui/src/locales/pt-PT/index.json
+++ b/packages/ui/src/locales/pt-PT/index.json
@@ -2309,18 +2309,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automático"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Horário de Backup"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Fazer backup manual"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Renomear"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Restaurar"
-  },
   "servers.listing.new-label": {
     "defaultMessage": "Novo"
   },
diff --git a/packages/ui/src/locales/ro-RO/index.json b/packages/ui/src/locales/ro-RO/index.json
index f9a7a14c019..af6eab2f55e 100644
--- a/packages/ui/src/locales/ro-RO/index.json
+++ b/packages/ui/src/locales/ro-RO/index.json
@@ -3083,18 +3083,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Programul de backup"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Copiere de rezervă manuală"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Redenumește"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Restaurează"
-  },
   "servers.notice.dismiss": {
     "defaultMessage": "Ignoră"
   },
diff --git a/packages/ui/src/locales/ru-RU/index.json b/packages/ui/src/locales/ru-RU/index.json
index fa8f70d267e..2d5835ac5a4 100644
--- a/packages/ui/src/locales/ru-RU/index.json
+++ b/packages/ui/src/locales/ru-RU/index.json
@@ -5180,24 +5180,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Авто"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Автоматическая резервная копия"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Аватар {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Поддержка"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Ручная резервная копия"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Переименовать"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Восстановить"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Создать резервную копию"
   },
diff --git a/packages/ui/src/locales/sr-CS/index.json b/packages/ui/src/locales/sr-CS/index.json
index 1f507fb25b9..a72ed9753cb 100644
--- a/packages/ui/src/locales/sr-CS/index.json
+++ b/packages/ui/src/locales/sr-CS/index.json
@@ -5015,24 +5015,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Automatski"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Zakazan backup"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Avatar od {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Podrška"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manualni backup"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Preimenuj"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Vrati"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Napravi backup"
   },
diff --git a/packages/ui/src/locales/sv-SE/index.json b/packages/ui/src/locales/sv-SE/index.json
index ff46ebb8e78..eb10615f392 100644
--- a/packages/ui/src/locales/sv-SE/index.json
+++ b/packages/ui/src/locales/sv-SE/index.json
@@ -4979,24 +4979,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Säkerhetskopieringschema"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username}s avatar"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Support"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manuell säkerhetskopiering"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Byt namn"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Återställ"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Skapa säkerhetskopia"
   },
diff --git a/packages/ui/src/locales/tr-TR/index.json b/packages/ui/src/locales/tr-TR/index.json
index bb3cdf3bc10..f7b7a02f97e 100644
--- a/packages/ui/src/locales/tr-TR/index.json
+++ b/packages/ui/src/locales/tr-TR/index.json
@@ -5183,24 +5183,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Otomatik"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Yedekleme zamanları"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username} nın avatarı"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Destek"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Manuel yedekleme"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Yeniden adlandır"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Geri yükle"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Yedek oluştur"
   },
diff --git a/packages/ui/src/locales/uk-UA/index.json b/packages/ui/src/locales/uk-UA/index.json
index da19befbf4c..a7ac031b121 100644
--- a/packages/ui/src/locales/uk-UA/index.json
+++ b/packages/ui/src/locales/uk-UA/index.json
@@ -5219,24 +5219,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Автоматично"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Розклад резервного копіювання"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Аватар {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Підтримка"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Ручне резервне копіювання"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Перейменувати"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Відновлення"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Створити резервну копію"
   },
diff --git a/packages/ui/src/locales/vi-VN/index.json b/packages/ui/src/locales/vi-VN/index.json
index 09431455d8e..4da33fe13eb 100644
--- a/packages/ui/src/locales/vi-VN/index.json
+++ b/packages/ui/src/locales/vi-VN/index.json
@@ -5267,24 +5267,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "Tự động"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "Lịch sao lưu"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "Ảnh đại diện của {username}"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "Hỗ trợ"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "Sao lưu thủ công"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "Đổi tên"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "Khôi phục"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "Tạo bản sao lưu"
   },
diff --git a/packages/ui/src/locales/zh-CN/index.json b/packages/ui/src/locales/zh-CN/index.json
index e4898279d88..eb5ac10b59b 100644
--- a/packages/ui/src/locales/zh-CN/index.json
+++ b/packages/ui/src/locales/zh-CN/index.json
@@ -5267,24 +5267,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "自动"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "备份计划"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username}的头像"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "支持"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "手动备份"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "重命名"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "恢复"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "创建备份"
   },
diff --git a/packages/ui/src/locales/zh-TW/index.json b/packages/ui/src/locales/zh-TW/index.json
index 12c9222780c..6b5c7717912 100644
--- a/packages/ui/src/locales/zh-TW/index.json
+++ b/packages/ui/src/locales/zh-TW/index.json
@@ -5267,24 +5267,6 @@
   "servers.backups.item.auto": {
     "defaultMessage": "自動備份"
   },
-  "servers.backups.item.backup-schedule": {
-    "defaultMessage": "備份排程"
-  },
-  "servers.backups.item.creator-avatar-alt": {
-    "defaultMessage": "{username} 的顯示圖片"
-  },
-  "servers.backups.item.creator.support": {
-    "defaultMessage": "客服"
-  },
-  "servers.backups.item.manual-backup": {
-    "defaultMessage": "手動備份"
-  },
-  "servers.backups.item.rename": {
-    "defaultMessage": "重新命名"
-  },
-  "servers.backups.item.restore": {
-    "defaultMessage": "還原"
-  },
   "servers.backups.toolbar.create-backup": {
     "defaultMessage": "建立備份"
   },
diff --git a/packages/ui/src/providers/file-download.ts b/packages/ui/src/providers/file-download.ts
index 3e4d02d739a..e05b9cbaec5 100644
--- a/packages/ui/src/providers/file-download.ts
+++ b/packages/ui/src/providers/file-download.ts
@@ -1,15 +1,25 @@
 import { createContext } from './create-context'
 
-export interface FileDownload {
-	type: 'server-file'
+interface ServerDownloadBase {
 	filename: string
 	serverId: string
 	serverName: string
 	nodeUrlHost: string
 	worldId: string
+}
+
+export interface ServerFileDownload extends ServerDownloadBase {
+	type: 'server-file'
 	path: string
 }
 
+export interface ServerBackupDownload extends ServerDownloadBase {
+	type: 'server-backup'
+	backupId: string
+}
+
+export type FileDownload = ServerFileDownload | ServerBackupDownload
+
 export interface FileDownloadProvider {
 	download: (file: FileDownload) => Promise<boolean>
 }
diff --git a/packages/ui/src/stories/base/SegmentedControl.stories.ts b/packages/ui/src/stories/base/SegmentedControl.stories.ts
index a36d5046a77..03f83084aa1 100644
--- a/packages/ui/src/stories/base/SegmentedControl.stories.ts
+++ b/packages/ui/src/stories/base/SegmentedControl.stories.ts
@@ -32,6 +32,11 @@ export const FullWidth: Story = {
 	args: { ...Default.args, fullWidth: true },
 }
 
+export const EqualWidth: Story = {
+	...Default,
+	args: { ...Default.args, items: ['1h', '6h', '12h', '24h', '2 days', 'Weekly'], equalWidth: true },
+}
+
 export const NeutralItems: Story = {
 	args: {
 		items: [true, false],
diff --git a/packages/ui/src/stories/servers/BackupItem.stories.ts b/packages/ui/src/stories/servers/BackupItem.stories.ts
index 279c9b8d531..07112565288 100644
--- a/packages/ui/src/stories/servers/BackupItem.stories.ts
+++ b/packages/ui/src/stories/servers/BackupItem.stories.ts
@@ -6,29 +6,11 @@ import BackupItem from '../../components/servers/backups/BackupItem.vue'
 const meta = {
 	title: 'Servers/BackupItem',
 	component: BackupItem,
-	args: {
-		preview: false,
-		showCopyIdAction: false,
-		showDebugInfo: false,
-		restoreDisabled: undefined,
-	},
 } satisfies Meta<typeof BackupItem>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-const creator: Archon.BackupsQueue.v1.UserInfo = {
-	id: 'traben',
-	username: 'Traben',
-	avatar_url: 'https://cdn.modrinth.com/user/6Qo4A5QT/9d81be1a9fb1afd163b7f2f05a791955e7693c90.png',
-}
-
-const supportCreator: Archon.BackupsQueue.v1.UserInfo = {
-	id: 'support',
-	username: 'Support',
-	avatar_url: null,
-}
-
 function makeBackup(
 	overrides: Partial<Archon.BackupsQueue.v1.BackupQueueBackup> = {},
 ): Archon.BackupsQueue.v1.BackupQueueBackup {
@@ -44,81 +26,24 @@ function makeBackup(
 	}
 }
 
-export const Default: Story = {
-	name: 'Default (manual)',
+export const Manual: Story = {
 	args: {
 		backup: makeBackup({ name: 'Base finished!!' }),
-		creator,
 	},
 }
 
 export const Automated: Story = {
-	name: 'Automated',
 	args: {
-		backup: makeBackup({ automated: true, name: 'Backup #2' }),
+		backup: makeBackup({ automated: true, name: 'Automatic backup' }),
 	},
 }
 
-export const SupportCreated: Story = {
-	name: 'Support created',
+export const LongName: Story = {
 	args: {
-		backup: makeBackup({ name: 'Support recovery point' }),
-		creator: supportCreator,
+		backup: makeBackup({
+			automated: true,
+			name: 'Before restoring "A very long backup name that should truncate nicely"',
+		}),
 	},
-}
-
-export const Preview: Story = {
-	name: 'Preview (compact, used in delete modal)',
-	args: {
-		backup: makeBackup({ name: 'Base finished!!' }),
-		preview: true,
-	},
-}
-
-export const RestoreDisabled: Story = {
-	name: 'Restore disabled (server running)',
-	args: {
-		backup: makeBackup({ name: 'Backup #5', automated: true }),
-		restoreDisabled: 'Cannot restore backup while server is running',
-	},
-}
-
-export const CommonStates: Story = {
-	render: () => ({
-		components: { BackupItem },
-		setup() {
-			const now = new Date(Date.now() - 1000 * 60 * 10).toISOString()
-
-			function makeBackup(
-				overrides: Partial<Archon.BackupsQueue.v1.BackupQueueBackup>,
-			): Archon.BackupsQueue.v1.BackupQueueBackup {
-				return {
-					id: 'backup-001',
-					name: 'Backup #5',
-					created_at: now,
-					automated: false,
-					status: 'done',
-					locked: false,
-					history: [],
-					...overrides,
-				}
-			}
-
-			return {
-				manual: makeBackup({ name: 'Base finished!!' }),
-				support: makeBackup({ id: 'backup-support', name: 'Support recovery point' }),
-				automated: makeBackup({ automated: true, name: 'Backup #2' }),
-				creator,
-				supportCreator,
-			}
-		},
-		template: /* html */ `
-			<div style="display: flex; flex-direction: column; gap: 0.75rem; max-width: 900px;">
-				<BackupItem :backup="manual" :creator="creator" />
-				<BackupItem :backup="support" :creator="supportCreator" />
-				<BackupItem :backup="automated" />
-				<BackupItem :backup="manual" preview />
-			</div>
-		`,
-	}),
+	decorators: [() => ({ template: '<div style="max-width: 420px;"><story /></div>' })],
 }

From ef6fda69055649e642c06d1f1bbf04e3ee021a41 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 21 Oct 2026 20:58:33 +0100
Subject: [PATCH 5/8] fix: lint

---
 packages/ui/src/stories/base/SegmentedControl.stories.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/stories/base/SegmentedControl.stories.ts b/packages/ui/src/stories/base/SegmentedControl.stories.ts
index 03f83084aa1..7afe45b6495 100644
--- a/packages/ui/src/stories/base/SegmentedControl.stories.ts
+++ b/packages/ui/src/stories/base/SegmentedControl.stories.ts
@@ -34,7 +34,11 @@ export const FullWidth: Story = {
 
 export const EqualWidth: Story = {
 	...Default,
-	args: { ...Default.args, items: ['1h', '6h', '12h', '24h', '2 days', 'Weekly'], equalWidth: true },
+	args: {
+		...Default.args,
+		items: ['1h', '6h', '12h', '24h', '2 days', 'Weekly'],
+		equalWidth: true,
+	},
 }
 
 export const NeutralItems: Story = {

From 3b9fcde299bba8eb3ca9079d323b2d04febf3807 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 21 Oct 2026 22:44:52 +0100
Subject: [PATCH 6/8] fix: limit

---
 .../shared/server-settings/pages/backups.vue  | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
index 6aa60395bb1..8d5c305b398 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/backups.vue
@@ -52,7 +52,7 @@
 					<Slider
 						v-model="manualSlots"
 						:min="0"
-						:max="options.limit"
+						:max="slotLimit"
 						:step="1"
 						:snap-points="manualSlotSnapPoints"
 						:snap-range="1"
@@ -60,7 +60,7 @@
 						:aria-label="formatMessage(messages.manualSlotsTitle)"
 					/>
 					<p class="m-0">
-						{{ formatMessage(messages.manualSlotsDescription, { limit: options.limit }) }}
+						{{ formatMessage(messages.manualSlotsDescription, { limit: slotLimit }) }}
 					</p>
 				</div>
 			</div>
@@ -101,6 +101,7 @@ import {
 } from '#ui/providers'
 
 const DEFAULT_AUTO_SLOTS = 5
+const MAX_BACKUP_SLOTS = 15
 
 const messages = defineMessages({
 	autoTitle: {
@@ -155,14 +156,15 @@ const intervalOptions = computed(() => {
 	return [...BACKUP_INTERVAL_PRESETS, saved].sort((a, b) => a - b)
 })
 
-const manualSlotSnapPoints = computed(() => {
-	const limit = options.value?.limit ?? 0
-	return Array.from({ length: Math.floor(limit / 5) }, (_, index) => (index + 1) * 5)
-})
+const slotLimit = computed(() => Math.min(options.value?.limit ?? 0, MAX_BACKUP_SLOTS))
+
+const manualSlotSnapPoints = computed(() =>
+	Array.from({ length: Math.floor(slotLimit.value / 5) }, (_, index) => (index + 1) * 5),
+)
 
 const pendingPatch = computed<Archon.BackupsQueue.v1.PatchWorldBackupOptions | null>(() => {
 	if (!options.value) return null
-	const { limit } = options.value
+	const limit = slotLimit.value
 	return autoEnabled.value
 		? {
 				split_automatic: limit - manualSlots.value,
@@ -186,7 +188,7 @@ function syncForm() {
 	if (!options.value) return
 	autoEnabled.value = options.value.split_automatic > 0
 	interval.value = options.value.interval
-	manualSlots.value = options.value.split_manual
+	manualSlots.value = Math.min(options.value.split_manual, slotLimit.value)
 }
 
 watch(
@@ -198,7 +200,7 @@ watch(
 )
 
 watch(autoEnabled, (enabled) => {
-	const limit = options.value?.limit ?? 0
+	const limit = slotLimit.value
 	if (enabled && manualSlots.value >= limit) {
 		manualSlots.value = Math.max(limit - DEFAULT_AUTO_SLOTS, 0)
 	}

From 6e44aab0a7c69fe7063f8425865b68b0372c4911 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 21 Oct 2026 22:54:46 +0100
Subject: [PATCH 7/8] fix: padding

---
 .../ui/shared-instances/SharedInstancePublishModal.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue b/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue
index 4319853c03d..cbd635c58ca 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue
@@ -40,7 +40,7 @@
 				/>
 			</div>
 			<div
-				class="flex flex-col gap-2 border-0 border-b border-solid border-surface-5 px-6 pb-4 pt-6"
+				class="flex flex-col gap-2 border-0 border-b border-solid border-surface-5 px-6 py-4"
 			>
 				<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
 					<span class="font-semibold text-contrast">

From af22be4905c077d7edbcdc53ba23c4526312d68d Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 21 Oct 2026 22:55:23 +0100
Subject: [PATCH 8/8] fix: lint

---
 .../ui/shared-instances/SharedInstancePublishModal.vue        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue b/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue
index cbd635c58ca..bf90a1079ae 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue
@@ -39,9 +39,7 @@
 					@navigate="scrollFileTreeToTop"
 				/>
 			</div>
-			<div
-				class="flex flex-col gap-2 border-0 border-b border-solid border-surface-5 px-6 py-4"
-			>
+			<div class="flex flex-col gap-2 border-0 border-b border-solid border-surface-5 px-6 py-4">
 				<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
 					<span class="font-semibold text-contrast">
 						{{ formatMessage(messages.storageTitle) }}