diff --git a/webadmin/src/js/client.js b/webadmin/src/js/client.js
index 090f0c123..42728b4c5 100644
--- a/webadmin/src/js/client.js
+++ b/webadmin/src/js/client.js
@@ -162,6 +162,7 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         this._userInfo.id = userInfo.id;
         this._userInfo.username = userInfo.username;
         this._userInfo.email = userInfo.email;
+        this._userInfo.displayName = userInfo.displayName;
         this._userInfo.admin = !!userInfo.admin;
         this._userInfo.gravatar = 'https://www.gravatar.com/avatar/' + md5.createHash(userInfo.email.toLowerCase()) + '.jpg?s=24&d=mm';
         this._userInfo.gravatarHuge = 'https://www.gravatar.com/avatar/' + md5.createHash(userInfo.email.toLowerCase()) + '.jpg?s=128&d=mm';
diff --git a/webadmin/src/views/account.html b/webadmin/src/views/account.html
index ab242d9d9..8c85c1fca 100644
--- a/webadmin/src/views/account.html
+++ b/webadmin/src/views/account.html
@@ -71,6 +71,34 @@
     </div>
 </div>
 
+<!-- Modal change displayName -->
+<div class="modal fade" id="displayNameChangeModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Change Your Display Name</h4>
+            </div>
+            <div class="modal-body">
+                <form name="displayNameChangeForm" role="form" novalidate ng-submit="displayNameChange.submit()" autocomplete="off">
+                    <div class="form-group" ng-class="{ 'has-error': (displayNameChangeForm.displayName.$dirty && displayNameChangeForm.displayName.$invalid) }">
+                        <label class="control-label">Display Name</label>
+                        <div class="control-label" ng-show="(!displayNameChangeForm.displayName.$dirty && displayNameChange.error.displayName) || (displayNameChangeForm.displayName.$dirty && displayNameChangeForm.displayName.$invalid)">
+                            <small ng-show="displayNameChangeForm.displayName.$error.required">A valid display name is required</small>
+                            <small ng-show="(displayNameChangeForm.displayName.$dirty && displayNameChangeForm.displayName.$invalid) && !displayNameChangeForm.displayName.$error.required">This display name is not valid</small>
+                        </div>
+                        <input type="text" class="form-control" ng-model="displayNameChange.displayName" name="displayName" required autofocus>
+                    </div>
+                    <input class="ng-hide" type="submit" ng-disabled="displayNameChangeForm.$invalid"/>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-success" ng-click="displayNameChange.submit()" ng-disabled="displayNameChangeForm.$invalid || displayNameChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="displayNameChange.busy"></i> Change</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <br/>
 
 <div style="max-width: 600px; margin: 0 auto;">
@@ -89,7 +117,11 @@
                 <table width="100%">
                     <tr>
                         <td class="text-muted" style="vertical-align: top;">Username</td>
-                        <td class="text-right" style="vertical-align: top;">{{ user.username }} &nbsp;&nbsp;</td>
+                        <td class="text-right" style="vertical-align: top;">{{ user.username }} &nbsp;&nbsp;&nbsp;</td>
+                    </tr>
+                    <tr>
+                        <td class="text-muted" style="vertical-align: top;">Display Name</td>
+                        <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.displayName }} <a href="" ng-click="displayNameChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
                     </tr>
                     <tr>
                         <td class="text-muted" style="vertical-align: top;">Email</td>
diff --git a/webadmin/src/views/account.js b/webadmin/src/views/account.js
index e49b6d190..0256fe5f8 100644
--- a/webadmin/src/views/account.js
+++ b/webadmin/src/views/account.js
@@ -110,6 +110,52 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
         }
     };
 
+    $scope.displayNameChange = {
+        busy: false,
+        error: {},
+        displayName: '',
+
+        reset: function () {
+            $scope.displayNameChange.busy = false;
+            $scope.displayNameChange.error.displayName = null;
+            $scope.displayNameChange.displayName = '';
+
+            $scope.displayNameChangeForm.$setUntouched();
+            $scope.displayNameChangeForm.$setPristine();
+        },
+
+        show: function () {
+            $scope.displayNameChange.reset();
+            $scope.displayNameChange.displayName = $scope.user.displayName;
+            $('#displayNameChangeModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.displayNameChange.error.displayName = null;
+            $scope.displayNameChange.busy = true;
+
+            var user = {
+                id: $scope.user.id,
+                displayName: $scope.displayNameChange.displayName
+            };
+
+            Client.updateUser(user, function (error) {
+                $scope.displayNameChange.busy = false;
+
+                if (error) {
+                    console.error('Unable to change displayName.', error);
+                    return;
+                }
+
+                // update user info in the background
+                Client.refreshUserInfo();
+
+                $scope.displayNameChange.reset();
+                $('#displayNameChangeModal').modal('hide');
+            });
+        }
+    };
+
     $scope.removeAccessTokens = function (client) {
         client.busy = true;
 
@@ -138,7 +184,7 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
     });
 
     // setup all the dialog focus handling
-    ['passwordChangeModal', 'emailChangeModal'].forEach(function (id) {
+    ['passwordChangeModal', 'emailChangeModal', 'displayNameChangeModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });