diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index 17cce00ea..38242efcb 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -111,6 +111,58 @@
     </div>
 </div>
 
+<!-- modal backup config -->
+<div class="modal fade" id="configureBackupModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Configure Backup</h4>
+            </div>
+            <div class="modal-body">
+                <form name="configureBackupForm" role="form" novalidate ng-submit="configureBackup.submit()" autocomplete="off">
+                    <fieldset>
+                        <p class="has-error text-center" ng-show="configureBackup.error">{{ configureBackup.error }}</p>
+
+                        <!-- Route53 -->
+                        <div class="form-group" ng-class="{ 'has-error': false }">
+                            <label class="control-label" for="backupConfigAccessKeyId">Bucket name</label>
+                            <input type="text" class="form-control" ng-model="configureBackup.bucket" id="backupConfigBucket" name="accessKeyId" ng-disabled="configureBackup.busy" ng-minlength="16" ng-maxlength="32" autofocus>
+                        </div>
+
+                        <div class="form-group" ng-class="{ 'has-error': false }">
+                            <label class="control-label" for="backupConfigAccessKeyId">Prefix</label>
+                            <input type="text" class="form-control" ng-model="configureBackup.prefix" id="backupConfigPrefix" name="accessKeyId" ng-disabled="configureBackup.busy" ng-minlength="16" ng-maxlength="32">
+                        </div>
+
+                        <div class="form-group" ng-class="{ 'has-error': false }">
+                            <label class="control-label" for="backupConfigAccessKeyId">Access Key Id</label>
+                            <input type="text" class="form-control" ng-model="configureBackup.accessKeyId" id="backupConfigAccessKeyId" name="accessKeyId" ng-disabled="configureBackup.busy" ng-minlength="16" ng-maxlength="32">
+                        </div>
+                        <div class="form-group" ng-class="{ 'has-error': false }">
+                            <label class="control-label" for="backupConfigSecretAccessKey">Secret Access Key</label>
+                            <input type="text" class="form-control" ng-model="configureBackup.secretAccessKey" id="backupConfigSecretAccessKey" name="secretAccessKey" ng-disabled="configureBackup.busy">
+                        </div>
+
+                        <div class="form-group" ng-class="{ 'has-error': false }">
+                            <label class="control-label" for="backupConfigPassword">Provide your password to confirm this action</label>
+                            <input type="password" class="form-control" ng-model="configureBackup.password" id="configureBackupPassword" name="password" ng-disabled="configureBackup.busy" required>
+                        </div>
+
+                        <input class="ng-hide" type="submit" ng-disabled="configureBackupForm.$invalid"/>
+                    </fieldset>
+                </form>
+            </div>
+            <div class="modal-footer ">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                <button type="submit" class="btn btn-outline btn-success pull-right" ng-click="submit()"
+                    ng-disabled="configureBackupForm.$invalid || busy"><i class="fa fa-spinner fa-pulse" ng-show="configureBackup.busy"></i>
+                    <span>Save</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <br/>
 
 <div class="section-header">
@@ -259,13 +311,15 @@
     <!-- If a backup is blocked (not triggered), the UI does not give feedback currently. This button is only available in dev at the moment! -->
     <div class="row" ng-show="backupConfig.provider !== 'caas' || config.isDev">
         <br/>
-        <div class="col-xs-9">
+        <div class="col-xs-6">
             <div ng-show="createBackup.busy" class="progress progress-striped active animateMe">
                 <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ createBackup.percent }}%">Backup in progress</div>
             </div>
         </div>
-        <div class="col-xs-3 text-right">
-            <button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy">Backup now</button>
+        <div class="col-xs-6 text-right">
+            <button class="btn btn-outline btn-primary pull-right" ng-click="configureBackup.show()" ng-disabled="createBackup.busy">Configure</button>
+
+            <button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy" style="margin-right: 10px">Backup now</button>
         </div>
     </div>
 </div>
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index af31fcd4d..7f68db8c6 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -246,7 +246,56 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         showCustomAvatarSelector: function () {
             $('#avatarFileInput').click();
         }
+    };
 
+    $scope.configureBackup = {
+        busy: false,
+        error: {},
+
+        password: '',
+        provider: 's3',
+        bucket: '',
+        prefix: '',
+        accessKeyId: '',
+        secretAccessKey: '',
+
+        show: function () {
+            $('#configureBackupModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.configureBackup.error.name = null;
+            $scope.configureBackup.busy = true;
+
+            var backupConfig = {
+                provider: $scope.backupConfig.provider,
+                bucket: $scope.backupConfig.bucket,
+                prefix: $scope.backupConfig.prefix,
+                accessKeyId: $scope.backupConfig.accessKeyId,
+                secretAccessKey: $scope.backupConfig.secretAccessKey
+            };
+
+            Client.setBackupConfig(backupConfig, function (error) {
+                $scope.configureBackup.busy = false;
+
+                if (error) {
+                    if (error.statusCode === 400) {
+                        $scope.cloudronNameChange.error.name = 'Invalid name';
+                        $scope.cloudronNameChange.name = '';
+                        $('#inputCloudronName').focus();
+                        $scope.cloudronNameChangeForm.password.$setPristine();
+                    } else {
+                        console.error('Unable to change name.', error);
+                        return;
+                    }
+                }
+
+                $scope.cloudronNameChange.reset();
+                $('#cloudronNameChangeModal').modal('hide');
+
+                Client.refreshConfig();
+            });
+        }
     };
 
     function fetchBackups() {
@@ -408,7 +457,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     });
 
     // setup all the dialog focus handling
-    ['planChangeModal', 'appstoreLoginModal', 'cloudronNameChangeModal'].forEach(function (id) {
+    ['planChangeModal', 'appstoreLoginModal', 'cloudronNameChangeModal', 'configureBackupModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });