diff --git a/webadmin/src/index.html b/webadmin/src/index.html
index 3b3ae9b53..b461068bb 100644
--- a/webadmin/src/index.html
+++ b/webadmin/src/index.html
@@ -121,7 +121,7 @@
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a class="navbar-brand navbar-brand-icon" href="#/"><img ng-src="{{ cloudronAvatar }}" width="40" height="40"/></a>
+                    <a class="navbar-brand navbar-brand-icon" href="#/"><img ng-src="{{ client.avatar }}" width="40" height="40"/></a>
                     <a class="navbar-brand" href="#/">Cloudron</a>
                 </div>
                 <!-- /.navbar-header -->
diff --git a/webadmin/src/js/client.js b/webadmin/src/js/client.js
index b1426bd33..4e241907d 100644
--- a/webadmin/src/js/client.js
+++ b/webadmin/src/js/client.js
@@ -86,6 +86,7 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         this._clientId = '<%= oauth.clientId %>';
         this._clientSecret = '<%= oauth.clientSecret %>';
         this.apiOrigin = '<%= oauth.apiOrigin %>';
+        this.avatar = this.apiOrigin + '/api/v1/cloudron/avatar?' + String(Math.random()).slice(2);
 
         this.setToken(localStorage.token);
     }
diff --git a/webadmin/src/js/main.js b/webadmin/src/js/main.js
index 57eb72df2..2c74ca912 100644
--- a/webadmin/src/js/main.js
+++ b/webadmin/src/js/main.js
@@ -4,8 +4,8 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
     $scope.initialized = false;
     $scope.user = Client.getUserInfo();
     $scope.installedApps = Client.getInstalledApps();
-    $scope.cloudronAvatar = Client.apiOrigin + '/api/v1/cloudron/avatar';
     $scope.config = {};
+    $scope.client = Client;
 
     $scope.update = {
         busy: false,
diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index 8f7bb5195..c0dcf990e 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -40,7 +40,7 @@
                 <h4 class="modal-title">Change your Cloudron Avatar</h4>
             </div>
             <div class="modal-body settings-avatar-selector">
-                <img id="previewAvatar" width="128" height="128" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url || avatar.data || avatar.url}}"/>
+                <img id="previewAvatar" width="128" height="128" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url || client.avatar}}"/>
                 <input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
 
                 <br/>
@@ -94,7 +94,7 @@
 <div class="card" style="margin-bottom: 15px;" ng-show="user.admin">
     <div class="row">
         <div class="col-xs-4" style="min-width: 150px;">
-            <div class="settings-avatar" ng-click="showChangeAvatar()" style="background-image: url('{{avatar.data || avatar.url}}');">
+            <div class="settings-avatar" ng-click="showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
                 <div class="overlay"></div>
             </div>
         </div>
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index a9dc8368c..80eab07e7 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -1,18 +1,15 @@
 'use strict';
 
-angular.module('Application').controller('SettingsController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
+angular.module('Application').controller('SettingsController', ['$scope', '$location', '$rootScope', 'Client', function ($scope, $location, $rootScope, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
 
+    $scope.client = Client;
     $scope.user = Client.getUserInfo();
     $scope.config = Client.getConfig();
     $scope.dnsConfig = {};
 
     $scope.lastBackup = null;
     $scope.backups = [];
-    $scope.avatar = {
-        data: null,
-        url: null
-    };
 
     $scope.developerModeChange = {
         busy: false,
@@ -188,11 +185,12 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
                 if (error) {
                     console.error('Unable to change developer mode.', error);
                 } else {
-                    // Do soft reload, since the browser will not update the avatar URLs in the UI
-                    window.location.reload();
+                    Client.avatar = Client.apiOrigin + '/api/v1/cloudron/avatar?' + String(Math.random()).slice(2);
+                    console.log('set new avatar', Client.avatar)
                 }
 
-                $scope.avatarChange.busy = false;
+                $('#avatarChangeModal').modal('hide');
+                avatarChangeReset();
             });
         });
     };
@@ -263,7 +261,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     Client.onReady(function () {
         fetchBackups();
 
-        $scope.avatar.url = ($scope.config.isCustomDomain ? '//my.' : '//my-') + $scope.config.fqdn + '/api/v1/cloudron/avatar';
+        // $scope.avatar.url = ($scope.config.isCustomDomain ? '//my.' : '//my-') + $scope.config.fqdn + '/api/v1/cloudron/avatar';
     });
 
     // setup all the dialog focus handling