diff --git a/webadmin/src/views/users.html b/webadmin/src/views/users.html
index cfb53199e..b2942be13 100644
--- a/webadmin/src/views/users.html
+++ b/webadmin/src/views/users.html
@@ -148,6 +148,36 @@
     </div>
 </div>
 
+<!-- Modal add group -->
+<div class="modal fade" id="groupAddModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Add Group</h4>
+            </div>
+            <div class="modal-body">
+                <form name="groupAddForm" role="form" novalidate ng-submit="doAddGroup()" autocomplete="off">
+                    <div class="form-group" ng-class="{ 'has-error': (groupAddForm.name.$dirty && groupAddForm.name.$invalid) || (!groupAddForm.name.$dirty && groupadd.error.name) }">
+                        <label class="control-label" for="groupAddUsername">Name</label>
+                        <div class="control-label" ng-show="(!groupAddForm.name.$dirty && groupadd.error.name) || (groupAddForm.name.$dirty && groupAddForm.name.$invalid) || (!groupAddForm.name.$dirty && groupadd.error.name)">
+                            <small ng-show="groupAddForm.name.$error.required">A name is required</small>
+                            <small ng-show="groupAddForm.name.$error.minlength">The name is too short</small>
+                            <small ng-show="groupAddForm.name.$error.maxlength">The name is too long</small>
+                            <small ng-show="!groupAddForm.name.$dirty && groupadd.error.name">{{ groupadd.error.name }}</small>
+                        </div>
+                        <input type="text" class="form-control" ng-model="groupadd.name" id="groupAddUsername" name="name" ng-maxlength="200" ng-minlength="2" required autofocus>
+                    </div>
+                    <input class="ng-hide" type="submit" ng-disabled="groupAddForm.$invalid || groupadd.alreadyTaken === groupadd.name"/>
+                </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="doAddGroup()" ng-disabled="groupAddForm.$invalid || groupadd.busy"><i class="fa fa-spinner fa-pulse" ng-show="groupadd.busy"></i> Add Group</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="content">
 
     <br/>
diff --git a/webadmin/src/views/users.js b/webadmin/src/views/users.js
index 2d13da527..d3eef7f7a 100644
--- a/webadmin/src/views/users.js
+++ b/webadmin/src/views/users.js
@@ -35,6 +35,12 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         password: ''
     };
 
+    $scope.groupadd = {
+        busy: false,
+        error: {},
+        name: ''
+    };
+
     $scope.isMe = function (user) {
         return user.username === Client.getUserInfo().username;
     };
@@ -59,6 +65,16 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         });
     };
 
+    $scope.showGroupAdd = function () {
+        $scope.groupadd.error = {};
+        $scope.groupadd.name = '';
+
+        $scope.groupAddForm.$setUntouched();
+        $scope.groupAddForm.$setPristine();
+
+        $('#groupAddModal').modal('show');
+    };
+
     $scope.showUserAdd = function () {
         $scope.useradd.error = {};
         $scope.useradd.username = '';