diff --git a/dashboard/src/components/AppArchive.vue b/dashboard/src/components/AppArchive.vue
new file mode 100644
index 000000000..a5529494a
--- /dev/null
+++ b/dashboard/src/components/AppArchive.vue
@@ -0,0 +1,308 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN || window.location.origin;
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, ButtonGroup, FormGroup, TextInput, Dropdown, TableView, InputDialog, Dialog } from 'pankow';
+import { prettyLongDate } from 'pankow/utils';
+import { SECRET_PLACEHOLDER } from '../constants.js';
+import Section from  '../components/Section.vue';
+import PortBindings from  '../components/PortBindings.vue';
+import ArchivesModel from '../models/ArchivesModel.js';
+import DomainsModel from '../models/DomainsModel.js';
+import { download } from '../utils.js';
+
+const props = defineProps({
+  config: Object
+});
+
+const archivesModel = ArchivesModel.create();
+const domainsModel = DomainsModel.create();
+
+const columns = {
+  icon: {}, // archived
+  location: { label: t('backups.archives.location'), sort: true },
+  info: { label: t('backups.archives.info'), sort: false },
+  creationTime: { label: t('main.table.date'), sort: true },
+  actions: {}
+};
+
+const busy = ref(true);
+const archives = ref([]);
+
+async function refreshArchives() {
+  const [error, result] = await archivesModel.list();
+  if (error) return console.error(error);
+
+  // ensure we use the full api oprigin
+  result.forEach(a => {
+    a.iconUrl = window.cloudronApiOrigin + a.iconUrl;
+  });
+
+  archives.value = result;
+}
+
+const inputDialog = useTemplateRef('inputDialog');
+async function onRemove(archive) {
+  const yes = await inputDialog.value.confirm({
+    // title: t('backups.deleteArchiveDialog.title',{ appTitle: archive.title, fqdn: archive.fqdn }),
+    message: t('backups.deleteArchiveDialog.description'),
+    modal: true,
+    confirmStyle: 'danger',
+    confirmLabel: t('backups.deleteArchive.deleteAction'),
+    rejectLabel: t('main.dialog.no')
+  });
+
+  if (!yes) return;
+
+  const [error] = await archivesModel.remvove(archive.id);
+  if (error) return console.error(error);
+
+  await refreshArchives();
+}
+
+const restoreDialog = useTemplateRef('restoreDialog');
+const restoreArchive = ref({});
+const restoreFqdn = ref('');
+const restoreManifest = ref({});
+const restoreLocation = ref('');
+const restoreDomain = ref('');
+const restoreNeedsOverwrite = ref(false);
+const restoreBusy = ref(false);
+const restoreError = ref({});
+const restoreTcpPorts = ref({});
+const restoreUdpPorts = ref({});
+const domains = ref([]);
+const restoreSecondaryDomains = ref([]);
+
+async function onRestore(archive) {
+  console.log(archive)
+  restoreBusy.value = false;
+  restoreError.value = {};
+
+  const [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  domains.value = result;
+
+  const app = archive.appConfig || {
+    subdomain: '',
+    domain: domains.value[0].domain,
+    secondaryDomains: [],
+    portBindings: {}
+  }; // pre-8.2 backups do not have appConfig
+
+  restoreLocation.value = app.subdomain;
+  const d = domains.value.find(function (d) { return app.domain === d.domain; });
+  console.log(d)
+  restoreDomain.value = d ? d.domain : domains.value[0].domain; // try to pre-select the app's domain
+  restoreSecondaryDomains.value = {};
+  restoreNeedsOverwrite.value = false;
+  restoreArchive.value = archive;
+  restoreFqdn.value =archive.appConfig?.fqdn || '-';
+  restoreManifest.value = archive.manifest;
+
+  const httpPorts = archive.manifest.httpPorts || {};
+  for (const env in httpPorts) {
+    restoreSecondaryDomains.value[env] = {
+      subdomain: httpPorts[env].defaultValue || '',
+      domain: restoreSecondaryDomains.value.domain
+    };
+  }
+
+  // now fill secondaryDomains with real values, if exists
+  if (archive.secondaryDomains) {
+    archive.secondaryDomains.forEach(function (sd) {
+      restoreSecondaryDomains.value[sd.environmentVariable] = {
+        subdomain: sd.subdomain,
+        domain: domains.value.find(function (d) { return sd.domain === d.domain; })
+      };
+    });
+  }
+
+  // Portbinding map only for information
+  restoreTcpPorts.value = archive.manifest.tcpPorts || {};
+  restoreUdpPorts.value = archive.manifest.udpPorts || {};
+
+  // set default ports for tcp
+  for (const env in restoreTcpPorts.value) {
+    if (archive.portBindings[env]) { // was enabled in the app
+      restoreTcpPorts.value[env] = app.portBindings[env].hostPort;
+    } else {
+      restoreTcpPorts.value[env] = restoreTcpPorts.value[env].defaultValue || 0;
+    }
+  }
+
+  // set default ports for udp
+  for (const env in restoreUdpPorts.value) {
+    if (archive.portBindings[env]) { // was enabled in the app
+      restoreUdpPorts.value[env] = app.portBindings[env].hostPort;
+    } else {
+      restoreUdpPorts.value[env] = restoreUdpPorts.value[env].defaultValue || 0;
+    }
+  }
+
+  restoreDialog.value.open();
+}
+
+async function onRestoreSubmit() {
+  restoreBusy.value = true;
+  restoreError.value = {};
+
+  const secondaryDomains = {};
+  for (const env in restoreSecondaryDomains.value) {
+    secondaryDomains[env] = {
+      subdomain: restoreSecondaryDomains.value[env].subdomain,
+      domain: restoreSecondaryDomains.value[env].domain.domain
+    };
+  }
+
+  // only use enabled ports
+  // const finalPorts = {};
+  // for (var env in $scope.archiveRestore.ports) {
+  //     if ($scope.archiveRestore.portsEnabled[env]) {
+  //         finalPorts[env] = $scope.archiveRestore.ports[env];
+  //     }
+  // }
+
+  const data = {
+    subdomain: restoreLocation.value,
+    domain: restoreDomain.value,
+    secondaryDomains: secondaryDomains,
+    // ports: finalPorts,
+    ports: {},
+    overwriteDns: restoreNeedsOverwrite.value,
+  };
+
+
+            //     Client.unarchiveApp($scope.archiveRestore.archive.id, data, function (error/*, newApp */) {
+            //         $scope.archiveRestore.busy = false;
+
+            //         if (error) {
+            //             var errorMessage = error.message.toLowerCase();
+            //             if (errorMessage.indexOf('port') !== -1) {
+            //                 $scope.archiveRestore.error.port = error.message;
+            //             } else if (error.message.indexOf('location') !== -1 || error.message.indexOf('subdomain') !== -1) {
+            //                 // TODO extract fqdn from error message, currently we just set it always to the main location
+            //                 $scope.archiveRestore.error.location = { type: 'internally_exists', fqdn: data.subdomain + '.' + data.domain, message: error.message };
+            //                 $('#cloneLocationInput').focus();
+            //             } else {
+            //                 Client.error(error);
+            //             }
+            //             return;
+            //         }
+
+
+  const [error] = await archivesModel.restore(restoreArchive.value.id, data);
+  if (error) {
+    if (error.type === 'externally_exists') {
+      restoreNeedsOverwrite.value = true;
+    } else {
+      console.error(error);
+    }
+    restoreBusy.value = false;
+    return;
+  }
+
+  restoreBusy.value = false;
+  restoreDialog.value.close();
+
+  window.location.href = '/#/apps';
+}
+
+async function onDownloadConfig(archive) {
+  // secrets and tokens already come with placeholder characters we remove them
+  const tmp = {
+    remotePath: archive.remotePath,
+    encrypted: !!props.config.password  // we add this just to help the import UI
+  };
+
+  Object.keys(props.config).forEach((k) => {
+    if (props.config[k] !== SECRET_PLACEHOLDER) tmp[k] = props.config[k];
+  });
+
+  const filename = `${archive.appConfig.fqdn}-archive-config-${(new Date(archive.creationTime)).toISOString().split('T')[0]}.json`;
+  download(filename, JSON.stringify(tmp, null, 4));
+}
+
+onMounted(async () => {
+  await refreshArchives();
+  busy.value = false;
+});
+
+</script>
+
+<template>
+  <InputDialog ref="inputDialog"/>
+  <Dialog ref="restoreDialog"
+    :title="$t('backups.restoreArchiveDialog.title')"
+     reject-style="secondary"
+    :reject-label="restoreBusy ? '' : $t('main.dialog.cancel')"
+    :confirm-label="$t('backups.restoreArchiveDialog.restoreAction', { dnsOverwrite: restoreNeedsOverwrite })"
+    :confirm-busy="restoreBusy"
+    :confirm-active="!restoreBusy"
+    @confirm="onRestoreSubmit()"
+  >
+    <p v-html="$t('backups.restoreArchiveDialog.description', { appId: restoreManifest.id, fqdn: restoreFqdn, creationTime: prettyLongDate(restoreArchive.creationTime) })"></p>
+
+    <!-- <div ng-show="archiveRestore.error.location.fqdn === archiveRestore.subdomain + '.' + archiveRestore.domain.domain"><small>{{ archiveRestore.error.location.message }}</small></div> -->
+
+    <form @submit.prevent="onRestoreSubmit()" autocomplete="off">
+      <fieldset>
+        <FormGroup>
+          <label for="locationInput">{{ $t('app.cloneDialog.location') }}</label>
+          <div style="display: flex;">
+            <TextInput id="locationInput" ref="locationInput" v-model="restoreLocation" style="flex-grow: 1;" />
+            <Dropdown v-model="restoreDomain" :options="domains" option-label="domain" option-key="domain" />
+          </div>
+        </FormGroup>
+
+        <FormGroup v-for="(port, key) in restoreSecondaryDomains" :key="key">
+          <label :for="'secondaryDomainInput' + key">{{ port.title }}</label>
+          <small>{{ port.description }}</small>
+          <div style="display: flex;">
+            <TextInput :id="'secondaryDomainInput' + key" v-model="port.value" :placeholder="$t('appstore.installDialog.locationPlaceholder')" style="flex-grow: 1;" />
+            <Dropdown v-model="port.domain" :options="domains" option-label="domain" option-key="domain" />
+          </div>
+        </FormGroup>
+
+       <!-- <p class="text-small text-warning" ng-show="archiveRestore.domain.provider === 'noop' || archiveRestore.domain.provider === 'manual'" ng-bind-html="'appstore.installDialog.manualWarning' | tr:{ location: ((archiveRestore.subdomain ? archiveRestore.subdomain + '.' : '') + archiveRestore.domain.domain) }"></p> -->
+        <!-- <div class="has-error text-center" ng-show="archiveRestore.error.port">{{ archiveRestore.error.port }}</div> -->
+        <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" :error="restoreError"/>
+      </fieldset>
+    </form>
+  </Dialog>
+
+  <Section :title="$t('backups.archives.title')">
+    <p v-html="$t('backups.archive.description')"></p>
+
+    <TableView :columns="columns" :model="archives" :busy="busy" @row-click="onInfo">
+      <template #icon="archive">
+        <img :src="archive.iconUrl || 'img/appicon_fallback.png'" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" height="24" width="24"/>
+      </template>
+
+      <!-- for pre-8.2 backups, appConfig can be null -->
+      <template #location="archive">{{ archive.appConfig ? archive.appConfig.fqdn : '-' }}</template>
+
+      <template #info="archive">
+        <span v-tooltip="`${archive.manifest.id}@${archive.manifest.version}`">{{ archive.manifest.title }}</span>
+      </template>
+
+      <template #creationTime="archive">{{ prettyLongDate(archive.creationTime) }}</template>
+
+      <template #actions="archive">
+        <div class="table-actions">
+          <ButtonGroup>
+            <Button tool secondary small icon="fa-solid fa-history" v-tooltip="'Restore from Archive'" @click.stop="onRestore(archive)"></Button>
+            <Button tool secondary small icon="fa-solid fa-file-alt" v-tooltip="$t('backups.listing.tooltipDownloadBackupConfig')" @click.stop="onDownloadConfig(archive)"></Button>
+          </ButtonGroup>
+          <Button tool danger small icon="fa-solid fa-trash-alt" v-tooltip="'Delete Archive'" @click.stop="onRemove(archive)"></Button>
+        </div>
+      </template>
+    </TableView>
+  </Section>
+</template>
diff --git a/dashboard/src/models/ArchivesModel.js b/dashboard/src/models/ArchivesModel.js
new file mode 100644
index 000000000..28bfa5166
--- /dev/null
+++ b/dashboard/src/models/ArchivesModel.js
@@ -0,0 +1,81 @@
+
+import { fetcher } from 'pankow';
+import DomainsModel from './DomainsModel.js';
+
+function create() {
+  const accessToken = localStorage.token;
+  const origin = import.meta.env.VITE_API_ORIGIN || window.location.origin;
+
+  const domainsModel = DomainsModel.create();
+
+  return {
+    async list() {
+      const page = 1;
+      const per_page = 1000;
+
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/archives`, { page, per_page, access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.archives];
+    },
+    async remove(id) {
+      let error, result;
+      try {
+        result = await fetcher.del(`${origin}/api/v1/archives/${id}`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 204) return [error || result];
+      return [null];
+    },
+    async restore(id, data) {
+      // preflight domain checks
+      if (!data.overwriteDns) {
+        const allDomains = [{ domain: data.domain, subdomain: data.subdomain }].concat(Object.keys(data.secondaryDomains).map(function (k) {
+          return {
+            domain: data.secondaryDomains[k].domain,
+            subdomain: data.secondaryDomains[k].subdomain
+          };
+        }));
+
+        for (const domain in allDomains) {
+          const [error, result] = await domainsModel.checkRecords(domain.domain, domain.subdomain);
+          if (error) return [error];
+
+          const fqdn = domain.subdomain + '.' + domain.domain;
+
+          if (result.error) {
+            if (result.error.reason === 'Access Denied') return [{ type: 'provider', fqdn, message: 'DNS credentials for ' + domain.domain + ' are invalid. Update it in Domains & Certs view' }];
+            return [{ type: 'provider', fqdn, message: result.error.message }];
+          }
+
+          if (result.needsOverwrite) {
+            // $scope.archiveRestore.needsOverwrite = true;
+            // $scope.archiveRestore.overwriteDns = true;
+            return [{ type: 'externally_exists', fqdn, message: 'DNS Record already exists. Confirm that the domain is not in use for services external to Cloudron' }];
+          }
+        }
+      }
+
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/archives/${id}/unarchive`, data, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 202) return [error || result];
+      return [null, result.body];
+    },
+  };
+}
+
+export default {
+  create,
+};
diff --git a/dashboard/src/models/DomainsModel.js b/dashboard/src/models/DomainsModel.js
index 5dc40dc74..f8227fa3c 100644
--- a/dashboard/src/models/DomainsModel.js
+++ b/dashboard/src/models/DomainsModel.js
@@ -98,6 +98,16 @@ function create() {
       if (error || result.status !== 204) return [error || result];
       return [null];
     },
+    async checkRecords(domain, subdomain) {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/domains/${domain}/dns_check`, { subdomain, access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+    },
   };
 }
 
diff --git a/dashboard/src/views/BackupsView.vue b/dashboard/src/views/BackupsView.vue
index 60425032c..2fada07db 100644
--- a/dashboard/src/views/BackupsView.vue
+++ b/dashboard/src/views/BackupsView.vue
@@ -6,6 +6,7 @@ import { Button } from 'pankow';
 import Section from  '../components/Section.vue';
 import BackupSchedule from  '../components/BackupSchedule.vue';
 import BackupList from  '../components/BackupList.vue';
+import AppArchive from  '../components/AppArchive.vue';
 import BackupsModel from '../models/BackupsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
 
@@ -119,5 +120,6 @@ onMounted(async () => {
 
     <BackupSchedule :profile="profile"/>
     <BackupList :config="config"/>
+    <AppArchive :config="config"/>
   </div>
 </template>
diff --git a/dashboard/src/views/VolumesView.vue b/dashboard/src/views/VolumesView.vue
index fa7196ff7..22132a82e 100644
--- a/dashboard/src/views/VolumesView.vue
+++ b/dashboard/src/views/VolumesView.vue
@@ -292,7 +292,7 @@ onMounted(async () =>{
               <Button tool secondary small icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
               <Button tool secondary small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
             </ButtonGroup>
-            <Button tool danger small icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
+            <Button tool danger small icon="fa-solid fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
           </div>
         </template>
       </TableView>