diff --git a/backend/AppDB.php b/backend/AppDB.php
index 576cb51876e4edf17a4908eec41ff29c1d8f9dd6..9c315bffc1781ebb8e9e8418107b65aefd449841 100644
--- a/backend/AppDB.php
+++ b/backend/AppDB.php
@@ -416,8 +416,7 @@ class AppDB extends Database
     {
         $this->checkAdmin();
         
-        $res = $this->query( "INSERT INTO pgroup (name) 
-						VALUES (E'" . pg_escape_string( $name ) . "') RETURNING id;" );
+        $res = $this->query( "INSERT INTO pgroup (name) VALUES (E'" . pg_escape_string( $name ) . "') RETURNING id;" );
         return $res[ 0 ][ 'id' ];
     }
     public function setUserGroupName( $id, $name )
diff --git a/js/backend.js b/js/backend.js
index 0763ab1ba47b15d5a91aedd9828f403d521fd108..92ef6104dbe37464fe58be929774ab4a7620e272 100644
--- a/js/backend.js
+++ b/js/backend.js
@@ -1327,23 +1327,79 @@ function Pianos4Backend(params)
         _onEditItemName(item, 'setUserGroupName')
     }
 
-    var onCreateNewGroup = function(item)
+    var onCreateNewGroup = function( item )
     {
+        var validate = function()
+        {
+            var name = $( '#groupname' ).val();
+
+            if( name == "" )
+            {
+                toastr.error( "need a name for the new user group" );
+            } else {
+                $( "#newusegroupui" ).remove();
+                
+                model.rpc( 'createUserGroup', { 'name': name }, function(){
+                    self.cache( 'acl-groups', null );
+                    tree.reload( item.id );
+                } );
+                
+                $( '#newusegroupui' ).dialog( 'close' );
+            }
+        }
+        
+        $( "#newusegroupui" ).remove();
+
+        var createnewusergroup = $( '<div />' )
+            .css( 'padding-top', '10px' )
+            .css( 'padding-bottom', '10px' )
+            .append(
+                $( '<div />' )
+                    .css( 'display', 'grid' )
+                    .css( 'grid-template-columns', '1fr 2fr' )
+                    .css( 'grid-gap', '2px' )
+                    .css( 'height', '100%' )
+                    .css( 'width', '100%' )
+                    .append( $( '<div />' ).text( "Name" ) )
+                    .append(
+                        $( '<input />' )
+                            .attr( 'type', 'input' )
+                            .attr( 'id', 'groupname' )
+                            .on( 'keydown', function( e )
+                            {
+                                if ( e.which == 13 )
+                                {
+                                    e.preventDefault();
+                                    validate();
+                                }
+                            } )
+                    )
+            );
+
         var dlgopts = {
-            title: 'New user group',
-            fields: [
-                { type: 'text', name: 'name', label: 'Name', constraints: ['not-empty'] },
-            ],
-            ok: function(data) {
-                assert('name' in data);
-                model.rpc('createUserGroup', {'name': data.name}, function() {
-                    self.cache('acl-groups',null);
-                    tree.reload(item.id);
-                });
-            },
-        };
+            autoOpen: true,
+            modal: true,
+            width: 300,
+            resizable: true,
+            title: "New user group",
+            buttons: {
+                'OK': function()
+                {
+                    validate();
+                },
+                'Close': function()
+                {
+                    $( this ).dialog( 'close' );
+                    $( "#newusegroupui" ).remove();
+                },
+            }
+        }
 
-        Pianos4Backend.showFormDialog(dlgopts);
+        $( '<div />' )
+            .attr( 'id', 'newusegroupui' )
+            .addClass( 'pianos4_dialog' )
+            .append( createnewusergroup )
+            .dialog( dlgopts );
     }
 
     var getDefaultPasswordListForUsers = function( item )