diff --git a/Cargo.lock b/Cargo.lock
index 639c608a67..32e948366f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -10241,6 +10241,7 @@ dependencies = [
 name = "theseus_gui"
 version = "1.0.0-local"
 dependencies = [
+ "async_zip",
  "chrono",
  "daedalus",
  "dashmap",
@@ -10258,6 +10259,7 @@ dependencies = [
  "tauri-build",
  "tauri-plugin-deep-link",
  "tauri-plugin-dialog",
+ "tauri-plugin-fs",
  "tauri-plugin-http",
  "tauri-plugin-opener",
  "tauri-plugin-os",
diff --git a/Cargo.toml b/Cargo.toml
index ae3f355d09..236d953c4d 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -179,6 +179,7 @@ tauri = "2.8.5"
 tauri-build = "2.4.1"
 tauri-plugin-deep-link = "2.4.3"
 tauri-plugin-dialog = "2.4.0"
+tauri-plugin-fs = "2.4.5"
 tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index e44564ae98..d67c464a7c 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -22,6 +22,7 @@
 		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
+		"@tauri-apps/plugin-fs": "^2.4.5",
 		"@tauri-apps/plugin-http": "~2.5.7",
 		"@tauri-apps/plugin-opener": "^2.2.6",
 		"@tauri-apps/plugin-os": "^2.2.1",
diff --git a/apps/app-frontend/src/components/ui/NavTabs.vue b/apps/app-frontend/src/components/ui/NavTabs.vue
deleted file mode 100644
index 743d0dbc4a..0000000000
--- a/apps/app-frontend/src/components/ui/NavTabs.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-	<nav
-		v-if="filteredLinks.length > 1"
-		ref="scrollContainer"
-		class="card-shadow experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
-	>
-		<RouterLink
-			v-for="(link, index) in filteredLinks"
-			v-show="link.shown === undefined ? true : link.shown"
-			:key="index"
-			ref="tabLinkElements"
-			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-			:class="`button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full ${activeIndex === index && !subpageSelected ? 'text-button-textSelected' : activeIndex === index && subpageSelected ? 'text-contrast' : 'text-primary'}`"
-		>
-			<component :is="link.icon" v-if="link.icon" class="size-5" />
-			<span class="text-nowrap">{{ link.label }}</span>
-		</RouterLink>
-		<div
-			:class="[
-				'pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1',
-				subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
-				{ 'navtabs-transition': transitionsEnabled },
-			]"
-			:style="{
-				left: sliderLeftPx,
-				top: sliderTopPx,
-				right: sliderRightPx,
-				bottom: sliderBottomPx,
-				opacity: sliderReady && activeIndex !== -1 ? 1 : 0,
-			}"
-			aria-hidden="true"
-		></div>
-	</nav>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-import { RouterLink, useRoute } from 'vue-router'
-
-const route = useRoute()
-
-interface Tab {
-	label: string
-	href: string | RouteLocationRaw
-	shown?: boolean
-	icon?: unknown
-	subpages?: string[]
-}
-
-const props = defineProps<{
-	links: Tab[]
-	query?: string
-}>()
-
-const scrollContainer = ref<HTMLElement | null>(null)
-const sliderLeft = ref(4)
-const sliderTop = ref(4)
-const sliderRight = ref(4)
-const sliderBottom = ref(4)
-const activeIndex = ref(-1)
-const subpageSelected = ref(false)
-const sliderReady = ref(false)
-const transitionsEnabled = ref(false)
-const sliderDelays = ref({ left: '0ms', top: '0ms', right: '0ms', bottom: '0ms' })
-
-const filteredLinks = computed(() =>
-	props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
-)
-const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
-const sliderTopPx = computed(() => `${sliderTop.value}px`)
-const sliderRightPx = computed(() => `${sliderRight.value}px`)
-const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
-
-const leftDelay = computed(() => sliderDelays.value.left)
-const rightDelay = computed(() => sliderDelays.value.right)
-const topDelay = computed(() => sliderDelays.value.top)
-const bottomDelay = computed(() => sliderDelays.value.bottom)
-
-function pickLink() {
-	let index = -1
-	subpageSelected.value = false
-	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
-		const link = filteredLinks.value[i]
-
-		if (route.path === (typeof link.href === 'string' ? link.href : link.href.path)) {
-			index = i
-			break
-		} else if (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage))) {
-			index = i
-			subpageSelected.value = true
-			break
-		}
-	}
-	activeIndex.value = index
-
-	if (activeIndex.value !== -1) {
-		startAnimation()
-	} else {
-		sliderLeft.value = 0
-		sliderRight.value = 0
-	}
-}
-
-function getTabElement(index: number): HTMLElement | null {
-	if (index === -1) return null
-	const container = scrollContainer.value
-	if (!container) return null
-	const tabs = container.querySelectorAll('.button-animation')
-	return (tabs[index] as HTMLElement) ?? null
-}
-
-function startAnimation() {
-	const el = getTabElement(activeIndex.value)
-	if (!el?.offsetParent) return
-
-	const parent = el.offsetParent as HTMLElement
-	const newValues = {
-		left: el.offsetLeft,
-		top: el.offsetTop,
-		right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
-		bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
-	}
-
-	const isInitialPosition = sliderLeft.value === 4 && sliderRight.value === 4
-
-	if (isInitialPosition) {
-		sliderLeft.value = newValues.left
-		sliderRight.value = newValues.right
-		sliderTop.value = newValues.top
-		sliderBottom.value = newValues.bottom
-		sliderReady.value = true
-		requestAnimationFrame(() => {
-			transitionsEnabled.value = true
-		})
-	} else {
-		const STAGGER_DELAY = '200ms'
-		sliderDelays.value = {
-			left: newValues.left < sliderLeft.value ? '0ms' : STAGGER_DELAY,
-			right: newValues.left < sliderLeft.value ? STAGGER_DELAY : '0ms',
-			top: newValues.top < sliderTop.value ? '0ms' : STAGGER_DELAY,
-			bottom: newValues.top < sliderTop.value ? STAGGER_DELAY : '0ms',
-		}
-		sliderLeft.value = newValues.left
-		sliderRight.value = newValues.right
-		sliderTop.value = newValues.top
-		sliderBottom.value = newValues.bottom
-	}
-}
-
-onMounted(async () => {
-	window.addEventListener('resize', pickLink)
-	await nextTick()
-	pickLink()
-})
-
-onUnmounted(() => {
-	window.removeEventListener('resize', pickLink)
-})
-
-watch(
-	filteredLinks,
-	async () => {
-		await nextTick()
-		pickLink()
-	},
-	{ deep: true },
-)
-
-watch(route, async () => {
-	await nextTick()
-	pickLink()
-})
-</script>
-<style scoped>
-.navtabs-transition {
-	/* Delay on opacity is to hide any jankiness as the page loads */
-	transition:
-		left 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
-		right 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
-		top 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(topDelay),
-		bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay),
-		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
-}
-</style>
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 8d9bbdcdea..dabe0fc24f 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -299,6 +299,30 @@
   "instance.edit-world.title": {
     "message": "Edit world"
   },
+  "instance.files.adding-files": {
+    "message": "Adding files ({completed}/{total})"
+  },
+  "instance.files.create-failed": {
+    "message": "Create failed"
+  },
+  "instance.files.delete-failed": {
+    "message": "Delete failed"
+  },
+  "instance.files.extract-failed": {
+    "message": "Extract failed"
+  },
+  "instance.files.move-failed": {
+    "message": "Move failed"
+  },
+  "instance.files.rename-failed": {
+    "message": "Rename failed"
+  },
+  "instance.files.save-as": {
+    "message": "Save as..."
+  },
+  "instance.files.upload-failed": {
+    "message": "Upload failed"
+  },
   "instance.server-modal.address": {
     "message": "Address"
   },
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index ce2f8502e5..ae8a07ddbb 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -18,6 +18,7 @@ import {
 	DropdownSelect,
 	injectNotificationManager,
 	LoadingIndicator,
+	NavTabs,
 	Pagination,
 	ProjectCard,
 	ProjectCardList,
@@ -38,7 +39,6 @@ import { useRoute, useRouter } from 'vue-router'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import type Instance from '@/components/ui/Instance.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import NavTabs from '@/components/ui/NavTabs.vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
 import { process_listener } from '@/helpers/events'
diff --git a/apps/app-frontend/src/pages/instance/Files.vue b/apps/app-frontend/src/pages/instance/Files.vue
new file mode 100644
index 0000000000..0bd0c19bcd
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/Files.vue
@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import type { EditingFile, FileItem, UploadState } from '@modrinth/ui'
+import {
+	defineMessages,
+	FilePageLayout,
+	injectNotificationManager,
+	provideFileManager,
+	useDebugLogger,
+	useVIntl,
+} from '@modrinth/ui'
+import { invoke } from '@tauri-apps/api/core'
+import {
+	mkdir,
+	readDir,
+	readFile as readFileBytes,
+	readTextFile,
+	remove,
+	rename,
+	stat,
+	writeFile as writeFileBytes,
+	writeTextFile,
+} from '@tauri-apps/plugin-fs'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { profile_listener } from '@/helpers/events'
+import { get_full_path } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+import { highlightInFolder } from '@/helpers/utils'
+
+const props = defineProps<{
+	instance: GameInstance
+	options: unknown
+	offline: boolean
+	playing: boolean
+	installed: boolean
+	isServerInstance: boolean
+}>()
+
+const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+const debug = useDebugLogger('Files')
+
+const messages = defineMessages({
+	saveAs: {
+		id: 'instance.files.save-as',
+		defaultMessage: 'Save as...',
+	},
+	addingFiles: {
+		id: 'instance.files.adding-files',
+		defaultMessage: 'Adding files ({completed}/{total})',
+	},
+	deleteFailed: {
+		id: 'instance.files.delete-failed',
+		defaultMessage: 'Delete failed',
+	},
+	renameFailed: {
+		id: 'instance.files.rename-failed',
+		defaultMessage: 'Rename failed',
+	},
+	moveFailed: {
+		id: 'instance.files.move-failed',
+		defaultMessage: 'Move failed',
+	},
+	createFailed: {
+		id: 'instance.files.create-failed',
+		defaultMessage: 'Create failed',
+	},
+	uploadFailed: {
+		id: 'instance.files.upload-failed',
+		defaultMessage: 'Upload failed',
+	},
+	extractFailed: {
+		id: 'instance.files.extract-failed',
+		defaultMessage: 'Extract failed',
+	},
+})
+
+const instanceRoot = ref('')
+const items = ref<FileItem[]>([])
+const loading = ref(true)
+const error = ref<Error | null>(null)
+const currentPath = ref('')
+const editingFile = ref<EditingFile | null>(null)
+
+debug('setup: start, instance.path =', props.instance.path)
+
+onMounted(async () => {
+	debug('onMounted: fired')
+	instanceRoot.value = await get_full_path(props.instance.path)
+	debug('onMounted: instanceRoot =', instanceRoot.value)
+	await refresh()
+	debug('onMounted: refresh complete, items =', items.value.length, 'error =', error.value)
+})
+
+function resolvePath(relativePath: string): string {
+	return relativePath ? `${instanceRoot.value}/${relativePath}` : instanceRoot.value
+}
+
+async function listDirectory(dirPath: string): Promise<FileItem[]> {
+	const absPath = resolvePath(dirPath)
+	debug('listDirectory: dirPath =', dirPath, 'absPath =', absPath)
+	const entries = await readDir(absPath)
+	debug('listDirectory: got', entries.length, 'entries')
+
+	const results = await Promise.all(
+		entries.map(async (entry) => {
+			const entryAbsPath = `${absPath}/${entry.name}`
+			let metadata
+			try {
+				metadata = await stat(entryAbsPath)
+			} catch {
+				debug('listDirectory: stat failed for', entry.name, '- skipping')
+				return null
+			}
+			const item: FileItem = {
+				name: entry.name,
+				type: entry.isDirectory ? 'directory' : 'file',
+				path: dirPath ? `${dirPath}/${entry.name}` : entry.name,
+				modified: metadata.mtime ? Math.floor(metadata.mtime.getTime() / 1000) : 0,
+				created: metadata.birthtime ? Math.floor(metadata.birthtime.getTime() / 1000) : 0,
+			}
+			if (!entry.isDirectory) {
+				item.size = metadata.size
+			}
+			if (entry.isDirectory) {
+				try {
+					const children = await readDir(entryAbsPath)
+					item.count = children.length
+				} catch {
+					item.count = 0
+				}
+			}
+			return item
+		}),
+	)
+	return results.filter((item): item is FileItem => item !== null)
+}
+
+async function refresh() {
+	debug('refresh: called, currentPath =', currentPath.value, 'instanceRoot =', instanceRoot.value)
+	loading.value = true
+	error.value = null
+	try {
+		items.value = await listDirectory(currentPath.value)
+		debug('refresh: success, items =', items.value.length)
+	} catch (e) {
+		debug('refresh: error =', e)
+		error.value = e instanceof Error ? e : new Error(String(e))
+		items.value = []
+	} finally {
+		loading.value = false
+	}
+}
+
+function navigateTo(path: string) {
+	debug('navigateTo:', path)
+	currentPath.value = path.startsWith('/') ? path.slice(1) : path
+	refresh()
+}
+
+function startEditing(file: EditingFile) {
+	editingFile.value = file
+}
+
+function stopEditing() {
+	editingFile.value = null
+}
+
+async function handleCreateItem(name: string, type: 'file' | 'directory') {
+	const targetPath = currentPath.value ? `${currentPath.value}/${name}` : name
+	const absPath = resolvePath(targetPath)
+	try {
+		if (type === 'directory') {
+			await mkdir(absPath)
+		} else {
+			await writeTextFile(absPath, '')
+		}
+		await refresh()
+	} catch (e) {
+		addNotification({
+			title: formatMessage(messages.createFailed),
+			text: e instanceof Error ? e.message : '',
+			type: 'error',
+		})
+	}
+}
+
+async function handleRenameItem(path: string, newName: string) {
+	const oldAbs = resolvePath(path)
+	const parentDir = path.includes('/') ? path.substring(0, path.lastIndexOf('/')) : ''
+	const newPath = parentDir ? `${parentDir}/${newName}` : newName
+	const newAbs = resolvePath(newPath)
+	try {
+		await rename(oldAbs, newAbs)
+		await refresh()
+	} catch (e) {
+		addNotification({
+			title: formatMessage(messages.renameFailed),
+			text: e instanceof Error ? e.message : '',
+			type: 'error',
+		})
+	}
+}
+
+async function handleMoveItem(source: string, destination: string) {
+	try {
+		await rename(resolvePath(source), resolvePath(destination))
+		await refresh()
+	} catch (e) {
+		addNotification({
+			title: formatMessage(messages.moveFailed),
+			text: e instanceof Error ? e.message : '',
+			type: 'error',
+		})
+	}
+}
+
+async function handleDeleteItem(path: string, recursive: boolean) {
+	try {
+		await remove(resolvePath(path), { recursive })
+		await refresh()
+	} catch (e) {
+		addNotification({
+			title: formatMessage(messages.deleteFailed),
+			text: e instanceof Error ? e.message : '',
+			type: 'error',
+		})
+	}
+}
+
+async function handleReadFile(path: string): Promise<string> {
+	return await readTextFile(resolvePath(path))
+}
+
+async function handleReadFileAsBlob(path: string): Promise<Blob> {
+	const bytes = await readFileBytes(resolvePath(path))
+	return new Blob([bytes])
+}
+
+async function handleWriteFile(path: string, content: string) {
+	await writeTextFile(resolvePath(path), content)
+}
+
+async function handleDownloadFile(path: string, _fileName: string) {
+	await invoke('plugin:files|file_save_as', {
+		instancePath: props.instance.path,
+		filePath: path,
+	})
+}
+
+const uploadState = ref<UploadState>({
+	isUploading: false,
+	currentFileName: null,
+	currentFileProgress: 0,
+	uploadedBytes: 0,
+	totalBytes: 0,
+	completedFiles: 0,
+	totalFiles: 0,
+})
+
+async function handleUploadFiles(files: File[]) {
+	if (files.length === 0) return
+
+	uploadState.value = {
+		isUploading: true,
+		currentFileName: '',
+		currentFileProgress: 0,
+		uploadedBytes: 0,
+		totalBytes: files.reduce((sum, f) => sum + f.size, 0),
+		completedFiles: 0,
+		totalFiles: files.length,
+	}
+	try {
+		for (const file of files) {
+			uploadState.value.currentFileName = file.name
+			const buffer = await file.arrayBuffer()
+			const targetPath = resolvePath(
+				currentPath.value ? `${currentPath.value}/${file.name}` : file.name,
+			)
+			await writeFileBytes(targetPath, new Uint8Array(buffer))
+			uploadState.value.completedFiles++
+			uploadState.value.uploadedBytes += file.size
+			uploadState.value.currentFileProgress = 1
+		}
+	} catch (e) {
+		addNotification({
+			title: formatMessage(messages.uploadFailed),
+			text: e instanceof Error ? e.message : '',
+			type: 'error',
+		})
+	} finally {
+		uploadState.value.isUploading = false
+		await refresh()
+	}
+}
+
+async function handleExtractFile(path: string, override: boolean, dry: boolean) {
+	try {
+		return await invoke('plugin:files|file_extract_zip', {
+			instancePath: props.instance.path,
+			filePath: path,
+			overrideConflicts: override,
+			dryRun: dry,
+		})
+	} catch (e) {
+		addNotification({
+			title: formatMessage(messages.extractFailed),
+			text: e instanceof Error ? e.message : '',
+			type: 'error',
+		})
+	}
+}
+
+debug('setup: registering profile_listener')
+const unlistenProfiles = await profile_listener(
+	async (event: { event: string; profile_path_id: string }) => {
+		debug('profile_listener: event =', event.event, 'path =', event.profile_path_id)
+		if (event.profile_path_id === props.instance.path && event.event === 'synced') {
+			debug('profile_listener: synced event matched, calling refresh')
+			await refresh()
+		}
+	},
+)
+debug('setup: profile_listener registered')
+
+onUnmounted(() => {
+	unlistenProfiles()
+})
+
+watch(
+	() => props.instance.path,
+	async () => {
+		debug('watch instance.path: changed to', props.instance.path)
+		instanceRoot.value = await get_full_path(props.instance.path)
+		currentPath.value = ''
+		await refresh()
+	},
+)
+
+provideFileManager({
+	items,
+	loading,
+	error,
+	currentPath,
+	navigateTo,
+	editingFile,
+	startEditing,
+	stopEditing,
+	createItem: handleCreateItem,
+	renameItem: handleRenameItem,
+	moveItem: handleMoveItem,
+	deleteItem: handleDeleteItem,
+	readFile: handleReadFile,
+	readFileAsBlob: handleReadFileAsBlob,
+	writeFile: handleWriteFile,
+	downloadFile: handleDownloadFile,
+	uploadFiles: handleUploadFiles,
+	uploadState,
+	extractFile: handleExtractFile,
+	refresh,
+	basePath: instanceRoot,
+	openInFolder: (path: string) => highlightInFolder(path),
+	downloadButtonLabel: formatMessage(messages.saveAs),
+	uploadingLabel: (completed: number, total: number) =>
+		formatMessage(messages.addingFiles, { completed, total }),
+})
+</script>
+
+<template>
+	<FilePageLayout :show-refresh-button="true" />
+</template>
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 52c51bcfb3..8a7ef98c19 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -285,6 +285,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import {
+	BoxesIcon,
 	CheckCircleIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
@@ -302,6 +303,7 @@ import {
 	ServerIcon,
 	SettingsIcon,
 	StopCircleIcon,
+	TerminalSquareIcon,
 	UpdatedIcon,
 	UserPlusIcon,
 	XIcon,
@@ -312,6 +314,7 @@ import {
 	ContentPageHeader,
 	injectNotificationManager,
 	LoadingIndicator,
+	NavTabs,
 	OverflowMenu,
 	ServerOnlinePlayers,
 	ServerPing,
@@ -329,7 +332,6 @@ import ContextMenu from '@/components/ui/ContextMenu.vue'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
-import NavTabs from '@/components/ui/NavTabs.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_v3 } from '@/helpers/cache.js'
 import { process_listener, profile_listener } from '@/helpers/events'
@@ -451,14 +453,22 @@ const tabs = computed(() => [
 	{
 		label: 'Content',
 		href: `${basePath.value}`,
+		icon: BoxesIcon,
 	},
 	{
 		label: 'Worlds',
 		href: `${basePath.value}/worlds`,
+		icon: GlobeIcon,
+	},
+	{
+		label: 'Files',
+		href: `${basePath.value}/files`,
+		icon: FolderOpenIcon,
 	},
 	{
 		label: 'Logs',
 		href: `${basePath.value}/logs`,
+		icon: TerminalSquareIcon,
 	},
 ])
 
diff --git a/apps/app-frontend/src/pages/instance/index.js b/apps/app-frontend/src/pages/instance/index.js
index be2167e6bc..b96705e883 100644
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -1,7 +1,8 @@
+import Files from './Files.vue'
 import Index from './Index.vue'
 import Logs from './Logs.vue'
 import Mods from './Mods.vue'
 import Overview from './Overview.vue'
 import Worlds from './Worlds.vue'
 
-export { Index, Logs, Mods, Overview, Worlds }
+export { Files, Index, Logs, Mods, Overview, Worlds }
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index 46f039827a..327ab44d90 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { PlusIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button, injectNotificationManager, NavTabs } from '@modrinth/ui'
 import { inject, onUnmounted, ref, shallowRef } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { NewInstanceImage } from '@/assets/icons'
-import NavTabs from '@/components/ui/NavTabs.vue'
 import { profile_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/profile.js'
 import { useBreadcrumbs } from '@/store/breadcrumbs.js'
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 60548fd667..aa739bf0c5 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -224,6 +224,7 @@ import {
 import {
 	ButtonStyled,
 	injectNotificationManager,
+	NavTabs,
 	OverflowMenu,
 	ProjectBackgroundGradient,
 	ProjectHeader,
@@ -242,7 +243,6 @@ import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import NavTabs from '@/components/ui/NavTabs.vue'
 import {
 	get_organization,
 	get_project,
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 0c7b641e54..2b52f74d97 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -178,6 +178,15 @@ export default new createRouter({
 						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
 					},
 				},
+				{
+					path: 'files',
+					name: 'Files',
+					component: Instance.Files,
+					meta: {
+						useRootContext: true,
+						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Files' }],
+					},
+				},
 				{
 					path: 'logs',
 					name: 'Logs',
diff --git a/apps/app/Cargo.toml b/apps/app/Cargo.toml
index 4a07f2a1c0..375158ea8e 100644
--- a/apps/app/Cargo.toml
+++ b/apps/app/Cargo.toml
@@ -8,6 +8,7 @@ repository = "https://github.com/modrinth/code/apps/app/"
 license = "GPL-3.0-only"
 
 [dependencies]
+async_zip = { workspace = true, features = ["deflate", "tokio-fs"] }
 chrono = { workspace = true }
 daedalus = { workspace = true }
 dashmap = { workspace = true }
@@ -28,6 +29,7 @@ tauri = { workspace = true, features = [
 ] }
 tauri-plugin-deep-link = { workspace = true }
 tauri-plugin-dialog = { workspace = true }
+tauri-plugin-fs = { workspace = true }
 tauri-plugin-http = { workspace = true }
 tauri-plugin-opener = { workspace = true }
 tauri-plugin-os = { workspace = true }
diff --git a/apps/app/build.rs b/apps/app/build.rs
index 0404dc914e..358975ed1f 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -263,6 +263,14 @@ fn main() {
                         DefaultPermissionRule::AllowAllCommands,
                     ),
             )
+            .plugin(
+                "files",
+                InlinedPlugin::new()
+                    .commands(&["file_extract_zip", "file_save_as"])
+                    .default_permission(
+                        DefaultPermissionRule::AllowAllCommands,
+                    ),
+            )
             .plugin(
                 "friends",
                 InlinedPlugin::new()
diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index 588b59b597..f1a45bf27d 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -25,6 +25,32 @@
 			"allow": [{ "url": "https://modrinth.com/*" }, { "url": "https://*.modrinth.com/*" }]
 		},
 
+		"dialog:allow-save",
+
+		"fs:allow-read-dir",
+		"fs:allow-read-file",
+		"fs:allow-read-text-file",
+		"fs:allow-write-file",
+		"fs:allow-write-text-file",
+		"fs:allow-create",
+		"fs:allow-remove",
+		"fs:allow-rename",
+		"fs:allow-copy-file",
+		"fs:allow-stat",
+		"fs:allow-exists",
+		"fs:allow-mkdir",
+		{
+			"identifier": "fs:scope",
+			"allow": [
+				{ "path": "$APPDATA/profiles" },
+				{ "path": "$APPDATA/profiles/**" },
+				{ "path": "$APPCONFIG/profiles" },
+				{ "path": "$APPCONFIG/profiles/**" },
+				{ "path": "$CONFIG/profiles" },
+				{ "path": "$CONFIG/profiles/**" }
+			]
+		},
+
 		"auth:default",
 		"import:default",
 		"jre:default",
@@ -37,6 +63,7 @@
 		"process:default",
 		"profile:default",
 		"cache:default",
+		"files:default",
 		"settings:default",
 		"tags:default",
 		"utils:default",
diff --git a/apps/app/src/api/files.rs b/apps/app/src/api/files.rs
new file mode 100644
index 0000000000..2c13a46923
--- /dev/null
+++ b/apps/app/src/api/files.rs
@@ -0,0 +1,140 @@
+use crate::api::Result;
+use async_zip::base::read::seek::ZipFileReader;
+use serde::Serialize;
+use std::io::Cursor;
+use tauri::Runtime;
+use tauri_plugin_dialog::DialogExt;
+use theseus::profile::get_full_path;
+
+pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
+    tauri::plugin::Builder::new("files")
+        .invoke_handler(tauri::generate_handler![
+            file_extract_zip,
+            file_save_as,
+        ])
+        .build()
+}
+
+#[derive(Serialize)]
+pub struct ExtractDryRunResult {
+    modpack_name: Option<String>,
+    conflicting_files: Vec<String>,
+}
+
+#[tauri::command]
+pub async fn file_extract_zip(
+    instance_path: &str,
+    file_path: &str,
+    override_conflicts: bool,
+    dry_run: bool,
+) -> Result<Option<ExtractDryRunResult>> {
+    let base = get_full_path(instance_path).await?;
+    let zip_path = base.join(file_path);
+    let extract_dir = zip_path
+        .parent()
+        .map(|p| p.to_path_buf())
+        .unwrap_or_else(|| base.clone());
+
+    let file_bytes = tokio::fs::read(&zip_path).await?;
+    let reader = Cursor::new(file_bytes);
+
+    let zip_reader = ZipFileReader::with_tokio(reader).await.map_err(|e| {
+        theseus::Error::from(theseus::ErrorKind::OtherError(format!(
+            "Failed to read zip file: {e}"
+        )))
+    })?;
+
+    let entries: Vec<(usize, String)> = zip_reader
+        .file()
+        .entries()
+        .iter()
+        .enumerate()
+        .filter_map(|(i, entry)| {
+            let name = entry.filename().as_str().ok()?.to_string();
+            if name.ends_with('/') {
+                None
+            } else {
+                Some((i, name))
+            }
+        })
+        .collect();
+
+    if dry_run {
+        let mut conflicting_files = Vec::new();
+        for (_, name) in &entries {
+            let target = extract_dir.join(name);
+            if target.exists() {
+                conflicting_files.push(name.clone());
+            }
+        }
+        return Ok(Some(ExtractDryRunResult {
+            modpack_name: None,
+            conflicting_files,
+        }));
+    }
+
+    let mut zip_reader = zip_reader;
+    for (index, name) in &entries {
+        let target = extract_dir.join(name);
+
+        if !override_conflicts && target.exists() {
+            continue;
+        }
+
+        if let Some(parent) = target.parent() {
+            tokio::fs::create_dir_all(parent).await?;
+        }
+
+        let mut file_bytes = Vec::new();
+        let mut entry_reader =
+            zip_reader.reader_with_entry(*index).await.map_err(|e| {
+                theseus::Error::from(theseus::ErrorKind::OtherError(format!(
+                    "Failed to read zip entry: {e}"
+                )))
+            })?;
+        entry_reader
+            .read_to_end_checked(&mut file_bytes)
+            .await
+            .map_err(|e| {
+                theseus::Error::from(theseus::ErrorKind::OtherError(format!(
+                    "Failed to extract zip entry: {e}"
+                )))
+            })?;
+
+        tokio::fs::write(&target, &file_bytes).await?;
+    }
+
+    Ok(None)
+}
+
+#[tauri::command]
+pub async fn file_save_as<R: Runtime>(
+    app: tauri::AppHandle<R>,
+    instance_path: &str,
+    file_path: &str,
+) -> Result<()> {
+    let base = get_full_path(instance_path).await?;
+    let source = base.join(file_path);
+    let file_name = source
+        .file_name()
+        .unwrap_or_default()
+        .to_string_lossy()
+        .to_string();
+
+    let dest = app
+        .dialog()
+        .file()
+        .set_file_name(&file_name)
+        .blocking_save_file();
+
+    if let Some(dest) = dest {
+        let dest_path = std::path::PathBuf::try_from(dest).map_err(|e| {
+            theseus::Error::from(theseus::ErrorKind::OtherError(format!(
+                "Invalid save path: {e}"
+            )))
+        })?;
+        tokio::fs::copy(&source, &dest_path).await?;
+    }
+
+    Ok(())
+}
diff --git a/apps/app/src/api/mod.rs b/apps/app/src/api/mod.rs
index a16271fe2f..b865499b55 100644
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -19,6 +19,7 @@ pub mod utils;
 
 pub mod ads;
 pub mod cache;
+pub mod files;
 pub mod friends;
 pub mod worlds;
 
diff --git a/apps/app/src/main.rs b/apps/app/src/main.rs
index 4b59e69690..03a8227ac6 100644
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -152,6 +152,7 @@ fn main() {
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_deep_link::init())
+        .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_opener::init())
         .plugin(
             tauri_plugin_window_state::Builder::default()
@@ -229,6 +230,7 @@ fn main() {
         .plugin(api::tags::init())
         .plugin(api::utils::init())
         .plugin(api::cache::init())
+        .plugin(api::files::init())
         .plugin(api::ads::init())
         .plugin(api::friends::init())
         .plugin(api::worlds::init())
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index b003bb72a9..305b14442b 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -446,13 +446,6 @@ textarea {
 	}
 }
 
-button,
-input[type='button'] {
-	cursor: pointer;
-	border: none;
-	outline: 2px solid transparent;
-}
-
 kbd {
 	background-color: var(--color-code-bg);
 	color: var(--color-code-text);
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index ffb0df3a10..97e83c06ff 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -30,6 +30,7 @@ import {
 	type OverflowMenuOption,
 	useFormatDateTime,
 } from '@modrinth/ui'
+import { NavTabs } from '@modrinth/ui'
 import {
 	capitalizeString,
 	formatProjectType,
@@ -41,7 +42,6 @@ import dayjs from 'dayjs'
 import { computed, reactive, ref, watch } from 'vue'
 
 import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
-import NavTabs from '~/components/ui/NavTabs.vue'
 import ThreadView from '~/components/ui/thread/ThreadView.vue'
 
 const auth = await useAuth()
diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
index 4201695068..9f2d465ce1 100644
--- a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
+++ b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
@@ -51,14 +51,14 @@
 		</NewModal>
 
 		<div class="flex flex-row items-center gap-2 rounded-lg">
-			<ButtonStyled v-if="isInstalling" type="standard" color="brand">
+			<ButtonStyled v-if="isInstalling" type="standard" color="brand" size="large">
 				<button disabled class="flex-shrink-0">
 					<PanelSpinner class="size-5" /> Installing...
 				</button>
 			</ButtonStyled>
 
 			<template v-else>
-				<ButtonStyled v-if="showStopButton" type="transparent">
+				<ButtonStyled v-if="showStopButton" type="transparent" size="large">
 					<button :disabled="!canTakeAction" @click="initiateAction('Stop')">
 						<div class="flex gap-1">
 							<StopCircleIcon class="h-5 w-5" />
@@ -67,7 +67,7 @@
 					</button>
 				</ButtonStyled>
 
-				<ButtonStyled type="standard" color="brand">
+				<ButtonStyled type="standard" color="brand" size="large">
 					<button v-tooltip="busyReason" :disabled="!canTakeAction" @click="handlePrimaryAction">
 						<div v-if="isTransitionState" class="grid place-content-center">
 							<LoadingIcon />
@@ -77,7 +77,7 @@
 					</button>
 				</ButtonStyled>
 
-				<ButtonStyled circular type="transparent">
+				<ButtonStyled circular type="transparent" size="large">
 					<TeleportOverflowMenu :options="[...menuOptions]">
 						<MoreVerticalIcon aria-hidden="true" />
 						<template #kill>
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 60c5d51c1e..aa363f4c13 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1076,6 +1076,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
+	NavTabs,
 	NewModal,
 	OpenInAppModal,
 	OverflowMenu,
@@ -1115,7 +1116,6 @@ import AutomaticAccordion from '~/components/ui/AutomaticAccordion.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
-import NavTabs from '~/components/ui/NavTabs.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/description.vue b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
index 78fa0482c0..ef168ec53f 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/description.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<ConfirmLeaveModal ref="confirmLeaveModal" />
 		<div class="universal-card">
 			<div class="markdown-disclaimer">
 				<h2>Description</h2>
@@ -41,9 +42,11 @@
 import { TriangleAlertIcon } from '@modrinth/assets'
 import { countText, MIN_DESCRIPTION_CHARS } from '@modrinth/moderation'
 import {
+	ConfirmLeaveModal,
 	injectProjectPageContext,
 	MarkdownEditor,
 	UnsavedChangesPopup,
+	usePageLeaveSafety,
 	useSavable,
 } from '@modrinth/ui'
 import { TeamMemberPermission } from '@modrinth/utils'
@@ -53,13 +56,15 @@ import { useImageUpload } from '~/composables/image-upload.ts'
 
 const { projectV2: project, currentMember, patchProject } = injectProjectPageContext()
 
-const { saved, current, saving, reset, save } = useSavable(
+const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	() => ({ description: project.value.body }),
 	async ({ description }) => {
 		await patchProject({ body: description })
 	},
 )
 
+const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
+
 const descriptionWarning = computed(() => {
 	const text = current.value.description?.trim() || ''
 	const charCount = countText(text)
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/general.vue b/apps/frontend/src/pages/[type]/[id]/settings/general.vue
index b338e3bfbc..54570dde34 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/general.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/general.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+	ConfirmLeaveModal,
 	defineMessages,
 	IconSelect,
 	injectProjectPageContext,
@@ -7,6 +8,7 @@ import {
 	SettingsLabel,
 	StyledInput,
 	UnsavedChangesPopup,
+	usePageLeaveSafety,
 	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
@@ -15,7 +17,7 @@ const { formatMessage } = useVIntl()
 
 const { projectV2: project, patchProject } = injectProjectPageContext()
 
-const { saved, current, saving, reset, save } = useSavable(
+const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	() => ({
 		title: project.value.title,
 		tagline: project.value.description,
@@ -31,6 +33,8 @@ const { saved, current, saving, reset, save } = useSavable(
 	},
 )
 
+const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
+
 const messages = defineMessages({
 	nameTitle: {
 		id: 'project.settings.general.name.title',
@@ -117,6 +121,7 @@ const placeholder = computed(() => placeholders[placeholderIndex.value] ?? place
 </script>
 <template>
 	<div>
+		<ConfirmLeaveModal ref="confirmLeaveModal" />
 		<UnsavedChangesPopup
 			:original="saved"
 			:modified="current"
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 65141f412f..e78a94564d 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -302,6 +302,7 @@
 			@reset="resetChanges"
 			@save="handleSave"
 		/>
+		<ConfirmLeaveModal ref="confirmLeaveModal" />
 	</div>
 </template>
 
@@ -319,12 +320,14 @@ import { MIN_SUMMARY_CHARS } from '@modrinth/moderation'
 import {
 	Avatar,
 	Combobox,
+	ConfirmLeaveModal,
 	ConfirmModal,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	StyledInput,
 	UnsavedChangesPopup,
+	usePageLeaveSafety,
 } from '@modrinth/ui'
 import { fileIsValid, formatProjectStatus, formatProjectType } from '@modrinth/utils'
 
@@ -480,6 +483,12 @@ const modified = computed(() => ({
 	deletedBanner: deletedBanner.value,
 }))
 
+const hasChanges = computed(() =>
+	Object.keys(modified.value).some((key) => original.value[key] !== modified.value[key]),
+)
+
+const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
+
 function resetChanges() {
 	name.value = project.value.title
 	slug.value = project.value.slug
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/license.vue b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
index 4a18ed2201..682b60ecf4 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<ConfirmLeaveModal ref="confirmLeaveModal" />
 		<section class="universal-card">
 			<h2 class="label__title size-card-header">License</h2>
 			<p class="label__description">
@@ -154,10 +155,12 @@
 <script setup lang="ts">
 import {
 	Checkbox,
+	ConfirmLeaveModal,
 	DropdownSelect,
 	injectProjectPageContext,
 	StyledInput,
 	UnsavedChangesPopup,
+	usePageLeaveSafety,
 	useSavable,
 } from '@modrinth/ui'
 import {
@@ -194,7 +197,7 @@ function getInitialLicense() {
 	)
 }
 
-const { saved, current, saving, reset, save } = useSavable(
+const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	() => ({
 		license: getInitialLicense(),
 		licenseUrl: project.value.license.url ?? '',
@@ -219,6 +222,8 @@ const { saved, current, saving, reset, save } = useSavable(
 	},
 )
 
+const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
+
 const hasPermission = computed(() => {
 	return (currentMember.value?.permissions ?? 0) & TeamMemberPermission.EDIT_DETAILS
 })
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/server.vue b/apps/frontend/src/pages/[type]/[id]/settings/server.vue
index 74842229f3..12d69724ac 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/server.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/server.vue
@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<ConfirmLeaveModal ref="confirmLeaveModal" />
 		<section class="universal-card">
 			<div class="flex flex-col gap-6">
 				<div class="text-2xl font-semibold text-contrast">Server details</div>
@@ -161,6 +162,7 @@ import { InfoIcon, RefreshCwIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	Combobox,
+	ConfirmLeaveModal,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
@@ -169,6 +171,7 @@ import {
 	SERVER_REGIONS,
 	StyledInput,
 	UnsavedChangesPopup,
+	usePageLeaveSafety,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -364,6 +367,19 @@ const modified = computed(() => ({
 	languages: languages.value,
 }))
 
+const hasChanges = computed(() =>
+	Object.keys(original.value).some((key) => {
+		const a = original.value[key]
+		const b = modified.value[key]
+		if (Array.isArray(a) && Array.isArray(b)) {
+			return a.length !== b.length || a.some((v, i) => v !== b[i])
+		}
+		return a !== b
+	}),
+)
+
+const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
+
 function resetChanges() {
 	javaAddress.value = projectV3.value?.minecraft_java_server?.address ?? ''
 	bedrockAddress.value = projectV3.value?.minecraft_bedrock_server?.address ?? ''
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index fde050e66b..93d4f1f0fc 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<ConfirmLeaveModal ref="confirmLeaveModal" />
 		<section class="universal-card">
 			<div class="label">
 				<h3>
@@ -143,11 +144,13 @@ import {
 } from '@modrinth/assets'
 import {
 	Checkbox,
+	ConfirmLeaveModal,
 	formatCategory,
 	formatCategoryHeader,
 	FormattedTag,
 	injectProjectPageContext,
 	UnsavedChangesPopup,
+	usePageLeaveSafety,
 	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
@@ -187,7 +190,7 @@ const matchesProjectType = (x: Category) => {
 	}
 }
 
-const { saved, current, saving, reset, save } = useSavable(
+const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	() => ({
 		selectedTags: sortedCategories(tags.value, formatCategoryName, locale.value).filter(
 			(x: Category) =>
@@ -237,6 +240,8 @@ const { saved, current, saving, reset, save } = useSavable(
 	},
 )
 
+const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
+
 const categoryLists = computed(() => {
 	const lists: Record<string, Category[]> = {}
 	sortedCategories(tags.value, formatCategoryName, locale.value).forEach((x: Category) => {
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 0c9b80f2fa..a8ec70ea7f 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -397,6 +397,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
+	NavTabs,
 	NewModal,
 	normalizeChildren,
 	NormalPage,
@@ -417,7 +418,6 @@ import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
-import NavTabs from '~/components/ui/NavTabs.vue'
 
 const { handleError } = injectNotificationManager()
 const api = injectModrinthClient()
diff --git a/apps/frontend/src/pages/discover.vue b/apps/frontend/src/pages/discover.vue
index 227810c776..bd046074fb 100644
--- a/apps/frontend/src/pages/discover.vue
+++ b/apps/frontend/src/pages/discover.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { commonProjectTypeCategoryMessages, useVIntl } from '@modrinth/ui'
-
-import NavTabs from '~/components/ui/NavTabs.vue'
+import { commonProjectTypeCategoryMessages, NavTabs, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index bcf3667fcf..9eed7db684 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -103,68 +103,89 @@
 				: `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
 		}"
 	>
-		<div class="border-0 border-b border-solid border-divider pb-4">
-			<NuxtLink to="/hosting/manage" class="breadcrumb goto-link flex w-fit items-center">
-				<LeftArrowIcon />
-				All servers
-			</NuxtLink>
-			<div class="flex w-full min-w-0 select-none flex-col items-center gap-4 pt-4 sm:flex-row">
+		<NuxtLink to="/hosting/manage" class="breadcrumb goto-link flex w-fit items-center">
+			<LeftArrowIcon />
+			All servers
+		</NuxtLink>
+		<ContentPageHeader>
+			<template #icon>
 				<ServerIcon
 					:image="
 						serverData.is_medal ? 'https://cdn-raw.modrinth.com/medal_icon.webp' : serverImage
 					"
-					class="drop-shadow-lg sm:drop-shadow-none"
 				/>
+			</template>
+			<template #title>
+				{{ serverData.name }}
+			</template>
+			<template #stats>
 				<div
-					class="flex min-w-0 flex-1 flex-col-reverse items-center gap-2 sm:flex-col sm:items-start"
+					v-if="serverData.flows?.intro"
+					class="flex items-center gap-2 font-semibold text-secondary"
 				>
-					<div class="flex w-full flex-col items-center gap-4 sm:flex-row">
-						<h1
-							class="m-0 w-screen flex-shrink gap-3 truncate px-3 text-center text-2xl font-bold text-contrast sm:w-full sm:p-0 sm:text-left"
-						>
-							{{ serverData.name }}
-						</h1>
-						<div
-							v-if="isConnected"
-							data-pyro-server-action-buttons
-							class="server-action-buttons-anim flex w-fit flex-shrink-0"
-						>
-							<PanelServerActionButton
-								v-if="!serverData.flows?.intro"
-								class="flex-shrink-0"
-								:is-online="isServerRunning"
-								:is-actioning="isActioning"
-								:is-installing="serverData.status === 'installing'"
-								:disabled="isActioning || !!error"
-								:server-name="serverData.name"
-								:server-data="serverData"
-								:uptime-seconds="uptimeSeconds"
-								:busy-reason="
-									busyReasons.length > 0 ? formatMessage(busyReasons[0].reason) : undefined
-								"
-								@action="sendPowerAction"
-							/>
-						</div>
+					<SettingsIcon /> Configuring server...
+				</div>
+				<div v-else class="flex flex-wrap items-center gap-2">
+					<div v-if="serverData.loader" class="flex items-center gap-2 font-medium capitalize">
+						<LoaderIcon :loader="serverData.loader" class="flex shrink-0 [&&]:size-5" />
+						{{ serverData.loader }} {{ serverData.mc_version }}
 					</div>
 
 					<div
-						v-if="serverData.flows?.intro"
-						class="flex items-center gap-2 font-semibold text-secondary"
+						v-if="serverData.loader && serverData.net?.domain"
+						class="h-1.5 w-1.5 rounded-full bg-surface-5"
+					></div>
+
+					<div
+						v-if="serverData.net?.domain"
+						v-tooltip="'Copy server address'"
+						class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
+						@click="copyServerAddress"
 					>
-						<SettingsIcon /> Configuring server...
+						<LinkIcon class="flex size-5 shrink-0" />
+						{{ serverData.net.domain }}.modrinth.gg
+					</div>
+
+					<div v-if="uptimeSeconds" class="h-1.5 w-1.5 rounded-full bg-surface-5"></div>
+
+					<div v-if="uptimeSeconds" class="flex items-center gap-2 font-medium">
+						<TimerIcon class="flex size-5 shrink-0" />
+						{{ formattedUptime }}
 					</div>
-					<ServerInfoLabels
-						v-else
+
+					<div
+						v-if="serverProject && (serverData.loader || serverData.net?.domain || uptimeSeconds)"
+						class="h-1.5 w-1.5 rounded-full bg-surface-5"
+					></div>
+
+					<div v-if="serverProject" class="flex items-center gap-1.5 font-medium text-primary">
+						Linked to
+						<Avatar :src="serverProject.icon_url" :alt="serverProject.title" size="24px" />
+						<NuxtLink
+							:to="`/project/${serverProject.slug ?? serverProject.id}`"
+							class="truncate text-primary hover:underline"
+						>
+							{{ serverProject.title }}
+						</NuxtLink>
+					</div>
+				</div>
+			</template>
+			<template #actions>
+				<div v-if="isConnected && !serverData.flows?.intro" class="flex gap-2">
+					<PanelServerActionButton
+						:is-online="isServerRunning"
+						:is-actioning="isActioning"
+						:is-installing="serverData.status === 'installing'"
+						:disabled="isActioning || !!error"
+						:server-name="serverData.name"
 						:server-data="serverData"
-						:show-game-label="showGameLabel"
-						:show-loader-label="showLoaderLabel"
 						:uptime-seconds="uptimeSeconds"
-						:linked="true"
-						class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+						:busy-reason="busyReasons.length > 0 ? formatMessage(busyReasons[0].reason) : undefined"
+						@action="sendPowerAction"
 					/>
 				</div>
-			</div>
-		</div>
+			</template>
+		</ContentPageHeader>
 
 		<ServerOnboardingPanelPage v-if="serverData.flows?.intro" />
 
@@ -351,24 +372,29 @@ import {
 	IssuesIcon,
 	LayoutTemplateIcon,
 	LeftArrowIcon,
+	LinkIcon,
 	LockIcon,
 	RightArrowIcon,
 	SettingsIcon,
+	TimerIcon,
 	TransferIcon,
 } from '@modrinth/assets'
 import type { BusyReason } from '@modrinth/ui'
 import {
+	Avatar,
 	BackupProgressAdmonitions,
 	ButtonStyled,
+	ContentPageHeader,
 	defineMessage,
 	ErrorInformationCard,
 	formatLoaderLabel,
 	injectModrinthClient,
 	injectNotificationManager,
 	InstallingBanner,
+	LoaderIcon,
+	NavTabs,
 	provideModrinthServerContext,
 	ServerIcon,
-	ServerInfoLabels,
 	ServerNotice,
 	ServerOnboardingPanelPage,
 	useDebugLogger,
@@ -381,7 +407,6 @@ import DOMPurify from 'dompurify'
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 
 import { reloadNuxtApp } from '#app'
-import NavTabs from '~/components/ui/NavTabs.vue'
 import PanelErrorIcon from '~/components/ui/servers/icons/PanelErrorIcon.vue'
 import MedalServerCountdown from '~/components/ui/servers/marketing/MedalServerCountdown.vue'
 import PanelServerActionButton from '~/components/ui/servers/PanelServerActionButton.vue'
@@ -589,6 +614,30 @@ provideModrinthServerContext({
 })
 
 const uptimeSeconds = ref(0)
+
+const formattedUptime = computed(() => {
+	const days = Math.floor(uptimeSeconds.value / (24 * 3600))
+	const hours = Math.floor((uptimeSeconds.value % (24 * 3600)) / 3600)
+	const minutes = Math.floor((uptimeSeconds.value % 3600) / 60)
+	const seconds = uptimeSeconds.value % 60
+
+	let formatted = ''
+	if (days > 0) formatted += `${days}d `
+	if (hours > 0 || days > 0) formatted += `${hours}h `
+	formatted += `${minutes}m ${seconds}s`
+	return formatted.trim()
+})
+
+function copyServerAddress() {
+	if (!serverData.value?.net?.domain) return
+	navigator.clipboard.writeText(serverData.value.net.domain + '.modrinth.gg')
+	addNotification({
+		title: 'Server address copied',
+		text: "Your server's address has been copied to your clipboard.",
+		type: 'success',
+	})
+}
+
 const copied = ref(false)
 const error = ref<Error | null>(null)
 
@@ -628,9 +677,6 @@ const stats = ref<Stats>({
 	},
 })
 
-const showGameLabel = computed(() => !!serverData.value?.game)
-const showLoaderLabel = computed(() => !!serverData.value?.loader)
-
 const navLinks = [
 	{
 		label: 'Overview',
diff --git a/apps/frontend/src/pages/moderation.vue b/apps/frontend/src/pages/moderation.vue
index d414c10f43..0fc5b74688 100644
--- a/apps/frontend/src/pages/moderation.vue
+++ b/apps/frontend/src/pages/moderation.vue
@@ -18,9 +18,7 @@
 
 <script setup lang="ts">
 import { FolderIcon, ReportIcon, ShieldCheckIcon } from '@modrinth/assets'
-import { Chips, defineMessages, useVIntl } from '@modrinth/ui'
-
-import NavTabs from '@/components/ui/NavTabs.vue'
+import { Chips, defineMessages, NavTabs, useVIntl } from '@modrinth/ui'
 
 definePageMeta({
 	middleware: 'auth',
diff --git a/apps/frontend/src/pages/news/changelog/index.vue b/apps/frontend/src/pages/news/changelog/index.vue
index 8663497d90..e354a40986 100644
--- a/apps/frontend/src/pages/news/changelog/index.vue
+++ b/apps/frontend/src/pages/news/changelog/index.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { ChangelogEntry } from '@modrinth/ui'
+import { ChangelogEntry, NavTabs } from '@modrinth/ui'
 import Timeline from '@modrinth/ui/src/components/base/Timeline.vue'
 import { getChangelog, type Product } from '@modrinth/utils'
 
-import NavTabs from '~/components/ui/NavTabs.vue'
-
 const route = useRoute()
 const router = useRouter()
 
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 833dc2e5a1..14996a7ea2 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -299,6 +299,7 @@ import {
 	commonMessages,
 	ContentPageHeader,
 	injectModrinthClient,
+	NavTabs,
 	OverflowMenu,
 	ProjectCard,
 	ProjectCardList,
@@ -313,7 +314,6 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import NavStack from '~/components/ui/NavStack.vue'
-import NavTabs from '~/components/ui/NavTabs.vue'
 import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
 import {
 	OrganizationContext,
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index b30008acd6..c827aa4dfb 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -495,6 +495,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
+	NavTabs,
 	NewModal,
 	OverflowMenu,
 	ProjectCard,
@@ -521,7 +522,6 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
-import NavTabs from '~/components/ui/NavTabs.vue'
 import { reportUser } from '~/utils/report-helpers.ts'
 
 const data = useNuxtApp()
diff --git a/packages/api-client/src/types/index.ts b/packages/api-client/src/types/index.ts
index e1e92ff43c..30daf6520c 100644
--- a/packages/api-client/src/types/index.ts
+++ b/packages/api-client/src/types/index.ts
@@ -11,4 +11,10 @@ export type { ClientConfig, RequestHooks } from './client'
 export type { ApiErrorData, ModrinthErrorResponse } from './errors'
 export { isModrinthErrorResponse } from './errors'
 export type { HttpMethod, RequestContext, RequestOptions, ResponseData } from './request'
-export type { UploadHandle, UploadMetadata, UploadProgress, UploadRequestOptions } from './upload'
+export type {
+	UploadHandle,
+	UploadMetadata,
+	UploadProgress,
+	UploadRequestOptions,
+	UploadState,
+} from './upload'
diff --git a/packages/api-client/src/types/upload.ts b/packages/api-client/src/types/upload.ts
index 6c90cdfb6b..61e50dc94d 100644
--- a/packages/api-client/src/types/upload.ts
+++ b/packages/api-client/src/types/upload.ts
@@ -86,3 +86,16 @@ export interface UploadHandle<T> {
 	/** Cancel the upload */
 	cancel: () => void
 }
+
+/**
+ * State of a batch file upload operation
+ */
+export interface UploadState {
+	isUploading: boolean
+	currentFileName: string | null
+	currentFileProgress: number
+	uploadedBytes: number
+	totalBytes: number
+	completedFiles: number
+	totalFiles: number
+}
diff --git a/packages/assets/styles/defaults.scss b/packages/assets/styles/defaults.scss
index 6b6a3d59ce..9faad3ed1f 100644
--- a/packages/assets/styles/defaults.scss
+++ b/packages/assets/styles/defaults.scss
@@ -104,18 +104,11 @@ svg {
 	}
 }
 
-input,
-button {
-	&:disabled {
-		cursor: not-allowed !important;
-	}
-}
-
-@media (prefers-reduced-motion) {
-	.button-animation,
-	button {
-		transform: none !important;
-	}
+button,
+input[type='button'] {
+	cursor: pointer;
+	border: none;
+	outline: 2px solid transparent;
 }
 
 input,
diff --git a/packages/ui/CLAUDE.md b/packages/ui/CLAUDE.md
index 4096abac8e..b5000aeed4 100644
--- a/packages/ui/CLAUDE.md
+++ b/packages/ui/CLAUDE.md
@@ -68,6 +68,10 @@ CSS custom properties are defined in `packages/assets/styles/variables.scss` wit
 
 **Color palette** (each with shades 50–950): red, orange, green, blue, purple, gray. Platform-specific colors also exist (fabric, forge, quilt, neoforge, etc.).
 
+## Storybook
+
+When modifying a component in `src/components/`, you must also update its corresponding Storybook story in `src/stories/` to reflect the changes. If a story file doesn't exist yet, create one. Stories should cover the component's key states and variants.
+
 ## Dependency Injection
 
 This package defines the DI layer using `createContext` from `src/providers/index.ts`. See the `dependency-injection` skill (`.claude/skills/dependency-injection/SKILL.md`) for full documentation.
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index 4f40823aca..90a3178b14 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -5,38 +5,48 @@
 			typeClasses[type],
 		]"
 	>
-		<ButtonStyled
-			v-if="dismissible"
-			circular
-			type="highlight-colored-text"
-			:color="buttonColors[type]"
-		>
-			<button aria-label="Dismiss" class="absolute top-3 right-3" @click="$emit('dismiss')">
-				<XIcon class="h-4 w-4" />
-			</button>
-		</ButtonStyled>
-
-		<div
-			:class="[
-				'flex gap-2 items-start',
-				(header || $slots.header) && 'flex-col',
-				dismissible && 'pr-8',
-			]"
-		>
-			<div class="flex gap-2 items-start" :class="header || $slots.header ? 'w-full' : 'contents'">
-				<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
-					<component
-						:is="getSeverityIcon(type)"
-						:class="['h-6 w-6 flex-none', iconClasses[type]]"
-					/>
-				</slot>
-				<div v-if="header || $slots.header" class="font-semibold text-base">
-					<slot name="header">{{ header }}</slot>
+		<div class="flex items-start gap-2">
+			<div
+				:class="[
+					'flex flex-1 gap-2',
+					header || $slots.header ? 'flex-col items-start' : 'items-center',
+					(dismissible || $slots['top-right-actions']) && 'pr-8',
+				]"
+			>
+				<div
+					class="flex gap-2 items-start"
+					:class="header || $slots.header ? 'w-full' : 'contents'"
+				>
+					<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
+						<component
+							:is="getSeverityIcon(type)"
+							:class="['h-6 w-6 flex-none', iconClasses[type]]"
+						/>
+					</slot>
+					<div v-if="header || $slots.header" class="font-semibold text-base">
+						<slot name="header">{{ header }}</slot>
+					</div>
+				</div>
+				<div class="font-normal text-contrast/80" :class="!(header || $slots.header) && 'flex-1'">
+					<slot>{{ body }}</slot>
 				</div>
 			</div>
-			<div class="font-normal text-base" :class="!(header || $slots.header) && 'flex-1'">
-				<slot>{{ body }}</slot>
+			<div v-if="$slots['top-right-actions']" class="flex shrink-0 items-center gap-2">
+				<slot name="top-right-actions" />
 			</div>
+			<ButtonStyled
+				v-else-if="dismissible"
+				circular
+				type="highlight-colored-text"
+				:color="buttonColors[type]"
+			>
+				<button aria-label="Dismiss" class="absolute top-3 right-3" @click="$emit('dismiss')">
+					<XIcon class="h-4 w-4" />
+				</button>
+			</ButtonStyled>
+		</div>
+		<div v-if="$slots.progress">
+			<slot name="progress" />
 		</div>
 		<div v-if="showActionsUnderneath || $slots.actions">
 			<slot name="actions" />
diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
similarity index 87%
rename from apps/frontend/src/components/ui/NavTabs.vue
rename to packages/ui/src/components/base/NavTabs.vue
index dcff790996..d60ee0d704 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -2,11 +2,11 @@
 	<nav
 		v-if="filteredLinks.length > 1"
 		ref="scrollContainer"
-		class="experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
-		:class="{ 'card-shadow': mode === 'navigation' }"
+		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		:class="{ 'shadow-sm': mode === 'navigation' }"
 	>
 		<template v-if="mode === 'navigation'">
-			<NuxtLink
+			<RouterLink
 				v-for="(link, index) in filteredLinks"
 				v-show="link.shown ?? true"
 				:key="link.href"
@@ -22,7 +22,7 @@
 				<span class="text-nowrap" :class="getLabelClasses(index)">
 					{{ link.label }}
 				</span>
-			</NuxtLink>
+			</RouterLink>
 		</template>
 
 		<template v-else>
@@ -57,9 +57,10 @@
 
 <script setup lang="ts">
 import type { Component } from 'vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
 
-const route = useNativeRoute()
+const route = useRoute()
 
 interface Tab {
 	label: string
@@ -104,8 +105,8 @@ const currentActiveIndex = ref(-1)
 const subpageSelected = ref(false)
 
 // SSR state
-const sliderReady = ref(false) // Slider is positioned and should be visible
-const transitionsEnabled = ref(false) // CSS transitions should apply (after first paint)
+const sliderReady = ref(false)
+const transitionsEnabled = ref(false)
 
 // Stagger delays for the trailing edges of the slider animation
 const sliderDelays = ref({ left: '0ms', top: '0ms', right: '0ms', bottom: '0ms' })
@@ -165,8 +166,8 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
 	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
 		const link = filteredLinks.value[i]
 		const decodedPath = decodeURIComponent(route.path)
+		const decodedHref = decodeURIComponent(link.href)
 
-		// Query-based matching
 		if (props.query) {
 			const queryValue = route.query[props.query]
 			if (queryValue === link.href || (!queryValue && !link.href)) {
@@ -175,14 +176,12 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
 			continue
 		}
 
-		// Exact path match
-		if (decodedPath === link.href) {
+		if (decodedPath === decodedHref) {
 			return { index: i, isSubpage: false }
 		}
 
-		// Subpage match
 		const isSubpageMatch =
-			decodedPath.includes(link.href) ||
+			decodedPath.includes(decodedHref) ||
 			link.subpages?.some((subpage) => decodedPath.includes(subpage))
 
 		if (isSubpageMatch) {
@@ -204,9 +203,6 @@ function getTabElement(index: number): HTMLElement | null {
 
 	if (!element) return null
 
-	// In navigation mode, elements are NuxtLinks, but since we used querySelectorAll,
-	// we already have the raw HTMLElement ($el), so no further conversion is needed.
-	// In local mode, elements are already plain divs.
 	return element
 }
 
@@ -225,7 +221,6 @@ function positionSlider() {
 	const isInitialPosition = sliderLeft.value === 4 && sliderRight.value === 4
 
 	if (isInitialPosition) {
-		// Initial positioning: set position instantly, no animation
 		sliderLeft.value = newPosition.left
 		sliderRight.value = newPosition.right
 		sliderTop.value = newPosition.top
@@ -233,7 +228,6 @@ function positionSlider() {
 
 		sliderReady.value = true
 
-		// enable transitions after slider is painted, so future changes animate
 		requestAnimationFrame(() => {
 			transitionsEnabled.value = true
 		})
@@ -250,7 +244,6 @@ function animateSliderTo(newPosition: {
 }) {
 	const STAGGER_DELAY = '200ms'
 
-	// Set stagger delays: leading edge moves immediately, trailing edge is delayed
 	sliderDelays.value = {
 		left: newPosition.left < sliderLeft.value ? '0ms' : STAGGER_DELAY,
 		right: newPosition.left < sliderLeft.value ? STAGGER_DELAY : '0ms',
@@ -321,8 +314,4 @@ watch(
 		bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay),
 		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
 }
-
-.card-shadow {
-	box-shadow: var(--shadow-card);
-}
 </style>
diff --git a/packages/ui/src/components/base/PopoutMenu.vue b/packages/ui/src/components/base/PopoutMenu.vue
index de068b80ca..ada7545912 100644
--- a/packages/ui/src/components/base/PopoutMenu.vue
+++ b/packages/ui/src/components/base/PopoutMenu.vue
@@ -6,7 +6,6 @@
 		:placement="placement"
 		:class="dropdownClass"
 		@apply-hide="focusTrigger"
-		@apply-show="focusMenuChild"
 	>
 		<button ref="trigger" v-bind="$attrs" v-tooltip="tooltip">
 			<slot></slot>
@@ -52,14 +51,6 @@ defineProps({
 	},
 })
 
-function focusMenuChild() {
-	setTimeout(() => {
-		if (menu.value && menu.value.children && menu.value.children.length > 0) {
-			menu.value.children[0].focus()
-		}
-	}, 50)
-}
-
 function hideAndFocusTrigger(hide) {
 	hide()
 	focusTrigger()
diff --git a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue b/packages/ui/src/components/base/TeleportOverflowMenu.vue
similarity index 100%
rename from packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
rename to packages/ui/src/components/base/TeleportOverflowMenu.vue
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 2b3506366a..5e13e215bd 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -45,6 +45,7 @@ export type { MultiSelectOption } from './MultiSelect.vue'
 export { default as MultiSelect } from './MultiSelect.vue'
 export type { MaybeCtxFn, StageButtonConfig, StageConfigInput } from './MultiStageModal.vue'
 export { default as MultiStageModal, resolveCtxFn } from './MultiStageModal.vue'
+export { default as NavTabs } from './NavTabs.vue'
 export { default as OptionGroup } from './OptionGroup.vue'
 export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
 export { default as OverflowMenu } from './OverflowMenu.vue'
diff --git a/packages/ui/src/components/modal/ConfirmLeaveModal.vue b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
new file mode 100644
index 0000000000..b1ee34ff7b
--- /dev/null
+++ b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
@@ -0,0 +1,106 @@
+<template>
+	<NewModal ref="modal" :header="localizeIfPossible(title)" fade="warning" max-width="500px">
+		<div class="flex flex-col gap-6">
+			<Admonition :type="admonitionType" :header="localizeIfPossible(header)">
+				{{ localizeIfPossible(body) }}
+			</Admonition>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="cancel">
+						<XIcon />
+						{{ localizeIfPossible(stayLabel) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="leave">
+						<RightArrowIcon />
+						{{ localizeIfPossible(leaveLabel) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { RightArrowIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { defineMessage, type MessageDescriptor, useVIntl } from '#ui/composables/i18n'
+
+import NewModal from './NewModal.vue'
+
+const { formatMessage } = useVIntl()
+
+withDefaults(
+	defineProps<{
+		title?: MessageDescriptor | string
+		header?: MessageDescriptor | string
+		body?: MessageDescriptor | string
+		stayLabel?: MessageDescriptor | string
+		leaveLabel?: MessageDescriptor | string
+		admonitionType?: 'warning' | 'critical' | 'info'
+	}>(),
+	{
+		title: () =>
+			defineMessage({
+				id: 'ui.confirm-leave-modal.title',
+				defaultMessage: 'Leave page?',
+			}),
+		header: () =>
+			defineMessage({
+				id: 'ui.confirm-leave-modal.header',
+				defaultMessage: 'You have unsaved changes',
+			}),
+		body: () =>
+			defineMessage({
+				id: 'ui.confirm-leave-modal.body',
+				defaultMessage: 'You have unsaved changes that will be lost if you leave this page.',
+			}),
+		stayLabel: () =>
+			defineMessage({
+				id: 'ui.confirm-leave-modal.stay',
+				defaultMessage: 'Stay on page',
+			}),
+		leaveLabel: () =>
+			defineMessage({
+				id: 'ui.confirm-leave-modal.leave',
+				defaultMessage: 'Leave page',
+			}),
+		admonitionType: 'critical',
+	},
+)
+
+function localizeIfPossible(message: MessageDescriptor | string) {
+	return typeof message === 'string' ? message : formatMessage(message)
+}
+
+const modal = ref<InstanceType<typeof NewModal>>()
+let resolvePromise: ((value: boolean) => void) | null = null
+
+function prompt(): Promise<boolean> {
+	return new Promise((resolve) => {
+		resolvePromise = resolve
+		modal.value?.show()
+	})
+}
+
+function leave() {
+	modal.value?.hide()
+	resolvePromise?.(true)
+	resolvePromise = null
+}
+
+function cancel() {
+	modal.value?.hide()
+	resolvePromise?.(false)
+	resolvePromise = null
+}
+
+defineExpose({ prompt })
+</script>
diff --git a/packages/ui/src/components/modal/index.ts b/packages/ui/src/components/modal/index.ts
index 49b0c51fb5..412be2b2b2 100644
--- a/packages/ui/src/components/modal/index.ts
+++ b/packages/ui/src/components/modal/index.ts
@@ -1,3 +1,4 @@
+export { default as ConfirmLeaveModal } from './ConfirmLeaveModal.vue'
 export { default as ConfirmModal } from './ConfirmModal.vue'
 export { default as InstallToPlayModal } from './InstallToPlayModal.vue'
 export { default as Modal } from './Modal.vue'
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 40c460b989..fe8dd4f4be 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -49,7 +49,7 @@
 						:show-game-label="showGameLabel"
 						:show-loader-label="showLoaderLabel"
 						:linked="false"
-						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-2 text-secondary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</div>
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index cecf43e10c..ae4e25e720 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -154,7 +154,11 @@ const messages = defineMessages({
 <template>
 	<div
 		class="grid items-center gap-4 rounded-2xl bg-bg-raised p-4 shadow-md"
-		:class="preview ? 'grid-cols-1' : 'grid-cols-[auto_1fr_auto] md:grid-cols-[1fr_400px_1fr]'"
+		:class="
+			preview
+				? 'grid-cols-1'
+				: 'grid-cols-[auto_1fr_auto] md:grid-cols-[minmax(0,1fr)_400px_minmax(0,1fr)]'
+		"
 	>
 		<div class="flex flex-row gap-4 items-center">
 			<div
diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonition.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonition.vue
deleted file mode 100644
index 3dc3273035..0000000000
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonition.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<script setup lang="ts">
-import type { Archon } from '@modrinth/api-client'
-import {
-	CheckCircleIcon,
-	ClockIcon,
-	InfoIcon,
-	RotateCounterClockwiseIcon,
-	TriangleAlertIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { computed } from 'vue'
-
-import { useRelativeTime } from '../../../composables'
-import { defineMessages, useVIntl } from '../../../composables/i18n'
-import { commonMessages } from '../../../utils'
-import ButtonStyled from '../../base/ButtonStyled.vue'
-import ProgressBar from '../../base/ProgressBar.vue'
-
-const { formatMessage } = useVIntl()
-const relativeTime = useRelativeTime()
-
-const props = withDefaults(
-	defineProps<{
-		type: 'create' | 'restore'
-		state: Archon.Backups.v1.BackupState
-		progress: number
-		backupName?: string
-		createdAt?: string
-	}>(),
-	{
-		backupName: undefined,
-		createdAt: undefined,
-	},
-)
-
-const emit = defineEmits<{
-	(e: 'cancel' | 'retry' | 'dismiss'): void
-}>()
-
-const isQueued = computed(() => props.state === 'ongoing' && props.progress === 0)
-const isInProgress = computed(() => props.state === 'ongoing' && props.progress > 0)
-const isFailed = computed(() => props.state === 'failed')
-const isSuccess = computed(() => props.state === 'done')
-
-const showCancel = computed(() => isQueued.value || isInProgress.value)
-const showRetry = computed(() => isFailed.value)
-const showDismiss = computed(() => isFailed.value || isSuccess.value)
-const showProgress = computed(() => isInProgress.value)
-
-const colorClasses = computed(() => {
-	if (isFailed.value) return 'border-brand-red bg-bg-red'
-	if (isSuccess.value) return 'border-brand-green bg-bg-green'
-	return 'border-brand-blue bg-bg-blue'
-})
-
-const icon = computed(() => {
-	if (isFailed.value) return TriangleAlertIcon
-	if (isSuccess.value) return CheckCircleIcon
-	return InfoIcon
-})
-
-const iconClass = computed(() => {
-	if (isFailed.value) return 'text-brand-red'
-	if (isSuccess.value) return 'text-brand-green'
-	return 'text-brand-blue'
-})
-
-const buttonColor = computed<'red' | 'green' | 'blue'>(() => {
-	if (isFailed.value) return 'red'
-	if (isSuccess.value) return 'green'
-	return 'blue'
-})
-
-const name = computed(() => props.backupName ?? formatMessage(messages.fallbackName))
-
-const title = computed(() => {
-	if (props.type === 'create') {
-		if (isQueued.value) return formatMessage(messages.backupQueuedTitle)
-		if (isInProgress.value) return formatMessage(messages.creatingBackupTitle)
-		if (isFailed.value) return formatMessage(messages.backupFailedTitle)
-	}
-	if (isQueued.value) return formatMessage(messages.restoreQueuedTitle)
-	if (isInProgress.value) return formatMessage(messages.restoringBackupTitle)
-	if (isSuccess.value) return formatMessage(messages.restoreSuccessfulTitle)
-	if (isFailed.value) return formatMessage(messages.restoreFailedTitle)
-	return ''
-})
-
-const description = computed(() => {
-	if (props.type === 'create') {
-		if (isQueued.value)
-			return formatMessage(messages.backupQueuedDescription, { backupName: name.value })
-		if (isInProgress.value)
-			return formatMessage(messages.creatingBackupDescription, { backupName: name.value })
-		if (isFailed.value)
-			return formatMessage(messages.backupFailedDescription, { backupName: name.value })
-	}
-	if (isQueued.value)
-		return formatMessage(messages.restoreQueuedDescription, { backupName: name.value })
-	if (isInProgress.value)
-		return formatMessage(messages.restoringBackupDescription, { backupName: name.value })
-	if (isSuccess.value)
-		return formatMessage(messages.restoreSuccessfulDescription, { backupName: name.value })
-	if (isFailed.value)
-		return formatMessage(messages.restoreFailedDescription, { backupName: name.value })
-	return ''
-})
-
-const messages = defineMessages({
-	fallbackName: {
-		id: 'servers.backups.admonition.fallback-name',
-		defaultMessage: 'Your backup',
-	},
-	backupQueuedTitle: {
-		id: 'servers.backups.admonition.backup-queued.title',
-		defaultMessage: 'Backup queued',
-	},
-	backupQueuedDescription: {
-		id: 'servers.backups.admonition.backup-queued.description',
-		defaultMessage: '{backupName} is queued and will start shortly.',
-	},
-	creatingBackupTitle: {
-		id: 'servers.backups.admonition.creating-backup.title',
-		defaultMessage: 'Creating backup',
-	},
-	creatingBackupDescription: {
-		id: 'servers.backups.admonition.creating-backup.description',
-		defaultMessage:
-			'Saving world data and server configuration for {backupName}. This can take a few minutes.',
-	},
-	backupFailedTitle: {
-		id: 'servers.backups.admonition.backup-failed.title',
-		defaultMessage: 'Backup failed',
-	},
-	backupFailedDescription: {
-		id: 'servers.backups.admonition.backup-failed.description',
-		defaultMessage:
-			'Something went wrong while creating {backupName}. Please try again or contact support if the issue continues.',
-	},
-	restoreQueuedTitle: {
-		id: 'servers.backups.admonition.restore-queued.title',
-		defaultMessage: 'Restoring from backup queued',
-	},
-	restoreQueuedDescription: {
-		id: 'servers.backups.admonition.restore-queued.description',
-		defaultMessage: 'Restoring from {backupName} is queued and will start shortly.',
-	},
-	restoringBackupTitle: {
-		id: 'servers.backups.admonition.restoring-backup.title',
-		defaultMessage: 'Restoring from backup',
-	},
-	restoringBackupDescription: {
-		id: 'servers.backups.admonition.restoring-backup.description',
-		defaultMessage: 'Restoring your server from {backupName}. This may take a couple of minutes.',
-	},
-	restoreSuccessfulTitle: {
-		id: 'servers.backups.admonition.restore-successful.title',
-		defaultMessage: 'Restoring from backup successful',
-	},
-	restoreSuccessfulDescription: {
-		id: 'servers.backups.admonition.restore-successful.description',
-		defaultMessage: 'Your server has been restored to {backupName} and is ready to start.',
-	},
-	restoreFailedTitle: {
-		id: 'servers.backups.admonition.restore-failed.title',
-		defaultMessage: 'Restoring from backup failed',
-	},
-	restoreFailedDescription: {
-		id: 'servers.backups.admonition.restore-failed.description',
-		defaultMessage:
-			'Something went wrong while restoring from {backupName}. Please try again or contact support if the issue continues.',
-	},
-})
-</script>
-
-<template>
-	<div :class="['flex flex-col rounded-2xl border border-solid p-4', colorClasses]">
-		<div class="flex items-start gap-2">
-			<div class="flex flex-1 gap-3 items-start">
-				<component :is="icon" :class="['size-6 shrink-0', iconClass]" />
-				<div class="flex flex-col gap-2">
-					<div class="flex items-center gap-2">
-						<span class="font-semibold text-contrast">{{ title }}</span>
-						<div v-if="createdAt" class="flex items-center gap-1.5 text-secondary">
-							<ClockIcon class="size-4" />
-							<span class="font-medium">{{ relativeTime(createdAt) }}</span>
-						</div>
-					</div>
-					<span class="text-contrast opacity-80">{{ description }}</span>
-				</div>
-			</div>
-			<div class="flex shrink-0 items-center gap-2">
-				<ButtonStyled v-if="showCancel" type="outlined" color="blue">
-					<button class="!border" @click="emit('cancel')">
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="showRetry" color="red">
-					<button @click="emit('retry')">
-						<RotateCounterClockwiseIcon class="size-5" />
-						{{ formatMessage(commonMessages.retryButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled
-					v-if="showDismiss"
-					circular
-					type="transparent"
-					hover-color-fill="background"
-					:color="buttonColor"
-				>
-					<button @click="emit('dismiss')">
-						<XIcon />
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-		<div v-if="showProgress" class="mt-4 pl-9">
-			<ProgressBar :progress="progress" color="blue" :waiting="progress === 0" full-width />
-		</div>
-	</div>
-</template>
diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
index 1e56e0671c..3e72d68ae6 100644
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
+++ b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
@@ -1,12 +1,27 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
+import {
+	CheckCircleIcon,
+	ClockIcon,
+	InfoIcon,
+	RotateCounterClockwiseIcon,
+	TriangleAlertIcon,
+	XIcon,
+} from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, reactive, watch } from 'vue'
 
+import { useRelativeTime } from '../../../composables'
+import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectModrinthClient, injectModrinthServerContext } from '../../../providers'
 import type { BackupProgressEntry } from '../../../providers/server-context'
-import BackupProgressAdmonition from './BackupProgressAdmonition.vue'
+import { commonMessages } from '../../../utils'
+import Admonition from '../../base/Admonition.vue'
+import ButtonStyled from '../../base/ButtonStyled.vue'
+import ProgressBar from '../../base/ProgressBar.vue'
 
+const { formatMessage } = useVIntl()
+const relativeTime = useRelativeTime()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const { serverId, worldId, backupsState, markBackupCancelled } = injectModrinthServerContext()
@@ -81,7 +96,6 @@ const admonitions = computed<AdmonitionEntry[]>(() => {
 	const result: AdmonitionEntry[] = []
 	const seenIds = new Set<string>()
 
-	// 1. Active WS entries (real-time progress from backupsState)
 	for (const [id, entry] of backupsState.entries()) {
 		const backup = findBackup(id)
 		seenIds.add(id)
@@ -115,7 +129,6 @@ const admonitions = computed<AdmonitionEntry[]>(() => {
 		}
 	}
 
-	// 2. REST-based entries for pending/in_progress backups without WS data yet
 	if (backupsList.value) {
 		for (const backup of backupsList.value) {
 			if (seenIds.has(backup.id)) continue
@@ -136,7 +149,6 @@ const admonitions = computed<AdmonitionEntry[]>(() => {
 		}
 	}
 
-	// 3. Terminal entries (snapshotted before cleanup)
 	for (const [key, entry] of terminalEntries.entries()) {
 		if (dismissedIds.has(key)) continue
 		if (result.some((r) => r.key === key)) continue
@@ -177,6 +189,128 @@ function handleDismiss(key: string) {
 	dismissedIds.add(key)
 	terminalEntries.delete(key)
 }
+
+function getAdmonitionType(state: Archon.Backups.v1.BackupState): 'info' | 'critical' | 'success' {
+	if (state === 'failed') return 'critical'
+	if (state === 'done') return 'success'
+	return 'info'
+}
+
+function getIcon(state: Archon.Backups.v1.BackupState) {
+	if (state === 'failed') return TriangleAlertIcon
+	if (state === 'done') return CheckCircleIcon
+	return InfoIcon
+}
+
+function getButtonColor(state: Archon.Backups.v1.BackupState): 'red' | 'green' | 'blue' {
+	if (state === 'failed') return 'red'
+	if (state === 'done') return 'green'
+	return 'blue'
+}
+
+function isQueued(item: AdmonitionEntry) {
+	return item.state === 'ongoing' && item.progress === 0
+}
+
+function isInProgress(item: AdmonitionEntry) {
+	return item.state === 'ongoing' && item.progress > 0
+}
+
+function getTitle(item: AdmonitionEntry) {
+	if (item.type === 'create') {
+		if (isQueued(item)) return formatMessage(messages.backupQueuedTitle)
+		if (isInProgress(item)) return formatMessage(messages.creatingBackupTitle)
+		if (item.state === 'failed') return formatMessage(messages.backupFailedTitle)
+	}
+	if (isQueued(item)) return formatMessage(messages.restoreQueuedTitle)
+	if (isInProgress(item)) return formatMessage(messages.restoringBackupTitle)
+	if (item.state === 'done') return formatMessage(messages.restoreSuccessfulTitle)
+	if (item.state === 'failed') return formatMessage(messages.restoreFailedTitle)
+	return ''
+}
+
+function getDescription(item: AdmonitionEntry) {
+	const backupName = item.name ?? formatMessage(messages.fallbackName)
+	if (item.type === 'create') {
+		if (isQueued(item)) return formatMessage(messages.backupQueuedDescription, { backupName })
+		if (isInProgress(item)) return formatMessage(messages.creatingBackupDescription, { backupName })
+		if (item.state === 'failed')
+			return formatMessage(messages.backupFailedDescription, { backupName })
+	}
+	if (isQueued(item)) return formatMessage(messages.restoreQueuedDescription, { backupName })
+	if (isInProgress(item)) return formatMessage(messages.restoringBackupDescription, { backupName })
+	if (item.state === 'done')
+		return formatMessage(messages.restoreSuccessfulDescription, { backupName })
+	if (item.state === 'failed')
+		return formatMessage(messages.restoreFailedDescription, { backupName })
+	return ''
+}
+
+const messages = defineMessages({
+	fallbackName: {
+		id: 'servers.backups.admonition.fallback-name',
+		defaultMessage: 'Your backup',
+	},
+	backupQueuedTitle: {
+		id: 'servers.backups.admonition.backup-queued.title',
+		defaultMessage: 'Backup queued',
+	},
+	backupQueuedDescription: {
+		id: 'servers.backups.admonition.backup-queued.description',
+		defaultMessage: '{backupName} is queued and will start shortly.',
+	},
+	creatingBackupTitle: {
+		id: 'servers.backups.admonition.creating-backup.title',
+		defaultMessage: 'Creating backup',
+	},
+	creatingBackupDescription: {
+		id: 'servers.backups.admonition.creating-backup.description',
+		defaultMessage:
+			'Saving world data and server configuration for {backupName}. This can take a few minutes.',
+	},
+	backupFailedTitle: {
+		id: 'servers.backups.admonition.backup-failed.title',
+		defaultMessage: 'Backup failed',
+	},
+	backupFailedDescription: {
+		id: 'servers.backups.admonition.backup-failed.description',
+		defaultMessage:
+			'Something went wrong while creating {backupName}. Please try again or contact support if the issue continues.',
+	},
+	restoreQueuedTitle: {
+		id: 'servers.backups.admonition.restore-queued.title',
+		defaultMessage: 'Restoring from backup queued',
+	},
+	restoreQueuedDescription: {
+		id: 'servers.backups.admonition.restore-queued.description',
+		defaultMessage: 'Restoring from {backupName} is queued and will start shortly.',
+	},
+	restoringBackupTitle: {
+		id: 'servers.backups.admonition.restoring-backup.title',
+		defaultMessage: 'Restoring from backup',
+	},
+	restoringBackupDescription: {
+		id: 'servers.backups.admonition.restoring-backup.description',
+		defaultMessage: 'Restoring your server from {backupName}. This may take a couple of minutes.',
+	},
+	restoreSuccessfulTitle: {
+		id: 'servers.backups.admonition.restore-successful.title',
+		defaultMessage: 'Restoring from backup successful',
+	},
+	restoreSuccessfulDescription: {
+		id: 'servers.backups.admonition.restore-successful.description',
+		defaultMessage: 'Your server has been restored to {backupName} and is ready to start.',
+	},
+	restoreFailedTitle: {
+		id: 'servers.backups.admonition.restore-failed.title',
+		defaultMessage: 'Restoring from backup failed',
+	},
+	restoreFailedDescription: {
+		id: 'servers.backups.admonition.restore-failed.description',
+		defaultMessage:
+			'Something went wrong while restoring from {backupName}. Please try again or contact support if the issue continues.',
+	},
+})
 </script>
 
 <template>
@@ -186,18 +320,55 @@ function handleDismiss(key: string) {
 		tag="div"
 		class="flex flex-col gap-3"
 	>
-		<BackupProgressAdmonition
-			v-for="item in admonitions"
-			:key="item.key"
-			:type="item.type"
-			:state="item.state"
-			:progress="item.progress"
-			:backup-name="item.name"
-			:created-at="item.createdAt"
-			@cancel="handleCancel(item.backupId)"
-			@retry="handleRetry(item.backupId, item.key)"
-			@dismiss="handleDismiss(item.key)"
-		/>
+		<Admonition v-for="item in admonitions" :key="item.key" :type="getAdmonitionType(item.state)">
+			<template #icon="{ iconClass }">
+				<component :is="getIcon(item.state)" :class="iconClass" />
+			</template>
+			<template #header>
+				<div class="flex items-center gap-2">
+					<span>{{ getTitle(item) }}</span>
+					<div v-if="item.createdAt" class="flex items-center gap-1.5 text-secondary">
+						<ClockIcon class="size-4" />
+						<span class="font-medium">{{ relativeTime(item.createdAt) }}</span>
+					</div>
+				</div>
+			</template>
+			{{ getDescription(item) }}
+			<template #top-right-actions>
+				<ButtonStyled v-if="isQueued(item) || isInProgress(item)" type="outlined" color="blue">
+					<button class="!border" @click="handleCancel(item.backupId)">
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="item.state === 'failed'" color="red">
+					<button @click="handleRetry(item.backupId, item.key)">
+						<RotateCounterClockwiseIcon class="size-5" />
+						{{ formatMessage(commonMessages.retryButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled
+					v-if="item.state === 'failed' || item.state === 'done'"
+					circular
+					type="transparent"
+					hover-color-fill="background"
+					:color="getButtonColor(item.state)"
+				>
+					<button @click="handleDismiss(item.key)">
+						<XIcon />
+					</button>
+				</ButtonStyled>
+			</template>
+			<template v-if="isInProgress(item)" #progress>
+				<div class="pl-9">
+					<ProgressBar
+						:progress="item.progress"
+						color="blue"
+						:waiting="item.progress === 0"
+						full-width
+					/>
+				</div>
+			</template>
+		</Admonition>
 	</TransitionGroup>
 </template>
 
diff --git a/packages/ui/src/components/servers/backups/index.ts b/packages/ui/src/components/servers/backups/index.ts
index abcd1d34a9..abee9897a5 100644
--- a/packages/ui/src/components/servers/backups/index.ts
+++ b/packages/ui/src/components/servers/backups/index.ts
@@ -1,7 +1,6 @@
 export { default as BackupCreateModal } from './BackupCreateModal.vue'
 export { default as BackupDeleteModal } from './BackupDeleteModal.vue'
 export { default as BackupItem } from './BackupItem.vue'
-export { default as BackupProgressAdmonition } from './BackupProgressAdmonition.vue'
 export { default as BackupProgressAdmonitions } from './BackupProgressAdmonitions.vue'
 export { default as BackupRenameModal } from './BackupRenameModal.vue'
 export { default as BackupRestoreModal } from './BackupRestoreModal.vue'
diff --git a/packages/ui/src/components/servers/files/editor/FileEditor.vue b/packages/ui/src/components/servers/files/editor/FileEditor.vue
deleted file mode 100644
index 340879d14c..0000000000
--- a/packages/ui/src/components/servers/files/editor/FileEditor.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<template>
-	<div class="flex h-full w-full flex-col gap-4">
-		<div class="flex flex-col overflow-hidden rounded-[20px] shadow-md">
-			<div class="h-full w-full flex-grow">
-				<component
-					:is="props.editorComponent"
-					v-if="!isEditingImage && props.editorComponent"
-					v-model:value="fileContent"
-					:lang="editorLanguage"
-					theme="modrinth"
-					:print-margin="false"
-					style="height: 750px; font-size: 1rem"
-					class="ace-modrinth rounded-[20px]"
-					@init="onEditorInit"
-				/>
-				<FileImageViewer v-else-if="isEditingImage && imagePreview" :image-blob="imagePreview" />
-				<div
-					v-else-if="isLoading || !props.editorComponent"
-					class="flex h-[750px] items-center justify-center rounded-[20px] bg-bg-raised"
-				>
-					<SpinnerIcon class="h-8 w-8 animate-spin text-secondary" />
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { SpinnerIcon } from '@modrinth/assets'
-import {
-	getEditorLanguage,
-	getFileExtension,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	isImageFile,
-} from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
-import { type Component, computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import FileImageViewer from './FileImageViewer.vue'
-
-interface MclogsResponse {
-	success: boolean
-	url?: string
-	error?: string
-}
-
-const props = defineProps<{
-	file: { name: string; type: string; path: string } | null
-	editorComponent: Component | null
-}>()
-
-const emit = defineEmits<{
-	close: []
-}>()
-
-const notifications = injectNotificationManager()
-const { addNotification } = notifications
-const client = injectModrinthClient()
-const serverContext = injectModrinthServerContext()
-const { serverId } = serverContext
-const queryClient = useQueryClient()
-
-const modulesLoaded = inject<Promise<void>>('modulesLoaded')
-
-const fileContent = ref('')
-const isEditingImage = ref(false)
-const imagePreview = ref<Blob | null>(null)
-const isLoading = ref(false)
-const editorInstance = ref<unknown>(null)
-
-const editorLanguage = computed(() => {
-	const ext = getFileExtension(props.file?.name ?? '')
-	return getEditorLanguage(ext)
-})
-
-watch(
-	() => props.file,
-	async (newFile) => {
-		if (newFile) {
-			await loadFileContent(newFile)
-		} else {
-			resetState()
-		}
-	},
-	{ immediate: true },
-)
-
-async function loadFileContent(file: { name: string; type: string; path: string }) {
-	isLoading.value = true
-	try {
-		window.scrollTo(0, 0)
-		const extension = getFileExtension(file.name)
-		const normalizedPath = file.path.startsWith('/') ? file.path : `/${file.path}`
-
-		if (file.type === 'file' && isImageFile(extension)) {
-			const content = await client.kyros.files_v0.downloadFile(normalizedPath)
-			isEditingImage.value = true
-			imagePreview.value = content
-		} else {
-			isEditingImage.value = false
-			const cachedContent = queryClient.getQueryData<string>([
-				'file-content',
-				serverId,
-				normalizedPath,
-			])
-			if (cachedContent) {
-				fileContent.value = cachedContent
-			} else {
-				const content = await client.kyros.files_v0.downloadFile(normalizedPath)
-				fileContent.value = await content.text()
-			}
-		}
-	} catch (error) {
-		console.error('Error fetching file content:', error)
-		addNotification({
-			title: 'Failed to open file',
-			text: 'Could not load file contents.',
-			type: 'error',
-		})
-		emit('close')
-	} finally {
-		isLoading.value = false
-	}
-}
-
-function resetState() {
-	fileContent.value = ''
-	isEditingImage.value = false
-	imagePreview.value = null
-}
-
-function onEditorInit(editor: {
-	commands: {
-		addCommand: (cmd: {
-			name: string
-			bindKey: { win: string; mac: string }
-			exec: () => void
-		}) => void
-	}
-}) {
-	editorInstance.value = editor
-
-	editor.commands.addCommand({
-		name: 'save',
-		bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
-		exec: () => saveFileContent(false),
-	})
-}
-
-async function saveFileContent(exit: boolean = true) {
-	if (!props.file) return
-
-	try {
-		const normalizedPath = props.file.path.startsWith('/') ? props.file.path : `/${props.file.path}`
-		await client.kyros.files_v0.updateFile(normalizedPath, fileContent.value)
-
-		if (exit) {
-			await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-			emit('close')
-		}
-
-		addNotification({
-			title: 'File saved',
-			text: 'Your file has been saved.',
-			type: 'success',
-		})
-	} catch (error) {
-		console.error('Error saving file content:', error)
-		addNotification({ title: 'Save failed', text: 'Could not save the file.', type: 'error' })
-	}
-}
-
-async function saveAndRestart() {
-	await saveFileContent(false)
-	await client.archon.servers_v0.power(serverId, 'Restart')
-
-	addNotification({
-		title: 'Server restarted',
-		text: 'Your server has been restarted.',
-		type: 'success',
-	})
-
-	emit('close')
-}
-
-async function shareToMclogs() {
-	try {
-		const response = await fetch('https://api.mclo.gs/1/log', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-			body: new URLSearchParams({ content: fileContent.value }),
-		})
-
-		const data = (await response.json()) as MclogsResponse
-
-		if (data.success && data.url) {
-			await navigator.clipboard.writeText(data.url)
-			addNotification({
-				title: 'Log URL copied',
-				text: 'Your log file URL has been copied to your clipboard.',
-				type: 'success',
-			})
-		} else {
-			throw new Error(data.error)
-		}
-	} catch (error) {
-		console.error('Error sharing file:', error)
-		addNotification({
-			title: 'Failed to share file',
-			text: 'Could not upload to mclo.gs.',
-			type: 'error',
-		})
-	}
-}
-
-function close() {
-	resetState()
-	emit('close')
-}
-
-onMounted(async () => {
-	if (modulesLoaded) {
-		await modulesLoaded
-	}
-})
-
-onUnmounted(() => {
-	editorInstance.value = null
-	resetState()
-})
-
-defineExpose({
-	saveFileContent,
-	saveAndRestart,
-	shareToMclogs,
-	close,
-	isEditingImage,
-	fileContent,
-})
-</script>
diff --git a/packages/ui/src/components/servers/files/editor/FileImageViewer.vue b/packages/ui/src/components/servers/files/editor/FileImageViewer.vue
deleted file mode 100644
index 094cbfdfdd..0000000000
--- a/packages/ui/src/components/servers/files/editor/FileImageViewer.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-	<div class="flex h-[calc(100vh-12rem)] w-full flex-col items-center">
-		<div
-			ref="container"
-			class="relative w-full flex-grow cursor-grab overflow-hidden rounded-[20px] bg-black active:cursor-grabbing"
-			@mousedown="startPan"
-			@mousemove="handlePan"
-			@mouseup="stopPan"
-			@mouseleave="stopPan"
-			@wheel.prevent="handleWheel"
-		>
-			<div v-if="state.isLoading" />
-			<div
-				v-if="state.hasError"
-				class="flex h-full w-full flex-col items-center justify-center gap-8"
-			>
-				<TriangleAlertIcon class="size-8 text-red" />
-				<p class="m-0">{{ state.errorMessage || 'Invalid or empty image file.' }}</p>
-			</div>
-			<img
-				v-show="isReady"
-				ref="imageRef"
-				:src="imageObjectUrl"
-				class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
-				:style="imageStyle"
-				alt="Viewed image"
-				@load="handleImageLoad"
-				@error="handleImageError"
-			/>
-		</div>
-		<div
-			v-if="!state.hasError"
-			class="absolute bottom-0 mb-2 flex w-fit justify-center gap-2 space-x-4 rounded-2xl bg-bg p-2"
-		>
-			<ButtonStyled type="transparent" @click="zoom(ZOOM_IN_FACTOR)">
-				<button v-tooltip="'Zoom in'">
-					<ZoomInIcon />
-				</button>
-			</ButtonStyled>
-			<ButtonStyled type="transparent" @click="zoom(ZOOM_OUT_FACTOR)">
-				<button v-tooltip="'Zoom out'">
-					<ZoomOutIcon />
-				</button>
-			</ButtonStyled>
-			<ButtonStyled type="transparent" @click="reset">
-				<button>
-					<span class="font-mono">{{ Math.round(state.scale * 100) }}%</span>
-					<span class="ml-4 text-sm text-blue">Reset</span>
-				</button>
-			</ButtonStyled>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { TriangleAlertIcon, ZoomInIcon, ZoomOutIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-const ZOOM_MIN = 0.1
-const ZOOM_MAX = 5
-const ZOOM_IN_FACTOR = 1.2
-const ZOOM_OUT_FACTOR = 0.8
-const INITIAL_SCALE = 0.5
-const MAX_IMAGE_DIMENSION = 4096
-
-const props = defineProps<{
-	imageBlob: Blob
-}>()
-
-const state = ref({
-	scale: INITIAL_SCALE,
-	translateX: 0,
-	translateY: 0,
-	isPanning: false,
-	startX: 0,
-	startY: 0,
-	isLoading: false,
-	hasError: false,
-	errorMessage: '',
-})
-
-const imageRef = ref<HTMLImageElement | null>(null)
-const container = ref<HTMLElement | null>(null)
-const imageObjectUrl = ref('')
-const rafId = ref(0)
-
-const isReady = computed(() => !state.value.isLoading && !state.value.hasError)
-
-const imageStyle = computed(() => ({
-	transform: `translate(-50%, -50%) scale(${state.value.scale}) translate(${state.value.translateX}px, ${state.value.translateY}px)`,
-	transition: state.value.isPanning ? 'none' : 'transform 0.3s ease-out',
-}))
-
-const validateImageDimensions = (img: HTMLImageElement): boolean => {
-	if (img.naturalWidth > MAX_IMAGE_DIMENSION || img.naturalHeight > MAX_IMAGE_DIMENSION) {
-		state.value.hasError = true
-		state.value.errorMessage = `Image too large to view (max ${MAX_IMAGE_DIMENSION}x${MAX_IMAGE_DIMENSION} pixels)`
-		return false
-	}
-	return true
-}
-
-const updateImageUrl = (blob: Blob) => {
-	if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value)
-	imageObjectUrl.value = URL.createObjectURL(blob)
-}
-
-const handleImageLoad = () => {
-	if (!imageRef.value || !validateImageDimensions(imageRef.value)) {
-		state.value.isLoading = false
-		return
-	}
-	state.value.isLoading = false
-	reset()
-}
-
-const handleImageError = () => {
-	state.value.isLoading = false
-	state.value.hasError = true
-	state.value.errorMessage = 'Failed to load image'
-}
-
-const zoom = (factor: number) => {
-	const newScale = state.value.scale * factor
-	state.value.scale = Math.max(ZOOM_MIN, Math.min(newScale, ZOOM_MAX))
-}
-
-const reset = () => {
-	state.value.scale = INITIAL_SCALE
-	state.value.translateX = 0
-	state.value.translateY = 0
-}
-
-const startPan = (e: MouseEvent) => {
-	state.value.isPanning = true
-	state.value.startX = e.clientX - state.value.translateX
-	state.value.startY = e.clientY - state.value.translateY
-}
-
-const handlePan = (e: MouseEvent) => {
-	if (!state.value.isPanning) return
-	cancelAnimationFrame(rafId.value)
-	rafId.value = requestAnimationFrame(() => {
-		state.value.translateX = e.clientX - state.value.startX
-		state.value.translateY = e.clientY - state.value.startY
-	})
-}
-
-const stopPan = () => {
-	state.value.isPanning = false
-}
-
-const handleWheel = (e: WheelEvent) => {
-	const delta = e.deltaY * -0.001
-	const factor = 1 + delta
-	zoom(factor)
-}
-
-watch(
-	() => props.imageBlob,
-	(newBlob) => {
-		if (!newBlob) return
-		state.value.isLoading = true
-		state.value.hasError = false
-		updateImageUrl(newBlob)
-	},
-)
-
-onMounted(() => {
-	if (props.imageBlob) updateImageUrl(props.imageBlob)
-})
-
-onUnmounted(() => {
-	if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value)
-	cancelAnimationFrame(rafId.value)
-})
-</script>
diff --git a/packages/ui/src/components/servers/files/editor/index.ts b/packages/ui/src/components/servers/files/editor/index.ts
deleted file mode 100644
index 3f5fed318a..0000000000
--- a/packages/ui/src/components/servers/files/editor/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as FileEditor } from './FileEditor.vue'
-export { default as FileImageViewer } from './FileImageViewer.vue'
diff --git a/packages/ui/src/components/servers/files/explorer/FileItem.vue b/packages/ui/src/components/servers/files/explorer/FileItem.vue
deleted file mode 100644
index 36bd56bdcc..0000000000
--- a/packages/ui/src/components/servers/files/explorer/FileItem.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<template>
-	<li
-		role="button"
-		:class="[
-			containerClasses,
-			isDragOver && type === 'directory' ? 'bg-brand-highlight' : '',
-			isDragging ? 'opacity-50' : '',
-		]"
-		tabindex="0"
-		draggable="true"
-		@click="selectItem"
-		@contextmenu="openContextMenu"
-		@keydown="(e) => e.key === 'Enter' && selectItem()"
-		@mouseenter="handleMouseEnter"
-		@dragstart="handleDragStart"
-		@dragend="handleDragEnd"
-		@dragenter.prevent="handleDragEnter"
-		@dragover.prevent="handleDragOver"
-		@dragleave.prevent="handleDragLeave"
-		@drop.prevent="handleDrop"
-	>
-		<div class="pointer-events-none flex flex-1 items-center gap-3 truncate">
-			<Checkbox
-				class="pointer-events-auto"
-				:model-value="selected"
-				@click.stop
-				@update:model-value="emit('toggle-select')"
-			/>
-			<div class="pointer-events-none flex size-5 items-center justify-center">
-				<component :is="iconComponent" class="size-5" />
-			</div>
-			<div class="pointer-events-none flex flex-col truncate">
-				<span
-					class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast"
-				>
-					{{ name }}
-				</span>
-			</div>
-		</div>
-		<div class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 md:gap-12">
-			<span class="hidden w-[100px] text-nowrap text-sm text-secondary md:block">
-				{{ formattedSize }}
-			</span>
-			<span class="hidden w-[160px] text-nowrap text-sm text-secondary md:block">
-				{{ formattedCreationDate }}
-			</span>
-			<span class="hidden w-[160px] text-nowrap text-sm text-secondary md:block">
-				{{ formattedModifiedDate }}
-			</span>
-			<ButtonStyled circular type="transparent">
-				<TeleportOverflowMenu :options="menuOptions">
-					<MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
-					<template #extract><PackageOpenIcon /> Extract</template>
-					<template #rename><EditIcon /> Rename</template>
-					<template #move><RightArrowIcon /> Move</template>
-					<template #download><DownloadIcon /> Download</template>
-					<template #delete><TrashIcon /> Delete</template>
-				</TeleportOverflowMenu>
-			</ButtonStyled>
-		</div>
-	</li>
-</template>
-
-<script setup lang="ts">
-import {
-	DownloadIcon,
-	EditIcon,
-	FolderCogIcon,
-	FolderOpenIcon,
-	GlobeIcon,
-	MoreHorizontalIcon,
-	PackageOpenIcon,
-	PaletteIcon,
-	RightArrowIcon,
-	TrashIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Checkbox,
-	getFileExtension,
-	getFileExtensionIcon,
-	isEditableFile as isEditableFileExt,
-	isImageFile,
-	useFormatDateTime,
-} from '@modrinth/ui'
-import { computed, ref, shallowRef } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
-
-interface FileItemProps {
-	name: string
-	type: 'directory' | 'file'
-	size?: number
-	count?: number
-	modified: number
-	created: number
-	path: string
-	index: number
-	isLast: boolean
-	selected: boolean
-	writeDisabled?: boolean
-	writeDisabledTooltip?: string
-}
-
-const props = defineProps<FileItemProps>()
-
-const emit = defineEmits<{
-	rename: [item: { name: string; type: string; path: string }]
-	move: [item: { name: string; type: string; path: string }]
-	download: [item: { name: string; type: string; path: string }]
-	delete: [item: { name: string; type: string; path: string }]
-	edit: [item: { name: string; type: string; path: string }]
-	extract: [item: { name: string; type: string; path: string }]
-	hover: [item: { name: string; type: string; path: string }]
-	moveDirectTo: [item: { name: string; type: string; path: string; destination: string }]
-	contextmenu: [x: number, y: number]
-	'toggle-select': []
-}>()
-
-const isDragOver = ref(false)
-const isDragging = ref(false)
-
-const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
-
-const route = shallowRef(useRoute())
-const router = useRouter()
-
-const formatDateTime = useFormatDateTime({
-	year: '2-digit',
-	month: '2-digit',
-	day: '2-digit',
-	hour: 'numeric',
-	minute: 'numeric',
-})
-
-const containerClasses = computed(() => [
-	'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-3 px-4 py-3 focus:!outline-none',
-	props.selected ? 'bg-surface-3' : props.index % 2 === 0 ? 'bg-surface-2' : 'file-row-alt',
-	props.isLast ? 'rounded-b-[20px] border-b' : '',
-	isEditableFile.value ? 'cursor-pointer' : props.type === 'directory' ? 'cursor-pointer' : '',
-	isDragOver.value ? '!bg-brand-highlight' : '',
-	'transition-colors duration-100 hover:!bg-surface-4 hover:!brightness-100 focus:!bg-surface-4 focus:!brightness-100',
-])
-
-const fileExtension = computed(() => getFileExtension(props.name))
-
-const isZip = computed(() => fileExtension.value === 'zip')
-
-const menuOptions = computed(() => {
-	const item = { name: props.name, type: props.type, path: props.path }
-	const wd = props.writeDisabled
-	const wdTooltip = props.writeDisabledTooltip
-	return [
-		{
-			id: 'extract',
-			shown: isZip.value,
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('extract', item),
-		},
-		{
-			divider: true,
-			shown: isZip.value,
-		},
-		{
-			id: 'rename',
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('rename', item),
-		},
-		{
-			id: 'move',
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('move', item),
-		},
-		{
-			id: 'download',
-			action: () => emit('download', item),
-			shown: props.type !== 'directory',
-		},
-		{
-			id: 'delete',
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('delete', item),
-			color: 'red' as const,
-		},
-	]
-})
-
-const iconComponent = computed(() => {
-	if (props.type === 'directory') {
-		if (props.name === 'config') return FolderCogIcon
-		if (props.name === 'world') return GlobeIcon
-		if (props.name === 'resourcepacks') return PaletteIcon
-		return FolderOpenIcon
-	}
-
-	return getFileExtensionIcon(fileExtension.value)
-})
-
-const formattedModifiedDate = computed(() => {
-	const date = new Date(props.modified * 1000)
-	return formatDateTime(date)
-})
-
-const formattedCreationDate = computed(() => {
-	const date = new Date(props.created * 1000)
-	return formatDateTime(date)
-})
-
-const isEditableFile = computed(() => {
-	if (props.type === 'file') {
-		const ext = fileExtension.value
-		return !props.name.includes('.') || isEditableFileExt(ext) || isImageFile(ext)
-	}
-	return false
-})
-
-const formattedSize = computed(() => {
-	if (props.type === 'directory') {
-		return `${props.count} ${props.count === 1 ? 'item' : 'items'}`
-	}
-
-	if (props.size === undefined) return ''
-	const bytes = props.size
-	if (bytes === 0) return '0 B'
-
-	const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
-	const size = (bytes / Math.pow(1024, exponent)).toFixed(2)
-	return `${size} ${units[exponent]}`
-})
-
-function openContextMenu(event: MouseEvent) {
-	event.preventDefault()
-	emit('contextmenu', event.clientX, event.clientY)
-}
-
-function handleMouseEnter() {
-	emit('hover', { name: props.name, type: props.type, path: props.path })
-}
-
-function navigateToFolder() {
-	const currentPath = route.value.query.path?.toString() || ''
-	const newPath = currentPath.endsWith('/')
-		? `${currentPath}${props.name}`
-		: `${currentPath}/${props.name}`
-	router.push({ query: { path: newPath } })
-}
-
-const isNavigating = ref(false)
-
-function selectItem() {
-	if (isNavigating.value) return
-	isNavigating.value = true
-
-	if (props.type === 'directory') {
-		navigateToFolder()
-	} else if (props.type === 'file' && isEditableFile.value) {
-		emit('edit', { name: props.name, type: props.type, path: props.path })
-	}
-
-	setTimeout(() => {
-		isNavigating.value = false
-	}, 500)
-}
-
-function handleDragStart(event: DragEvent) {
-	if (!event.dataTransfer) return
-	isDragging.value = true
-
-	const dragGhost = document.createElement('div')
-	dragGhost.className =
-		'fixed left-0 top-0 flex items-center max-w-[500px] flex-row gap-3 rounded-lg bg-bg-raised p-3 shadow-lg pointer-events-none'
-
-	const nameSpan = document.createElement('span')
-	nameSpan.className = 'font-bold truncate text-contrast'
-	nameSpan.textContent = props.name
-
-	dragGhost.appendChild(nameSpan)
-	document.body.appendChild(dragGhost)
-
-	event.dataTransfer.setDragImage(dragGhost, 0, 0)
-
-	requestAnimationFrame(() => {
-		document.body.removeChild(dragGhost)
-	})
-
-	event.dataTransfer.setData(
-		'application/modrinth-file-move',
-		JSON.stringify({
-			name: props.name,
-			type: props.type,
-			path: props.path,
-		}),
-	)
-	event.dataTransfer.effectAllowed = 'move'
-}
-
-function isChildPath(parentPath: string, childPath: string) {
-	return childPath.startsWith(parentPath + '/')
-}
-
-function handleDragEnd() {
-	isDragging.value = false
-}
-
-function handleDragEnter() {
-	if (props.type !== 'directory') return
-	isDragOver.value = true
-}
-
-function handleDragOver(event: DragEvent) {
-	if (props.type !== 'directory' || !event.dataTransfer) return
-	event.dataTransfer.dropEffect = 'move'
-}
-
-function handleDragLeave() {
-	isDragOver.value = false
-}
-
-function handleDrop(event: DragEvent) {
-	isDragOver.value = false
-	if (props.type !== 'directory' || !event.dataTransfer) return
-
-	try {
-		const dragData = JSON.parse(event.dataTransfer.getData('application/modrinth-file-move'))
-
-		if (dragData.path === props.path) return
-
-		if (dragData.type === 'directory' && isChildPath(dragData.path, props.path)) {
-			console.error('Cannot move a folder into its own subfolder')
-			return
-		}
-
-		emit('moveDirectTo', {
-			name: dragData.name,
-			type: dragData.type,
-			path: dragData.path,
-			destination: props.path,
-		})
-	} catch (error) {
-		console.error('Error handling file drop:', error)
-	}
-}
-</script>
-
-<style scoped>
-.file-row-alt {
-	background: color-mix(in srgb, var(--surface-2), black 3%);
-}
-
-:global(.dark-mode) .file-row-alt,
-:global(.dark) .file-row-alt,
-:global(.oled-mode) .file-row-alt {
-	background: color-mix(in srgb, var(--surface-2), black 10%);
-}
-</style>
diff --git a/packages/ui/src/components/servers/files/explorer/FileLabelBar.vue b/packages/ui/src/components/servers/files/explorer/FileLabelBar.vue
deleted file mode 100644
index 3f93afb20c..0000000000
--- a/packages/ui/src/components/servers/files/explorer/FileLabelBar.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-	<div
-		aria-hidden="true"
-		class="sticky top-0 z-20 flex w-full select-none flex-row items-center justify-between border border-b-0 border-solid border-surface-3 bg-surface-3 p-4 text-sm font-medium transition-[border-radius] duration-100 before:pointer-events-none before:absolute before:inset-x-0 before:-top-5 before:h-5 before:bg-surface-3"
-		:class="isStuck ? 'rounded-none' : 'rounded-t-[20px]'"
-	>
-		<div class="flex flex-1 items-center gap-3">
-			<Checkbox
-				:model-value="allSelected"
-				:indeterminate="someSelected && !allSelected"
-				@update:model-value="$emit('toggle-all')"
-			/>
-			<button
-				class="flex appearance-none items-center gap-1.5 bg-transparent text-contrast hover:text-brand"
-				@click="$emit('sort', 'name')"
-			>
-				<span>Name</span>
-				<ChevronUpIcon
-					v-if="sortField === 'name' && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortField === 'name' && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-			</button>
-		</div>
-		<div class="flex shrink-0 items-center gap-4 md:gap-12">
-			<button
-				class="hidden w-[100px] appearance-none items-center justify-start gap-1 bg-transparent text-primary hover:text-brand md:flex"
-				@click="$emit('sort', 'size')"
-			>
-				<span class="ml-2">Size</span>
-				<ChevronUpIcon
-					v-if="sortField === 'size' && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortField === 'size' && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-			</button>
-			<button
-				class="hidden w-[160px] appearance-none items-center justify-start gap-1 bg-transparent text-primary hover:text-brand md:flex"
-				@click="$emit('sort', 'created')"
-			>
-				<span class="ml-2">Created</span>
-				<ChevronUpIcon
-					v-if="sortField === 'created' && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortField === 'created' && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-			</button>
-			<button
-				class="hidden w-[160px] appearance-none items-center justify-start gap-1 bg-transparent text-primary hover:text-brand md:flex"
-				@click="$emit('sort', 'modified')"
-			>
-				<span class="ml-2">Modified</span>
-				<ChevronUpIcon
-					v-if="sortField === 'modified' && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortField === 'modified' && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-			</button>
-			<span class="w-[51px] text-right text-primary">Actions</span>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
-import { Checkbox } from '@modrinth/ui'
-
-defineProps<{
-	sortField: string
-	sortDesc: boolean
-	allSelected: boolean
-	someSelected: boolean
-	isStuck: boolean
-}>()
-
-defineEmits<{
-	sort: [field: string]
-	'toggle-all': []
-}>()
-</script>
diff --git a/packages/ui/src/components/servers/files/explorer/FileVirtualList.vue b/packages/ui/src/components/servers/files/explorer/FileVirtualList.vue
deleted file mode 100644
index 210cb181cc..0000000000
--- a/packages/ui/src/components/servers/files/explorer/FileVirtualList.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-	<div ref="listContainer" class="relative w-full">
-		<div
-			:style="{
-				position: 'relative',
-				minHeight: `${totalHeight}px`,
-			}"
-		>
-			<ul
-				class="list-none"
-				:style="{
-					position: 'absolute',
-					top: `${visibleTop}px`,
-					width: '100%',
-					margin: 0,
-					padding: 0,
-				}"
-			>
-				<FileItem
-					v-for="(item, idx) in visibleItems"
-					:key="item.path"
-					:count="item.count"
-					:created="item.created"
-					:modified="item.modified"
-					:name="item.name"
-					:path="item.path"
-					:type="item.type"
-					:size="item.size"
-					:index="visibleRange.start + idx"
-					:is-last="visibleRange.start + idx === props.items.length - 1"
-					:selected="selectedItems.has(item.path)"
-					:write-disabled="writeDisabled"
-					:write-disabled-tooltip="writeDisabledTooltip"
-					@delete="$emit('delete', item)"
-					@rename="$emit('rename', item)"
-					@extract="$emit('extract', item)"
-					@download="$emit('download', item)"
-					@move="$emit('move', item)"
-					@move-direct-to="$emit('moveDirectTo', $event)"
-					@edit="$emit('edit', item)"
-					@hover="$emit('hover', item)"
-					@contextmenu="(x, y) => $emit('contextmenu', item, x, y)"
-					@toggle-select="$emit('toggle-select', item.path)"
-				/>
-			</ul>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { Kyros } from '@modrinth/api-client'
-import { toRef } from 'vue'
-
-import { useVirtualScroll } from '../../../../composables/virtual-scroll'
-import FileItem from './FileItem.vue'
-
-const props = defineProps<{
-	items: Kyros.Files.v0.DirectoryItem[]
-	selectedItems: Set<string>
-	writeDisabled?: boolean
-	writeDisabledTooltip?: string
-}>()
-
-const emit = defineEmits<{
-	delete: [item: Kyros.Files.v0.DirectoryItem]
-	rename: [item: Kyros.Files.v0.DirectoryItem]
-	download: [item: Kyros.Files.v0.DirectoryItem]
-	move: [item: Kyros.Files.v0.DirectoryItem]
-	edit: [item: Kyros.Files.v0.DirectoryItem]
-	moveDirectTo: [item: { name: string; type: string; path: string; destination: string }]
-	extract: [item: Kyros.Files.v0.DirectoryItem]
-	hover: [item: Kyros.Files.v0.DirectoryItem]
-	contextmenu: [item: Kyros.Files.v0.DirectoryItem, x: number, y: number]
-	loadMore: []
-	'toggle-select': [path: string]
-}>()
-
-const { listContainer, totalHeight, visibleRange, visibleTop, visibleItems } = useVirtualScroll(
-	toRef(props, 'items'),
-	{
-		itemHeight: 61,
-		bufferSize: 5,
-		onNearEnd: () => emit('loadMore'),
-	},
-)
-</script>
diff --git a/packages/ui/src/components/servers/files/explorer/index.ts b/packages/ui/src/components/servers/files/explorer/index.ts
deleted file mode 100644
index a19d7a7774..0000000000
--- a/packages/ui/src/components/servers/files/explorer/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as FileItem } from './FileItem.vue'
-export { default as FileLabelBar } from './FileLabelBar.vue'
-export { default as FileManagerError } from './FileManagerError.vue'
-export { default as FileVirtualList } from './FileVirtualList.vue'
-export { default as TeleportOverflowMenu } from './TeleportOverflowMenu.vue'
diff --git a/packages/ui/src/components/servers/files/index.ts b/packages/ui/src/components/servers/files/index.ts
deleted file mode 100644
index 93f3acbc51..0000000000
--- a/packages/ui/src/components/servers/files/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './editor'
-export * from './explorer'
-export { default as FileNavbar } from './FileNavbar.vue'
-export * from './modals'
-export * from './upload'
diff --git a/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue b/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue
deleted file mode 100644
index 5897a84a76..0000000000
--- a/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-	<NewModal ref="modal" :header="`Creating a ${displayType}`">
-		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
-			<div class="flex flex-col gap-2">
-				<div class="font-semibold text-contrast">Name</div>
-				<StyledInput
-					ref="createInput"
-					v-model="itemName"
-					:placeholder="`e.g. ${type === 'file' ? 'config.yml' : 'plugins'}`"
-					wrapper-class="w-full"
-				/>
-				<div v-if="submitted && error" class="text-red">{{ error }}</div>
-			</div>
-			<div class="flex justify-start gap-4">
-				<ButtonStyled color="brand">
-					<button :disabled="!!error" type="submit">
-						<PlusIcon class="h-5 w-5" />
-						Create {{ displayType }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button type="button" @click="hide">
-						<XIcon class="h-5 w-5" />
-						Cancel
-					</button>
-				</ButtonStyled>
-			</div>
-		</form>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
-import { computed, nextTick, ref } from 'vue'
-
-const props = defineProps<{
-	type: 'file' | 'directory'
-}>()
-
-const emit = defineEmits<{
-	create: [name: string]
-}>()
-
-const modal = ref<InstanceType<typeof NewModal>>()
-const displayType = computed(() => (props.type === 'directory' ? 'folder' : props.type))
-const createInput = ref<HTMLInputElement | null>(null)
-const itemName = ref('')
-const submitted = ref(false)
-
-const error = computed(() => {
-	if (!itemName.value) {
-		return 'Name is required.'
-	}
-	if (props.type === 'file') {
-		const validPattern = /^[a-zA-Z0-9-_.\s]+$/
-		if (!validPattern.test(itemName.value)) {
-			return 'Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.'
-		}
-	} else {
-		const validPattern = /^[a-zA-Z0-9-_\s]+$/
-		if (!validPattern.test(itemName.value)) {
-			return 'Name must contain only alphanumeric characters, dashes, underscores, or spaces.'
-		}
-	}
-	return ''
-})
-
-const handleSubmit = () => {
-	submitted.value = true
-	if (!error.value) {
-		emit('create', itemName.value)
-		hide()
-	}
-}
-
-const show = () => {
-	itemName.value = ''
-	submitted.value = false
-	modal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			createInput.value?.focus()
-		}, 100)
-	})
-}
-
-const hide = () => {
-	modal.value?.hide()
-}
-
-defineExpose({ show, hide })
-</script>
diff --git a/packages/ui/src/components/servers/files/modals/FileDeleteItemModal.vue b/packages/ui/src/components/servers/files/modals/FileDeleteItemModal.vue
deleted file mode 100644
index 88a9c32811..0000000000
--- a/packages/ui/src/components/servers/files/modals/FileDeleteItemModal.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-	<NewModal ref="modal" fade="danger" :header="`Deleting ${item?.type}`">
-		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
-			<div
-				class="relative flex w-full items-center gap-2 rounded-2xl border border-solid border-brand-red bg-bg-red p-6 shadow-md"
-			>
-				<div
-					class="flex h-9 w-9 items-center justify-center rounded-full bg-highlight-red p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
-				>
-					<FolderOpenIcon v-if="item?.type === 'directory'" class="h-5 w-5" />
-					<FileIcon v-else-if="item?.type === 'file'" class="h-5 w-5" />
-				</div>
-				<div class="flex flex-col">
-					<span class="font-bold group-hover:text-contrast">{{ item?.name }}</span>
-					<span
-						v-if="item?.type === 'directory'"
-						class="text-xs text-secondary group-hover:text-primary"
-					>
-						{{ item?.count }} items
-					</span>
-					<span v-else class="text-xs text-secondary group-hover:text-primary">
-						{{ ((item?.size ?? 0) / 1024 / 1024).toFixed(2) }} MB
-					</span>
-				</div>
-			</div>
-			<div class="flex justify-start gap-4">
-				<ButtonStyled color="red">
-					<button type="submit">
-						<TrashIcon class="h-5 w-5" />
-						Delete {{ item?.type }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button type="button" @click="hide">
-						<XIcon class="h-5 w-5" />
-						Cancel
-					</button>
-				</ButtonStyled>
-			</div>
-		</form>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { FileIcon, FolderOpenIcon, TrashIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal } from '@modrinth/ui'
-import { ref } from 'vue'
-
-defineProps<{
-	item: {
-		name: string
-		type: string
-		count?: number
-		size?: number
-	} | null
-}>()
-
-const emit = defineEmits<{
-	delete: []
-}>()
-
-const modal = ref<InstanceType<typeof NewModal>>()
-
-const handleSubmit = () => {
-	emit('delete')
-	hide()
-}
-
-const show = () => {
-	modal.value?.show()
-}
-
-const hide = () => {
-	modal.value?.hide()
-}
-
-defineExpose({ show, hide })
-</script>
diff --git a/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue b/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue
deleted file mode 100644
index 378532df80..0000000000
--- a/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-	<NewModal ref="modal" :header="`Moving ${item?.name}`">
-		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
-			<div class="flex flex-col gap-2">
-				<StyledInput
-					ref="destinationInput"
-					v-model="destination"
-					placeholder="e.g. /mods/modname"
-					wrapper-class="w-full"
-				/>
-			</div>
-			<div class="flex items-center gap-2 text-nowrap">
-				New location:
-				<div class="w-full rounded-lg bg-table-alternateRow p-2 font-bold text-contrast">
-					<span class="text-secondary">/root</span>{{ newpath }}
-				</div>
-			</div>
-			<div class="flex justify-start gap-4">
-				<ButtonStyled color="brand">
-					<button type="submit">
-						<ArrowBigUpDashIcon class="h-5 w-5" />
-						Move
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button type="button" @click="hide">
-						<XIcon class="h-5 w-5" />
-						Cancel
-					</button>
-				</ButtonStyled>
-			</div>
-		</form>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { ArrowBigUpDashIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
-import { computed, nextTick, ref } from 'vue'
-
-const destinationInput = ref<HTMLInputElement | null>(null)
-
-const props = defineProps<{
-	item: { name: string } | null
-	currentPath: string
-}>()
-
-const emit = defineEmits<{
-	move: [destination: string]
-}>()
-
-const modal = ref<InstanceType<typeof NewModal>>()
-const destination = ref('')
-const newpath = computed(() => {
-	const path = destination.value.replace('//', '/')
-	return path.startsWith('/') ? path : `/${path}`
-})
-
-const handleSubmit = () => {
-	emit('move', newpath.value)
-	hide()
-}
-
-const show = () => {
-	destination.value = props.currentPath
-	modal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			destinationInput.value?.focus()
-		}, 100)
-	})
-}
-
-const hide = () => {
-	modal.value?.hide()
-}
-
-defineExpose({ show, hide })
-</script>
diff --git a/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue b/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
deleted file mode 100644
index 3dfc3aa39e..0000000000
--- a/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-	<NewModal ref="modal" :header="`Renaming ${item?.type}`">
-		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
-			<div class="flex flex-col gap-2">
-				<div class="font-semibold text-contrast">Name</div>
-				<StyledInput ref="renameInput" v-model="itemName" wrapper-class="w-full" />
-				<div v-if="submitted && error" class="text-red">{{ error }}</div>
-			</div>
-			<div class="flex justify-start gap-4">
-				<ButtonStyled color="brand">
-					<button :disabled="!!error" type="submit">
-						<EditIcon class="h-5 w-5" />
-						Rename
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button type="button" @click="hide">
-						<XIcon class="h-5 w-5" />
-						Cancel
-					</button>
-				</ButtonStyled>
-			</div>
-		</form>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { EditIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
-import { computed, nextTick, ref } from 'vue'
-
-const props = defineProps<{
-	item: { name: string; type: string } | null
-}>()
-
-const emit = defineEmits<{
-	rename: [newName: string]
-}>()
-
-const modal = ref<InstanceType<typeof NewModal>>()
-const renameInput = ref<HTMLInputElement | null>(null)
-const itemName = ref('')
-const submitted = ref(false)
-
-const error = computed(() => {
-	if (!itemName.value) {
-		return 'Name is required.'
-	}
-	if (props.item?.type === 'file') {
-		const validPattern = /^[a-zA-Z0-9-_.\s]+$/
-		if (!validPattern.test(itemName.value)) {
-			return 'Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.'
-		}
-	} else {
-		const validPattern = /^[a-zA-Z0-9-_\s]+$/
-		if (!validPattern.test(itemName.value)) {
-			return 'Name must contain only alphanumeric characters, dashes, underscores, or spaces.'
-		}
-	}
-	return ''
-})
-
-const handleSubmit = () => {
-	submitted.value = true
-	if (!error.value) {
-		emit('rename', itemName.value)
-		hide()
-	}
-}
-
-const show = (item: { name: string; type: string }) => {
-	itemName.value = item.name
-	submitted.value = false
-	modal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			renameInput.value?.focus()
-		}, 100)
-	})
-}
-
-const hide = () => {
-	modal.value?.hide()
-}
-
-defineExpose({ show, hide })
-</script>
diff --git a/packages/ui/src/components/servers/files/modals/FileUploadConflictModal.vue b/packages/ui/src/components/servers/files/modals/FileUploadConflictModal.vue
deleted file mode 100644
index e5d7f123e3..0000000000
--- a/packages/ui/src/components/servers/files/modals/FileUploadConflictModal.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-	<ConfirmModal
-		ref="modal"
-		title="Do you want to overwrite these conflicting files?"
-		:proceed-label="`Overwrite`"
-		:proceed-icon="CheckIcon"
-		@proceed="proceed"
-	>
-		<div class="flex max-w-[30rem] flex-col gap-4">
-			<p class="m-0 font-semibold leading-normal">
-				<template v-if="hasMany">
-					Over 100 files will be overwritten if you proceed with extraction; here is just some of
-					them:
-				</template>
-				<template v-else>
-					The following {{ files.length }} files already exist on your server, and will be
-					overwritten if you proceed with extraction:
-				</template>
-			</p>
-			<ul class="m-0 max-h-80 list-none overflow-auto rounded-2xl bg-bg px-4 py-3">
-				<li v-for="file in files" :key="file" class="flex items-center gap-1 py-1 font-medium">
-					<XIcon class="shrink-0 text-red" /> {{ file }}
-				</li>
-			</ul>
-		</div>
-	</ConfirmModal>
-</template>
-
-<script setup lang="ts">
-import { CheckIcon, XIcon } from '@modrinth/assets'
-import { ConfirmModal } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-
-const path = ref('')
-const files = ref<string[]>([])
-
-const emit = defineEmits<{
-	proceed: [path: string]
-}>()
-
-const modal = ref<InstanceType<typeof ConfirmModal>>()
-
-const hasMany = computed(() => files.value.length > 100)
-
-const show = (zipPath: string, conflictingFiles: string[]) => {
-	path.value = zipPath
-	files.value = conflictingFiles
-	modal.value?.show()
-}
-
-const proceed = () => {
-	emit('proceed', path.value)
-}
-
-defineExpose({ show })
-</script>
diff --git a/packages/ui/src/components/servers/files/modals/FileUploadZipUrlModal.vue b/packages/ui/src/components/servers/files/modals/FileUploadZipUrlModal.vue
deleted file mode 100644
index 4b63f6f27d..0000000000
--- a/packages/ui/src/components/servers/files/modals/FileUploadZipUrlModal.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-	<NewModal
-		ref="modal"
-		:header="cf ? `Installing a CurseForge modpack` : `Uploading .zip contents from URL`"
-	>
-		<form class="flex flex-col gap-5 md:w-[620px]" @submit.prevent="handleSubmit">
-			<!-- CurseForge stepper cards -->
-			<div v-if="cf" class="flex flex-col gap-2 w-full">
-				<div class="grid gap-2 sm:grid-cols-3">
-					<div
-						v-for="(step, i) in steps"
-						:key="i"
-						class="flex flex-col gap-2 rounded-xl border border-solid border-surface-5 bg-surface-4 p-4"
-					>
-						<div class="flex items-center gap-2">
-							<span
-								class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-highlight text-xs font-bold text-brand"
-							>
-								{{ i + 1 }}
-							</span>
-						</div>
-						<div class="text-sm font-semibold leading-snug text-contrast">
-							{{ step.title }}
-						</div>
-						<div class="text-xs leading-relaxed text-secondary">
-							{{ step.description }}
-						</div>
-						<a
-							v-if="step.link"
-							:href="step.link"
-							target="_blank"
-							rel="noopener noreferrer"
-							class="mt-auto inline-flex items-center gap-1 text-xs font-semibold text-[#F16436] transition-all hover:underline"
-						>
-							Browse CurseForge
-							<ExternalIcon class="h-3 w-3" />
-						</a>
-					</div>
-				</div>
-			</div>
-
-			<!-- URL input -->
-			<div class="flex flex-col gap-2">
-				<div v-if="!cf" class="text-sm text-secondary">
-					Copy and paste the direct download URL of a .zip file.
-				</div>
-				<StyledInput
-					v-model="url"
-					:icon="LinkIcon"
-					type="url"
-					:placeholder="
-						cf
-							? 'https://www.curseforge.com/minecraft/modpacks/.../files/6412259'
-							: 'https://www.example.com/.../modpack-name-1.0.2.zip'
-					"
-					:disabled="submitted"
-					:error="touched && !!error"
-					autocomplete="off"
-					@focus="touched = true"
-				/>
-				<div v-if="touched && error" class="text-xs text-red">{{ error }}</div>
-			</div>
-
-			<!-- Backup warning -->
-			<Admonition type="warning">
-				You may want to
-				<AutoLink
-					:to="`/hosting/manage/${serverId}/backups`"
-					class="font-semibold text-orange hover:underline"
-					>create a backup</AutoLink
-				>
-				before proceeding, as this process is irreversible and may permanently alter your world or
-				the files on your server.
-			</Admonition>
-		</form>
-
-		<template #actions>
-			<div class="flex gap-2 justify-start">
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="error"
-						:disabled="submitted || !!error"
-						type="submit"
-						@click="handleSubmit"
-					>
-						<SpinnerIcon v-if="submitted" class="animate-spin" />
-						<DownloadIcon v-else />
-						{{ submitted ? 'Installing...' : 'Install' }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button type="button" @click="hide">
-						<XIcon />
-						{{ submitted ? 'Close' : 'Cancel' }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import {
-	DownloadIcon,
-	ExternalIcon,
-	FileTextIcon,
-	LinkIcon,
-	SearchIcon,
-	SpinnerIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { computed, nextTick, ref } from 'vue'
-
-import {
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-} from '../../../../providers'
-import Admonition from '../../../base/Admonition.vue'
-import AutoLink from '../../../base/AutoLink.vue'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
-import StyledInput from '../../../base/StyledInput.vue'
-import NewModal from '../../../modal/NewModal.vue'
-
-const { addNotification } = injectNotificationManager()
-const client = injectModrinthClient()
-const { serverId } = injectModrinthServerContext()
-
-const steps = [
-	{
-		icon: SearchIcon,
-		title: 'Find the modpack',
-		description: 'Browse CurseForge and locate the modpack you want.',
-		link: 'https://www.curseforge.com/minecraft/search?page=1&pageSize=40&sortBy=relevancy&class=modpacks',
-	},
-	{
-		icon: FileTextIcon,
-		title: 'Select a version',
-		description: 'Go to the "Files" tab and pick the version to install.',
-	},
-	{
-		icon: LinkIcon,
-		title: 'Copy the URL',
-		description: 'Copy the version page URL and paste it below.',
-	},
-]
-
-const cf = ref(false)
-
-const modal = ref<InstanceType<typeof NewModal>>()
-const url = ref('')
-const submitted = ref(false)
-const touched = ref(false)
-
-const trimmedUrl = computed(() => url.value.trim())
-
-const regex = /https:\/\/(www\.)?curseforge\.com\/minecraft\/modpacks\/[^/]+\/files\/\d+/
-
-const error = computed(() => {
-	if (trimmedUrl.value.length === 0) {
-		return 'URL is required.'
-	}
-	if (cf.value && !regex.test(trimmedUrl.value)) {
-		return 'URL must be a CurseForge modpack version URL.'
-	} else if (!cf.value && !trimmedUrl.value.includes('/')) {
-		return 'URL must be valid.'
-	}
-	return ''
-})
-
-const handleSubmit = async () => {
-	touched.value = true
-	if (error.value) return
-
-	submitted.value = true
-	try {
-		const dry = await client.kyros.files_v0.extractFile(trimmedUrl.value, true, true)
-
-		if (!cf.value || dry.modpack_name) {
-			await client.kyros.files_v0.extractFile(trimmedUrl.value, true, false)
-			hide()
-		} else {
-			submitted.value = false
-			addNotification({
-				title: 'CurseForge modpack not found',
-				text: `Could not find CurseForge modpack at that URL.`,
-				type: 'error',
-			})
-		}
-	} catch (err) {
-		submitted.value = false
-		console.error('Error installing:', err)
-		addNotification({
-			title: 'Installation failed',
-			text: err instanceof Error ? err.message : 'An unknown error occurred',
-			type: 'error',
-		})
-	}
-}
-
-const show = (isCf: boolean) => {
-	cf.value = isCf
-	url.value = ''
-	submitted.value = false
-	touched.value = false
-	modal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			modal.value?.$el?.querySelector('input')?.focus()
-		}, 100)
-	})
-}
-
-const hide = () => {
-	modal.value?.hide()
-}
-
-defineExpose({ show, hide })
-</script>
diff --git a/packages/ui/src/components/servers/files/modals/index.ts b/packages/ui/src/components/servers/files/modals/index.ts
deleted file mode 100644
index 1f2fd5694d..0000000000
--- a/packages/ui/src/components/servers/files/modals/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as FileCreateItemModal } from './FileCreateItemModal.vue'
-export { default as FileDeleteItemModal } from './FileDeleteItemModal.vue'
-export { default as FileMoveItemModal } from './FileMoveItemModal.vue'
-export { default as FileRenameItemModal } from './FileRenameItemModal.vue'
-export { default as FileUploadConflictModal } from './FileUploadConflictModal.vue'
-export { default as FileUploadZipUrlModal } from './FileUploadZipUrlModal.vue'
diff --git a/packages/ui/src/components/servers/files/upload/index.ts b/packages/ui/src/components/servers/files/upload/index.ts
deleted file mode 100644
index d44ae326ac..0000000000
--- a/packages/ui/src/components/servers/files/upload/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as FileUploadDragAndDrop } from './FileUploadDragAndDrop.vue'
-export { default as FileUploadDropdown } from './FileUploadDropdown.vue'
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index de615e239d..1c434c9e6d 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -1,5 +1,4 @@
 export * from './backups'
-export * from './files'
 export * from './flows'
 export * from './icons'
 export { default as InstallingBanner } from './InstallingBanner.vue'
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index 8b7de765de..c5136acd8e 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -1,6 +1,6 @@
 <template>
-	<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-4 truncate">
-		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+	<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-2 truncate">
+		<div v-if="!noSeparator" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
 		<div class="flex flex-row items-center gap-2">
 			<LoaderIcon v-if="loader" :loader="loader" class="flex shrink-0 [&&]:size-5" />
 			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index 2b528ce8c6..61afa973ba 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -2,9 +2,9 @@
 	<div
 		v-if="subdomain && !isHidden"
 		v-tooltip="'Copy custom URL'"
-		class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
+		class="flex min-w-0 flex-row items-center gap-2 truncate hover:cursor-pointer"
 	>
-		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+		<div v-if="!noSeparator" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
 		<div class="flex flex-row items-center gap-2">
 			<LinkIcon class="flex size-5 shrink-0" />
 			<div
diff --git a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
index 9b067513d2..d3a660b02e 100644
--- a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
@@ -2,10 +2,10 @@
 	<div
 		v-if="uptimeSeconds || uptimeSeconds !== 0"
 		v-tooltip="`Online for ${verboseUptime}`"
-		class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-4"
+		class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-2"
 		data-pyro-uptime
 	>
-		<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
+		<div v-if="!noSeparator" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
 
 		<div class="flex gap-2">
 			<TimerIcon class="flex size-5 shrink-0" />
diff --git a/packages/ui/src/components/servers/marketing/MedalServerListing.vue b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
index 2648ed2130..dbcbea4f23 100644
--- a/packages/ui/src/components/servers/marketing/MedalServerListing.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
@@ -75,7 +75,7 @@
 						:show-game-label="showGameLabel"
 						:show-loader-label="showLoaderLabel"
 						:linked="false"
-						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-2 text-secondary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</AutoLink>
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index cccea78450..7c517e7872 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -6,6 +6,7 @@ export * from './format-number'
 export * from './how-ago'
 export * from './i18n'
 export * from './i18n-debug'
+export * from './page-leave-safety'
 export * from './scroll-indicator'
 export * from './sticky-observer'
 export * from './virtual-scroll'
diff --git a/packages/ui/src/composables/page-leave-safety.ts b/packages/ui/src/composables/page-leave-safety.ts
new file mode 100644
index 0000000000..6b071b68aa
--- /dev/null
+++ b/packages/ui/src/composables/page-leave-safety.ts
@@ -0,0 +1,38 @@
+import type { ComputedRef, Ref } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+
+import type ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
+
+export function usePageLeaveSafety(dirty: Ref<boolean> | ComputedRef<boolean>) {
+	const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
+
+	function handleBeforeUnload(e: BeforeUnloadEvent) {
+		if (dirty.value) {
+			e.preventDefault()
+		}
+	}
+
+	if (typeof window !== 'undefined') {
+		watch(dirty, (isDirty) => {
+			if (isDirty) {
+				window.addEventListener('beforeunload', handleBeforeUnload)
+			} else {
+				window.removeEventListener('beforeunload', handleBeforeUnload)
+			}
+		})
+
+		onBeforeUnmount(() => {
+			window.removeEventListener('beforeunload', handleBeforeUnload)
+		})
+
+		onBeforeRouteLeave(async () => {
+			if (dirty.value) {
+				return (await confirmLeaveModal.value?.prompt()) ?? false
+			}
+			return true
+		})
+	}
+
+	return { confirmLeaveModal }
+}
diff --git a/packages/ui/src/composables/virtual-scroll.ts b/packages/ui/src/composables/virtual-scroll.ts
index e039ad9a30..d09ffc7f06 100644
--- a/packages/ui/src/composables/virtual-scroll.ts
+++ b/packages/ui/src/composables/virtual-scroll.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 
 export interface VirtualScrollOptions {
 	itemHeight: number
@@ -16,6 +16,7 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 	const scrollContainer = ref<HTMLElement | Window | null>(null)
 	const scrollTop = ref(0)
 	const viewportHeight = ref(0)
+	const containerOffset = ref(0)
 
 	const totalHeight = computed(() => items.value.length * itemHeight)
 
@@ -41,13 +42,25 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 		return container instanceof Window ? window.innerHeight : container.clientHeight
 	}
 
-	function getContainerOffset(listEl: HTMLElement, container: HTMLElement | Window): number {
+	function updateContainerOffset() {
+		const listEl = listContainer.value
+		const container = scrollContainer.value
+		if (!listEl || !container) return
+
 		if (container instanceof Window) {
-			return listEl.getBoundingClientRect().top + window.scrollY
+			containerOffset.value = listEl.getBoundingClientRect().top + window.scrollY
+		} else {
+			const listRect = listEl.getBoundingClientRect()
+			const containerRect = container.getBoundingClientRect()
+			containerOffset.value = listRect.top - containerRect.top + container.scrollTop
 		}
-		const listRect = listEl.getBoundingClientRect()
-		const containerRect = container.getBoundingClientRect()
-		return listRect.top - containerRect.top + container.scrollTop
+	}
+
+	function syncScrollState() {
+		if (!scrollContainer.value) return
+		scrollTop.value = getScrollTop(scrollContainer.value)
+		viewportHeight.value = getViewportHeight(scrollContainer.value)
+		updateContainerOffset()
 	}
 
 	const visibleRange = computed(() => {
@@ -57,15 +70,17 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 
 		if (!listContainer.value || !scrollContainer.value) return { start: 0, end: 0 }
 
-		const containerOffset = getContainerOffset(listContainer.value, scrollContainer.value)
-		const relativeScrollTop = Math.max(0, scrollTop.value - containerOffset)
+		const relativeScrollTop = Math.max(0, scrollTop.value - containerOffset.value)
 
 		const start = Math.floor(relativeScrollTop / itemHeight)
 		const visibleCount = Math.ceil(viewportHeight.value / itemHeight)
 
+		const rangeStart = Math.max(0, start - bufferSize)
+		const rangeEnd = Math.min(items.value.length, start + visibleCount + bufferSize * 2)
+
 		return {
-			start: Math.max(0, start - bufferSize),
-			end: Math.min(items.value.length, start + visibleCount + bufferSize * 2),
+			start: Math.min(rangeStart, rangeEnd),
+			end: rangeEnd,
 		}
 	})
 
@@ -91,16 +106,20 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 	function handleScroll() {
 		if (scrollContainer.value) {
 			scrollTop.value = getScrollTop(scrollContainer.value)
+			updateContainerOffset()
 		}
 		checkNearEnd()
 	}
 
 	function handleResize() {
-		if (scrollContainer.value) {
-			viewportHeight.value = getViewportHeight(scrollContainer.value)
-		}
+		syncScrollState()
 	}
 
+	// Re-sync scroll state when items change to avoid stale scrollTop/offset
+	watch(items, () => {
+		syncScrollState()
+	})
+
 	watchEffect((onCleanup) => {
 		if (typeof window === 'undefined') return
 
@@ -109,15 +128,24 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 
 		const container = findScrollableAncestor(listEl)
 		scrollContainer.value = container
-		viewportHeight.value = getViewportHeight(container)
-		scrollTop.value = getScrollTop(container)
+		syncScrollState()
 
 		container.addEventListener('scroll', handleScroll, { passive: true })
 		window.addEventListener('resize', handleResize, { passive: true })
 
+		// Use ResizeObserver for element scroll containers
+		let resizeObserver: ResizeObserver | undefined
+		if (!(container instanceof Window)) {
+			resizeObserver = new ResizeObserver(() => {
+				syncScrollState()
+			})
+			resizeObserver.observe(container)
+		}
+
 		onCleanup(() => {
 			container.removeEventListener('scroll', handleScroll)
 			window.removeEventListener('resize', handleResize)
+			resizeObserver?.disconnect()
 		})
 	})
 
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index 41e610cf28..8532fe5be8 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -1,3 +1,4 @@
 export * from './shared/content-tab'
+export * from './shared/files-tab'
 export * from './shared/installation-settings'
 export * from './wrapped'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
index d3e0ed5f56..9167808ce1 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
@@ -18,8 +18,8 @@ import BulletDivider from '#ui/components/base/BulletDivider.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
+import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import Toggle from '#ui/components/base/Toggle.vue'
-import TeleportOverflowMenu from '#ui/components/servers/files/explorer/TeleportOverflowMenu.vue'
 import { useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 import { truncatedTooltip } from '#ui/utils/truncate'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
index c9cc8d1020..e24f123599 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
@@ -21,7 +21,7 @@ import OverflowMenu, {
 	type Option as OverflowMenuOption,
 } from '#ui/components/base/OverflowMenu.vue'
 import TagItem from '#ui/components/base/TagItem.vue'
-import TeleportOverflowMenu from '#ui/components/servers/files/explorer/TeleportOverflowMenu.vue'
+import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import { useRelativeTime } from '#ui/composables/how-ago'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmLeaveModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmLeaveModal.vue
deleted file mode 100644
index 74f70b93a4..0000000000
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmLeaveModal.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-	<NewModal
-		ref="modal"
-		:header="formatMessage(messages.leavePageTitle)"
-		fade="warning"
-		max-width="500px"
-	>
-		<div class="flex flex-col gap-6">
-			<Admonition type="critical" :header="formatMessage(messages.uploadInProgress)">
-				{{ formatMessage(messages.leavePageBody) }}
-			</Admonition>
-		</div>
-
-		<template #actions>
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="cancel">
-						<XIcon />
-						{{ formatMessage(messages.stayOnPageButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="leave">
-						<RightArrowIcon />
-						{{ formatMessage(messages.leavePageButton) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { RightArrowIcon, XIcon } from '@modrinth/assets'
-import { ref } from 'vue'
-
-import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
-import { defineMessages, useVIntl } from '#ui/composables/i18n'
-
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	leavePageTitle: {
-		id: 'instances.confirm-leave-modal.title',
-		defaultMessage: 'Leave page?',
-	},
-	uploadInProgress: {
-		id: 'instances.confirm-leave-modal.upload-in-progress',
-		defaultMessage: 'Upload in progress',
-	},
-	leavePageBody: {
-		id: 'instances.confirm-leave-modal.body',
-		defaultMessage:
-			'Files are still being uploaded. Leaving this page will cancel the upload and your changes may be lost.',
-	},
-	stayOnPageButton: {
-		id: 'instances.confirm-leave-modal.stay',
-		defaultMessage: 'Stay on page',
-	},
-	leavePageButton: {
-		id: 'instances.confirm-leave-modal.leave',
-		defaultMessage: 'Leave page',
-	},
-})
-
-const modal = ref<InstanceType<typeof NewModal>>()
-let resolvePromise: ((value: boolean) => void) | null = null
-
-function prompt(): Promise<boolean> {
-	return new Promise((resolve) => {
-		resolvePromise = resolve
-		modal.value?.show()
-	})
-}
-
-function leave() {
-	modal.value?.hide()
-	resolvePromise?.(true)
-	resolvePromise = null
-}
-
-function cancel() {
-	modal.value?.hide()
-	resolvePromise?.(false)
-	resolvePromise = null
-}
-
-defineExpose({ prompt })
-</script>
diff --git a/packages/ui/src/layouts/shared/content-tab/index.ts b/packages/ui/src/layouts/shared/content-tab/index.ts
index e2085b11d4..0868bc6fc9 100644
--- a/packages/ui/src/layouts/shared/content-tab/index.ts
+++ b/packages/ui/src/layouts/shared/content-tab/index.ts
@@ -4,7 +4,6 @@ export { default as ContentCardTable } from './components/ContentCardTable.vue'
 export { default as ContentModpackCard } from './components/ContentModpackCard.vue'
 export { default as ConfirmBulkUpdateModal } from './components/modals/ConfirmBulkUpdateModal.vue'
 export { default as ConfirmDeletionModal } from './components/modals/ConfirmDeletionModal.vue'
-export { default as ConfirmLeaveModal } from './components/modals/ConfirmLeaveModal.vue'
 export { default as ConfirmModpackUpdateModal } from './components/modals/ConfirmModpackUpdateModal.vue'
 export { default as ConfirmReinstallModal } from './components/modals/ConfirmReinstallModal.vue'
 export { default as ConfirmRepairModal } from './components/modals/ConfirmRepairModal.vue'
@@ -22,3 +21,4 @@ export { default as ContentCardLayout } from './layout.vue'
 export { default as ContentPageLayout } from './layout.vue'
 export * from './providers'
 export * from './types'
+export { default as ConfirmLeaveModal } from '#ui/components/modal/ConfirmLeaveModal.vue'
diff --git a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
index f648eaa254..7f99fe091b 100644
--- a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
+++ b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
@@ -25,15 +25,7 @@ export interface ContentModpackData {
 	disabledText?: string
 }
 
-export interface UploadState {
-	isUploading: boolean
-	currentFileName: string | null
-	currentFileProgress: number
-	uploadedBytes: number
-	totalBytes: number
-	completedFiles: number
-	totalFiles: number
-}
+export type { UploadState } from '@modrinth/api-client'
 
 export interface ContentManagerContext {
 	// Data
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
new file mode 100644
index 0000000000..18d581fd25
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
@@ -0,0 +1,204 @@
+<template>
+	<Teleport to="#teleports">
+		<Transition
+			enter-active-class="transition duration-125 ease-out"
+			enter-from-class="transform scale-75 opacity-0"
+			enter-to-class="transform scale-100 opacity-100"
+			leave-active-class="transition duration-125 ease-in"
+			leave-from-class="transform scale-100 opacity-100"
+			leave-to-class="transform scale-75 opacity-0"
+		>
+			<div
+				v-if="visible"
+				ref="menuRef"
+				class="experimental-styles-within fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
+				:style="{ left: `${position.x}px`, top: `${position.y}px` }"
+				role="menu"
+				tabindex="-1"
+				@mousedown.stop
+			>
+				<ButtonStyled type="transparent">
+					<button
+						class="w-full !justify-start !whitespace-nowrap"
+						role="menuitem"
+						@click="handleCopyFilename"
+					>
+						<ClipboardCopyIcon class="size-5" />
+						{{ formatMessage(messages.copyFilename) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled type="transparent">
+					<button
+						class="w-full !justify-start !whitespace-nowrap"
+						role="menuitem"
+						@click="handleCopyPath"
+					>
+						<ClipboardCopyIcon class="size-5" />
+						{{ formatMessage(messages.copyFullPath) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="ctx.openInFolder" type="transparent">
+					<button
+						class="w-full !justify-start !whitespace-nowrap"
+						role="menuitem"
+						@click="handleOpenInFolder"
+					>
+						<FolderOpenIcon class="size-5" />
+						{{ formatMessage(messages.openInFolder) }}
+					</button>
+				</ButtonStyled>
+				<div class="h-px w-full bg-surface-5" />
+				<template v-for="(option, index) in menuOptions" :key="index">
+					<div
+						v-if="'divider' in option && option.divider && option.shown !== false"
+						class="h-px w-full bg-surface-5"
+					/>
+					<ButtonStyled
+						v-else-if="'id' in option && option.shown !== false"
+						type="transparent"
+						:color="option.color"
+					>
+						<button
+							v-tooltip="option.tooltip"
+							:disabled="option.disabled"
+							class="w-full !justify-start !whitespace-nowrap"
+							role="menuitem"
+							@click="handleOptionClick(option)"
+						>
+							<slot :name="option.id" />
+						</button>
+					</ButtonStyled>
+				</template>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import { ClipboardCopyIcon, FolderOpenIcon } from '@modrinth/assets'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+
+import { injectFileManager } from '../providers/file-manager'
+import type { FileContextMenuOption, FileItem } from '../types'
+
+const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+const ctx = injectFileManager()
+
+const messages = defineMessages({
+	copyFilename: {
+		id: 'files.context-menu.copy-filename',
+		defaultMessage: 'Copy filename',
+	},
+	copyFullPath: {
+		id: 'files.context-menu.copy-full-path',
+		defaultMessage: 'Copy full path',
+	},
+	copiedFilename: {
+		id: 'files.context-menu.copied-filename',
+		defaultMessage: 'Copied filename',
+	},
+	copiedPath: {
+		id: 'files.context-menu.copied-path',
+		defaultMessage: 'Copied path',
+	},
+	openInFolder: {
+		id: 'files.context-menu.open-in-folder',
+		defaultMessage: 'Open in folder',
+	},
+})
+
+const visible = ref(false)
+const menuRef = ref<HTMLElement>()
+const position = ref({ x: 0, y: 0 })
+const currentItem = ref<FileItem | null>(null)
+const menuOptions = ref<FileContextMenuOption[]>([])
+
+function show(item: FileItem, x: number, y: number, options: typeof menuOptions.value) {
+	currentItem.value = item
+	menuOptions.value = options
+	position.value = { x, y }
+	visible.value = true
+
+	nextTick(() => {
+		if (!menuRef.value) return
+		const rect = menuRef.value.getBoundingClientRect()
+		const padding = 10
+		if (rect.right > window.innerWidth - padding) {
+			position.value.x = Math.max(padding, x - rect.width)
+		}
+		if (rect.bottom > window.innerHeight - padding) {
+			position.value.y = Math.max(padding, y - rect.height)
+		}
+	})
+}
+
+function hide() {
+	visible.value = false
+	currentItem.value = null
+}
+
+function handleCopyFilename() {
+	if (!currentItem.value) return
+	navigator.clipboard.writeText(currentItem.value.name)
+	addNotification({ title: formatMessage(messages.copiedFilename), type: 'success' })
+	hide()
+}
+
+function getFullPath() {
+	if (!currentItem.value) return ''
+	const basePath = ctx.basePath?.value
+	const itemPath = currentItem.value.path
+	return basePath ? `${basePath}/${itemPath}`.replace(/\/+/g, '/') : itemPath
+}
+
+function handleCopyPath() {
+	if (!currentItem.value) return
+	navigator.clipboard.writeText(getFullPath())
+	addNotification({ title: formatMessage(messages.copiedPath), type: 'success' })
+	hide()
+}
+
+function handleOpenInFolder() {
+	if (!currentItem.value) return
+	ctx.openInFolder?.(getFullPath())
+	hide()
+}
+
+function handleOptionClick(option: { action?: () => void }) {
+	option.action?.()
+	hide()
+}
+
+function onClickOutside(event: MouseEvent) {
+	if (menuRef.value && !menuRef.value.contains(event.target as Node)) {
+		hide()
+	}
+}
+
+function onEscape(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		hide()
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('mousedown', onClickOutside)
+	document.addEventListener('keydown', onEscape)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('mousedown', onClickOutside)
+	document.removeEventListener('keydown', onEscape)
+})
+
+watch(visible, (v) => {
+	if (!v) currentItem.value = null
+})
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/components/servers/files/explorer/FileManagerError.vue b/packages/ui/src/layouts/shared/files-tab/components/FileManagerError.vue
similarity index 64%
rename from packages/ui/src/components/servers/files/explorer/FileManagerError.vue
rename to packages/ui/src/layouts/shared/files-tab/components/FileManagerError.vue
index d609c92358..361a3b0818 100644
--- a/packages/ui/src/components/servers/files/explorer/FileManagerError.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileManagerError.vue
@@ -10,13 +10,13 @@
 				<ButtonStyled>
 					<button size="sm" @click="$emit('refetch')">
 						<RefreshCwIcon class="h-5 w-5" />
-						Try again
+						{{ formatMessage(messages.tryAgain) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled>
 					<button size="sm" @click="$emit('home')">
 						<HomeIcon class="h-5 w-5" />
-						Go to home folder
+						{{ formatMessage(messages.goToHome) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -26,7 +26,22 @@
 
 <script setup lang="ts">
 import { FileIcon, HomeIcon, RefreshCwIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	tryAgain: {
+		id: 'files.error.try-again',
+		defaultMessage: 'Try again',
+	},
+	goToHome: {
+		id: 'files.error.go-to-home',
+		defaultMessage: 'Go to home folder',
+	},
+})
 
 defineProps<{
 	title: string
diff --git a/packages/ui/src/components/servers/files/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
similarity index 60%
rename from packages/ui/src/components/servers/files/FileNavbar.vue
rename to packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index e8993204ee..1f5bd2a5b8 100644
--- a/packages/ui/src/components/servers/files/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -1,24 +1,24 @@
 <template>
 	<header
 		class="flex select-none flex-col justify-between gap-2 sm:flex-row sm:items-center"
-		aria-label="File navigation"
+		:aria-label="formatMessage(messages.fileNavigation)"
 	>
 		<nav
-			aria-label="Breadcrumb navigation"
+			:aria-label="formatMessage(messages.breadcrumbNavigation)"
 			class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
 		>
 			<ol class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
 				<li class="mr-4 flex-shrink-0">
 					<ButtonStyled circular>
 						<button
-							v-tooltip="'Back to home'"
+							v-tooltip="formatMessage(messages.backToHome)"
 							type="button"
 							class="!size-10 bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 							@click="$emit('navigateHome')"
 							@mouseenter="$emit('prefetchHome')"
 						>
 							<HomeIcon />
-							<span class="sr-only">Home</span>
+							<span class="sr-only">{{ formatMessage(messages.home) }}</span>
 						</button>
 					</ButtonStyled>
 				</li>
@@ -57,7 +57,7 @@
 								</div>
 							</li>
 						</TransitionGroup>
-						<li v-if="isEditing && editingFileName" class="flex items-center px-3 text-sm">
+						<li v-if="isEditing && editingFileName" class="flex items-center px-3 text-base">
 							<span class="font-semibold !text-contrast" aria-current="location">
 								{{ editingFileName }}
 							</span>
@@ -75,7 +75,9 @@
 				type="search"
 				name="search"
 				autocomplete="off"
-				placeholder="Search files"
+				:placeholder="formatMessage(messages.searchFiles)"
+				class="!h-10"
+				input-class="!h-10"
 				wrapper-class="w-full sm:w-[280px]"
 				@update:model-value="$emit('update:searchQuery', $event)"
 			/>
@@ -83,11 +85,11 @@
 			<ButtonStyled v-if="showRefreshButton" type="outlined">
 				<button
 					type="button"
-					class="flex h-10 items-center gap-2 !border-[1px] !border-surface-5"
+					class="flex !h-10 items-center gap-2 !border-[1px] !border-surface-5"
 					@click="$emit('refresh')"
 				>
 					<RefreshCwIcon aria-hidden="true" class="h-5 w-5" />
-					Refresh
+					{{ formatMessage(commonMessages.refreshButton) }}
 				</button>
 			</ButtonStyled>
 
@@ -96,7 +98,7 @@
 					:dropdown-id="`create-new-${baseId}`"
 					position="bottom"
 					direction="left"
-					aria-label="Create new..."
+					:aria-label="formatMessage(messages.createNew)"
 					:disabled="disabled"
 					:tooltip="disabled ? disabledTooltip : undefined"
 					class="!h-10 justify-center gap-2 !border-[1px] !border-surface-5"
@@ -104,60 +106,55 @@
 						{ id: 'file', action: () => $emit('create', 'file') },
 						{ id: 'directory', action: () => $emit('create', 'directory') },
 						{ id: 'upload', action: () => $emit('upload') },
-						{ divider: true },
+						{ divider: true, shown: showInstallFromUrl ?? false },
 						{ id: 'upload-zip', shown: false, action: () => $emit('uploadZip') },
-						{ id: 'install-from-url', action: () => $emit('unzipFromUrl', false) },
-						{ id: 'install-cf-pack', action: () => $emit('unzipFromUrl', true) },
+						{
+							id: 'install-from-url',
+							shown: showInstallFromUrl ?? false,
+							action: () => $emit('unzipFromUrl', false),
+						},
+						{
+							id: 'install-cf-pack',
+							shown: showInstallFromUrl ?? false,
+							action: () => $emit('unzipFromUrl', true),
+						},
 					]"
 				>
 					<PlusIcon aria-hidden="true" class="h-5 w-5" />
 					<DropdownIcon aria-hidden="true" class="h-5 w-5" />
-					<template #file> <BoxIcon aria-hidden="true" /> New file </template>
-					<template #directory> <FolderOpenIcon aria-hidden="true" /> New folder </template>
-					<template #upload> <UploadIcon aria-hidden="true" /> Upload file </template>
+					<template #file>
+						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newFile) }}
+					</template>
+					<template #directory>
+						<FolderOpenIcon aria-hidden="true" /> {{ formatMessage(messages.newFolder) }}
+					</template>
+					<template #upload>
+						<UploadIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFile) }}
+					</template>
 					<template #upload-zip>
-						<FileArchiveIcon aria-hidden="true" /> Upload from .zip file
+						<FileArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZip) }}
 					</template>
 					<template #install-from-url>
-						<LinkIcon aria-hidden="true" /> Upload from .zip URL
+						<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZipUrl) }}
 					</template>
 					<template #install-cf-pack>
-						<CurseForgeIcon aria-hidden="true" /> Install CurseForge pack
+						<CurseForgeIcon aria-hidden="true" />
+						{{ formatMessage(messages.installCurseForgePack) }}
 					</template>
 				</OverflowMenu>
 			</ButtonStyled>
 		</div>
 
-		<div v-else-if="!isEditingImage" class="flex gap-2">
+		<div v-else-if="!isEditingImage && isLogFile" class="flex gap-2">
 			<Button
-				v-if="isLogFile"
-				v-tooltip="'Share to mclo.gs'"
+				v-tooltip="formatMessage(messages.shareToMclogs)"
 				icon-only
 				transparent
-				aria-label="Share to mclo.gs"
+				:aria-label="formatMessage(messages.shareToMclogs)"
 				@click="$emit('share')"
 			>
 				<ShareIcon />
 			</Button>
-			<ButtonStyled type="transparent">
-				<TeleportOverflowMenu
-					aria-label="Save file"
-					:options="[
-						{ id: 'save', action: () => $emit('save') },
-						{ id: 'save-as', action: () => $emit('saveAs') },
-						{ id: 'save-restart', action: () => $emit('saveRestart') },
-					]"
-				>
-					<SaveIcon aria-hidden="true" />
-					<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-					<template #save> <SaveIcon aria-hidden="true" /> Save </template>
-					<template #save-as> <SaveIcon aria-hidden="true" /> Save as... </template>
-					<template #save-restart>
-						<RefreshCwIcon aria-hidden="true" />
-						Save & restart
-					</template>
-				</TeleportOverflowMenu>
-			</ButtonStyled>
 		</div>
 	</header>
 </template>
@@ -174,15 +171,75 @@ import {
 	LinkIcon,
 	PlusIcon,
 	RefreshCwIcon,
-	SaveIcon,
 	SearchIcon,
 	ShareIcon,
 	UploadIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, OverflowMenu, StyledInput } from '@modrinth/ui'
 import { computed } from 'vue'
 
-import TeleportOverflowMenu from './explorer/TeleportOverflowMenu.vue'
+import Button from '#ui/components/base/Button.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	fileNavigation: {
+		id: 'files.navbar.file-navigation',
+		defaultMessage: 'File navigation',
+	},
+	breadcrumbNavigation: {
+		id: 'files.navbar.breadcrumb-navigation',
+		defaultMessage: 'Breadcrumb navigation',
+	},
+	backToHome: {
+		id: 'files.navbar.back-to-home',
+		defaultMessage: 'Back to home',
+	},
+	home: {
+		id: 'files.navbar.home',
+		defaultMessage: 'Home',
+	},
+	searchFiles: {
+		id: 'files.navbar.search-files',
+		defaultMessage: 'Search files',
+	},
+	createNew: {
+		id: 'files.navbar.create-new',
+		defaultMessage: 'Create new...',
+	},
+	newFile: {
+		id: 'files.navbar.new-file',
+		defaultMessage: 'New file',
+	},
+	newFolder: {
+		id: 'files.navbar.new-folder',
+		defaultMessage: 'New folder',
+	},
+	uploadFile: {
+		id: 'files.navbar.upload-file',
+		defaultMessage: 'Upload file',
+	},
+	uploadFromZip: {
+		id: 'files.navbar.upload-from-zip',
+		defaultMessage: 'Upload from .zip file',
+	},
+	uploadFromZipUrl: {
+		id: 'files.navbar.upload-from-zip-url',
+		defaultMessage: 'Upload from .zip URL',
+	},
+	installCurseForgePack: {
+		id: 'files.navbar.install-curseforge-pack',
+		defaultMessage: 'Install CurseForge pack',
+	},
+	shareToMclogs: {
+		id: 'files.navbar.share-to-mclogs',
+		defaultMessage: 'Share to mclo.gs',
+	},
+})
 
 const props = defineProps<{
 	breadcrumbs: string[]
@@ -192,6 +249,7 @@ const props = defineProps<{
 	isEditingImage?: boolean
 	searchQuery: string
 	showRefreshButton?: boolean
+	showInstallFromUrl?: boolean
 	baseId: string
 	disabled?: boolean
 	disabledTooltip?: string
@@ -207,9 +265,6 @@ defineEmits<{
 	uploadZip: []
 	unzipFromUrl: [cf: boolean]
 	refresh: []
-	save: []
-	saveAs: []
-	saveRestart: []
 	share: []
 }>()
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue b/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
new file mode 100644
index 0000000000..d1ce22fe3f
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
@@ -0,0 +1,182 @@
+<template>
+	<Transition
+		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
+		enter-from-class="opacity-0 max-h-0"
+		enter-to-class="opacity-100 max-h-40"
+		leave-active-class="transition-all duration-200 ease-in overflow-hidden"
+		leave-from-class="opacity-100 max-h-40"
+		leave-to-class="opacity-0 max-h-0"
+	>
+		<Admonition v-if="ctx.uploadState?.value?.isUploading" type="info" class="mb-4">
+			<template #icon>
+				<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
+			</template>
+			<template #header>
+				{{
+					ctx.uploadingLabel
+						? ctx.uploadingLabel(
+								ctx.uploadState.value.completedFiles,
+								ctx.uploadState.value.totalFiles,
+							)
+						: formatMessage(messages.uploadingFiles, {
+								completed: ctx.uploadState.value.completedFiles,
+								total: ctx.uploadState.value.totalFiles,
+							})
+				}}
+				<span v-if="ctx.uploadState.value.currentFileName" class="font-normal text-secondary">
+					— {{ ctx.uploadState.value.currentFileName }}
+				</span>
+			</template>
+			<span class="text-secondary">
+				{{
+					formatMessage(messages.uploadProgress, {
+						uploaded: formatBytes(ctx.uploadState.value.uploadedBytes),
+						total: formatBytes(ctx.uploadState.value.totalBytes),
+						percent: Math.round(uploadOverallProgress * 100),
+					})
+				}}
+			</span>
+			<template v-if="ctx.cancelUpload" #top-right-actions>
+				<ButtonStyled type="outlined" color="blue">
+					<button class="!border" @click="ctx.cancelUpload?.()">
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+			</template>
+			<template #progress>
+				<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
+			</template>
+		</Admonition>
+	</Transition>
+	<TransitionGroup
+		name="fs-op"
+		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
+		enter-from-class="opacity-0 max-h-0"
+		enter-to-class="opacity-100 max-h-40"
+		leave-active-class="transition-all duration-200 ease-in overflow-hidden"
+		leave-from-class="opacity-100 max-h-40"
+		leave-to-class="opacity-0 max-h-0"
+	>
+		<Admonition
+			v-for="op in activeOperations"
+			:key="`fs-op-${op.op}-${op.src}`"
+			:type="op.state === 'done' ? 'success' : op.state?.startsWith('fail') ? 'critical' : 'info'"
+			class="mb-4"
+		>
+			<template #icon="{ iconClass }">
+				<PackageOpenIcon :class="iconClass" />
+			</template>
+			<template #header>
+				{{
+					formatMessage(messages.extracting, {
+						source: op.src.includes('https://') ? formatMessage(messages.modpackFromUrl) : op.src,
+					})
+				}}
+				<span v-if="op.state === 'done'" class="font-normal text-green">
+					— {{ formatMessage(messages.done) }}</span
+				>
+				<span v-else-if="op.state?.startsWith('fail')" class="font-normal text-red">
+					— {{ formatMessage(messages.failed) }}</span
+				>
+			</template>
+			<span class="text-secondary">
+				{{
+					formatMessage(messages.extracted, {
+						size: 'bytes_processed' in op ? formatBytes(op.bytes_processed ?? 0) : '0 B',
+					})
+				}}
+				<template v-if="'current_file' in op && op.current_file">
+					— {{ op.current_file?.split('/')?.pop() }}
+				</template>
+			</span>
+			<template v-if="op.id && ctx.dismissOperation" #top-right-actions>
+				<ButtonStyled
+					v-if="op.state !== 'done' && !op.state?.startsWith('fail')"
+					type="outlined"
+					color="blue"
+				>
+					<button class="!border" @click="ctx.dismissOperation?.(op.id!, 'cancel')">
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled
+					v-if="op.state === 'done' || op.state?.startsWith('fail')"
+					circular
+					type="transparent"
+					hover-color-fill="background"
+					:color="op.state === 'done' ? 'green' : 'red'"
+				>
+					<button @click="ctx.dismissOperation?.(op.id!, 'dismiss')">
+						<XIcon />
+					</button>
+				</ButtonStyled>
+			</template>
+			<template #progress>
+				<ProgressBar
+					:progress="'progress' in op ? (op.progress ?? 0) : 0"
+					:max="1"
+					:color="op.state === 'done' ? 'green' : op.state?.startsWith('fail') ? 'red' : 'blue'"
+					:waiting="op.state === 'queued' || !op.progress || op.progress === 0"
+					full-width
+				/>
+			</template>
+		</Admonition>
+	</TransitionGroup>
+</template>
+
+<script setup lang="ts">
+import { PackageOpenIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import { formatBytes } from '@modrinth/utils'
+import { computed } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import ProgressBar from '#ui/components/base/ProgressBar.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { injectFileManager } from '../providers/file-manager'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	uploadingFiles: {
+		id: 'files.operations.uploading-files',
+		defaultMessage: 'Uploading files ({completed}/{total})',
+	},
+	uploadProgress: {
+		id: 'files.operations.upload-progress',
+		defaultMessage: '{uploaded} / {total} ({percent}%)',
+	},
+	extracting: {
+		id: 'files.operations.extracting',
+		defaultMessage: 'Extracting {source}',
+	},
+	modpackFromUrl: {
+		id: 'files.operations.modpack-from-url',
+		defaultMessage: 'modpack from URL',
+	},
+	done: {
+		id: 'files.operations.done',
+		defaultMessage: 'Done',
+	},
+	failed: {
+		id: 'files.operations.failed',
+		defaultMessage: 'Failed',
+	},
+	extracted: {
+		id: 'files.operations.extracted',
+		defaultMessage: '{size} extracted',
+	},
+})
+
+const ctx = injectFileManager()
+
+const activeOperations = computed(() => ctx.activeOperations?.value ?? [])
+
+const uploadOverallProgress = computed(() => {
+	const state = ctx.uploadState?.value
+	if (!state || !state.isUploading || state.totalFiles === 0) return 0
+	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
new file mode 100644
index 0000000000..490ee14d71
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
@@ -0,0 +1,136 @@
+<template>
+	<div
+		aria-hidden="true"
+		class="sticky top-0 z-10 flex h-12 w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-4 font-medium transition-[border-radius] duration-100"
+		:class="
+			isStuck
+				? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
+				: 'rounded-t-[20px]'
+		"
+	>
+		<div class="flex flex-1 items-center gap-3">
+			<Checkbox
+				:model-value="allSelected"
+				:indeterminate="someSelected && !allSelected"
+				@update:model-value="$emit('toggle-all')"
+			/>
+			<button
+				class="flex appearance-none items-center gap-1.5 border-0 bg-transparent p-0 font-semibold hover:text-primary"
+				:class="sortField === 'name' ? 'text-contrast' : 'text-secondary'"
+				@click="$emit('sort', 'name')"
+			>
+				<span>{{ formatMessage(messages.name) }}</span>
+				<ChevronUpIcon
+					v-if="sortField === 'name' && !sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+				<ChevronDownIcon
+					v-if="sortField === 'name' && sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+			</button>
+		</div>
+		<div class="flex shrink-0 items-center gap-4 @[800px]:gap-12">
+			<button
+				class="hidden w-[100px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[800px]:flex"
+				:class="sortField === 'size' ? 'text-contrast' : 'text-secondary'"
+				@click="$emit('sort', 'size')"
+			>
+				<span class="ml-2">{{ formatMessage(messages.size) }}</span>
+				<ChevronUpIcon
+					v-if="sortField === 'size' && !sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+				<ChevronDownIcon
+					v-if="sortField === 'size' && sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+			</button>
+			<button
+				class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[800px]:flex"
+				:class="sortField === 'created' ? 'text-contrast' : 'text-secondary'"
+				@click="$emit('sort', 'created')"
+			>
+				<span class="ml-2">{{ formatMessage(messages.created) }}</span>
+				<ChevronUpIcon
+					v-if="sortField === 'created' && !sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+				<ChevronDownIcon
+					v-if="sortField === 'created' && sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+			</button>
+			<button
+				class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[800px]:flex"
+				:class="sortField === 'modified' ? 'text-contrast' : 'text-secondary'"
+				@click="$emit('sort', 'modified')"
+			>
+				<span class="ml-2">{{ formatMessage(messages.modified) }}</span>
+				<ChevronUpIcon
+					v-if="sortField === 'modified' && !sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+				<ChevronDownIcon
+					v-if="sortField === 'modified' && sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+			</button>
+			<span class="min-w-[51px] shrink-0 text-right font-semibold text-secondary">{{
+				formatMessage(commonMessages.actionsLabel)
+			}}</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+
+import Checkbox from '#ui/components/base/Checkbox.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import type { FileSortField } from '../types'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	name: {
+		id: 'files.table-header.name',
+		defaultMessage: 'Name',
+	},
+	size: {
+		id: 'files.table-header.size',
+		defaultMessage: 'Size',
+	},
+	created: {
+		id: 'files.table-header.created',
+		defaultMessage: 'Created',
+	},
+	modified: {
+		id: 'files.table-header.modified',
+		defaultMessage: 'Modified',
+	},
+})
+
+defineProps<{
+	sortField: FileSortField
+	sortDesc: boolean
+	allSelected: boolean
+	someSelected: boolean
+	isStuck: boolean
+}>()
+
+defineEmits<{
+	sort: [field: FileSortField]
+	'toggle-all': []
+}>()
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
new file mode 100644
index 0000000000..cf655b5b1f
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
@@ -0,0 +1,383 @@
+<template>
+	<li
+		role="button"
+		:class="[containerClasses, isDragSource ? 'opacity-50' : '']"
+		tabindex="0"
+		:data-file-path="path"
+		:data-file-type="type"
+		@click="selectItem"
+		@contextmenu="openContextMenu"
+		@keydown="(e) => e.key === 'Enter' && selectItem()"
+		@mouseenter="handleMouseEnter"
+		@pointerdown="handlePointerDown"
+	>
+		<div class="pointer-events-none flex flex-1 items-center gap-3 truncate">
+			<Checkbox
+				class="pointer-events-auto"
+				:model-value="selected"
+				@click.stop
+				@update:model-value="emit('toggle-select')"
+			/>
+			<div class="pointer-events-none flex size-5 items-center justify-center">
+				<component
+					:is="iconComponent"
+					class="size-5 group-hover:text-contrast group-focus:text-contrast"
+				/>
+			</div>
+			<div class="pointer-events-none flex flex-col truncate">
+				<span
+					class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast"
+				>
+					{{ name }}
+				</span>
+			</div>
+		</div>
+		<div class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 @[800px]:gap-12">
+			<span class="hidden w-[100px] text-nowrap text-sm text-secondary @[800px]:block">
+				{{ formattedSize }}
+			</span>
+			<span class="hidden w-[160px] text-nowrap text-sm text-secondary @[800px]:block">
+				{{ formattedCreationDate }}
+			</span>
+			<span class="hidden w-[160px] text-nowrap text-sm text-secondary @[800px]:block">
+				{{ formattedModifiedDate }}
+			</span>
+			<div class="flex min-w-[51px] shrink-0 items-center justify-end">
+				<ButtonStyled circular type="transparent">
+					<TeleportOverflowMenu :options="menuOptions">
+						<MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
+						<template #copy-filename
+							><ClipboardCopyIcon /> {{ formatMessage(messages.copyFilename) }}</template
+						>
+						<template #copy-full-path
+							><ClipboardCopyIcon /> {{ formatMessage(messages.copyFullPath) }}</template
+						>
+						<template #open-in-folder
+							><FolderOpenIcon /> {{ formatMessage(messages.openInFolder) }}</template
+						>
+						<template #extract
+							><PackageOpenIcon /> {{ formatMessage(messages.extractLabel) }}</template
+						>
+						<template #rename><EditIcon /> {{ formatMessage(messages.renameLabel) }}</template>
+						<template #move><RightArrowIcon /> {{ formatMessage(messages.moveLabel) }}</template>
+						<template #download
+							><DownloadIcon />
+							{{
+								ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton)
+							}}</template
+						>
+						<template #delete
+							><TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}</template
+						>
+					</TeleportOverflowMenu>
+				</ButtonStyled>
+			</div>
+		</div>
+	</li>
+</template>
+
+<script setup lang="ts">
+import {
+	BoxIcon,
+	BracesIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
+	EditIcon,
+	FolderCogIcon,
+	FolderOpenIcon,
+	GlassesIcon,
+	GlobeIcon,
+	MoreHorizontalIcon,
+	PackageOpenIcon,
+	PaintbrushIcon,
+	RightArrowIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Checkbox from '#ui/components/base/Checkbox.vue'
+import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
+import { useFormatDateTime } from '#ui/composables/format-date-time'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import { getFileExtensionIcon } from '#ui/utils/auto-icons'
+import { commonMessages } from '#ui/utils/common-messages'
+import {
+	getFileExtension,
+	isEditableFile as isEditableFileExt,
+	isImageFile,
+} from '#ui/utils/file-extensions'
+
+import {
+	fileDragActive,
+	fileDragData,
+	fileDragTarget,
+	startFileDrag,
+	wasRecentDrag,
+} from '../composables/file-drag-state'
+import { injectFileManager } from '../providers/file-manager'
+import type { FileItem } from '../types'
+
+const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+const ctx = injectFileManager()
+
+const messages = defineMessages({
+	extractLabel: {
+		id: 'files.row.extract',
+		defaultMessage: 'Extract',
+	},
+	renameLabel: {
+		id: 'files.row.rename',
+		defaultMessage: 'Rename',
+	},
+	moveLabel: {
+		id: 'files.row.move',
+		defaultMessage: 'Move',
+	},
+	copyFilename: {
+		id: 'files.row.copy-filename',
+		defaultMessage: 'Copy filename',
+	},
+	copyFullPath: {
+		id: 'files.row.copy-full-path',
+		defaultMessage: 'Copy full path',
+	},
+	copiedFilename: {
+		id: 'files.row.copied-filename',
+		defaultMessage: 'Copied filename',
+	},
+	copiedPath: {
+		id: 'files.row.copied-path',
+		defaultMessage: 'Copied path',
+	},
+	openInFolder: {
+		id: 'files.row.open-in-folder',
+		defaultMessage: 'Open in folder',
+	},
+	itemCount: {
+		id: 'files.row.item-count',
+		defaultMessage: '{count, plural, one {# item} other {# items}}',
+	},
+})
+
+const props = defineProps<
+	FileItem & {
+		index: number
+		isLast: boolean
+		selected: boolean
+		writeDisabled?: boolean
+		writeDisabledTooltip?: string
+	}
+>()
+
+const emit = defineEmits<{
+	(
+		e: 'rename' | 'move' | 'download' | 'delete' | 'edit' | 'extract' | 'hover' | 'navigate',
+		item: Pick<FileItem, 'name' | 'type' | 'path'>,
+	): void
+	(
+		e: 'moveDirectTo',
+		item: Pick<FileItem, 'name' | 'type' | 'path'> & { destination: string },
+	): void
+	(e: 'contextmenu', x: number, y: number): void
+	(e: 'toggle-select'): void
+}>()
+
+const isDropTarget = computed(
+	() => fileDragActive.value && fileDragTarget.value === props.path && props.type === 'directory',
+)
+const isDragSource = computed(() => fileDragActive.value && fileDragData.value?.path === props.path)
+
+const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
+
+const formatDateTime = useFormatDateTime({
+	year: '2-digit',
+	month: '2-digit',
+	day: '2-digit',
+	hour: 'numeric',
+	minute: 'numeric',
+})
+
+const containerClasses = computed(() => {
+	const dropTarget = isDropTarget.value
+	return [
+		'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-4 pl-3 pr-4 py-3 focus:!outline-none',
+		dropTarget
+			? '!bg-brand-highlight'
+			: props.selected
+				? 'bg-surface-2.5'
+				: props.index % 2 === 0
+					? 'bg-surface-2'
+					: 'bg-surface-1.5',
+		props.isLast ? 'rounded-b-[20px]' : '',
+		isEditableFile.value || props.type === 'directory' ? 'cursor-pointer hover:bg-surface-2.5' : '',
+		'transition-colors duration-100 focus:!outline-none',
+	]
+})
+
+const fileExtension = computed(() => getFileExtension(props.name))
+
+const isZip = computed(() => fileExtension.value === 'zip')
+
+function getFullPath() {
+	const basePath = ctx.basePath?.value
+	return basePath ? `${basePath}/${props.path}`.replace(/\/+/g, '/') : props.path
+}
+
+const menuOptions = computed(() => {
+	const item = { name: props.name, type: props.type, path: props.path }
+	const wd = props.writeDisabled
+	const wdTooltip = props.writeDisabledTooltip
+	return [
+		{
+			id: 'copy-filename',
+			icon: ClipboardCopyIcon,
+			action: () => {
+				navigator.clipboard.writeText(props.name)
+				addNotification({ title: formatMessage(messages.copiedFilename), type: 'success' })
+			},
+		},
+		{
+			id: 'copy-full-path',
+			icon: ClipboardCopyIcon,
+			action: () => {
+				navigator.clipboard.writeText(getFullPath())
+				addNotification({ title: formatMessage(messages.copiedPath), type: 'success' })
+			},
+		},
+		{
+			id: 'open-in-folder',
+			icon: FolderOpenIcon,
+			shown: !!ctx.openInFolder,
+			action: () => ctx.openInFolder?.(getFullPath()),
+		},
+		{ divider: true },
+		{
+			id: 'extract',
+			shown: isZip.value,
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => emit('extract', item),
+		},
+		{
+			divider: true,
+			shown: isZip.value,
+		},
+		{
+			id: 'rename',
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => emit('rename', item),
+		},
+		{
+			id: 'move',
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => emit('move', item),
+		},
+		{
+			id: 'download',
+			action: () => emit('download', item),
+			shown: props.type !== 'directory',
+		},
+		{
+			id: 'delete',
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => emit('delete', item),
+			color: 'red' as const,
+		},
+	]
+})
+
+const iconComponent = computed(() => {
+	if (props.type === 'directory') {
+		if (props.name === 'config') return FolderCogIcon
+		if (props.name === 'world' || props.name === 'saves') return GlobeIcon
+		if (props.name === 'mods') return BoxIcon
+		if (props.name === 'resourcepacks') return PaintbrushIcon
+		if (props.name === 'shaderpacks') return GlassesIcon
+		if (props.name === 'datapacks') return BracesIcon
+		return FolderOpenIcon
+	}
+
+	return getFileExtensionIcon(fileExtension.value)
+})
+
+const formattedModifiedDate = computed(() => {
+	const date = new Date(props.modified * 1000)
+	return formatDateTime(date)
+})
+
+const formattedCreationDate = computed(() => {
+	const date = new Date(props.created * 1000)
+	return formatDateTime(date)
+})
+
+const isEditableFile = computed(() => {
+	if (props.type === 'file') {
+		const ext = fileExtension.value
+		return !props.name.includes('.') || isEditableFileExt(ext) || isImageFile(ext)
+	}
+	return false
+})
+
+const formattedSize = computed(() => {
+	if (props.type === 'directory') {
+		return formatMessage(messages.itemCount, { count: props.count ?? 0 })
+	}
+
+	if (props.size === undefined) return ''
+	const bytes = props.size
+	if (bytes === 0) return '0 B'
+
+	const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+	const size = (bytes / Math.pow(1024, exponent)).toFixed(2)
+	return `${size} ${units[exponent]}`
+})
+
+function openContextMenu(event: MouseEvent) {
+	event.preventDefault()
+	emit('contextmenu', event.clientX, event.clientY)
+}
+
+function handleMouseEnter() {
+	emit('hover', { name: props.name, type: props.type, path: props.path })
+}
+
+const isNavigating = ref(false)
+
+function selectItem() {
+	if (isNavigating.value || wasRecentDrag()) return
+	isNavigating.value = true
+
+	const item = { name: props.name, type: props.type, path: props.path }
+	if (props.type === 'directory') {
+		emit('navigate', item)
+	} else if (props.type === 'file' && isEditableFile.value) {
+		emit('edit', item)
+	}
+
+	setTimeout(() => {
+		isNavigating.value = false
+	}, 500)
+}
+
+function handlePointerDown(e: PointerEvent) {
+	if (e.button !== 0) return
+	startFileDrag(
+		{ name: props.name, type: props.type, path: props.path },
+		e,
+		(source, destination) => {
+			emit('moveDirectTo', {
+				name: source.name,
+				type: source.type,
+				path: source.path,
+				destination,
+			})
+		},
+	)
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
new file mode 100644
index 0000000000..e3f4ada2c9
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
@@ -0,0 +1,288 @@
+<template>
+	<div
+		ref="editorContainer"
+		class="flex flex-col overflow-hidden rounded-[20px] border border-solid border-surface-4 shadow-sm"
+	>
+		<component
+			:is="props.editorComponent"
+			v-if="!isEditingImage && !isLoading && props.editorComponent"
+			v-model:value="fileContent"
+			:lang="editorLanguage"
+			theme="modrinth"
+			:print-margin="false"
+			:style="{ height: editorHeight, fontSize: '0.875rem' }"
+			class="ace-modrinth rounded-[20px]"
+			@init="onEditorInit"
+		/>
+		<FileImageViewer v-else-if="isEditingImage && imagePreview" :image-blob="imagePreview" />
+		<div
+			v-else-if="isLoading || !props.editorComponent"
+			class="flex items-center justify-center rounded-[20px] bg-bg-raised"
+			:style="{ height: editorHeight }"
+		>
+			<SpinnerIcon class="h-8 w-8 animate-spin text-secondary" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import { getEditorLanguage, getFileExtension, isImageFile } from '#ui/utils/file-extensions'
+
+import { injectFileManager } from '../../providers/file-manager'
+import type { EditingFile } from '../../types'
+import FileImageViewer from './FileImageViewer.vue'
+
+interface MclogsResponse {
+	success: boolean
+	url?: string
+	error?: string
+}
+
+const props = defineProps<{
+	file: EditingFile | null
+	editorComponent: Component | null
+}>()
+
+const emit = defineEmits<{
+	close: []
+}>()
+
+const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+const ctx = injectFileManager()
+
+const messages = defineMessages({
+	failedToOpenTitle: {
+		id: 'files.editor.failed-to-open-title',
+		defaultMessage: 'Failed to open file',
+	},
+	failedToOpenText: {
+		id: 'files.editor.failed-to-open-text',
+		defaultMessage: 'Could not load file contents.',
+	},
+	fileSavedTitle: {
+		id: 'files.editor.file-saved-title',
+		defaultMessage: 'File saved',
+	},
+	fileSavedText: {
+		id: 'files.editor.file-saved-text',
+		defaultMessage: 'Your file has been saved.',
+	},
+	saveFailedTitle: {
+		id: 'files.editor.save-failed-title',
+		defaultMessage: 'Save failed',
+	},
+	saveFailedText: {
+		id: 'files.editor.save-failed-text',
+		defaultMessage: 'Could not save the file.',
+	},
+	logUrlCopiedTitle: {
+		id: 'files.editor.log-url-copied-title',
+		defaultMessage: 'Log URL copied',
+	},
+	logUrlCopiedText: {
+		id: 'files.editor.log-url-copied-text',
+		defaultMessage: 'Your log file URL has been copied to your clipboard.',
+	},
+	failedToShareTitle: {
+		id: 'files.editor.failed-to-share-title',
+		defaultMessage: 'Failed to share file',
+	},
+	failedToShareText: {
+		id: 'files.editor.failed-to-share-text',
+		defaultMessage: 'Could not upload to mclo.gs.',
+	},
+})
+
+const fileContent = ref('')
+const originalContent = ref('')
+const isEditingImage = ref(false)
+const imagePreview = ref<Blob | null>(null)
+const isLoading = ref(false)
+const editorInstance = ref<unknown>(null)
+const editorContainer = ref<HTMLElement | null>(null)
+const editorHeight = ref('300px')
+
+function updateEditorHeight() {
+	if (editorContainer.value) {
+		const top = editorContainer.value.getBoundingClientRect().top
+		const padding = 24
+		editorHeight.value = `${Math.max(300, window.innerHeight - top - padding)}px`
+	}
+}
+
+onMounted(() => {
+	nextTick(updateEditorHeight)
+	window.addEventListener('resize', updateEditorHeight)
+})
+
+const editorLanguage = computed(() => {
+	const ext = getFileExtension(props.file?.name ?? '')
+	return getEditorLanguage(ext)
+})
+
+watch(
+	() => props.file,
+	async (newFile) => {
+		if (newFile) {
+			await loadFileContent(newFile)
+			nextTick(updateEditorHeight)
+		} else {
+			resetState()
+		}
+	},
+	{ immediate: true },
+)
+
+async function loadFileContent(file: { name: string; path: string }) {
+	isLoading.value = true
+	try {
+		window.scrollTo(0, 0)
+		const extension = getFileExtension(file.name)
+		const normalizedPath = file.path.startsWith('/') ? file.path : `/${file.path}`
+
+		if (isImageFile(extension)) {
+			const content = await ctx.readFileAsBlob(normalizedPath)
+			isEditingImage.value = true
+			imagePreview.value = content
+		} else {
+			isEditingImage.value = false
+			const content = await ctx.readFile(normalizedPath)
+			fileContent.value = content
+			originalContent.value = content
+		}
+	} catch (error) {
+		console.error('Error fetching file content:', error)
+		addNotification({
+			title: formatMessage(messages.failedToOpenTitle),
+			text: formatMessage(messages.failedToOpenText),
+			type: 'error',
+		})
+		emit('close')
+	} finally {
+		isLoading.value = false
+	}
+}
+
+const hasUnsavedChanges = computed(
+	() => !isEditingImage.value && !isLoading.value && fileContent.value !== originalContent.value,
+)
+
+function revertChanges() {
+	fileContent.value = originalContent.value
+}
+
+function resetState() {
+	fileContent.value = ''
+	originalContent.value = ''
+	isEditingImage.value = false
+	imagePreview.value = null
+}
+
+function onEditorInit(editor: {
+	commands: {
+		addCommand: (cmd: {
+			name: string
+			bindKey: { win: string; mac: string }
+			exec: () => void
+		}) => void
+	}
+}) {
+	editorInstance.value = editor
+
+	editor.commands.addCommand({
+		name: 'save',
+		bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
+		exec: () => saveFileContent(false),
+	})
+}
+
+async function saveFileContent(exit: boolean = false) {
+	if (!props.file) return
+
+	try {
+		const normalizedPath = props.file.path.startsWith('/') ? props.file.path : `/${props.file.path}`
+		await ctx.writeFile(normalizedPath, fileContent.value)
+
+		originalContent.value = fileContent.value
+
+		if (exit) {
+			emit('close')
+		}
+
+		addNotification({
+			title: formatMessage(messages.fileSavedTitle),
+			text: formatMessage(messages.fileSavedText),
+			type: 'success',
+		})
+	} catch (error) {
+		console.error('Error saving file content:', error)
+		addNotification({
+			title: formatMessage(messages.saveFailedTitle),
+			text: formatMessage(messages.saveFailedText),
+			type: 'error',
+		})
+	}
+}
+
+async function shareToMclogs() {
+	if (ctx.shareToMclogs) {
+		await ctx.shareToMclogs(fileContent.value)
+		return
+	}
+
+	try {
+		const response = await fetch('https://api.mclo.gs/1/log', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+			body: new URLSearchParams({ content: fileContent.value }),
+		})
+
+		const data = (await response.json()) as MclogsResponse
+
+		if (data.success && data.url) {
+			await navigator.clipboard.writeText(data.url)
+			addNotification({
+				title: formatMessage(messages.logUrlCopiedTitle),
+				text: formatMessage(messages.logUrlCopiedText),
+				type: 'success',
+			})
+		} else {
+			throw new Error(data.error)
+		}
+	} catch (error) {
+		console.error('Error sharing file:', error)
+		addNotification({
+			title: formatMessage(messages.failedToShareTitle),
+			text: formatMessage(messages.failedToShareText),
+			type: 'error',
+		})
+	}
+}
+
+function close() {
+	resetState()
+	emit('close')
+}
+
+onUnmounted(() => {
+	window.removeEventListener('resize', updateEditorHeight)
+	editorInstance.value = null
+	resetState()
+})
+
+defineExpose({
+	saveFileContent,
+	shareToMclogs,
+	close,
+	isEditingImage,
+	fileContent,
+	hasUnsavedChanges,
+	revertChanges,
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileImageViewer.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileImageViewer.vue
new file mode 100644
index 0000000000..6bd8bfec48
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileImageViewer.vue
@@ -0,0 +1,178 @@
+<template>
+	<div
+		class="relative flex h-[750px] items-center justify-center overflow-hidden rounded-[20px] bg-black"
+	>
+		<div v-if="state.hasError" class="flex flex-col items-center justify-center gap-4">
+			<TriangleAlertIcon class="size-8 text-red" />
+			<p class="m-0 text-secondary">
+				{{ state.errorMessage || formatMessage(messages.invalidImage) }}
+			</p>
+		</div>
+		<img
+			v-show="isReady"
+			ref="imageRef"
+			:src="imageObjectUrl"
+			class="max-h-full max-w-full rounded-lg object-contain"
+			:class="{ 'cursor-zoom-in': !zoomed, 'cursor-zoom-out': zoomed }"
+			:alt="formatMessage(messages.viewedImageAlt)"
+			@load="handleImageLoad"
+			@error="handleImageError"
+			@click="toggleZoom"
+		/>
+
+		<div
+			v-if="isReady"
+			class="absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-2xl bg-surface-3/80 p-1.5 backdrop-blur-sm"
+		>
+			<ButtonStyled type="transparent">
+				<button v-tooltip="formatMessage(messages.zoomIn)" @click="zoomIn">
+					<ZoomInIcon />
+				</button>
+			</ButtonStyled>
+			<ButtonStyled type="transparent">
+				<button v-tooltip="formatMessage(messages.zoomOut)" @click="zoomOut">
+					<ZoomOutIcon />
+				</button>
+			</ButtonStyled>
+			<div class="mx-1 h-6 w-px bg-surface-5" />
+			<ButtonStyled type="transparent">
+				<button v-tooltip="formatMessage(messages.resetZoom)" @click="resetZoom">
+					<span class="px-1 text-sm tabular-nums">{{ Math.round(scale * 100) }}%</span>
+				</button>
+			</ButtonStyled>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { TriangleAlertIcon, ZoomInIcon, ZoomOutIcon } from '@modrinth/assets'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	invalidImage: {
+		id: 'files.image_viewer.invalid_image',
+		defaultMessage: 'Invalid or empty image file.',
+	},
+	viewedImageAlt: {
+		id: 'files.image_viewer.viewed_image_alt',
+		defaultMessage: 'Viewed image',
+	},
+	zoomIn: {
+		id: 'files.image_viewer.zoom_in',
+		defaultMessage: 'Zoom in',
+	},
+	zoomOut: {
+		id: 'files.image_viewer.zoom_out',
+		defaultMessage: 'Zoom out',
+	},
+	resetZoom: {
+		id: 'files.image_viewer.reset_zoom',
+		defaultMessage: 'Reset zoom',
+	},
+	imageTooLarge: {
+		id: 'files.image_viewer.image_too_large',
+		defaultMessage: 'Image too large to view (max {maxDimension}x{maxDimension} pixels)',
+	},
+	loadFailed: {
+		id: 'files.image_viewer.load_failed',
+		defaultMessage: 'Failed to load image',
+	},
+})
+
+const MAX_IMAGE_DIMENSION = 4096
+
+const props = defineProps<{
+	imageBlob: Blob
+}>()
+
+const state = ref({
+	isLoading: true,
+	hasError: false,
+	errorMessage: '',
+})
+
+const imageRef = ref<HTMLImageElement | null>(null)
+const imageObjectUrl = ref('')
+const scale = ref(1)
+const zoomed = ref(false)
+
+const isReady = computed(() => !state.value.isLoading && !state.value.hasError)
+
+function updateImageUrl(blob: Blob) {
+	if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value)
+	imageObjectUrl.value = URL.createObjectURL(blob)
+}
+
+function handleImageLoad() {
+	const img = imageRef.value
+	if (img && (img.naturalWidth > MAX_IMAGE_DIMENSION || img.naturalHeight > MAX_IMAGE_DIMENSION)) {
+		state.value.hasError = true
+		state.value.errorMessage = formatMessage(messages.imageTooLarge, {
+			maxDimension: MAX_IMAGE_DIMENSION,
+		})
+	}
+	state.value.isLoading = false
+}
+
+function handleImageError() {
+	state.value.isLoading = false
+	state.value.hasError = true
+	state.value.errorMessage = formatMessage(messages.loadFailed)
+}
+
+function toggleZoom() {
+	if (zoomed.value) {
+		resetZoom()
+	} else {
+		scale.value = 2
+		zoomed.value = true
+	}
+}
+
+function zoomIn() {
+	scale.value = Math.min(scale.value * 1.25, 5)
+	zoomed.value = scale.value > 1
+}
+
+function zoomOut() {
+	scale.value = Math.max(scale.value * 0.8, 0.1)
+	zoomed.value = scale.value > 1
+}
+
+function resetZoom() {
+	scale.value = 1
+	zoomed.value = false
+}
+
+watch(scale, (s) => {
+	if (imageRef.value) {
+		imageRef.value.style.transform = s === 1 ? '' : `scale(${s})`
+		imageRef.value.style.transition = 'transform 0.2s ease-out'
+	}
+})
+
+watch(
+	() => props.imageBlob,
+	(newBlob) => {
+		if (!newBlob) return
+		state.value.isLoading = true
+		state.value.hasError = false
+		scale.value = 1
+		zoomed.value = false
+		updateImageUrl(newBlob)
+	},
+)
+
+onMounted(() => {
+	if (props.imageBlob) updateImageUrl(props.imageBlob)
+})
+
+onUnmounted(() => {
+	if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value)
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
new file mode 100644
index 0000000000..8811c1a2b9
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
@@ -0,0 +1,128 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header, { type })" max-width="500px">
+		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
+			<label class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">{{
+					formatMessage(fileValidationMessages.nameLabel)
+				}}</span>
+				<StyledInput
+					ref="createInput"
+					v-model="itemName"
+					:placeholder="
+						formatMessage(
+							type === 'file' ? messages.placeholderFile : messages.placeholderDirectory,
+						)
+					"
+					wrapper-class="w-full"
+				/>
+				<div v-if="submitted && error" class="text-sm text-red">{{ error }}</div>
+			</label>
+		</form>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon class="h-5 w-5" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="!!error && submitted" @click="handleSubmit">
+						<PlusIcon class="h-5 w-5" />
+						{{ formatMessage(messages.createButton, { type }) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { computed, nextTick, ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { fileValidationMessages } from './file-validation-messages'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'files.create-modal.header',
+		defaultMessage: 'Create a {type, select, directory {folder} other {file}}',
+	},
+	placeholderFile: {
+		id: 'files.create-modal.placeholder-file',
+		defaultMessage: 'e.g. config.yml',
+	},
+	placeholderDirectory: {
+		id: 'files.create-modal.placeholder-directory',
+		defaultMessage: 'e.g. plugins',
+	},
+	createButton: {
+		id: 'files.create-modal.create-button',
+		defaultMessage: 'Create {type, select, directory {folder} other {file}}',
+	},
+})
+
+const props = defineProps<{
+	type: 'file' | 'directory'
+}>()
+
+const emit = defineEmits<{
+	create: [name: string]
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const createInput = ref<HTMLInputElement | null>(null)
+const itemName = ref('')
+const submitted = ref(false)
+
+const error = computed(() => {
+	if (!itemName.value) {
+		return formatMessage(fileValidationMessages.nameRequired)
+	}
+	if (props.type === 'file') {
+		const validPattern = /^[a-zA-Z0-9-_.\s]+$/
+		if (!validPattern.test(itemName.value)) {
+			return formatMessage(fileValidationMessages.nameInvalidFile)
+		}
+	} else {
+		const validPattern = /^[a-zA-Z0-9-_\s]+$/
+		if (!validPattern.test(itemName.value)) {
+			return formatMessage(fileValidationMessages.nameInvalidDirectory)
+		}
+	}
+	return ''
+})
+
+const handleSubmit = () => {
+	submitted.value = true
+	if (!error.value) {
+		emit('create', itemName.value)
+		hide()
+	}
+}
+
+const show = () => {
+	itemName.value = ''
+	submitted.value = false
+	modal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			createInput.value?.focus()
+		}, 100)
+	})
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
new file mode 100644
index 0000000000..7c705476dc
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
@@ -0,0 +1,80 @@
+<template>
+	<NewModal ref="modal" fade="danger" :header="formatMessage(messages.header)" max-width="500px">
+		<Admonition type="critical" class="md:min-w-[400px]">
+			<template #header>{{ formatMessage(messages.deletingName, { name: item?.name }) }}</template>
+			{{ formatMessage(messages.deleteWarning, { type: item?.type }) }}
+		</Admonition>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon class="h-5 w-5" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="handleSubmit">
+						<TrashIcon class="h-5 w-5" />
+						{{ formatMessage(commonMessages.deleteLabel) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { TrashIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import type { FileItem } from '../../types'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'files.delete-modal.header',
+		defaultMessage: 'Delete file',
+	},
+	deletingName: {
+		id: 'files.delete-modal.deleting-name',
+		defaultMessage: 'Deleting "{name}"',
+	},
+	deleteWarning: {
+		id: 'files.delete-modal.warning',
+		defaultMessage:
+			'{type, select, directory {This folder and all its contents will be permanently deleted. This action cannot be undone.} other {This file will be permanently deleted. This action cannot be undone.}}',
+	},
+})
+
+defineProps<{
+	item: Pick<FileItem, 'name' | 'type'> | null
+}>()
+
+const emit = defineEmits<{
+	delete: []
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+const handleSubmit = () => {
+	emit('delete')
+	hide()
+}
+
+const show = () => {
+	modal.value?.show()
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
new file mode 100644
index 0000000000..40d9cdd9b8
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
@@ -0,0 +1,118 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.header, { type: item?.type })"
+		max-width="500px"
+	>
+		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
+			<div class="flex flex-col gap-1">
+				<span class="font-semibold text-contrast">{{
+					formatMessage(messages.currentLocation)
+				}}</span>
+				<span class="text-secondary">{{ `${currentPath}/${item?.name}`.replace('//', '/') }}</span>
+			</div>
+			<label class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">{{
+					formatMessage(messages.destinationPath)
+				}}</span>
+				<StyledInput
+					ref="destinationInput"
+					v-model="destination"
+					:placeholder="formatMessage(messages.destinationPlaceholder)"
+					wrapper-class="w-full"
+				/>
+			</label>
+		</form>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon class="h-5 w-5" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleSubmit">
+						<RightArrowIcon class="h-5 w-5" />
+						{{ formatMessage(messages.moveButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { RightArrowIcon, XIcon } from '@modrinth/assets'
+import { nextTick, ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import type { FileItem } from '../../types'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'files.move-modal.header',
+		defaultMessage: '{type, select, directory {Move folder} other {Move file}}',
+	},
+	currentLocation: {
+		id: 'files.move-modal.current-location',
+		defaultMessage: 'Current location',
+	},
+	destinationPath: {
+		id: 'files.move-modal.destination-path',
+		defaultMessage: 'Destination path',
+	},
+	moveButton: {
+		id: 'files.move-modal.move-button',
+		defaultMessage: 'Move',
+	},
+	destinationPlaceholder: {
+		id: 'files.move-modal.destination-placeholder',
+		defaultMessage: 'e.g. /mods',
+	},
+})
+
+const destinationInput = ref<HTMLInputElement | null>(null)
+
+defineProps<{
+	item: Pick<FileItem, 'name' | 'type'> | null
+	currentPath: string
+}>()
+
+const emit = defineEmits<{
+	move: [destination: string]
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const destination = ref('')
+
+const handleSubmit = () => {
+	const path = destination.value.replace('//', '/')
+	const normalized = path.startsWith('/') ? path : `/${path}`
+	emit('move', normalized)
+	hide()
+}
+
+const show = () => {
+	destination.value = ''
+	modal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			destinationInput.value?.focus()
+		}, 100)
+	})
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
new file mode 100644
index 0000000000..fbeab3fb0c
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
@@ -0,0 +1,118 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.header, { name: item?.name })"
+		max-width="500px"
+	>
+		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
+			<label class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">{{ formatMessage(messages.newNameLabel) }}</span>
+				<StyledInput ref="renameInput" v-model="itemName" wrapper-class="w-full" />
+				<div v-if="submitted && error" class="text-sm text-red">{{ error }}</div>
+			</label>
+		</form>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon class="h-5 w-5" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="!!error && submitted" @click="handleSubmit">
+						<EditIcon class="h-5 w-5" />
+						{{ formatMessage(messages.renameButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, XIcon } from '@modrinth/assets'
+import { computed, nextTick, ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import type { FileItem } from '../../types'
+import { fileValidationMessages } from './file-validation-messages'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'files.rename-modal.header',
+		defaultMessage: 'Rename {name}',
+	},
+	newNameLabel: {
+		id: 'files.rename-modal.new-name-label',
+		defaultMessage: 'New name',
+	},
+	renameButton: {
+		id: 'files.rename-modal.rename-button',
+		defaultMessage: 'Rename',
+	},
+})
+
+const props = defineProps<{
+	item: Pick<FileItem, 'name' | 'type'> | null
+}>()
+
+const emit = defineEmits<{
+	rename: [newName: string]
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const renameInput = ref<HTMLInputElement | null>(null)
+const itemName = ref('')
+const submitted = ref(false)
+
+const error = computed(() => {
+	if (!itemName.value) {
+		return formatMessage(fileValidationMessages.nameRequired)
+	}
+	if (props.item?.type === 'file') {
+		const validPattern = /^[a-zA-Z0-9-_.\s]+$/
+		if (!validPattern.test(itemName.value)) {
+			return formatMessage(fileValidationMessages.nameInvalidFile)
+		}
+	} else {
+		const validPattern = /^[a-zA-Z0-9-_\s]+$/
+		if (!validPattern.test(itemName.value)) {
+			return formatMessage(fileValidationMessages.nameInvalidDirectory)
+		}
+	}
+	return ''
+})
+
+const handleSubmit = () => {
+	submitted.value = true
+	if (!error.value) {
+		emit('rename', itemName.value)
+		hide()
+	}
+}
+
+const show = (item: { name: string; type: string }) => {
+	itemName.value = item.name
+	submitted.value = false
+	modal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			renameInput.value?.focus()
+		}, 100)
+	})
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
new file mode 100644
index 0000000000..9050d67392
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
@@ -0,0 +1,145 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="true" no-padding>
+		<div class="max-w-[500px]">
+			<div class="flex flex-col gap-4 p-4">
+				<Admonition type="warning" :header="formatMessage(messages.warningHeader)">
+					<span>
+						<template v-if="hasMany">
+							{{ formatMessage(messages.overwriteManyWarning) }}
+						</template>
+						<template v-else>
+							{{ formatMessage(messages.overwriteWarning, { count: files.length }) }}
+						</template>
+					</span>
+				</Admonition>
+
+				<div v-if="files.length" class="flex gap-2">
+					<div class="flex items-center gap-1">
+						<MinusIcon />
+						{{ formatMessage(messages.overwrittenCount, { count: files.length }) }}
+					</div>
+				</div>
+			</div>
+
+			<div
+				v-if="files.length"
+				class="flex flex-col bg-surface-2 p-4 max-h-[272px] overflow-y-auto border-t border-b border-r-0 border-l-0 border-solid border-surface-5"
+			>
+				<div
+					v-for="(file, index) in files"
+					:key="file"
+					class="grid grid-cols-[auto_auto_1fr] items-center min-h-10 h-10 gap-2"
+				>
+					<div class="flex flex-col items-center justify-between">
+						<div class="w-[1px] h-2"></div>
+						<MinusIcon class="text-red" />
+						<div
+							:class="index === files.length - 1 ? 'bg-transparent' : 'bg-surface-5'"
+							class="w-[1px] h-2 relative top-1"
+						></div>
+					</div>
+					<span class="text-sm shrink-0 whitespace-nowrap">{{
+						formatMessage(messages.overwrittenLabel)
+					}}</span>
+					<span
+						v-tooltip="file"
+						class="text-sm text-contrast font-medium whitespace-nowrap overflow-hidden text-ellipsis"
+					>
+						{{ file }}
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2 pt-4">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleProceed">
+						<CheckIcon />
+						{{ formatMessage(messages.overwriteButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, MinusIcon, XIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'files.conflict-modal.header',
+		defaultMessage: 'Extract summary',
+	},
+	warningHeader: {
+		id: 'files.conflict-modal.warning-header',
+		defaultMessage: 'Files will be overwritten',
+	},
+	overwriteManyWarning: {
+		id: 'files.conflict-modal.overwrite-many-warning',
+		defaultMessage:
+			'Over 100 files will be overwritten if you proceed with extraction; here are some of them.',
+	},
+	overwriteWarning: {
+		id: 'files.conflict-modal.overwrite-warning',
+		defaultMessage:
+			'The following {count} files already exist on your server, and will be overwritten if you proceed with extraction.',
+	},
+	overwrittenCount: {
+		id: 'files.conflict-modal.overwritten-count',
+		defaultMessage: '{count} overwritten',
+	},
+	overwrittenLabel: {
+		id: 'files.conflict-modal.overwritten-label',
+		defaultMessage: 'Overwritten',
+	},
+	overwriteButton: {
+		id: 'files.conflict-modal.overwrite-button',
+		defaultMessage: 'Overwrite',
+	},
+})
+
+const path = ref('')
+const files = ref<string[]>([])
+
+const emit = defineEmits<{
+	proceed: [path: string]
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+const hasMany = computed(() => files.value.length > 100)
+
+const show = (zipPath: string, conflictingFiles: string[]) => {
+	path.value = zipPath
+	files.value = conflictingFiles
+	modal.value?.show()
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+const handleProceed = () => {
+	hide()
+	emit('proceed', path.value)
+}
+
+defineExpose({ show })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
new file mode 100644
index 0000000000..1a6824ae8c
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -0,0 +1,291 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="cf ? formatMessage(messages.cfHeader) : formatMessage(messages.zipHeader)"
+	>
+		<form class="flex flex-col gap-6 md:w-[700px]" @submit.prevent="handleSubmit">
+			<!-- CurseForge stepper cards -->
+			<div v-if="cf" class="flex gap-4">
+				<div
+					v-for="(step, i) in steps"
+					:key="i"
+					class="flex flex-1 flex-col gap-2 overflow-clip rounded-[20px] bg-surface-2 p-3"
+				>
+					<span
+						class="flex size-6 shrink-0 items-center justify-center rounded-full border border-solid border-surface-5 bg-surface-4 font-medium text-contrast"
+					>
+						{{ i + 1 }}
+					</span>
+					<div class="flex flex-col">
+						<div class="font-semibold leading-snug text-contrast">
+							{{ step.title }}
+						</div>
+						<div class="text-sm leading-relaxed text-secondary">
+							{{ step.description }}
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- URL input -->
+			<div class="flex flex-col gap-2.5">
+				<label v-if="cf" class="text-base font-semibold text-contrast">{{
+					formatMessage(messages.enterLink)
+				}}</label>
+				<div v-else class="text-sm text-secondary">
+					{{ formatMessage(messages.zipDescription) }}
+				</div>
+				<StyledInput
+					v-model="url"
+					:icon="LinkIcon"
+					type="url"
+					:placeholder="
+						cf
+							? 'https://www.curseforge.com/minecraft/modpacks/.../files/6412259'
+							: 'https://www.example.com/.../modpack-name-1.0.2.zip'
+					"
+					:disabled="submitted"
+					:error="touched && !!error"
+					autocomplete="off"
+					@focus="touched = true"
+				/>
+				<div v-if="touched && error" class="text-xs text-red">{{ error }}</div>
+			</div>
+
+			<!-- Inline backup creator -->
+			<InlineBackupCreator
+				:backup-name="formatMessage(messages.backupName)"
+				hide-shift-click-hint
+				@update:buttons-disabled="backupInProgress = $event"
+			/>
+		</form>
+
+		<template #actions>
+			<div class="flex w-full items-center justify-end gap-2">
+				<ButtonStyled type="outlined">
+					<button type="button" class="!border !border-surface-4" @click="hide">
+						<XIcon />
+						{{
+							submitted
+								? formatMessage(commonMessages.closeButton)
+								: formatMessage(commonMessages.cancelButton)
+						}}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						v-tooltip="error"
+						:disabled="submitted || !!error || backupInProgress"
+						type="submit"
+						@click="handleSubmit"
+					>
+						<SpinnerIcon v-if="submitted" class="animate-spin" />
+						<DownloadIcon v-else />
+						{{
+							submitted
+								? formatMessage(commonMessages.installingLabel)
+								: formatMessage(messages.installButton)
+						}}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import {
+	DownloadIcon,
+	FileTextIcon,
+	LinkIcon,
+	SearchIcon,
+	SpinnerIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { computed, nextTick, ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthClient } from '#ui/providers/api-client'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import InlineBackupCreator from '../../../content-tab/components/modals/InlineBackupCreator.vue'
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	cfHeader: {
+		id: 'files.zip-url-modal.cf-header',
+		defaultMessage: 'Install a CurseForge modpack',
+	},
+	zipHeader: {
+		id: 'files.zip-url-modal.zip-header',
+		defaultMessage: 'Uploading .zip contents from URL',
+	},
+	enterLink: {
+		id: 'files.zip-url-modal.enter-link',
+		defaultMessage: 'Enter link',
+	},
+	zipDescription: {
+		id: 'files.zip-url-modal.zip-description',
+		defaultMessage: 'Copy and paste the direct download URL of a .zip file.',
+	},
+	installButton: {
+		id: 'files.zip-url-modal.install-button',
+		defaultMessage: 'Install',
+	},
+	stepFindTitle: {
+		id: 'files.zip-url-modal.step-find-title',
+		defaultMessage: 'Find the modpack',
+	},
+	stepFindDescription: {
+		id: 'files.zip-url-modal.step-find-description',
+		defaultMessage: 'Browse CurseForge and locate the modpack you want.',
+	},
+	stepSelectTitle: {
+		id: 'files.zip-url-modal.step-select-title',
+		defaultMessage: 'Select a version',
+	},
+	stepSelectDescription: {
+		id: 'files.zip-url-modal.step-select-description',
+		defaultMessage: 'Go to the "Files" tab and pick the version to install.',
+	},
+	stepCopyTitle: {
+		id: 'files.zip-url-modal.step-copy-title',
+		defaultMessage: 'Copy the URL',
+	},
+	stepCopyDescription: {
+		id: 'files.zip-url-modal.step-copy-description',
+		defaultMessage: 'Copy the version page URL and paste it below.',
+	},
+	errorUrlRequired: {
+		id: 'files.zip-url-modal.error-url-required',
+		defaultMessage: 'URL is required.',
+	},
+	errorCfUrl: {
+		id: 'files.zip-url-modal.error-cf-url',
+		defaultMessage: 'URL must be a CurseForge modpack version URL.',
+	},
+	errorUrlInvalid: {
+		id: 'files.zip-url-modal.error-url-invalid',
+		defaultMessage: 'URL must be valid.',
+	},
+	cfNotFoundTitle: {
+		id: 'files.zip-url-modal.cf-not-found-title',
+		defaultMessage: 'CurseForge modpack not found',
+	},
+	cfNotFoundText: {
+		id: 'files.zip-url-modal.cf-not-found-text',
+		defaultMessage: 'Could not find CurseForge modpack at that URL.',
+	},
+	installFailedTitle: {
+		id: 'files.zip-url-modal.install-failed-title',
+		defaultMessage: 'Installation failed',
+	},
+	unknownError: {
+		id: 'files.zip-url-modal.unknown-error',
+		defaultMessage: 'An unknown error occurred',
+	},
+	backupName: {
+		id: 'files.zip-url-modal.backup-name',
+		defaultMessage: 'CurseForge modpack install',
+	},
+})
+
+const steps = [
+	{
+		icon: SearchIcon,
+		title: formatMessage(messages.stepFindTitle),
+		description: formatMessage(messages.stepFindDescription),
+	},
+	{
+		icon: FileTextIcon,
+		title: formatMessage(messages.stepSelectTitle),
+		description: formatMessage(messages.stepSelectDescription),
+	},
+	{
+		icon: LinkIcon,
+		title: formatMessage(messages.stepCopyTitle),
+		description: formatMessage(messages.stepCopyDescription),
+	},
+]
+
+const cf = ref(false)
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const url = ref('')
+const submitted = ref(false)
+const touched = ref(false)
+const backupInProgress = ref(false)
+
+const trimmedUrl = computed(() => url.value.trim())
+
+const regex = /https:\/\/(www\.)?curseforge\.com\/minecraft\/modpacks\/[^/]+\/files\/\d+/
+
+const error = computed(() => {
+	if (trimmedUrl.value.length === 0) {
+		return formatMessage(messages.errorUrlRequired)
+	}
+	if (cf.value && !regex.test(trimmedUrl.value)) {
+		return formatMessage(messages.errorCfUrl)
+	} else if (!cf.value && !trimmedUrl.value.includes('/')) {
+		return formatMessage(messages.errorUrlInvalid)
+	}
+	return ''
+})
+
+const handleSubmit = async () => {
+	touched.value = true
+	if (error.value) return
+
+	submitted.value = true
+	try {
+		const dry = await client.kyros.files_v0.extractFile(trimmedUrl.value, true, true)
+
+		if (!cf.value || dry.modpack_name) {
+			await client.kyros.files_v0.extractFile(trimmedUrl.value, true, false)
+			hide()
+		} else {
+			submitted.value = false
+			addNotification({
+				title: formatMessage(messages.cfNotFoundTitle),
+				text: formatMessage(messages.cfNotFoundText),
+				type: 'error',
+			})
+		}
+	} catch (err) {
+		submitted.value = false
+		console.error('Error installing:', err)
+		addNotification({
+			title: formatMessage(messages.installFailedTitle),
+			text: err instanceof Error ? err.message : formatMessage(messages.unknownError),
+			type: 'error',
+		})
+	}
+}
+
+const show = (isCf: boolean) => {
+	cf.value = isCf
+	url.value = ''
+	submitted.value = false
+	touched.value = false
+	backupInProgress.value = false
+	modal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			modal.value?.$el?.querySelector('input')?.focus()
+		}, 100)
+	})
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/file-validation-messages.ts b/packages/ui/src/layouts/shared/files-tab/components/modals/file-validation-messages.ts
new file mode 100644
index 0000000000..f5d7db1147
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/file-validation-messages.ts
@@ -0,0 +1,22 @@
+import { defineMessages } from '#ui/composables/i18n'
+
+export const fileValidationMessages = defineMessages({
+	nameLabel: {
+		id: 'files.validation.name-label',
+		defaultMessage: 'Name',
+	},
+	nameRequired: {
+		id: 'files.validation.name-required',
+		defaultMessage: 'Name is required.',
+	},
+	nameInvalidFile: {
+		id: 'files.validation.name-invalid-file',
+		defaultMessage:
+			'Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.',
+	},
+	nameInvalidDirectory: {
+		id: 'files.validation.name-invalid-directory',
+		defaultMessage:
+			'Name must contain only alphanumeric characters, dashes, underscores, or spaces.',
+	},
+})
diff --git a/packages/ui/src/components/servers/files/upload/FileUploadDragAndDrop.vue b/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDragAndDrop.vue
similarity index 73%
rename from packages/ui/src/components/servers/files/upload/FileUploadDragAndDrop.vue
rename to packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDragAndDrop.vue
index 3d03699feb..6a9900fcf0 100644
--- a/packages/ui/src/components/servers/files/upload/FileUploadDragAndDrop.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDragAndDrop.vue
@@ -16,7 +16,11 @@
 			<div class="text-center">
 				<UploadIcon class="mx-auto h-16 w-16 shadow-2xl" />
 				<p class="mt-2 text-xl">
-					Drop {{ type ? type.toLocaleLowerCase() : 'file' }}s here to upload
+					{{
+						formatMessage(messages.dropToUpload, {
+							type: type ? type.toLocaleLowerCase() : undefined,
+						})
+					}}
 				</p>
 			</div>
 		</div>
@@ -27,6 +31,10 @@
 import { UploadIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+const { formatMessage } = useVIntl()
+
 const emit = defineEmits<{
 	filesDropped: [files: File[]]
 }>()
@@ -36,15 +44,20 @@ defineProps<{
 	type?: string
 }>()
 
+const messages = defineMessages({
+	dropToUpload: {
+		id: 'files.upload.drag-and-drop.drop-to-upload',
+		defaultMessage: 'Drop {type, select, undefined {files} other {{type}s}} here to upload',
+	},
+})
+
 const isDragging = ref(false)
 const dragCounter = ref(0)
 
 const handleDragEnter = (event: DragEvent) => {
 	event.preventDefault()
-	if (!event.dataTransfer?.types.includes('application/modrinth-file-move')) {
-		dragCounter.value++
-		isDragging.value = true
-	}
+	dragCounter.value++
+	isDragging.value = true
 }
 
 const handleDragOver = (event: DragEvent) => {
@@ -64,9 +77,6 @@ const handleDrop = (event: DragEvent) => {
 	isDragging.value = false
 	dragCounter.value = 0
 
-	const isInternalMove = event.dataTransfer?.types.includes('application/modrinth-file-move')
-	if (isInternalMove) return
-
 	const files = event.dataTransfer?.files
 	if (files) {
 		emit('filesDropped', Array.from(files))
diff --git a/packages/ui/src/components/servers/files/upload/FileUploadDropdown.vue b/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDropdown.vue
similarity index 75%
rename from packages/ui/src/components/servers/files/upload/FileUploadDropdown.vue
rename to packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDropdown.vue
index 580754c31f..c12bbae205 100644
--- a/packages/ui/src/components/servers/files/upload/FileUploadDropdown.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDropdown.vue
@@ -12,9 +12,17 @@
 							<FolderOpenIcon class="size-4" />
 							<span>
 								<span class="capitalize">
-									{{ props.fileType ? props.fileType : 'File' }} uploads
+									{{
+										formatMessage(messages.fileUploads, {
+											fileType: props.fileType ? props.fileType : formatMessage(messages.file),
+										})
+									}}
 								</span>
-								<span>{{ activeUploads.length > 0 ? ` - ${activeUploads.length} left` : '' }}</span>
+								<span>{{
+									activeUploads.length > 0
+										? formatMessage(messages.uploadsLeft, { count: activeUploads.length })
+										: ''
+								}}</span>
 							</span>
 						</div>
 					</div>
@@ -52,18 +60,20 @@
 							</div>
 							<div class="flex min-w-[80px] items-center justify-end gap-2">
 								<template v-if="item.status === 'completed'">
-									<span>Done</span>
+									<span>{{ formatMessage(messages.done) }}</span>
 								</template>
 								<template v-else-if="item.status === 'error-file-exists'">
-									<span class="text-red">Failed - File already exists</span>
+									<span class="text-red">{{ formatMessage(messages.failedFileExists) }}</span>
 								</template>
 								<template v-else-if="item.status === 'error-generic'">
-									<span class="text-red"
-										>Failed - {{ item.error?.message || 'An unexpected error occured.' }}</span
-									>
+									<span class="text-red">{{
+										formatMessage(messages.failedGeneric, {
+											error: item.error?.message || formatMessage(messages.unexpectedError),
+										})
+									}}</span>
 								</template>
 								<template v-else-if="item.status === 'incorrect-type'">
-									<span class="text-red">Failed - Incorrect file type</span>
+									<span class="text-red">{{ formatMessage(messages.failedIncorrectType) }}</span>
 								</template>
 								<template v-else>
 									<template v-if="item.status === 'uploading'">
@@ -75,11 +85,11 @@
 											/>
 										</div>
 										<ButtonStyled color="red" type="transparent" @click="cancelUpload(item)">
-											<button>Cancel</button>
+											<button>{{ formatMessage(commonMessages.cancelButton) }}</button>
 										</ButtonStyled>
 									</template>
 									<template v-else-if="item.status === 'cancelled'">
-										<span class="text-red">Cancelled</span>
+										<span class="text-red">{{ formatMessage(messages.cancelled) }}</span>
 									</template>
 									<template v-else>
 										<span>{{ item.progress }}%</span>
@@ -102,12 +112,69 @@
 
 <script setup lang="ts">
 import { CheckCircleIcon, FolderOpenIcon, SpinnerIcon, XCircleIcon } from '@modrinth/assets'
-import { ButtonStyled, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import { computed, nextTick, ref, watch } from 'vue'
 
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthClient } from '#ui/providers/api-client'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import { commonMessages } from '#ui/utils/common-messages'
+
+const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 
+const messages = defineMessages({
+	file: {
+		id: 'files.upload-dropdown.file',
+		defaultMessage: 'File',
+	},
+	fileUploads: {
+		id: 'files.upload-dropdown.file-uploads',
+		defaultMessage: '{fileType} uploads',
+	},
+	uploadsLeft: {
+		id: 'files.upload-dropdown.uploads-left',
+		defaultMessage: ' - {count} left',
+	},
+	done: {
+		id: 'files.upload-dropdown.done',
+		defaultMessage: 'Done',
+	},
+	failedFileExists: {
+		id: 'files.upload-dropdown.failed-file-exists',
+		defaultMessage: 'Failed - File already exists',
+	},
+	failedGeneric: {
+		id: 'files.upload-dropdown.failed-generic',
+		defaultMessage: 'Failed - {error}',
+	},
+	unexpectedError: {
+		id: 'files.upload-dropdown.unexpected-error',
+		defaultMessage: 'An unexpected error occurred.',
+	},
+	failedIncorrectType: {
+		id: 'files.upload-dropdown.failed-incorrect-type',
+		defaultMessage: 'Failed - Incorrect file type',
+	},
+	cancelled: {
+		id: 'files.upload-dropdown.cancelled',
+		defaultMessage: 'Cancelled',
+	},
+	incorrectFileType: {
+		id: 'files.upload-dropdown.incorrect-file-type',
+		defaultMessage: 'Upload had incorrect file type',
+	},
+	uploadFailed: {
+		id: 'files.upload-dropdown.upload-failed',
+		defaultMessage: 'Upload failed',
+	},
+	failedToUpload: {
+		id: 'files.upload-dropdown.failed-to-upload',
+		defaultMessage: 'Failed to upload {fileName}',
+	},
+})
+
 interface UploadItem {
 	file: File
 	progress: number
@@ -203,7 +270,7 @@ const cancelUpload = (item: UploadItem) => {
 	}
 }
 
-const badFileTypeMsg = 'Upload had incorrect file type'
+const badFileTypeMsg = formatMessage(messages.incorrectFileType)
 
 const uploadFile = async (file: File) => {
 	const uploadItem: UploadItem = {
@@ -283,8 +350,8 @@ const uploadFile = async (file: File) => {
 
 		if (error instanceof Error && error.message !== 'Upload cancelled') {
 			addNotification({
-				title: 'Upload failed',
-				text: `Failed to upload ${file.name}`,
+				title: formatMessage(messages.uploadFailed),
+				text: formatMessage(messages.failedToUpload, { fileName: file.name }),
 				type: 'error',
 			})
 		}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
new file mode 100644
index 0000000000..f27dc96e19
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
@@ -0,0 +1,114 @@
+import { ref } from 'vue'
+
+export interface FileDragData {
+	name: string
+	type: string
+	path: string
+}
+
+const activeDrag = ref<FileDragData | null>(null)
+const dragTarget = ref<string | null>(null)
+const ghostEl = ref<HTMLElement | null>(null)
+const pointerStartX = ref(0)
+const pointerStartY = ref(0)
+const dragStarted = ref(false)
+
+const DRAG_THRESHOLD = 5
+
+export const fileDragData = activeDrag
+export const fileDragTarget = dragTarget
+export const fileDragActive = dragStarted
+
+function createGhost(name: string): HTMLElement {
+	const el = document.createElement('div')
+	el.className =
+		'fixed z-[99999] flex items-center max-w-[500px] gap-3 rounded-lg bg-bg-raised p-3 shadow-lg pointer-events-none text-contrast font-bold truncate'
+	el.textContent = name
+	el.style.transform = 'translate(-50%, -100%)'
+	document.body.appendChild(el)
+	return el
+}
+
+function findDropTarget(x: number, y: number): string | null {
+	const el = document.elementFromPoint(x, y)
+	if (!el) return null
+	const row = (el as HTMLElement).closest('[data-file-type="directory"]') as HTMLElement | null
+	return row?.dataset.filePath ?? null
+}
+
+function onPointerMove(e: PointerEvent) {
+	if (!activeDrag.value) return
+
+	if (!dragStarted.value) {
+		const dx = e.clientX - pointerStartX.value
+		const dy = e.clientY - pointerStartY.value
+		if (Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) return
+		dragStarted.value = true
+		ghostEl.value = createGhost(activeDrag.value.name)
+	}
+
+	if (ghostEl.value) {
+		ghostEl.value.style.left = `${e.clientX}px`
+		ghostEl.value.style.top = `${e.clientY - 10}px`
+	}
+
+	const target = findDropTarget(e.clientX, e.clientY)
+	if (target !== dragTarget.value) {
+		dragTarget.value = target
+	}
+}
+
+let clickSuppressed = false
+
+export function wasRecentDrag(): boolean {
+	return clickSuppressed
+}
+
+function cleanup() {
+	const wasDrag = dragStarted.value
+	if (ghostEl.value) {
+		ghostEl.value.remove()
+		ghostEl.value = null
+	}
+	activeDrag.value = null
+	dragTarget.value = null
+	dragStarted.value = false
+	document.removeEventListener('pointermove', onPointerMove)
+	document.removeEventListener('pointerup', onPointerUp)
+	if (wasDrag) {
+		clickSuppressed = true
+		requestAnimationFrame(() => {
+			clickSuppressed = false
+		})
+	}
+}
+
+let onDropCallback: ((source: FileDragData, destination: string) => void) | null = null
+
+function onPointerUp() {
+	if (dragStarted.value && activeDrag.value && dragTarget.value) {
+		const src = activeDrag.value
+		const dest = dragTarget.value
+		const isSelf = dest === src.path
+		const isChild = src.type === 'directory' && dest.startsWith(src.path + '/')
+		if (!isSelf && !isChild) {
+			onDropCallback?.(src, dest)
+		}
+	}
+	cleanup()
+}
+
+export function startFileDrag(
+	data: FileDragData,
+	e: PointerEvent,
+	onDrop: (source: FileDragData, destination: string) => void,
+) {
+	activeDrag.value = data
+	pointerStartX.value = e.clientX
+	pointerStartY.value = e.clientY
+	dragStarted.value = false
+	onDropCallback = onDrop
+
+	document.addEventListener('pointermove', onPointerMove)
+	document.addEventListener('pointerup', onPointerUp)
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-search.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-search.ts
new file mode 100644
index 0000000000..49326289d2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-search.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+import type { FileItem } from '../types'
+
+export function useFileSearch(items: Ref<FileItem[]>) {
+	const searchQuery = ref('')
+
+	const searchedItems = computed(() => {
+		if (!searchQuery.value) return items.value
+
+		const query = searchQuery.value.toLowerCase()
+		return items.value.filter((item) => item.name.toLowerCase().includes(query))
+	})
+
+	return {
+		searchQuery,
+		searchedItems,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
new file mode 100644
index 0000000000..702c6ca615
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
@@ -0,0 +1,52 @@
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+import type { FileItem } from '../types'
+
+export function useFileSelection(items: Ref<FileItem[]>) {
+	const selectedItems = ref<Set<string>>(new Set())
+
+	function toggleItemSelection(path: string) {
+		const newSet = new Set(selectedItems.value)
+		if (newSet.has(path)) {
+			newSet.delete(path)
+		} else {
+			newSet.add(path)
+		}
+		selectedItems.value = newSet
+	}
+
+	function selectAll() {
+		selectedItems.value = new Set(items.value.map((i) => i.path))
+	}
+
+	function deselectAll() {
+		selectedItems.value = new Set()
+	}
+
+	function toggleSelectAll() {
+		if (allSelected.value) {
+			deselectAll()
+		} else {
+			selectAll()
+		}
+	}
+
+	const allSelected = computed(
+		() => items.value.length > 0 && selectedItems.value.size === items.value.length,
+	)
+
+	const someSelected = computed(
+		() => selectedItems.value.size > 0 && selectedItems.value.size < items.value.length,
+	)
+
+	return {
+		selectedItems,
+		toggleItemSelection,
+		selectAll,
+		deselectAll,
+		toggleSelectAll,
+		allSelected,
+		someSelected,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-sorting.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-sorting.ts
new file mode 100644
index 0000000000..2f0713d684
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-sorting.ts
@@ -0,0 +1,85 @@
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+import type { FileItem, FileSortField, FileViewFilter } from '../types'
+
+export function useFileSorting(items: Ref<FileItem[]>) {
+	const sortField = ref<FileSortField>('name')
+	const sortDesc = ref(false)
+	const viewFilter = ref<FileViewFilter>('all')
+
+	function handleSort(field: FileSortField) {
+		if (sortField.value === field) {
+			sortDesc.value = !sortDesc.value
+		} else {
+			sortField.value = field
+			sortDesc.value = false
+		}
+	}
+
+	function resetSort() {
+		sortField.value = 'name'
+		sortDesc.value = false
+		viewFilter.value = 'all'
+	}
+
+	const sortedItems = computed(() => {
+		let result = [...items.value]
+
+		switch (viewFilter.value) {
+			case 'filesOnly':
+				result = result.filter((item) => item.type !== 'directory')
+				break
+			case 'foldersOnly':
+				result = result.filter((item) => item.type === 'directory')
+				break
+		}
+
+		function compareItems(a: FileItem, b: FileItem) {
+			if (viewFilter.value === 'all') {
+				if (a.type === 'directory' && b.type !== 'directory') return -1
+				if (a.type !== 'directory' && b.type === 'directory') return 1
+			}
+
+			switch (sortField.value) {
+				case 'modified':
+					return sortDesc.value ? a.modified - b.modified : b.modified - a.modified
+				case 'created':
+					return sortDesc.value ? a.created - b.created : b.created - a.created
+				case 'size': {
+					const aValue =
+						a.type === 'directory'
+							? a.count !== undefined
+								? a.count
+								: 0
+							: a.size !== undefined
+								? a.size
+								: 0
+					const bValue =
+						b.type === 'directory'
+							? b.count !== undefined
+								? b.count
+								: 0
+							: b.size !== undefined
+								? b.size
+								: 0
+					return sortDesc.value ? aValue - bValue : bValue - aValue
+				}
+				default:
+					return sortDesc.value ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name)
+			}
+		}
+
+		result.sort(compareItems)
+		return result
+	})
+
+	return {
+		sortField,
+		sortDesc,
+		viewFilter,
+		sortedItems,
+		handleSort,
+		resetSort,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
new file mode 100644
index 0000000000..8d12a47ea6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
@@ -0,0 +1,102 @@
+import { ref } from 'vue'
+
+import type { Operation } from '../types'
+
+export function useFileUndoRedo(
+	renameItem: (path: string, newName: string) => Promise<void>,
+	moveItem: (source: string, destination: string) => Promise<void>,
+	refresh: () => void,
+	notify: (title: string, text: string, type: 'success' | 'error') => void,
+) {
+	const operationHistory = ref<Operation[]>([])
+	const redoStack = ref<Operation[]>([])
+
+	function recordOperation(op: Operation) {
+		redoStack.value = []
+		operationHistory.value.push(op)
+	}
+
+	async function undo() {
+		const lastOperation = operationHistory.value.pop()
+		if (!lastOperation) return
+
+		try {
+			switch (lastOperation.type) {
+				case 'move':
+					await moveItem(
+						`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
+						`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
+					)
+					break
+				case 'rename':
+					await renameItem(
+						`${lastOperation.path}/${lastOperation.newName}`.replace('//', '/'),
+						lastOperation.oldName,
+					)
+					break
+			}
+
+			redoStack.value.push(lastOperation)
+			refresh()
+			notify(
+				`${lastOperation.type === 'move' ? 'Move' : 'Rename'} undone`,
+				`${lastOperation.fileName} has been restored to its original ${lastOperation.type === 'move' ? 'location' : 'name'}`,
+				'success',
+			)
+		} catch {
+			notify('Undo failed', `Failed to undo the last ${lastOperation.type} operation`, 'error')
+		}
+	}
+
+	async function redo() {
+		const lastOperation = redoStack.value.pop()
+		if (!lastOperation) return
+
+		try {
+			switch (lastOperation.type) {
+				case 'move':
+					await moveItem(
+						`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
+						`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
+					)
+					break
+				case 'rename':
+					await renameItem(
+						`${lastOperation.path}/${lastOperation.oldName}`.replace('//', '/'),
+						lastOperation.newName,
+					)
+					break
+			}
+
+			operationHistory.value.push(lastOperation)
+			refresh()
+			notify(
+				`${lastOperation.type === 'move' ? 'Move' : 'Rename'} redone`,
+				`${lastOperation.fileName} has been ${lastOperation.type === 'move' ? 'moved' : 'renamed'} again`,
+				'success',
+			)
+		} catch {
+			notify('Redo failed', `Failed to redo the last ${lastOperation.type} operation`, 'error')
+		}
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
+			e.preventDefault()
+			undo()
+		}
+		if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
+			e.preventDefault()
+			redo()
+		}
+	}
+
+	return {
+		operationHistory,
+		redoStack,
+		recordOperation,
+		undo,
+		redo,
+		onKeydown,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/index.ts b/packages/ui/src/layouts/shared/files-tab/composables/index.ts
new file mode 100644
index 0000000000..15db11f9cc
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/index.ts
@@ -0,0 +1,4 @@
+export { useFileSearch } from './file-search'
+export { useFileSelection } from './file-selection'
+export { useFileSorting } from './file-sorting'
+export { useFileUndoRedo } from './file-undo-redo'
diff --git a/packages/ui/src/layouts/shared/files-tab/index.ts b/packages/ui/src/layouts/shared/files-tab/index.ts
new file mode 100644
index 0000000000..c6e724d864
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/index.ts
@@ -0,0 +1,3 @@
+export { default as FilePageLayout } from './layout.vue'
+export * from './providers'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
new file mode 100644
index 0000000000..5a5ce6e355
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -0,0 +1,766 @@
+<template>
+	<slot name="modals" />
+	<ConfirmLeaveModal
+		ref="confirmLeaveModal"
+		:title="formatMessage(messages.leaveEditorTitle)"
+		:body="formatMessage(messages.leaveEditorBody)"
+		:stay-label="formatMessage(messages.leaveEditorStay)"
+		:leave-label="formatMessage(messages.leaveEditorLeave)"
+	/>
+	<FileCreateItemModal ref="createItemModal" :type="newItemType" @create="handleCreateNewItem" />
+	<FileUploadConflictModal ref="uploadConflictModal" @proceed="handleExtractConfirm" />
+	<FileUploadZipUrlModal v-if="ctx.showInstallFromUrl" ref="uploadZipUrlModal" />
+	<FileRenameItemModal ref="renameItemModal" :item="selectedItem" @rename="handleRenameItem" />
+	<FileMoveItemModal
+		ref="moveItemModal"
+		:item="selectedItem"
+		:current-path="ctx.currentPath.value"
+		@move="handleMoveItem"
+	/>
+	<FileDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
+	<FileContextMenu ref="contextMenuRef">
+		<template #extract
+			><PackageOpenIcon class="size-5" /> {{ formatMessage(messages.extractLabel) }}</template
+		>
+		<template #rename
+			><EditIcon class="size-5" /> {{ formatMessage(messages.renameLabel) }}</template
+		>
+		<template #move
+			><RightArrowIcon class="size-5" /> {{ formatMessage(messages.moveLabel) }}</template
+		>
+		<template #download
+			><DownloadIcon class="size-5" />
+			{{ ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton) }}</template
+		>
+		<template #delete
+			><TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}</template
+		>
+	</FileContextMenu>
+	<Transition name="fade" mode="out-in">
+		<div
+			v-if="ctx.loading.value && items.length === 0"
+			key="loading"
+			class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
+		>
+			<SpinnerIcon class="animate-spin" />
+			{{ formatMessage(messages.loadingFiles) }}
+		</div>
+
+		<div v-else key="content" class="contents">
+			<Admonition v-if="ctx.busyWarning?.value" type="warning" class="mb-5">
+				<template #header>{{ ctx.busyWarning.value }}</template>
+				{{ formatMessage(messages.busyWarning) }}
+			</Admonition>
+			<FileOperationAdmonitions />
+			<div class="relative flex w-full flex-col">
+				<div class="relative isolate flex w-full flex-col gap-4">
+					<FileNavbar
+						:breadcrumbs="breadcrumbSegments"
+						:is-editing="isEditing"
+						:editing-file-name="ctx.editingFile.value?.name"
+						:editing-file-path="ctx.editingFile.value?.path"
+						:is-editing-image="fileEditorRef?.isEditingImage"
+						:search-query="searchQuery"
+						:show-refresh-button="showRefreshButton"
+						:show-install-from-url="ctx.showInstallFromUrl"
+						:base-id="baseId"
+						:disabled="isBusy"
+						:disabled-tooltip="busyTooltip"
+						@navigate="navigateToSegment"
+						@navigate-home="() => navigateToSegment(-1)"
+						@prefetch-home="handlePrefetchHome"
+						@update:search-query="searchQuery = $event"
+						@create="showCreateModal"
+						@upload="initiateFileUpload"
+						@upload-zip="() => {}"
+						@unzip-from-url="showUnzipFromUrlModal"
+						@refresh="ctx.refresh"
+						@share="() => fileEditorRef?.shareToMclogs()"
+					/>
+
+					<div v-if="!isEditing">
+						<FileUploadDragAndDrop
+							ref="fileUploadRef"
+							class="@container relative flex flex-col overflow-clip rounded-[20px] border border-solid border-surface-4 shadow-sm"
+							@files-dropped="handleDroppedFiles"
+						>
+							<FileTableHeader
+								:sort-field="sortField"
+								:sort-desc="sortDescValue"
+								:all-selected="allSelected"
+								:some-selected="someSelected"
+								:is-stuck="isLabelBarStuck"
+								@sort="handleSort"
+								@toggle-all="toggleSelectAll"
+							/>
+							<div
+								v-if="filteredItems.length > 0"
+								ref="virtualListContainer"
+								class="relative w-full"
+								:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
+							>
+								<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
+									<FileTableRow
+										v-for="(item, idx) in visibleItems"
+										:key="item.path"
+										:count="item.count"
+										:created="item.created"
+										:modified="item.modified"
+										:name="item.name"
+										:path="item.path"
+										:type="item.type"
+										:size="item.size"
+										:index="visibleRange.start + idx"
+										:is-last="visibleRange.start + idx === filteredItems.length - 1"
+										:selected="selectedItems.has(item.path)"
+										:write-disabled="isBusy"
+										:write-disabled-tooltip="busyTooltip"
+										@extract="() => handleExtractItem(item)"
+										@delete="() => showDeleteModal(item)"
+										@rename="() => showRenameModal(item)"
+										@download="() => handleDownload(item)"
+										@move="() => showMoveModal(item)"
+										@move-direct-to="handleDirectMove"
+										@edit="() => handleEditFile(item)"
+										@navigate="() => handleNavigateToFolder(item)"
+										@hover="() => handleItemHover(item)"
+										@contextmenu="(x, y) => handleContextMenu(item, x, y)"
+										@toggle-select="() => toggleItemSelection(item.path)"
+									/>
+								</div>
+							</div>
+							<div
+								v-else-if="items.length === 0 && !ctx.error.value"
+								class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
+							>
+								<div class="flex flex-col items-center gap-4 text-center">
+									<FolderOpenIcon class="h-16 w-16 text-secondary" />
+									<h3 class="m-0 text-2xl font-bold text-contrast">
+										{{ formatMessage(messages.emptyFolderTitle) }}
+									</h3>
+									<p class="m-0 text-sm text-secondary">
+										{{ formatMessage(messages.emptyFolderDescription) }}
+									</p>
+								</div>
+							</div>
+							<FileManagerError
+								v-else-if="ctx.error.value"
+								class="rounded-b-[20px]"
+								:title="formatMessage(messages.errorTitle)"
+								:message="formatMessage(messages.errorMessage)"
+								@refetch="ctx.refresh"
+								@home="navigateToSegment(-1)"
+							/>
+						</FileUploadDragAndDrop>
+					</div>
+					<FileEditor
+						v-else
+						ref="fileEditorRef"
+						:file="ctx.editingFile.value"
+						:editor-component="editorComponent"
+						@close="handleEditorClose"
+					/>
+				</div>
+			</div>
+
+			<FloatingActionBar :shown="hasUnsavedChanges">
+				<p class="m-0 text-sm font-semibold md:text-base">
+					{{ formatMessage(messages.unsavedChanges) }}
+				</p>
+				<div class="ml-auto flex gap-2">
+					<ButtonStyled type="transparent">
+						<button @click="fileEditorRef?.revertChanges()">
+							<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button @click="fileEditorRef?.saveFileContent(false)">
+							<SaveIcon /> {{ formatMessage(messages.saveButton) }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</FloatingActionBar>
+			<FloatingActionBar :shown="selectedItems.size > 0">
+				<div class="flex items-center gap-0.5">
+					<span class="px-4 py-2.5 text-base font-semibold text-contrast tabular-nums">
+						{{ formatMessage(messages.selectedCount, { count: selectedItems.size }) }}
+					</span>
+					<div class="mx-1 h-6 w-px bg-surface-5" />
+					<ButtonStyled type="transparent">
+						<button class="!text-primary" @click="deselectAll">
+							<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+						</button>
+					</ButtonStyled>
+				</div>
+				<div class="ml-auto flex items-center gap-0.5">
+					<div class="mx-1 h-6 w-px bg-surface-5" />
+					<ButtonStyled
+						type="transparent"
+						color="red"
+						color-fill="text"
+						hover-color-fill="background"
+					>
+						<button v-tooltip="busyTooltip" :disabled="isBusy" @click="showBulkDeleteModal">
+							<TrashIcon />
+							<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+						</button>
+					</ButtonStyled>
+				</div>
+			</FloatingActionBar>
+		</div>
+	</Transition>
+</template>
+
+<script setup lang="ts">
+import {
+	DownloadIcon,
+	EditIcon,
+	FolderOpenIcon,
+	HistoryIcon,
+	PackageOpenIcon,
+	RightArrowIcon,
+	SaveIcon,
+	SpinnerIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import type { Component } from 'vue'
+import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
+import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { usePageLeaveSafety } from '#ui/composables/page-leave-safety'
+import { useStickyObserver } from '#ui/composables/sticky-observer'
+import { useVirtualScroll } from '#ui/composables/virtual-scroll'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import { commonMessages } from '#ui/utils/common-messages'
+import { getFileExtension } from '#ui/utils/file-extensions'
+
+import FileEditor from './components/editor/FileEditor.vue'
+import FileContextMenu from './components/FileContextMenu.vue'
+import FileManagerError from './components/FileManagerError.vue'
+import FileNavbar from './components/FileNavbar.vue'
+import FileOperationAdmonitions from './components/FileOperationAdmonitions.vue'
+import FileTableHeader from './components/FileTableHeader.vue'
+import FileTableRow from './components/FileTableRow.vue'
+import FileCreateItemModal from './components/modals/FileCreateItemModal.vue'
+import FileDeleteItemModal from './components/modals/FileDeleteItemModal.vue'
+import FileMoveItemModal from './components/modals/FileMoveItemModal.vue'
+import FileRenameItemModal from './components/modals/FileRenameItemModal.vue'
+import FileUploadConflictModal from './components/modals/FileUploadConflictModal.vue'
+import FileUploadZipUrlModal from './components/modals/FileUploadZipUrlModal.vue'
+import FileUploadDragAndDrop from './components/upload/FileUploadDragAndDrop.vue'
+import { useFileSearch } from './composables/file-search'
+import { useFileSelection } from './composables/file-selection'
+import { useFileSorting } from './composables/file-sorting'
+import { useFileUndoRedo } from './composables/file-undo-redo'
+import { injectFileManager } from './providers/file-manager'
+import type { FileContextMenuOption, FileItem } from './types'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	loadingFiles: {
+		id: 'files.layout.loading',
+		defaultMessage: 'Loading files...',
+	},
+	busyWarning: {
+		id: 'files.layout.busy-warning',
+		defaultMessage: 'File operations are disabled while the operation is in progress.',
+	},
+	emptyFolderTitle: {
+		id: 'files.layout.empty-folder-title',
+		defaultMessage: 'This folder is empty',
+	},
+	emptyFolderDescription: {
+		id: 'files.layout.empty-folder-description',
+		defaultMessage: 'There are no files or folders.',
+	},
+	errorTitle: {
+		id: 'files.layout.error-title',
+		defaultMessage: 'Unable to load files',
+	},
+	errorMessage: {
+		id: 'files.layout.error-message',
+		defaultMessage: 'The folder may not exist.',
+	},
+	selectedCount: {
+		id: 'files.layout.selected-count',
+		defaultMessage: '{count} selected',
+	},
+	extractLabel: {
+		id: 'files.action.extract',
+		defaultMessage: 'Extract',
+	},
+	renameLabel: {
+		id: 'files.action.rename',
+		defaultMessage: 'Rename',
+	},
+	moveLabel: {
+		id: 'files.action.move',
+		defaultMessage: 'Move',
+	},
+	dryRunFailedTitle: {
+		id: 'files.layout.dry-run-failed-title',
+		defaultMessage: 'Dry run failed',
+	},
+	dryRunFailedText: {
+		id: 'files.layout.dry-run-failed-text',
+		defaultMessage: 'Error running dry run',
+	},
+	extractFailedTitle: {
+		id: 'files.layout.extract-failed-title',
+		defaultMessage: 'Extract failed',
+	},
+	extractionStartedTitle: {
+		id: 'files.layout.extraction-started-title',
+		defaultMessage: 'Extraction started',
+	},
+	unsavedChanges: {
+		id: 'files.layout.unsaved-changes',
+		defaultMessage: 'You have unsaved changes.',
+	},
+	saveButton: {
+		id: 'files.layout.save',
+		defaultMessage: 'Save',
+	},
+	leaveEditorTitle: {
+		id: 'files.layout.leave-editor-title',
+		defaultMessage: 'Leave editor?',
+	},
+	leaveEditorBody: {
+		id: 'files.layout.leave-editor-body',
+		defaultMessage: 'You have unsaved changes that will be lost if you leave the editor.',
+	},
+	leaveEditorStay: {
+		id: 'files.layout.leave-editor-stay',
+		defaultMessage: 'Stay in editor',
+	},
+	leaveEditorLeave: {
+		id: 'files.layout.leave-editor-leave',
+		defaultMessage: 'Leave editor',
+	},
+})
+
+defineProps<{
+	showDebugInfo?: boolean
+	showRefreshButton?: boolean
+}>()
+
+const { addNotification } = injectNotificationManager()
+const ctx = injectFileManager()
+
+const editorComponent = shallowRef<Component | null>(null)
+import('vue3-ace-editor').then(async (mod) => {
+	await Promise.all([import('#ui/utils/ace-theme'), import('#ui/utils/ace-mode-log.ts')])
+	editorComponent.value = mod.VAceEditor
+})
+
+const baseId = `files-${Math.random().toString(36).slice(2, 9)}`
+
+const items = computed(() => ctx.items.value)
+const isEditing = computed(() => ctx.editingFile.value !== null)
+const isBusy = computed(() => ctx.isBusy?.value ?? false)
+const busyTooltip = computed(() => ctx.busyTooltip?.value)
+
+const breadcrumbSegments = computed(() => {
+	const path = ctx.currentPath.value
+	if (typeof path === 'string') {
+		return path.split('/').filter(Boolean)
+	}
+	return []
+})
+
+// Composables
+const { searchQuery, searchedItems } = useFileSearch(items)
+const {
+	sortField,
+	sortDesc: sortDescValue,
+	handleSort,
+	sortedItems: filteredItems,
+	resetSort,
+} = useFileSorting(searchedItems)
+
+const {
+	selectedItems,
+	toggleItemSelection,
+	deselectAll,
+	toggleSelectAll,
+	allSelected,
+	someSelected,
+} = useFileSelection(filteredItems)
+
+const { recordOperation, onKeydown } = useFileUndoRedo(
+	(path, newName) => ctx.renameItem(path, newName),
+	(source, dest) => ctx.moveItem(source, dest),
+	() => ctx.refresh(),
+	(title, text, type) => addNotification({ title, text, type }),
+)
+
+// Virtual scroll
+const {
+	listContainer: virtualListContainer,
+	totalHeight,
+	visibleRange,
+	visibleTop,
+	visibleItems,
+} = useVirtualScroll(filteredItems, {
+	itemHeight: 61,
+	bufferSize: 5,
+})
+
+// Sticky observer for the table header
+const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
+const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
+const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl)
+
+// Refs
+const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
+const createItemModal = ref<InstanceType<typeof FileCreateItemModal>>()
+const renameItemModal = ref<InstanceType<typeof FileRenameItemModal>>()
+const moveItemModal = ref<InstanceType<typeof FileMoveItemModal>>()
+const deleteItemModal = ref<InstanceType<typeof FileDeleteItemModal>>()
+const uploadConflictModal = ref<InstanceType<typeof FileUploadConflictModal>>()
+const uploadZipUrlModal = ref<InstanceType<typeof FileUploadZipUrlModal>>()
+const contextMenuRef = ref<InstanceType<typeof FileContextMenu>>()
+
+const newItemType = ref<'file' | 'directory'>('file')
+const selectedItem = ref<FileItem | null>(null)
+
+const hasUnsavedChanges = computed(() => fileEditorRef.value?.hasUnsavedChanges ?? false)
+
+const { confirmLeaveModal } = usePageLeaveSafety(hasUnsavedChanges)
+
+async function confirmDiscardChanges(): Promise<boolean> {
+	if (!hasUnsavedChanges.value) return true
+	return (await confirmLeaveModal.value?.prompt()) ?? false
+}
+
+// Navigation
+async function navigateToSegment(index: number) {
+	const newPath = index === -1 ? '/' : breadcrumbSegments.value.slice(0, index + 1).join('/')
+
+	if (newPath === ctx.currentPath.value && !isEditing.value) {
+		return
+	}
+
+	if (isEditing.value) {
+		if (!(await confirmDiscardChanges())) return
+		ctx.stopEditing()
+	}
+
+	ctx.navigateTo(newPath)
+}
+
+function handleNavigateToFolder(item: FileItem) {
+	const currentPath = ctx.currentPath.value
+	const newPath = currentPath.endsWith('/')
+		? `${currentPath}${item.name}`
+		: `${currentPath}/${item.name}`
+	ctx.navigateTo(newPath)
+}
+
+// Editing
+function handleEditFile(item: { name: string; type: string; path: string }) {
+	ctx.startEditing({ name: item.name, path: item.path })
+}
+
+async function handleEditorClose() {
+	if (!(await confirmDiscardChanges())) return
+	ctx.stopEditing()
+}
+
+// CRUD handlers
+async function handleCreateNewItem(name: string) {
+	await ctx.createItem(name, newItemType.value)
+}
+
+async function handleRenameItem(newName: string) {
+	const item = selectedItem.value
+	if (!item) return
+
+	const path = `${ctx.currentPath.value}/${item.name}`.replace('//', '/')
+	await ctx.renameItem(path, newName)
+	recordOperation({
+		type: 'rename',
+		itemType: item.type,
+		fileName: item.name,
+		path: ctx.currentPath.value,
+		oldName: item.name,
+		newName,
+	})
+}
+
+async function handleMoveItem(destination: string) {
+	const item = selectedItem.value
+	if (!item) return
+
+	const sourcePath = ctx.currentPath.value
+	const source = `${sourcePath}/${item.name}`.replace('//', '/')
+	const dest = `${destination}/${item.name}`.replace('//', '/')
+
+	await ctx.moveItem(source, dest)
+	recordOperation({
+		type: 'move',
+		sourcePath,
+		destinationPath: destination,
+		fileName: item.name,
+		itemType: item.type,
+	})
+}
+
+function handleDeleteItem() {
+	const item = selectedItem.value
+	if (!item) return
+
+	const path = `${ctx.currentPath.value}/${item.name}`.replace('//', '/')
+	ctx.deleteItem(path, item.type === 'directory')
+}
+
+function handleDirectMove(moveData: {
+	name: string
+	type: string
+	path: string
+	destination: string
+}) {
+	if (isBusy.value) return
+	const dest = `${moveData.destination}/${moveData.name}`.replace('//', '/')
+	const sourcePath = moveData.path.substring(0, moveData.path.lastIndexOf('/'))
+
+	ctx.moveItem(moveData.path, dest).then(() => {
+		recordOperation({
+			type: 'move',
+			sourcePath,
+			destinationPath: moveData.destination,
+			fileName: moveData.name,
+			itemType: moveData.type,
+		})
+	})
+}
+
+// Download
+async function handleDownload(item: FileItem) {
+	if (item.type === 'file') {
+		await ctx.downloadFile(item.path, item.name)
+	}
+}
+
+// Extract
+async function handleExtractItem(item: { name: string; type: string; path: string }) {
+	if (isBusy.value || !ctx.extractFile) return
+	try {
+		const dry = await ctx.extractFile(item.path, true, true)
+		if (dry) {
+			if (dry.conflicting_files.length === 0) {
+				handleExtractConfirm(item.path)
+			} else {
+				uploadConflictModal.value?.show(item.path, dry.conflicting_files)
+			}
+		} else {
+			addNotification({
+				title: formatMessage(messages.dryRunFailedTitle),
+				text: formatMessage(messages.dryRunFailedText),
+				type: 'error',
+			})
+		}
+	} catch (error) {
+		addNotification({
+			title: formatMessage(messages.extractFailedTitle),
+			text: error instanceof Error ? error.message : '',
+			type: 'error',
+		})
+	}
+}
+
+async function handleExtractConfirm(path: string) {
+	if (!ctx.extractFile) return
+	try {
+		await ctx.extractFile(path, true, false)
+		addNotification({ title: formatMessage(messages.extractionStartedTitle), type: 'success' })
+	} catch (error) {
+		addNotification({
+			title: formatMessage(messages.extractFailedTitle),
+			text: error instanceof Error ? error.message : '',
+			type: 'error',
+		})
+	}
+}
+
+// Modal show helpers
+function showCreateModal(type: 'file' | 'directory') {
+	if (isBusy.value) return
+	newItemType.value = type
+	createItemModal.value?.show()
+}
+
+function showUnzipFromUrlModal(cf: boolean) {
+	if (isBusy.value) return
+	uploadZipUrlModal.value?.show(cf)
+}
+
+function showRenameModal(item: FileItem) {
+	if (isBusy.value) return
+	selectedItem.value = item
+	renameItemModal.value?.show(item)
+}
+
+function showMoveModal(item: FileItem) {
+	if (isBusy.value) return
+	selectedItem.value = item
+	moveItemModal.value?.show()
+}
+
+function showDeleteModal(item: FileItem) {
+	if (isBusy.value) return
+	selectedItem.value = item
+	deleteItemModal.value?.show()
+}
+
+function showBulkDeleteModal() {
+	if (isBusy.value) return
+	if (selectedItems.value.size === 0) return
+
+	const itemsToDelete = Array.from(selectedItems.value)
+	for (const path of itemsToDelete) {
+		const item = items.value.find((i) => i.path === path)
+		if (item) {
+			ctx.deleteItem(path, item.type === 'directory')
+		}
+	}
+	deselectAll()
+}
+
+// Upload
+function handleDroppedFiles(files: File[]) {
+	if (isEditing.value || isBusy.value) return
+	ctx.uploadFiles(files)
+}
+
+function initiateFileUpload() {
+	if (isBusy.value) return
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.multiple = true
+	input.onchange = () => {
+		if (input.files) {
+			ctx.uploadFiles(Array.from(input.files))
+		}
+	}
+	input.click()
+}
+
+// Prefetch
+let prefetchTimeout: ReturnType<typeof setTimeout> | null = null
+let prefetchHomeTimeout: ReturnType<typeof setTimeout> | null = null
+
+function handleItemHover(item: { type: string; path: string; name: string }) {
+	if (prefetchTimeout) {
+		clearTimeout(prefetchTimeout)
+		prefetchTimeout = null
+	}
+
+	if (item.type === 'directory') {
+		prefetchTimeout = setTimeout(() => {
+			const currentPath = ctx.currentPath.value
+			const navPath = currentPath.endsWith('/')
+				? `${currentPath}${item.name}`
+				: `${currentPath}/${item.name}`
+			ctx.prefetchDirectory?.(navPath)
+		}, 150)
+	} else {
+		prefetchTimeout = setTimeout(() => {
+			ctx.prefetchFile?.(item.path)
+		}, 150)
+	}
+}
+
+function handlePrefetchHome() {
+	if (prefetchHomeTimeout) {
+		clearTimeout(prefetchHomeTimeout)
+		prefetchHomeTimeout = null
+	}
+	prefetchHomeTimeout = setTimeout(() => {
+		ctx.prefetchDirectory?.('/')
+	}, 150)
+}
+
+// Context menu
+function handleContextMenu(item: FileItem, x: number, y: number) {
+	const wd = isBusy.value
+	const wdTooltip = busyTooltip.value
+	const isZip = getFileExtension(item.name) === 'zip'
+
+	const options: FileContextMenuOption[] = [
+		{
+			id: 'extract',
+			shown: isZip && !!ctx.extractFile,
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => handleExtractItem(item),
+		},
+		{ divider: true, shown: isZip && !!ctx.extractFile },
+		{
+			id: 'rename',
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => showRenameModal(item),
+		},
+		{
+			id: 'move',
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => showMoveModal(item),
+		},
+		{
+			id: 'download',
+			action: () => handleDownload(item),
+			shown: item.type !== 'directory',
+		},
+		{
+			id: 'delete',
+			disabled: wd,
+			tooltip: wd ? wdTooltip : undefined,
+			action: () => showDeleteModal(item),
+			color: 'red',
+		},
+	]
+
+	contextMenuRef.value?.show(item, x, y, options)
+}
+
+// Reset search/sort/selection on path change
+watch(
+	() => ctx.currentPath.value,
+	() => {
+		searchQuery.value = ''
+		resetSort()
+		deselectAll()
+	},
+)
+
+// Keyboard shortcuts
+onMounted(() => {
+	document.addEventListener('keydown', onKeydown)
+})
+
+onUnmounted(() => {
+	document.removeEventListener('keydown', onKeydown)
+})
+</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);
+}
+</style>
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
new file mode 100644
index 0000000000..4eb5ba6e35
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -0,0 +1,72 @@
+import type { ComputedRef, Ref } from 'vue'
+
+import { createContext } from '#ui/providers/create-context'
+
+import type {
+	EditingFile,
+	ExtractDryRunResult,
+	FileItem,
+	FileOperation,
+	UploadState,
+} from '../types'
+
+export interface FileManagerContext {
+	items: Ref<FileItem[]>
+	loading: Ref<boolean>
+	error: Ref<Error | null>
+
+	currentPath: Ref<string>
+	navigateTo: (path: string) => void
+
+	editingFile: Ref<EditingFile | null>
+	startEditing: (file: EditingFile) => void
+	stopEditing: () => void
+
+	createItem: (name: string, type: 'file' | 'directory') => Promise<void>
+	renameItem: (path: string, newName: string) => Promise<void>
+	moveItem: (source: string, destination: string) => Promise<void>
+	deleteItem: (path: string, recursive: boolean) => Promise<void>
+
+	readFile: (path: string) => Promise<string>
+	readFileAsBlob: (path: string) => Promise<Blob>
+	writeFile: (path: string, content: string) => Promise<void>
+	downloadFile: (path: string, fileName: string) => Promise<void>
+
+	uploadFiles: (files: File[]) => void
+	cancelUpload?: () => void
+	uploadState?: Ref<UploadState> | ComputedRef<UploadState>
+
+	refresh: () => void
+
+	isBusy?: Ref<boolean> | ComputedRef<boolean>
+	busyTooltip?: Ref<string | undefined> | ComputedRef<string | undefined>
+	busyWarning?: Ref<string | null> | ComputedRef<string | null>
+
+	extractFile?: (
+		path: string,
+		override: boolean,
+		dry: boolean,
+	) => Promise<ExtractDryRunResult | void>
+	activeOperations?: Ref<FileOperation[]> | ComputedRef<FileOperation[]>
+	dismissOperation?: (id: string, action: 'dismiss' | 'cancel') => void
+
+	prefetchDirectory?: (path: string) => void
+	prefetchFile?: (path: string) => void
+
+	showInstallFromUrl?: boolean
+	basePath?: Ref<string> | ComputedRef<string>
+	openInFolder?: (path: string) => void
+
+	downloadButtonLabel?: string
+	uploadingLabel?: (completed: number, total: number) => string
+
+	canRestart?: boolean
+	restartServer?: () => Promise<void>
+	canShareToMclogs?: boolean
+	shareToMclogs?: (content: string) => Promise<void>
+}
+
+export const [injectFileManager, provideFileManager] = createContext<FileManagerContext>(
+	'FilePageLayout',
+	'fileManagerContext',
+)
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/index.ts b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
new file mode 100644
index 0000000000..8772a59621
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
@@ -0,0 +1,2 @@
+export type { FileManagerContext } from './file-manager'
+export { injectFileManager, provideFileManager } from './file-manager'
diff --git a/packages/ui/src/layouts/shared/files-tab/types.ts b/packages/ui/src/layouts/shared/files-tab/types.ts
new file mode 100644
index 0000000000..12416aa5e0
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/types.ts
@@ -0,0 +1,69 @@
+export interface FileItem {
+	name: string
+	type: 'file' | 'directory' | 'symlink'
+	path: string
+	modified: number
+	created: number
+	size?: number
+	count?: number
+	target?: string
+}
+
+export interface EditingFile {
+	name: string
+	path: string
+}
+
+export type FileSortField = 'name' | 'size' | 'created' | 'modified'
+
+export type FileViewFilter = 'all' | 'filesOnly' | 'foldersOnly'
+
+export type FileContextMenuOption =
+	| {
+			id: string
+			action?: () => void
+			disabled?: boolean
+			tooltip?: string
+			color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
+			shown?: boolean
+	  }
+	| { divider: true; shown?: boolean }
+
+export interface FileOperation {
+	id?: string
+	op: string
+	src: string
+	state: string
+	progress?: number
+	bytes_processed?: number
+	files_processed?: number
+	current_file?: string
+}
+
+export interface UndoableOperation {
+	type: 'move' | 'rename'
+	itemType: string
+	fileName: string
+}
+
+export interface MoveOperation extends UndoableOperation {
+	type: 'move'
+	sourcePath: string
+	destinationPath: string
+}
+
+export interface RenameOperation extends UndoableOperation {
+	type: 'rename'
+	path: string
+	oldName: string
+	newName: string
+}
+
+export type Operation = MoveOperation | RenameOperation
+
+export interface ExtractDryRunResult {
+	modpack_name: string | null
+	conflicting_files: string[]
+}
+
+export type { UploadState } from '@modrinth/api-client'
diff --git a/packages/ui/src/layouts/shared/installation-settings/layout.vue b/packages/ui/src/layouts/shared/installation-settings/layout.vue
index d519bfc11f..d23d53d726 100644
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -21,10 +21,10 @@ import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Chips from '#ui/components/base/Chips.vue'
 import Combobox from '#ui/components/base/Combobox.vue'
+import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
-import ConfirmLeaveModal from '../content-tab/components/modals/ConfirmLeaveModal.vue'
 import ConfirmModpackUpdateModal from '../content-tab/components/modals/ConfirmModpackUpdateModal.vue'
 import ConfirmReinstallModal from '../content-tab/components/modals/ConfirmReinstallModal.vue'
 import ConfirmRepairModal from '../content-tab/components/modals/ConfirmRepairModal.vue'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
index 077a69604d..5b0751f9af 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
+import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
 	injectModrinthClient,
@@ -13,7 +14,6 @@ import {
 } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
-import ConfirmLeaveModal from '../../../shared/content-tab/components/modals/ConfirmLeaveModal.vue'
 import ConfirmModpackUpdateModal from '../../../shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue'
 import ConfirmUnlinkModal from '../../../shared/content-tab/components/modals/ConfirmUnlinkModal.vue'
 import ContentUpdaterModal from '../../../shared/content-tab/components/modals/ContentUpdaterModal.vue'
@@ -88,6 +88,18 @@ const messages = defineMessages({
 	},
 })
 
+const leaveMessages = defineMessages({
+	uploadInProgress: {
+		id: 'instances.confirm-leave-modal.upload-in-progress',
+		defaultMessage: 'Upload in progress',
+	},
+	leavePageBody: {
+		id: 'instances.confirm-leave-modal.body',
+		defaultMessage:
+			'Files are still being uploaded. Leaving this page will cancel the upload and your changes may be lost.',
+	},
+})
+
 const props = withDefaults(
 	defineProps<{
 		showClientOnlyFilter?: boolean
@@ -971,5 +983,10 @@ provideContentManager({
 		@confirm="handleModpackUpdateConfirm"
 		@cancel="handleModpackUpdateCancel"
 	/>
-	<ConfirmLeaveModal ref="confirmLeaveModal" />
+	<ConfirmLeaveModal
+		ref="confirmLeaveModal"
+		:header="formatMessage(leaveMessages.uploadInProgress)"
+		:body="formatMessage(leaveMessages.leavePageBody)"
+		admonition-type="critical"
+	/>
 </template>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 70ade05d78..59319f2ae5 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -1,328 +1,40 @@
-<template>
-	<FileCreateItemModal ref="createItemModal" :type="newItemType" @create="handleCreateNewItem" />
-	<FileUploadConflictModal ref="uploadConflictModal" @proceed="extractItem" />
-	<FileUploadZipUrlModal ref="uploadZipUrlModal" />
-	<FileRenameItemModal ref="renameItemModal" :item="selectedItem" @rename="handleRenameItem" />
-	<FileMoveItemModal
-		ref="moveItemModal"
-		:item="selectedItem"
-		:current-path="currentPath"
-		@move="handleMoveItem"
-	/>
-	<FileDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
-	<Transition name="fade" mode="out-in">
-		<div
-			v-if="isLoading && items.length === 0"
-			key="loading"
-			class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
-		>
-			<SpinnerIcon class="animate-spin" />
-			Loading files...
-		</div>
-
-		<div v-else key="content" class="contents">
-			<Admonition v-if="nonBackupBusyReasons.length > 0" type="warning" class="mb-5">
-				<template #header>{{ formatMessage(nonBackupBusyReasons[0].reason) }}</template>
-				File operations are disabled while the operation is in progress.
-			</Admonition>
-			<div class="relative flex w-full flex-col">
-				<div class="relative isolate flex w-full flex-col gap-2">
-					<FileNavbar
-						:breadcrumbs="breadcrumbSegments"
-						:is-editing="isEditing"
-						:editing-file-name="editingFile?.name"
-						:editing-file-path="editingFile?.path"
-						:is-editing-image="fileEditorRef?.isEditingImage"
-						:search-query="searchQuery"
-						:show-refresh-button="showRefreshButton"
-						:base-id="baseId"
-						:disabled="serverBusy"
-						:disabled-tooltip="busyTooltip"
-						@navigate="navigateToSegment"
-						@navigate-home="() => navigateToSegment(-1)"
-						@prefetch-home="handlePrefetchHome"
-						@update:search-query="searchQuery = $event"
-						@create="showCreateModal"
-						@upload="initiateFileUpload"
-						@upload-zip="() => {}"
-						@unzip-from-url="showUnzipFromUrlModal"
-						@refresh="refreshList"
-						@save="() => fileEditorRef?.saveFileContent(true)"
-						@save-as="() => fileEditorRef?.saveFileContent(false)"
-						@save-restart="() => fileEditorRef?.saveAndRestart()"
-						@share="() => fileEditorRef?.shareToMclogs()"
-					/>
-
-					<div v-if="!isEditing" class="contents">
-						<FileUploadDragAndDrop
-							ref="fileUploadRef"
-							class="relative flex flex-col shadow-md"
-							@files-dropped="handleDroppedFiles"
-						>
-							<FileLabelBar
-								:sort-field="sortMethod"
-								:sort-desc="sortDesc"
-								:all-selected="allSelected"
-								:some-selected="someSelected"
-								:is-stuck="isLabelBarStuck"
-								@sort="handleSort"
-								@toggle-all="toggleSelectAll"
-							/>
-							<div
-								v-for="op in ops"
-								:key="`fs-op-${op.op}-${op.src}`"
-								class="sticky top-20 z-20 grid grid-cols-[auto_1fr_auto] items-center gap-2 border-0 border-b-[1px] border-solid border-button-bg bg-table-alternateRow px-4 py-2 md:grid-cols-[auto_1fr_1fr_2fr_auto]"
-							>
-								<div>
-									<PackageOpenIcon class="h-5 w-5 text-secondary" />
-								</div>
-								<div class="flex flex-wrap gap-x-4 gap-y-1 md:contents">
-									<div
-										class="flex items-center text-wrap break-all text-sm font-bold text-contrast"
-									>
-										Extracting
-										{{ op.src.includes('https://') ? 'modpack from URL' : op.src }}
-									</div>
-									<span
-										class="flex items-center gap-2 text-sm font-semibold"
-										:class="{
-											'text-green': op.state === 'done',
-											'text-red': op.state?.startsWith('fail'),
-											'text-orange': !op.state?.startsWith('fail') && op.state !== 'done',
-										}"
-									>
-										<template v-if="op.state === 'done'">
-											Done
-											<CheckIcon style="stroke-width: 3px" />
-										</template>
-										<template v-else-if="op.state?.startsWith('fail')">
-											Failed
-											<XIcon style="stroke-width: 3px" />
-										</template>
-										<template v-else-if="op.state === 'cancelled'">
-											<SpinnerIcon class="animate-spin" />
-											Cancelling
-										</template>
-										<template v-else-if="op.state === 'queued'">
-											<SpinnerIcon class="animate-spin" />
-											Queued...
-										</template>
-										<template v-else-if="op.state === 'ongoing'">
-											<SpinnerIcon class="animate-spin" />
-											Extracting...
-										</template>
-										<template v-else>
-											<UnknownIcon />
-											Unknown state: {{ op.state }}
-										</template>
-									</span>
-									<div class="col-span-2 flex grow flex-col gap-1 md:col-span-1 md:items-end">
-										<div class="text-xs font-semibold text-contrast opacity-80">
-											<span
-												:class="{
-													invisible: 'current_file' in op && !op.current_file,
-												}"
-											>
-												{{
-													'current_file' in op
-														? (op.current_file?.split('/')?.pop() ?? 'unknown')
-														: 'unknown'
-												}}
-											</span>
-										</div>
-										<ProgressBar
-											:progress="'progress' in op ? op.progress : 0"
-											:max="1"
-											:color="
-												op.state === 'done'
-													? 'green'
-													: op.state?.startsWith('fail')
-														? 'red'
-														: op.state === 'cancelled'
-															? 'gray'
-															: 'orange'
-											"
-											:waiting="op.state === 'queued' || !op.progress || op.progress === 0"
-										/>
-										<div
-											class="text-xs text-secondary opacity-80"
-											:class="{
-												invisible: 'bytes_processed' in op && !op.bytes_processed,
-											}"
-										>
-											{{ 'bytes_processed' in op ? formatBytes(op.bytes_processed) : '0 B' }}
-											extracted
-										</div>
-									</div>
-								</div>
-
-								<div>
-									<ButtonStyled circular>
-										<button
-											:disabled="!('id' in op) || !op.id"
-											class="radial-progress-animation-overlay"
-											:class="{ active: op.state === 'done' }"
-											@click="
-												() => {
-													if ('id' in op && op.id) {
-														dismissOrCancelOp(op.id, op.state === 'done' ? 'dismiss' : 'cancel')
-													}
-												}
-											"
-										>
-											<XIcon />
-										</button>
-									</ButtonStyled>
-								</div>
-								<pre
-									v-if="showDebugInfo"
-									class="markdown-body col-span-full m-0 rounded-xl bg-button-bg text-xs"
-									>{{ op }}</pre
-								>
-							</div>
-							<FileUploadDropdown
-								ref="uploadDropdownRef"
-								class="border-0 border-t border-solid border-bg bg-table-alternateRow"
-								:current-path="currentPath"
-								@upload-complete="refreshList()"
-							/>
-							<Transition name="fade" mode="out-in">
-								<div v-if="items.length > 0" key="list" class="h-full w-full overflow-hidden">
-									<FileVirtualList
-										:items="filteredItems"
-										:selected-items="selectedItems"
-										:write-disabled="serverBusy"
-										:write-disabled-tooltip="busyTooltip"
-										@extract="handleExtractItem"
-										@delete="showDeleteModal"
-										@rename="showRenameModal"
-										@download="downloadFile"
-										@move="showMoveModal"
-										@move-direct-to="handleDirectMove"
-										@edit="editFile"
-										@hover="handleItemHover"
-										@load-more="handleLoadMore"
-										@toggle-select="toggleItemSelection"
-									/>
-								</div>
-								<div
-									v-else-if="items.length === 0 && !loadError"
-									key="empty"
-									class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
-								>
-									<div class="flex flex-col items-center gap-4 text-center">
-										<FolderOpenIcon class="h-16 w-16 text-secondary" />
-										<h3 class="m-0 text-2xl font-bold text-contrast">This folder is empty</h3>
-										<p class="m-0 text-sm text-secondary">There are no files or folders.</p>
-									</div>
-								</div>
-								<FileManagerError
-									v-else-if="loadError"
-									key="error"
-									class="rounded-b-[20px]"
-									title="Unable to load files"
-									message="The folder may not exist."
-									@refetch="refreshList"
-									@home="navigateToSegment(-1)"
-								/>
-							</Transition>
-						</FileUploadDragAndDrop>
-					</div>
-					<FileEditor
-						v-else
-						ref="fileEditorRef"
-						:file="editingFile"
-						:editor-component="VAceEditor"
-						@close="handleEditorClose"
-					/>
-				</div>
-			</div>
-
-			<FloatingActionBar :shown="selectedItems.size > 0">
-				<ButtonStyled circular>
-					<button @click="deselectAll">
-						<XIcon class="h-4 w-4" />
-					</button>
-				</ButtonStyled>
-				<span class="text-sm font-medium text-contrast"> {{ selectedItems.size }} selected </span>
-				<div class="ml-auto flex items-center gap-2">
-					<ButtonStyled>
-						<button v-tooltip="busyTooltip" :disabled="serverBusy" @click="showBulkMoveModal">
-							<RightArrowIcon class="h-4 w-4" />
-							Move
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="red">
-						<button v-tooltip="busyTooltip" :disabled="serverBusy" @click="showBulkDeleteModal">
-							<TrashIcon class="h-4 w-4" />
-							Delete
-						</button>
-					</ButtonStyled>
-				</div>
-			</FloatingActionBar>
-		</div>
-	</Transition>
-</template>
-
 <script setup lang="ts">
 import type { Archon, Kyros } from '@modrinth/api-client'
-import {
-	CheckIcon,
-	FolderOpenIcon,
-	PackageOpenIcon,
-	RightArrowIcon,
-	SpinnerIcon,
-	TrashIcon,
-	UnknownIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
-import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
-import { computed, inject, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
-import ProgressBar from '#ui/components/base/ProgressBar.vue'
-import {
-	FileEditor,
-	FileLabelBar,
-	FileManagerError,
-	FileNavbar,
-	FileUploadDragAndDrop,
-	FileUploadDropdown,
-	FileVirtualList,
-} from '#ui/components/servers/files'
-import {
-	FileCreateItemModal,
-	FileDeleteItemModal,
-	FileMoveItemModal,
-	FileRenameItemModal,
-	FileUploadConflictModal,
-	FileUploadZipUrlModal,
-} from '#ui/components/servers/files/modals'
 import { useVIntl } from '#ui/composables/i18n'
-import { useStickyObserver } from '#ui/composables/sticky-observer'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '#ui/providers'
-import { getFileExtension, isEditableFile as isEditableFileCheck } from '#ui/utils/file-extensions'
 
-defineProps<{
+import FilePageLayout from '../../../shared/files-tab/layout.vue'
+import { provideFileManager } from '../../../shared/files-tab/providers/file-manager'
+import type {
+	EditingFile,
+	FileItem,
+	FileOperation,
+	UploadState,
+} from '../../../shared/files-tab/types'
+
+const props = defineProps<{
 	showDebugInfo?: boolean
 	showRefreshButton?: boolean
 }>()
 
-const notifications = injectNotificationManager()
-const { addNotification } = notifications
 const client = injectModrinthClient()
 const serverContext = injectModrinthServerContext()
 const { serverId, fsOps, fsQueuedOps, busyReasons } = serverContext
-
+const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+
+const route = useRoute()
+const router = useRouter()
+const queryClient = useQueryClient()
+
 const serverBusy = computed(() => busyReasons.value.length > 0)
 const busyTooltip = computed(() =>
 	busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
@@ -334,174 +46,96 @@ const nonBackupBusyReasons = computed(() =>
 			r.reason.id !== 'servers.busy.backup-restoring',
 	),
 )
-const queryClient = useQueryClient()
-
-interface BaseOperation {
-	type: 'move' | 'rename'
-	itemType: string
-	fileName: string
-}
 
-interface MoveOperation extends BaseOperation {
-	type: 'move'
-	sourcePath: string
-	destinationPath: string
-}
-
-interface RenameOperation extends BaseOperation {
-	type: 'rename'
-	path: string
-	oldName: string
-	newName: string
-}
+const busyWarning = computed(() =>
+	nonBackupBusyReasons.value.length > 0
+		? formatMessage(nonBackupBusyReasons.value[0].reason)
+		: null,
+)
 
-type Operation = MoveOperation | RenameOperation
+// Path & navigation
+const currentPath = computed(() => (typeof route.query.path === 'string' ? route.query.path : '/'))
 
-interface InfiniteDirectoryData {
-	pages: Kyros.Files.v0.DirectoryResponse[]
-	pageParams: number[]
+function navigateTo(path: string) {
+	const { editing: _, ...query } = route.query
+	router.push({ query: { ...query, path } })
 }
 
-const modulesLoaded = inject<Promise<void>>('modulesLoaded')
-
-const route = useRoute()
-const router = useRouter()
-
-const baseId = `files-${Math.random().toString(36).slice(2, 9)}`
-const operationHistory = ref<Operation[]>([])
-const redoStack = ref<Operation[]>([])
-
-const searchQuery = ref('')
-const sortMethod = ref('name')
-const sortDesc = ref(false)
+// Editing state (synced with URL)
+const editingFile = ref<EditingFile | null>(null)
 
-const selectedItems = ref<Set<string>>(new Set())
-
-function toggleItemSelection(path: string) {
-	const newSet = new Set(selectedItems.value)
-	if (newSet.has(path)) {
-		newSet.delete(path)
-	} else {
-		newSet.add(path)
-	}
-	selectedItems.value = newSet
+function startEditing(file: EditingFile) {
+	editingFile.value = file
+	router.push({ query: { ...route.query, path: currentPath.value, editing: file.path } })
 }
 
-function selectAll() {
-	selectedItems.value = new Set(filteredItems.value.map((i) => i.path))
+function stopEditing() {
+	editingFile.value = null
+	const newQuery = { ...route.query }
+	delete newQuery.editing
+	router.replace({ query: newQuery })
 }
 
-function deselectAll() {
-	selectedItems.value = new Set()
-}
+// Sync editing state from URL
+watch(
+	() => route.query,
+	(newQuery, oldQuery) => {
+		if (newQuery.editing && editingFile.value?.path !== newQuery.editing) {
+			editingFile.value = {
+				name: (newQuery.editing as string).split('/').pop() || '',
+				path: newQuery.editing as string,
+			}
+		} else if (oldQuery?.editing && !newQuery.editing) {
+			editingFile.value = null
+		}
+	},
+	{ deep: true },
+)
 
-function toggleSelectAll() {
-	if (allSelected.value) {
-		deselectAll()
-	} else {
-		selectAll()
+// Initialize editing from URL on mount
+function initializeFileEdit() {
+	if (!route.query.editing) return
+	const filePath = route.query.editing as string
+	editingFile.value = {
+		name: filePath.split('/').pop() || '',
+		path: filePath,
 	}
 }
 
-const allSelected = computed(
-	() => filteredItems.value.length > 0 && selectedItems.value.size === filteredItems.value.length,
-)
-
-const someSelected = computed(
-	() => selectedItems.value.size > 0 && selectedItems.value.size < filteredItems.value.length,
-)
-
-const currentPath = computed(() => (typeof route.query.path === 'string' ? route.query.path : '/'))
-
-const createItemModal = ref<InstanceType<typeof FileCreateItemModal>>()
-const renameItemModal = ref<InstanceType<typeof FileRenameItemModal>>()
-const moveItemModal = ref<InstanceType<typeof FileMoveItemModal>>()
-const deleteItemModal = ref<InstanceType<typeof FileDeleteItemModal>>()
-const uploadConflictModal = ref<InstanceType<typeof FileUploadConflictModal>>()
-const uploadZipUrlModal = ref<InstanceType<typeof FileUploadZipUrlModal>>()
-
-const newItemType = ref<'file' | 'directory'>('file')
-const selectedItem = ref<Kyros.Files.v0.DirectoryItem | null>(null)
-
-const isEditing = ref(false)
-const editingFile = ref<{ name: string; type: string; path: string } | null>(null)
-const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
-
-const uploadDropdownRef = ref<InstanceType<typeof FileUploadDropdown>>()
-
-const VAceEditor = ref()
-
-const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
-const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
-const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl)
-
-const viewFilter = ref('all')
-
+// Directory listing query
 const {
 	data: directoryData,
 	isLoading,
 	error: loadError,
-	fetchNextPage,
-	hasNextPage,
-	isFetchingNextPage,
-} = useInfiniteQuery({
+} = useQuery({
 	queryKey: computed(() => ['files', serverId, currentPath.value]),
-	queryFn: async ({ pageParam = 1 }) => {
-		if (modulesLoaded) await modulesLoaded
-		return client.kyros.files_v0.listDirectory(currentPath.value, pageParam, 100)
-	},
-	getNextPageParam: (lastPage, allPages) => {
-		const pageSize = 100
-		if (lastPage.items.length >= pageSize) {
-			return allPages.length + 1
-		}
-
-		if (lastPage.current < lastPage.total) {
-			return lastPage.current + 1
-		}
-		return undefined
+	queryFn: async () => {
+		return client.kyros.files_v0.listDirectory(currentPath.value, 1, 2000)
 	},
 	staleTime: 30_000,
-	initialPageParam: 1,
 })
 
-const items = computed(() => directoryData.value?.pages.flatMap((page) => page.items) ?? [])
+const items = computed<FileItem[]>(() => directoryData.value?.items ?? [])
 
+// Prefetching
 function prefetchDirectory(path: string) {
-	queryClient.prefetchInfiniteQuery({
+	queryClient.prefetchQuery({
 		queryKey: ['files', serverId, path],
 		queryFn: async () => {
-			if (modulesLoaded) await modulesLoaded
 			try {
-				return await client.kyros.files_v0.listDirectory(path, 1, 100)
+				return await client.kyros.files_v0.listDirectory(path, 1, 2000)
 			} catch {
 				return { items: [], total: 0, current: 1 }
 			}
 		},
-		initialPageParam: 1,
 		staleTime: 30_000,
 	})
 }
 
-let prefetchTimeout: ReturnType<typeof setTimeout> | null = null
-let prefetchHomeTimeout: ReturnType<typeof setTimeout> | null = null
-
-function handlePrefetchHome() {
-	if (prefetchHomeTimeout) {
-		clearTimeout(prefetchHomeTimeout)
-		prefetchHomeTimeout = null
-	}
-
-	prefetchHomeTimeout = setTimeout(() => {
-		prefetchDirectory('/')
-	}, 150)
-}
-
-function prefetchFileContent(path: string) {
+function prefetchFile(path: string) {
 	queryClient.prefetchQuery({
 		queryKey: ['file-content', serverId, path],
 		queryFn: async () => {
-			if (modulesLoaded) await modulesLoaded
 			try {
 				const blob = await client.kyros.files_v0.downloadFile(path)
 				return await blob.text()
@@ -513,66 +147,39 @@ function prefetchFileContent(path: string) {
 	})
 }
 
-function handleItemHover(item: { type: string; path: string; name: string }) {
-	if (prefetchTimeout) {
-		clearTimeout(prefetchTimeout)
-		prefetchTimeout = null
-	}
-
-	if (item.type === 'directory') {
-		prefetchTimeout = setTimeout(() => {
-			const routePath = typeof route.query.path === 'string' ? route.query.path : ''
-			const navPath = routePath.endsWith('/')
-				? `${routePath}${item.name}`
-				: `${routePath}/${item.name}`
-			prefetchDirectory(navPath)
-		}, 150)
-	} else if (item.type === 'file') {
-		const ext = getFileExtension(item.name)
-		if (isEditableFileCheck(ext)) {
-			prefetchTimeout = setTimeout(() => {
-				prefetchFileContent(item.path)
-			}, 150)
-		}
-	}
-}
-
 function getQueryKey() {
 	return ['files', serverId, currentPath.value]
 }
 
+function refreshList() {
+	queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+}
+
+// Mutations
 const deleteMutation = useMutation({
 	mutationFn: ({ path, recursive }: { path: string; recursive: boolean }) =>
 		client.kyros.files_v0.deleteFileOrFolder(path, recursive),
-
 	onMutate: async ({ path }) => {
 		const queryKey = getQueryKey()
 		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
-
-		queryClient.setQueryData(queryKey, (old: InfiniteDirectoryData | undefined) => {
+		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return {
-				...old,
-				pages: old.pages.map((page) => ({
-					...page,
-					items: page.items.filter((item) => item.path !== path),
-					total: Math.max(0, page.total - 1),
-				})),
-			}
+			return { ...old, items: old.items.filter((item) => item.path !== path) }
 		})
 		return { previous }
 	},
-
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
 		addNotification({ title: 'Delete failed', text: err.message, type: 'error' })
 	},
-
 	onSuccess: () => {
-		addNotification({ title: 'File deleted', text: 'Your file has been deleted.', type: 'success' })
+		addNotification({
+			title: 'File deleted',
+			text: 'Your file has been deleted.',
+			type: 'success',
+		})
 	},
-
 	onSettled: () => {
 		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
@@ -581,38 +188,34 @@ const deleteMutation = useMutation({
 const renameMutation = useMutation({
 	mutationFn: ({ path, newName }: { path: string; newName: string }) =>
 		client.kyros.files_v0.renameFileOrFolder(path, newName),
-
 	onMutate: async ({ path, newName }) => {
 		const queryKey = getQueryKey()
 		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
-
-		queryClient.setQueryData(queryKey, (old: InfiniteDirectoryData | undefined) => {
+		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
 			return {
 				...old,
-				pages: old.pages.map((page) => ({
-					...page,
-					items: page.items.map((item) =>
-						item.path === path
-							? { ...item, name: newName, path: item.path.replace(/[^/]+$/, newName) }
-							: item,
-					),
-				})),
+				items: old.items.map((item) =>
+					item.path === path
+						? {
+								...item,
+								name: newName,
+								path: item.path.replace(/[^/]+$/, newName),
+							}
+						: item,
+				),
 			}
 		})
 		return { previous }
 	},
-
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
 		addNotification({ title: 'Rename failed', text: err.message, type: 'error' })
 	},
-
 	onSuccess: (_, { newName }) => {
 		addNotification({ title: 'Renamed', text: `Renamed to ${newName}`, type: 'success' })
 	},
-
 	onSettled: () => {
 		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
@@ -621,35 +224,23 @@ const renameMutation = useMutation({
 const moveMutation = useMutation({
 	mutationFn: ({ source, destination }: { source: string; destination: string }) =>
 		client.kyros.files_v0.moveFileOrFolder(source, destination),
-
 	onMutate: async ({ source }) => {
 		const queryKey = getQueryKey()
 		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
-
-		queryClient.setQueryData(queryKey, (old: InfiniteDirectoryData | undefined) => {
+		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return {
-				...old,
-				pages: old.pages.map((page) => ({
-					...page,
-					items: page.items.filter((item) => item.path !== source),
-					total: Math.max(0, page.total - 1),
-				})),
-			}
+			return { ...old, items: old.items.filter((item) => item.path !== source) }
 		})
 		return { previous }
 	},
-
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
 		addNotification({ title: 'Move failed', text: err.message, type: 'error' })
 	},
-
 	onSuccess: (_, { destination }) => {
 		addNotification({ title: 'Moved', text: `Moved to ${destination}`, type: 'success' })
 	},
-
 	onSettled: () => {
 		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
@@ -658,15 +249,12 @@ const moveMutation = useMutation({
 const createMutation = useMutation({
 	mutationFn: ({ path, type }: { path: string; type: 'file' | 'directory' }) =>
 		client.kyros.files_v0.createFileOrFolder(path, type),
-
 	onMutate: async ({ path, type }) => {
 		const queryKey = getQueryKey()
 		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
-
 		const name = path.split('/').pop()!
 		const now = Math.floor(Date.now() / 1000)
-
 		const newItem: Kyros.Files.v0.DirectoryItem = {
 			name,
 			path,
@@ -675,29 +263,16 @@ const createMutation = useMutation({
 			created: now,
 			...(type === 'directory' ? { count: 0 } : { size: 0 }),
 		}
-		queryClient.setQueryData(queryKey, (old: InfiniteDirectoryData | undefined) => {
+		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return {
-				...old,
-				pages: old.pages.map((page, i) =>
-					i === 0
-						? {
-								...page,
-								items: [newItem, ...page.items],
-								total: page.total + 1,
-							}
-						: page,
-				),
-			}
+			return { ...old, items: [newItem, ...old.items] }
 		})
 		return { previous }
 	},
-
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
 		addNotification({ title: 'Create failed', text: err.message, type: 'error' })
 	},
-
 	onSuccess: (_, { path, type }) => {
 		const name = path.split('/').pop()
 		addNotification({
@@ -706,467 +281,73 @@ const createMutation = useMutation({
 			type: 'success',
 		})
 	},
-
 	onSettled: () => {
 		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
 })
 
-const extractMutation = useMutation({
-	mutationFn: ({ path, override }: { path: string; override: boolean }) =>
-		client.kyros.files_v0.extractFile(path, override, false),
-
-	onSuccess: () => {
-		addNotification({ title: 'Extraction started', type: 'success' })
-	},
-
-	onError: (err: Error) => {
-		addNotification({ title: 'Extract failed', text: err.message, type: 'error' })
-	},
-
-	onSettled: () => {
-		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
-	},
-})
-
-function refreshList() {
-	queryClient.invalidateQueries({ queryKey: ['files', serverId] })
-}
-
-async function undoLastOperation() {
-	const lastOperation = operationHistory.value.pop()
-	if (!lastOperation) return
-
-	try {
-		switch (lastOperation.type) {
-			case 'move':
-				await client.kyros.files_v0.moveFileOrFolder(
-					`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
-					`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
-				)
-				break
-			case 'rename':
-				await client.kyros.files_v0.renameFileOrFolder(
-					`${lastOperation.path}/${lastOperation.newName}`.replace('//', '/'),
-					lastOperation.oldName,
-				)
-				break
-		}
-
-		redoStack.value.push(lastOperation)
-
-		refreshList()
-		addNotification({
-			title: `${lastOperation.type === 'move' ? 'Move' : 'Rename'} undone`,
-			text: `${lastOperation.fileName} has been restored to its original ${lastOperation.type === 'move' ? 'location' : 'name'}`,
-			type: 'success',
-		})
-	} catch (error) {
-		console.error(`Error undoing ${lastOperation.type}:`, error)
-		addNotification({
-			title: 'Undo failed',
-			text: `Failed to undo the last ${lastOperation.type} operation`,
-			type: 'error',
-		})
-	}
-}
-
-async function redoLastOperation() {
-	const lastOperation = redoStack.value.pop()
-	if (!lastOperation) return
-
-	try {
-		switch (lastOperation.type) {
-			case 'move':
-				await client.kyros.files_v0.moveFileOrFolder(
-					`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
-					`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
-				)
-				break
-			case 'rename':
-				await client.kyros.files_v0.renameFileOrFolder(
-					`${lastOperation.path}/${lastOperation.oldName}`.replace('//', '/'),
-					lastOperation.newName,
-				)
-				break
-		}
-
-		operationHistory.value.push(lastOperation)
-
-		refreshList()
-		addNotification({
-			title: `${lastOperation.type === 'move' ? 'Move' : 'Rename'} redone`,
-			text: `${lastOperation.fileName} has been ${lastOperation.type === 'move' ? 'moved' : 'renamed'} again`,
-			type: 'success',
-		})
-	} catch (error) {
-		console.error(`Error redoing ${lastOperation.type}:`, error)
-		addNotification({
-			title: 'Redo failed',
-			text: `Failed to redo the last ${lastOperation.type} operation`,
-			type: 'error',
-		})
+// Extraction
+async function extractFile(path: string, override: boolean, dry: boolean) {
+	if (dry) {
+		return await client.kyros.files_v0.extractFile(path, override, true)
 	}
+	await client.kyros.files_v0.extractFile(path, override, false)
 }
 
-function handleCreateNewItem(name: string) {
-	const path = `${currentPath.value}/${name}`.replace('//', '/')
-	createMutation.mutate({ path, type: newItemType.value })
+// File I/O
+async function readFile(path: string): Promise<string> {
+	const normalizedPath = path.startsWith('/') ? path : `/${path}`
+	const cachedContent = queryClient.getQueryData<string>(['file-content', serverId, normalizedPath])
+	if (cachedContent) return cachedContent
+	const blob = await client.kyros.files_v0.downloadFile(normalizedPath)
+	return await blob.text()
 }
 
-function handleRenameItem(newName: string) {
-	const item = selectedItem.value
-	if (!item) return
-
-	const path = `${currentPath.value}/${item.name}`.replace('//', '/')
-
-	renameMutation.mutate(
-		{ path, newName },
-		{
-			onSuccess: () => {
-				redoStack.value = []
-				operationHistory.value.push({
-					type: 'rename',
-					itemType: item.type,
-					fileName: item.name,
-					path: currentPath.value,
-					oldName: item.name,
-					newName,
-				})
-			},
-		},
-	)
+async function readFileAsBlob(path: string): Promise<Blob> {
+	const normalizedPath = path.startsWith('/') ? path : `/${path}`
+	return await client.kyros.files_v0.downloadFile(normalizedPath)
 }
 
-const localQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-
-function extractItem(path: string) {
-	localQueuedOps.value.push({ op: 'unarchive', src: path })
-	setTimeout(() => {
-		localQueuedOps.value = localQueuedOps.value.filter(
-			(x) => x.op !== 'unarchive' || x.src !== path,
-		)
-	}, 4000)
-
-	extractMutation.mutate(
-		{ path, override: true },
-		{
-			onError: () => {
-				localQueuedOps.value = localQueuedOps.value.filter(
-					(x) => x.op !== 'unarchive' || x.src !== path,
-				)
-			},
-		},
-	)
+async function writeFile(path: string, content: string): Promise<void> {
+	await client.kyros.files_v0.updateFile(path, content)
+	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
 }
 
-async function handleExtractItem(item: { name: string; type: string; path: string }) {
-	if (serverBusy.value) return
+async function downloadFile(path: string, fileName: string): Promise<void> {
 	try {
-		const dry = await client.kyros.files_v0.extractFile(item.path, true, true)
-		if (dry) {
-			if (dry.conflicting_files.length === 0) {
-				extractItem(item.path)
-			} else {
-				uploadConflictModal.value?.show(item.path, dry.conflicting_files)
-			}
-		} else {
-			addNotification({ title: 'Dry run failed', text: 'Error running dry run', type: 'error' })
+		const fileData = await client.kyros.files_v0.downloadFile(path)
+		if (fileData) {
+			const blob = new Blob([fileData], { type: 'application/octet-stream' })
+			const link = document.createElement('a')
+			link.href = window.URL.createObjectURL(blob)
+			link.download = fileName
+			link.click()
+			window.URL.revokeObjectURL(link.href)
 		}
-	} catch (error) {
-		console.error('Error extracting item:', error)
+	} catch {
 		addNotification({
-			title: 'Extract failed',
-			text: error instanceof Error ? error.message : 'Unknown error',
+			title: 'Download failed',
+			text: 'Could not download the file.',
 			type: 'error',
 		})
 	}
 }
 
-function handleMoveItem(destination: string) {
-	const item = selectedItem.value
-	if (!item) return
-
-	const sourcePath = currentPath.value
-	const source = `${sourcePath}/${item.name}`.replace('//', '/')
-	const dest = `${destination}/${item.name}`.replace('//', '/')
-
-	moveMutation.mutate(
-		{ source, destination: dest },
-		{
-			onSuccess: () => {
-				redoStack.value = []
-				operationHistory.value.push({
-					type: 'move',
-					sourcePath,
-					destinationPath: destination,
-					fileName: item.name,
-					itemType: item.type,
-				})
-			},
-		},
-	)
-}
-
-function handleDirectMove(moveData: {
-	name: string
-	type: string
-	path: string
-	destination: string
-}) {
-	if (serverBusy.value) return
-	const dest = `${moveData.destination}/${moveData.name}`.replace('//', '/')
-	const sourcePath = moveData.path.substring(0, moveData.path.lastIndexOf('/'))
-
-	moveMutation.mutate(
-		{ source: moveData.path, destination: dest },
-		{
-			onSuccess: () => {
-				redoStack.value = []
-				operationHistory.value.push({
-					type: 'move',
-					sourcePath,
-					destinationPath: moveData.destination,
-					fileName: moveData.name,
-					itemType: moveData.type,
-				})
-			},
-		},
-	)
-}
-
-function handleDeleteItem() {
-	const item = selectedItem.value
-	if (!item) return
-
-	const path = `${currentPath.value}/${item.name}`.replace('//', '/')
-	deleteMutation.mutate({ path, recursive: item.type === 'directory' })
-}
-
-function showCreateModal(type: 'file' | 'directory') {
-	if (serverBusy.value) return
-	newItemType.value = type
-	createItemModal.value?.show()
-}
-
-function showUnzipFromUrlModal(cf: boolean) {
-	if (serverBusy.value) return
-	uploadZipUrlModal.value?.show(cf)
-}
-
-function showRenameModal(item: Kyros.Files.v0.DirectoryItem) {
-	if (serverBusy.value) return
-	selectedItem.value = item
-	renameItemModal.value?.show(item)
-}
-
-function showMoveModal(item: Kyros.Files.v0.DirectoryItem) {
-	if (serverBusy.value) return
-	selectedItem.value = item
-	moveItemModal.value?.show()
-}
-
-function showDeleteModal(item: Kyros.Files.v0.DirectoryItem) {
-	if (serverBusy.value) return
-	selectedItem.value = item
-	deleteItemModal.value?.show()
-}
-
-async function showBulkMoveModal() {
-	addNotification({
-		title: 'Bulk move',
-		text: `Moving ${selectedItems.value.size} items is not yet implemented`,
-		type: 'info',
-	})
-}
-
-async function showBulkDeleteModal() {
-	if (serverBusy.value) return
-	if (selectedItems.value.size === 0) return
-
-	const itemsToDelete = Array.from(selectedItems.value)
-
-	for (const path of itemsToDelete) {
-		const item = items.value.find((i) => i.path === path)
-		if (item) {
-			deleteMutation.mutate({ path, recursive: item.type === 'directory' })
-		}
-	}
-
-	deselectAll()
-}
-
-function handleSort(field: string) {
-	if (sortMethod.value === field) {
-		sortDesc.value = !sortDesc.value
-	} else {
-		sortMethod.value = field
-		sortDesc.value = false
-	}
-}
-
-function applySort(items: Kyros.Files.v0.DirectoryItem[]) {
-	let result = [...items]
-
-	switch (viewFilter.value) {
-		case 'filesOnly':
-			result = result.filter((item) => item.type !== 'directory')
-			break
-		case 'foldersOnly':
-			result = result.filter((item) => item.type === 'directory')
-			break
-	}
-
-	function compareItems(a: Kyros.Files.v0.DirectoryItem, b: Kyros.Files.v0.DirectoryItem) {
-		if (viewFilter.value === 'all') {
-			if (a.type === 'directory' && b.type !== 'directory') return -1
-			if (a.type !== 'directory' && b.type === 'directory') return 1
-		}
-
-		switch (sortMethod.value) {
-			case 'modified':
-				return sortDesc.value ? a.modified - b.modified : b.modified - a.modified
-			case 'created':
-				return sortDesc.value ? a.created - b.created : b.created - a.created
-			case 'size': {
-				const aValue =
-					a.type === 'directory'
-						? 'count' in a && a.count !== undefined
-							? a.count
-							: 0
-						: 'size' in a && a.size !== undefined
-							? a.size
-							: 0
-				const bValue =
-					b.type === 'directory'
-						? 'count' in b && b.count !== undefined
-							? b.count
-							: 0
-						: 'size' in b && b.size !== undefined
-							? b.size
-							: 0
-				return sortDesc.value ? aValue - bValue : bValue - aValue
-			}
-			default:
-				return sortDesc.value ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name)
-		}
-	}
-
-	result.sort(compareItems)
-	return result
-}
-
-const filteredItems = computed(() => {
-	let result = [...items.value]
-
-	if (searchQuery.value) {
-		const query = searchQuery.value.toLowerCase()
-		result = result.filter((item) => item.name.toLowerCase().includes(query))
-	}
-
-	return applySort(result)
-})
-
-async function handleLoadMore() {
-	if (isFetchingNextPage.value || !hasNextPage.value) return
-	await fetchNextPage()
-}
-
-function onKeydown(e: KeyboardEvent) {
-	if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
-		e.preventDefault()
-		undoLastOperation()
-	}
-	if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
-		e.preventDefault()
-		redoLastOperation()
-	}
-}
-
-function editFile(item: { name: string; type: string; path: string }) {
-	editingFile.value = item
-	isEditing.value = true
-	router.push({ query: { ...route.query, path: currentPath.value, editing: item.path } })
-}
-
-function initializeFileEdit() {
-	if (!route.query.editing) return
-
-	const filePath = route.query.editing as string
-	editingFile.value = {
-		name: filePath.split('/').pop() || '',
-		type: 'file',
-		path: filePath,
-	}
-	isEditing.value = true
-}
-
-function handleEditorClose() {
-	isEditing.value = false
-	editingFile.value = null
-	const newQuery = { ...route.query }
-	delete newQuery.editing
-	router.replace({ query: newQuery })
-}
-
-onMounted(async () => {
-	if (modulesLoaded) await modulesLoaded
-
-	if (typeof window !== 'undefined') {
-		const { VAceEditor: Ace } = await import('vue3-ace-editor')
-		await Promise.all([
-			import('ace-builds/src-noconflict/mode-json'),
-			import('ace-builds/src-noconflict/mode-yaml'),
-			import('ace-builds/src-noconflict/mode-toml'),
-			import('ace-builds/src-noconflict/mode-sh'),
-			import('ace-builds/src-noconflict/mode-batchfile'),
-			import('ace-builds/src-noconflict/mode-powershell'),
-			import('ace-builds/src-noconflict/mode-java'),
-			import('ace-builds/src-noconflict/mode-javascript'),
-			import('ace-builds/src-noconflict/mode-typescript'),
-			import('ace-builds/src-noconflict/mode-python'),
-			import('ace-builds/src-noconflict/mode-ruby'),
-			import('ace-builds/src-noconflict/mode-php'),
-			import('ace-builds/src-noconflict/mode-html'),
-			import('ace-builds/src-noconflict/mode-css'),
-			import('ace-builds/src-noconflict/mode-c_cpp'),
-			import('ace-builds/src-noconflict/mode-rust'),
-			import('ace-builds/src-noconflict/mode-golang'),
-			import('ace-builds/src-noconflict/mode-markdown'),
-			import('ace-builds/src-noconflict/mode-properties'),
-			import('ace-builds/src-noconflict/mode-ini'),
-			import('ace-builds/src-noconflict/mode-text'),
-			import('#ui/utils/ace-theme.ts'),
-		])
-		VAceEditor.value = Ace
-	}
-
-	initializeFileEdit()
-
-	document.addEventListener('keydown', onKeydown)
-
-	localQueuedOps.value = []
-})
-
-onUnmounted(() => {
-	document.removeEventListener('keydown', onKeydown)
-})
-
+// Operations tracking
 type QueuedOpWithState = Archon.Websocket.v0.QueuedFilesystemOp & { state: 'queued' }
-
+const localQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
 const dismissedOpIds = ref<Set<string>>(new Set())
 
-const ops = computed<(QueuedOpWithState | Archon.Websocket.v0.FilesystemOperation)[]>(() => [
+const activeOps = computed<FileOperation[]>(() => [
 	...localQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
 	...fsQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
-	...fsOps.value.filter((op) => !op.id || !dismissedOpIds.value.has(op.id)),
+	...(fsOps.value.filter((op) => !op.id || !dismissedOpIds.value.has(op.id)) as FileOperation[]),
 ])
 
-async function dismissOrCancelOp(opId: string, action: 'dismiss' | 'cancel') {
+async function dismissOperation(opId: string, action: 'dismiss' | 'cancel') {
 	if (action === 'dismiss') {
 		dismissedOpIds.value = new Set([...dismissedOpIds.value, opId])
 	}
-
 	try {
 		await client.kyros.files_v0.modifyOperation(opId, action)
 	} catch (error) {
@@ -1181,7 +362,7 @@ watch(
 		for (const op of newOps) {
 			if (op.state === 'done' && op.id && !dismissedOpIds.value.has(op.id)) {
 				setTimeout(() => {
-					dismissOrCancelOp(op.id, 'dismiss')
+					dismissOperation(op.id, 'dismiss')
 				}, 3000)
 			}
 		}
@@ -1196,160 +377,141 @@ watch(
 	},
 )
 
-watch(
-	() => route.query,
-	(newQuery, oldQuery) => {
-		if (newQuery.path !== oldQuery?.path) {
-			searchQuery.value = ''
-			viewFilter.value = 'all'
-			sortMethod.value = 'name'
-			sortDesc.value = false
-			deselectAll()
-		}
+onMounted(async () => {
+	initializeFileEdit()
+	localQueuedOps.value = []
+})
 
-		if (newQuery.editing && editingFile.value?.path !== newQuery.editing) {
-			editingFile.value = {
-				name: (newQuery.editing as string).split('/').pop() || '',
-				type: 'file',
-				path: newQuery.editing as string,
-			}
-			isEditing.value = true
-		} else if (oldQuery?.editing && !newQuery.editing) {
-			isEditing.value = false
-			editingFile.value = null
-		}
-	},
-	{ deep: true },
-)
+// Restart
+async function restartServer() {
+	await client.archon.servers_v0.power(serverId, 'Restart')
+}
 
-const breadcrumbSegments = computed(() => {
-	if (typeof currentPath.value === 'string') {
-		return currentPath.value.split('/').filter(Boolean)
-	}
-	return []
+// Upload state
+const uploadState = ref<UploadState>({
+	isUploading: false,
+	currentFileName: null,
+	currentFileProgress: 0,
+	uploadedBytes: 0,
+	totalBytes: 0,
+	completedFiles: 0,
+	totalFiles: 0,
 })
 
-function navigateToSegment(index: number) {
-	const newPath = index === -1 ? '/' : breadcrumbSegments.value.slice(0, index + 1).join('/')
-
-	// Don't navigate if already at target path (unless editing, to close editor)
-	if (newPath === currentPath.value && !isEditing.value) {
-		return
-	}
+let activeUploadCancel: (() => void) | null = null
 
-	router.push({ query: { ...route.query, path: newPath } })
-	if (isEditing.value) {
-		isEditing.value = false
-		editingFile.value = null
+async function uploadFiles(files: File[]) {
+	if (files.length === 0) return
 
-		const newQuery = { ...route.query }
-		delete newQuery.editing
-		router.replace({ query: newQuery })
+	const totalBytes = files.reduce((sum, f) => sum + f.size, 0)
+	uploadState.value = {
+		isUploading: true,
+		currentFileName: files[0].name,
+		currentFileProgress: 0,
+		uploadedBytes: 0,
+		totalBytes,
+		completedFiles: 0,
+		totalFiles: files.length,
 	}
-}
 
-function handleDroppedFiles(files: File[]) {
-	if (isEditing.value || serverBusy.value) return
+	let completedBytes = 0
 
-	files.forEach((file) => {
-		uploadDropdownRef.value?.uploadFile(file)
-	})
-}
+	for (let i = 0; i < files.length; i++) {
+		const file = files[i]
+		const filePath = `${currentPath.value}/${file.name}`.replace('//', '/')
 
-function initiateFileUpload() {
-	if (serverBusy.value) return
-	const input = document.createElement('input')
-	input.type = 'file'
-	input.multiple = true
-	input.onchange = () => {
-		if (input.files) {
-			Array.from(input.files).forEach((file) => {
-				uploadDropdownRef.value?.uploadFile(file)
-			})
-		}
-	}
-	input.click()
-}
+		uploadState.value.currentFileName = file.name
+		uploadState.value.currentFileProgress = 0
 
-async function downloadFile(item: Kyros.Files.v0.DirectoryItem) {
-	if (item.type === 'file') {
 		try {
-			const path = `${currentPath.value}/${item.name}`.replace('//', '/')
-			const fileData = await client.kyros.files_v0.downloadFile(path)
-			if (fileData) {
-				const blob = new Blob([fileData], { type: 'application/octet-stream' })
-				const link = document.createElement('a')
-				link.href = window.URL.createObjectURL(blob)
-				link.download = item.name
-				link.click()
-				window.URL.revokeObjectURL(link.href)
-			} else {
-				throw new Error('File data is undefined')
-			}
-		} catch (error) {
-			console.error('Error downloading file:', error)
+			const uploader = client.kyros.files_v0.uploadFile(filePath, file, {
+				onProgress: ({ progress }) => {
+					uploadState.value.currentFileProgress = progress
+					uploadState.value.uploadedBytes = completedBytes + Math.round(file.size * progress)
+				},
+			})
+			activeUploadCancel = () => uploader.cancel()
+
+			await uploader.promise
+			completedBytes += file.size
+			uploadState.value.completedFiles = i + 1
+			uploadState.value.uploadedBytes = completedBytes
+		} catch (err) {
+			if (err instanceof Error && err.message === 'Upload cancelled') break
 			addNotification({
-				title: 'Download failed',
-				text: 'Could not download the file.',
+				title: 'Upload failed',
+				text: `Failed to upload ${file.name}`,
 				type: 'error',
 			})
 		}
 	}
-}
-
-provide('modulesLoaded', modulesLoaded)
-</script>
 
-<style scoped>
-.radial-progress-animation-overlay {
-	position: relative;
-}
-
-@property --_radial-percentage {
-	syntax: '<percentage>';
-	inherits: false;
-	initial-value: 0%;
-}
-
-.radial-progress-animation-overlay.active::before {
-	animation: radial-progress 3s linear forwards;
-}
-
-.radial-progress-animation-overlay::before {
-	content: '';
-	inset: -2px;
-	position: absolute;
-	border-radius: 50%;
-	box-sizing: content-box;
-	border: 2px solid var(--color-button-bg);
-	filter: brightness(var(--hover-brightness));
-	mask-image: conic-gradient(
-		black 0%,
-		black var(--_radial-percentage),
-		transparent var(--_radial-percentage),
-		transparent 100%
-	);
-}
-
-@keyframes radial-progress {
-	from {
-		--_radial-percentage: 0%;
-	}
-	to {
-		--_radial-percentage: 100%;
+	activeUploadCancel = null
+	refreshList()
+	uploadState.value = {
+		isUploading: false,
+		currentFileName: null,
+		currentFileProgress: 0,
+		uploadedBytes: 0,
+		totalBytes: 0,
+		completedFiles: 0,
+		totalFiles: 0,
 	}
 }
 
-.fade-enter-active,
-.fade-leave-active {
-	transition:
-		opacity 300ms ease-in-out,
-		transform 300ms ease-in-out;
+function cancelUpload() {
+	activeUploadCancel?.()
 }
 
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-	transform: scale(0.98);
-}
-</style>
+// Provide the file manager context
+provideFileManager({
+	items,
+	loading: computed(() => isLoading.value),
+	error: computed(() => loadError.value ?? null),
+	currentPath,
+	navigateTo,
+	editingFile,
+	startEditing,
+	stopEditing,
+	createItem: async (name, type) => {
+		const path = `${currentPath.value}/${name}`.replace('//', '/')
+		await createMutation.mutateAsync({ path, type })
+	},
+	renameItem: async (path, newName) => {
+		await renameMutation.mutateAsync({ path, newName })
+	},
+	moveItem: async (source, destination) => {
+		await moveMutation.mutateAsync({ source, destination })
+	},
+	deleteItem: async (path, recursive) => {
+		await deleteMutation.mutateAsync({ path, recursive })
+	},
+	readFile,
+	readFileAsBlob,
+	writeFile,
+	downloadFile,
+	uploadFiles,
+	cancelUpload,
+	uploadState,
+	refresh: refreshList,
+	isBusy: serverBusy,
+	busyTooltip,
+	busyWarning,
+	extractFile,
+	activeOperations: activeOps,
+	dismissOperation,
+	prefetchDirectory,
+	prefetchFile,
+	showInstallFromUrl: true,
+	canRestart: true,
+	restartServer,
+	canShareToMclogs: true,
+})
+</script>
+
+<template>
+	<FilePageLayout
+		:show-debug-info="props.showDebugInfo"
+		:show-refresh-button="props.showRefreshButton"
+	/>
+</template>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index a94407d1f4..01eac741ff 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -416,6 +416,411 @@
   "content.selection-bar.selected-count-simple": {
     "defaultMessage": "{count, number} selected"
   },
+  "files.action.extract": {
+    "defaultMessage": "Extract"
+  },
+  "files.action.move": {
+    "defaultMessage": "Move"
+  },
+  "files.action.rename": {
+    "defaultMessage": "Rename"
+  },
+  "files.conflict-modal.header": {
+    "defaultMessage": "Extract summary"
+  },
+  "files.conflict-modal.overwrite-button": {
+    "defaultMessage": "Overwrite"
+  },
+  "files.conflict-modal.overwrite-many-warning": {
+    "defaultMessage": "Over 100 files will be overwritten if you proceed with extraction; here are some of them."
+  },
+  "files.conflict-modal.overwrite-warning": {
+    "defaultMessage": "The following {count} files already exist on your server, and will be overwritten if you proceed with extraction."
+  },
+  "files.conflict-modal.overwritten-count": {
+    "defaultMessage": "{count} overwritten"
+  },
+  "files.conflict-modal.overwritten-label": {
+    "defaultMessage": "Overwritten"
+  },
+  "files.conflict-modal.warning-header": {
+    "defaultMessage": "Files will be overwritten"
+  },
+  "files.context-menu.copied-filename": {
+    "defaultMessage": "Copied filename"
+  },
+  "files.context-menu.copied-path": {
+    "defaultMessage": "Copied path"
+  },
+  "files.context-menu.copy-filename": {
+    "defaultMessage": "Copy filename"
+  },
+  "files.context-menu.copy-full-path": {
+    "defaultMessage": "Copy full path"
+  },
+  "files.context-menu.open-in-folder": {
+    "defaultMessage": "Open in folder"
+  },
+  "files.create-modal.create-button": {
+    "defaultMessage": "Create {type, select, directory {folder} other {file}}"
+  },
+  "files.create-modal.header": {
+    "defaultMessage": "Create a {type, select, directory {folder} other {file}}"
+  },
+  "files.create-modal.placeholder-directory": {
+    "defaultMessage": "e.g. plugins"
+  },
+  "files.create-modal.placeholder-file": {
+    "defaultMessage": "e.g. config.yml"
+  },
+  "files.delete-modal.deleting-name": {
+    "defaultMessage": "Deleting \"{name}\""
+  },
+  "files.delete-modal.header": {
+    "defaultMessage": "Delete file"
+  },
+  "files.delete-modal.warning": {
+    "defaultMessage": "{type, select, directory {This folder and all its contents will be permanently deleted. This action cannot be undone.} other {This file will be permanently deleted. This action cannot be undone.}}"
+  },
+  "files.editor.failed-to-open-text": {
+    "defaultMessage": "Could not load file contents."
+  },
+  "files.editor.failed-to-open-title": {
+    "defaultMessage": "Failed to open file"
+  },
+  "files.editor.failed-to-share-text": {
+    "defaultMessage": "Could not upload to mclo.gs."
+  },
+  "files.editor.failed-to-share-title": {
+    "defaultMessage": "Failed to share file"
+  },
+  "files.editor.file-saved-text": {
+    "defaultMessage": "Your file has been saved."
+  },
+  "files.editor.file-saved-title": {
+    "defaultMessage": "File saved"
+  },
+  "files.editor.log-url-copied-text": {
+    "defaultMessage": "Your log file URL has been copied to your clipboard."
+  },
+  "files.editor.log-url-copied-title": {
+    "defaultMessage": "Log URL copied"
+  },
+  "files.editor.save-failed-text": {
+    "defaultMessage": "Could not save the file."
+  },
+  "files.editor.save-failed-title": {
+    "defaultMessage": "Save failed"
+  },
+  "files.error.go-to-home": {
+    "defaultMessage": "Go to home folder"
+  },
+  "files.error.try-again": {
+    "defaultMessage": "Try again"
+  },
+  "files.image_viewer.image_too_large": {
+    "defaultMessage": "Image too large to view (max {maxDimension}x{maxDimension} pixels)"
+  },
+  "files.image_viewer.invalid_image": {
+    "defaultMessage": "Invalid or empty image file."
+  },
+  "files.image_viewer.load_failed": {
+    "defaultMessage": "Failed to load image"
+  },
+  "files.image_viewer.reset_zoom": {
+    "defaultMessage": "Reset zoom"
+  },
+  "files.image_viewer.viewed_image_alt": {
+    "defaultMessage": "Viewed image"
+  },
+  "files.image_viewer.zoom_in": {
+    "defaultMessage": "Zoom in"
+  },
+  "files.image_viewer.zoom_out": {
+    "defaultMessage": "Zoom out"
+  },
+  "files.layout.busy-warning": {
+    "defaultMessage": "File operations are disabled while the operation is in progress."
+  },
+  "files.layout.dry-run-failed-text": {
+    "defaultMessage": "Error running dry run"
+  },
+  "files.layout.dry-run-failed-title": {
+    "defaultMessage": "Dry run failed"
+  },
+  "files.layout.empty-folder-description": {
+    "defaultMessage": "There are no files or folders."
+  },
+  "files.layout.empty-folder-title": {
+    "defaultMessage": "This folder is empty"
+  },
+  "files.layout.error-message": {
+    "defaultMessage": "The folder may not exist."
+  },
+  "files.layout.error-title": {
+    "defaultMessage": "Unable to load files"
+  },
+  "files.layout.extract-failed-title": {
+    "defaultMessage": "Extract failed"
+  },
+  "files.layout.extraction-started-title": {
+    "defaultMessage": "Extraction started"
+  },
+  "files.layout.leave-editor-body": {
+    "defaultMessage": "You have unsaved changes that will be lost if you leave the editor."
+  },
+  "files.layout.leave-editor-leave": {
+    "defaultMessage": "Leave editor"
+  },
+  "files.layout.leave-editor-stay": {
+    "defaultMessage": "Stay in editor"
+  },
+  "files.layout.leave-editor-title": {
+    "defaultMessage": "Leave editor?"
+  },
+  "files.layout.loading": {
+    "defaultMessage": "Loading files..."
+  },
+  "files.layout.save": {
+    "defaultMessage": "Save"
+  },
+  "files.layout.selected-count": {
+    "defaultMessage": "{count} selected"
+  },
+  "files.layout.unsaved-changes": {
+    "defaultMessage": "You have unsaved changes."
+  },
+  "files.move-modal.current-location": {
+    "defaultMessage": "Current location"
+  },
+  "files.move-modal.destination-path": {
+    "defaultMessage": "Destination path"
+  },
+  "files.move-modal.destination-placeholder": {
+    "defaultMessage": "e.g. /mods"
+  },
+  "files.move-modal.header": {
+    "defaultMessage": "{type, select, directory {Move folder} other {Move file}}"
+  },
+  "files.move-modal.move-button": {
+    "defaultMessage": "Move"
+  },
+  "files.navbar.back-to-home": {
+    "defaultMessage": "Back to home"
+  },
+  "files.navbar.breadcrumb-navigation": {
+    "defaultMessage": "Breadcrumb navigation"
+  },
+  "files.navbar.create-new": {
+    "defaultMessage": "Create new..."
+  },
+  "files.navbar.file-navigation": {
+    "defaultMessage": "File navigation"
+  },
+  "files.navbar.home": {
+    "defaultMessage": "Home"
+  },
+  "files.navbar.install-curseforge-pack": {
+    "defaultMessage": "Install CurseForge pack"
+  },
+  "files.navbar.new-file": {
+    "defaultMessage": "New file"
+  },
+  "files.navbar.new-folder": {
+    "defaultMessage": "New folder"
+  },
+  "files.navbar.search-files": {
+    "defaultMessage": "Search files"
+  },
+  "files.navbar.share-to-mclogs": {
+    "defaultMessage": "Share to mclo.gs"
+  },
+  "files.navbar.upload-file": {
+    "defaultMessage": "Upload file"
+  },
+  "files.navbar.upload-from-zip": {
+    "defaultMessage": "Upload from .zip file"
+  },
+  "files.navbar.upload-from-zip-url": {
+    "defaultMessage": "Upload from .zip URL"
+  },
+  "files.operations.done": {
+    "defaultMessage": "Done"
+  },
+  "files.operations.extracted": {
+    "defaultMessage": "{size} extracted"
+  },
+  "files.operations.extracting": {
+    "defaultMessage": "Extracting {source}"
+  },
+  "files.operations.failed": {
+    "defaultMessage": "Failed"
+  },
+  "files.operations.modpack-from-url": {
+    "defaultMessage": "modpack from URL"
+  },
+  "files.operations.upload-progress": {
+    "defaultMessage": "{uploaded} / {total} ({percent}%)"
+  },
+  "files.operations.uploading-files": {
+    "defaultMessage": "Uploading files ({completed}/{total})"
+  },
+  "files.rename-modal.header": {
+    "defaultMessage": "Rename {name}"
+  },
+  "files.rename-modal.new-name-label": {
+    "defaultMessage": "New name"
+  },
+  "files.rename-modal.rename-button": {
+    "defaultMessage": "Rename"
+  },
+  "files.row.copied-filename": {
+    "defaultMessage": "Copied filename"
+  },
+  "files.row.copied-path": {
+    "defaultMessage": "Copied path"
+  },
+  "files.row.copy-filename": {
+    "defaultMessage": "Copy filename"
+  },
+  "files.row.copy-full-path": {
+    "defaultMessage": "Copy full path"
+  },
+  "files.row.extract": {
+    "defaultMessage": "Extract"
+  },
+  "files.row.item-count": {
+    "defaultMessage": "{count, plural, one {# item} other {# items}}"
+  },
+  "files.row.move": {
+    "defaultMessage": "Move"
+  },
+  "files.row.open-in-folder": {
+    "defaultMessage": "Open in folder"
+  },
+  "files.row.rename": {
+    "defaultMessage": "Rename"
+  },
+  "files.table-header.created": {
+    "defaultMessage": "Created"
+  },
+  "files.table-header.modified": {
+    "defaultMessage": "Modified"
+  },
+  "files.table-header.name": {
+    "defaultMessage": "Name"
+  },
+  "files.table-header.size": {
+    "defaultMessage": "Size"
+  },
+  "files.upload-dropdown.cancelled": {
+    "defaultMessage": "Cancelled"
+  },
+  "files.upload-dropdown.done": {
+    "defaultMessage": "Done"
+  },
+  "files.upload-dropdown.failed-file-exists": {
+    "defaultMessage": "Failed - File already exists"
+  },
+  "files.upload-dropdown.failed-generic": {
+    "defaultMessage": "Failed - {error}"
+  },
+  "files.upload-dropdown.failed-incorrect-type": {
+    "defaultMessage": "Failed - Incorrect file type"
+  },
+  "files.upload-dropdown.failed-to-upload": {
+    "defaultMessage": "Failed to upload {fileName}"
+  },
+  "files.upload-dropdown.file": {
+    "defaultMessage": "File"
+  },
+  "files.upload-dropdown.file-uploads": {
+    "defaultMessage": "{fileType} uploads"
+  },
+  "files.upload-dropdown.incorrect-file-type": {
+    "defaultMessage": "Upload had incorrect file type"
+  },
+  "files.upload-dropdown.unexpected-error": {
+    "defaultMessage": "An unexpected error occurred."
+  },
+  "files.upload-dropdown.upload-failed": {
+    "defaultMessage": "Upload failed"
+  },
+  "files.upload-dropdown.uploads-left": {
+    "defaultMessage": " - {count} left"
+  },
+  "files.upload.drag-and-drop.drop-to-upload": {
+    "defaultMessage": "Drop {type, select, undefined {files} other {{type}s}} here to upload"
+  },
+  "files.validation.name-invalid-directory": {
+    "defaultMessage": "Name must contain only alphanumeric characters, dashes, underscores, or spaces."
+  },
+  "files.validation.name-invalid-file": {
+    "defaultMessage": "Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces."
+  },
+  "files.validation.name-label": {
+    "defaultMessage": "Name"
+  },
+  "files.validation.name-required": {
+    "defaultMessage": "Name is required."
+  },
+  "files.zip-url-modal.backup-name": {
+    "defaultMessage": "CurseForge modpack install"
+  },
+  "files.zip-url-modal.cf-header": {
+    "defaultMessage": "Install a CurseForge modpack"
+  },
+  "files.zip-url-modal.cf-not-found-text": {
+    "defaultMessage": "Could not find CurseForge modpack at that URL."
+  },
+  "files.zip-url-modal.cf-not-found-title": {
+    "defaultMessage": "CurseForge modpack not found"
+  },
+  "files.zip-url-modal.enter-link": {
+    "defaultMessage": "Enter link"
+  },
+  "files.zip-url-modal.error-cf-url": {
+    "defaultMessage": "URL must be a CurseForge modpack version URL."
+  },
+  "files.zip-url-modal.error-url-invalid": {
+    "defaultMessage": "URL must be valid."
+  },
+  "files.zip-url-modal.error-url-required": {
+    "defaultMessage": "URL is required."
+  },
+  "files.zip-url-modal.install-button": {
+    "defaultMessage": "Install"
+  },
+  "files.zip-url-modal.install-failed-title": {
+    "defaultMessage": "Installation failed"
+  },
+  "files.zip-url-modal.step-copy-description": {
+    "defaultMessage": "Copy the version page URL and paste it below."
+  },
+  "files.zip-url-modal.step-copy-title": {
+    "defaultMessage": "Copy the URL"
+  },
+  "files.zip-url-modal.step-find-description": {
+    "defaultMessage": "Browse CurseForge and locate the modpack you want."
+  },
+  "files.zip-url-modal.step-find-title": {
+    "defaultMessage": "Find the modpack"
+  },
+  "files.zip-url-modal.step-select-description": {
+    "defaultMessage": "Go to the \"Files\" tab and pick the version to install."
+  },
+  "files.zip-url-modal.step-select-title": {
+    "defaultMessage": "Select a version"
+  },
+  "files.zip-url-modal.unknown-error": {
+    "defaultMessage": "An unknown error occurred"
+  },
+  "files.zip-url-modal.zip-description": {
+    "defaultMessage": "Copy and paste the direct download URL of a .zip file."
+  },
+  "files.zip-url-modal.zip-header": {
+    "defaultMessage": "Uploading .zip contents from URL"
+  },
   "form.label.address-line": {
     "defaultMessage": "Address line"
   },
@@ -716,15 +1121,6 @@
   "instances.confirm-leave-modal.body": {
     "defaultMessage": "Files are still being uploaded. Leaving this page will cancel the upload and your changes may be lost."
   },
-  "instances.confirm-leave-modal.leave": {
-    "defaultMessage": "Leave page"
-  },
-  "instances.confirm-leave-modal.stay": {
-    "defaultMessage": "Stay on page"
-  },
-  "instances.confirm-leave-modal.title": {
-    "defaultMessage": "Leave page?"
-  },
   "instances.confirm-leave-modal.upload-in-progress": {
     "defaultMessage": "Upload in progress"
   },
@@ -2824,5 +3220,20 @@
   },
   "ui.component.unsaved-changes-popup.body": {
     "defaultMessage": "You have unsaved changes."
+  },
+  "ui.confirm-leave-modal.body": {
+    "defaultMessage": "You have unsaved changes that will be lost if you leave this page."
+  },
+  "ui.confirm-leave-modal.header": {
+    "defaultMessage": "You have unsaved changes"
+  },
+  "ui.confirm-leave-modal.leave": {
+    "defaultMessage": "Leave page"
+  },
+  "ui.confirm-leave-modal.stay": {
+    "defaultMessage": "Stay on page"
+  },
+  "ui.confirm-leave-modal.title": {
+    "defaultMessage": "Leave page?"
   }
 }
diff --git a/packages/ui/src/stories/base/Admonition.stories.ts b/packages/ui/src/stories/base/Admonition.stories.ts
index 7ec3c77ff2..f04ea9e81f 100644
--- a/packages/ui/src/stories/base/Admonition.stories.ts
+++ b/packages/ui/src/stories/base/Admonition.stories.ts
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import Admonition from '../../components/base/Admonition.vue'
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ProgressBar from '../../components/base/ProgressBar.vue'
 
 const meta = {
 	title: 'Base/Admonition',
@@ -45,3 +47,92 @@ export const Success: Story = {
 		body: 'Everything went smoothly.',
 	},
 }
+
+export const Dismissible: Story = {
+	args: {
+		type: 'info',
+		header: 'Dismissible Notice',
+		body: 'This admonition can be dismissed by clicking the X button.',
+		dismissible: true,
+	},
+}
+
+export const WithTopRightActions: Story = {
+	render: () => ({
+		components: { Admonition, ButtonStyled },
+		template: /*html*/ `
+			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<Admonition type="info" header="Uploading files (2/5)">
+					Uploading server files...
+					<template #top-right-actions>
+						<ButtonStyled type="outlined" color="blue">
+							<button class="!border">Cancel</button>
+						</ButtonStyled>
+					</template>
+				</Admonition>
+				<Admonition type="critical" header="Extraction failed">
+					Something went wrong while extracting the archive.
+					<template #top-right-actions>
+						<ButtonStyled color="red">
+							<button>Retry</button>
+						</ButtonStyled>
+						<ButtonStyled circular type="transparent" hover-color-fill="background" color="red">
+							<button>✕</button>
+						</ButtonStyled>
+					</template>
+				</Admonition>
+				<Admonition type="success" header="Extraction complete">
+					All files have been extracted successfully.
+					<template #top-right-actions>
+						<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
+							<button>✕</button>
+						</ButtonStyled>
+					</template>
+				</Admonition>
+			</div>
+		`,
+	}),
+}
+
+export const WithProgressBar: Story = {
+	render: () => ({
+		components: { Admonition, ButtonStyled, ProgressBar },
+		template: /*html*/ `
+			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<Admonition type="info" header="Uploading files (2/5)">
+					128 KB / 1.2 MB (45%)
+					<template #top-right-actions>
+						<ButtonStyled type="outlined" color="blue">
+							<button class="!border">Cancel</button>
+						</ButtonStyled>
+					</template>
+					<template #progress>
+						<ProgressBar :progress="0.45" :max="1" color="blue" full-width />
+					</template>
+				</Admonition>
+				<Admonition type="info" header="Extracting modpack.zip">
+					24 MB extracted — config/settings.yml
+					<template #top-right-actions>
+						<ButtonStyled type="outlined" color="blue">
+							<button class="!border">Cancel</button>
+						</ButtonStyled>
+					</template>
+					<template #progress>
+						<ProgressBar :progress="0.7" :max="1" color="blue" full-width />
+					</template>
+				</Admonition>
+				<Admonition type="success" header="Extraction complete — Done">
+					56 MB extracted
+					<template #top-right-actions>
+						<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
+							<button>✕</button>
+						</ButtonStyled>
+					</template>
+					<template #progress>
+						<ProgressBar :progress="1" :max="1" color="green" full-width />
+					</template>
+				</Admonition>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/servers/BackupProgressAdmonition.stories.ts b/packages/ui/src/stories/servers/BackupProgressAdmonition.stories.ts
deleted file mode 100644
index 83a3a96515..0000000000
--- a/packages/ui/src/stories/servers/BackupProgressAdmonition.stories.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import BackupProgressAdmonition from '../../components/servers/backups/BackupProgressAdmonition.vue'
-
-const meta = {
-	title: 'Servers/BackupProgressAdmonition',
-	component: BackupProgressAdmonition,
-	parameters: {
-		layout: 'padded',
-	},
-} satisfies Meta<typeof BackupProgressAdmonition>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const justNow = new Date().toISOString()
-const eightMinsAgo = new Date(Date.now() - 8 * 60 * 1000).toISOString()
-const fiveHoursAgo = new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
-
-export const AllStates: Story = {
-	render: () => ({
-		components: { BackupProgressAdmonition },
-		setup() {
-			const now = new Date().toISOString()
-			const mins8 = new Date(Date.now() - 8 * 60 * 1000).toISOString()
-			const hours5 = new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
-			return { now, mins8, hours5 }
-		},
-		template: /*html*/ `
-			<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 1020px;">
-				<h3 style="margin: 0; color: var(--color-contrast);">Backup Creation</h3>
-				<BackupProgressAdmonition type="create" state="ongoing" :progress="0" backup-name="World Backup 1" :created-at="now" />
-				<BackupProgressAdmonition type="create" state="ongoing" :progress="0.33" backup-name="World Backup 1" :created-at="mins8" />
-				<BackupProgressAdmonition type="create" state="failed" :progress="0" backup-name="World Backup 1" :created-at="hours5" />
-
-				<h3 style="margin: 1rem 0 0; color: var(--color-contrast);">Backup Restoration</h3>
-				<BackupProgressAdmonition type="restore" state="ongoing" :progress="0" backup-name="World Backup 1" :created-at="now" />
-				<BackupProgressAdmonition type="restore" state="ongoing" :progress="0.33" backup-name="World Backup 1" :created-at="mins8" />
-				<BackupProgressAdmonition type="restore" state="done" :progress="1" backup-name="World Backup 1" :created-at="hours5" />
-				<BackupProgressAdmonition type="restore" state="failed" :progress="0" backup-name="World Backup 1" :created-at="hours5" />
-			</div>
-		`,
-	}),
-}
-
-export const BackupQueued: Story = {
-	args: {
-		type: 'create',
-		state: 'ongoing',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: justNow,
-	},
-}
-
-export const CreatingBackup: Story = {
-	args: {
-		type: 'create',
-		state: 'ongoing',
-		progress: 0.33,
-		backupName: 'World Backup 1',
-		createdAt: eightMinsAgo,
-	},
-}
-
-export const BackupFailed: Story = {
-	args: {
-		type: 'create',
-		state: 'failed',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: fiveHoursAgo,
-	},
-}
-
-export const RestoreQueued: Story = {
-	args: {
-		type: 'restore',
-		state: 'ongoing',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: justNow,
-	},
-}
-
-export const RestoringBackup: Story = {
-	args: {
-		type: 'restore',
-		state: 'ongoing',
-		progress: 0.33,
-		backupName: 'World Backup 1',
-		createdAt: eightMinsAgo,
-	},
-}
-
-export const RestoreSuccessful: Story = {
-	args: {
-		type: 'restore',
-		state: 'done',
-		progress: 1,
-		backupName: 'World Backup 1',
-		createdAt: fiveHoursAgo,
-	},
-}
-
-export const RestoreFailed: Story = {
-	args: {
-		type: 'restore',
-		state: 'failed',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: fiveHoursAgo,
-	},
-}
diff --git a/packages/ui/src/utils/ace-mode-log.ts b/packages/ui/src/utils/ace-mode-log.ts
new file mode 100644
index 0000000000..720ff6f30e
--- /dev/null
+++ b/packages/ui/src/utils/ace-mode-log.ts
@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ace from 'ace-builds'
+
+ace['define'](
+	'ace/mode/mclog_highlight_rules',
+	['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
+	function (require: any, exports: any) {
+		const oop = require('ace/lib/oop')
+		const TextHighlightRules = require('ace/mode/text_highlight_rules').TextHighlightRules
+
+		const MclogHighlightRules = function (this: any) {
+			this.$rules = {
+				start: [
+					{
+						token: 'comment.timestamp',
+						regex: /^\[\d\d:\d\d:\d\d\]/.source,
+					},
+					{
+						token: 'invalid.error',
+						regex: /\[.+?\/ERROR\]:?/.source,
+					},
+					{
+						token: 'keyword.warn',
+						regex: /\[.+?\/WARN\]:?/.source,
+					},
+					{
+						token: 'string.info',
+						regex: /\[.+?\/INFO\]:/.source,
+					},
+					{
+						token: 'support.command',
+						regex: /: \/.+/.source,
+					},
+					{
+						token: 'comment.stacktrace',
+						regex: /\tat\s.+/.source,
+					},
+					{
+						token: 'entity.name.function',
+						regex: /\w+?\[\/\d+?\.\d+?\.\d+?\.\d+?:\d+?\]/.source,
+					},
+					{
+						token: 'storage.chat',
+						regex: /\[CHAT\]/.source,
+					},
+				],
+			}
+			this.normalizeRules()
+		}
+
+		oop.inherits(MclogHighlightRules, TextHighlightRules)
+		exports.MclogHighlightRules = MclogHighlightRules
+	},
+)
+
+ace['define'](
+	'ace/mode/mclog',
+	['require', 'exports', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/mclog_highlight_rules'],
+	function (require: any, exports: any) {
+		const oop = require('ace/lib/oop')
+		const TextMode = require('ace/mode/text').Mode
+		const MclogHighlightRules = require('ace/mode/mclog_highlight_rules').MclogHighlightRules
+
+		const Mode = function (this: any) {
+			this.HighlightRules = MclogHighlightRules
+		}
+
+		oop.inherits(Mode, TextMode)
+		exports.Mode = Mode
+	},
+)
diff --git a/packages/ui/src/utils/ace-theme.ts b/packages/ui/src/utils/ace-theme.ts
index a1cde94088..e78e42d483 100644
--- a/packages/ui/src/utils/ace-theme.ts
+++ b/packages/ui/src/utils/ace-theme.ts
@@ -1,3 +1,5 @@
+import 'ace-builds/esm-resolver'
+
 import cssText from '@modrinth/assets/styles/ace.css?raw'
 import ace from 'ace-builds'
 
diff --git a/packages/ui/src/utils/file-extensions.ts b/packages/ui/src/utils/file-extensions.ts
index 7908f52b06..78b88c067a 100644
--- a/packages/ui/src/utils/file-extensions.ts
+++ b/packages/ui/src/utils/file-extensions.ts
@@ -146,6 +146,8 @@ export function getEditorLanguage(ext: string): string {
 		case 'cfg':
 		case 'conf':
 			return 'ini'
+		case 'log':
+			return 'mclog'
 		default:
 			return 'text'
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1bfa6eb79..819cb44680 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,6 +89,9 @@ importers:
       '@tauri-apps/plugin-dialog':
         specifier: ^2.2.1
         version: 2.6.0
+      '@tauri-apps/plugin-fs':
+        specifier: ^2.4.5
+        version: 2.4.5
       '@tauri-apps/plugin-http':
         specifier: ~2.5.7
         version: 2.5.7
@@ -4088,6 +4091,9 @@ packages:
   '@tauri-apps/plugin-dialog@2.6.0':
     resolution: {integrity: sha512-q4Uq3eY87TdcYzXACiYSPhmpBA76shgmQswGkSVio4C82Sz2W4iehe9TnKYwbq7weHiL88Yw19XZm7v28+Micg==}
 
+  '@tauri-apps/plugin-fs@2.4.5':
+    resolution: {integrity: sha512-dVxWWGE6VrOxC7/jlhyE+ON/Cc2REJlM35R3PJX3UvFw2XwYhLGQVAIyrehenDdKjotipjYEVc4YjOl3qq90fA==}
+
   '@tauri-apps/plugin-http@2.5.7':
     resolution: {integrity: sha512-+F2lEH/c9b0zSsOXKq+5hZNcd9F4IIKCK1T17RqMwpCmVnx2aoqY8yIBccCd25HTYUb3j6NPVbRax/m00hKG8A==}
 
@@ -12957,6 +12963,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.10.1
 
+  '@tauri-apps/plugin-fs@2.4.5':
+    dependencies:
+      '@tauri-apps/api': 2.10.1
+
   '@tauri-apps/plugin-http@2.5.7':
     dependencies:
       '@tauri-apps/api': 2.10.1
diff --git a/standards/frontend/INTERNATIONALIZATION.md b/standards/frontend/INTERNATIONALIZATION.md
index a33ee79aa6..b87471ef71 100644
--- a/standards/frontend/INTERNATIONALIZATION.md
+++ b/standards/frontend/INTERNATIONALIZATION.md
@@ -3,6 +3,7 @@
 	- [Message Definitions](#message-definitions)
 	- [Rendering Messages](#rendering-messages)
 	- [ICU Message Format](#icu-message-format)
+	- [Writing Translation-Friendly Strings](#writing-translation-friendly-strings)
 	- [Rich-Text Messages](#rich-text-messages)
 	- [Vue/ICU Delimiter Collisions](#vueicu-delimiter-collisions)
 	- [Imports](#imports)
@@ -52,6 +53,36 @@ Dynamic values use ICU placeholders in `defaultMessage`:
 - **Numbers/dates/times:** `'{price, number, ::currency/USD}'`
 - **Plurals/selects:** `'{count, plural, one {# message} other {# messages}}'`
 
+## Writing Translation-Friendly Strings
+
+ICU gives you powerful tools (plurals, selects, nested expressions), but translators in other languages face constraints that English doesn't have:
+
+- **Word order varies by language.** Don't assume `{action} {noun}` works everywhere — some languages need `{noun} {action}` or require prepositions between them.
+- **Plurals aren't just "add an s".** Many languages change internal parts of a word or phrase for pluralization, not just the ending. A simple `{count} {itemType}` breaks if `itemType` is always singular.
+- **Grammatical gender affects surrounding words.** Articles, adjectives, and verbs may change based on whether a noun is masculine or feminine. If a variable like `{contentType}` can be "shader" or "mod", translators may need to inflect surrounding text differently for each.
+
+### Guidelines
+
+1. **Use `select` for content types, not bare variables.** When a variable represents different content types (mod, shader, modpack, etc.), pass a key and use ICU `select` so translators can write type-specific forms:
+
+```
+// Bad — translators can't inflect around a pre-rendered noun
+'Delete {count} {itemType}'
+
+// Good — translators can write entirely different phrases per type
+'Delete {count} {contentType, select, mod {{count, plural, one {mod} other {mods}}} shader {{count, plural, one {shader} other {shaders}}} other {items}}'
+```
+
+This lets translators write entirely different noun forms per branch, which many languages require.
+
+2. **Prefer separate messages over complex ICU when branches diverge significantly.** If the singular and plural versions of a string are structurally different (not just a noun change), use two separate message IDs rather than one complex ICU expression.
+
+3. **Don't concatenate translated strings.** Never build a sentence by joining multiple `formatMessage` calls — the word order may be wrong in other languages. Put the entire sentence in one message.
+
+4. **Keep variables semantic.** Pass `contentType: 'mod'` (a key), not `contentType: 'Mod'` (a pre-rendered display string). Translators can then map each key to the correct form in their language.
+
+5. **Test with long strings.** German and Finnish words can be 2-3x longer than English equivalents. Ensure UI layouts don't break with longer text.
+
 ## Rich-Text Messages
 
 When a message contains links or markup, wrap the relevant ranges with named tags in `defaultMessage`: