diff --git a/src/js/client.js b/src/js/client.js
index 2d3ffa41d..eff7eb86a 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -333,7 +333,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         this._userInfo.twoFactorAuthenticationEnabled = userInfo.twoFactorAuthenticationEnabled;
         this._userInfo.admin = userInfo.admin;
         this._userInfo.source = userInfo.source;
-        this._userInfo.avatarUrl = userInfo.avatarUrl;
+        this._userInfo.avatarUrl = userInfo.avatarUrl + '?' + Date.now(); // we add the timestamp to avoid caching
     };
 
     Client.prototype.setConfig = function (config) {
diff --git a/src/theme.scss b/src/theme.scss
index 8de0658e9..a96d9ad9c 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1038,6 +1038,10 @@ footer {
     cursor: pointer;
 }
 
+.copy {
+    cursor: copy;
+}
+
 .arrow {
     cursor: default;
 }
@@ -1144,12 +1148,15 @@ footer {
 }
 
 .settings-avatar-selector {
-    text-align: center;
 
     .grid {
         margin-top: 20px;
     }
 
+    .preview-avatar {
+        text-align: center;
+    }
+
     .item {
         display: inline-block;
         background-size: cover;
diff --git a/src/views/profile.html b/src/views/profile.html
index 9ad907acb..efded225f 100644
--- a/src/views/profile.html
+++ b/src/views/profile.html
@@ -7,13 +7,26 @@
         <h4 class="modal-title">Change your Avatar</h4>
       </div>
       <div class="modal-body settings-avatar-selector">
-        <img id="previewAvatar" width="128" height="128" class="hand" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url}}" ng-click="avatarChange.showCustomAvatarSelector()"/>
-        <input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
+        <div class="radio">
+          <label>
+            <input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="true_string">
+            Use Gravatar
+          </label>
+        </div>
+        <div class="radio">
+          <label>
+            <input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="">
+            Use Custom Picture
+          </label>
+        </div>
+        <div ng-hide="avatarChange.useGravatar" class="preview-avatar">
+          <img id="previewAvatar" width="128" height="128" class="copy" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url}}" ng-click="avatarChange.showCustomAvatarSelector()"/>
+          <input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
+        </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary pull-left" ng-click="avatarChange.clearAvatar()">Use Gravatar</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> Change</button>
+        <button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy || (avatarChange.useGravatarOrig === avatarChange.useGravatar && (avatarChange.useGravatar || !avatarChange.pictureChanged))"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> Save</button>
       </div>
     </div>
   </div>
diff --git a/src/views/profile.js b/src/views/profile.js
index c04ad5c5c..46a5bed0d 100644
--- a/src/views/profile.js
+++ b/src/views/profile.js
@@ -101,6 +101,9 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
         busy: false,
         error: {},
         avatar: null,
+        useGravatar: '',
+        useGravatarOrig: '',
+        pictureChanged: false,
 
         getBlobFromImg: function (img, callback) {
             var size = 256;
@@ -137,9 +140,12 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
             canvas.toBlob(callback);
         },
 
-        clearAvatar: function () {
-            Client.clearAvatar(function (error) {
-                if (error) return console.error(error);
+        doChangeAvatar: function () {
+            $scope.avatarChange.error.avatar = null;
+            $scope.avatarChange.busy = true;
+
+            function done(error) {
+                if (error) return console.error('Unable to change avatar.', error);
 
                 Client.refreshUserInfo(function (error) {
                     if (error) return console.error(error);
@@ -147,35 +153,29 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
                     $('#avatarChangeModal').modal('hide');
                     $scope.avatarChange.avatarChangeReset();
                 });
-            });
-        },
+            }
 
-        doChangeAvatar: function () {
-            $scope.avatarChange.error.avatar = null;
-            $scope.avatarChange.busy = true;
-
-            var img = document.getElementById('previewAvatar');
-            $scope.avatarChange.avatar.file = $scope.avatarChange.getBlobFromImg(img, function (blob) {
-                Client.changeAvatar(blob, function (error) {
-                    if (error) return console.error('Unable to change cloudron avatar.', error);
-
-                    Client.refreshUserInfo(function (error) {
-                        if (error) return console.error(error);
-
-                        $('#avatarChangeModal').modal('hide');
-                        $scope.avatarChange.avatarChangeReset();
-                    });
+            if ($scope.avatarChange.useGravatar) {
+                Client.clearAvatar(done);
+            } else {
+                var img = document.getElementById('previewAvatar');
+                $scope.avatarChange.getBlobFromImg(img, function (blob) {
+                    Client.changeAvatar(blob, done);
                 });
-            });
+            }
         },
 
         setPreviewAvatar: function (avatar) {
+            $scope.avatarChange.pictureChanged = true;
             $scope.avatarChange.avatar = avatar;
         },
 
         avatarChangeReset: function () {
             $scope.avatarChange.error.avatar = null;
-            $scope.avatarChange.avatar = {
+            $scope.avatarChange.useGravatar = $scope.user.avatarUrl.indexOf('https://www.gravatar.com') === 0 ? 'true_string' : '';
+            $scope.avatarChange.useGravatarOrig = $scope.avatarChange.useGravatar;
+            $scope.avatarChange.pictureChanged = false;
+            $scope.avatarChange.avatar = $scope.avatarChange.useGravatar ? {} : {
                 url: $scope.user.avatarUrl
             };
             $scope.avatarChange.busy = false;