diff --git a/src/views/app.html b/src/views/app.html
index c37653680..d2213620c 100644
--- a/src/views/app.html
+++ b/src/views/app.html
@@ -549,13 +549,15 @@
           <div class="col-md-12">
             <label class="control-label">Create Backup</label>
             <p>This creates a snapshot of the app. You can use this snapshot to restore or clone this app.</p>
-            <button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId"><i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup'"></i> Create Backup</button>
+
             <div ng-show="app.installationState === 'pending_backup'">
               <div class="progress progress-striped active animateMe" style="margin-bottom: 10px;">
-                <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.progress }}%"></div>
+                <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ backups.taskProgress }}%"></div>
               </div>
-              <div><center>{{ app.message }}</center></div>
+              <div>{{ backups.taskMessage }}</div>
             </div>
+
+            <button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId || backups.busyCreate"><i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup' || backups.busyCreate"></i> Create Backup</button>
           </div>
         </div>
         <hr/>
diff --git a/src/views/app.js b/src/views/app.js
index 07b785b93..537d65cb9 100644
--- a/src/views/app.js
+++ b/src/views/app.js
@@ -495,12 +495,16 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
 
     $scope.backups = {
         busy: false,
+        busyCreate: false,
         error: {},
         copyBackupIdDone: false,
 
         enableBackup: false,
         backups: [],
 
+        taskProgress: 0,
+        taskMessage: '',
+
         copyBackupId: function (backup) {
             var copyText = document.getElementById('backupIdHelper');
             copyText.value = backup.id;
@@ -513,11 +517,18 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
             $timeout(function () { $scope.backups.copyBackupIdDone = false; }, 2500);
         },
 
-        createBackup: function () {
-            Client.backupApp($scope.app.id, function (error) {
+        trackBackupTask: function () {
+            $scope.backups.busyCreate = true;
+
+            refreshApp(function (error) {
                 if (error) Client.error(error);
 
-                trackAppTask(function (error) {
+                $scope.backups.busyCreate = false;
+
+                trackAppTask(function (data) {
+                    $scope.backups.taskProgress = data.percent;
+                    $scope.backups.taskMessage = data.message;
+                }, function (error) {
                     if (error) return Client.error(error);
 
                     $scope.backups.show();
@@ -525,6 +536,18 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
             });
         },
 
+        createBackup: function () {
+            $scope.backups.busyCreate = true;
+            $scope.backups.taskProgress = 0;
+            $scope.backups.taskMessage = '';
+
+            Client.backupApp($scope.app.id, function (error) {
+                if (error) Client.error(error);
+
+                $scope.backups.trackBackupTask();
+            });
+        },
+
         show: function () {
             var app = $scope.app;
 
@@ -765,12 +788,20 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         });
     }
 
-    function trackAppTask(callback) {
+    function trackAppTask(progressCallback, callback) {
+        progressCallback = progressCallback || function () {};
         callback = callback || function (error) { if (error) Client.error(error); };
 
-        // app will be refreshed on interval
-        if ($scope.app.taskId) $timeout(trackAppTask.bind(null, callback), 2000); // not yet done
-        else callback();
+        if (!$scope.app.taskId) return callback();
+
+        Client.getTask($scope.app.taskId, function (error, result) {
+            if (error) console.error(error);
+
+            progressCallback(result);
+
+            // app will be refreshed on interval
+            $timeout(trackAppTask.bind(null, progressCallback, callback), 2000); // not yet done
+        });
     }
 
     Client.onReady(function () {
@@ -782,6 +813,9 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
 
             $scope.setView($routeParams.view || 'display');
 
+            // track on page load backup if active
+            if (app.installationState === ISTATES.PENDING_BACKUP) $scope.backups.trackBackupTask();
+
             asyncSeries([
                 fetchUsers,
                 fetchGroups,