diff --git a/app/src/filters/size.js b/app/src/filters/size.js
new file mode 100644
index 00000000..050f70ba
--- /dev/null
+++ b/app/src/filters/size.js
@@ -0,0 +1,6 @@
+export function humanSize (bytes) {
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+  if (bytes === 0) return 'n/a'
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))
+  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]
+}
diff --git a/app/src/router/routes.js b/app/src/router/routes.js
index 855bde46..526142fd 100644
--- a/app/src/router/routes.js
+++ b/app/src/router/routes.js
@@ -291,6 +291,18 @@ const routes = [
         { name: 'backup', trad: 'backup' }
       ]
     }
+  },
+  {
+    name: 'backup-list',
+    path: '/backup/:id',
+    component: () => import(/* webpackChunkName: "views/backup" */ '@/views/backup/BackupList'),
+    props: true,
+    meta: {
+      breadcrumb: [
+        { name: 'backup', trad: 'backup' },
+        { name: 'backup-list', param: 'id' }
+      ]
+    }
   }
 ]
 
diff --git a/app/src/views/backup/Backup.vue b/app/src/views/backup/Backup.vue
index 00cd122b..0e354f96 100644
--- a/app/src/views/backup/Backup.vue
+++ b/app/src/views/backup/Backup.vue
@@ -3,7 +3,7 @@
     <b-list-group>
       <b-list-group-item
         v-for="{ id, name, uri } in storages" :key="id"
-        :to="{ name: 'backup-list', params: { name: id }}"
+        :to="{ name: 'backup-list', params: { id }}"
         class="d-flex justify-content-between align-items-center pr-0"
       >
         <div>
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
new file mode 100644
index 00000000..07823f2d
--- /dev/null
+++ b/app/src/views/backup/BackupList.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="backup-list">
+    <div class="actions">
+      <div class="buttons ml-auto">
+        <b-button variant="success" :to="{ name: 'backup-create' }">
+          <icon iname="plus" /> {{ $t('backup_new') }}
+        </b-button>
+      </div>
+    </div>
+
+    <b-alert v-if="!archives" variant="warning" show>
+      <icon iname="exclamation-triangle" /> {{ $t('backups_no') }}
+    </b-alert>
+    <b-list-group v-else>
+      <b-list-group-item
+        v-for="{ name, created_at, path, size } in archives" :key="name"
+        :to="{ name: 'backup-info', params: { name, id }}"
+        :title="created_at | readableDate"
+        class="d-flex justify-content-between align-items-center pr-0"
+      >
+        <div>
+          <h5>
+            {{ created_at | distanceToNow }}
+            <small>{{ name }} ({{ size | humanSize }})</small>
+          </h5>
+          <p class="mb-0">{{ path }}</p>
+        </div>
+        <icon iname="chevron-right" class="lg fs-sm ml-auto" />
+      </b-list-group-item>
+    </b-list-group>
+  </div>
+</template>
+
+<script>
+import api from '@/helpers/api'
+import { distanceToNow, readableDate } from '@/filters/date'
+import { humanSize } from '@/filters/size'
+
+export default {
+  name: 'BackupList',
+
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      archives: undefined
+    }
+  },
+
+  filters: {
+    distanceToNow,
+    readableDate,
+    humanSize
+  },
+
+  methods: {
+    fetchData () {
+      api.get('backup/archives?with_info').then(({ archives }) => {
+        this.archives = Object.entries(archives).map(([name, data]) => {
+          data.name = name
+          return data
+        }).reverse()
+      })
+    }
+  },
+
+  created () {
+    this.fetchData()
+  }
+}
+</script>