diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index e55353eb0a..e8a8c01802 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -51,7 +51,6 @@
 		"@vue-email/components": "^0.0.21",
 		"@vue-email/render": "^0.0.9",
 		"@vueuse/core": "^11.1.0",
-		"ace-builds": "^1.36.2",
 		"ansi-to-html": "^0.7.2",
 		"dayjs": "^1.11.7",
 		"dompurify": "^3.1.7",
@@ -61,6 +60,7 @@
 		"js-yaml": "^4.1.0",
 		"jszip": "^3.10.1",
 		"markdown-it": "14.1.0",
+		"ace-builds": "^1.36.2",
 		"pathe": "^1.1.2",
 		"pinia": "^2.1.7",
 		"pinia-plugin-persistedstate": "^4.4.1",
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index b725a096e8..24676e2138 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -309,14 +309,13 @@
 </template>
 
 <script setup lang="ts">
-import { DownloadIcon, UpdatedIcon } from '@modrinth/assets'
+import { DownloadIcon, PaletteIcon, UpdatedIcon } from '@modrinth/assets'
 import { Button, Card, DropdownSelect } from '@modrinth/ui'
 import { formatCategoryHeader, formatMoney, formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
 import { UiChartsChart as Chart, UiChartsCompactChart as CompactChart } from '#components'
-import PaletteIcon from '~/assets/icons/palette.svg?component'
 import {
 	analyticsSetToCSVString,
 	countryCodeToFlag,
diff --git a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
deleted file mode 100644
index bbc6911eae..0000000000
--- a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-	<NewModal ref="modal" header="Editing auto backup settings">
-		<div class="flex flex-col gap-4 md:w-[600px]">
-			<div class="flex flex-col gap-2">
-				<div class="font-semibold text-contrast">Auto backup</div>
-				<p class="m-0">
-					Automatically create a backup of your server
-					<strong>{{ backupIntervalsLabel.toLowerCase() }}</strong>
-				</p>
-			</div>
-
-			<div v-if="isLoadingSettings" class="py-2 text-sm text-secondary">Loading settings...</div>
-			<template v-else>
-				<input
-					id="auto-backup-toggle"
-					v-model="autoBackupEnabled"
-					class="switch stylized-toggle"
-					type="checkbox"
-					:disabled="isSaving"
-				/>
-
-				<div class="flex flex-col gap-2">
-					<div class="font-semibold text-contrast">Interval</div>
-					<p class="m-0">
-						The amount of time between each backup. This will only backup your server if it has been
-						modified since the last backup.
-					</p>
-				</div>
-
-				<Combobox
-					:id="'interval-field'"
-					v-model="backupIntervalsLabel"
-					:disabled="!autoBackupEnabled || isSaving"
-					name="interval"
-					:options="Object.keys(backupIntervals).map((k) => ({ value: k, label: k }))"
-					:display-value="backupIntervalsLabel"
-				/>
-
-				<div class="mt-4 flex justify-start gap-4">
-					<ButtonStyled color="brand">
-						<button :disabled="!hasChanges || isSaving" @click="saveSettings">
-							<SaveIcon class="h-5 w-5" />
-							{{ isSaving ? 'Saving...' : 'Save changes' }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button :disabled="isSaving" @click="modal?.hide()">
-							<XIcon />
-							Cancel
-						</button>
-					</ButtonStyled>
-				</div>
-			</template>
-		</div>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager, NewModal } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-
-import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
-
-const { addNotification } = injectNotificationManager()
-
-const props = defineProps<{
-	server: ModrinthServer
-}>()
-
-const modal = ref<InstanceType<typeof NewModal>>()
-
-const initialSettings = ref<{ interval: number; enabled: boolean } | null>(null)
-const autoBackupEnabled = ref(false)
-const isLoadingSettings = ref(true)
-const isSaving = ref(false)
-
-const backupIntervals = {
-	'Every 3 hours': 3,
-	'Every 6 hours': 6,
-	'Every 12 hours': 12,
-	Daily: 24,
-}
-
-const backupIntervalsLabel = ref<keyof typeof backupIntervals>('Every 6 hours')
-
-const autoBackupInterval = computed({
-	get: () => backupIntervals[backupIntervalsLabel.value],
-	set: (value) => {
-		const [label] =
-			Object.entries(backupIntervals).find(([_, interval]) => interval === value) || []
-		if (label) backupIntervalsLabel.value = label as keyof typeof backupIntervals
-	},
-})
-
-const hasChanges = computed(() => {
-	if (!initialSettings.value) return false
-
-	return (
-		autoBackupEnabled.value !== initialSettings.value.enabled ||
-		(initialSettings.value.enabled && autoBackupInterval.value !== initialSettings.value.interval)
-	)
-})
-
-const fetchSettings = async () => {
-	isLoadingSettings.value = true
-	try {
-		const settings = await props.server.backups?.getAutoBackup()
-		initialSettings.value = settings as { interval: number; enabled: boolean }
-		autoBackupEnabled.value = settings?.enabled ?? false
-		autoBackupInterval.value = settings?.interval || 6
-		return true
-	} catch (error) {
-		console.error('Error fetching backup settings:', error)
-		addNotification({
-			title: 'Error',
-			text: 'Failed to load backup settings',
-			type: 'error',
-		})
-		return false
-	} finally {
-		isLoadingSettings.value = false
-	}
-}
-
-const saveSettings = async () => {
-	isSaving.value = true
-	try {
-		await props.server.backups?.updateAutoBackup(
-			autoBackupEnabled.value ? 'enable' : 'disable',
-			autoBackupInterval.value,
-		)
-
-		initialSettings.value = {
-			enabled: autoBackupEnabled.value,
-			interval: autoBackupInterval.value,
-		}
-
-		addNotification({
-			title: 'Success',
-			text: 'Backup settings updated successfully',
-			type: 'success',
-		})
-
-		modal.value?.hide()
-	} catch (error) {
-		console.error('Error saving backup settings:', error)
-		addNotification({
-			title: 'Error',
-			text: 'Failed to save backup settings',
-			type: 'error',
-		})
-	} finally {
-		isSaving.value = false
-	}
-}
-
-defineExpose({
-	show: async () => {
-		const success = await fetchSettings()
-		if (success) {
-			modal.value?.show()
-		}
-	},
-})
-</script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/FileItem.vue b/apps/frontend/src/components/ui/servers/FileItem.vue
index ac4c426591..45de06c653 100644
--- a/apps/frontend/src/components/ui/servers/FileItem.vue
+++ b/apps/frontend/src/components/ui/servers/FileItem.vue
@@ -1,7 +1,6 @@
 <template>
 	<li
 		role="button"
-		data-pyro-file
 		:class="[
 			containerClasses,
 			isDragOver && type === 'directory' ? 'bg-brand-highlight' : '',
@@ -12,6 +11,7 @@
 		@click="selectItem"
 		@contextmenu="openContextMenu"
 		@keydown="(e) => e.key === 'Enter' && selectItem()"
+		@mouseenter="handleMouseEnter"
 		@dragstart="handleDragStart"
 		@dragend="handleDragEnd"
 		@dragenter.prevent="handleDragEnter"
@@ -19,35 +19,32 @@
 		@dragleave.prevent="handleDragLeave"
 		@drop.prevent="handleDrop"
 	>
-		<div
-			data-pyro-file-metadata
-			class="pointer-events-none flex w-full items-center gap-4 truncate"
-		>
-			<div
-				class="pointer-events-none flex size-8 items-center justify-center rounded-full bg-bg-raised p-[6px] group-hover:bg-brand-highlight group-hover:text-brand group-focus:bg-brand-highlight group-focus:text-brand"
-				:class="isEditableFile ? 'group-active:scale-[0.8]' : ''"
-			>
-				<component :is="iconComponent" class="size-6" />
+		<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 w-full flex-col truncate">
+			<div class="pointer-events-none flex flex-col truncate">
 				<span
-					class="pointer-events-none w-[98%] truncate font-bold group-hover:text-contrast group-focus:text-contrast"
+					class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast"
 				>
 					{{ name }}
 				</span>
-				<span class="pointer-events-none text-xs text-secondary group-hover:text-primary">
-					{{ subText }}
-				</span>
 			</div>
 		</div>
-		<div
-			data-pyro-file-actions
-			class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 md:gap-12"
-		>
-			<span class="hidden w-[160px] text-nowrap font-mono text-sm text-secondary md:flex">
+		<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="w-[160px] text-nowrap font-mono text-sm text-secondary">
+			<span class="hidden w-[160px] text-nowrap text-sm text-secondary md:block">
 				{{ formattedModifiedDate }}
 			</span>
 			<ButtonStyled circular type="transparent">
@@ -73,13 +70,23 @@ import {
 	FolderOpenIcon,
 	MoreHorizontalIcon,
 	PackageOpenIcon,
+	PaletteIcon,
 	RightArrowIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	Checkbox,
+	getFileExtension,
+	isArchiveFile,
+	isCodeFile,
+	isEditableFile as isEditableFileExt,
+	isImageFile,
+	isTextFile,
+} from '@modrinth/ui'
 import { computed, ref, shallowRef } from 'vue'
-import { renderToString } from 'vue/server-renderer'
 import { useRoute, useRouter } from 'vue-router'
+import { renderToString } from 'vue/server-renderer'
 
 import {
 	UiServersIconsCodeFileIcon,
@@ -88,7 +95,6 @@ import {
 	UiServersIconsImageFileIcon,
 	UiServersIconsTextFileIcon,
 } from '#components'
-import PaletteIcon from '~/assets/icons/palette.svg?component'
 
 import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
 
@@ -100,64 +106,41 @@ interface FileItemProps {
 	modified: number
 	created: number
 	path: string
+	index: number
+	isLast: boolean
+	selected: boolean
 }
 
 const props = defineProps<FileItemProps>()
 
 const emit = defineEmits<{
 	(
-		e: 'rename' | 'move' | 'download' | 'delete' | 'edit' | 'extract',
+		e: 'rename' | 'move' | 'download' | 'delete' | 'edit' | 'extract' | 'hover',
 		item: { name: string; type: string; path: string },
 	): void
 	(e: 'moveDirectTo', item: { name: string; type: string; path: string; destination: string }): void
 	(e: 'contextmenu', x: number, y: number): void
+	(e: 'toggle-select'): void
 }>()
 
 const isDragOver = ref(false)
 const isDragging = ref(false)
 
-const codeExtensions = Object.freeze([
-	'json',
-	'json5',
-	'jsonc',
-	'java',
-	'kt',
-	'kts',
-	'sh',
-	'bat',
-	'ps1',
-	'yml',
-	'yaml',
-	'toml',
-	'js',
-	'ts',
-	'py',
-	'rb',
-	'php',
-	'html',
-	'css',
-	'cpp',
-	'c',
-	'h',
-	'rs',
-	'go',
-])
-
-const textExtensions = Object.freeze(['txt', 'md', 'log', 'cfg', 'conf', 'properties', 'ini', 'sk'])
-const imageExtensions = Object.freeze(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'])
-const supportedArchiveExtensions = Object.freeze(['zip'])
 const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
 
 const route = shallowRef(useRoute())
 const router = useRouter()
 
 const containerClasses = computed(() => [
-	'group m-0 p-0 focus:!outline-none flex w-full select-none items-center justify-between overflow-hidden border-0 border-b border-solid border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised',
+	'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.index % 2 === 0 ? 'bg-surface-2' : 'bg-surface-3',
+	props.isLast ? 'rounded-b-[20px] border-b' : '',
 	isEditableFile.value ? 'cursor-pointer' : props.type === 'directory' ? 'cursor-pointer' : '',
-	isDragOver.value ? 'bg-brand-highlight' : '',
+	isDragOver.value ? '!bg-brand-highlight' : '',
+	'hover:brightness-110 focus:brightness-110',
 ])
 
-const fileExtension = computed(() => props.name.split('.').pop()?.toLowerCase() || '')
+const fileExtension = computed(() => getFileExtension(props.name))
 
 const isZip = computed(() => fileExtension.value === 'zip')
 
@@ -200,20 +183,13 @@ const iconComponent = computed(() => {
 	}
 
 	const ext = fileExtension.value
-	if (codeExtensions.includes(ext)) return UiServersIconsCodeFileIcon
-	if (textExtensions.includes(ext)) return UiServersIconsTextFileIcon
-	if (imageExtensions.includes(ext)) return UiServersIconsImageFileIcon
-	if (supportedArchiveExtensions.includes(ext)) return FileArchiveIcon
+	if (isCodeFile(ext)) return UiServersIconsCodeFileIcon
+	if (isTextFile(ext)) return UiServersIconsTextFileIcon
+	if (isImageFile(ext)) return UiServersIconsImageFileIcon
+	if (isArchiveFile(ext)) return FileArchiveIcon
 	return FileIcon
 })
 
-const subText = computed(() => {
-	if (props.type === 'directory') {
-		return `${props.count} ${props.count === 1 ? 'item' : 'items'}`
-	}
-	return formattedSize.value
-})
-
 const formattedModifiedDate = computed(() => {
 	const date = new Date(props.modified * 1000)
 	return `${date.toLocaleDateString('en-US', {
@@ -243,17 +219,16 @@ const formattedCreationDate = computed(() => {
 const isEditableFile = computed(() => {
 	if (props.type === 'file') {
 		const ext = fileExtension.value
-		return (
-			!props.name.includes('.') ||
-			textExtensions.includes(ext) ||
-			codeExtensions.includes(ext) ||
-			imageExtensions.includes(ext)
-		)
+		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'
@@ -263,12 +238,16 @@ const formattedSize = computed(() => {
 	return `${size} ${units[exponent]}`
 })
 
-const openContextMenu = (event: MouseEvent) => {
+function openContextMenu(event: MouseEvent) {
 	event.preventDefault()
 	emit('contextmenu', event.clientX, event.clientY)
 }
 
-const navigateToFolder = () => {
+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}`
@@ -278,7 +257,7 @@ const navigateToFolder = () => {
 
 const isNavigating = ref(false)
 
-const selectItem = () => {
+function selectItem() {
 	if (isNavigating.value) return
 	isNavigating.value = true
 
@@ -293,36 +272,12 @@ const selectItem = () => {
 	}, 500)
 }
 
-const getDragIcon = async () => {
-	let iconToUse
-
-	if (props.type === 'directory') {
-		if (props.name === 'config') {
-			iconToUse = UiServersIconsCogFolderIcon
-		} else if (props.name === 'world') {
-			iconToUse = UiServersIconsEarthIcon
-		} else if (props.name === 'resourcepacks') {
-			iconToUse = PaletteIcon
-		} else {
-			iconToUse = FolderOpenIcon
-		}
-	} else {
-		const ext = fileExtension.value
-		if (codeExtensions.includes(ext)) {
-			iconToUse = UiServersIconsCodeFileIcon
-		} else if (textExtensions.includes(ext)) {
-			iconToUse = UiServersIconsTextFileIcon
-		} else if (imageExtensions.includes(ext)) {
-			iconToUse = UiServersIconsImageFileIcon
-		} else {
-			iconToUse = FileIcon
-		}
-	}
-
-	return await renderToString(h(iconToUse))
+async function getDragIcon() {
+	// Reuse iconComponent computed for consistency
+	return await renderToString(h(iconComponent.value))
 }
 
-const handleDragStart = async (event: DragEvent) => {
+async function handleDragStart(event: DragEvent) {
 	if (!event.dataTransfer) return
 	isDragging.value = true
 
@@ -353,7 +308,7 @@ const handleDragStart = async (event: DragEvent) => {
 	})
 
 	event.dataTransfer.setData(
-		'application/pyro-file-move',
+		'application/modrinth-file-move',
 		JSON.stringify({
 			name: props.name,
 			type: props.type,
@@ -363,34 +318,34 @@ const handleDragStart = async (event: DragEvent) => {
 	event.dataTransfer.effectAllowed = 'move'
 }
 
-const isChildPath = (parentPath: string, childPath: string) => {
+function isChildPath(parentPath: string, childPath: string) {
 	return childPath.startsWith(parentPath + '/')
 }
 
-const handleDragEnd = () => {
+function handleDragEnd() {
 	isDragging.value = false
 }
 
-const handleDragEnter = () => {
+function handleDragEnter() {
 	if (props.type !== 'directory') return
 	isDragOver.value = true
 }
 
-const handleDragOver = (event: DragEvent) => {
+function handleDragOver(event: DragEvent) {
 	if (props.type !== 'directory' || !event.dataTransfer) return
 	event.dataTransfer.dropEffect = 'move'
 }
 
-const handleDragLeave = () => {
+function handleDragLeave() {
 	isDragOver.value = false
 }
 
-const handleDrop = (event: DragEvent) => {
+function handleDrop(event: DragEvent) {
 	isDragOver.value = false
 	if (props.type !== 'directory' || !event.dataTransfer) return
 
 	try {
-		const dragData = JSON.parse(event.dataTransfer.getData('application/pyro-file-move'))
+		const dragData = JSON.parse(event.dataTransfer.getData('application/modrinth-file-move'))
 
 		if (dragData.path === props.path) return
 
diff --git a/apps/frontend/src/components/ui/servers/FileManagerError.vue b/apps/frontend/src/components/ui/servers/FileManagerError.vue
index c9e984daf7..84adf75b66 100644
--- a/apps/frontend/src/components/ui/servers/FileManagerError.vue
+++ b/apps/frontend/src/components/ui/servers/FileManagerError.vue
@@ -2,7 +2,7 @@
 	<div class="flex h-full w-full items-center justify-center gap-6 p-20">
 		<FileIcon class="size-28" />
 		<div class="flex flex-col gap-2">
-			<h3 class="m-0 text-2xl font-bold text-red-500">{{ title }}</h3>
+			<h3 class="m-0 text-2xl font-bold text-red">{{ title }}</h3>
 			<p class="m-0 text-sm text-secondary">
 				{{ message }}
 			</p>
diff --git a/apps/frontend/src/components/ui/servers/FileVirtualList.vue b/apps/frontend/src/components/ui/servers/FileVirtualList.vue
index 9381fb77be..800783aa0e 100644
--- a/apps/frontend/src/components/ui/servers/FileVirtualList.vue
+++ b/apps/frontend/src/components/ui/servers/FileVirtualList.vue
@@ -1,11 +1,10 @@
 <template>
-	<div ref="listContainer" data-pyro-files-virtual-list-root class="relative w-full">
+	<div ref="listContainer" class="relative w-full">
 		<div
 			:style="{
 				position: 'relative',
 				minHeight: `${totalHeight}px`,
 			}"
-			data-pyro-files-virtual-height-watcher
 		>
 			<ul
 				class="list-none"
@@ -16,10 +15,9 @@
 					margin: 0,
 					padding: 0,
 				}"
-				data-pyro-files-virtual-list
 			>
 				<FileItem
-					v-for="item in visibleItems"
+					v-for="(item, idx) in visibleItems"
 					:key="item.path"
 					:count="item.count"
 					:created="item.created"
@@ -28,6 +26,9 @@
 					: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)"
 					@delete="$emit('delete', item)"
 					@rename="$emit('rename', item)"
 					@extract="$emit('extract', item)"
@@ -35,7 +36,9 @@
 					@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>
@@ -49,15 +52,17 @@ import FileItem from './FileItem.vue'
 
 const props = defineProps<{
 	items: any[]
+	selectedItems: Set<string>
 }>()
 
 const emit = defineEmits<{
 	(
-		e: 'delete' | 'rename' | 'download' | 'move' | 'edit' | 'moveDirectTo' | 'extract',
+		e: 'delete' | 'rename' | 'download' | 'move' | 'edit' | 'moveDirectTo' | 'extract' | 'hover',
 		item: any,
 	): void
 	(e: 'contextmenu', item: any, x: number, y: number): void
 	(e: 'loadMore'): void
+	(e: 'toggle-select', path: string): void
 }>()
 
 const ITEM_HEIGHT = 61
@@ -92,7 +97,7 @@ const visibleItems = computed(() => {
 	return props.items.slice(visibleRange.value.start, visibleRange.value.end)
 })
 
-const handleScroll = () => {
+function handleScroll() {
 	windowScrollY.value = window.scrollY
 
 	if (!listContainer.value) return
@@ -105,7 +110,7 @@ const handleScroll = () => {
 	}
 }
 
-const handleResize = () => {
+function handleResize() {
 	windowHeight.value = window.innerHeight
 }
 
diff --git a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
index 165d13facf..9d02fac539 100644
--- a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
@@ -1,11 +1,6 @@
 <template>
-	<div ref="pyroFilesSentinel" class="sentinel" data-pyro-files-sentinel />
 	<header
-		:class="[
-			'duration-20 top-0 flex select-none flex-col justify-between gap-2 bg-table-alternateRow p-3 transition-[border-radius] sm:h-12 sm:flex-row',
-			!isStuck ? 'rounded-t-2xl' : 'sticky top-0 z-20',
-		]"
-		data-pyro-files-state="browsing"
+		class="flex select-none flex-col justify-between gap-2 sm:flex-row sm:items-center"
 		aria-label="File navigation"
 	>
 		<nav
@@ -13,20 +8,17 @@
 			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="-ml-1 flex-shrink-0">
-					<ButtonStyled type="transparent">
+				<li class="mr-4 flex-shrink-0">
+					<ButtonStyled circular>
 						<button
 							v-tooltip="'Back to home'"
 							type="button"
-							class="mr-2 grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+							class="!size-10 bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 							@click="$emit('navigate', -1)"
+							@mouseenter="$emit('prefetch-home')"
 						>
-							<span
-								class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
-							>
-								<HomeIcon class="h-5 w-5" />
-								<span class="sr-only">Home</span>
-							</span>
+							<HomeIcon />
+							<span class="sr-only">Home</span>
 						</button>
 					</ButtonStyled>
 				</li>
@@ -70,58 +62,28 @@
 			</ol>
 		</nav>
 
-		<div class="flex flex-shrink-0 items-center gap-1">
-			<div class="flex w-full flex-row-reverse sm:flex-row">
-				<ButtonStyled type="transparent">
-					<TeleportOverflowMenu
-						position="bottom"
-						direction="left"
-						aria-label="Filter view"
-						:options="[
-							{ id: 'all', action: () => $emit('filter', 'all') },
-							{ id: 'filesOnly', action: () => $emit('filter', 'filesOnly') },
-							{ id: 'foldersOnly', action: () => $emit('filter', 'foldersOnly') },
-						]"
-					>
-						<div class="flex items-center gap-1">
-							<FilterIcon aria-hidden="true" class="h-5 w-5" />
-							<span class="hidden text-sm font-medium sm:block">
-								{{ filterLabel }}
-							</span>
-						</div>
-						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-						<template #all>Show all</template>
-						<template #filesOnly>Files only</template>
-						<template #foldersOnly>Folders only</template>
-					</TeleportOverflowMenu>
-				</ButtonStyled>
-				<div class="mx-1 w-full text-sm sm:w-48">
-					<label for="search-folder" class="sr-only">Search folder</label>
-					<div class="relative">
-						<SearchIcon
-							class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
-							aria-hidden="true"
-						/>
-						<input
-							id="search-folder"
-							:value="searchQuery"
-							type="search"
-							name="search"
-							autocomplete="off"
-							class="h-8 min-h-[unset] w-full border-[1px] border-solid border-divider bg-transparent py-2 pl-9"
-							placeholder="Search..."
-							@input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
-						/>
-					</div>
-				</div>
+		<div class="flex flex-shrink-0 items-center gap-2">
+			<div class="iconified-input w-full sm:w-[280px]">
+				<SearchIcon aria-hidden="true" class="!text-secondary" />
+				<input
+					id="search-folder"
+					:value="searchQuery"
+					type="search"
+					name="search"
+					autocomplete="off"
+					class="h-10 w-full rounded-[14px] border-0 bg-surface-4 text-sm"
+					placeholder="Search files"
+					@input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
+				/>
 			</div>
 
-			<ButtonStyled type="transparent">
+			<ButtonStyled type="outlined">
 				<OverflowMenu
 					:dropdown-id="`create-new-${baseId}`"
 					position="bottom"
 					direction="left"
 					aria-label="Create new..."
+					class="!h-10 justify-center gap-2 !border-[1px] !border-surface-5"
 					:options="[
 						{ id: 'file', action: () => $emit('create', 'file') },
 						{ id: 'directory', action: () => $emit('create', 'directory') },
@@ -132,8 +94,8 @@
 						{ id: 'install-cf-pack', action: () => $emit('unzip-from-url', true) },
 					]"
 				>
-					<PlusIcon aria-hidden="true" />
-					<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+					<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>
@@ -159,7 +121,6 @@ import {
 	CurseForgeIcon,
 	DropdownIcon,
 	FileArchiveIcon,
-	FilterIcon,
 	FolderOpenIcon,
 	HomeIcon,
 	LinkIcon,
@@ -168,12 +129,8 @@ import {
 	UploadIcon,
 } from '@modrinth/assets'
 import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
-import { useIntersectionObserver } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
 
-const props = defineProps<{
+defineProps<{
 	breadcrumbSegments: string[]
 	searchQuery: string
 	currentFilter: string
@@ -183,44 +140,13 @@ const props = defineProps<{
 defineEmits<{
 	(e: 'navigate', index: number): void
 	(e: 'create', type: 'file' | 'directory'): void
-	(e: 'upload' | 'upload-zip'): void
+	(e: 'upload' | 'upload-zip' | 'prefetch-home'): void
 	(e: 'unzip-from-url', cf: boolean): void
 	(e: 'update:searchQuery' | 'filter', value: string): void
 }>()
-
-const pyroFilesSentinel = ref<HTMLElement | null>(null)
-const isStuck = ref(false)
-
-useIntersectionObserver(
-	pyroFilesSentinel,
-	([{ isIntersecting }]) => {
-		isStuck.value = !isIntersecting
-	},
-	{ threshold: [0, 1] },
-)
-
-const filterLabel = computed(() => {
-	switch (props.currentFilter) {
-		case 'filesOnly':
-			return 'Files only'
-		case 'foldersOnly':
-			return 'Folders only'
-		default:
-			return 'Show all'
-	}
-})
 </script>
 
 <style scoped>
-.sentinel {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 1px;
-	visibility: hidden;
-}
-
 .breadcrumb-move,
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
diff --git a/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue b/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
index 2d46e6fceb..d5cd6f1382 100644
--- a/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
@@ -2,10 +2,10 @@
 	<NewModal ref="modal" 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-[#cb224436] bg-[#f57b7b0e] p-6 shadow-md dark:border-0 dark:bg-[#0e0e0ea4]"
+				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-[#3f1818a4] p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
+					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" />
diff --git a/apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue b/apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue
index 3eb5ad6f91..cb5cf5111d 100644
--- a/apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue
@@ -1,7 +1,7 @@
 <template>
 	<header
 		data-pyro-files-state="editing"
-		class="flex h-12 select-none items-center justify-between rounded-t-2xl bg-table-alternateRow p-3"
+		class="flex select-none items-center justify-between gap-2 sm:flex-row"
 		aria-label="File editor navigation"
 	>
 		<nav
@@ -9,20 +9,16 @@
 			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="-ml-1 flex-shrink-0">
-					<ButtonStyled type="transparent">
+				<li class="mr-4 flex-shrink-0">
+					<ButtonStyled circular>
 						<button
 							v-tooltip="'Back to home'"
 							type="button"
-							class="mr-2 grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+							class="!size-10 bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 							@click="goHome"
 						>
-							<span
-								class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
-							>
-								<HomeIcon class="h-5 w-5" />
-								<span class="sr-only">Home</span>
-							</span>
+							<HomeIcon />
+							<span class="sr-only">Home</span>
 						</button>
 					</ButtonStyled>
 				</li>
diff --git a/apps/frontend/src/components/ui/servers/FilesEditor.vue b/apps/frontend/src/components/ui/servers/FilesEditor.vue
new file mode 100644
index 0000000000..f9961a130a
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesEditor.vue
@@ -0,0 +1,260 @@
+<template>
+	<div class="flex h-full w-full flex-col gap-4">
+		<FilesRenameItemModal ref="renameModal" :item="file" @rename="handleRenameItem" />
+
+		<FilesEditingNavbar
+			:file-name="file?.name"
+			:is-image="isEditingImage"
+			:file-path="file?.path"
+			class="-mt-2"
+			:breadcrumb-segments="breadcrumbSegments"
+			@cancel="handleCancel"
+			@save="() => saveFileContent(true)"
+			@save-as="saveFileContentAs"
+			@save-restart="saveFileContentRestart"
+			@share="requestShareLink"
+			@navigate="(index) => emit('navigate', index)"
+		/>
+
+		<div class="flex flex-col 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"
+				/>
+				<FilesImageViewer 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 { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import FilesEditingNavbar from '~/components/ui/servers/FilesEditingNavbar.vue'
+import FilesImageViewer from '~/components/ui/servers/FilesImageViewer.vue'
+import FilesRenameItemModal from '~/components/ui/servers/FilesRenameItemModal.vue'
+
+const props = defineProps<{
+	file: { name: string; type: string; path: string } | null
+	breadcrumbSegments: string[]
+	editorComponent: any
+}>()
+
+const emit = defineEmits<{
+	close: []
+	navigate: [index: number]
+}>()
+
+const notifications = injectNotificationManager()
+const { addNotification } = notifications
+const client = injectModrinthClient()
+const serverContext = injectModrinthServerContext()
+const { serverId } = serverContext
+const queryClient = useQueryClient()
+
+const modulesLoaded = inject<Promise<void>>('modulesLoaded')
+
+// Internal state
+const fileContent = ref('')
+const isEditingImage = ref(false)
+const imagePreview = ref<Blob | null>(null)
+const isLoading = ref(false)
+const renameModal = ref()
+const closeAfterRename = ref(false)
+const editorInstance = ref<any>(null)
+
+const editorLanguage = computed(() => {
+	const ext = getFileExtension(props.file?.name ?? '')
+	return getEditorLanguage(ext)
+})
+
+// Load file content when file prop changes
+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)
+
+		if (file.type === 'file' && isImageFile(extension)) {
+			// Images are not prefetched, fetch directly
+			const content = await client.kyros.files_v0.downloadFile(file.path)
+			isEditingImage.value = true
+			imagePreview.value = content
+		} else {
+			isEditingImage.value = false
+			// Check cache first for text files (may have been prefetched on hover)
+			const cachedContent = queryClient.getQueryData<string>(['file-content', serverId, file.path])
+			if (cachedContent) {
+				fileContent.value = cachedContent
+			} else {
+				const content = await client.kyros.files_v0.downloadFile(file.path)
+				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
+	closeAfterRename.value = false
+}
+
+function onEditorInit(editor: any) {
+	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 {
+		await client.kyros.files_v0.updateFile(props.file.path, 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 saveFileContentRestart() {
+	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 saveFileContentAs() {
+	await saveFileContent(false)
+	closeAfterRename.value = true
+	renameModal.value?.show(props.file)
+}
+
+async function handleRenameItem(newName: string) {
+	if (!props.file) return
+
+	try {
+		await client.kyros.files_v0.renameFileOrFolder(props.file.path, newName)
+
+		addNotification({ title: 'Renamed', text: `Renamed to ${newName}`, type: 'success' })
+
+		if (closeAfterRename.value) {
+			await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+			closeAfterRename.value = false
+			emit('close')
+		}
+	} catch (err: any) {
+		addNotification({ title: 'Rename failed', text: err.message, type: 'error' })
+	}
+}
+
+async function requestShareLink() {
+	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 }),
+		})) as any
+
+		if (response.success) {
+			await navigator.clipboard.writeText(response.url)
+			addNotification({
+				title: 'Log URL copied',
+				text: 'Your log file URL has been copied to your clipboard.',
+				type: 'success',
+			})
+		} else {
+			throw new Error(response.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 handleCancel() {
+	resetState()
+	emit('close')
+}
+
+onMounted(async () => {
+	await modulesLoaded
+})
+
+onUnmounted(() => {
+	editorInstance.value = null
+	resetState()
+})
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
index 3d23470a9b..e05024c8a5 100644
--- a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
+++ b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
@@ -2,7 +2,7 @@
 	<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-b-2xl bg-black active:cursor-grabbing"
+			class="relative w-full flex-grow cursor-grab overflow-hidden rounded-[20px] bg-black active:cursor-grabbing"
 			@mousedown="startPan"
 			@mousemove="handlePan"
 			@mouseup="stopPan"
diff --git a/apps/frontend/src/components/ui/servers/FilesLabelBar.vue b/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
index 717888cb82..72bf21a295 100644
--- a/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
@@ -1,65 +1,102 @@
 <template>
 	<div
 		aria-hidden="true"
-		class="sticky top-12 z-20 flex h-8 w-full select-none flex-row items-center border-0 border-b border-solid border-bg-raised bg-bg px-3 text-xs font-bold uppercase"
+		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="min-w-[48px]"></div>
-		<button
-			class="flex h-full w-full appearance-none items-center gap-1 bg-transparent text-left hover:text-brand"
-			@click="$emit('sort', 'name')"
-		>
-			<span>Name</span>
-			<ChevronUpIcon v-if="sortField === 'name' && !sortDesc" class="h-3 w-3" aria-hidden="true" />
-			<ChevronDownIcon v-if="sortField === 'name' && sortDesc" class="h-3 w-3" aria-hidden="true" />
-		</button>
-		<div class="flex shrink-0 gap-4 text-right md:gap-12">
+		<div class="flex flex-1 items-center gap-3">
+			<Checkbox
+				:model-value="allSelected"
+				:indeterminate="someSelected && !allSelected"
+				@update:model-value="$emit('toggle-all')"
+			/>
 			<button
-				class="hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
+				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>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>Created</span>
 				<ChevronUpIcon
 					v-if="sortField === 'created' && !sortDesc"
-					class="h-3 w-3"
+					class="h-4 w-4"
 					aria-hidden="true"
 				/>
 				<ChevronDownIcon
 					v-if="sortField === 'created' && sortDesc"
-					class="h-3 w-3"
+					class="h-4 w-4"
 					aria-hidden="true"
 				/>
 			</button>
 			<button
-				class="mr-4 hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
+				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>Modified</span>
 				<ChevronUpIcon
 					v-if="sortField === 'modified' && !sortDesc"
-					class="h-3 w-3"
+					class="h-4 w-4"
 					aria-hidden="true"
 				/>
 				<ChevronDownIcon
 					v-if="sortField === 'modified' && sortDesc"
-					class="h-3 w-3"
+					class="h-4 w-4"
 					aria-hidden="true"
 				/>
 			</button>
-			<div class="min-w-[24px]"></div>
+			<span class="w-[51px] text-right text-primary">Actions</span>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { Checkbox } from '@modrinth/ui'
+
 import ChevronDownIcon from './icons/ChevronDownIcon.vue'
 import ChevronUpIcon from './icons/ChevronUpIcon.vue'
 
 defineProps<{
 	sortField: string
 	sortDesc: boolean
+	allSelected: boolean
+	someSelected: boolean
+	isStuck: boolean
 }>()
 
 defineEmits<{
 	(e: 'sort', field: string): void
+	(e: 'toggle-all'): void
 }>()
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue b/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
index 918b9fc37f..af0c089193 100644
--- a/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
@@ -9,12 +9,12 @@
 		<div
 			v-if="isDragging"
 			:class="[
-				'absolute inset-0 flex items-center justify-center rounded-2xl bg-black bg-opacity-50 text-white',
+				'absolute inset-0 flex items-center justify-center rounded-2xl bg-black/60 text-contrast shadow',
 				overlayClass,
 			]"
 		>
 			<div class="text-center">
-				<UploadIcon class="mx-auto h-16 w-16" />
+				<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
 				</p>
@@ -24,8 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import { UploadIcon } from '@modrinth/assets'
-import { ref } from 'vue'
+import { UploadIcon } from '@modrinth/assets';
+import { ref } from 'vue';
 
 const emit = defineEmits<{
 	(event: 'filesDropped', files: File[]): void
@@ -41,7 +41,7 @@ const dragCounter = ref(0)
 
 const handleDragEnter = (event: DragEvent) => {
 	event.preventDefault()
-	if (!event.dataTransfer?.types.includes('application/pyro-file-move')) {
+	if (!event.dataTransfer?.types.includes('application/modrinth-file-move')) {
 		dragCounter.value++
 		isDragging.value = true
 	}
@@ -64,7 +64,7 @@ const handleDrop = (event: DragEvent) => {
 	isDragging.value = false
 	dragCounter.value = 0
 
-	const isInternalMove = event.dataTransfer?.types.includes('application/pyro-file-move')
+	const isInternalMove = event.dataTransfer?.types.includes('application/modrinth-file-move')
 	if (isInternalMove) return
 
 	const files = event.dataTransfer?.files
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
index 7261b304db..344e3d06c5 100644
--- a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
@@ -102,14 +102,13 @@
 
 <script setup lang="ts">
 import { CheckCircleIcon, FolderOpenIcon, XCircleIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import { computed, nextTick, ref, watch } from 'vue'
 
-import type { FSModule } from '~/composables/servers/modules/fs.ts'
-
 import PanelSpinner from './PanelSpinner.vue'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
 
 interface UploadItem {
 	file: File
@@ -123,7 +122,7 @@ interface UploadItem {
 		| 'cancelled'
 		| 'incorrect-type'
 	size: string
-	uploader?: any
+	uploader?: ReturnType<typeof client.kyros.files_v0.uploadFile>
 	error?: Error
 }
 
@@ -132,7 +131,6 @@ interface Props {
 	fileType?: string
 	marginBottom?: number
 	acceptedTypes?: Array<string>
-	fs: FSModule
 }
 
 defineOptions({
@@ -208,6 +206,7 @@ const cancelUpload = (item: UploadItem) => {
 }
 
 const badFileTypeMsg = 'Upload had incorrect file type'
+
 const uploadFile = async (file: File) => {
 	const uploadItem: UploadItem = {
 		file,
@@ -229,19 +228,18 @@ const uploadFile = async (file: File) => {
 
 		uploadItem.status = 'uploading'
 		const filePath = `${props.currentPath}/${file.name}`.replace('//', '/')
-		const uploader = await props.fs.uploadFile(filePath, file)
-		uploadItem.uploader = uploader
 
-		if (uploader?.onProgress) {
-			uploader.onProgress(({ progress }: { progress: number }) => {
+		const uploader = client.kyros.files_v0.uploadFile(filePath, file, {
+			onProgress: ({ progress }) => {
 				const index = uploadQueue.value.findIndex((item) => item.file.name === file.name)
 				if (index !== -1) {
 					uploadQueue.value[index].progress = Math.round(progress)
 				}
-			})
-		}
+			},
+		})
+		uploadItem.uploader = uploader
 
-		await uploader?.promise
+		await uploader.promise
 		const index = uploadQueue.value.findIndex((item) => item.file.name === file.name)
 		if (index !== -1 && uploadQueue.value[index].status !== 'cancelled') {
 			uploadQueue.value[index].status = 'completed'
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue b/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
index 4cbe858dc1..352f3cd568 100644
--- a/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
@@ -52,7 +52,7 @@
 				/>
 				<div v-if="submitted && error" class="text-red">{{ error }}</div>
 			</div>
-			<BackupWarning :backup-link="`/hosting/manage/${props.server.serverId}/backups`" />
+			<BackupWarning :backup-link="`/hosting/manage/${serverId}/backups`" />
 			<div class="flex justify-start gap-2">
 				<ButtonStyled color="brand">
 					<button v-tooltip="error" :disabled="submitted || !!error" type="submit">
@@ -74,21 +74,25 @@
 
 <script setup lang="ts">
 import { DownloadIcon, ExternalIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { BackupWarning, ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
+	BackupWarning,
+	ButtonStyled,
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+	NewModal,
+} from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 import { computed, nextTick, ref } from 'vue'
 
-import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 import { handleServersError } from '~/composables/servers/modrinth-servers.ts'
 
 const notifications = injectNotificationManager()
+const client = injectModrinthClient()
+const { serverId } = injectModrinthServerContext()
 
 const cf = ref(false)
 
-const props = defineProps<{
-	server: ModrinthServer
-}>()
-
 const modal = ref<typeof NewModal>()
 const urlInput = ref<HTMLInputElement | null>(null)
 const url = ref('')
@@ -115,10 +119,10 @@ const handleSubmit = async () => {
 	if (!error.value) {
 		// hide();
 		try {
-			const dry = await props.server.fs.extractFile(trimmedUrl.value, true, true)
+			const dry = await client.kyros.files_v0.extractFile(trimmedUrl.value, true, true)
 
 			if (!cf.value || dry.modpack_name) {
-				await props.server.fs.extractFile(trimmedUrl.value, true, false, true)
+				await client.kyros.files_v0.extractFile(trimmedUrl.value, true, false)
 				hide()
 			} else {
 				submitted.value = false
diff --git a/apps/frontend/src/composables/servers/modrinth-servers.ts b/apps/frontend/src/composables/servers/modrinth-servers.ts
index d6f2f7b743..2b02457a28 100644
--- a/apps/frontend/src/composables/servers/modrinth-servers.ts
+++ b/apps/frontend/src/composables/servers/modrinth-servers.ts
@@ -2,15 +2,7 @@ import type { AbstractWebNotificationManager } from '@modrinth/ui'
 import type { JWTAuth, ModuleError, ModuleName } from '@modrinth/utils'
 import { ModrinthServerError } from '@modrinth/utils'
 
-import {
-	BackupsModule,
-	ContentModule,
-	FSModule,
-	GeneralModule,
-	NetworkModule,
-	StartupModule,
-	WSModule,
-} from './modules/index.ts'
+import { ContentModule, GeneralModule, NetworkModule, StartupModule } from './modules/index.ts'
 import { useServersFetch } from './servers-fetch.ts'
 
 export function handleServersError(err: any, notifications: AbstractWebNotificationManager) {
@@ -36,39 +28,16 @@ export class ModrinthServer {
 
 	readonly general: GeneralModule
 	readonly content: ContentModule
-	readonly backups: BackupsModule
 	readonly network: NetworkModule
 	readonly startup: StartupModule
-	readonly ws: WSModule
-	readonly fs: FSModule
 
 	constructor(serverId: string) {
 		this.serverId = serverId
 
 		this.general = new GeneralModule(this)
 		this.content = new ContentModule(this)
-		this.backups = new BackupsModule(this)
 		this.network = new NetworkModule(this)
 		this.startup = new StartupModule(this)
-		this.ws = new WSModule(this)
-		this.fs = new FSModule(this)
-	}
-
-	async createMissingFolders(path: string): Promise<void> {
-		if (path.startsWith('/')) {
-			path = path.substring(1)
-		}
-		const folders = path.split('/')
-		let currentPath = ''
-
-		for (const folder of folders) {
-			currentPath += '/' + folder
-			try {
-				await this.fs.createFileOrFolder(currentPath, 'directory')
-			} catch {
-				// Folder might already exist, ignore error
-			}
-		}
 	}
 
 	async fetchConfigFile(fileName: string): Promise<any> {
@@ -240,9 +209,7 @@ export class ModrinthServer {
 		},
 	): Promise<void> {
 		const modulesToRefresh =
-			modules.length > 0
-				? modules
-				: (['general', 'content', 'backups', 'network', 'startup', 'ws', 'fs'] as ModuleName[])
+			modules.length > 0 ? modules : (['general', 'content', 'network', 'startup'] as ModuleName[])
 
 		for (const module of modulesToRefresh) {
 			this.errors[module] = undefined
@@ -274,25 +241,16 @@ export class ModrinthServer {
 					case 'content':
 						await this.content.fetch()
 						break
-					case 'backups':
-						await this.backups.fetch()
-						break
 					case 'network':
 						await this.network.fetch()
 						break
 					case 'startup':
 						await this.startup.fetch()
 						break
-					case 'ws':
-						await this.ws.fetch()
-						break
-					case 'fs':
-						await this.fs.fetch()
-						break
 				}
 			} catch (error) {
 				if (error instanceof ModrinthServerError) {
-					if (error.statusCode === 404 && ['fs', 'content'].includes(module)) {
+					if (error.statusCode === 404 && module === 'content') {
 						console.debug(`Optional ${module} resource not found:`, error.message)
 						continue
 					}
diff --git a/apps/frontend/src/composables/servers/modules/fs.ts b/apps/frontend/src/composables/servers/modules/fs.ts
deleted file mode 100644
index fdf2a1cf7e..0000000000
--- a/apps/frontend/src/composables/servers/modules/fs.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-import type {
-	DirectoryResponse,
-	FilesystemOp,
-	FileUploadQuery,
-	FSQueuedOp,
-	JWTAuth,
-} from '@modrinth/utils'
-import { ModrinthServerError } from '@modrinth/utils'
-
-import { useServersFetch } from '../servers-fetch.ts'
-import { ServerModule } from './base.ts'
-
-export class FSModule extends ServerModule {
-	auth!: JWTAuth
-	ops: FilesystemOp[] = []
-	queuedOps: FSQueuedOp[] = []
-	opsQueuedForModification: string[] = []
-
-	async fetch(): Promise<void> {
-		this.auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`, {}, 'fs')
-		this.ops = []
-		this.queuedOps = []
-		this.opsQueuedForModification = []
-	}
-
-	private async retryWithAuth<T>(
-		requestFn: () => Promise<T>,
-		ignoreFailure: boolean = false,
-	): Promise<T> {
-		try {
-			return await requestFn()
-		} catch (error) {
-			if (error instanceof ModrinthServerError && error.statusCode === 401) {
-				console.debug('Auth failed, refreshing JWT and retrying')
-				await this.fetch() // Refresh auth
-				return await requestFn()
-			}
-
-			const available = await this.server.testNodeReachability()
-			if (!available && !ignoreFailure) {
-				this.server.moduleErrors.general = {
-					error: new ModrinthServerError(
-						'Unable to reach node. FS operation failed and subsequent ping test failed.',
-						500,
-						error as Error,
-						'fs',
-					),
-					timestamp: Date.now(),
-				}
-			}
-
-			throw error
-		}
-	}
-
-	listDirContents(
-		path: string,
-		page: number,
-		pageSize: number,
-		ignoreFailure: boolean = false,
-	): Promise<DirectoryResponse> {
-		return this.retryWithAuth(async () => {
-			const encodedPath = encodeURIComponent(path)
-			return await useServersFetch(`/list?path=${encodedPath}&page=${page}&page_size=${pageSize}`, {
-				override: this.auth,
-				retry: false,
-			})
-		}, ignoreFailure)
-	}
-
-	createFileOrFolder(path: string, type: 'file' | 'directory'): Promise<void> {
-		return this.retryWithAuth(async () => {
-			const encodedPath = encodeURIComponent(path)
-			await useServersFetch(`/create?path=${encodedPath}&type=${type}`, {
-				method: 'POST',
-				contentType: 'application/octet-stream',
-				override: this.auth,
-			})
-		})
-	}
-
-	uploadFile(path: string, file: File): FileUploadQuery {
-		const encodedPath = encodeURIComponent(path)
-		const progressSubject = new EventTarget()
-		const abortController = new AbortController()
-
-		const uploadPromise = new Promise((resolve, reject) => {
-			const xhr = new XMLHttpRequest()
-
-			xhr.upload.addEventListener('progress', (e) => {
-				if (e.lengthComputable) {
-					const progress = (e.loaded / e.total) * 100
-					progressSubject.dispatchEvent(
-						new CustomEvent('progress', {
-							detail: { loaded: e.loaded, total: e.total, progress },
-						}),
-					)
-				}
-			})
-
-			xhr.onload = () => {
-				if (xhr.status >= 200 && xhr.status < 300) {
-					resolve(xhr.response)
-				} else {
-					reject(new Error(`Upload failed with status ${xhr.status}`))
-				}
-			}
-
-			xhr.onerror = () => reject(new Error('Upload failed'))
-			xhr.onabort = () => reject(new Error('Upload cancelled'))
-
-			xhr.open('POST', `https://${this.auth.url}/create?path=${encodedPath}&type=file`)
-			xhr.setRequestHeader('Authorization', `Bearer ${this.auth.token}`)
-			xhr.setRequestHeader('Content-Type', 'application/octet-stream')
-			xhr.send(file)
-
-			abortController.signal.addEventListener('abort', () => xhr.abort())
-		})
-
-		return {
-			promise: uploadPromise,
-			onProgress: (
-				callback: (progress: { loaded: number; total: number; progress: number }) => void,
-			) => {
-				progressSubject.addEventListener('progress', ((e: CustomEvent) => {
-					callback(e.detail)
-				}) as EventListener)
-			},
-			cancel: () => abortController.abort(),
-		} as FileUploadQuery
-	}
-
-	renameFileOrFolder(path: string, name: string): Promise<void> {
-		const pathName = path.split('/').slice(0, -1).join('/') + '/' + name
-		return this.retryWithAuth(async () => {
-			await useServersFetch(`/move`, {
-				method: 'POST',
-				override: this.auth,
-				body: { source: path, destination: pathName },
-			})
-		})
-	}
-
-	updateFile(path: string, content: string): Promise<void> {
-		const octetStream = new Blob([content], { type: 'application/octet-stream' })
-		return this.retryWithAuth(async () => {
-			await useServersFetch(`/update?path=${path}`, {
-				method: 'PUT',
-				contentType: 'application/octet-stream',
-				body: octetStream,
-				override: this.auth,
-			})
-		})
-	}
-
-	moveFileOrFolder(path: string, newPath: string): Promise<void> {
-		return this.retryWithAuth(async () => {
-			await this.server.createMissingFolders(newPath.substring(0, newPath.lastIndexOf('/')))
-			await useServersFetch(`/move`, {
-				method: 'POST',
-				override: this.auth,
-				body: { source: path, destination: newPath },
-			})
-		})
-	}
-
-	deleteFileOrFolder(path: string, recursive: boolean): Promise<void> {
-		const encodedPath = encodeURIComponent(path)
-		return this.retryWithAuth(async () => {
-			await useServersFetch(`/delete?path=${encodedPath}&recursive=${recursive}`, {
-				method: 'DELETE',
-				override: this.auth,
-			})
-		})
-	}
-
-	downloadFile(path: string, raw: boolean = false, ignoreFailure: boolean = false): Promise<any> {
-		return this.retryWithAuth(async () => {
-			const encodedPath = encodeURIComponent(path)
-			const fileData = await useServersFetch(`/download?path=${encodedPath}`, {
-				override: this.auth,
-			})
-
-			if (fileData instanceof Blob) {
-				return raw ? fileData : await fileData.text()
-			}
-			return fileData
-		}, ignoreFailure)
-	}
-
-	extractFile(
-		path: string,
-		override = true,
-		dry = false,
-		silentQueue = false,
-	): Promise<{ modpack_name: string | null; conflicting_files: string[] }> {
-		return this.retryWithAuth(async () => {
-			const encodedPath = encodeURIComponent(path)
-
-			if (!silentQueue) {
-				this.queuedOps.push({ op: 'unarchive', src: path })
-				setTimeout(() => this.removeQueuedOp('unarchive', path), 4000)
-			}
-
-			try {
-				return await useServersFetch(
-					`/unarchive?src=${encodedPath}&trg=/&override=${override}&dry=${dry}`,
-					{
-						method: 'POST',
-						override: this.auth,
-						version: 1,
-					},
-					undefined,
-					'Error extracting file',
-				)
-			} catch (err) {
-				this.removeQueuedOp('unarchive', path)
-				throw err
-			}
-		})
-	}
-
-	modifyOp(id: string, action: 'dismiss' | 'cancel'): Promise<void> {
-		return this.retryWithAuth(async () => {
-			await useServersFetch(
-				`/ops/${action}?id=${id}`,
-				{
-					method: 'POST',
-					override: this.auth,
-					version: 1,
-				},
-				undefined,
-				`Error ${action === 'dismiss' ? 'dismissing' : 'cancelling'} filesystem operation`,
-			)
-
-			this.opsQueuedForModification = this.opsQueuedForModification.filter((x: string) => x !== id)
-			this.ops = this.ops.filter((x: FilesystemOp) => x.id !== id)
-		})
-	}
-
-	removeQueuedOp(op: FSQueuedOp['op'], src: string): void {
-		this.queuedOps = this.queuedOps.filter((x: FSQueuedOp) => x.op !== op || x.src !== src)
-	}
-
-	clearQueuedOps(): void {
-		this.queuedOps = []
-	}
-}
diff --git a/apps/frontend/src/composables/servers/modules/general.ts b/apps/frontend/src/composables/servers/modules/general.ts
index 5f8a528585..77776b78d0 100644
--- a/apps/frontend/src/composables/servers/modules/general.ts
+++ b/apps/frontend/src/composables/servers/modules/general.ts
@@ -50,19 +50,6 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
 			data.image = (await this.server.processImage(data.project?.icon_url)) ?? undefined
 		}
 
-		try {
-			const motd = await this.getMotd()
-			if (motd === 'A Minecraft Server') {
-				await this.setMotd(
-					`§b${data.project?.title || data.loader + ' ' + data.mc_version} §f♦ §aModrinth Hosting`,
-				)
-			}
-			data.motd = motd
-		} catch {
-			console.error('[Modrinth Hosting] [General] Failed to fetch MOTD.')
-			data.motd = undefined
-		}
-
 		// Copy data to this module
 		Object.assign(this, data)
 	}
@@ -189,23 +176,6 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
 		await this.fetch() // Refresh this module
 	}
 
-	async getMotd(): Promise<string | undefined> {
-		try {
-			const props = await this.server.fs.downloadFile('/server.properties', false, true)
-			if (props) {
-				const lines = props.split('\n')
-				for (const line of lines) {
-					if (line.startsWith('motd=')) {
-						return line.slice(5)
-					}
-				}
-			}
-		} catch {
-			return undefined
-		}
-		return undefined
-	}
-
 	async setMotd(motd: string): Promise<void> {
 		try {
 			const props = (await this.server.fetchConfigFile('ServerProperties')) as any
diff --git a/apps/frontend/src/composables/servers/modules/index.ts b/apps/frontend/src/composables/servers/modules/index.ts
index c3980f97a4..62fe2c45f8 100644
--- a/apps/frontend/src/composables/servers/modules/index.ts
+++ b/apps/frontend/src/composables/servers/modules/index.ts
@@ -1,7 +1,6 @@
 export * from './backups.ts'
 export * from './base.ts'
 export * from './content.ts'
-export * from './fs.ts'
 export * from './general.ts'
 export * from './network.ts'
 export * from './startup.ts'
diff --git a/apps/frontend/src/helpers/api.ts b/apps/frontend/src/helpers/api.ts
index a58726db08..cf9045aa12 100644
--- a/apps/frontend/src/helpers/api.ts
+++ b/apps/frontend/src/helpers/api.ts
@@ -3,6 +3,8 @@ import {
 	type AuthConfig,
 	AuthFeature,
 	CircuitBreakerFeature,
+	NodeAuthFeature,
+	nodeAuthState,
 	NuxtCircuitBreakerStorage,
 	type NuxtClientConfig,
 	NuxtModrinthClient,
@@ -24,6 +26,16 @@ export function createModrinthClient(
 		archonBaseUrl: config.archonBaseUrl,
 		rateLimitKey: config.rateLimitKey,
 		features: [
+			// for modrinth hosting
+			// is skipped for normal reqs
+			new NodeAuthFeature({
+				getAuth: () => nodeAuthState.getAuth?.() ?? null,
+				refreshAuth: async () => {
+					if (nodeAuthState.refreshAuth) {
+						await nodeAuthState.refreshAuth()
+					}
+				},
+			}),
 			new AuthFeature({
 				token: async () => auth.value.token,
 			} as AuthConfig),
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index af1744649b..2b32821aeb 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -374,6 +374,7 @@
 <script setup lang="ts">
 import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
 import type { Archon } from '@modrinth/api-client'
+import { clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
 import {
 	CheckIcon,
 	CopyIcon,
@@ -395,7 +396,7 @@ import {
 	ServerInfoLabels,
 	ServerNotice,
 } from '@modrinth/ui'
-import type { PowerAction, Stats } from '@modrinth/utils'
+import type { FilesystemOp, FSQueuedOp, PowerAction, Stats } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import type { MessageDescriptor } from '@vintl/vintl'
 import DOMPurify from 'dompurify'
@@ -450,7 +451,7 @@ const loadModulesPromise = Promise.resolve().then(() => {
 	if (server.general?.status === 'suspended') {
 		return
 	}
-	return server.refresh(['content', 'backups', 'network', 'startup', 'fs'])
+	return server.refresh(['content', 'backups', 'network', 'startup'])
 })
 
 provide('modulesLoaded', loadModulesPromise)
@@ -478,6 +479,22 @@ const markBackupCancelled = (backupId: string) => {
 	cancelledBackups.add(backupId)
 }
 
+const fsAuth = ref<{ url: string; token: string } | null>(null)
+const fsOps = ref<FilesystemOp[]>([])
+const fsQueuedOps = ref<FSQueuedOp[]>([])
+
+const refreshFsAuth = async () => {
+	try {
+		const auth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+		fsAuth.value = auth
+	} catch (error) {
+		console.error('Failed to refresh filesystem auth:', error)
+		throw error
+	}
+}
+
+setNodeAuthState(() => fsAuth.value, refreshFsAuth)
+
 provideModrinthServerContext({
 	serverId,
 	server: n_server as Ref<Archon.Servers.v0.Server>,
@@ -486,6 +503,10 @@ provideModrinthServerContext({
 	isServerRunning,
 	backupsState,
 	markBackupCancelled,
+	fsAuth,
+	fsOps,
+	fsQueuedOps,
+	refreshFsAuth,
 })
 
 const uptimeSeconds = ref(0)
@@ -748,24 +769,29 @@ const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) =
 	}
 }
 
-const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
-	if (!server.fs) {
-		console.error('FilesystemOps received, but server.fs is not available', data)
-		return
-	}
+const opsQueuedForModification = ref<string[]>([])
 
+const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
 	const allOps = data.all
 
-	if (JSON.stringify(server.fs.ops) !== JSON.stringify(allOps)) {
-		server.fs.ops = allOps as unknown as ModrinthServer['fs']['ops']
+	if (JSON.stringify(fsOps.value) !== JSON.stringify(allOps)) {
+		fsOps.value = allOps
 	}
 
-	server.fs.queuedOps = server.fs.queuedOps.filter(
+	fsQueuedOps.value = fsQueuedOps.value.filter(
 		(queuedOp) => !allOps.some((x) => x.src === queuedOp.src),
 	)
 
+	const dismissOp = async (opId: string) => {
+		try {
+			await client.kyros.files_v0.modifyOperation(opId, 'dismiss')
+		} catch (error) {
+			console.error('Failed to dismiss operation:', error)
+		}
+	}
+
 	const cancelled = allOps.filter((x) => x.state === 'cancelled')
-	Promise.all(cancelled.map((x) => server.fs?.modifyOp(x.id, 'dismiss')))
+	Promise.all(cancelled.map((x) => dismissOp(x.id)))
 
 	const completed = allOps.filter((x) => x.state === 'done')
 	if (completed.length > 0) {
@@ -773,9 +799,9 @@ const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) =>
 			async () =>
 				await Promise.all(
 					completed.map((x) => {
-						if (!server.fs?.opsQueuedForModification.includes(x.id)) {
-							server.fs?.opsQueuedForModification.push(x.id)
-							return server.fs?.modifyOp(x.id, 'dismiss')
+						if (!opsQueuedForModification.value.includes(x.id)) {
+							opsQueuedForModification.value.push(x.id)
+							return dismissOp(x.id)
 						}
 						return Promise.resolve()
 					}),
@@ -866,22 +892,27 @@ const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallation
 			errorTitle.value = 'Installation error'
 			errorMessage.value = data.reason ?? 'Unknown error'
 			error.value = new Error(data.reason ?? 'Unknown error')
-			let files = await server.fs?.listDirContents('/', 1, 100)
-			if (files) {
-				if (files.total > 1) {
-					for (let i = 1; i < files.total; i++) {
-						const nextFiles = await server.fs?.listDirContents('/', i, 100)
+
+			// Fetch installation log if available
+			try {
+				let files = await client.kyros.files_v0.listDirectory('/', 1, 100)
+				if (files && files.total > 1) {
+					for (let i = 2; i <= files.total; i++) {
+						const nextFiles = await client.kyros.files_v0.listDirectory('/', i, 100)
 						if (nextFiles?.items?.length === 0) break
 						if (nextFiles) files = nextFiles
 					}
 				}
-			}
-			const fileName = files?.items?.find((file: { name: string }) =>
-				file.name.startsWith('modrinth-installation'),
-			)?.name
-			errorLogFile.value = fileName ?? ''
-			if (fileName) {
-				errorLog.value = await server.fs?.downloadFile(fileName)
+				const fileName = files?.items?.find((file) =>
+					file.name.startsWith('modrinth-installation'),
+				)?.name
+				errorLogFile.value = fileName ?? ''
+				if (fileName) {
+					const content = await client.kyros.files_v0.downloadFile(fileName)
+					errorLog.value = await content.text()
+				}
+			} catch (err) {
+				console.error('Failed to fetch installation log:', err)
 			}
 			break
 		}
@@ -1114,6 +1145,8 @@ const cleanup = () => {
 	completedBackupTasks.clear()
 	cancelledBackups.clear()
 
+	clearNodeAuthState()
+
 	DOMPurify.removeHook('afterSanitizeAttributes')
 }
 
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
index 9126c5e7a7..f4bdc02862 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
@@ -100,13 +100,11 @@
 				</div>
 			</div>
 			<FilesUploadDropdown
-				v-if="props.server.fs"
 				ref="uploadDropdownRef"
 				class="rounded-xl bg-bg-raised"
 				:margin-bottom="16"
 				:file-type="type"
 				:current-path="`/${type.toLocaleLowerCase()}s`"
-				:fs="props.server.fs"
 				:accepted-types="acceptFileFromProjectType(type.toLocaleLowerCase()).split(',')"
 				@upload-complete="() => props.server.refresh(['content'])"
 			/>
@@ -355,7 +353,7 @@ import {
 	TrashIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
+import { Avatar, ButtonStyled, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import type { Mod } from '@modrinth/utils'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
@@ -369,6 +367,8 @@ import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+
 const props = defineProps<{
 	server: ModrinthServer
 }>()
@@ -621,7 +621,7 @@ async function toggleMod(mod: ContentItem) {
 		mod.disabled = newFilename.endsWith('.disabled')
 		mod.filename = newFilename
 
-		await props.server.fs?.moveFileOrFolder(sourcePath, destinationPath)
+		await client.kyros.files_v0.moveFileOrFolder(sourcePath, destinationPath)
 
 		await props.server.refresh(['general', 'content'])
 	} catch (error) {
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/files.vue b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
index 6a60c62501..dea8db41a7 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
@@ -1,7 +1,7 @@
 <template>
-	<div data-pyro-file-manager-root class="contents">
+	<div class="contents">
 		<FilesCreateItemModal ref="createItemModal" :type="newItemType" @create="handleCreateNewItem" />
-		<FilesUploadZipUrlModal ref="uploadZipModal" :server="server" />
+		<FilesUploadZipUrlModal ref="uploadZipModal" />
 		<FilesUploadConflictModal ref="uploadConflictModal" @proceed="extractItem" />
 
 		<FilesRenameItemModal ref="renameItemModal" :item="selectedItem" @rename="handleRenameItem" />
@@ -15,11 +15,8 @@
 
 		<FilesDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
 
-		<FilesUploadDragAndDrop
-			class="relative flex w-full flex-col rounded-2xl border border-solid border-bg-raised"
-			@files-dropped="handleDroppedFiles"
-		>
-			<div ref="mainContent" class="relative isolate flex w-full flex-col">
+		<div class="relative -mt-2 flex w-full flex-col">
+			<div class="relative isolate flex w-full flex-col gap-2">
 				<div v-if="!isEditing" class="contents">
 					<FilesBrowseNavbar
 						:breadcrumb-segments="breadcrumbSegments"
@@ -33,215 +30,185 @@
 						@unzip-from-url="showUnzipFromUrlModal"
 						@filter="handleFilter"
 						@update:search-query="searchQuery = $event"
+						@prefetch-home="handlePrefetchHome"
 					/>
-					<FilesLabelBar :sort-field="sortMethod" :sort-desc="sortDesc" @sort="handleSort" />
-					<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 ref="labelBarSentinel" class="h-0 w-full" aria-hidden="true" />
+					<FilesUploadDragAndDrop
+						class="relative flex flex-col shadow-md"
+						@files-dropped="handleDroppedFiles"
 					>
-						<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 }}
+						<FilesLabelBar
+							: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>
-							<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 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>
-								<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"
+								<span
+									class="flex items-center gap-2 text-sm font-semibold"
 									:class="{
-										invisible: 'bytes_processed' in op && !op.bytes_processed,
+										'text-green': op.state === 'done',
+										'text-red': op.state?.startsWith('fail'),
+										'text-orange': !op.state?.startsWith('fail') && op.state !== 'done',
 									}"
 								>
-									{{ 'bytes_processed' in op ? formatBytes(op.bytes_processed) : '0 B' }}
-									extracted
+									<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>
 
-						<div>
-							<ButtonStyled circular>
-								<button
-									:disabled="!('id' in op) || !op.id"
-									class="radial-progress-animation-overlay"
-									:class="{ active: op.state === 'done' }"
-									@click="
-										() => {
-											op.state === 'done'
-												? server.fs?.modifyOp(op.id, 'dismiss')
-												: 'id' in op
-													? server.fs?.modifyOp(op.id, 'cancel')
-													: () => {}
-										}
-									"
-								>
-									<XIcon />
-								</button>
-							</ButtonStyled>
+							<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="flags.advancedDebugInfo"
+								class="markdown-body col-span-full m-0 rounded-xl bg-button-bg text-xs"
+								>{{ op }}</pre
+							>
+						</div>
+						<FilesUploadDropdown
+							ref="uploadDropdownRef"
+							class="border-0 border-t border-solid border-bg bg-table-alternateRow"
+							:current-path="currentPath"
+							@upload-complete="refreshList()"
+						/>
+						<div v-if="items.length > 0" class="h-full w-full overflow-hidden">
+							<FileVirtualList
+								:items="filteredItems"
+								:selected-items="selectedItems"
+								@extract="handleExtractItem"
+								@delete="showDeleteModal"
+								@rename="showRenameModal"
+								@download="downloadFile"
+								@move="showMoveModal"
+								@move-direct-to="handleDirectMove"
+								@edit="editFile"
+								@hover="handleItemHover"
+								@contextmenu="showContextMenu"
+								@load-more="handleLoadMore"
+								@toggle-select="toggleItemSelection"
+							/>
 						</div>
-						<pre
-							v-if="flags.advancedDebugInfo"
-							class="markdown-body col-span-full m-0 rounded-xl bg-button-bg text-xs"
-							>{{ op }}</pre
+						<div
+							v-else-if="!isLoading && items.length === 0 && !loadError"
+							class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
 						>
-					</div>
-					<FilesUploadDropdown
-						v-if="props.server.fs"
-						ref="uploadDropdownRef"
-						class="rounded-b-xl border-0 border-t border-solid border-bg bg-table-alternateRow"
-						:current-path="currentPath"
-						:fs="props.server.fs"
-						@upload-complete="refreshList()"
-					/>
+							<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"
+							class="rounded-b-[20px]"
+							title="Unable to load files"
+							message="The folder may not exist."
+							@refetch="refreshList"
+							@home="navigateToSegment(-1)"
+						/>
+					</FilesUploadDragAndDrop>
 				</div>
-				<FilesEditingNavbar
+				<FilesEditor
 					v-else
-					:file-name="editingFile?.name"
-					:is-image="isEditingImage"
-					:file-path="editingFile?.path"
+					:file="editingFile"
 					:breadcrumb-segments="breadcrumbSegments"
-					@cancel="cancelEditing"
-					@save="() => saveFileContent(true)"
-					@save-as="saveFileContentAs"
-					@save-restart="saveFileContentRestart"
-					@share="requestShareLink"
+					:editor-component="VAceEditor"
+					@close="handleEditorClose"
 					@navigate="navigateToSegment"
 				/>
-
-				<div v-if="isEditing" class="h-full w-full flex-grow">
-					<component
-						:is="VAceEditor"
-						v-if="!isEditingImage"
-						v-model:value="fileContent"
-						:lang="
-							(() => {
-								const ext = editingFile?.name?.split('.')?.pop()?.toLowerCase() ?? ''
-								return ext === 'json'
-									? 'json'
-									: ext === 'toml'
-										? 'toml'
-										: ext === 'sh'
-											? 'sh'
-											: ['yml', 'yaml'].includes(ext)
-												? 'yaml'
-												: 'text'
-							})()
-						"
-						theme="one_dark"
-						:print-margin="false"
-						style="height: 750px; font-size: 1rem"
-						class="ace_editor ace_hidpi ace-one-dark ace_dark rounded-b-lg"
-						@init="onInit"
-					/>
-					<FilesImageViewer v-else :image-blob="imagePreview" />
-				</div>
-				<div v-else-if="items.length > 0" class="h-full w-full overflow-hidden rounded-b-2xl">
-					<FileVirtualList
-						:items="filteredItems"
-						@extract="handleExtractItem"
-						@delete="showDeleteModal"
-						@rename="showRenameModal"
-						@download="downloadFile"
-						@move="showMoveModal"
-						@move-direct-to="handleDirectMove"
-						@edit="editFile"
-						@contextmenu="showContextMenu"
-						@load-more="handleLoadMore"
-					/>
-				</div>
-
-				<div
-					v-else-if="!isLoading && items.length === 0 && !loadError"
-					class="flex h-full w-full items-center justify-center 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"
-					title="Unable to load files"
-					message="The folder may not exist."
-					@refetch="refreshList"
-					@home="navigateToSegment(-1)"
-				/>
 			</div>
-
-			<div
-				v-if="isDragging"
-				class="absolute inset-0 flex items-center justify-center rounded-2xl bg-black bg-opacity-50 text-white"
-			>
-				<div class="text-center">
-					<UploadIcon class="mx-auto h-16 w-16" />
-					<p class="mt-2 text-xl">Drop files here to upload</p>
-				</div>
-			</div>
-		</FilesUploadDragAndDrop>
+		</div>
 
 		<FilesContextMenu
 			ref="contextMenu"
@@ -254,23 +221,57 @@
 			@download="downloadFile"
 			@delete="showDeleteModal"
 		/>
+
+		<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 @click="showBulkMoveModal">
+						<RightArrowIcon class="h-4 w-4" />
+						Move
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="showBulkDeleteModal">
+						<TrashIcon class="h-4 w-4" />
+						Delete
+					</button>
+				</ButtonStyled>
+			</div>
+		</FloatingActionBar>
 	</div>
 </template>
 
 <script setup lang="ts">
+import type { Kyros } from '@modrinth/api-client'
 import {
 	CheckIcon,
 	FolderOpenIcon,
 	PackageOpenIcon,
+	RightArrowIcon,
 	SpinnerIcon,
+	TrashIcon,
 	UnknownIcon,
-	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, ProgressBar } from '@modrinth/ui'
-import type { DirectoryItem, DirectoryResponse, FilesystemOp, FSQueuedOp } from '@modrinth/utils'
-import { formatBytes, ModrinthServersFetchError } from '@modrinth/utils'
-import { useInfiniteScroll } from '@vueuse/core'
+import {
+	ButtonStyled,
+	FloatingActionBar,
+	getFileExtension,
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+	isEditableFile,
+	ProgressBar,
+} from '@modrinth/ui'
+import type { FilesystemOp, FSQueuedOp } from '@modrinth/utils'
+import { formatBytes } from '@modrinth/utils'
+import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
 import FileManagerError from '~/components/ui/servers/FileManagerError.vue'
@@ -278,8 +279,7 @@ import FilesBrowseNavbar from '~/components/ui/servers/FilesBrowseNavbar.vue'
 import FilesContextMenu from '~/components/ui/servers/FilesContextMenu.vue'
 import FilesCreateItemModal from '~/components/ui/servers/FilesCreateItemModal.vue'
 import FilesDeleteItemModal from '~/components/ui/servers/FilesDeleteItemModal.vue'
-import FilesEditingNavbar from '~/components/ui/servers/FilesEditingNavbar.vue'
-import FilesImageViewer from '~/components/ui/servers/FilesImageViewer.vue'
+import FilesEditor from '~/components/ui/servers/FilesEditor.vue'
 import FilesLabelBar from '~/components/ui/servers/FilesLabelBar.vue'
 import FilesMoveItemModal from '~/components/ui/servers/FilesMoveItemModal.vue'
 import FilesRenameItemModal from '~/components/ui/servers/FilesRenameItemModal.vue'
@@ -288,13 +288,16 @@ import FilesUploadDragAndDrop from '~/components/ui/servers/FilesUploadDragAndDr
 import FilesUploadDropdown from '~/components/ui/servers/FilesUploadDropdown.vue'
 import FilesUploadZipUrlModal from '~/components/ui/servers/FilesUploadZipUrlModal.vue'
 import FileVirtualList from '~/components/ui/servers/FileVirtualList.vue'
-import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 import { handleServersError } from '~/composables/servers/modrinth-servers.ts'
 
 const notifications = injectNotificationManager()
 const { addNotification } = notifications
+const client = injectModrinthClient()
+const serverContext = injectModrinthServerContext()
+const { fsOps, fsQueuedOps, serverId, server } = serverContext
 const flags = useFeatureFlags()
 const baseId = useId()
+const queryClient = useQueryClient()
 
 interface BaseOperation {
 	type: 'move' | 'rename'
@@ -317,18 +320,11 @@ interface RenameOperation extends BaseOperation {
 
 type Operation = MoveOperation | RenameOperation
 
-const props = defineProps<{
-	server: ModrinthServer
-}>()
-
 const modulesLoaded = inject<Promise<void>>('modulesLoaded')
 
 const route = useRoute()
 const router = useRouter()
 
-const VAceEditor = ref()
-const mainContent = ref<HTMLElement | null>(null)
-const scrollContainer = ref<HTMLElement | null>(null)
 const contextMenu = ref()
 const operationHistory = ref<Operation[]>([])
 const redoStack = ref<Operation[]>([])
@@ -337,10 +333,43 @@ const searchQuery = ref('')
 const sortMethod = ref('name')
 const sortDesc = ref(false)
 
-const maxResults = 100
-const currentPage = ref(1)
+const selectedItems = ref<Set<string>>(new Set())
 
-const currentPath = ref(typeof route.query.path === 'string' ? route.query.path : '')
+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(filteredItems.value.map((i) => i.path))
+}
+
+function deselectAll() {
+	selectedItems.value = new Set()
+}
+
+function toggleSelectAll() {
+	if (allSelected.value) {
+		deselectAll()
+	} else {
+		selectAll()
+	}
+}
+
+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 isAtBottom = ref(false)
 const contextMenuInfo = ref<any>({ item: null, x: 0, y: 0 })
@@ -354,98 +383,328 @@ const uploadConflictModal = ref()
 
 const newItemType = ref<'file' | 'directory'>('file')
 const selectedItem = ref<any>(null)
-const fileContent = ref('')
 
 const isEditing = ref(false)
 const editingFile = ref<any>(null)
-const closeEditor = ref(false)
-const isEditingImage = ref(false)
-const imagePreview = ref()
-
-const isDragging = ref(false)
 
 const uploadDropdownRef = ref()
 
-const data = computed(() => props.server.general)
+const VAceEditor = ref()
+
+const labelBarSentinel = ref<HTMLDivElement>()
+const isLabelBarStuck = ref(false)
+let labelBarObserver: IntersectionObserver | null = null
 
 const viewFilter = ref('all')
 
-const handleFilter = (type: string) => {
+function handleFilter(type: string) {
 	viewFilter.value = type
 	sortMethod.value = 'name'
 	sortDesc.value = false
 }
 
 useHead({
-	title: computed(() => `Files - ${data.value?.name ?? 'Server'} - Modrinth`),
+	title: computed(() => `Files - ${server.value?.name ?? 'Server'} - Modrinth`),
 })
 
-const fetchDirectoryContents = async (): Promise<DirectoryResponse> => {
-	await modulesLoaded
+const {
+	data: directoryData,
+	isLoading,
+	error: loadError,
+	fetchNextPage,
+	hasNextPage,
+	isFetchingNextPage,
+} = useInfiniteQuery({
+	queryKey: computed(() => ['files', serverId, currentPath.value]),
+	queryFn: async ({ pageParam = 1 }) => {
+		await modulesLoaded
+		return client.kyros.files_v0.listDirectory(currentPath.value, pageParam, 100)
+	},
+	getNextPageParam: (lastPage, allPages) => {
+		const totalFetched = allPages.reduce((sum, page) => sum + page.items.length, 0)
+		return totalFetched < lastPage.total ? allPages.length + 1 : undefined
+	},
+	staleTime: 30_000,
+	initialPageParam: 1,
+})
 
-	const path = Array.isArray(currentPath.value) ? currentPath.value.join('') : currentPath.value
-	try {
-		const data = await props.server.fs?.listDirContents(path, currentPage.value, maxResults)
+const items = computed(() => directoryData.value?.pages.flatMap((page) => page.items) ?? [])
+
+// prefetch directory contents on hover (150ms debounce)
+function prefetchDirectory(path: string) {
+	queryClient.prefetchInfiniteQuery({
+		queryKey: ['files', serverId, path],
+		queryFn: async () => {
+			await modulesLoaded
+			try {
+				return await client.kyros.files_v0.listDirectory(path, 1, 100)
+			} catch {
+				// silently fail - folder may not exist yet (an optimistic update)
+				return { items: [], total: 0, current: 1 }
+			}
+		},
+		initialPageParam: 1,
+		staleTime: 30_000,
+	})
+}
 
-		if (!data || !data.items) {
-			throw new Error('Invalid data structure received from server.')
-		}
+let prefetchTimeout: ReturnType<typeof setTimeout> | null = null
+let prefetchHomeTimeout: ReturnType<typeof setTimeout> | null = null
 
-		if (currentPage.value === 1) {
-			return {
-				items: data.items,
-				total: data.total,
+function handlePrefetchHome() {
+	if (prefetchHomeTimeout) {
+		clearTimeout(prefetchHomeTimeout)
+		prefetchHomeTimeout = null
+	}
+
+	prefetchHomeTimeout = setTimeout(() => {
+		prefetchDirectory('/')
+	}, 150)
+}
+
+function prefetchFileContent(path: string) {
+	queryClient.prefetchQuery({
+		queryKey: ['file-content', serverId, path],
+		queryFn: async () => {
+			await modulesLoaded
+			try {
+				const blob = await client.kyros.files_v0.downloadFile(path)
+				return await blob.text()
+			} catch {
+				return null
 			}
-		}
+		},
+		staleTime: 30_000,
+	})
+}
 
-		return {
-			items: [...(directoryData.value?.items || []), ...data.items],
-			total: data.total,
-		}
-	} catch (error) {
-		console.error('Error fetching directory contents:', error)
-		if (error instanceof ModrinthServersFetchError && error.statusCode === 400) {
-			return directoryData.value || { items: [], total: 0 }
+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 (isEditableFile(ext)) {
+			prefetchTimeout = setTimeout(() => {
+				prefetchFileContent(item.path)
+			}, 150)
 		}
-		throw error
 	}
 }
 
-const {
-	data: directoryData,
-	refresh: refreshData,
-	status,
-	error: loadError,
-} = useLazyAsyncData(() => fetchDirectoryContents(), {
-	watch: [],
-	default: () => ({ items: [], total: 0 }),
-	immediate: true,
+function getQueryKey() {
+	return ['files', serverId, currentPath.value]
+}
+
+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)
+
+		// optimistically remove the item
+		queryClient.setQueryData(queryKey, (old: any) => ({
+			...old,
+			pages: old?.pages?.map((page: any) => ({
+				...page,
+				items: page.items.filter((item: any) => item.path !== path),
+				total: Math.max(0, page.total - 1),
+			})),
+		}))
+		return { previous }
+	},
+
+	onError: (err: any, _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' })
+	},
+
+	onSettled: () => {
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+	},
+})
+
+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)
+
+		// optimistically rename the item
+		queryClient.setQueryData(queryKey, (old: any) => ({
+			...old,
+			pages: old?.pages?.map((page: any) => ({
+				...page,
+				items: page.items.map((item: any) =>
+					item.path === path
+						? { ...item, name: newName, path: item.path.replace(/[^/]+$/, newName) }
+						: item,
+				),
+			})),
+		}))
+		return { previous }
+	},
+
+	onError: (err: any, _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] })
+	},
+})
+
+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)
+
+		// optimistically remove from current directory
+		queryClient.setQueryData(queryKey, (old: any) => ({
+			...old,
+			pages: old?.pages?.map((page: any) => ({
+				...page,
+				items: page.items.filter((item: any) => item.path !== source),
+				total: Math.max(0, page.total - 1),
+			})),
+		}))
+		return { previous }
+	},
+
+	onError: (err: any, _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] })
+	},
+})
+
+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)
+
+		// optimistically add new item
+		const newItem = {
+			name,
+			path,
+			type,
+			modified: now,
+			created: now,
+			...(type === 'directory' ? { count: 0 } : { size: 0 }),
+		}
+		queryClient.setQueryData(queryKey, (old: any) => ({
+			...old,
+			pages: old?.pages?.map((page: any, i: number) =>
+				i === 0
+					? {
+							...page,
+							items: [newItem, ...page.items],
+							total: page.total + 1,
+						}
+					: page,
+			),
+		}))
+		return { previous }
+	},
+
+	onError: (err: any, _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({
+			title: `${type === 'directory' ? 'Folder' : 'File'} created`,
+			text: `Created ${name}`,
+			type: 'success',
+		})
+	},
+
+	onSettled: () => {
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+	},
 })
 
-const isLoading = computed(() => status.value === 'pending')
+// (no optimistic update - uses ws for progress)
+const extractMutation = useMutation({
+	mutationFn: ({ path, override }: { path: string; override: boolean }) =>
+		client.kyros.files_v0.extractFile(path, override, false),
 
-const items = computed(() => directoryData.value?.items || [])
+	onSuccess: () => {
+		addNotification({ title: 'Extraction started', type: 'success' })
+	},
+
+	onError: (err: any) => {
+		addNotification({ title: 'Extract failed', text: err.message, type: 'error' })
+	},
 
-const refreshList = () => {
-	currentPage.value = 1
-	refreshData()
-	reset()
+	onSettled: () => {
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+	},
+})
+
+function refreshList() {
+	queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 }
 
-const undoLastOperation = async () => {
+async function undoLastOperation() {
 	const lastOperation = operationHistory.value.pop()
 	if (!lastOperation) return
 
 	try {
 		switch (lastOperation.type) {
 			case 'move':
-				await props.server.fs?.moveFileOrFolder(
+				await client.kyros.files_v0.moveFileOrFolder(
 					`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
 					`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
 				)
 				break
 			case 'rename':
-				await props.server.fs?.renameFileOrFolder(
+				await client.kyros.files_v0.renameFileOrFolder(
 					`${lastOperation.path}/${lastOperation.newName}`.replace('//', '/'),
 					lastOperation.oldName,
 				)
@@ -470,20 +729,20 @@ const undoLastOperation = async () => {
 	}
 }
 
-const redoLastOperation = async () => {
+async function redoLastOperation() {
 	const lastOperation = redoStack.value.pop()
 	if (!lastOperation) return
 
 	try {
 		switch (lastOperation.type) {
 			case 'move':
-				await props.server.fs?.moveFileOrFolder(
+				await client.kyros.files_v0.moveFileOrFolder(
 					`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
 					`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
 				)
 				break
 			case 'rename':
-				await props.server.fs?.renameFileOrFolder(
+				await client.kyros.files_v0.renameFileOrFolder(
 					`${lastOperation.path}/${lastOperation.oldName}`.replace('//', '/'),
 					lastOperation.newName,
 				)
@@ -508,88 +767,57 @@ const redoLastOperation = async () => {
 	}
 }
 
-const handleCreateNewItem = async (name: string) => {
-	try {
-		const path = `${currentPath.value}/${name}`.replace('//', '/')
-		await props.server.fs?.createFileOrFolder(path, newItemType.value)
-
-		refreshList()
-
-		addNotification({
-			title: `${newItemType.value === 'directory' ? 'Folder' : 'File'} created`,
-			text: `New ${newItemType.value === 'directory' ? 'folder' : 'file'} ${name} has been created.`,
-			type: 'success',
-		})
-	} catch (error) {
-		handleCreateError(error)
-	}
+function handleCreateNewItem(name: string) {
+	const path = `${currentPath.value}/${name}`.replace('//', '/')
+	createMutation.mutate({ path, type: newItemType.value })
 }
 
-const handleRenameItem = async (newName: string) => {
-	try {
-		const path = `${currentPath.value}/${selectedItem.value.name}`.replace('//', '/')
-		await props.server.fs?.renameFileOrFolder(path, newName)
-
-		redoStack.value = []
-		operationHistory.value.push({
-			type: 'rename',
-			itemType: selectedItem.value.type,
-			fileName: selectedItem.value.name,
-			path: currentPath.value,
-			oldName: selectedItem.value.name,
-			newName,
-		})
-
-		refreshList()
-
-		if (closeEditor.value) {
-			await props.server.refresh()
-			isEditing.value = false
-			editingFile.value = null
-			closeEditor.value = false
-			router.push({ query: { ...route.query, path: currentPath.value } })
-		}
-
-		addNotification({
-			title: `${selectedItem.value.type === 'directory' ? 'Folder' : 'File'} renamed`,
-			text: `${selectedItem.value.name} has been renamed to ${newName}`,
-			type: 'success',
-		})
-	} catch (error) {
-		console.error('Error renaming item:', error)
-		if (error instanceof ModrinthServersFetchError) {
-			if (error.statusCode === 400) {
-				addNotification({
-					title: 'Could not rename',
-					text: `An item named "${newName}" already exists in this location`,
-					type: 'error',
+function handleRenameItem(newName: string) {
+	const path = `${currentPath.value}/${selectedItem.value.name}`.replace('//', '/')
+	const item = selectedItem.value
+
+	renameMutation.mutate(
+		{ path, newName },
+		{
+			onSuccess: () => {
+				// track for undo
+				redoStack.value = []
+				operationHistory.value.push({
+					type: 'rename',
+					itemType: item.type,
+					fileName: item.name,
+					path: currentPath.value,
+					oldName: item.name,
+					newName,
 				})
-				return
-			}
-			addNotification({
-				title: 'Could not rename item',
-				text: 'An unexpected error occurred',
-				type: 'error',
-			})
-		}
-	}
+			},
+		},
+	)
 }
 
-const extractItem = async (path: string) => {
-	try {
-		await props.server.fs?.extractFile(path, true, false)
-	} catch (error) {
-		console.error('Error extracting item:', error)
-		handleServersError(error, notifications)
-	}
+function extractItem(path: string) {
+	// add to queued ops for UI feedback
+	fsQueuedOps.value.push({ op: 'unarchive', src: path })
+	setTimeout(() => {
+		fsQueuedOps.value = fsQueuedOps.value.filter((x) => x.op !== 'unarchive' || x.src !== path)
+	}, 4000)
+
+	extractMutation.mutate(
+		{ path, override: true },
+		{
+			onError: () => {
+				fsQueuedOps.value = fsQueuedOps.value.filter((x) => x.op !== 'unarchive' || x.src !== path)
+			},
+		},
+	)
 }
 
-const handleExtractItem = async (item: { name: string; type: string; path: string }) => {
+async function handleExtractItem(item: { name: string; type: string; path: string }) {
 	try {
-		const dry = await props.server.fs?.extractFile(item.path, true, true, true)
+		const dry = await client.kyros.files_v0.extractFile(item.path, true, true)
 		if (dry) {
 			if (dry.conflicting_files.length === 0) {
-				await extractItem(item.path)
+				extractItem(item.path)
 			} else {
 				uploadConflictModal.value.show(item.path, dry.conflicting_files)
 			}
@@ -602,132 +830,114 @@ const handleExtractItem = async (item: { name: string; type: string; path: strin
 	}
 }
 
-const handleMoveItem = async (destination: string) => {
-	try {
-		const itemType = selectedItem.value.type
-		const sourcePath = currentPath.value
-		const newPath = `${destination}/${selectedItem.value.name}`.replace('//', '/')
-
-		await props.server.fs?.moveFileOrFolder(
-			`${sourcePath}/${selectedItem.value.name}`.replace('//', '/'),
-			newPath,
-		)
-
-		redoStack.value = []
-		operationHistory.value.push({
-			type: 'move',
-			sourcePath,
-			destinationPath: destination,
-			fileName: selectedItem.value.name,
-			itemType,
-		})
-
-		refreshList()
-		addNotification({
-			title: `${itemType === 'directory' ? 'Folder' : 'File'} moved`,
-			text: `${selectedItem.value.name} has been moved to ${newPath}`,
-			type: 'success',
-		})
-	} catch (error) {
-		console.error('Error moving item:', error)
-	}
+function handleMoveItem(destination: string) {
+	const item = selectedItem.value
+	const sourcePath = currentPath.value
+	const source = `${sourcePath}/${item.name}`.replace('//', '/')
+	const dest = `${destination}/${item.name}`.replace('//', '/')
+
+	moveMutation.mutate(
+		{ source, destination: dest },
+		{
+			onSuccess: () => {
+				// track for undo
+				redoStack.value = []
+				operationHistory.value.push({
+					type: 'move',
+					sourcePath,
+					destinationPath: destination,
+					fileName: item.name,
+					itemType: item.type,
+				})
+			},
+		},
+	)
 }
 
-const handleDirectMove = async (moveData: {
+function handleDirectMove(moveData: {
 	name: string
 	type: string
 	path: string
 	destination: string
-}) => {
-	try {
-		const newPath = `${moveData.destination}/${moveData.name}`.replace('//', '/')
-		const sourcePath = moveData.path.substring(0, moveData.path.lastIndexOf('/'))
-
-		await props.server.fs?.moveFileOrFolder(moveData.path, newPath)
-
-		redoStack.value = []
-		operationHistory.value.push({
-			type: 'move',
-			sourcePath,
-			destinationPath: moveData.destination,
-			fileName: moveData.name,
-			itemType: moveData.type,
-		})
-
-		refreshList()
-		addNotification({
-			title: `${moveData.type === 'directory' ? 'Folder' : 'File'} moved`,
-			text: `${moveData.name} has been moved to ${newPath}`,
-			type: 'success',
-		})
-	} catch (error) {
-		console.error('Error moving item:', error)
-	}
+}) {
+	const dest = `${moveData.destination}/${moveData.name}`.replace('//', '/')
+	const sourcePath = moveData.path.substring(0, moveData.path.lastIndexOf('/'))
+
+	moveMutation.mutate(
+		{ source: moveData.path, destination: dest },
+		{
+			onSuccess: () => {
+				// track for undo
+				redoStack.value = []
+				operationHistory.value.push({
+					type: 'move',
+					sourcePath,
+					destinationPath: moveData.destination,
+					fileName: moveData.name,
+					itemType: moveData.type,
+				})
+			},
+		},
+	)
 }
 
-const handleDeleteItem = async () => {
-	try {
-		const path = `${currentPath.value}/${selectedItem.value.name}`.replace('//', '/')
-		await props.server.fs?.deleteFileOrFolder(path, selectedItem.value.type === 'directory')
-
-		refreshList()
-		addNotification({
-			title: 'File deleted',
-			text: 'Your file has been deleted.',
-			type: 'success',
-		})
-	} catch (error) {
-		console.error('Error deleting item:', error)
-	}
+function handleDeleteItem() {
+	const path = `${currentPath.value}/${selectedItem.value.name}`.replace('//', '/')
+	deleteMutation.mutate({ path, recursive: selectedItem.value.type === 'directory' })
 }
 
-const showCreateModal = (type: 'file' | 'directory') => {
+function showCreateModal(type: 'file' | 'directory') {
 	newItemType.value = type
 	createItemModal.value?.show()
 }
 
-const showUnzipFromUrlModal = (cf: boolean) => {
+function showUnzipFromUrlModal(cf: boolean) {
 	uploadZipModal.value?.show(cf)
 }
 
-const showRenameModal = (item: any) => {
+function showRenameModal(item: any) {
 	selectedItem.value = item
 	renameItemModal.value?.show(item)
 	contextMenuInfo.value.item = null
 }
 
-const showMoveModal = (item: any) => {
+function showMoveModal(item: any) {
 	selectedItem.value = item
 	moveItemModal.value?.show()
 	contextMenuInfo.value.item = null
 }
 
-const showDeleteModal = (item: any) => {
+function showDeleteModal(item: any) {
 	selectedItem.value = item
 	deleteItemModal.value?.show()
 	contextMenuInfo.value.item = null
 }
 
-const handleCreateError = (error: any) => {
-	console.error('Error creating item:', error)
-	if (error instanceof ModrinthServersFetchError) {
-		if (error.statusCode === 400) {
-			addNotification({
-				title: 'Error creating item',
-				text: 'Invalid file',
-				type: 'error',
-			})
-		} else if (error.statusCode === 500) {
-			addNotification({
-				title: 'Error creating item',
-				text: 'Something went wrong. The file may already exist.',
-				type: 'error',
-			})
+async function showBulkMoveModal() {
+	// TODO: Implement bulk move modal
+	addNotification({
+		title: 'Bulk move',
+		text: `Moving ${selectedItems.value.size} items is not yet implemented`,
+		type: 'info',
+	})
+}
+
+async function showBulkDeleteModal() {
+	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()
 }
 
-const handleSort = (field: string) => {
+function handleSort(field: string) {
 	if (sortMethod.value === field) {
 		sortDesc.value = !sortDesc.value
 	} else {
@@ -736,7 +946,7 @@ const handleSort = (field: string) => {
 	}
 }
 
-const applySort = (items: DirectoryItem[]) => {
+function applySort(items: Kyros.Files.v0.DirectoryItem[]) {
 	let result = [...items]
 
 	switch (viewFilter.value) {
@@ -748,7 +958,7 @@ const applySort = (items: DirectoryItem[]) => {
 			break
 	}
 
-	const compareItems = (a: DirectoryItem, b: DirectoryItem) => {
+	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
@@ -756,13 +966,15 @@ const applySort = (items: DirectoryItem[]) => {
 
 		switch (sortMethod.value) {
 			case 'modified':
-				return sortDesc.value
-					? new Date(a.modified).getTime() - new Date(b.modified).getTime()
-					: new Date(b.modified).getTime() - new Date(a.modified).getTime()
+				// modified/created are Unix timestamps (seconds), compare directly
+				return sortDesc.value ? a.modified - b.modified : b.modified - a.modified
 			case 'created':
-				return sortDesc.value
-					? new Date(a.created).getTime() - new Date(b.created).getTime()
-					: new Date(b.created).getTime() - new Date(a.created).getTime()
+				return sortDesc.value ? a.created - b.created : b.created - a.created
+			case 'size': {
+				const aSize = 'size' in a ? a.size : 0
+				const bSize = 'size' in b ? b.size : 0
+				return sortDesc.value ? aSize - bSize : bSize - aSize
+			}
 			default:
 				return sortDesc.value ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name)
 		}
@@ -783,52 +995,12 @@ const filteredItems = computed(() => {
 	return applySort(result)
 })
 
-const { reset } = useInfiniteScroll(
-	scrollContainer,
-	async () => {
-		if (status.value === 'pending') return
-
-		try {
-			const totalPages = directoryData.value?.total || 0
-
-			if (currentPage.value < totalPages) {
-				currentPage.value++
-				const newData = await fetchDirectoryContents()
-
-				if (newData && newData.items) {
-					directoryData.value = {
-						items: [...directoryData.value.items, ...newData.items],
-						total: newData.total,
-					}
-				}
-			}
-		} catch (error) {
-			console.error('Error during infinite scroll:', error)
-		}
-	},
-	{ distance: 1000 },
-)
-
-const handleLoadMore = async () => {
-	if (status.value === 'pending') return
-
-	const totalPages = directoryData.value?.total || 0
-
-	if (currentPage.value < totalPages) {
-		currentPage.value++
-		await refreshData()
-	}
+async function handleLoadMore() {
+	if (isFetchingNextPage.value || !hasNextPage.value) return
+	await fetchNextPage()
 }
 
-const onInit = (editor: any) => {
-	editor.commands.addCommand({
-		name: 'saveFile',
-		bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
-		exec: () => saveFileContent(false),
-	})
-}
-
-const showContextMenu = async (item: any, x: number, y: number) => {
+async function showContextMenu(item: any, x: number, y: number) {
 	contextMenuInfo.value = { item, x, y }
 	selectedItem.value = item
 	await nextTick()
@@ -838,92 +1010,128 @@ const showContextMenu = async (item: any, x: number, y: number) => {
 	isAtBottom.value = ctxRect.bottom > screenHeight
 }
 
-const onAnywhereClicked = (e: MouseEvent) => {
+function onAnywhereClicked(e: MouseEvent) {
 	if (!(e.target as HTMLElement).closest('#item-context-menu')) {
 		contextMenuInfo.value.item = null
 	}
 }
 
-const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp']
-
-const editFile = async (item: { name: string; type: string; path: string }) => {
-	try {
-		const path = `${currentPath.value}/${item.name}`.replace('//', '/')
-		const content = (await props.server.fs?.downloadFile(path, true)) as any
-		window.scrollTo(0, 0)
-
-		fileContent.value = await content.text()
-		editingFile.value = item
-		isEditing.value = true
-		const extension = item.name.split('.').pop()
-		if (item.type === 'file' && extension && imageExtensions.includes(extension)) {
-			isEditingImage.value = true
-			imagePreview.value = content
-		}
-		router.push({ query: { ...route.query, path: currentPath.value, editing: item.path } })
-	} catch (error) {
-		console.error('Error fetching file content:', error)
+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()
 	}
 }
 
-const initializeFileEdit = async () => {
-	if (!route.query.editing || !props.server.fs) return
+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
-	await editFile({
+	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 () => {
 	await modulesLoaded
 
-	await initializeFileEdit()
+	// Preload ace editor for instant file editing
+	if (import.meta.client) {
+		const { VAceEditor: Ace } = await import('vue3-ace-editor')
+		// Import all modes for supported file extensions
+		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'),
+			// Themes
+			import('@modrinth/ui/src/utils/ace-theme.ts'),
+		])
+		VAceEditor.value = Ace
+	}
+
+	initializeFileEdit()
 
-	await import('ace-builds')
-	await import('ace-builds/src-noconflict/mode-json')
-	await import('ace-builds/src-noconflict/mode-yaml')
-	await import('ace-builds/src-noconflict/mode-toml')
-	await import('ace-builds/src-noconflict/mode-sh')
-	await import('ace-builds/src-noconflict/theme-one_dark')
-	await import('ace-builds/src-noconflict/ext-searchbox')
-	VAceEditor.value = markRaw((await import('vue3-ace-editor')).VAceEditor)
 	document.addEventListener('click', onAnywhereClicked)
 	window.addEventListener('scroll', onScroll)
+	document.addEventListener('keydown', onKeydown)
+
+	// Set up IntersectionObserver for sticky header detection
+	if (labelBarSentinel.value) {
+		labelBarObserver = new IntersectionObserver(
+			([entry]) => {
+				isLabelBarStuck.value = !entry.isIntersecting
+			},
+			{ threshold: 0 },
+		)
+		labelBarObserver.observe(labelBarSentinel.value)
+	}
 
-	document.addEventListener('keydown', (e) => {
-		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()
-		}
-	})
-
-	props.server.fs?.clearQueuedOps()
+	fsQueuedOps.value = []
 })
 
 onUnmounted(() => {
 	document.removeEventListener('click', onAnywhereClicked)
 	window.removeEventListener('scroll', onScroll)
-	document.removeEventListener('keydown', () => {})
+	document.removeEventListener('keydown', onKeydown)
+	labelBarObserver?.disconnect()
 })
 
-const clientSideQueued = computed<FSQueuedOp[]>(() => props.server.fs?.queuedOps ?? [])
-
 type QueuedOpWithState = FSQueuedOp & { state: 'queued' }
 
 const ops = computed<(QueuedOpWithState | FilesystemOp)[]>(() => [
-	...clientSideQueued.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
-	...(props.server.fs?.ops ?? []),
+	...fsQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
+	...fsOps.value,
 ])
 
+async function dismissOrCancelOp(opId: string, action: 'dismiss' | 'cancel') {
+	try {
+		await client.kyros.files_v0.modifyOperation(opId, action)
+	} catch (error) {
+		console.error(`Failed to ${action} operation:`, error)
+	}
+}
+
 watch(
-	() => props.server.fs?.ops,
+	() => fsOps.value,
 	() => {
 		refreshList()
 	},
@@ -931,30 +1139,28 @@ watch(
 
 watch(
 	() => route.query,
-	async (newQuery) => {
-		currentPage.value = 1
-		searchQuery.value = ''
-		viewFilter.value = 'all'
-		sortMethod.value = 'name'
-		sortDesc.value = false
-
-		currentPath.value = Array.isArray(newQuery.path) ? newQuery.path.join('') : newQuery.path || '/'
+	(newQuery, oldQuery) => {
+		if (newQuery.path !== oldQuery?.path) {
+			searchQuery.value = ''
+			viewFilter.value = 'all'
+			sortMethod.value = 'name'
+			sortDesc.value = false
+			deselectAll()
+		}
 
-		if (newQuery.editing) {
-			await editFile({
-				name: newQuery.editing as string,
+		if (newQuery.editing && editingFile.value?.path !== newQuery.editing) {
+			editingFile.value = {
+				name: (newQuery.editing as string).split('/').pop() || '',
 				type: 'file',
 				path: newQuery.editing as string,
-			})
-		} else {
+			}
+			isEditing.value = true
+		} else if (oldQuery?.editing && !newQuery.editing) {
 			isEditing.value = false
 			editingFile.value = null
 		}
-
-		await refreshData()
-		reset()
 	},
-	{ immediate: true, deep: true },
+	{ deep: true },
 )
 
 const breadcrumbSegments = computed(() => {
@@ -964,13 +1170,12 @@ const breadcrumbSegments = computed(() => {
 	return []
 })
 
-const navigateToSegment = (index: number) => {
+function navigateToSegment(index: number) {
 	const newPath = breadcrumbSegments.value.slice(0, index + 1).join('/')
 	router.push({ query: { ...route.query, path: newPath } })
 	if (isEditing.value) {
 		isEditing.value = false
 		editingFile.value = null
-		closeEditor.value = false
 
 		const newQuery = { ...route.query }
 		delete newQuery.editing
@@ -978,34 +1183,7 @@ const navigateToSegment = (index: number) => {
 	}
 }
 
-// const navigateToPage = () => {
-//   router.push({ query: { path: currentPath.value } });
-// };
-
-const requestShareLink = async () => {
-	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 }),
-		})) as any
-
-		if (response.success) {
-			await navigator.clipboard.writeText(response.url)
-			addNotification({
-				title: 'Log URL copied',
-				text: 'Your log file URL has been copied to your clipboard.',
-				type: 'success',
-			})
-		} else {
-			throw new Error(response.error)
-		}
-	} catch (error) {
-		console.error('Error sharing file:', error)
-	}
-}
-
-const handleDroppedFiles = (files: File[]) => {
+function handleDroppedFiles(files: File[]) {
 	if (isEditing.value) return
 
 	files.forEach((file) => {
@@ -1013,7 +1191,7 @@ const handleDroppedFiles = (files: File[]) => {
 	})
 }
 
-const initiateFileUpload = () => {
+function initiateFileUpload() {
 	const input = document.createElement('input')
 	input.type = 'file'
 	input.multiple = true
@@ -1027,11 +1205,11 @@ const initiateFileUpload = () => {
 	input.click()
 }
 
-const downloadFile = async (item: any) => {
+async function downloadFile(item: any) {
 	if (item.type === 'file') {
 		try {
 			const path = `${currentPath.value}/${item.name}`.replace('//', '/')
-			const fileData = await props.server.fs?.downloadFile(path)
+			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')
@@ -1044,63 +1222,17 @@ const downloadFile = async (item: any) => {
 			}
 		} catch (error) {
 			console.error('Error downloading file:', error)
+			addNotification({
+				title: 'Download failed',
+				text: 'Could not download the file.',
+				type: 'error',
+			})
 		}
 		contextMenuInfo.value.item = null
 	}
 }
 
-const saveFileContent = async (exit: boolean = true) => {
-	if (!editingFile.value) return
-
-	try {
-		await props.server.fs?.updateFile(editingFile.value.path, fileContent.value)
-		if (exit) {
-			await props.server.refresh()
-			isEditing.value = false
-			editingFile.value = null
-			router.push({ query: { ...route.query, path: currentPath.value } })
-		}
-
-		addNotification({
-			title: 'File saved',
-			text: 'Your file has been saved.',
-			type: 'success',
-		})
-	} catch (error) {
-		console.error('Error saving file content:', error)
-	}
-}
-
-const saveFileContentRestart = async () => {
-	await saveFileContent()
-	await props.server.general?.power('Restart')
-
-	addNotification({
-		title: 'Server restarted',
-		text: 'Your server has been restarted.',
-		type: 'success',
-	})
-}
-
-const saveFileContentAs = async () => {
-	await saveFileContent(false)
-	closeEditor.value = true
-	showRenameModal(editingFile.value)
-}
-
-const cancelEditing = () => {
-	isEditing.value = false
-	editingFile.value = null
-	fileContent.value = ''
-	isEditingImage.value = false
-	imagePreview.value = null
-	router.push({ query: { ...route.query, path: currentPath.value } })
-	const newQuery = { ...route.query }
-	delete newQuery.editing
-	router.replace({ query: newQuery })
-}
-
-const onScroll = () => {
+function onScroll() {
 	if (contextMenuInfo.value.item) {
 		contextMenuInfo.value.y = Math.max(0, contextMenuInfo.value.y - window.scrollY)
 	}
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
index b3e25eb848..4d39cbff51 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
@@ -205,6 +205,9 @@ type ServerProps = {
 
 const props = defineProps<ServerProps>()
 
+const client = injectModrinthClient()
+const serverId = props.server.serverId
+
 interface ErrorData {
 	id: string
 	name: string
@@ -242,7 +245,8 @@ const inspectingError = ref<ErrorData | null>(null)
 
 const inspectError = async () => {
 	try {
-		const log = await props.server.fs?.downloadFile('logs/latest.log')
+		const blob = await client.kyros.files_v0.downloadFile('/logs/latest.log')
+		const log = await blob.text()
 		if (!log) return
 
 		// @ts-ignore
@@ -287,9 +291,6 @@ if (props.serverPowerState === 'crashed' && !props.powerStateDetails?.oom_killed
 	inspectError()
 }
 
-const client = injectModrinthClient()
-const serverId = props.server.serverId
-
 const DYNAMIC_ARG = Symbol('DYNAMIC_ARG')
 
 const commandTree: any = {
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
index 9f228d4bab..b7b69e34f1 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
@@ -116,13 +116,15 @@
 
 <script setup lang="ts">
 import { EditIcon, TransferIcon } from '@modrinth/assets'
-import { injectNotificationManager, ServerIcon } from '@modrinth/ui'
+import { injectModrinthClient, injectNotificationManager, ServerIcon } from '@modrinth/ui'
 import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+
 const props = defineProps<{
 	server: ModrinthServer
 }>()
@@ -242,12 +244,12 @@ const uploadFile = async (e: Event) => {
 
 	try {
 		if (data.value?.image) {
-			await props.server.fs?.deleteFileOrFolder('/server-icon.png', false)
-			await props.server.fs?.deleteFileOrFolder('/server-icon-original.png', false)
+			await client.kyros.files_v0.deleteFileOrFolder('/server-icon.png', false)
+			await client.kyros.files_v0.deleteFileOrFolder('/server-icon-original.png', false)
 		}
 
-		await props.server.fs?.uploadFile('/server-icon.png', scaledFile)
-		await props.server.fs?.uploadFile('/server-icon-original.png', file)
+		await client.kyros.files_v0.uploadFile('/server-icon.png', scaledFile).promise
+		await client.kyros.files_v0.uploadFile('/server-icon-original.png', file).promise
 
 		const canvas = document.createElement('canvas')
 		const ctx = canvas.getContext('2d')
@@ -284,8 +286,8 @@ const uploadFile = async (e: Event) => {
 const resetIcon = async () => {
 	if (data.value?.image) {
 		try {
-			await props.server.fs?.deleteFileOrFolder('/server-icon.png', false)
-			await props.server.fs?.deleteFileOrFolder('/server-icon-original.png', false)
+			await client.kyros.files_v0.deleteFileOrFolder('/server-icon.png', false)
+			await client.kyros.files_v0.deleteFileOrFolder('/server-icon-original.png', false)
 
 			useState(`server-icon-${props.server.serverId}`).value = undefined
 			if (data.value) data.value.image = undefined
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
index c4b289e02e..bb81742597 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
@@ -78,11 +78,6 @@ const preferences = {
 		description: 'When enabled, you will be prompted before stopping and restarting your server.',
 		implemented: true,
 	},
-	backupWhileRunning: {
-		displayName: 'Create backups while running',
-		description: 'When enabled, backups will be created even if the server is running.',
-		implemented: true,
-	},
 } as const
 
 type PreferenceKeys = keyof typeof preferences
@@ -96,7 +91,6 @@ const defaultPreferences: UserPreferences = {
 	hideSubdomainLabel: false,
 	autoRestart: false,
 	powerDontAskAgain: false,
-	backupWhileRunning: false,
 }
 
 const userPreferences = useStorage<UserPreferences>(
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
index ef0332232a..73f552282a 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
@@ -1,32 +1,7 @@
 <template>
 	<div class="relative h-full w-full select-none overflow-y-auto">
 		<div
-			v-if="server.moduleErrors.fs"
-			class="flex w-full flex-col items-center justify-center gap-4 p-4"
-		>
-			<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-				<div class="flex flex-col items-center text-center">
-					<div class="flex flex-col items-center gap-4">
-						<div class="grid place-content-center rounded-full bg-bg-orange p-4">
-							<IssuesIcon class="size-12 text-orange" />
-						</div>
-						<h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load properties</h1>
-					</div>
-					<p class="text-lg text-secondary">
-						We couldn't access your server's properties. Here's what we know:
-						<span class="break-all font-mono">{{
-							JSON.stringify(server.moduleErrors.fs.error)
-						}}</span>
-					</p>
-					<ButtonStyled size="large" color="brand" @click="() => server.refresh(['fs'])">
-						<button class="mt-6 !w-full">Retry</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</div>
-
-		<div
-			v-else-if="propsData && status === 'success'"
+			v-if="propsData && status === 'success'"
 			class="flex h-full w-full flex-col justify-between gap-6 overflow-y-auto"
 		>
 			<div class="card flex flex-col gap-4">
@@ -158,8 +133,8 @@
 </template>
 
 <script setup lang="ts">
-import { EyeIcon, IssuesIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager } from '@modrinth/ui'
+import { EyeIcon, SearchIcon } from '@modrinth/assets'
+import { Combobox, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, inject, ref, watch } from 'vue'
 
@@ -167,6 +142,8 @@ import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+
 const props = defineProps<{
 	server: ModrinthServer
 }>()
@@ -181,33 +158,39 @@ const data = computed(() => props.server.general)
 const modulesLoaded = inject<Promise<void>>('modulesLoaded')
 const { data: propsData, status } = await useAsyncData('ServerProperties', async () => {
 	await modulesLoaded
-	const rawProps = await props.server.fs?.downloadFile('server.properties')
-	if (!rawProps) return null
-
-	const properties: Record<string, any> = {}
-	const lines = rawProps.split('\n')
-
-	for (const line of lines) {
-		if (line.startsWith('#') || !line.includes('=')) continue
-		const [key, ...valueParts] = line.split('=')
-		let value = valueParts.join('=')
-
-		if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') {
-			value = value.toLowerCase() === 'true'
-		} else {
-			const intLike = /^[-+]?\d+$/.test(value)
-			if (intLike) {
-				const n = Number(value)
-				if (Number.isSafeInteger(n)) {
-					value = n
+	try {
+		const blob = await client.kyros.files_v0.downloadFile('/server.properties')
+		const rawProps = await blob.text()
+		if (!rawProps) return null
+
+		const properties: Record<string, any> = {}
+		const lines = rawProps.split('\n')
+
+		for (const line of lines) {
+			if (line.startsWith('#') || !line.includes('=')) continue
+			const [key, ...valueParts] = line.split('=')
+			const rawValue = valueParts.join('=')
+			let value: string | boolean | number = rawValue
+
+			if (rawValue.toLowerCase() === 'true' || rawValue.toLowerCase() === 'false') {
+				value = rawValue.toLowerCase() === 'true'
+			} else {
+				const intLike = /^[-+]?\d+$/.test(rawValue)
+				if (intLike) {
+					const n = Number(rawValue)
+					if (Number.isSafeInteger(n)) {
+						value = n
+					}
 				}
 			}
+
+			properties[key.trim()] = value
 		}
 
-		properties[key.trim()] = value
+		return properties
+	} catch {
+		return null
 	}
-
-	return properties
 })
 
 const liveProperties = ref<Record<string, any>>({})
@@ -302,7 +285,7 @@ const constructServerProperties = (): string => {
 const saveProperties = async () => {
 	try {
 		isUpdating.value = true
-		await props.server.fs?.updateFile('server.properties', constructServerProperties())
+		await client.kyros.files_v0.updateFile('/server.properties', constructServerProperties())
 		await new Promise((resolve) => setTimeout(resolve, 500))
 		originalProperties.value = JSON.parse(JSON.stringify(liveProperties.value))
 		await props.server.refresh()
diff --git a/packages/api-client/src/core/abstract-client.ts b/packages/api-client/src/core/abstract-client.ts
index 123d3d14db..3aed6c62bc 100644
--- a/packages/api-client/src/core/abstract-client.ts
+++ b/packages/api-client/src/core/abstract-client.ts
@@ -2,15 +2,17 @@ import type { InferredClientModules } from '../modules'
 import { buildModuleStructure } from '../modules'
 import type { ClientConfig } from '../types/client'
 import type { RequestContext, RequestOptions } from '../types/request'
+import type { UploadMetadata, UploadProgress, UploadRequestOptions } from '../types/upload'
 import type { AbstractFeature } from './abstract-feature'
 import type { AbstractModule } from './abstract-module'
+import { AbstractUploadClient } from './abstract-upload-client'
 import type { AbstractWebSocketClient } from './abstract-websocket'
 import { ModrinthApiError, ModrinthServerError } from './errors'
 
 /**
  * Abstract base client for Modrinth APIs
  */
-export abstract class AbstractModrinthClient {
+export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	protected config: ClientConfig
 	protected features: AbstractFeature[]
 
@@ -30,6 +32,7 @@ export abstract class AbstractModrinthClient {
 	public readonly iso3166!: InferredClientModules['iso3166']
 
 	constructor(config: ClientConfig) {
+		super()
 		this.config = {
 			timeout: 10000,
 			labrinthBaseUrl: 'https://api.modrinth.com',
@@ -171,6 +174,35 @@ export abstract class AbstractModrinthClient {
 		return next()
 	}
 
+	/**
+	 * Execute the feature chain for an upload
+	 *
+	 * Similar to executeFeatureChain but calls executeXHRUpload at the end.
+	 * This allows features (auth, retry, etc.) to wrap the upload execution.
+	 */
+	protected async executeUploadFeatureChain<T>(
+		context: RequestContext,
+		progressCallbacks: Array<(p: UploadProgress) => void>,
+		abortController: AbortController,
+	): Promise<T> {
+		const applicableFeatures = this.features.filter((feature) => feature.shouldApply(context))
+
+		let index = applicableFeatures.length
+
+		const next = async (): Promise<T> => {
+			index--
+
+			if (index >= 0) {
+				return applicableFeatures[index].execute(next, context)
+			} else {
+				await this.config.hooks?.onRequest?.(context)
+				return this.executeXHRUpload<T>(context, progressCallbacks, abortController)
+			}
+		}
+
+		return next()
+	}
+
 	/**
 	 * Build the full URL for a request
 	 */
@@ -207,6 +239,36 @@ export abstract class AbstractModrinthClient {
 		}
 	}
 
+	/**
+	 * Build context for an upload request
+	 *
+	 * Sets metadata.isUpload = true so features can detect uploads.
+	 */
+	protected buildUploadContext(
+		url: string,
+		path: string,
+		options: UploadRequestOptions,
+	): RequestContext {
+		const metadata: UploadMetadata = {
+			isUpload: true,
+			file: options.file,
+			onProgress: options.onProgress,
+		}
+
+		return {
+			url,
+			path,
+			options: {
+				...options,
+				method: 'POST',
+				body: options.file,
+			},
+			attempt: 1,
+			startTime: Date.now(),
+			metadata,
+		}
+	}
+
 	/**
 	 * Build default headers for all requests
 	 *
@@ -238,6 +300,23 @@ export abstract class AbstractModrinthClient {
 	 */
 	protected abstract executeRequest<T>(url: string, options: RequestOptions): Promise<T>
 
+	/**
+	 * Execute the actual XHR upload
+	 *
+	 * This must be implemented by platform clients that support uploads.
+	 * Called at the end of the upload feature chain.
+	 *
+	 * @param context - Request context with upload metadata
+	 * @param progressCallbacks - Callbacks to invoke on progress events
+	 * @param abortController - Controller for cancellation
+	 * @returns Promise resolving to the response data
+	 */
+	protected abstract executeXHRUpload<T>(
+		context: RequestContext,
+		progressCallbacks: Array<(p: UploadProgress) => void>,
+		abortController: AbortController,
+	): Promise<T>
+
 	/**
 	 * Normalize an error into a ModrinthApiError
 	 *
diff --git a/packages/api-client/src/core/abstract-upload-client.ts b/packages/api-client/src/core/abstract-upload-client.ts
new file mode 100644
index 0000000000..b0c75cee8e
--- /dev/null
+++ b/packages/api-client/src/core/abstract-upload-client.ts
@@ -0,0 +1,21 @@
+import type { UploadHandle, UploadRequestOptions } from '../types/upload'
+
+/**
+ * Abstract base class defining upload capability
+ *
+ * All clients that support file uploads must extend this class.
+ * Platform-specific implementations should provide the actual upload mechanism
+ * (e.g., XHR for browser environments).
+ *
+ * Upload goes through the feature chain (auth, retry, circuit-breaker, etc.)
+ * just like regular requests.
+ */
+export abstract class AbstractUploadClient {
+	/**
+	 * Upload a file with progress tracking
+	 * @param path - API path (e.g., '/fs/create')
+	 * @param options - Upload options including file, api, version
+	 * @returns UploadHandle with promise, onProgress chain, and cancel method
+	 */
+	abstract upload<T = void>(path: string, options: UploadRequestOptions): UploadHandle<T>
+}
diff --git a/packages/api-client/src/features/node-auth.ts b/packages/api-client/src/features/node-auth.ts
new file mode 100644
index 0000000000..96b895bf60
--- /dev/null
+++ b/packages/api-client/src/features/node-auth.ts
@@ -0,0 +1,153 @@
+import { AbstractFeature, type FeatureConfig } from '../core/abstract-feature'
+import { ModrinthApiError } from '../core/errors'
+import type { RequestContext } from '../types/request'
+
+/**
+ * Node authentication credentials
+ */
+export interface NodeAuth {
+	/** Node instance URL (e.g., "node-xyz.modrinth.com/modrinth/v0/fs") */
+	url: string
+	/** JWT token */
+	token: string
+}
+
+export interface NodeAuthConfig extends FeatureConfig {
+	/**
+	 * Get current node auth. Returns null if not authenticated.
+	 */
+	getAuth: () => NodeAuth | null
+
+	/**
+	 * Refresh the node authentication token.
+	 */
+	refreshAuth: () => Promise<void>
+}
+
+/**
+ * Handles authentication for Kyros node fs requests:
+ * - Automatically injects Authorization header
+ * - Builds the correct URL from node instance
+ * - Handles 401 errors by refreshing and retrying (max 3 times)
+ *
+ * Only applies to requests with `useNodeAuth: true` in options.
+ *
+ * @example
+ * ```typescript
+ * const nodeAuth = new NodeAuthFeature({
+ *   getAuth: () => nodeAuthState.getAuth?.() ?? null,
+ *   refreshAuth: async () => {
+ *     if (nodeAuthState.refreshAuth) {
+ *       await nodeAuthState.refreshAuth()
+ *     }
+ *   },
+ * })
+ * client.addFeature(nodeAuth)
+ * ```
+ */
+export class NodeAuthFeature extends AbstractFeature {
+	protected declare config: NodeAuthConfig
+	private refreshPromise: Promise<void> | null = null
+
+	constructor(config: NodeAuthConfig) {
+		super(config)
+	}
+
+	shouldApply(context: RequestContext): boolean {
+		return context.options.useNodeAuth === true && this.config.enabled !== false
+	}
+
+	private async refreshAuthWithLock(): Promise<void> {
+		if (this.refreshPromise) {
+			return this.refreshPromise
+		}
+		this.refreshPromise = this.config.refreshAuth().finally(() => {
+			this.refreshPromise = null
+		})
+		return this.refreshPromise
+	}
+
+	async execute<T>(next: () => Promise<T>, context: RequestContext): Promise<T> {
+		const maxRetries = 3
+		let retryCount = 0
+
+		let auth = this.config.getAuth()
+		if (!auth || this.isTokenExpired(auth.token)) {
+			await this.refreshAuthWithLock()
+			auth = this.config.getAuth()
+		}
+		if (!auth) {
+			throw new Error('Failed to obtain node authentication')
+		}
+
+		this.applyAuth(context, auth)
+
+		while (true) {
+			try {
+				return await next()
+			} catch (error) {
+				if (error instanceof ModrinthApiError && error.statusCode === 401) {
+					retryCount++
+					if (retryCount >= maxRetries) {
+						throw new Error(
+							`Node authentication failed after ${maxRetries} retries. Please re-authenticate.`,
+						)
+					}
+
+					await this.refreshAuthWithLock()
+					auth = this.config.getAuth()
+					if (!auth) {
+						throw new Error('Failed to refresh node authentication')
+					}
+
+					this.applyAuth(context, auth)
+					continue
+				}
+				throw error
+			}
+		}
+	}
+
+	private applyAuth(context: RequestContext, auth: NodeAuth): void {
+		const baseUrl = `https://${auth.url.replace('v0/fs', '')}`
+		context.url = this.buildUrl(context.path, baseUrl, context.options.version)
+
+		context.options.headers = {
+			...context.options.headers,
+			Authorization: `Bearer ${auth.token}`,
+		}
+
+		context.options.skipAuth = true
+	}
+
+	private buildUrl(path: string, baseUrl: string, version: number | 'internal' | string): string {
+		const base = baseUrl.replace(/\/$/, '')
+		let versionPath = ''
+		if (version === 'internal') {
+			versionPath = '/_internal'
+		} else if (typeof version === 'number') {
+			versionPath = `/v${version}`
+		} else if (typeof version === 'string') {
+			versionPath = `/${version}`
+		}
+		const cleanPath = path.startsWith('/') ? path : `/${path}`
+		return `${base}${versionPath}${cleanPath}`
+	}
+
+	/**
+	 * Check if a JWT token is expired or about to expire
+	 * Refreshes proactively if expiring within next 10 seconds
+	 */
+	private isTokenExpired(token: string): boolean {
+		try {
+			const payload = JSON.parse(atob(token.split('.')[1]))
+			if (!payload.exp) return false
+			// refresh if expiring within 10 seconds
+			const expiresAt = payload.exp * 1000
+			return Date.now() >= expiresAt - 10000
+		} catch {
+			// cant decode, assume valid and let server decide
+			return false
+		}
+	}
+}
diff --git a/packages/api-client/src/index.ts b/packages/api-client/src/index.ts
index 396a0ceb14..d1fc693dbd 100644
--- a/packages/api-client/src/index.ts
+++ b/packages/api-client/src/index.ts
@@ -1,5 +1,6 @@
 export { AbstractModrinthClient } from './core/abstract-client'
 export { AbstractFeature, type FeatureConfig } from './core/abstract-feature'
+export { AbstractUploadClient } from './core/abstract-upload-client'
 export {
 	AbstractWebSocketClient,
 	type WebSocketConnection,
@@ -8,6 +9,7 @@ export {
 } from './core/abstract-websocket'
 export { ModrinthApiError, ModrinthServerError } from './core/errors'
 export { type AuthConfig, AuthFeature } from './features/auth'
+export { type NodeAuth, type NodeAuthConfig, NodeAuthFeature } from './features/node-auth'
 export {
 	type CircuitBreakerConfig,
 	CircuitBreakerFeature,
@@ -25,4 +27,7 @@ export type { NuxtClientConfig } from './platform/nuxt'
 export { NuxtCircuitBreakerStorage, NuxtModrinthClient } from './platform/nuxt'
 export type { TauriClientConfig } from './platform/tauri'
 export { TauriModrinthClient } from './platform/tauri'
+export { XHRUploadClient } from './platform/xhr-upload-client'
+export { clearNodeAuthState, nodeAuthState, setNodeAuthState } from './state/node-auth'
 export * from './types'
+export { withJWTRetry } from './utils/jwt-retry'
diff --git a/packages/api-client/src/modules/archon/content/v0.ts b/packages/api-client/src/modules/archon/content/v0.ts
new file mode 100644
index 0000000000..384fd38572
--- /dev/null
+++ b/packages/api-client/src/modules/archon/content/v0.ts
@@ -0,0 +1,56 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Archon } from '../types'
+
+export class ArchonContentV0Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'archon_content_v0'
+	}
+
+	/** GET /modrinth/v0/servers/:server_id/mods */
+	public async list(serverId: string): Promise<Archon.Content.v0.Mod[]> {
+		return this.client.request<Archon.Content.v0.Mod[]>(`/servers/${serverId}/mods`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'GET',
+		})
+	}
+
+	/** POST /modrinth/v0/servers/:server_id/mods */
+	public async install(
+		serverId: string,
+		request: Archon.Content.v0.InstallModRequest,
+	): Promise<void> {
+		await this.client.request<void>(`/servers/${serverId}/mods`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'POST',
+			body: request,
+		})
+	}
+
+	/** POST /modrinth/v0/servers/:server_id/deleteMod */
+	public async delete(
+		serverId: string,
+		request: Archon.Content.v0.DeleteModRequest,
+	): Promise<void> {
+		await this.client.request<void>(`/servers/${serverId}/deleteMod`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'POST',
+			body: request,
+		})
+	}
+
+	/** POST /modrinth/v0/servers/:server_id/mods/update */
+	public async update(
+		serverId: string,
+		request: Archon.Content.v0.UpdateModRequest,
+	): Promise<void> {
+		await this.client.request<void>(`/servers/${serverId}/mods/update`, {
+			api: 'archon',
+			version: 'modrinth/v0',
+			method: 'POST',
+			body: request,
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/archon/index.ts b/packages/api-client/src/modules/archon/index.ts
index 7f4699aee9..304edc0749 100644
--- a/packages/api-client/src/modules/archon/index.ts
+++ b/packages/api-client/src/modules/archon/index.ts
@@ -1,5 +1,6 @@
 export * from './backups/v0'
 export * from './backups/v1'
+export * from './content/v0'
 export * from './servers/v0'
 export * from './servers/v1'
 export * from './types'
diff --git a/packages/api-client/src/modules/archon/servers/v0.ts b/packages/api-client/src/modules/archon/servers/v0.ts
index 11fba52b2f..a21301e2b4 100644
--- a/packages/api-client/src/modules/archon/servers/v0.ts
+++ b/packages/api-client/src/modules/archon/servers/v0.ts
@@ -78,4 +78,20 @@ export class ArchonServersV0Module extends AbstractModule {
 			method: 'GET',
 		})
 	}
+
+	/**
+	 * Send a power action to a server (Start, Stop, Restart, Kill)
+	 * POST /modrinth/v0/servers/:id/power
+	 */
+	public async power(
+		serverId: string,
+		action: 'Start' | 'Stop' | 'Restart' | 'Kill',
+	): Promise<void> {
+		await this.client.request(`/servers/${serverId}/power`, {
+			api: 'archon',
+			method: 'POST',
+			version: 'modrinth/v0',
+			body: { action },
+		})
+	}
 }
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index 0b96e2b0fb..78a23cd67a 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -1,4 +1,40 @@
 export namespace Archon {
+	export namespace Content {
+		export namespace v0 {
+			export type ContentKind = 'mod' | 'plugin'
+
+			export type Mod = {
+				filename: string
+				project_id: string | undefined
+				version_id: string | undefined
+				name: string | undefined
+				version_number: string | undefined
+				icon_url: string | undefined
+				owner: string | undefined
+				disabled: boolean
+				installing: boolean
+			}
+
+			export type InstallModRequest = {
+				rinth_ids: {
+					project_id: string
+					version_id: string
+				}
+				install_as: ContentKind
+			}
+
+			export type DeleteModRequest = {
+				path: string
+			}
+
+			export type UpdateModRequest = {
+				replace: string
+				project_id: string
+				version_id: string
+			}
+		}
+	}
+
 	export namespace Servers {
 		export namespace v0 {
 			export type ServerGetResponse = {
@@ -257,8 +293,11 @@ export namespace Archon {
 				| 'ongoing'
 				| 'done'
 				| 'cancelled'
-				| 'failure-corrupted'
-				| 'failure-invalid-path'
+				| 'failed-corrupted'
+				| 'failed-invalid-path'
+				| 'failed-cf-no-serverpack'
+				| 'failed-cf-not-available'
+				| 'failed-not-reachable'
 
 			export type FilesystemOperation = {
 				op: FilesystemOpKind
@@ -269,7 +308,7 @@ export namespace Archon {
 				state: FilesystemOpState
 				mime: string
 				current_file?: string
-				invalid_path?: string
+				failed_path?: string
 				src: string
 				started: string
 			}
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index e78a8b7541..015467319f 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -2,6 +2,7 @@ import type { AbstractModrinthClient } from '../core/abstract-client'
 import type { AbstractModule } from '../core/abstract-module'
 import { ArchonBackupsV0Module } from './archon/backups/v0'
 import { ArchonBackupsV1Module } from './archon/backups/v1'
+import { ArchonContentV0Module } from './archon/content/v0'
 import { ArchonServersV0Module } from './archon/servers/v0'
 import { ArchonServersV1Module } from './archon/servers/v1'
 import { ISO3166Module } from './iso3166'
@@ -26,6 +27,7 @@ type ModuleConstructor = new (client: AbstractModrinthClient) => AbstractModule
 export const MODULE_REGISTRY = {
 	archon_backups_v0: ArchonBackupsV0Module,
 	archon_backups_v1: ArchonBackupsV1Module,
+	archon_content_v0: ArchonContentV0Module,
 	archon_servers_v0: ArchonServersV0Module,
 	archon_servers_v1: ArchonServersV1Module,
 	iso3166_data: ISO3166Module,
diff --git a/packages/api-client/src/modules/kyros/files/v0.ts b/packages/api-client/src/modules/kyros/files/v0.ts
index 6d1f86b634..10ed33dfa7 100644
--- a/packages/api-client/src/modules/kyros/files/v0.ts
+++ b/packages/api-client/src/modules/kyros/files/v0.ts
@@ -1,52 +1,196 @@
 import { AbstractModule } from '../../../core/abstract-module'
+import type { UploadHandle, UploadProgress } from '../../../types/upload'
+import type { Kyros } from '../types'
 
 export class KyrosFilesV0Module extends AbstractModule {
 	public getModuleID(): string {
 		return 'kyros_files_v0'
 	}
 
+	/**
+	 * List directory contents with pagination
+	 *
+	 * @param path - Directory path (e.g., "/")
+	 * @param page - Page number (1-indexed)
+	 * @param pageSize - Items per page
+	 * @returns Directory listing with items and pagination info
+	 */
+	public async listDirectory(
+		path: string,
+		page: number = 1,
+		pageSize: number = 100,
+	): Promise<Kyros.Files.v0.DirectoryResponse> {
+		return this.client.request<Kyros.Files.v0.DirectoryResponse>('/fs/list', {
+			api: '',
+			version: 'v0',
+			method: 'GET',
+			params: { path, page, page_size: pageSize },
+			useNodeAuth: true,
+		})
+	}
+
+	/**
+	 * Create a file or directory
+	 *
+	 * @param path - Path for new item (e.g., "/new-folder")
+	 * @param type - Type of item to create
+	 */
+	public async createFileOrFolder(path: string, type: 'file' | 'directory'): Promise<void> {
+		return this.client.request<void>('/fs/create', {
+			api: '',
+			version: 'v0',
+			method: 'POST',
+			params: { path, type },
+			headers: { 'Content-Type': 'application/octet-stream' },
+			useNodeAuth: true,
+		})
+	}
+
 	/**
 	 * Download a file from a server's filesystem
 	 *
-	 * @param nodeInstance - Node instance URL (e.g., "node-xyz.modrinth.com/modrinth/v0/fs")
-	 * @param nodeToken - JWT token from getFilesystemAuth
 	 * @param path - File path (e.g., "/server-icon-original.png")
 	 * @returns Promise resolving to file Blob
 	 */
-	public async downloadFile(nodeInstance: string, nodeToken: string, path: string): Promise<Blob> {
-		return this.client.request<Blob>(`/fs/download`, {
-			api: `https://${nodeInstance.replace('v0/fs', '')}`,
-			method: 'GET',
+	public async downloadFile(path: string): Promise<Blob> {
+		return this.client.request<Blob>('/fs/download', {
+			api: '',
 			version: 'v0',
+			method: 'GET',
 			params: { path },
-			headers: { Authorization: `Bearer ${nodeToken}` },
+			useNodeAuth: true,
 		})
 	}
 
 	/**
-	 * Upload a file to a server's filesystem
+	 * Upload a file to a server's filesystem with progress tracking
 	 *
-	 * @param nodeInstance - Node instance URL
-	 * @param nodeToken - JWT token from getFilesystemAuth
 	 * @param path - Destination path (e.g., "/server-icon.png")
 	 * @param file - File to upload
+	 * @param options - Optional progress callback and feature overrides
+	 * @returns UploadHandle with promise, onProgress, and cancel
 	 */
-	public async uploadFile(
-		nodeInstance: string,
-		nodeToken: string,
+	public uploadFile(
 		path: string,
-		file: File,
-	): Promise<void> {
-		return this.client.request<void>(`/fs/create`, {
-			api: `https://${nodeInstance.replace('v0/fs', '')}`,
-			method: 'POST',
+		file: File | Blob,
+		options?: {
+			onProgress?: (progress: UploadProgress) => void
+			retry?: boolean | number
+		},
+	): UploadHandle<void> {
+		return this.client.upload<void>('/fs/create', {
+			api: '',
 			version: 'v0',
+			file,
 			params: { path, type: 'file' },
-			headers: {
-				Authorization: `Bearer ${nodeToken}`,
-				'Content-Type': 'application/octet-stream',
-			},
-			body: file,
+			onProgress: options?.onProgress,
+			retry: options?.retry,
+			useNodeAuth: true,
+		})
+	}
+
+	/**
+	 * Update file contents
+	 *
+	 * @param path - File path to update
+	 * @param content - New file content (string or Blob)
+	 */
+	public async updateFile(path: string, content: string | Blob): Promise<void> {
+		const blob = typeof content === 'string' ? new Blob([content]) : content
+
+		return this.client.request<void>('/fs/update', {
+			api: '',
+			version: 'v0',
+			method: 'PUT',
+			params: { path },
+			body: blob,
+			headers: { 'Content-Type': 'application/octet-stream' },
+			useNodeAuth: true,
+		})
+	}
+
+	/**
+	 * Move a file or folder to a new location
+	 *
+	 * @param sourcePath - Current path
+	 * @param destPath - New path
+	 */
+	public async moveFileOrFolder(sourcePath: string, destPath: string): Promise<void> {
+		return this.client.request<void>('/fs/move', {
+			api: '',
+			version: 'v0',
+			method: 'POST',
+			body: { source: sourcePath, destination: destPath },
+			useNodeAuth: true,
+		})
+	}
+
+	/**
+	 * Rename a file or folder (convenience wrapper around move)
+	 *
+	 * @param path - Current file/folder path
+	 * @param newName - New name (not full path)
+	 */
+	public async renameFileOrFolder(path: string, newName: string): Promise<void> {
+		const newPath = path.split('/').slice(0, -1).join('/') + '/' + newName
+		return this.moveFileOrFolder(path, newPath)
+	}
+
+	/**
+	 * Delete a file or folder
+	 *
+	 * @param path - Path to delete
+	 * @param recursive - If true, delete directory contents recursively
+	 */
+	public async deleteFileOrFolder(path: string, recursive: boolean): Promise<void> {
+		return this.client.request<void>('/fs/delete', {
+			api: '',
+			version: 'v0',
+			method: 'DELETE',
+			params: { path, recursive },
+			useNodeAuth: true,
+		})
+	}
+
+	/**
+	 * Extract an archive file (zip, tar, etc.)
+	 *
+	 * Uses v1 API endpoint.
+	 *
+	 * @param path - Path to archive file
+	 * @param override - If true, overwrite existing files
+	 * @param dry - If true, perform dry run (returns conflicts without extracting)
+	 * @returns Extract result with modpack name and conflicting files
+	 */
+	public async extractFile(
+		path: string,
+		override: boolean = true,
+		dry: boolean = false,
+	): Promise<Kyros.Files.v0.ExtractResult> {
+		return this.client.request<Kyros.Files.v0.ExtractResult>('/fs/unarchive', {
+			api: '',
+			version: 'v1',
+			method: 'POST',
+			params: { src: path, trg: '/', override, dry },
+			useNodeAuth: true,
+		})
+	}
+
+	/**
+	 * Modify a filesystem operation (dismiss or cancel)
+	 *
+	 * Uses v1 API endpoint.
+	 *
+	 * @param opId - Operation ID (UUID)
+	 * @param action - Action to perform
+	 */
+	public async modifyOperation(opId: string, action: 'dismiss' | 'cancel'): Promise<void> {
+		return this.client.request<void>(`/fs/ops/${action}`, {
+			api: '',
+			version: 'v1',
+			method: 'POST',
+			params: { id: opId },
+			useNodeAuth: true,
 		})
 	}
 }
diff --git a/packages/api-client/src/modules/kyros/types.ts b/packages/api-client/src/modules/kyros/types.ts
index 61d65fc2d2..102c72be7c 100644
--- a/packages/api-client/src/modules/kyros/types.ts
+++ b/packages/api-client/src/modules/kyros/types.ts
@@ -1,7 +1,27 @@
 export namespace Kyros {
 	export namespace Files {
 		export namespace v0 {
-			// Empty for now
+			export interface DirectoryItem {
+				name: string
+				type: 'file' | 'directory' | 'symlink'
+				path: string
+				modified: number
+				created: number
+				size?: number
+				count?: number
+				target?: string
+			}
+
+			export interface DirectoryResponse {
+				items: DirectoryItem[]
+				total: number
+				current: number
+			}
+
+			export interface ExtractResult {
+				modpack_name: string | null
+				conflicting_files: string[]
+			}
 		}
 	}
 }
diff --git a/packages/api-client/src/platform/generic.ts b/packages/api-client/src/platform/generic.ts
index 7301237ec7..94b01729b6 100644
--- a/packages/api-client/src/platform/generic.ts
+++ b/packages/api-client/src/platform/generic.ts
@@ -1,10 +1,10 @@
 import { $fetch, FetchError } from 'ofetch'
 
-import { AbstractModrinthClient } from '../core/abstract-client'
 import type { ModrinthApiError } from '../core/errors'
 import type { ClientConfig } from '../types/client'
 import type { RequestOptions } from '../types/request'
 import { GenericWebSocketClient } from './websocket-generic'
+import { XHRUploadClient } from './xhr-upload-client'
 
 /**
  * Generic platform client using ofetch
@@ -24,7 +24,7 @@ import { GenericWebSocketClient } from './websocket-generic'
  * const project = await client.request('/project/sodium', { api: 'labrinth', version: 2 })
  * ```
  */
-export class GenericModrinthClient extends AbstractModrinthClient {
+export class GenericModrinthClient extends XHRUploadClient {
 	constructor(config: ClientConfig) {
 		super(config)
 
diff --git a/packages/api-client/src/platform/nuxt.ts b/packages/api-client/src/platform/nuxt.ts
index 5f57977a5f..449c3cadbb 100644
--- a/packages/api-client/src/platform/nuxt.ts
+++ b/packages/api-client/src/platform/nuxt.ts
@@ -1,11 +1,12 @@
 import { FetchError } from 'ofetch'
 
-import { AbstractModrinthClient } from '../core/abstract-client'
-import type { ModrinthApiError } from '../core/errors'
+import { ModrinthApiError } from '../core/errors'
 import type { CircuitBreakerState, CircuitBreakerStorage } from '../features/circuit-breaker'
 import type { ClientConfig } from '../types/client'
 import type { RequestOptions } from '../types/request'
+import type { UploadHandle, UploadRequestOptions } from '../types/upload'
 import { GenericWebSocketClient } from './websocket-generic'
+import { XHRUploadClient } from './xhr-upload-client'
 
 /**
  * Circuit breaker storage using Nuxt's useState
@@ -53,6 +54,8 @@ export interface NuxtClientConfig extends ClientConfig {
  *
  * This client is optimized for Nuxt applications and handles SSR/CSR automatically.
  *
+ * Note: upload() is only available in browser context (CSR). It will throw during SSR.
+ *
  * @example
  * ```typescript
  * // In a Nuxt composable
@@ -70,7 +73,7 @@ export interface NuxtClientConfig extends ClientConfig {
  * const project = await client.request('/project/sodium', { api: 'labrinth', version: 2 })
  * ```
  */
-export class NuxtModrinthClient extends AbstractModrinthClient {
+export class NuxtModrinthClient extends XHRUploadClient {
 	protected declare config: NuxtClientConfig
 
 	constructor(config: NuxtClientConfig) {
@@ -84,6 +87,20 @@ export class NuxtModrinthClient extends AbstractModrinthClient {
 		})
 	}
 
+	/**
+	 * Upload a file with progress tracking
+	 *
+	 * Note: This method is only available in browser context (CSR).
+	 * Calling during SSR will throw an error.
+	 */
+	upload<T = void>(path: string, options: UploadRequestOptions): UploadHandle<T> {
+		// @ts-expect-error - import.meta is provided by Nuxt
+		if (import.meta.server) {
+			throw new ModrinthApiError('upload() is not supported during SSR')
+		}
+		return super.upload(path, options)
+	}
+
 	protected async executeRequest<T>(url: string, options: RequestOptions): Promise<T> {
 		try {
 			// @ts-expect-error - $fetch is provided by Nuxt runtime
diff --git a/packages/api-client/src/platform/tauri.ts b/packages/api-client/src/platform/tauri.ts
index 05bfb9fb99..80eec9977b 100644
--- a/packages/api-client/src/platform/tauri.ts
+++ b/packages/api-client/src/platform/tauri.ts
@@ -1,8 +1,8 @@
-import { AbstractModrinthClient } from '../core/abstract-client'
 import type { ModrinthApiError } from '../core/errors'
 import type { ClientConfig } from '../types/client'
 import type { RequestOptions } from '../types/request'
 import { GenericWebSocketClient } from './websocket-generic'
+import { XHRUploadClient } from './xhr-upload-client'
 
 /**
  * Tauri-specific configuration
@@ -20,7 +20,9 @@ interface HttpError extends Error {
 
 /**
  * Tauri platform client using Tauri v2 HTTP plugin
-
+ *
+ * Extends XHRUploadClient to provide upload with progress tracking.
+ *
  * @example
  * ```typescript
  * import { getVersion } from '@tauri-apps/api/app'
@@ -36,7 +38,7 @@ interface HttpError extends Error {
  * const project = await client.request('/project/sodium', { api: 'labrinth', version: 2 })
  * ```
  */
-export class TauriModrinthClient extends AbstractModrinthClient {
+export class TauriModrinthClient extends XHRUploadClient {
 	protected declare config: TauriClientConfig
 
 	constructor(config: TauriClientConfig) {
diff --git a/packages/api-client/src/platform/xhr-upload-client.ts b/packages/api-client/src/platform/xhr-upload-client.ts
new file mode 100644
index 0000000000..59e5355f3b
--- /dev/null
+++ b/packages/api-client/src/platform/xhr-upload-client.ts
@@ -0,0 +1,142 @@
+import { AbstractModrinthClient } from '../core/abstract-client'
+import { ModrinthApiError } from '../core/errors'
+import type { RequestContext } from '../types/request'
+import type {
+	UploadHandle,
+	UploadMetadata,
+	UploadProgress,
+	UploadRequestOptions,
+} from '../types/upload'
+
+/**
+ * Abstract client with XHR-based upload implementation
+ *
+ * Platform-specific clients should extend this instead of AbstractModrinthClient
+ * to inherit the XHR upload implementation.
+ */
+export abstract class XHRUploadClient extends AbstractModrinthClient {
+	upload<T = void>(path: string, options: UploadRequestOptions): UploadHandle<T> {
+		let baseUrl: string
+		if (options.api === 'labrinth') {
+			baseUrl = this.config.labrinthBaseUrl!
+		} else if (options.api === 'archon') {
+			baseUrl = this.config.archonBaseUrl!
+		} else {
+			baseUrl = options.api
+		}
+
+		const url = this.buildUrl(path, baseUrl, options.version)
+
+		const mergedOptions: UploadRequestOptions = {
+			retry: false, // default: don't retry uploads
+			...options,
+			headers: {
+				...this.buildDefaultHeaders(),
+				'Content-Type': 'application/octet-stream',
+				...options.headers,
+			},
+		}
+
+		const context = this.buildUploadContext(url, path, mergedOptions)
+
+		const progressCallbacks: Array<(p: UploadProgress) => void> = []
+		if (mergedOptions.onProgress) {
+			progressCallbacks.push(mergedOptions.onProgress)
+		}
+		const abortController = new AbortController()
+
+		if (mergedOptions.signal) {
+			mergedOptions.signal.addEventListener('abort', () => abortController.abort())
+		}
+
+		const handle: UploadHandle<T> = {
+			promise: this.executeUploadFeatureChain<T>(context, progressCallbacks, abortController)
+				.then(async (result) => {
+					await this.config.hooks?.onResponse?.(result, context)
+					return result
+				})
+				.catch(async (error) => {
+					const apiError = this.normalizeError(error, context)
+					await this.config.hooks?.onError?.(apiError, context)
+					throw apiError
+				}),
+			onProgress: (callback) => {
+				progressCallbacks.push(callback)
+				return handle
+			},
+			cancel: () => abortController.abort(),
+		}
+
+		return handle
+	}
+
+	protected executeXHRUpload<T>(
+		context: RequestContext,
+		progressCallbacks: Array<(p: UploadProgress) => void>,
+		abortController: AbortController,
+	): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			const xhr = new XMLHttpRequest()
+			const metadata = context.metadata as UploadMetadata
+
+			xhr.upload.addEventListener('progress', (e) => {
+				if (e.lengthComputable) {
+					const progress: UploadProgress = {
+						loaded: e.loaded,
+						total: e.total,
+						progress: e.loaded / e.total,
+					}
+					progressCallbacks.forEach((cb) => cb(progress))
+				}
+			})
+
+			xhr.addEventListener('load', () => {
+				if (xhr.status >= 200 && xhr.status < 300) {
+					try {
+						resolve(xhr.response ? JSON.parse(xhr.response) : (undefined as T))
+					} catch {
+						resolve(undefined as T)
+					}
+				} else {
+					reject(this.createUploadError(xhr))
+				}
+			})
+
+			xhr.addEventListener('error', () => reject(new ModrinthApiError('Upload failed')))
+			xhr.addEventListener('abort', () => reject(new ModrinthApiError('Upload cancelled')))
+
+			// build URL with params (unlike $fetch, XHR doesn't handle params automatically)
+			let url = context.url
+			if (context.options.params) {
+				const queryString = new URLSearchParams(
+					Object.entries(context.options.params).map(([k, v]) => [k, String(v)]),
+				).toString()
+				url += (url.includes('?') ? '&' : '?') + queryString
+			}
+
+			xhr.open('POST', url)
+
+			// apply headers from context (features may have modified them)
+			for (const [key, value] of Object.entries(context.options.headers ?? {})) {
+				xhr.setRequestHeader(key, value)
+			}
+
+			xhr.send(metadata.file)
+			abortController.signal.addEventListener('abort', () => xhr.abort())
+		})
+	}
+
+	protected createUploadError(xhr: XMLHttpRequest): ModrinthApiError {
+		let responseData: unknown
+		try {
+			responseData = xhr.response ? JSON.parse(xhr.response) : undefined
+		} catch {
+			responseData = xhr.responseText
+		}
+		return this.createNormalizedError(
+			new Error(`Upload failed with status ${xhr.status}`),
+			xhr.status,
+			responseData,
+		)
+	}
+}
diff --git a/packages/api-client/src/state/node-auth.ts b/packages/api-client/src/state/node-auth.ts
new file mode 100644
index 0000000000..b57c317122
--- /dev/null
+++ b/packages/api-client/src/state/node-auth.ts
@@ -0,0 +1,48 @@
+import type { NodeAuth } from '../features/node-auth'
+
+/**
+ * Global node auth state.
+ * Set by server management pages, read by NodeAuthFeature.
+ */
+export const nodeAuthState = {
+	getAuth: null as (() => NodeAuth | null) | null,
+	refreshAuth: null as (() => Promise<void>) | null,
+}
+
+/**
+ * Configure the node auth state. Call this when entering server management.
+ *
+ * @param getAuth - Function that returns current auth or null
+ * @param refreshAuth - Function to refresh the auth token
+ *
+ * @example
+ * ```typescript
+ * // In server management page setup
+ * setNodeAuthState(
+ *   () => fsAuth.value,
+ *   refreshFsAuth,
+ * )
+ * ```
+ */
+export function setNodeAuthState(
+	getAuth: () => NodeAuth | null,
+	refreshAuth: () => Promise<void>,
+) {
+	nodeAuthState.getAuth = getAuth
+	nodeAuthState.refreshAuth = refreshAuth
+}
+
+/**
+ * Clear the node auth state. Call this when leaving server management.
+ *
+ * @example
+ * ```typescript
+ * onUnmounted(() => {
+ *   clearNodeAuthState()
+ * })
+ * ```
+ */
+export function clearNodeAuthState() {
+	nodeAuthState.getAuth = null
+	nodeAuthState.refreshAuth = null
+}
diff --git a/packages/api-client/src/types/index.ts b/packages/api-client/src/types/index.ts
index 35e1f83809..e1e92ff43c 100644
--- a/packages/api-client/src/types/index.ts
+++ b/packages/api-client/src/types/index.ts
@@ -11,3 +11,4 @@ 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'
diff --git a/packages/api-client/src/types/request.ts b/packages/api-client/src/types/request.ts
index 1d513fcc77..b0c1beb08e 100644
--- a/packages/api-client/src/types/request.ts
+++ b/packages/api-client/src/types/request.ts
@@ -73,6 +73,13 @@ export type RequestOptions = {
 	 * @default false
 	 */
 	skipAuth?: boolean
+
+	/**
+	 * Use node authentication for this request.
+	 * When true, NodeAuthFeature will handle auth injection and URL building.
+	 * @default false
+	 */
+	useNodeAuth?: boolean
 }
 
 /**
@@ -106,6 +113,13 @@ export type RequestContext = {
 
 	/**
 	 * Additional metadata that features can attach
+	 *
+	 * For uploads, this contains:
+	 * - isUpload: true
+	 * - file: File | Blob being uploaded
+	 * - onProgress: progress callback (if provided)
+	 *
+	 * Features can check `context.metadata?.isUpload` to detect uploads.
 	 */
 	metadata?: Record<string, unknown>
 }
diff --git a/packages/api-client/src/types/upload.ts b/packages/api-client/src/types/upload.ts
new file mode 100644
index 0000000000..e8ec45bfe1
--- /dev/null
+++ b/packages/api-client/src/types/upload.ts
@@ -0,0 +1,51 @@
+import type { RequestOptions } from './request'
+
+/**
+ * Progress information for file uploads
+ */
+export interface UploadProgress {
+	/** Bytes uploaded so far */
+	loaded: number
+	/** Total bytes to upload */
+	total: number
+	/** Progress as a decimal (0-1) */
+	progress: number
+}
+
+/**
+ * Options for upload requests (matches request() style)
+ *
+ * Extends RequestOptions but excludes body and method since those
+ * are determined by the upload itself.
+ */
+export interface UploadRequestOptions extends Omit<RequestOptions, 'body' | 'method'> {
+	/** File or Blob to upload */
+	file: File | Blob
+	/** Callback for progress updates */
+	onProgress?: (progress: UploadProgress) => void
+}
+
+/**
+ * Metadata attached to upload contexts
+ *
+ * Features can check `context.metadata?.isUpload` to detect uploads.
+ */
+export interface UploadMetadata extends Record<string, unknown> {
+	isUpload: true
+	file: File | Blob
+	onProgress?: (progress: UploadProgress) => void
+}
+
+/**
+ * Handle returned from upload operations
+ *
+ * Provides the upload promise, progress subscription, and cancellation.
+ */
+export interface UploadHandle<T> {
+	/** Promise that resolves when upload completes */
+	promise: Promise<T>
+	/** Subscribe to progress updates (chainable) */
+	onProgress: (callback: (progress: UploadProgress) => void) => UploadHandle<T>
+	/** Cancel the upload */
+	cancel: () => void
+}
diff --git a/packages/api-client/src/utils/jwt-retry.ts b/packages/api-client/src/utils/jwt-retry.ts
new file mode 100644
index 0000000000..1ae0817bfc
--- /dev/null
+++ b/packages/api-client/src/utils/jwt-retry.ts
@@ -0,0 +1,20 @@
+import { ModrinthApiError } from '../core/errors'
+
+/**
+ * Wrap a function with JWT retry logic.
+ * On 401, calls refreshToken() and retries once.
+ */
+export async function withJWTRetry<T>(
+	fn: () => Promise<T>,
+	refreshToken: () => Promise<void>,
+): Promise<T> {
+	try {
+		return await fn()
+	} catch (error) {
+		if (error instanceof ModrinthApiError && error.statusCode === 401) {
+			await refreshToken()
+			return await fn()
+		}
+		throw error
+	}
+}
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 99c9df5be2..d6471e945c 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -142,6 +142,7 @@ import _PackageIcon from './icons/package.svg?component'
 import _PackageClosedIcon from './icons/package-closed.svg?component'
 import _PackageOpenIcon from './icons/package-open.svg?component'
 import _PaintbrushIcon from './icons/paintbrush.svg?component'
+import _PaletteIcon from './icons/palette.svg?component'
 import _PickaxeIcon from './icons/pickaxe.svg?component'
 import _PlayIcon from './icons/play.svg?component'
 import _PlugIcon from './icons/plug.svg?component'
@@ -359,6 +360,7 @@ export const PackageClosedIcon = _PackageClosedIcon
 export const PackageOpenIcon = _PackageOpenIcon
 export const PackageIcon = _PackageIcon
 export const PaintbrushIcon = _PaintbrushIcon
+export const PaletteIcon = _PaletteIcon
 export const PickaxeIcon = _PickaxeIcon
 export const PlayIcon = _PlayIcon
 export const PlugIcon = _PlugIcon
diff --git a/apps/frontend/src/assets/icons/palette.svg b/packages/assets/icons/palette.svg
similarity index 100%
rename from apps/frontend/src/assets/icons/palette.svg
rename to packages/assets/icons/palette.svg
diff --git a/packages/assets/styles/ace.css b/packages/assets/styles/ace.css
new file mode 100644
index 0000000000..58c0f10a85
--- /dev/null
+++ b/packages/assets/styles/ace.css
@@ -0,0 +1,211 @@
+.ace-modrinth .ace_gutter {
+	background: var(--surface-2);
+	color: var(--color-text-tertiary);
+}
+
+.ace-modrinth .ace_print-margin {
+	width: 1px;
+	background: var(--surface-5);
+}
+
+.ace-modrinth {
+	background-color: var(--surface-3);
+	color: var(--color-text-default);
+}
+
+.ace-modrinth .ace_cursor {
+	color: var(--color-brand);
+}
+
+.ace-modrinth .ace_marker-layer .ace_selection {
+	background: var(--color-brand-highlight);
+}
+
+.ace-modrinth.ace_multiselect .ace_selection.ace_start {
+	box-shadow: 0 0 3px 0 var(--surface-3);
+}
+
+.ace-modrinth .ace_marker-layer .ace_step {
+	background: var(--color-orange-highlight);
+}
+
+.ace-modrinth .ace_marker-layer .ace_bracket {
+	margin: -1px 0 0 -1px;
+	border: 1px solid var(--color-brand);
+}
+
+.ace-modrinth .ace_marker-layer .ace_active-line {
+	background: var(--surface-4);
+}
+
+.ace-modrinth .ace_gutter-active-line {
+	background-color: var(--surface-1);
+}
+
+.ace-modrinth .ace_marker-layer .ace_selected-word {
+	border: 1px solid var(--color-brand-highlight);
+}
+
+.ace-modrinth .ace_invisible {
+	color: var(--color-text-tertiary);
+	opacity: 0.5;
+}
+
+.ace-modrinth .ace_fold {
+	background-color: var(--color-blue);
+	border-color: var(--color-text-default);
+}
+
+/* Comments */
+.ace-modrinth .ace_comment {
+	color: var(--color-gray);
+	font-style: italic;
+}
+
+/* Strings */
+.ace-modrinth .ace_string {
+	color: var(--color-green);
+}
+
+.ace-modrinth .ace_string.ace_regexp {
+	color: var(--color-orange);
+}
+
+/* Constants */
+.ace-modrinth .ace_constant.ace_numeric {
+	color: var(--color-purple);
+}
+
+.ace-modrinth .ace_constant.ace_language {
+	color: var(--color-orange);
+}
+
+.ace-modrinth .ace_constant.ace_character {
+	color: var(--color-orange);
+}
+
+.ace-modrinth .ace_constant.ace_other {
+	color: var(--color-purple);
+}
+
+/* Keywords */
+.ace-modrinth .ace_keyword {
+	color: var(--color-red);
+}
+
+.ace-modrinth .ace_keyword.ace_operator {
+	color: var(--color-text-default);
+}
+
+/* Storage */
+.ace-modrinth .ace_storage {
+	color: var(--color-red);
+}
+
+.ace-modrinth .ace_storage.ace_type {
+	color: var(--color-blue);
+}
+
+/* Entity names */
+.ace-modrinth .ace_entity.ace_name.ace_function {
+	color: var(--color-blue);
+}
+
+.ace-modrinth .ace_entity.ace_name.ace_class {
+	color: var(--color-purple);
+}
+
+.ace-modrinth .ace_entity.ace_name.ace_tag {
+	color: var(--color-red);
+}
+
+.ace-modrinth .ace_entity.ace_other.ace_attribute-name {
+	color: var(--color-orange);
+}
+
+/* Variables */
+.ace-modrinth .ace_variable {
+	color: var(--color-text-default);
+}
+
+.ace-modrinth .ace_variable.ace_parameter {
+	color: var(--color-text-default);
+	font-style: italic;
+}
+
+.ace-modrinth .ace_variable.ace_language {
+	color: var(--color-orange);
+}
+
+/* Support */
+.ace-modrinth .ace_support.ace_function {
+	color: var(--color-blue);
+}
+
+.ace-modrinth .ace_support.ace_class {
+	color: var(--color-purple);
+}
+
+.ace-modrinth .ace_support.ace_type {
+	color: var(--color-blue);
+}
+
+.ace-modrinth .ace_support.ace_constant {
+	color: var(--color-purple);
+}
+
+/* Invalid */
+.ace-modrinth .ace_invalid {
+	color: var(--color-text-primary);
+	background-color: var(--color-red-bg);
+}
+
+.ace-modrinth .ace_invalid.ace_deprecated {
+	color: var(--color-text-primary);
+	background-color: var(--color-orange-bg);
+}
+
+/* Punctuation */
+.ace-modrinth .ace_punctuation {
+	color: var(--color-text-tertiary);
+}
+
+/* Meta */
+.ace-modrinth .ace_meta.ace_tag {
+	color: var(--color-text-default);
+}
+
+/* Markup */
+.ace-modrinth .ace_markup.ace_heading {
+	color: var(--color-red);
+	font-weight: bold;
+}
+
+.ace-modrinth .ace_markup.ace_list {
+	color: var(--color-orange);
+}
+
+.ace-modrinth .ace_markup.ace_bold {
+	font-weight: bold;
+}
+
+.ace-modrinth .ace_markup.ace_italic {
+	font-style: italic;
+}
+
+.ace-modrinth .ace_markup.ace_underline {
+	text-decoration: underline;
+}
+
+/* Indent guide */
+.ace-modrinth .ace_indent-guide {
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC)
+		right repeat-y;
+	opacity: 0.2;
+}
+
+.ace-modrinth .ace_indent-guide-active {
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC)
+		right repeat-y;
+	opacity: 0.4;
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9c1a2083d5..645ba98197 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -48,6 +48,7 @@
 		"@types/three": "^0.172.0",
 		"@vintl/how-ago": "^3.0.1",
 		"@vueuse/core": "^11.1.0",
+		"ace-builds": "^1.36.2",
 		"apexcharts": "^3.44.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
diff --git a/packages/ui/src/components/base/FloatingActionBar.vue b/packages/ui/src/components/base/FloatingActionBar.vue
new file mode 100644
index 0000000000..3585aa9395
--- /dev/null
+++ b/packages/ui/src/components/base/FloatingActionBar.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineProps<{
+	shown: boolean
+}>()
+</script>
+
+<template>
+	<Transition name="floating-action-bar" appear>
+		<div v-if="shown" class="floating-action-bar fixed w-full z-10 left-0 p-4 bottom-0">
+			<div
+				class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
+			>
+				<slot />
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+.floating-action-bar {
+	transition: bottom 0.25s ease-in-out;
+}
+
+.floating-action-bar-enter-active {
+	transition:
+		transform 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96),
+		opacity 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96);
+}
+
+.floating-action-bar-leave-active {
+	transition:
+		transform 0.25s ease,
+		opacity 0.25s ease;
+}
+
+.floating-action-bar-enter-from {
+	transform: scale(0.5) translateY(10rem);
+	opacity: 0;
+}
+
+.floating-action-bar-leave-to {
+	transform: scale(0.96) translateY(0.25rem);
+	opacity: 0;
+}
+
+@media (any-hover: none) and (max-width: 640px) {
+	.floating-action-bar {
+		bottom: var(--size-mobile-navbar-height);
+	}
+
+	.expanded-mobile-nav .floating-action-bar {
+		bottom: var(--size-mobile-navbar-height-expanded);
+	}
+}
+</style>
diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue
index c150f5840a..8f812ea6b9 100644
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -5,6 +5,7 @@ import { type Component, computed } from 'vue'
 
 import { commonMessages } from '../../utils'
 import ButtonStyled from './ButtonStyled.vue'
+import FloatingActionBar from './FloatingActionBar.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -53,64 +54,21 @@ function localizeIfPossible(message: MessageDescriptor | string) {
 </script>
 
 <template>
-	<Transition name="pop-in">
-		<div v-if="shown" class="fixed w-full z-10 left-0 p-4 unsaved-changes-popup">
-			<div
-				class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
-			>
-				<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
-				<div class="ml-auto flex gap-2">
-					<ButtonStyled v-if="canReset" type="transparent">
-						<button :disabled="saving" @click="(e) => emit('reset', e)">
-							<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="saving" @click="(e) => emit('save', e)">
-							<SpinnerIcon v-if="saving" class="animate-spin" />
-							<component :is="saveIcon" v-else />
-							{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
+	<FloatingActionBar :shown="shown">
+		<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
+		<div class="ml-auto flex gap-2">
+			<ButtonStyled v-if="canReset" type="transparent">
+				<button :disabled="saving" @click="(e) => emit('reset', e)">
+					<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled color="brand">
+				<button :disabled="saving" @click="(e) => emit('save', e)">
+					<SpinnerIcon v-if="saving" class="animate-spin" />
+					<component :is="saveIcon" v-else />
+					{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
+				</button>
+			</ButtonStyled>
 		</div>
-	</Transition>
+	</FloatingActionBar>
 </template>
-
-<style scoped>
-.pop-in-enter-active {
-	transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
-}
-
-.pop-in-leave-active {
-	transition: all 0.25s ease;
-}
-
-.pop-in-enter-from {
-	scale: 0.5;
-	translate: 0 10rem;
-	opacity: 0;
-}
-
-.pop-in-leave-to {
-	scale: 0.96;
-	translate: 0 0.25rem;
-	opacity: 0;
-}
-
-.unsaved-changes-popup {
-	transition: bottom 0.25s ease-in-out;
-	bottom: 0;
-}
-
-@media (any-hover: none) and (max-width: 640px) {
-	.unsaved-changes-popup {
-		bottom: var(--size-mobile-navbar-height);
-	}
-
-	.expanded-mobile-nav .unsaved-changes-popup {
-		bottom: var(--size-mobile-navbar-height-expanded);
-	}
-}
-</style>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index cfaf818452..876a508162 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -24,6 +24,7 @@ export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
 export { default as FileInput } from './FileInput.vue'
 export type { FilterBarOption } from './FilterBar.vue'
 export { default as FilterBar } from './FilterBar.vue'
+export { default as FloatingActionBar } from './FloatingActionBar.vue'
 export { default as HeadingLink } from './HeadingLink.vue'
 export { default as HorizontalRule } from './HorizontalRule.vue'
 export { default as IconSelect } from './IconSelect.vue'
diff --git a/packages/ui/src/pages/hosting/manage/backups.vue b/packages/ui/src/pages/hosting/manage/backups.vue
index 86cd8cb21a..96e8fcd3be 100644
--- a/packages/ui/src/pages/hosting/manage/backups.vue
+++ b/packages/ui/src/pages/hosting/manage/backups.vue
@@ -350,7 +350,6 @@ const createBackupModal = ref<InstanceType<typeof BackupCreateModal>>()
 const renameBackupModal = ref<InstanceType<typeof BackupRenameModal>>()
 const restoreBackupModal = ref<InstanceType<typeof BackupRestoreModal>>()
 const deleteBackupModal = ref<InstanceType<typeof BackupDeleteModal>>()
-// const backupSettingsModal = ref<InstanceType<typeof BackupSettingsModal>>()
 
 const backupRestoreDisabled = computed(() => {
 	if (props.isServerRunning) {
@@ -400,10 +399,6 @@ const showCreateModel = () => {
 	createBackupModal.value?.show()
 }
 
-// const showbackupSettingsModal = () => {
-// 	backupSettingsModal.value?.show()
-// }
-
 function triggerDownloadAnimation() {
 	overTheTopDownloadAnimation.value = true
 	setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
diff --git a/packages/ui/src/providers/server-context.ts b/packages/ui/src/providers/server-context.ts
index 08f3b2c627..ee09cbd51e 100644
--- a/packages/ui/src/providers/server-context.ts
+++ b/packages/ui/src/providers/server-context.ts
@@ -1,4 +1,5 @@
 import type { Archon } from '@modrinth/api-client'
+import type { FilesystemOp, FSQueuedOp } from '@modrinth/utils'
 import type { ComputedRef, Reactive, Ref } from 'vue'
 
 import { createContext } from '.'
@@ -16,6 +17,11 @@ export type BackupProgressEntry = {
 
 export type BackupsState = Map<string, BackupProgressEntry>
 
+export interface FilesystemAuth {
+	url: string
+	token: string
+}
+
 export interface ModrinthServerContext {
 	readonly serverId: string
 	readonly server: Ref<Archon.Servers.v0.Server>
@@ -26,6 +32,12 @@ export interface ModrinthServerContext {
 	readonly isServerRunning: ComputedRef<boolean>
 	readonly backupsState: Reactive<BackupsState>
 	markBackupCancelled: (backupId: string) => void
+
+	// Filesystem state (lazy-loaded when files page mounts)
+	readonly fsAuth: Ref<FilesystemAuth | null>
+	readonly fsOps: Ref<FilesystemOp[]>
+	readonly fsQueuedOps: Ref<FSQueuedOp[]>
+	refreshFsAuth: () => Promise<void>
 }
 
 export const [injectModrinthServerContext, provideModrinthServerContext] =
diff --git a/packages/ui/src/utils/ace-theme.ts b/packages/ui/src/utils/ace-theme.ts
new file mode 100644
index 0000000000..a1cde94088
--- /dev/null
+++ b/packages/ui/src/utils/ace-theme.ts
@@ -0,0 +1,15 @@
+import cssText from '@modrinth/assets/styles/ace.css?raw'
+import ace from 'ace-builds'
+
+ace['define'](
+	'ace/theme/modrinth',
+	['require', 'exports', 'module', 'ace/lib/dom'],
+	function (require, exports, _module) {
+		exports.isDark = false
+		exports.cssClass = 'ace-modrinth'
+		exports.cssText = cssText
+
+		const dom = require('ace/lib/dom')
+		dom.importCssString(exports.cssText, exports.cssClass, false)
+	},
+)
diff --git a/packages/ui/src/utils/file-extensions.ts b/packages/ui/src/utils/file-extensions.ts
new file mode 100644
index 0000000000..38f11b974c
--- /dev/null
+++ b/packages/ui/src/utils/file-extensions.ts
@@ -0,0 +1,152 @@
+// File extension constants
+export const CODE_EXTENSIONS = [
+	'json',
+	'json5',
+	'jsonc',
+	'java',
+	'kt',
+	'kts',
+	'sh',
+	'bat',
+	'ps1',
+	'yml',
+	'yaml',
+	'toml',
+	'js',
+	'ts',
+	'py',
+	'rb',
+	'php',
+	'html',
+	'css',
+	'cpp',
+	'c',
+	'h',
+	'rs',
+	'go',
+] as const
+
+export const TEXT_EXTENSIONS = [
+	'txt',
+	'md',
+	'log',
+	'cfg',
+	'conf',
+	'properties',
+	'ini',
+	'sk',
+] as const
+
+export const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
+
+export const ARCHIVE_EXTENSIONS = ['zip'] as const
+
+// Type for extension strings
+export type CodeExtension = (typeof CODE_EXTENSIONS)[number]
+export type TextExtension = (typeof TEXT_EXTENSIONS)[number]
+export type ImageExtension = (typeof IMAGE_EXTENSIONS)[number]
+export type ArchiveExtension = (typeof ARCHIVE_EXTENSIONS)[number]
+
+/**
+ * Extract file extension from filename (lowercase)
+ */
+export function getFileExtension(filename: string): string {
+	return filename.split('.').pop()?.toLowerCase() ?? ''
+}
+
+/**
+ * Check if extension is a code file
+ */
+export function isCodeFile(ext: string): boolean {
+	return (CODE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+}
+
+/**
+ * Check if extension is a text file
+ */
+export function isTextFile(ext: string): boolean {
+	return (TEXT_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+}
+
+/**
+ * Check if extension is an image file
+ */
+export function isImageFile(ext: string): boolean {
+	return (IMAGE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+}
+
+/**
+ * Check if extension is an archive file
+ */
+export function isArchiveFile(ext: string): boolean {
+	return (ARCHIVE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+}
+
+/**
+ * Check if file is editable (code or text)
+ */
+export function isEditableFile(ext: string): boolean {
+	return isCodeFile(ext) || isTextFile(ext)
+}
+
+/**
+ * Get Ace editor language mode for a file extension
+ */
+export function getEditorLanguage(ext: string): string {
+	const lowered = ext.toLowerCase()
+	switch (lowered) {
+		// Code files
+		case 'json':
+		case 'json5':
+		case 'jsonc':
+			return 'json'
+		case 'toml':
+			return 'toml'
+		case 'sh':
+			return 'sh'
+		case 'bat':
+			return 'batchfile'
+		case 'ps1':
+			return 'powershell'
+		case 'yml':
+		case 'yaml':
+			return 'yaml'
+		case 'js':
+			return 'javascript'
+		case 'ts':
+			return 'typescript'
+		case 'py':
+			return 'python'
+		case 'rb':
+			return 'ruby'
+		case 'php':
+			return 'php'
+		case 'html':
+			return 'html'
+		case 'css':
+			return 'css'
+		case 'java':
+		case 'kt':
+		case 'kts':
+			return 'java'
+		case 'cpp':
+		case 'c':
+		case 'h':
+			return 'c_cpp'
+		case 'rs':
+			return 'rust'
+		case 'go':
+			return 'golang'
+		// Text files
+		case 'md':
+			return 'markdown'
+		case 'properties':
+			return 'properties'
+		case 'ini':
+		case 'cfg':
+		case 'conf':
+			return 'ini'
+		default:
+			return 'text'
+	}
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 85802d45c6..8d90f230f3 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './common-messages'
+export * from './file-extensions'
 export * from './game-modes'
 export * from './notices'
 export * from './savable'
diff --git a/packages/utils/servers/types/api.ts b/packages/utils/servers/types/api.ts
index 634f79d9b0..8cc6271f10 100644
--- a/packages/utils/servers/types/api.ts
+++ b/packages/utils/servers/types/api.ts
@@ -16,4 +16,4 @@ export interface ModuleError {
 	timestamp: number
 }
 
-export type ModuleName = 'general' | 'content' | 'backups' | 'network' | 'startup' | 'ws' | 'fs'
+export type ModuleName = 'general' | 'content' | 'network' | 'startup'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d008fe570..1e27442fd3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -268,7 +268,7 @@ importers:
         version: 11.1.0(vue@3.5.13(typescript@5.5.4))
       ace-builds:
         specifier: ^1.36.2
-        version: 1.36.2
+        version: 1.43.5
       ansi-to-html:
         specifier: ^0.7.2
         version: 0.7.2
@@ -328,7 +328,7 @@ importers:
         version: 1.0.10(vue@3.5.13(typescript@5.5.4))
       vue3-ace-editor:
         specifier: ^2.2.4
-        version: 2.2.4(ace-builds@1.36.2)(vue@3.5.13(typescript@5.5.4))
+        version: 2.2.4(ace-builds@1.43.5)(vue@3.5.13(typescript@5.5.4))
       vue3-apexcharts:
         specifier: ^1.5.2
         version: 1.5.3(apexcharts@3.49.2)(vue@3.5.13(typescript@5.5.4))
@@ -583,6 +583,9 @@ importers:
       '@vueuse/core':
         specifier: ^11.1.0
         version: 11.1.0(vue@3.5.13(typescript@5.5.4))
+      ace-builds:
+        specifier: ^1.36.2
+        version: 1.43.5
       apexcharts:
         specifier: ^3.44.0
         version: 3.49.2
@@ -3415,8 +3418,8 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
-  ace-builds@1.36.2:
-    resolution: {integrity: sha512-eqqfbGwx/GKjM/EnFu4QtQ+d2NNBu84MGgxoG8R5iyFpcVeQ4p9YlTL+ZzdEJqhdkASqoqOxCSNNGyB6lvMm+A==}
+  ace-builds@1.43.5:
+    resolution: {integrity: sha512-iH5FLBKdB7SVn9GR37UgA/tpQS8OTWIxWAuq3Ofaw+Qbc69FfPXsXd9jeW7KRG2xKpKMqBDnu0tHBrCWY5QI7A==}
 
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
@@ -11709,7 +11712,7 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  ace-builds@1.36.2: {}
+  ace-builds@1.43.5: {}
 
   acorn-import-attributes@1.9.5(acorn@8.14.0):
     dependencies:
@@ -14068,7 +14071,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.4.1
+      '@types/node': 20.14.11
       merge-stream: 2.0.0
       supports-color: 8.1.1
     optional: true
@@ -17590,9 +17593,9 @@ snapshots:
       vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.13(typescript@5.5.4))
       vue-resize: 2.0.0-alpha.1(vue@3.5.13(typescript@5.5.4))
 
-  vue3-ace-editor@2.2.4(ace-builds@1.36.2)(vue@3.5.13(typescript@5.5.4)):
+  vue3-ace-editor@2.2.4(ace-builds@1.43.5)(vue@3.5.13(typescript@5.5.4)):
     dependencies:
-      ace-builds: 1.36.2
+      ace-builds: 1.43.5
       resize-observer-polyfill: 1.5.1
       vue: 3.5.13(typescript@5.5.4)