diff --git a/src/views/apps.html b/src/views/apps.html
index 070c1ad20..d5957fb72 100644
--- a/src/views/apps.html
+++ b/src/views/apps.html
@@ -181,137 +181,98 @@
                 <h4 class="modal-title">Backups - {{ appRestore.app.fqdn }}</h4>
             </div>
             <div class="modal-body">
-                <!-- new backup -->
-                <div id="appRestoreAccordion" class="panel-group">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <label class="radio-inline panel-title">
-                                <input type="radio" class="control-label" name="appRestoreAction" ng-model="appRestore.action" value="backup" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreBackup">Backup</input>
-                            </label>
+              <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 or clone from yet.</p>
+
+              <uib-tabset active="appRestore.action" ng-show="!appRestore.busyFetching && appRestore.backups.length">
+                <!-- restore -->
+                <uib-tab index="'restore'" heading="Restore">
+                  <br/>
+                  <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-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} ({{ appRestore.selectedBackup.creationTime | prettyLongDate }})  <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 | prettyDate }} - v{{backup.version}} ({{ backup.creationTime | prettyLongDate }})</a>
+                    </li>
+                  </ul>
+                  </div>
+                  <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>
-                        <div id="appRestoreBackup" class="panel-collapse collapse">
-                            <div class="panel-body">
-                                <p>This takes a live snapshot of this application.</p>
-                            </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>
+                </uib-tab>
+
+                <!-- clone -->
+                <uib-tab index="'clone'" heading="Clone">
+                  <br/>
+                  <label class="control-label">Select Backup</label>
+                  <div class="dropdown">
+                  <button type="button" class="btn btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} ({{ appRestore.selectedBackup.creationTime | prettyLongDate }})  <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 | prettyDate }} - v{{backup.version}} ({{ backup.creationTime | prettyLongDate }})</a>
+                    </li>
+                  </ul>
+                  </div>
+                  <br/>
+                  <fieldset>
+                    <form role="form" name="appCloneForm" ng-submit="appRestore.clone()" autocomplete="off">
+                      <div class="has-error text-center" ng-show="appRestore.error.other" ng-bind-html="appRestore.error.other"></div>
+                      <div class="form-group" ng-class="{ 'has-error': (appCloneForm.location.$dirty && appCloneForm.location.$invalid) || (!appCloneForm.location.$dirty && appRestore.error.location) }">
+                        <label class="control-label" for="appRestoreLocationInput">Location {{ appRestore.error.location }} </label>
+                        <div class="input-group form-inline">
+                          <input type="text" class="form-control" ng-model="appRestore.location" id="appRestoreLocationInput" name="location" placeholder="Leave empty to use bare domain" autofocus>
+                          <div class="input-group-btn">
+                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                              {{ (appRestore.location ? (appRestore.domain.provider !== 'caas' ? '.' : '-') : '') + appRestore.domain.domain }}
+                              <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                              <li ng-repeat="domain in domains">
+                                <a href="" ng-click="appRestore.domain = domain">{{ domain.domain }}</a>
+                              </li>
+                            </ul>
+                          </div>
                         </div>
-                    </div>
+                      </div>
 
-                    <!-- restore -->
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <label class="radio-inline panel-title">
-                                <input type="radio" class="control-label" name="appRestoreAction" ng-model="appRestore.action" value="restore" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreRestore">Restore</input>
-                            </label>
-                        </div>
-                        <div id="appRestoreRestore" class="panel-collapse collapse in">
-                            <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>
+                      <p class="text-center" ng-show="appRestore.location && appRestore.domain.provider === 'manual' && !appRestore.domain.config.wildcard">
+                        <b>Add an A record manually for {{ appRestore.location }} to this Cloudron's public IP</b>
+                        <br>
+                      </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="dropdown">
-                                    <button type="button" class="btn btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} ({{ appRestore.selectedBackup.creationTime | prettyLongDate }})  <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 | prettyDate }} - v{{backup.version}} ({{ backup.creationTime | prettyLongDate }})</a>
-                                        </li>
-                                    </ul>
-                                    </div>
-                                    <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>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- clone -->
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <label class="radio-inline panel-title">
-                                <input type="radio" class="control-label" name="appRestoreAction" ng-model="appRestore.action" value="clone" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreClone">Clone</input>
-                            </label>
-                        </div>
-                        <div id="appRestoreClone" class="panel-collapse collapse">
-                            <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 clone from.</p>
-
-                                <div ng-show="appRestore.backups.length !== 0">
-                                    <label class="control-label">Select Backup</label>
-                                    <div class="dropdown">
-                                    <button type="button" class="btn btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} ({{ appRestore.selectedBackup.creationTime | prettyLongDate }})  <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 | prettyDate }} - v{{backup.version}} ({{ backup.creationTime | prettyLongDate }})</a>
-                                        </li>
-                                    </ul>
-                                    </div>
-                                    <br/>
-
-                                    <form role="form" name="appCloneForm" ng-submit="appRestore.clone()" autocomplete="off">
-                                        <div class="has-error text-center" ng-show="appRestore.error.other" ng-bind-html="appRestore.error.other"></div>
-                                        <div class="form-group" ng-class="{ 'has-error': (appCloneForm.location.$dirty && appCloneForm.location.$invalid) || (!appCloneForm.location.$dirty && appRestore.error.location) }">
-                                            <label class="control-label" for="appRestoreLocationInput">Location {{ appRestore.error.location }} </label>
-                                            <div class="input-group form-inline">
-                                                <input type="text" class="form-control" ng-model="appRestore.location" id="appRestoreLocationInput" name="location" placeholder="Leave empty to use bare domain" autofocus>
-                                                <div class="input-group-btn">
-                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                                                        {{ (appRestore.location ? (appRestore.domain.provider !== 'caas' ? '.' : '-') : '') + appRestore.domain.domain }}
-                                                        <span class="caret"></span>
-                                                    </button>
-                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
-                                                        <li ng-repeat="domain in domains">
-                                                            <a href="" ng-click="appRestore.domain = domain">{{ domain.domain }}</a>
-                                                        </li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <p class="text-center" ng-show="appRestore.location && appRestore.domain.provider === 'manual' && !appRestore.domain.config.wildcard">
-                                            <b>Add an A record manually for {{ appRestore.location }} to this Cloudron's public IP</b>
-                                            <br>
-                                        </p>
-
-                                        <div class="has-error text-center" ng-show="appRestore.error.port">{{ appRestore.error.port }}</div>
-                                        <div ng-repeat="(env, info) in appRestore.portBindingsInfo">
-                                            <ng-form name="portInfo_form">
-                                                <div class="form-group" ng-class="{ 'has-error': (!appRestore.itemName{{$index}}.$dirty && appRestore.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
-                                                    <label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="appRestore.portBindingsEnabled[env]"> {{ info.description }} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})</label>
-                                                    <input type="number" class="form-control" ng-model="appRestore.portBindings[env]" ng-disabled="!appRestore.portBindingsEnabled[env]" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
-                                                </div>
-                                            </ng-form>
-                                        </div>
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                </div> <!-- accordion -->
+                      <div class="has-error text-center" ng-show="appRestore.error.port">{{ appRestore.error.port }}</div>
+                      <div ng-repeat="(env, info) in appRestore.portBindingsInfo">
+                        <ng-form name="portInfo_form">
+                          <div class="form-group" ng-class="{ 'has-error': (!appRestore.itemName{{$index}}.$dirty && appRestore.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
+                            <label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="appRestore.portBindingsEnabled[env]"> {{ info.description }} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})</label>
+                            <input type="number" class="form-control" ng-model="appRestore.portBindings[env]" ng-disabled="!appRestore.portBindingsEnabled[env]" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
+                          </div>
+                        </ng-form>
+                      </div>
+                    </form>
+                  </fieldset>
+                </uib-tab>
+              </uib-tabset>
             </div>
 
             <div class="modal-footer">
-                <button type="button" class="btn btn-success" ng-show="appRestore.action === 'backup'" ng-click="appRestore.createBackup()"> Backup</button>
-                <button type="button" class="btn btn-danger" ng-show="appRestore.action === 'restore'"  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>
-                <button type="button" class="btn btn-success" ng-show="appRestore.action === 'clone'"  ng-click="appRestore.clone()" ng-show="appRestore.backups.length !== 0" ng-disabled="appCloneForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Clone</button>
-
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-primary pull-left" ng-click="appRestore.createBackup()" ng-disabled="appRestore.app.installationState === 'pending_backup'" uib-tooltip="Take a live snapshot of this app" tooltip-placement="right"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.app.installationState === 'pending_backup'"></i> Create Backup</button>
+              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-success" ng-click="appRestore.clone()" ng-show="appRestore.action === 'clone' && appRestore.backups.length !== 0" ng-disabled="appCloneForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Clone</button>
+              <button type="button" class="btn btn-danger" ng-click="appRestore.restore()" ng-show="appRestore.action === 'restore' && 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>
diff --git a/src/views/apps.js b/src/views/apps.js
index 81d1077c7..8089aa77a 100644
--- a/src/views/apps.js
+++ b/src/views/apps.js
@@ -205,13 +205,22 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
 
         createBackup: function () {
             Client.backupApp($scope.appRestore.app.id, function (error) {
-                if (error) {
-                    Client.error(error);
-                } else {
-                    $('#appRestoreModal').modal('hide');
+                if (error) Client.error(error);
+
+                function waitForBackupFinish() {
+                    if ($scope.appRestore.app.installationState === 'pending_backup') return $timeout(waitForBackupFinish, 1000);
+
+                    // we are done, refresh the backup list
+                    Client.getAppBackups($scope.appRestore.app.id, function (error, backups) {
+                        if (error) return Client.error(error);
+
+                        $scope.appRestore.backups = backups;
+                        if (backups.length) $scope.appRestore.selectedBackup = backups[0]; // pre-select first backup
+                    });
                 }
 
-                Client.refreshInstalledApps(); // reflect the new app state immediately
+                 // reflect the new app state immediately
+                Client.refreshInstalledApps(waitForBackupFinish);
             });
         },
 
@@ -372,8 +381,10 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
         $scope.appRestore.portBindingsEnabled = {};
         $scope.appRestore.action = 'restore';
 
-        $scope.appRestoreForm.$setPristine();
-        $scope.appRestoreForm.$setUntouched();
+        if ($scope.appRestoreForm) {
+            $scope.appRestoreForm.$setPristine();
+            $scope.appRestoreForm.$setUntouched();
+        }
     };
 
     $scope.readCertificate = function (event) {