diff --git a/dashboard/src/components/FolderView.vue b/dashboard/src/components/FolderView.vue
index b13e483fb..1eb87d7e2 100644
--- a/dashboard/src/components/FolderView.vue
+++ b/dashboard/src/components/FolderView.vue
@@ -1,478 +1,480 @@
-<script>
+<script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, computed, useTemplateRef } from 'vue';
+import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { marked } from 'marked';
 import { fetcher, Dialog, DirectoryView, TopBar, Breadcrumb, BottomBar, Button, InputDialog, MainLayout, ButtonGroup, Notification, FileUploader, Spinner } from 'pankow';
 import { sanitize, sleep } from 'pankow/utils';
-import { API_ORIGIN, ISTATES } from '../constants.js';
+import { API_ORIGIN, BASE_URL, ISTATES } from '../constants.js';
 import PreviewPanel from '../components/PreviewPanel.vue';
 import { createDirectoryModel } from '../models/DirectoryModel.js';
 
-const BASE_URL = import.meta.env.BASE_URL || '/';
-
 const beforeUnloadListener = (event) => {
   event.preventDefault();
   return window.confirm('File operation still in progress. Really close?');
 };
 
-export default {
-  name: 'FolderView',
-  components: {
-    BottomBar,
-    Button,
-    ButtonGroup,
-    Dialog,
-    DirectoryView,
-    FileUploader,
-    InputDialog,
-    MainLayout,
-    Notification,
-    Breadcrumb,
-    PreviewPanel,
-    Spinner,
-    TopBar
-  },
-  data() {
-    return {
-      busy: true,
-      fallbackIcon: `${BASE_URL}mime-types/none.svg`,
-      cwd: '/',
-      busyRefresh: false,
-      busyRestart: false,
-      fatalError: false,
-      footerContent: '',
-      activeItem: null,
-      activeDirectoryItem: {},
-      items: [],
-      selectedItems: [],
-      accessToken: localStorage.token,
-      title: 'Cloudron',
-      appLink: '',
-      resourceType: '',
-      resourceId: '',
-      visible: true,
-      uploadRequest: null,
-      breadcrumbHomeItem: {
-        label: '/app/data/',
-        action: () => {
-          this.cwd = '/';
-        }
-      },
-      ownersModel: [],
-      // contextMenuModel will have activeItem attached if any command() is called
-      createMenuModel: [{
-        label: this.$t('filemanager.toolbar.newFile'),
-        icon: 'fa-solid fa-file-circle-plus',
-        action: this.onNewFile
-      }, {
-        label: this.$t('filemanager.toolbar.newFolder'),
-        icon: 'fa-solid fa-folder-plus',
-        action: this.onNewFolder
-      }],
-      uploadMenuModel: [{
-        label: this.$t('filemanager.toolbar.uploadFile'),
-        icon: 'fa-solid fa-file-arrow-up',
-        action: this.onUploadFile
-      }, {
-        label: this.$t('filemanager.toolbar.newFolder'),
-        icon: 'fa-regular fa-folder-open',
-        action: this.onUploadFolder
-      }]
-    };
-  },
-  computed: {
-    breadcrumbItems() {
-      const parts = this.cwd.split('/').filter((p) => !!p.trim())
-      const crumbs = [];
+const router = useRouter();
+const route = useRoute();
 
-      parts.forEach((p, i) => {
-        crumbs.push({
-          label: p,
-          action: () => {
-            this.cwd = '/' + parts.slice(0, i+1).join('/');
-          }
-        });
-      });
+let directoryModel;
+const accessToken = localStorage.token;
 
-      return crumbs;
-    }
-  },
-  watch: {
-    cwd(newCwd, oldCwd) {
-      if (this.resourceType && this.resourceId) this.$router.push(`/home/${this.resourceType}/${this.resourceId}${this.cwd}`);
-      this.loadCwd();
-    }
-  },
-  async mounted() {
-    this.busy = true;
-    const type = this.$route.params.type || 'app';
-    const resourceId = this.$route.params.resourceId;
-    const cwd = this.$route.params.cwd;
+const fatalErrorDialog = useTemplateRef('fatalErrorDialog');
+const inputDialog = useTemplateRef('inputDialog');
+const fileUploader = useTemplateRef('fileUploader');
+const pasteInProgressDialog = useTemplateRef('pasteInProgressDialog');
+const deleteInProgressDialog = useTemplateRef('deleteInProgressDialog');
+const extractInProgressDialog = useTemplateRef('extractInProgressDialog');
 
-    if (type === 'app') {
-      let error, result;
-      try {
-        result = await fetcher.get(`${API_ORIGIN}/api/v1/apps/${resourceId}`, { access_token: this.accessToken });
-      } catch (e) {
-        error = e;
-      }
+const busy = ref(true);
+const fallbackIcon = ref(`${BASE_URL}mime-types/none.svg`);
+const cwd = ref('/');
+const busyRefresh = ref(false);
+const busyRestart = ref(false);
+const fatalError = ref(false);
+const footerContent = ref('');
+const activeItem = ref(null);
+const activeDirectoryItem = ref({});
+const items = ref([]);
+const selectedItems = ref([]);
+const title = ref('Cloudron');
+const appLink = ref('');
+const resourceType = ref('');
+const resourceId = ref('');
+const uploadRequest = ref(null);
+const ownersModel = ref([]);
 
-      if (error || result.status !== 200) {
-        console.error(`Invalid resource ${type} ${resourceId}`, error || result.status);
-        return this.onFatalError(`Invalid resource ${type} ${resourceId}`);
-      }
+// contextMenuModel will have activeItem attached if any command() is called
+const createMenuModel = [{
+  icon: 'fa-solid fa-file-circle-plus',
+  label: t('filemanager.toolbar.newFile'),
+  action: onNewFile,
+}, {
+  icon: 'fa-solid fa-folder-plus',
+  label: t('filemanager.toolbar.newFolder'),
+  action: onNewFolder,
+}];
 
-      this.appLink = `https://${result.body.fqdn}`;
-      this.title = `${result.body.label || result.body.fqdn} (${result.body.manifest.title})`;
-    } else if (type === 'volume') {
-      let error, result;
-      try {
-        result = await fetcher.get(`${API_ORIGIN}/api/v1/volumes/${resourceId}`, { access_token: this.accessToken });
-      } catch (e) {
-        error = e;
-      }
+const uploadMenuModel = [{
+  icon: 'fa-solid fa-file-arrow-up',
+  label: t('filemanager.toolbar.uploadFile'),
+  action: onUploadFile,
+}, {
+  icon: 'fa-regular fa-folder-open',
+  label: t('filemanager.toolbar.newFolder'),
+  action: onUploadFolder,
+}];
 
-      if (error || result.status !== 200) {
-        console.error(`Invalid resource ${type} ${resourceId}`, error || result.status);
-        return this.onFatalError(`Invalid resource ${type} ${resourceId}`);
-      }
+const breadcrumbHomeItem = {
+  label: '/app/data/',
+  action: () => onActivateBreadcrumb('/'),
+};
 
-      this.title = result.body.name;
-    } else {
-      return this.onFatalError(`Unsupported type ${type}`);
-    }
+const breadcrumbItems = computed(() => {
+  if (!cwd.value) return [];
 
-    try {
-      const result = await fetcher.get(`${API_ORIGIN}/api/v1/dashboard/config`, { access_token: this.accessToken });
-      this.footerContent = marked.parse(result.body.footer);
-    } catch (e) {
-      console.error('Failed to fetch Cloudron config.', e);
-    }
+  const parts = cwd.value.split('/').filter((p) => !!p.trim());
+  const crumbs = [];
 
-    window.document.title = `File Manager - ${this.title}`;
-
-    this.cwd = sanitize('/' + (cwd ? cwd.join('/') : '/'));
-    this.resourceType = type;
-    this.resourceId = resourceId;
-
-    this.directoryModel = createDirectoryModel(API_ORIGIN, this.accessToken, type === 'volume' ? `volumes/${resourceId}` : `apps/${resourceId}`);
-    this.ownersModel = this.directoryModel.ownersModel;
-
-    this.loadCwd();
-
-    this.$watch(() => this.$route.params, (toParams, previousParams) => {
-      if (toParams.type !== 'app' && toParams.type !== 'volume') return this.onFatalError(`Unknown type ${toParams.type}`);
-
-      if ((toParams.type !== this.resourceType) || (toParams.resourceId !== this.resourceId)) {
-        this.resourceType = toParams.type;
-        this.resourceId = toParams.resourceId;
-
-        this.directoryModel = createDirectoryModel(API_ORIGIN, this.accessToken, toParams.type === 'volume' ? `volumes/${toParams.resourceId}` : `apps/${toParams.resourceId}`);
-      }
-
-      this.cwd = toParams.cwd ? `/${toParams.cwd.join('/')}` : '/';
+  parts.forEach((p, i) => {
+    crumbs.push({
+      label: p,
+      action: () => onActivateBreadcrumb('/' + parts.slice(0, i+1).join('/')),
     });
-  },
-  methods: {
-    onFatalError(errorMessage) {
-      this.fatalError = errorMessage;
-      this.$refs.fatalErrorDialog.open();
-    },
-    onCancelUpload() {
-      if (!this.uploadRequest || !this.uploadRequest.xhr) return;
-      this.uploadRequest.xhr.abort();
-    },
-    // generic dialog focus handler
-    onDialogShow(focusElementId) {
-      setTimeout(() => document.getElementById(focusElementId).focus(), 0);
-    },
-    async onNewFile() {
-      const newFileName = await this.$refs.inputDialog.prompt({
-        message: this.$t('filemanager.newFileDialog.title'),
-        value: '',
-        confirmStyle: 'success',
-        confirmLabel: this.$t('filemanager.newFileDialog.create'),
-        rejectLabel: this.$t('main.dialog.cancel'),
-        modal: false
+  });
+
+  return crumbs;
+});
+
+// watch(() => {
+//   if (resourceType.value && resourceId.value) router.push(`/home/${resourceType.value}/${resourceId.value}${cwd.value}`);
+//   loadCwd();
+// });
+
+function onFatalError(errorMessage) {
+  fatalError.value = errorMessage;
+  fatalErrorDialog.value.open();
+}
+
+function onCancelUpload() {
+  if (!uploadRequest.value || !uploadRequest.value.xhr) return;
+  uploadRequest.value.xhr.abort();
+}
+
+async function onNewFile() {
+  const newFileName = await inputDialog.value.prompt({
+    message: t('filemanager.newFileDialog.title'),
+    value: '',
+    confirmStyle: 'success',
+    confirmLabel: t('filemanager.newFileDialog.create'),
+    rejectLabel: t('main.dialog.cancel'),
+    modal: false
+  });
+
+  if (!newFileName) return;
+
+  await directoryModel.newFile(directoryModel.buildFilePath(cwd.value, newFileName));
+  await loadCwd();
+}
+
+async function onNewFolder() {
+  const newFolderName = await inputDialog.value.prompt({
+    message: t('filemanager.newDirectoryDialog.title'),
+    value: '',
+    confirmStyle: 'success',
+    confirmLabel: t('filemanager.newFileDialog.create'),
+    rejectLabel: t('main.dialog.cancel'),
+    modal: false
+  });
+
+  if (!newFolderName) return;
+
+  await directoryModel.newFolder(directoryModel.buildFilePath(cwd.value, newFolderName));
+  await loadCwd();
+}
+
+function onUploadFile() {
+  fileUploader.value.onUploadFile(cwd.value);
+}
+
+function onUploadFolder() {
+  fileUploader.value.onUploadFolder(cwd.value);
+}
+
+async function onUploadFinished() {
+  await loadCwd();
+}
+
+function onSelectionChanged(items) {
+  activeItem.value = items[0] || null;
+  selectedItems.value = items;
+}
+
+function onActivateBreadcrumb(path) {
+  router.push(`/home/${resourceType.value}/${resourceId.value}${sanitize(path)}`);
+}
+
+async function onRefresh() {
+  busyRefresh.value = true;
+  await loadCwd();
+  setTimeout(() => { busyRefresh.value = false; }, 500);
+}
+
+// either dataTransfer (external drop) or files (internal drag)
+async function onDrop(targetFolder, dataTransfer, files) {
+  const fullTargetFolder = sanitize(cwd.value + '/' + targetFolder);
+
+  // if dataTransfer is set, we have a file/folder drop from outside
+  if (dataTransfer) {
+    async function getFile(entry) {
+      return new Promise((resolve, reject) => {
+        entry.file(resolve, reject);
       });
+    }
 
-      if (!newFileName) return;
-
-      await this.directoryModel.newFile(this.directoryModel.buildFilePath(this.cwd, newFileName));
-      await this.loadCwd();
-    },
-    async onNewFolder() {
-      const newFolderName = await this.$refs.inputDialog.prompt({
-        message: this.$t('filemanager.newDirectoryDialog.title'),
-        value: '',
-        confirmStyle: 'success',
-        confirmLabel: this.$t('filemanager.newFileDialog.create'),
-        rejectLabel: this.$t('main.dialog.cancel'),
-        modal: false
+    async function readEntries(dirReader) {
+      return new Promise((resolve, reject) => {
+        dirReader.readEntries(resolve, reject);
       });
+    }
 
-      if (!newFolderName) return;
+    const fileList = [];
+    async function traverseFileTree(item) {
+      if (item.isFile) {
+        fileList.push(await getFile(item));
+      } else if (item.isDirectory) {
+        // Get folder contents
+        const dirReader = item.createReader();
+        const entries = await readEntries(dirReader);
 
-      await this.directoryModel.newFolder(this.directoryModel.buildFilePath(this.cwd, newFolderName));
-      await this.loadCwd();
-    },
-    onUploadFile() {
-      this.$refs.fileUploader.onUploadFile(this.cwd);
-    },
-    onUploadFolder() {
-      this.$refs.fileUploader.onUploadFolder(this.cwd);
-    },
-    onUploadFinished() {
-      this.loadCwd();
-    },
-    onAppChange(event) {
-      this.$router.push(`/home/${event.value.type}/${event.value.id}`);
-      this.cwd = '/';
-      this.loadResource(event.value);
-    },
-    onSelectionChanged(items) {
-      this.activeItem = items[0] || null;
-      this.selectedItems = items;
-    },
-    onActivateBreadcrumb(path) {
-      this.cwd = sanitize(path);
-    },
-    async onRefresh() {
-      this.busyRefresh = true;
-      await this.loadCwd();
-      setTimeout(() => { this.busyRefresh = false; }, 500);
-    },
-    // either dataTransfer (external drop) or files (internal drag)
-    async onDrop(targetFolder, dataTransfer, files) {
-      const fullTargetFolder = sanitize(this.cwd + '/' + targetFolder);
-
-      // if dataTransfer is set, we have a file/folder drop from outside
-      if (dataTransfer) {
-
-        async function getFile(entry) {
-          return new Promise((resolve, reject) => {
-            entry.file(resolve, reject);
-          });
+        for (const i in entries) {
+          await traverseFileTree(entries[i], item.name);
         }
-
-        async function readEntries(dirReader) {
-          return new Promise((resolve, reject) => {
-            dirReader.readEntries(resolve, reject);
-          });
-        }
-
-        const fileList = [];
-        async function traverseFileTree(item) {
-          if (item.isFile) {
-            fileList.push(await getFile(item));
-          } else if (item.isDirectory) {
-            // Get folder contents
-            const dirReader = item.createReader();
-            const entries = await readEntries(dirReader);
-
-            for (let i in entries) {
-              await traverseFileTree(entries[i], item.name);
-            }
-          } else {
-            console.log('Skipping uknown file type', item);
-          }
-        }
-
-        // collect all files to upload
-        for (const item of dataTransfer.items) {
-          const entry = item.webkitGetAsEntry();
-
-          if (entry.isFile) {
-            fileList.push(await getFile(entry));
-          } else if (entry.isDirectory) {
-            await traverseFileTree(entry, sanitize(`${this.cwd}/${targetFolder}`));
-          }
-        }
-
-        this.$refs.fileUploader.addFiles(fileList, sanitize(`${this.cwd}/${targetFolder}`));
       } else {
-        if (!files.length) return;
-
-        window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
-        this.$refs.pasteInProgressDialog.open();
-
-        // check ctrl for cut/copy
-        await this.directoryModel.paste(fullTargetFolder, 'cut', files);
-        await this.loadCwd();
-
-        window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
-        this.$refs.pasteInProgressDialog.close();
+        console.log('Skipping uknown file type', item);
       }
-    },
-    onItemActivated(item) {
-      if (!item) return;
-      if (item.mimeType === 'inode/symlink') return;
+    }
 
-      if (item.type === 'directory') this.cwd = sanitize(this.cwd + '/' + item.name);
-      else this.$router.push(`/viewer/${this.resourceType}/${this.resourceId}${sanitize(this.cwd + '/' + item.name)}`);
-    },
-    async deleteHandler(files) {
-      if (!files) return;
+    // collect all files to upload
+    for (const item of dataTransfer.items) {
+      const entry = item.webkitGetAsEntry();
 
-      const confirmed = await this.$refs.inputDialog.confirm({
-        message: this.$t('filemanager.removeDialog.reallyDelete'),
-        confirmStyle: 'danger',
-        confirmLabel: this.$t('main.dialog.yes'),
-        rejectLabel: this.$t('main.dialog.no'),
-        modal: false
-      });
-
-      if (!confirmed) return;
-
-      window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
-      this.$refs.deleteInProgressDialog.open();
-
-      for (let i in files) {
-        try {
-          await this.directoryModel.remove(this.directoryModel.buildFilePath(this.cwd, files[i].name));
-        } catch (e) {
-          console.error(`Failed to remove file ${files[i].name}:`, e);
-        }
+      if (entry.isFile) {
+        fileList.push(await getFile(entry));
+      } else if (entry.isDirectory) {
+        await traverseFileTree(entry, sanitize(`${cwd.value}/${targetFolder}`));
       }
+    }
 
-      await this.loadCwd();
+    fileUploader.value.addFiles(fileList, sanitize(`${cwd.value}/${targetFolder}`));
+  } else {
+    if (!files.length) return;
 
-      window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
-      this.$refs.deleteInProgressDialog.close();
-    },
-    async renameHandler(file, newName) {
-      if (file.name === newName) return;
+    window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
+    pasteInProgressDialog.value.open();
 
-      try {
-        await this.directoryModel.rename(this.directoryModel.buildFilePath(this.cwd, file.name), sanitize(this.cwd + '/' + newName));
-        await this.loadCwd();
-      } catch (e) {
-        if (e.status === 409) {
-          const confirmed = await this.$refs.inputDialog.confirm({
-            message: this.$t('filemanager.renameDialog.reallyOverwrite'),
-            confirmStyle: 'danger',
-            confirmLabel: this.$t('main.dialog.yes'),
-            rejectLabel: this.$t('main.dialog.no')
-          });
+    // check ctrl for cut/copy
+    await directoryModel.paste(fullTargetFolder, 'cut', files);
+    await loadCwd();
 
-          if (!confirmed) return;
+    window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
+    pasteInProgressDialog.value.close();
+  }
+}
 
-          await this.directoryModel.rename(this.directoryModel.buildFilePath(this.cwd, file.name), sanitize(this.cwd + '/' + newName), true /* overwrite */);
-          await this.loadCwd();
-        }
-        else console.error(`Failed to rename ${file} to ${newName}`, e);
-      }
-    },
-    async changeOwnerHandler(files, newOwnerUid) {
-      if (!files) return;
+function onItemActivated(item) {
+  if (!item) return;
+  if (item.mimeType === 'inode/symlink') return;
 
-      for (let i in files) {
-        await this.directoryModel.chown(this.directoryModel.buildFilePath(this.cwd, files[i].name), newOwnerUid);
-      }
+  if (item.type === 'directory') router.push(`/home/${resourceType.value}/${resourceId.value}${sanitize(cwd.value + '/' + item.name)}`);
+  else router.push(`/viewer/${resourceType.value}/${resourceId.value}${sanitize(cwd.value + '/' + item.name)}`);
+}
 
-      await this.loadCwd();
-    },
-    async pasteHandler(action, files, target) {
-      if (!files || !files.length) return;
+async function deleteHandler(files) {
+  if (!files) return;
 
-      const targetPath = (target && target.isDirectory) ? sanitize(this.cwd + '/' + target.fileName) : this.cwd;
+  const confirmed = await inputDialog.value.confirm({
+    message: t('filemanager.removeDialog.reallyDelete'),
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.yes'),
+    rejectLabel: t('main.dialog.no'),
+    modal: false
+  });
 
-      window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
-      this.$refs.pasteInProgressDialog.open();
+  if (!confirmed) return;
 
-      try {
-        await this.directoryModel.paste(targetPath, action, files);
-      } catch (e) {
-        window.pankow.notify({ type: 'danger', text: e, persistent: true })
-      }
+  window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
+  deleteInProgressDialog.value.open();
 
-      this.clipboard = {};
-      await this.loadCwd();
-
-      window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
-      this.$refs.pasteInProgressDialog.close();
-    },
-    async downloadHandler(file) {
-      await this.directoryModel.download(this.directoryModel.buildFilePath(this.cwd, file.name));
-    },
-    async extractHandler(file) {
-      this.$refs.extractInProgressDialog.open();
-      await this.directoryModel.extract(this.directoryModel.buildFilePath(this.cwd, file.name));
-      await this.loadCwd();
-      this.$refs.extractInProgressDialog.close();
-    },
-    async uploadHandler(targetDir, file, progressHandler) {
-      this.uploadRequest = this.directoryModel.upload(targetDir, file, progressHandler);
-
-      try {
-        await this.uploadRequest;
-      } catch (e) {
-        console.log('Upload cancelled.', e);
-      }
-
-      this.uploadRequest = null;
-
-      await this.loadCwd();
-    },
-    async loadCwd() {
-      this.items = await this.directoryModel.listFiles(this.cwd);
-
-      const tmp = this.cwd.split('/').slice(1);
-      let name = '';
-      if (tmp.length >= 1 && tmp[tmp.length-1]) name = tmp[tmp.length-1];
-
-      this.activeDirectoryItem = {
-        id: name,
-        name: name,
-        type: 'directory',
-        mimeType: 'inode/directory',
-        icon: `${BASE_URL}mime-types/inode-directory.svg`
-      };
-
-      this.busy = false;
-    },
-    async onRestartApp() {
-      if (this.resourceType !== 'app') return;
-
-      const confirmed = await this.$refs.inputDialog.confirm({
-        message: this.$t('filemanager.toolbar.restartApp') + '?',
-        confirmStyle: 'danger',
-        confirmLabel: this.$t('main.dialog.yes'),
-        rejectLabel: this.$t('main.dialog.no')
-      });
-
-      if (!confirmed) return;
-
-      this.busyRestart = true;
-
-      let error, result;
-      try {
-        result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${this.resourceId}/restart`, null, { access_token: this.accessToken });
-      } catch (e) {
-        error = e;
-      }
-
-      if (error || result.status !== 202) {
-        console.error(`Failed to restart app ${this.resourceId}`, error || result.status);
-        return;
-      }
-
-      while(true) {
-        let result;
-        try {
-          result = await fetcher.get(`${API_ORIGIN}/api/v1/apps/${this.resourceId}`, { access_token: this.accessToken });
-        } catch (e) {
-          console.error('Failed to fetch app status.', e);
-        }
-
-        if (result && result.status === 200 && result.body.installationState === ISTATES.INSTALLED) break;
-
-        await sleep(2000);
-      }
-
-      this.busyRestart = false;
+  for (const i in files) {
+    try {
+      await directoryModel.remove(directoryModel.buildFilePath(cwd.value, files[i].name));
+    } catch (e) {
+      console.error(`Failed to remove file ${files[i].name}:`, e);
     }
   }
-};
+
+  await loadCwd();
+
+  window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
+  deleteInProgressDialog.value.close();
+}
+
+async function renameHandler(file, newName) {
+  if (file.name === newName) return;
+
+  try {
+    await directoryModel.rename(directoryModel.buildFilePath(cwd.value, file.name), sanitize(cwd.value + '/' + newName));
+    await loadCwd();
+  } catch (e) {
+    if (e.status === 409) {
+      const confirmed = await inputDialog.value.confirm({
+        message: t('filemanager.renameDialog.reallyOverwrite'),
+        confirmStyle: 'danger',
+        confirmLabel: t('main.dialog.yes'),
+        rejectLabel: t('main.dialog.no')
+      });
+
+      if (!confirmed) return;
+
+      await directoryModel.rename(directoryModel.buildFilePath(cwd.value, file.name), sanitize(cwd.value + '/' + newName), true /* overwrite */);
+      await loadCwd();
+    }
+    else console.error(`Failed to rename ${file} to ${newName}`, e);
+  }
+}
+
+async function changeOwnerHandler(files, newOwnerUid) {
+  if (!files) return;
+
+  for (const i in files) {
+    await directoryModel.chown(directoryModel.buildFilePath(cwd.value, files[i].name), newOwnerUid);
+  }
+
+  await loadCwd();
+}
+
+async function pasteHandler(action, files, target) {
+  if (!files || !files.length) return;
+
+  const targetPath = (target && target.isDirectory) ? sanitize(cwd.value + '/' + target.fileName) : cwd.value;
+
+  window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
+  pasteInProgressDialog.value.open();
+
+  try {
+    await directoryModel.paste(targetPath, action, files);
+  } catch (e) {
+    window.pankow.notify({ type: 'danger', text: e, persistent: true });
+  }
+
+  await loadCwd();
+
+  window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
+  pasteInProgressDialog.value.close();
+}
+
+async function downloadHandler(file) {
+  await directoryModel.download(directoryModel.buildFilePath(cwd.value, file.name));
+}
+
+async function extractHandler(file) {
+  extractInProgressDialog.value.open();
+  await directoryModel.extract(directoryModel.buildFilePath(cwd.value, file.name));
+  await loadCwd();
+  extractInProgressDialog.value.close();
+}
+
+async function uploadHandler(targetDir, file, progressHandler) {
+  uploadRequest.value = directoryModel.upload(targetDir, file, progressHandler);
+
+  try {
+    await uploadRequest.value;
+  } catch (e) {
+    console.log('Upload cancelled.', e);
+  }
+
+  uploadRequest.value = null;
+
+  await loadCwd();
+}
+
+async function loadCwd() {
+  items.value = await directoryModel.listFiles(cwd.value);
+
+  const tmp = cwd.value.split('/').slice(1);
+  let name = '';
+  if (tmp.length >= 1 && tmp[tmp.length-1]) name = tmp[tmp.length-1];
+
+  activeDirectoryItem.value = {
+    id: name,
+    name: name,
+    type: 'directory',
+    mimeType: 'inode/directory',
+    icon: `${BASE_URL}mime-types/inode-directory.svg`
+  };
+
+  busy.value = false;
+}
+
+async function onRestartApp() {
+  if (resourceType.value !== 'app') return;
+
+  const confirmed = await inputDialog.value.confirm({
+    message: t('filemanager.toolbar.restartApp') + '?',
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.yes'),
+    rejectLabel: t('main.dialog.no')
+  });
+
+  if (!confirmed) return;
+
+  busyRestart.value = true;
+
+  let error, result;
+  try {
+    result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${resourceId.value}/restart`, null, { access_token: accessToken });
+  } catch (e) {
+    error = e;
+  }
+
+  if (error || result.status !== 202) {
+    console.error(`Failed to restart app ${resourceId.value}`, error || result.status);
+    return;
+  }
+
+  while(true) {
+    let result;
+    try {
+      result = await fetcher.get(`${API_ORIGIN}/api/v1/apps/${resourceId.value}`, { access_token: accessToken });
+    } catch (e) {
+      console.error('Failed to fetch app status.', e);
+    }
+
+    if (result && result.status === 200 && result.body.installationState === ISTATES.INSTALLED) break;
+
+    await sleep(2000);
+  }
+
+  busyRestart.value = false;
+}
+
+onBeforeRouteUpdate(async (to) => {
+  if (to.params.type !== 'app' && to.params.type !== 'volume') return onFatalError(`Unknown type ${to.params.type}`);
+
+  if ((to.params.type !== resourceType.value) || (to.params.resourceId !== resourceId.value)) {
+    resourceType.value = to.params.type;
+    resourceId.value = to.params.resourceId;
+
+    directoryModel = createDirectoryModel(API_ORIGIN, accessToken, to.params.type === 'volume' ? `volumes/${to.params.resourceId}` : `apps/${to.params.resourceId}`);
+  }
+
+  cwd.value = to.params.cwd ? `/${to.params.cwd.join('/')}` : '/';
+
+  await loadCwd();
+});
+
+onMounted(async () => {
+  busy.value = true;
+
+  const type = route.params.type || 'app';
+  resourceId.value = route.params.resourceId;
+  cwd.value = sanitize('/' + (route.params.cwd ? route.params.cwd.join('/') : '/'));
+
+  if (type === 'app') {
+    let error, result;
+    try {
+      result = await fetcher.get(`${API_ORIGIN}/api/v1/apps/${resourceId.value}`, { access_token: accessToken });
+    } catch (e) {
+      error = e;
+    }
+
+    if (error || result.status !== 200) {
+      console.error(`Invalid resource ${type} ${resourceId.value}`, error || result.status);
+      return onFatalError(`Invalid resource ${type} ${resourceId.value}`);
+    }
+
+    appLink.value = `https://${result.body.fqdn}`;
+    title.value = `${result.body.label || result.body.fqdn} (${result.body.manifest.title})`;
+  } else if (type === 'volume') {
+    let error, result;
+    try {
+      result = await fetcher.get(`${API_ORIGIN}/api/v1/volumes/${resourceId.value}`, { access_token: accessToken });
+    } catch (e) {
+      error = e;
+    }
+
+    if (error || result.status !== 200) {
+      console.error(`Invalid resource ${type} ${resourceId.value}`, error || result.status);
+      return onFatalError(`Invalid resource ${type} ${resourceId.value}`);
+    }
+
+    title.value = result.body.name;
+  } else {
+    return onFatalError(`Unsupported type ${type}`);
+  }
+
+  try {
+    const result = await fetcher.get(`${API_ORIGIN}/api/v1/dashboard/config`, { access_token: accessToken });
+    footerContent.value = marked.parse(result.body.footer);
+  } catch (e) {
+    console.error('Failed to fetch Cloudron config.', e);
+  }
+
+  window.document.title = `File Manager - ${title.value}`;
+
+  resourceType.value = type;
+
+  directoryModel = createDirectoryModel(API_ORIGIN, accessToken, type === 'volume' ? `volumes/${resourceId.value}` : `apps/${resourceId.value}`);
+  ownersModel.value = directoryModel.ownersModel;
+
+  loadCwd();
+});
 
 </script>
 
@@ -508,7 +510,7 @@ export default {
     <template #header>
       <TopBar class="navbar">
         <template #left>
-          <Button icon="fa-solid fa-arrow-rotate-right" :loading="busyRefresh" @click="onRefresh()" secondary plain tool/>
+          <Button icon="fa-solid fa-arrow-rotate-right" :loading="busyRefresh" @click="onRefresh()" secondary plain tool style="margin-right: 10px"/>
           <Breadcrumb :home="breadcrumbHomeItem" :items="breadcrumbItems" :activate-handler="onActivateBreadcrumb"/>
         </template>
         <template #right>
@@ -517,10 +519,11 @@ export default {
             <Button icon="fa-solid fa-upload" :menu="uploadMenuModel">{{ $t('filemanager.toolbar.upload') }}</Button>
           </ButtonGroup>
 
+          <Button style="margin: 0 20px;" v-tooltip="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp" v-show="resourceType === 'app'"/>
+
           <ButtonGroup>
-            <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp" v-show="resourceType === 'app'"/>
-            <Button :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
-            <Button :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
+            <Button :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-terminal" v-tooltip="$t('terminal.title')" />
+            <Button :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-align-left" v-tooltip="$t('logs.title')" />
           </ButtonGroup>
         </template>
       </TopBar>
@@ -597,10 +600,6 @@ export default {
   flex-grow: 1;
 }
 
-.directory-view {
-  background-color: var(--pankow-color-background);
-}
-
 .no-highlight {
   color: var(--pankow-color-text);
 }
diff --git a/dashboard/src/components/LogsViewer.vue b/dashboard/src/components/LogsViewer.vue
index 5f97bdefc..85c000787 100644
--- a/dashboard/src/components/LogsViewer.vue
+++ b/dashboard/src/components/LogsViewer.vue
@@ -163,10 +163,11 @@ export default {
             <Button :href="downloadUrl" target="_blank" icon="fa-solid fa-download">{{ $t('logs.download') }}</Button>
           </ButtonGroup>
 
+          <Button style="margin: 0 20px;" v-tooltip="$t('filemanager.toolbar.restartApp')" v-show="showRestart" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
+
           <ButtonGroup>
-            <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" v-show="showRestart" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
-            <Button :href="'/terminal.html?id=' + id" target="_blank" v-show="showTerminal" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
-            <Button :href="'/filemanager.html#/home/app/' + id" target="_blank" v-show="showFilemanager" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
+            <Button :href="'/terminal.html?id=' + id" target="_blank" v-show="showTerminal" secondary tool icon="fa-solid fa-terminal" v-tooltip="$t('terminal.title')" />
+            <Button :href="'/filemanager.html#/home/app/' + id" target="_blank" v-show="showFilemanager" secondary tool icon="fa-solid fa-folder" v-tooltip="$t('filemanager.title')" />
           </ButtonGroup>
         </template>
       </TopBar>
diff --git a/dashboard/src/components/Terminal.vue b/dashboard/src/components/Terminal.vue
index 0f115f0fa..e371b3b0c 100644
--- a/dashboard/src/components/Terminal.vue
+++ b/dashboard/src/components/Terminal.vue
@@ -316,10 +316,11 @@ onMounted(async () => {
             <Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
           </ButtonGroup>
 
+          <Button style="margin: 0 20px;" v-tooltip="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
+
           <ButtonGroup>
-            <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
-            <Button v-if="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
-            <Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
+            <Button v-if="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" v-tooltip="$t('filemanager.title')" />
+            <Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" v-tooltip="$t('logs.title')" />
           </ButtonGroup>
         </template>
       </TopBar>
diff --git a/dashboard/src/constants.js b/dashboard/src/constants.js
index a19acc5b2..4285906d4 100644
--- a/dashboard/src/constants.js
+++ b/dashboard/src/constants.js
@@ -1,5 +1,6 @@
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN || '';
+const BASE_URL = import.meta.env.BASE_URL || '/';
 
 // app.accessRestriction:
 // null = ANY
@@ -311,6 +312,7 @@ const BACKUP_FORMATS = [
 // named exports
 export {
     API_ORIGIN,
+    BASE_URL,
     ACL_OPTIONS,
     APP_TYPES,
     ERROR,
@@ -342,6 +344,7 @@ export {
 // default export
 export default {
     API_ORIGIN,
+    BASE_URL,
     ACL_OPTIONS,
     APP_TYPES,
     ERROR,
diff --git a/dashboard/src/filemanager.js b/dashboard/src/filemanager.js
index 827995134..d32d98d5b 100644
--- a/dashboard/src/filemanager.js
+++ b/dashboard/src/filemanager.js
@@ -1,14 +1,11 @@
 import { createApp } from 'vue';
-
 import '@fontsource/noto-sans';
-
 import { createRouter, createWebHashHistory } from 'vue-router';
-
+import { tooltip } from 'pankow';
 import i18n from './i18n.js';
 import FileManager from './components/FileManager.vue';
 import FolderView from './components/FolderView.vue';
 import FileViewer from './components/FileViewer.vue';
-
 import './style.css';
 
 const routes = [
@@ -26,6 +23,8 @@ const router = createRouter({
 (async function init() {
   const app = createApp(FileManager);
 
+  app.directive('tooltip', tooltip);
+
   app.use(await i18n());
   app.use(router);
 
diff --git a/dashboard/src/logs.js b/dashboard/src/logs.js
index 26e818fd2..905307bf7 100644
--- a/dashboard/src/logs.js
+++ b/dashboard/src/logs.js
@@ -1,15 +1,15 @@
 import { createApp } from 'vue';
-
 import '@fontsource/noto-sans';
-
+import { tooltip } from 'pankow';
 import i18n from './i18n.js';
 import LogsViewer from './components/LogsViewer.vue';
-
 import './style.css';
 
 (async function init() {
   const app = createApp(LogsViewer);
 
+  app.directive('tooltip', tooltip);
+
   app.use(await i18n());
 
   app.mount('#app');
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index d20c60159..d4cbf71f6 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -109,6 +109,11 @@ hr {
   opacity: 0;
 }
 
+a.pankow-breadcrumb-item {
+  color: var(--pankow-text-color);
+  text-decoration: none;
+}
+
 .pankow-checkbox {
   margin: 8px 0;
 }
diff --git a/dashboard/src/terminal.js b/dashboard/src/terminal.js
index c996fe57a..41fd94ac3 100644
--- a/dashboard/src/terminal.js
+++ b/dashboard/src/terminal.js
@@ -1,15 +1,15 @@
 import { createApp } from 'vue';
-
 import '@fontsource/noto-sans';
-
+import { tooltip } from 'pankow';
 import i18n from './i18n.js';
 import Terminal from './components/Terminal.vue';
-
 import './style.css';
 
 (async function init() {
   const app = createApp(Terminal);
 
+  app.directive('tooltip', tooltip);
+
   app.use(await i18n());
 
   app.mount('#app');