diff --git a/dashboard/src/views/settings.html b/dashboard/src/views/settings.html
index dffc05bb7..143c33198 100644
--- a/dashboard/src/views/settings.html
+++ b/dashboard/src/views/settings.html
@@ -1,3 +1,53 @@
+<!-- Modal update -->
+<div class="modal fade" id="updateModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title">Cloudron Update to <b>{{config.update.box.version}}</b> </h4>
+            </div>
+            <div class="modal-body">
+                <div ng-hide="installedApps | readyToUpdate">
+                    <p>The apps below are blocking the update because they have pending actions:</p>
+                    <ul>
+                        <li ng-repeat="app in installedApps | inProgressApps">{{app.location}}</li>
+                    </ul>
+                    <br/>
+                    <b class="text-danger">Please wait for the app actions to finish.</b>
+                    <br/>
+                    <br/>
+                </div>
+
+                <div ng-show="installedApps | readyToUpdate">
+                    <b ng-show="config.update.box.upgrade" class="text-danger">
+                        This update upgrades the base system and will cause some application downtime.<br/>
+                    </b>
+                    <p>Changes:</p>
+                    <ul>
+                        <li ng-repeat="change in config.update.box.changelog" ng-bind-html="change | markdown2html"></li>
+                    </ul>
+                    <br/>
+                    <p ng-show="update.error.generic" class="text-danger">{{ update.error.generic }}</p>
+                    <div ng-hide="config.provider !== 'caas' && config.update.box.upgrade">
+                        <fieldset>
+                            <form name="update_form" role="form" ng-submit="update.submit()" autocomplete="off">
+                                <input class="ng-hide" type="submit" ng-disabled="update_form.$invalid || update.busy"/>
+                            </form>
+                        </fieldset>
+                    </div>
+                    <div ng-show="config.provider !== 'caas' && config.update.box.upgrade">
+                        <b>Please use the CLI tool to upgrade by following the instructions <a ng-href="{{ config.webServerOrigin + '/documentation/updates/' }}" target="_blank" >here</a>.</b>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-success" ng-click="update.submit()" ng-disabled="update_form.$invalid || update.busy" ng-show="(installedApps | readyToUpdate) && !(config.provider !== 'caas' && config.update.box.upgrade)"><i class="fa fa-circle-o-notch fa-spin" ng-show="update.busy"></i> Update</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Modal change avatar -->
 <div class="modal fade" id="avatarChangeModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
@@ -250,33 +300,46 @@
   </div>
 
   <div class="card" style="margin-bottom: 15px;">
-      <div class="row">
-          <div class="col-xs-4" style="min-width: 150px;">
-              <div class="settings-avatar" ng-click="avatarChange.showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
-                  <div class="overlay"></div>
-              </div>
-          </div>
-          <div class="col-xs-8">
-              <table width="100%">
-                  <tr>
-                      <td class="text-muted" style="vertical-align: top;">Name</td>
-                      <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.cloudronName }} <a href="" ng-click="cloudronNameChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
-                  </tr>
-                  <tr ng-show="config.provider === 'caas'">
-                      <td class="text-muted" style="vertical-align: top;">Model</td>
-                      <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.size }} - {{ config.region }}</td>
-                  </tr>
-                  <tr>
-                      <td class="text-muted" style="vertical-align: top;">Version</td>
-                      <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.version }}</td>
-                  </tr>
-                  <tr>
-                      <td class="text-muted" style="vertical-align: top;">Provider</td>
-                      <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ prettyProviderName(config.provider) }}</td>
-                  </tr>
-              </table>
-          </div>
+    <div class="row">
+      <div class="col-xs-4" style="min-width: 150px;">
+        <div class="settings-avatar" ng-click="avatarChange.showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
+          <div class="overlay"></div>
+        </div>
       </div>
+      <div class="col-xs-8">
+        <table width="100%">
+          <tr>
+            <td class="text-muted" style="vertical-align: top;">Name</td>
+            <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.cloudronName }} <a href="" ng-click="cloudronNameChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
+          </tr>
+          <tr ng-show="config.provider === 'caas'">
+            <td class="text-muted" style="vertical-align: top;">Model</td>
+            <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.size }} - {{ config.region }}</td>
+          </tr>
+          <tr>
+            <td class="text-muted" style="vertical-align: top;">Version</td>
+            <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.version }}</td>
+          </tr>
+          <tr>
+            <td class="text-muted" style="vertical-align: top;">Provider</td>
+            <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ prettyProviderName(config.provider) }}</td>
+          </tr>
+          <tr>
+            <td colspan="2">&nbsp;</td>
+          </tr>
+          <tr>
+            <td colspan="2">&nbsp;</td>
+          </tr>
+          <tr>
+            <td class="text-muted" style="vertical-align: top;"></td>
+            <td class="text-right" style="vertical-align: bottom;">
+              <button class="btn btn-primary pull-right" ng-hide="config.update.box" ng-disabled="autoUpdate.busy" ng-click="autoUpdate.checkNow()"><i class="fa fa-circle-o-notch fa-spin" ng-show="autoUpdate.busy"></i> Check for Updates</button>
+              <button class="btn btn-success pull-right" ng-show="config.update.box" ng-click="update.show(update_form)">Update Available</button>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
   </div>
 
   <div class="text-left" ng-show="config.provider === 'caas'">
diff --git a/dashboard/src/views/settings.js b/dashboard/src/views/settings.js
index 182ba8600..84af8d98e 100644
--- a/dashboard/src/views/settings.js
+++ b/dashboard/src/views/settings.js
@@ -8,6 +8,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     $scope.config = Client.getConfig();
     $scope.backupConfig = {};
     $scope.appstoreConfig = {};
+    $scope.installedApps = Client.getInstalledApps();
 
     $scope.lastBackup = null;
     $scope.backups = [];
@@ -76,6 +77,45 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         }
     };
 
+    $scope.update = {
+        error: {},
+        busy: false,
+
+        show: function (form) {
+            $scope.update.error.generic = null;
+            $scope.update.busy = false;
+
+            form.$setPristine();
+            form.$setUntouched();
+
+            if (!$scope.config.update.box.sourceTarballUrl) {
+                $('#setupSubscriptionModal').modal('show');
+            } else {
+                $('#updateModal').modal('show');
+            }
+        },
+
+        submit: function () {
+            $scope.update.error.generic = null;
+            $scope.update.busy = true;
+
+            Client.update(function (error) {
+                if (error) {
+                    if (error.statusCode === 409) {
+                        $scope.update.error.generic = 'Please try again later. The Cloudron is creating a backup at the moment.';
+                    } else {
+                        $scope.update.error.generic = error.message;
+                        console.error('Unable to update.', error);
+                    }
+                    $scope.update.busy = false;
+                    return;
+                }
+
+                window.location.href = '/update.html';
+            });
+        }
+    };
+
     $scope.planChange = {
         busy: false,
         error: {},