diff --git a/src/views/backups.html b/src/views/backups.html
index 6f4ffa98c..16fa287fb 100644
--- a/src/views/backups.html
+++ b/src/views/backups.html
@@ -177,6 +177,10 @@
     <h1>Backups</h1>
   </div>
 
+  <div class="text-left">
+    <h3>Location</h3>
+  </div>
+
   <div class="card" style="margin-bottom: 15px;">
     <p>Cloudron makes a complete backup of your system based on this configuration.
       <span ng-show="manualBackupApps.length">
@@ -219,33 +223,51 @@
     <br/>
 
     <div class="row">
-      <div class="col-xs-4">
-        <span class="text-muted">Backup ID</span>
-      </div>
-      <div class="col-xs-8 text-right">
-        <span ng-click-select ng-show="lastBackup">{{ lastBackup.id }}</span>
-        <span ng-hide="lastBackup">No backups have been made yet</span>
+      <div class="col-md-12 text-right">
+        <button class="btn btn-outline btn-primary pull-right" ng-show="user.role === 'owner'" ng-click="configureBackup.show()">Configure</button>
       </div>
     </div>
+  </div>
 
+  <div class="text-left">
+    <h3>Listing</h3>
+  </div>
+
+  <div class="card card-large">
     <div class="row">
-      <div class="col-xs-6">
-        <span class="text-muted">Last backup</span>
-      </div>
-      <div class="col-xs-6 text-right">
-        <span uib-tooltip="{{ lastBackup.creationTime | prettyLongDate }}" ng-show="lastBackup">{{ lastBackup.creationTime | prettyDate }}</span>
-        <span ng-hide="lastBackup">-</span>
+      <div class="col-md-12">
+        <!-- backup id copy helper -->
+        <input type="text" class="offscreen" aria-hidden="true" id="backupIdHelper" value="">
+
+        <p ng-show="!backups.length">No backups have been made yet</p>
+
+        <table class="table table-hover" style="margin: 0;" ng-hide="!backups.length">
+          <thead>
+            <tr>
+              <th width="25px">&nbsp;</th>
+              <th>Version</th>
+              <th>Contents</th>
+              <th>Date</th>
+              <th class="text-right" width="180px">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="backup in backups">
+              <td><div ng-click="listBackups.copyBackupId(backup)" class="hand" uib-tooltip="{{ listBackups.copyBackupIdDone ? 'Copied to clipboard' : 'Click to copy backup id' }}" tooltip-placement="right"><i class="fa fa-copy"></i></div></td>
+              <td><div>v{{ backup.packageVersion }}</div></td>
+              <td><div>{{ backup.dependsOn.length }} app(s)</div></td>
+              <td><div uib-tooltip="{{ backup.creationTime | prettyLongDate }}">{{ backup.creationTime | prettyDate }}</div></td>
+              <td class="text-right no-wrap" style="vertical-align: bottom">
+                <button class="btn btn-xs btn-default" ng-click="downloadConfig(backup)" uib-tooltip="Download Backup Configuration"><i class="far fa-file"></i></button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
 
     <br/>
 
-    <p ng-show="lastBackup">
-      For Cloudron restore or migration, <a href="" ng-click="downloadConfig()">download</a> the backup configuration.
-    </p>
-
-    <br/>
-
     <div class="row" ng-show="createBackup.busy">
       <div class="col-md-12" style="margin-bottom: 10px;">
         <div class="progress progress-striped active animateMe">
@@ -263,9 +285,9 @@
 
     <div class="row">
       <div class="col-md-12 text-right">
-        <button class="btn btn-outline btn-primary pull-right" ng-show="user.role === 'owner'" ng-click="configureBackup.show()" ng-disabled="createBackup.busy">Configure</button>
+        <button class="btn btn-outline" ng-click="createBackup.startCleanup()" ng-show="!createBackup.busy" style="margin-right: 10px">Cleanup Backups</button>
         <button class="btn btn-outline btn-primary" ng-click="createBackup.startBackup()" ng-show="!createBackup.busy" style="margin-right: 10px">Backup now</button>
-        <button class="btn btn-outline btn-danger" ng-click="createBackup.stopBackup()" ng-show="createBackup.busy" style="margin-right: 10px">Stop Backup</button>
+        <button class="btn btn-outline btn-danger" ng-click="createBackup.stopTask()" ng-show="createBackup.busy" style="margin-right: 10px">Stop {{ createBackup.taskType === 'backup' ? 'Backup' : 'Cleanup' }}</button>
       </div>
     </div>
   </div>
diff --git a/src/views/backups.js b/src/views/backups.js
index 82c36c387..719d56590 100644
--- a/src/views/backups.js
+++ b/src/views/backups.js
@@ -129,9 +129,10 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
         message: '',
         errorMessage: '',
         taskId: '',
+        taskType: '',
 
         checkStatus: function () {
-            Client.getLatestTaskByType('backup', function (error, task) {
+            Client.getLatestTaskByType($scope.createBackup.taskType, function (error, task) {
                 if (error) return console.error(error);
 
                 if (!task) return;
@@ -166,6 +167,7 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
             $scope.createBackup.percent = 0;
             $scope.createBackup.message = '';
             $scope.createBackup.errorMessage = '';
+            $scope.createBackup.taskType = 'backup';
 
             Client.startBackup(function (error, taskId) {
                 if (error) {
@@ -189,7 +191,22 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
             });
         },
 
-        stopBackup: function () {
+        startCleanup: function () {
+            $scope.createBackup.busy = true;
+            $scope.createBackup.percent = 0;
+            $scope.createBackup.message = '';
+            $scope.createBackup.errorMessage = '';
+            $scope.createBackup.taskType = 'cleanBackups';
+
+            Client.cleanupBackups(function (error, taskId) {
+                if (error) console.error(error);
+
+                $scope.createBackup.taskId = taskId;
+                $scope.createBackup.updateStatus();
+            });
+        },
+
+        stopTask: function () {
             Client.stopTask($scope.createBackup.taskId, function (error) {
                 if (error) {
                     if (error.statusCode === 409) {
@@ -207,6 +224,22 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
         }
     };
 
+    $scope.listBackups = {
+        copyBackupIdDone: false,
+
+        copyBackupId: function (backup) {
+            var copyText = document.getElementById('backupIdHelper');
+            copyText.value = backup.id;
+            copyText.select();
+            document.execCommand('copy');
+
+            $scope.listBackups.copyBackupIdDone = true;
+
+            // reset after 2.5sec
+            $timeout(function () { $scope.listBackups.copyBackupIdDone = false; }, 2500);
+        },
+    };
+
     $scope.s3like = function (provider) {
         return provider === 's3' || provider === 'minio' || provider === 's3-v4-compat'
             || provider === 'exoscale-sos' || provider === 'digitalocean-spaces'
@@ -228,9 +261,10 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
         document.body.removeChild(element);
     }
 
-    $scope.downloadConfig = function () {
+    $scope.downloadConfig = function (backup) {
         // secrets and tokens already come with placeholder characters we remove them
         var tmp = {
+            backupId: backup.id,
             encrypted: !!$scope.backupConfig.password  // we add this just to help the import UI
         };