diff --git a/app/src/routes/system/filesystem/FileSystem.svelte b/app/src/routes/system/filesystem/FileSystem.svelte
index f17164d..32e51da 100644
--- a/app/src/routes/system/filesystem/FileSystem.svelte
+++ b/app/src/routes/system/filesystem/FileSystem.svelte
@@ -6,11 +6,8 @@
 	import { modals } from 'svelte-modals'
 	import NewFolderDialog from './NewFolderDialog.svelte'
 	import NewFileDialog from './NewFileDialog.svelte'
-	import { api } from '$lib/api'
-	import type { Response, FileEntry } from '$lib/platform_shared/api'
 
 	let currentPath = $state('/')
-	let fileTree = $state<FileEntry | null>(null)
 	let files = $state<Array<{ name: string; size: number }>>([])
 	let directories = $state<Array<{ name: string }>>([])
 	let loading = $state(false)
@@ -25,47 +22,17 @@
 	let downloadProgress = $state<TransferProgress | null>(null)
 	let uploadInputRef: HTMLInputElement
 
-	function getNodeAtPath(root: FileEntry, path: string): FileEntry | null {
-		if (path === '/') return root
-		const parts = path.split('/').filter(Boolean)
-		let current = root
-		for (const part of parts) {
-			const child = current.children?.find((c) => c.name === part)
-			if (!child) return null
-			current = child
-		}
-		return current
-	}
-
-	function updateFilesAndDirectories(node: FileEntry | null) {
-		if (!node || !node.children) {
-			files = []
-			directories = []
-			return
-		}
-		files = node.children
-			.filter((c) => !c.isDirectory)
-			.map((c) => ({ name: c.name, size: c.size }))
-		directories = node.children
-			.filter((c) => c.isDirectory)
-			.map((c) => ({ name: c.name }))
-	}
-
-	async function loadFileTree() {
+	async function loadDirectory(path: string = currentPath) {
 		loading = true
 		error = ''
 		try {
-			const result = await api.get<Response>('/api/files')
-			if (result.isOk()) {
-				const response = result.inner
-				if (response.fileList && response.fileList.entries.length > 0) {
-					fileTree = response.fileList.entries[0]
-					updateFilesAndDirectories(getNodeAtPath(fileTree, currentPath))
-				} else {
-					error = response.errorMessage || 'Failed to load file tree'
-				}
+			const result = await fileSystemClient.listDirectory(path)
+			if (result.success) {
+				files = result.files
+				directories = result.directories
+				currentPath = path
 			} else {
-				error = 'Failed to fetch file list'
+				error = result.error || 'Failed to load directory'
 			}
 		} catch (e) {
 			error = e instanceof Error ? e.message : 'Unknown error'
@@ -74,15 +41,6 @@
 		}
 	}
 
-	async function loadDirectory(path: string = currentPath) {
-		currentPath = path
-		if (fileTree) {
-			updateFilesAndDirectories(getNodeAtPath(fileTree, path))
-		} else {
-			await loadFileTree()
-		}
-	}
-
 	async function navigateTo(dirName: string) {
 		const newPath = currentPath === '/' ? `/${dirName}` : `${currentPath}/${dirName}`
 		await loadDirectory(newPath)
@@ -136,7 +94,7 @@
 
 			if (result.success) {
 				isEditing = false
-				await loadFileTree() // Refresh to update file sizes
+				await loadDirectory() // Refresh to update file sizes
 			} else {
 				error = result.error || 'Failed to save file'
 			}
@@ -167,7 +125,7 @@
 			)
 
 			if (result.success) {
-				await loadFileTree()
+				await loadDirectory()
 			} else {
 				error = result.error || 'Upload failed'
 			}
@@ -215,7 +173,7 @@
 					selectedFile = ''
 					fileContent = ''
 				}
-				await loadFileTree()
+				await loadDirectory()
 			} else {
 				error = result.error || 'Delete failed'
 			}
@@ -233,7 +191,7 @@
 		try {
 			const result = await fileSystemClient.createDirectory(path)
 			if (result.success) {
-				await loadFileTree()
+				await loadDirectory()
 			} else {
 				error = result.error || 'Failed to create directory'
 			}
@@ -254,7 +212,7 @@
 
 			const result = await fileSystemClient.uploadFile(path, data)
 			if (result.success) {
-				await loadFileTree()
+				await loadDirectory()
 				await loadFileContent(fileName)
 			} else {
 				error = result.error || 'Failed to create file'
@@ -284,9 +242,9 @@
 		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 	}
 
-	// Load initial file tree
+	// Load initial directory
 	$effect(() => {
-		loadFileTree()
+		loadDirectory('/')
 	})
 </script>