diff --git a/src/js/client.js b/src/js/client.js
index a0dedfe74..370e17637 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -346,6 +346,14 @@ angular.module('Application').service('Client', ['$http', '$interval', 'md5', 'N
         }).error(defaultErrorHandler(callback));
     };
 
+    Client.prototype.backupApp = function (appId, callback) {
+        var data = { };
+        post('/api/v1/apps/' + appId + '/backup', data).success(function (data, status) {
+            if (status !== 202) return callback(new ClientError(status, data));
+            callback(null);
+        }).error(defaultErrorHandler(callback));
+    };
+
     Client.prototype.uninstallApp = function (appId, password, callback) {
         var data = { password: password };
         post('/api/v1/apps/' + appId + '/uninstall', data).success(function (data, status) {
diff --git a/src/theme.scss b/src/theme.scss
index e83e43873..2d718fec8 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -452,6 +452,10 @@ multiselect {
     overflow-y: auto;
 }
 
+.modal-body .panel-body {
+    padding: 5px;
+}
+
 .modal-footer {
     padding-top: 0;
 }
diff --git a/src/views/apps.html b/src/views/apps.html
index 320c5e5b8..b5d1976da 100644
--- a/src/views/apps.html
+++ b/src/views/apps.html
@@ -168,44 +168,62 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title">Restore {{ appRestore.app.fqdn }}</h4>
+                <h4 class="modal-title">Backup & Restore - {{ appRestore.app.fqdn }}</h4>
             </div>
-            <div class="modal-body" ng-show="appRestore.busyFetching">
-                <h4 class="text-center"><i class="fa fa-circle-o-notch fa-spin"></i> Fetching backups</h4>
-            </div>
-            <div class="modal-body" ng-show="appRestore.backups.length === 0 && !appRestore.busyFetching">
-                <h4 class="text-danger">This app has no backups to restore from.</h4>
-            </div>
-            <div class="modal-body" ng-show="appRestore.backups.length !== 0">
-                <p>Restoring the app will lose all content generated since the backup.</p>
-                <label class="control-label">Select backup</label>
-                <div class="dropdown">
-                    <button type="button" class="btn btn-block btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}}  <span class="caret"></span></button>
-                    <ul class="dropdown-menu" role="menu">
-                        <li ng-repeat="backup in appRestore.backups | orderBy:'-creationTime'">
-                            <a href="" ng-click="appRestore.selectBackup(backup)">{{backup.creationTime}} {{ backup.creationTime | prettyDate }} - v{{backup.version}}</a>
-                        </li>
-                    </ul>
+            <div class="modal-body">
+                <div class="panel panel-default">
+                    <div class="panel-heading"><h3 class="panel-title">Take Backup</h3></div>
+                    <div class="panel-body">
+                        <div style="vertical-align: middle;">This takes a live snapshot of this application.
+                            <button type="button" class="btn btn-success pull-right" ng-click="appRestore.createBackup()"> Backup</button>
+                        </div>
+                    </div>
                 </div>
-                <br/>
-                <fieldset>
-                    <form role="form" name="appRestoreForm" ng-submit="appRestore.submit()" autocomplete="off">
-                        <div class="form-group" ng-class="{ 'has-error': (appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password) }">
-                            <label class="control-label" for="appRestorePasswordInput">Provide your password to confirm this action</label>
-                            <div class="control-label" ng-show="(appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password)">
-                                <small ng-show=" appRestoreForm.password.$dirty && appRestoreForm.password.$invalid">Password required</small>
-                                <small ng-show="!appRestoreForm.password.$dirty && appRestore.error.password">Wrong password</small>
+
+                <div class="panel panel-default">
+                    <div class="panel-heading"><h3 class="panel-title">Restore from Backup</h3></div>
+                    <div class="panel-body">
+                        <p class="text-center" ng-show="appRestore.busyFetching"><i class="fa fa-circle-o-notch fa-spin"></i> Fetching backups</p>
+                        <p class="text-danger"  ng-show="appRestore.backups.length === 0 && !appRestore.busyFetching">This app has no backups to restore from.</p>
+
+                        <div ng-show="appRestore.backups.length !== 0">
+                            <p>Restoring the app will lose all content generated since the backup.</p>
+                            <label class="control-label">Select Backup</label>
+                            <div class="row">
+                                <div class="dropdown col-md-8">
+                                    <button type="button" class="btn btn-block btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}}  <span class="caret"></span></button>
+                                    <ul class="dropdown-menu" role="menu">
+                                        <li ng-repeat="backup in appRestore.backups | orderBy:'-creationTime'">
+                                            <a href="" ng-click="appRestore.selectBackup(backup)">{{backup.creationTime}} {{ backup.creationTime | prettyDate }} - v{{backup.version}}</a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
-                            <input type="password" class="form-control" ng-model="appRestore.password" id="appRestorePasswordInput" name="password" required autofocus>
+                            <br/>
+                            <fieldset>
+                                <form role="form" name="appRestoreForm" ng-submit="appRestore.restore()" autocomplete="off">
+                                    <div class="form-group" ng-class="{ 'has-error': (appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password) }">
+                                        <label class="control-label" for="appRestorePasswordInput">Provide your password to confirm this action</label>
+                                        <div class="control-label" ng-show="(appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password)">
+                                            <small ng-show=" appRestoreForm.password.$dirty && appRestoreForm.password.$invalid">Password required</small>
+                                            <small ng-show="!appRestoreForm.password.$dirty && appRestore.error.password">Wrong password</small>
+                                        </div>
+                                        <input type="password" class="form-control" ng-model="appRestore.password" id="appRestorePasswordInput" name="password" required autofocus>
+                                    </div>
+
+                                    <input class="ng-hide" type="submit" ng-disabled="appRestoreForm.$invalid || busy"/>
+                                </form>
+                            </fieldset>
                         </div>
 
-                        <input class="ng-hide" type="submit" ng-disabled="appRestoreForm.$invalid || busy"/>
-                    </form>
-                </fieldset>
+                        <button type="button" class="btn btn-danger pull-right" ng-click="appRestore.restore()" ng-show="appRestore.backups.length !== 0" ng-disabled="appRestoreForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Restore</button>
+
+                    </div>
+                </div>
             </div>
+
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" ng-click="appRestore.submit()" ng-show="appRestore.backups.length !== 0" ng-disabled="appRestoreForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Restore</button>
             </div>
         </div>
     </div>
@@ -407,7 +425,7 @@
                         </div>
 
                         <div>
-                            <a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'" uib-tooltip="Restore" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-undo scale"></i></a>
+                            <a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'" uib-tooltip="Backups" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-archive scale"></i></a>
                         </div>
 
                         <div ng-show="(app.installationState === 'installed' || app.installationState === 'pending_configure') && !(app | installError)">
diff --git a/src/views/apps.js b/src/views/apps.js
index 89e1665e6..cd966e68f 100644
--- a/src/views/apps.js
+++ b/src/views/apps.js
@@ -184,6 +184,18 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
             $scope.appRestore.selectedBackup = backup;
         },
 
+        createBackup: function () {
+            Client.backupApp($scope.appRestore.app.id, function (error) {
+                if (error) {
+                    Client.error(error);
+                } else {
+                    $('#appRestoreModal').modal('hide');
+                }
+
+                Client.refreshInstalledApps(); // reflect the new app state immediately
+            });
+        },
+
         show: function (app) {
             $scope.reset();
 
@@ -205,7 +217,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
             return false; // prevent propagation and default
         },
 
-        submit: function () {
+        restore: function () {
             $scope.appRestore.busy = true;
             $scope.appRestore.error.password = null;