diff --git a/dashboard/src/js/client.js b/dashboard/src/js/client.js
index d9dc91490..6ea8bb883 100644
--- a/dashboard/src/js/client.js
+++ b/dashboard/src/js/client.js
@@ -826,8 +826,16 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.hasCloudronBackground = function (callback) {
+        get('/api/v1/branding/cloudron_background', null, function (error, data, status) {
+            console.log('hasCloudronBackground...')
+            if (error && error.statusCode !== 404) callback(error);
+            else if (error) callback(null, false);
+            else callback(null, status === 200);
+        });
+    };
+
     Client.prototype.changeCloudronBackground = function (background, callback) {
-        // Blob type if object
         var fd = new FormData();
         if (background) fd.append('background', background);
 
@@ -839,6 +847,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         post('/api/v1/branding/cloudron_background', fd, config, function (error, data, status) {
             if (error) return callback(error);
             if (status !== 202) return callback(new ClientError(status, data));
+
             callback(null);
         });
     };
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index febdfdc73..e60654042 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -1745,8 +1745,8 @@ footer {
 .branding-background {
     position: relative;
     cursor: pointer;
-    width: 64px;
-    height: 64px;
+    width: 256px;
+    max-height: 256px;
     background-position: center;
     background-size: 100% 100%;
     background-repeat: no-repeat;
diff --git a/dashboard/src/views/branding.html b/dashboard/src/views/branding.html
index 950ee47da..db2cfac44 100644
--- a/dashboard/src/views/branding.html
+++ b/dashboard/src/views/branding.html
@@ -55,12 +55,13 @@
 
             <div class="form-group">
               <div>
-                <label class="control-label">{{ 'branding.background' | tr }}</label>
-                <div class="branding-background">
+                <input id="userBackgroundInput" type="checkbox" ng-model="background.enabled">
+                <label for="userBackgroundInput" class="control-label">Use background image</label>
+                <div class="branding-background" ng-show="background.enabled" ng-click="background.selectNew()">
                   <img ng-src="{{ background.url() }}"/>
                   <div class="overlay"></div>
                 </div>
-                <input type="file" id="backgroundFileInput" style="display: block" accept="image/*"/>
+                <input type="file" id="backgroundFileInput" style="display: none" accept="image/*"/>
               </div>
             </div>
 
diff --git a/dashboard/src/views/branding.js b/dashboard/src/views/branding.js
index 772d4572a..be0a8bfe9 100644
--- a/dashboard/src/views/branding.js
+++ b/dashboard/src/views/branding.js
@@ -135,21 +135,33 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
     };
 
     $scope.background = {
+        enabled: false,
         file: null,
         src: null,
         newImageFile: null,
+        cacheBusting: Date.now(),
 
-        url: function () {
-            if ($scope.background.src) {
-                return $scope.background.src;
+        url() {
+            if ($scope.background.src) return $scope.background.src;
+            else return `${Client.apiOrigin}/api/v1/cloudron/background?${$scope.background.cacheBusting}`;
+        },
+
+        selectNew() {
+            document.getElementById('backgroundFileInput').click();
+        },
+
+        submit(callback) {
+            if ($scope.background.enabled) {
+                if ($scope.background.newImageFile) Client.changeCloudronBackground($scope.background.newImageFile, callback);
+                else callback();
             } else {
-                return `${Client.apiOrigin}/api/v1/cloudron/background`;
+                Client.changeCloudronBackground(null, callback);
             }
         }
     };
 
-    $('#backgroundFileInput').get(0).onchange = function (event) {
-        var fr = new FileReader();
+    document.getElementById('backgroundFileInput').onchange = function (event) {
+        const fr = new FileReader();
         fr.onload = function () {
             const image = new Image();
             image.onload = function () {
@@ -191,7 +203,7 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
         avatar: null,
         avatarBlob: null,
 
-        avatarUrl: function () {
+        avatarUrl() {
             if ($scope.about.avatar) {
                 return $scope.about.avatar.data || $scope.about.avatar.url;
             } else {
@@ -199,13 +211,22 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
             }
         },
 
-        refresh: function () {
+        refresh() {
             $scope.about.cloudronName = $scope.config.cloudronName;
             $scope.about.avatar = null;
-            $scope.about.background = null;
+
+            Client.hasCloudronBackground(function (error, result) {
+                if (error) return console.error('Failed to get background state.', error);
+
+                $scope.background.enabled = result;
+                $scope.background.file = null;
+                $scope.background.src = null;
+                $scope.background.newImageFile = null;
+                $scope.background.cacheBusting = Date.now();
+            });
         },
 
-        submit: function () {
+        submit() {
             $scope.about.error.name = null;
             $scope.about.busy = true;
 
@@ -233,8 +254,7 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
                         return;
                     }
 
-                    var changeBackground = $scope.background.newImageFile ? Client.changeCloudronBackground.bind(null, $scope.background.newImageFile) : NOOP;
-                    changeBackground(function (error) {
+                    $scope.background.submit(function (error) {
                         if (error) {
                             $scope.about.busy = false;
                             console.error('Unable to change background.', error);
@@ -246,8 +266,8 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
 
                             $scope.aboutForm.$setPristine();
                             $scope.about.avatar = null;
-                            $scope.background.file = null;
-                            $scope.background.newImageFile = null;
+                            $scope.about.refresh();
+
                             $scope.about.busy = false;
                         });
                     });