diff --git a/dashboard/src/components/app/Backups.vue b/dashboard/src/components/app/Backups.vue
new file mode 100644
index 000000000..cac7413c6
--- /dev/null
+++ b/dashboard/src/components/app/Backups.vue
@@ -0,0 +1,128 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, watch, onMounted } from 'vue';
+import { Icon, Button, Switch, TableView, ButtonGroup } from 'pankow';
+import { prettyLongDate } from 'pankow/utils';
+import AppsModel from '../../models/AppsModel.js';
+
+const appsModel = AppsModel.create();
+
+const props = defineProps([ 'app' ]);
+
+const columns = ref({
+  preserveSecs: {
+    label: '',
+    icon: 'fa-solid fa-archive',
+    width: '40px',
+    sort: true
+  },
+  packageVersion: {
+    label: t('app.backups.backups.packageVersion'),
+    sort: true,
+  },
+  creationTime: {
+    label: t('app.backups.backups.time'),
+    sort: true,
+  },
+  actions: {
+    label: '',
+    sort: false,
+  }
+});
+
+const busy = ref(true);
+const errorMessage = ref('');
+const createBusy = ref(false);
+const importBusy = ref(false);
+const autoBackupsEnabled = ref(false);
+const backups = ref([]);
+
+watch(autoBackupsEnabled, async (newValue) => {
+  const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: newValue });
+  if (error) return console.error(error);
+});
+
+async function onCreate() {
+  createBusy.value = true;
+  const [error] = await appsModel.backup(props.app.id);
+  if (error) return console.error(error);
+
+  setTimeout(() => createBusy.value = false, 2000);
+}
+
+function getDownloadLink(backup) {
+  const accessToken = localStorage.token;
+  const origin = import.meta.env.VITE_API_ORIGIN || window.location.origin;
+
+  return `${origin}/api/v1/apps/${props.app.id}/backups/${backup.id}/download?access_token=${accessToken}`;
+}
+
+async function refresh() {
+  const [error, result] = await appsModel.backups(props.app.id);
+  if (error) return console.error(error);
+
+  backups.value = result;
+}
+
+onMounted(async () => {
+  await refresh();
+  busy.value = false;
+
+  autoBackupsEnabled.value = props.app.enableBackup;
+});
+
+</script>
+
+<template>
+  <div>
+    <label>{{ $t('app.backups.backups.title') }}</label>
+    <p>{{ $t('app.backups.backups.description') }}</p>
+
+    <br/>
+
+    <TableView :model="backups" :columns="columns" :busy="busy">
+      <template #preserveSecs="backup">
+        <Icon icon="fa-solid fa-archive" v-show="backup.preseveSecs === -1" />
+      </template>
+      <template #creationTime="backup">
+        {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
+      </template>
+      <template #actions="backup">
+        <div class="table-actions">
+          <ButtonGroup>
+            <Button secondary tool small icon="fa-solid fa-pencil-alt" v-if="app.accessLevel === 'admin'" v-tooltip="$t('backups.listing.tooltipEditBackup')" @click="onEdit(backup)"></Button>
+            <Button secondary tool small icon="fa-solid fa-download" v-if="backup.format === 'tgz' && app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadBackupTooltip')" :href="getDownloadLink(backup)"></Button>
+            <Button secondary tool small icon="fa-solid fa-file-alt" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadConfigTooltip')" @click="onDownloadConfig(backup)"></Button>
+            <Button secondary tool small icon="fa-solid fa-clone" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.cloneTooltip')" @click="onClone(backup)"></Button>
+            <Button secondary tool small icon="fa-solid fa-history" :disabled="app.taskId || app.runState === 'stopped'" v-tooltip="$t('app.backups.backups.restoreTooltip')" @click="onRestore(backup)"></Button>
+          </ButtonGroup>
+        </div>
+      </template>
+    </TableView>
+
+    <br/>
+
+    <p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>
+    <Button @click="onCreate()" :loading="createBusy" :disabled="createBusy || app.taskId || app.error || app.runState === 'stopped'" tooltip-enable="app.error || app.taskId || app.runState === 'stopped'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'Task active' : (app.runState === 'stopped' ? 'App is not running' : ''))">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+
+    <hr/>
+
+    <label>{{ $t('app.backups.import.title') }}</label>
+    <p>{{ $t('app.backups.import.description') }}</p>
+
+    <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
+
+    <hr/>
+
+    <label>{{ $t('app.backups.auto.title') }}</label>
+    <p v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></p>
+    <p class="text-success" v-if="autoBackupsEnabled">{{ $t('app.backups.auto.enabled') }}</p>
+    <p class="text-danger" v-else>{{ $t('app.backups.auto.disabled') }}</p>
+
+    <Switch v-model="autoBackupsEnabled" :label="$t(autoBackupsEnabled ? 'app.backups.auto.disableAction' : 'app.backups.auto.enableAction')"/>
+  </div>
+</template>
diff --git a/dashboard/src/models/AppsModel.js b/dashboard/src/models/AppsModel.js
index 2f58560cd..3e248bc67 100644
--- a/dashboard/src/models/AppsModel.js
+++ b/dashboard/src/models/AppsModel.js
@@ -301,6 +301,29 @@ function create() {
         return [e];
       }
 
+      if (result.status !== 202) return [result];
+      return [null];
+    },
+    async backups(id) {
+      // we fetch probably enough to avoid pagination
+      let result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/apps/${id}/backups`, { page: 1, per_page: 100, access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body.backups];
+    },
+    async backup(id) {
+      let result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/apps/${id}/backup`, {}, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
       if (result.status !== 202) return [result];
       return [null];
     },
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
index ecc8194d1..88ea4ff6c 100644
--- a/dashboard/src/views/AppConfigureView.vue
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -12,6 +12,7 @@ import Info from '../components/app/Info.vue';
 import Security from '../components/app/Security.vue';
 import Cron from '../components/app/Cron.vue';
 import Resources from '../components/app/Resources.vue';
+import Backups from '../components/app/Backups.vue';
 import Repair from '../components/app/Repair.vue';
 import Eventlog from '../components/app/Eventlog.vue';
 import Updates from '../components/app/Updates.vue';
@@ -200,7 +201,7 @@ onBeforeUnmount(() => {
           <div v-if="view === 'email'"></div>
           <Cron :app="app" v-if="view === 'cron'"/>
           <Updates :app="app" v-if="view === 'updates'"/>
-          <div v-if="view === 'backups'"></div>
+          <Backups :app="app" v-if="view === 'backups'"/>
           <Repair :app="app" v-if="view === 'repair'"/>
           <Eventlog :app="app" v-if="view === 'eventlog'"/>
           <Uninstall :app="app" v-if="view === 'uninstall'"/>