diff --git a/packages/web-app-backups/l10n/.tx/config b/packages/web-app-backups/l10n/.tx/config
new file mode 100644
index 00000000000..216f05a61e3
--- /dev/null
+++ b/packages/web-app-backups/l10n/.tx/config
@@ -0,0 +1,10 @@
+[main]
+host = https://www.transifex.com
+
+[owncloud-web.text-editor]
+file_filter = locale/<lang>/LC_MESSAGES/app.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO
+
diff --git a/packages/web-app-backups/l10n/translations.json b/packages/web-app-backups/l10n/translations.json
new file mode 100644
index 00000000000..55d7afd216b
--- /dev/null
+++ b/packages/web-app-backups/l10n/translations.json
@@ -0,0 +1 @@
+{"cs":{"Save":"Uložit"},"de":{"An error occurred":"Ein Fehler ist aufgetreten","Don't Save":"Verwerfen","Error when contacting the server":"Fehler beim Kontaktieren des Servers","extensionItem":"Erweiterungselement","JavaScript file":"JavaScript-Datei","JSON file":"JSON-Datei","Loading editor content":"Lade Editor Inhalt","Markdown file":"Markdown-Datei","msg":"Nachricht","PHP file":"PHP-Datei","Plain text file":"Text-Datei","Python file":"Python-Datei","Save":"Speichern","Text Editor":"Texteditor","This file was updated outside this window. Please refresh the page (all changes will be lost).":"Die Datei wurde außerhalb des Fensters aktualisiert. Bitte die Seite neu laden (alle Änderungen gehen verloren).","Unsaved changes":"Ungespeicherte Änderungen","XML file":"XML-Datei","YAML file":"YAML-Datei","You're not authorized to save this file":"Keine ausreichenden Berechtigungen für das Speichern der Datei ","Your changes were not saved. Do you want to save them?":"Ungesicherte Änderungen. Möchtest Du sie speichern? "},"es":{"Loading editor content":"Cargando el editor de contenido","msg":"msg","Save":"Guardar"},"fr":{"An error occurred":"Une erreur est survenue","Don't Save":"Ne pas enregistrer","Error when contacting the server":"Erreur de communication avec le serveur","JavaScript file":"Fichier JavaScript","JSON file":"Fichier JSON","Loading editor content":"Chargement du contenu de l'éditeur","Markdown file":"Fichier Markdown","msg":"msg","PHP file":"Fichier PHP","Plain text file":"Fichier texte brut","Python file":"Fichier Python","Save":"Sauvegarder","Text Editor":"Éditeur de texte","This file was updated outside this window. Please refresh the page (all changes will be lost).":"Ce fichier a été modifié en dehors de cette fenêtre. Veuillez rafraîchir la page (tous les changements seront perdus).","Unsaved changes":"Modifications non enregistrées","XML file":"Fichier XML","YAML file":"Fichier YAML","You're not authorized to save this file":"Vous n'êtes pas autorisé à enregistrer ce fichier","Your changes were not saved. Do you want to save them?":"Les modifications n'ont pas été enregistrées, souhaitez-vous les enregistrer ?"},"gl":{"msg":"msx","Save":"Gardar"},"it":{}}
\ No newline at end of file
diff --git a/packages/web-app-backups/package.json b/packages/web-app-backups/package.json
new file mode 100644
index 00000000000..d5f4a1bdc78
--- /dev/null
+++ b/packages/web-app-backups/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "backups",
+  "version": "0.0.0",
+  "description": "CERNBox backups management",
+  "license": "AGPL-3.0",
+  "peerDependencies": {
+    "axios": "^0.27.2",
+    "fuse.js": "^6.5.3",
+    "lodash-es": "4.17.21",
+    "uuid": "^9.0.0",
+    "vue-concurrency": "4.0.0",
+    "vuex": "4.1.0",
+    "web-pkg": "npm:@ownclouders/web-pkg",
+    "web-client": "npm:@ownclouders/web-client",
+    "web-app-files": "0.0.0"
+  }
+}
+
+
diff --git a/packages/web-app-backups/src/components/BackupsSection.vue b/packages/web-app-backups/src/components/BackupsSection.vue
new file mode 100644
index 00000000000..717d918a356
--- /dev/null
+++ b/packages/web-app-backups/src/components/BackupsSection.vue
@@ -0,0 +1,696 @@
+<template>
+  <div>
+    <h2 class="oc-px-m oc-py-s">
+      {{ backupsTitle }}
+    </h2>
+    <app-bar
+      v-if="$route.name !== 'backups-restore-jobs'"
+      :breadcrumbs="breadcrumbs"
+      :has-sidebar-toggle="false"
+    >
+    </app-bar>
+    <no-content-message
+      v-if="!areResourcesLoading && !items.length"
+      class="files-empty oc-flex-stretch"
+      icon="group"
+    >
+      <template #message>
+        <span>{{ emptyMessage }}</span>
+      </template>
+    </no-content-message>
+    <app-loading-spinner v-if="areResourcesLoading" />
+    <resource-table
+      v-else
+      v-model="selectedResourcesIds"
+      class="files-table"
+      :fields-displayed="displayedFields"
+      sidebar-closed
+      :resources="items"
+      :are-resources-clickable="$route.name !== 'backups-restore-jobs'"
+      :target-route-callback="resourceTargetLocation"
+      :header-position="fileListHeaderY"
+      :has-actions="$route.name !== 'backups-restore-jobs'"
+      @row-mounted="rowMounted"
+    >
+      <template #status="{ resource }">
+        <div
+          v-if="$route.name !== 'backups-restore-jobs' && !topLevelRoute"
+          :key="resource.getDomSelector() + restoreRunning(resource)"
+          class="oc-text-nowrap oc-flex oc-flex-middle oc-flex-right"
+        >
+          <p v-if="restoreRunning(resource)" class="oc-flex oc-flex-middle">
+            <app-loading-spinner size="xsmall"></app-loading-spinner>
+            <span v-translate class="oc-pl-s">Restoring</span>
+          </p>
+          <oc-button
+            v-else
+            size="small"
+            class="file-row-share-decline oc-ml-s"
+            @click.stop="startRestore(resource)"
+          >
+            <oc-icon size="small" name="arrow-go-back" />
+            <span v-translate>Restore</span>
+          </oc-button>
+        </div>
+        <div
+          v-else-if="$route.name === 'backups-restore-jobs'"
+          :key="resource.getDomSelector()"
+          class="oc-text-nowrap oc-flex oc-flex-middle oc-flex-right"
+        >
+          <p v-if="resource.status === 1" class="oc-flex oc-flex-middle">
+            <span v-translate class="oc-p-xs">Restore pending</span>
+          </p>
+          <p v-else-if="resource.status === 2" class="oc-flex oc-flex-middle">
+            <app-loading-spinner size="xsmall"></app-loading-spinner>
+            <span v-translate class="oc-p-xs">Restoring</span>
+          </p>
+          <div v-else-if="resource.status === 3">
+            <p class="oc-flex oc-flex-middle restore-successfull oc-p-xs">
+              <oc-button
+                id="files-shared-with-me-show-all"
+                appearance="raw"
+                gap-size="xsmall"
+                size="small"
+                @click="seeRestore(resource)"
+              >
+                Restore available <oc-icon name="link" color="white" />
+              </oc-button>
+            </p>
+          </div>
+
+          <p v-else-if="resource.status === 4" class="oc-flex oc-flex-middle restore-failed">
+            <oc-button
+              id="files-shared-with-me-show-all"
+              appearance="raw"
+              gap-size="xsmall"
+              size="small"
+              ><span v-translate class="oc-p-xs restore-failed">Restore failed</span>
+            </oc-button>
+          </p>
+        </div>
+      </template>
+    </resource-table>
+  </div>
+</template>
+
+<script lang="ts">
+import ResourceTable from 'web-app-files/src/components/FilesList/ResourceTable.vue'
+import { computed, defineComponent } from 'vue'
+import debounce from 'lodash-es/debounce'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { mapActions, mapMutations, mapGetters } from 'vuex'
+import { useStore } from 'web-pkg/src/composables'
+
+import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
+import { useResourcesViewDefaults } from '../../../web-app-files/src/composables'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
+import { useTask } from 'vue-concurrency'
+import { extractDomSelector } from 'web-client/src/helpers/resource'
+import { basename } from 'path'
+import { Resource } from 'web-client'
+import { buildWebDavFilesPath } from 'web-app-files/src/helpers/resources'
+import { buildResource } from 'web-client/src/helpers'
+import { DavProperties } from 'web-client/src/webdav/constants'
+import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
+import { breadcrumbsFromPath, concatBreadcrumbs } from 'web-app-files/src/helpers/breadcrumbs'
+import { createLocationSpaces } from 'web-app-files/src/router'
+import { CreateTargetRouteOptions } from 'web-app-files/src/helpers/folderLink'
+import { useClientService } from 'web-pkg/src/composables'
+
+const visibilityObserver = new VisibilityObserver()
+
+export default defineComponent({
+  components: {
+    ResourceTable,
+    NoContentMessage,
+    AppLoadingSpinner,
+    AppBar
+  },
+  props: {
+    emptyMessage: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  setup() {
+    const store = useStore()
+    const accessToken = store.getters['runtime/auth/accessToken']
+    const { owncloudSdk } = useClientService()
+
+    const { selectedResourcesIds } = useResourcesViewDefaults<Resource, any, any[]>()
+
+    const fetchResources = async (client, path, properties, signal = null) => {
+      const options = signal ? { signal } : {}
+      try {
+        return await client.files.list(path, 1, properties, options)
+      } catch (error) {
+        if (error.name === 'CanceledError') {
+          throw error
+        }
+        console.error(error)
+      }
+    }
+
+    /// //// My Backups
+    const loadMyBackupsTask = useTask(function* (signal, ref) {
+      store.commit('Files/CLEAR_CURRENT_FILES_LIST')
+
+      const webDavFilesPath = ref.$route.params.item
+        ? buildWebDavFilesPath(`${store.getters.user.id}`, ref.$route.params.item.join('/'))
+        : buildWebDavFilesPath(
+            `${store.getters.user.id}/cback`,
+            `/eos/user/${store.getters.user.id[0]}/${store.getters.user.id}`
+          )
+      const resourcesPromise = fetchResources(
+        owncloudSdk,
+        webDavFilesPath,
+        DavProperties.Default,
+        signal
+      )
+
+      const getResourcesAndCurrent = async (resourcePromise) => {
+        let resources = await resourcePromise
+        resources = resources.map(buildResource)
+        resources.shift()
+        return resources
+      }
+
+      const resources = yield getResourcesAndCurrent(resourcesPromise)
+
+      //local test
+      // const resources = [
+      //   {
+      //     id: 'cback!/eos/user/r/ragozina/2022-06-27T21:32:18+02:00',
+      //     fileId: 'cback!/eos/user/r/ragozina/2022-06-27T21:32:18+02:00',
+      //     storageId: 'cback',
+      //     name: '2022-06-27T21:32:18+02:00',
+      //     extension: '',
+      //     path: '/cback/eos/user/r/ragozina/2022-06-27T21:32:18+02:00',
+      //     webDavPath: '/files/ragozina/cback/eos/user/r/ragozina/2022-06-27T21:32:18+02:00',
+      //     type: 'folder',
+      //     isFolder: true,
+      //     mdate: 'Mon, 27 Jun 2022 19:32:18 GMT',
+      //     size: '104444000',
+      //     indicators: [],
+      //     permissions: '',
+      //     starred: false,
+      //     shareTypes: [],
+      //     ownerId: 'ragozina',
+      //     ownerDisplayName: 'Elizaveta Ragozina',
+      //     canBeDeleted: () => false,
+      //     canCreate: () => false,
+      //     canDeny: () => false,
+      //     canDownload: () => false,
+      //     canRename: () => false,
+      //     canShare: () => false,
+      //     canUpload: () => false,
+      //     isReceivedShare: () => false,
+      //     status: true,
+      //     getDomSelector: () =>
+      //       extractDomSelector('cback!/eos/user/r/ragozina/2022-06-27T21:32:18+02:00')
+      //   }
+      // ]
+
+      resources.forEach((r) => {
+        r.status = true
+        r.getDomSelector = () => extractDomSelector(r.id)
+      })
+
+      store.commit('Files/LOAD_FILES', {
+        currentFolder: null,
+        files: resources
+      })
+    })
+
+    /// /// Projects
+    const loadProjectsBackupsTask = useTask(function* (signal, ref) {
+      store.commit('Files/CLEAR_CURRENT_FILES_LIST')
+      let resources
+
+      if (!ref.$route.params?.item) {
+        const headers = new Headers()
+        headers.append('Authorization', 'Bearer ' + store.getters['runtime/auth/accessToken'])
+        headers.append('X-Requested-With', 'XMLHttpRequest')
+        const response = yield fetch('cback/backups', {
+          method: 'GET',
+          headers
+        })
+        if (!response.ok) {
+          const message = `An error has occured: ${response.status}`
+          throw new Error(message)
+        }
+        const data = yield response.json()
+        data.shift()
+
+        // local test
+        // const data = [
+        //   '/eos/user/r/ragozina',
+        //   '/eos/project/c/cernbox',
+        //   '/eos/project/f/fdo',
+        //   '/eos/project/a/awesomeproject8',
+        //   '/eos/project/e/eos',
+        //   '/eos/project/n/noafs',
+        //   '/eos/project/t/test',
+        //   '/eos/project/s/storage-ci',
+        //   '/eos/project/a/awesomeproject',
+        //   '/eos/project/c/cboxmacwin',
+        //   '/eos/project/c/cernbox-staging-web'
+        // ]
+
+        const recievedResources = []
+
+        try {
+          if (data?.length) {
+            data.forEach((r, i) => {
+              recievedResources.push({
+                id: i + r,
+                fileId: i + r,
+                storageId: 'cback',
+                name: basename(r),
+                extension: '',
+                path: r,
+                webDavPath: r,
+                type: 'folder',
+                isFolder: true,
+                indicators: [],
+                permissions: '',
+                starred: false,
+                shareTypes: [],
+                canBeDeleted: () => false,
+                canCreate: () => false,
+                canDeny: () => false,
+                canDownload: () => false,
+                canRename: () => false,
+                canShare: () => false,
+                canUpload: () => false,
+                isReceivedShare: () => false,
+                status: true
+              })
+            })
+
+            resources = recievedResources
+            resources.forEach((r) => (r.getDomSelector = () => extractDomSelector(r.id)))
+          }
+        } catch (error) {
+          console.error(error)
+          // expected output: ReferenceError: nonExistentFunction is not defined
+          // Note - error messages will vary depending on browser
+        }
+      } else {
+        let webDavFilesPath = buildWebDavFilesPath(
+          `${store.getters.user.id}/cback`,
+          ref.$route.params.item.join('/')
+        )
+
+        if (webDavFilesPath.includes('/cback/cback'))
+          webDavFilesPath = webDavFilesPath.replace('/cback/cback', '/cback')
+
+        const resourcesPromise = fetchResources(
+          owncloudSdk,
+          webDavFilesPath,
+          DavProperties.Default,
+          signal
+        )
+
+        const getResourcesAndCurrent = async (resourcePromise) => {
+          let resources = await resourcePromise
+          resources.shift()
+          resources = resources.map(buildResource)
+          return resources
+        }
+
+        resources = yield getResourcesAndCurrent(resourcesPromise)
+        resources.forEach((r) => {
+          r.status = true
+          r.getDomSelector = () => extractDomSelector(r.id)
+        })
+      }
+
+      store.commit('Files/LOAD_FILES', {
+        currentFolder: null,
+        files: resources
+      })
+    })
+
+    const getRestores = async () => {
+      const headers = new Headers()
+      headers.append('Authorization', 'Bearer ' + accessToken)
+      headers.append('X-Requested-With', 'XMLHttpRequest')
+      const response = await fetch('/cback/restores', {
+        method: 'GET',
+        headers
+      })
+      if (!response.ok) {
+        const message = `An error has occured: ${response.status}`
+        throw new Error(message)
+      }
+      const data = await response.json()
+      // const data = [
+      //   {
+      //     id: 23,
+      //     path: '/eos/user/g/gdelmont/ssd',
+      //     destination: '/cback/eos/user/g/gdelmont/__restored_11_23_2022__10_38_04__',
+      //     status: 3
+      //   },
+      //   {
+      //     id: 24,
+      //     path: '/eos/user/g/gdelmont/ssd',
+      //     destination: '/cback/eos/user/g/gdelmont/__restored_11_23_2022__10_38_04__',
+      //     status: 4
+      //   }
+      // ]
+      return data || []
+    }
+
+    const loadRestoresTask = useTask(function* (signal, ref) {
+      store.commit('Files/CLEAR_CURRENT_FILES_LIST')
+      let resources
+
+      const data = yield getRestores()
+
+      try {
+        const recievedResources = []
+        if (data?.length) {
+          data.forEach((r, i) => {
+            recievedResources.push({
+              id: r.id + r.path,
+              fileId: r.id + r.path,
+              storageId: 'cback',
+              name: basename(r.path),
+              extension: '',
+              path: r.path,
+              type: 'file',
+              isFolder: false,
+              indicators: [],
+              permissions: '',
+              starred: false,
+              shareTypes: [],
+              canBeDeleted: () => false,
+              canCreate: () => false,
+              canDeny: () => false,
+              canDownload: () => false,
+              canRename: () => false,
+              canShare: () => false,
+              canUpload: () => false,
+              isReceivedShare: () => false,
+              status: r.status,
+              destination: r.destination
+            })
+          })
+
+          resources = recievedResources
+          resources.forEach((r) => (r.getDomSelector = () => extractDomSelector(r.id)))
+          store.commit('Files/LOAD_FILES', {
+            currentFolder: null,
+            files: resources
+          })
+        }
+      } catch (error) {
+        console.error(error)
+        // expected output: ReferenceError: nonExistentFunction is not defined
+        // Note - error messages will vary depending on browser
+      }
+
+      // local test
+      // const data = [
+      //   {
+      //     id: 23,
+      //     path: '/eos/user/g/gdelmont/ssd',
+      //     destination: '/cback/eos/user/g/gdelmont/__restored_11_23_2022__10_38_04__'
+      //     status: 4
+      //   }
+      // ]
+
+      // const recievedResources = []
+
+      // if (data?.length) {
+      //   data.forEach((r, i) => {
+      //     recievedResources.push({
+      //       id: r.id + r.path,
+      //       fileId: r.id + r.path,
+      //       storageId: 'cback',
+      //       name: basename(r.path),
+      //       extension: '',
+      //       path: r.destination.path,
+      //       webDavPath: r.destination.webdav,
+      //       type: 'folder',
+      //       isFolder: true,
+      //       indicators: [],
+      //       permissions: '',
+      //       starred: false,
+      //       shareTypes: [],
+      //       canBeDeleted: () => false,
+      //       canCreate: () => false,
+      //       canDeny: () => false,
+      //       canDownload: () => false,
+      //       canRename: () => false,
+      //       canShare: () => false,
+      //       canUpload: () => false,
+      //       isReceivedShare: () => false,
+      //       status: r.status
+      //     })
+      //   })
+      //   console.log('recievedResources', recievedResources)
+
+      //   resources = recievedResources
+      //   resources.forEach((r) => (r.getDomSelector = () => extractDomSelector(r.id)))
+      //   store.commit('Files/LOAD_FILES', {
+      //     currentFolder: null,
+      //     files: resources
+      //   })
+      // }
+    })
+
+    const areMyBackupsLoading = computed(() => {
+      return loadMyBackupsTask.isRunning || !loadMyBackupsTask.last
+    })
+
+    const areProjectBackupsLoading = computed(() => {
+      return loadProjectsBackupsTask.isRunning || !loadProjectsBackupsTask.last
+    })
+
+    const areRestoresLoading = computed(() => {
+      return loadRestoresTask.isRunning || !loadRestoresTask.last
+    })
+
+    const resourceTargetLocationMyBackups = ({
+      path,
+      fileId,
+      resource
+    }: CreateTargetRouteOptions) => {
+      return { name: 'backups-me', params: { item: path } }
+    }
+
+    const resourceTargetLocationProjectBackups = ({
+      path,
+      fileId,
+      resource
+    }: CreateTargetRouteOptions) => {
+      return { name: 'backups-projects', params: { item: path } }
+    }
+    const resourceTargetParamMapping = computed(() => undefined)
+    const resourceTargetQueryMapping = computed(() => undefined)
+
+    return {
+      loadMyBackupsTask,
+      loadProjectsBackupsTask,
+      loadRestoresTask,
+      getRestores,
+      areMyBackupsLoading,
+      areRestoresLoading,
+      areProjectBackupsLoading,
+      selectedResourcesIds,
+      resourceTargetLocationMyBackups,
+      resourceTargetLocationProjectBackups,
+      resourceTargetParamMapping,
+      resourceTargetQueryMapping
+    }
+  },
+
+  data: () => ({
+    runningRestores: [],
+    modal: true
+  }),
+  computed: {
+    ...mapGetters('Files', ['activeFiles']),
+    items() {
+      return this.activeFiles
+    },
+    displayedFields() {
+      return this.topLevelRoute && this.$route.name !== 'backups-restore-jobs'
+        ? ['name', 'mdate']
+        : ['name', 'mdate', 'status']
+    },
+    topLevelRoute() {
+      const itemParts = this.$route.params?.item
+      return !this.$route.params.item || (itemParts.length === 5 && itemParts[2] === 'project')
+    },
+    backupsTitle() {
+      return this.$route.name === 'backups-me'
+        ? 'My backups'
+        : this.$route.name === 'backups-projects'
+        ? 'Project backups'
+        : 'Restore jobs'
+    },
+    areResourcesLoading() {
+      if (this.$route.name === 'backups-me') {
+        return this.areMyBackupsLoading
+      }
+      if (this.$route.name === 'backups-projects') {
+        return this.areProjectBackupsLoading
+      }
+
+      if (this.$route.name === 'backups-restore-jobs') {
+        return this.areRestoresLoading
+      }
+      return false
+    },
+    breadcrumbs() {
+      let breadcrumbsFromPathValue =
+        this.$route.params?.item?.length > 0
+          ? breadcrumbsFromPath(this.$route, this.$route.params.item.join('/'))
+          : []
+      return concatBreadcrumbs(
+        { text: this.$route.name, to: { path: this.$route.path } },
+        ...breadcrumbsFromPathValue
+      )
+    },
+    resourceTargetLocation() {
+      return this.$route.name === 'backups-projects'
+        ? this.resourceTargetLocationProjectBackups
+        : this.$route.name === 'backups-me'
+        ? this.resourceTargetLocationMyBackups
+        : null
+    }
+  },
+  watch: {
+    $route: {
+      handler: async function (to, from) {
+        if (to?.name !== from?.name || to?.path !== from?.path) {
+          await this.loadResourcesTask()
+        }
+      },
+      immediate: true
+    }
+  },
+
+  beforeUnmount() {
+    visibilityObserver.disconnect()
+  },
+  async created() {
+    this.loadResourcesTask()
+
+    this.runningRestores = await this.getRestores()
+    this.restoresInterval = await setInterval(async () => {
+      this.runningRestores = await this.getRestores()
+    }, 60 * 1000)
+  },
+  destoyed() {
+    clearInterval(this.restoresInterval)
+  },
+  methods: {
+    ...mapActions('Files', ['loadIndicators', 'loadPreview', 'loadAvatars']),
+    ...mapMutations('Files', ['LOAD_FILES', 'CLEAR_CURRENT_FILES_LIST']),
+    ...mapActions(['showMessage']),
+
+    seeRestore(r) {
+      this.$router.push(
+        createLocationSpaces('files-spaces-generic', {
+          params: { driveAliasAndItem: r.destination }
+        })
+      )
+    },
+
+    async restore_backup_trigger({ resources }) {
+      const url = `/cback/restores?path=${encodeURIComponent(resources[0].path)}`
+      const accessToken = this.$store.getters['runtime/auth/accessToken']
+
+      const headers = new Headers()
+      headers.append('Authorization', 'Bearer ' + accessToken)
+      headers.append('X-Requested-With', 'XMLHttpRequest')
+      const response = await fetch(url, {
+        method: 'POST',
+        headers
+      })
+
+      if (response.status !== 200) {
+        this.showMessage({
+          title: this.$gettext('An error occurred'),
+          desc: this.$gettext('Backup restore could not be initiated'),
+          status: 'danger'
+        })
+        return false
+      } else {
+        this.showMessage({
+          title: this.$gettext('Success'),
+          desc: this.$gettext('Backup restore was initiated'),
+          status: 'success'
+        })
+        return true
+      }
+    },
+    rowMounted(resource, component) {
+      const debounced = debounce(({ unobserve }) => {
+        unobserve()
+      }, 250)
+      visibilityObserver.observe(component.$el, {
+        onEnter: debounced,
+        onExit: debounced.cancel
+      })
+    },
+    loadResourcesTask() {
+      if (this.$route.name === 'backups-me') {
+        this.loadProjectsBackupsTask.cancelAll()
+        this.loadRestoresTask.cancelAll()
+        this.loadMyBackupsTask.perform(this)
+      }
+      if (this.$route.name === 'backups-projects') {
+        this.loadMyBackupsTask.cancelAll()
+        this.loadRestoresTask.cancelAll()
+        this.loadProjectsBackupsTask.perform(this)
+      }
+
+      if (this.$route.name === 'backups-restore-jobs') {
+        this.loadMyBackupsTask.cancelAll()
+        this.loadProjectsBackupsTask.cancelAll()
+        this.loadRestoresTask.perform(this)
+      }
+    },
+    resStatus(r) {
+      return r.status
+    },
+    restoreRunning(resource) {
+      return this.runningRestores.some((e) => {
+        return e.path === resource.path
+      })
+    },
+    async startRestore(resource) {
+      const restoreStarted = await this.restore_backup_trigger({ resources: [resource] })
+      if (restoreStarted) {
+        this.runningRestores.push({ path: resource.path, status: 2 })
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.files-empty {
+  height: auto;
+}
+
+.restore-failed {
+  background-color: var(--oc-color-swatch-danger-default);
+  color: white !important;
+  cursor: default;
+}
+
+.restore-successfull {
+  background-color: var(--oc-color-swatch-success-default);
+  button {
+    color: white;
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/packages/web-app-backups/src/index.js b/packages/web-app-backups/src/index.js
new file mode 100644
index 00000000000..b9675baabc6
--- /dev/null
+++ b/packages/web-app-backups/src/index.js
@@ -0,0 +1,105 @@
+import translations from '../l10n/translations'
+import Backups from './views/Backups.vue'
+
+
+const appInfo = {
+  name: 'Backups',
+  id: 'backups',
+  icon: 'arrow-go-back',
+  isFileEditor: false
+}
+
+const routes = [
+  {
+    path: '/',
+    redirect: () => {
+      return { name: 'backups-restore-jobs' }
+    }
+  },
+  {
+    path: '/my-backups',
+    name: 'backups',
+    component: Backups,
+    meta: {
+      title: 'My backups'
+    },
+    children: [
+      {
+        path: ':item*',
+        name: 'backups-me',
+        component: Backups,
+        meta: {
+          patchCleanPath: true,
+          title: 'Backup'
+        }
+      }
+    ]
+  },
+  {
+    path: '/project-backups',
+    name: 'backup-projects',
+    component: Backups,
+    meta: {
+      title: 'Projects backups'
+    },
+    children: [
+      {
+        path: ':item*',
+        name: 'backups-projects',
+        component: Backups,
+        meta: {
+          patchCleanPath: true,
+          title: 'Backup'
+        }
+      }
+    ]
+  },
+  {
+    path: '/restore-jobs',
+    name: 'backups-restore-jobs',
+    component: Backups,
+    meta: {
+      title: 'Restore jobs'
+    }
+  }
+]
+
+const navItems = [
+  {
+    name: 'Restore jobs',
+    icon: 'server',
+    route: {
+      path: `/${appInfo.id}/restore-jobs?`
+    },
+    enabled: () => {
+      return true
+    }
+  },
+  {
+    name: 'My backups',
+    icon: 'arrow-go-back',
+    route: {
+      path: `/${appInfo.id}/my-backups?`
+    },
+    enabled: () => {
+      return true
+    }
+  },
+  {
+    name: 'Project backups',
+    icon: 'arrow-go-back',
+    route: {
+      path: `/${appInfo.id}/project-backups?`
+    },
+    enabled: () => {
+      return true
+    }
+  }
+]
+
+export default {
+  appInfo,
+  routes,
+  translations,
+  navItems
+}
diff --git a/packages/web-app-backups/src/views/Backups.vue b/packages/web-app-backups/src/views/Backups.vue
new file mode 100644
index 00000000000..101f42660e6
--- /dev/null
+++ b/packages/web-app-backups/src/views/Backups.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="oc-flex">
+    <files-view-wrapper class="oc-flex-column">
+    <backups-section id="backups-section" :empty-message="emptyMessage" />
+  </files-view-wrapper>
+  </div>
+</template>
+
+<script lang="ts">
+import { mapGetters } from 'vuex'
+import BackupsSection from '../components/BackupsSection.vue'
+import { defineComponent } from 'vue'
+import FilesViewWrapper from 'web-app-files/src/components/FilesViewWrapper.vue'
+import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
+
+export default defineComponent({
+  components: {
+    FilesViewWrapper,
+    AppBar,
+    BackupsSection
+  },
+  // setup() {
+  //   const {
+  //     areResourcesLoading,
+  //     fields,
+  //     fileListHeaderY,
+  //     loadResourcesTask,
+  //     selectedResources,
+  //     selectedResourcesIds,
+  //     storeItems
+  //   } = useResourcesViewDefaults<Resource, any, any[]>()
+  //   // backup items
+  //   const backups = storeItems
+  //   const {
+  //     sortBy,
+  //     sortDir,
+  //     items: backupItems,
+  //     handleSort
+  //   } = useSort({
+  //     items: backups,
+  //     fields,
+  //     sortByQueryName: 'backups-sort-by',
+  //     sortDirQueryName: 'backups-sort-dir'
+  //   })
+  //   return {
+  //     // defaults
+  //     loadResourcesTask,
+  //     areResourcesLoading,
+  //     selectedResources,
+  //     selectedResourcesIds,
+  //     fileListHeaderY,
+  //     handleSort,
+  //     sortBy,
+  //     sortDir,
+  //     backupItems
+  //   }
+  // },
+  computed: {
+    ...mapGetters(['configuration']),
+    emptyMessage() {
+      return this.$route.name === 'backups-restore-jobs'
+        ? this.$gettext("You don't have any restore jobs.")
+        : this.$gettext("You don't have any backups.")
+    }
+  }
+})
+</script>
+
+<style scoped>
+h2 {
+  font-size: 1.3em;
+  margin-top: 0;
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07046b350a9..507c2e962a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -439,6 +439,28 @@ importers:
       web-client: link:../web-client
       web-pkg: link:../web-pkg
 
+  packages/web-app-backups:
+    specifiers:
+      axios: ^0.27.2
+      fuse.js: ^6.5.3
+      lodash-es: 4.17.21
+      uuid: ^9.0.0
+      vue-concurrency: 4.0.0
+      vuex: 4.1.0
+      web-app-files: 0.0.0
+      web-client: npm:@ownclouders/web-client
+      web-pkg: npm:@ownclouders/web-pkg
+    dependencies:
+      axios: 0.27.2
+      fuse.js: 6.5.3
+      lodash-es: 4.17.21
+      uuid: 9.0.0
+      vue-concurrency: 4.0.0_vue@3.2.45
+      vuex: 4.1.0_vue@3.2.45
+      web-app-files: link:../web-app-files
+      web-client: link:../web-client
+      web-pkg: link:../web-pkg
+
   packages/web-app-draw-io:
     specifiers:
       luxon: ^2.4.0
@@ -8443,7 +8465,7 @@ packages:
       minipass-pipeline: 1.2.4
       mkdirp: 1.0.4
       p-map: 4.0.0
-      promise-inflight: 1.0.1_bluebird@3.7.2
+      promise-inflight: 1.0.1
       rimraf: 3.0.2
       ssri: 8.0.1
       tar: 6.1.13
@@ -18690,6 +18712,15 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /promise-inflight/1.0.1:
+    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+    dev: true
+
   /promise-inflight/1.0.1_bluebird@3.7.2:
     resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
     peerDependencies: