diff --git a/admin/src/admin/static/js/users.js b/admin/src/admin/static/js/users.js
index 6bf1298..e7a1404 100644
--- a/admin/src/admin/static/js/users.js
+++ b/admin/src/admin/static/js/users.js
@@ -24,14 +24,75 @@ $(document).ready(function() {
         });
     });
 
-	$('.btn-new').on('click', function () {
-            $("#modalAdd")[0].reset();
-            $('#modalAddDesktop').modal({
-                backdrop: 'static',
-                keyboard: false
-            }).modal('show');
-            $('#modalAdd').parsley();
-	});
+    // Open new user modal
+	$('.btn-new-user').on('click', function () {
+        $('#modalAddUser').modal({
+            backdrop: 'static',
+            keyboard: false
+        }).modal('show');
+        $.ajax({
+            type: "GET",
+            "url": "/isard-sso-admin/groups_list",
+            success: function(data)
+            {
+                data.forEach(element => {
+                    var groupOrigins = [];
+                    ['keycloak', 'moodle', 'nextcloud'].forEach(o => {
+                        if (element[o]) {
+                            groupOrigins.push(o)
+                        }
+                    })
+                    $(".groups-select").append(
+                    '<option value=' + element.path + '>' + element.name + ' (' + groupOrigins.join(',') + ') </option>'
+                    )
+                });
+                $('.groups-select').select2();
+            },
+            error: function(data)
+            {
+                alert('Something went wrong on our side...')
+            }
+        });
+        $.ajax({
+            type: "GET",
+            "url": "/isard-sso-admin/roles_list",
+            success: function(data)
+            {
+                console.log('ROLES')
+                console.log(data)
+                data.forEach(element => {
+                    $(".role-moodle-select, .role-nextcloud-select, .role-keycloak-select").append(
+                    '<option value=' + element.id + '>' + element.name + '</option>'
+                    )
+                })
+            },
+            error: function(data)
+            {
+                alert('Something went wrong on our side...')
+            }
+        });
+    });
+
+    // Send new user form
+    $('#modalAddUser #send').on('click', function () {
+        var form = $('#modalAddUserForm');
+        formdata = form.serializeObject()
+        console.log('NEW USER')
+        console.log(formdata)
+        // $.ajax({
+        //     type: "POST",
+        //     "url": "/isard-sso-admin/groups_list",
+        //     success: function(data)
+        //     {
+        //         console.log('SUCCESS')
+        //         // $("#modalAddUser").modal('hide');
+        //     },
+        //     error: function(data)
+        //     {
+        //         alert('Something went wrong on our side...')
+        //     }
+        // });
+    });
 
     $('.btn-delete_keycloak').on('click', function () {
         $.ajax({
diff --git a/admin/src/admin/static/templates/pages/modals/users_modals.html b/admin/src/admin/static/templates/pages/modals/users_modals.html
new file mode 100644
index 0000000..3253942
--- /dev/null
+++ b/admin/src/admin/static/templates/pages/modals/users_modals.html
@@ -0,0 +1,100 @@
+<div class="modal fade" id="modalAddUser" tabindex="-1" role="dialog" aria-labelledby="modalAddUser" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <!-- Modal Header -->
+      <div class="modal-header">   
+        <button type="button" class="close" data-dismiss="modal">
+          <span aria-hidden="true">&times;</span>
+          <span class="sr-only">Close</span>
+        </button>
+        <h4 class="modal-title" id="myModalLabel">
+          <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-user"> </i> Add new user
+        </h4>
+      </div>
+      
+      <!-- Modal Body -->
+      <div class="modal-body">
+          
+        <form id="modalAddUserForm" class="form-inline form-label-left"> 
+          <div class="x_panel">
+            <div class="x_title">
+              <h4><i class="fa fa-info-circle" aria-hidden="true"></i> User info</h4>
+              <div class="clearfix"></div>
+            </div>  
+            <div class="x_content" style="padding: 0px;">
+              <div class="row">
+                <div class="col-md-6 col-xs-12">
+                  <label class="control-label" for="name">Username <span class="required">*</span>
+                  </label>
+                  <input id="username" class="roundbox" maxlength="40" pattern="^[-_àèìòùáéíóúñçÀÈÌÒÙÁÉÍÓÚÑÇ .a-zA-Z0-9]+$" data-parsley-length="[4, 40]" name="name" placeholder="Username" data-parsley-trigger="change" required type="text" style="width:100%">
+                </div>
+                <div class="col-md-6 col-xs-12">
+                  <label class="control-label" for="email">Email <span class="required">*</span>
+                  </label>
+                  <input id="email" class="roundbox" data-validate-length-range="4,40" name="email" placeholder="Email" type="email" data-parsley-trigger="change" style="width:100%">
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-6 col-xs-12">
+                  <label class="control-label" for="firstname">First name <span class="required">*</span>
+                  </label>
+                  <input id="firstname" class="roundbox" name="firstname" placeholder="First name"  type="text" style="width:100%">
+                </div>
+                <div class="col-md-6 col-xs-12">
+                  <label class="control-label" for="lastname">Last name <span class="required">*</span>
+                  </label>
+                  <input id="lastname" class="roundbox" name="lastname" placeholder="First name"  type="text" style="width:100%">
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-12 col-xs-12">
+                  <label class="control-label" for="id">Group 
+                  </label>
+                  <select class="groups-select roundbox" name="groups[]" multiple="multiple" style="width:100%">
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="x_panel">
+            <div class="x_title">
+              <h4><i class="fa fa-user-secret" aria-hidden="true"></i> Roles</h4>
+              <div class="clearfix"></div>
+            </div>  
+            <div class="x_content" style="padding: 0px;">
+              <div class="row">
+                <div class="col-md-4 col-xs-12">
+                  <label class="control-label" for="id">Moodle 
+                  </label>
+                  <select class="role-moodle-select" name="moodle" style="width:100%">
+                  </select>
+                </div>
+                <div class="col-md-4 col-xs-12">
+                  <label class="control-label" for="id">Nextcloud 
+                  </label>
+                  <select class="role-nextcloud-select" name="nextcloud" style="width:100%">
+                  </select>
+                </div>
+                <div class="col-md-4 col-xs-12">
+                  <label class="control-label" for="id">Keycloak 
+                  </label>
+                  <select class="role-keycloak-select" name="keycloak" style="width:100%">
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+        <!-- Modal Footer -->
+        <div class="modal-footer">
+          <ul class="nav navbar-left panel_toolbox">
+            <li><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button></li>
+          </ul>
+          <ul class="nav navbar-right panel_toolbox">
+            <li><button id="send" type="button" class="btn btn-success">Create user</button></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/admin/src/admin/static/templates/pages/users.html b/admin/src/admin/static/templates/pages/users.html
index 84b7cb3..b2de05e 100644
--- a/admin/src/admin/static/templates/pages/users.html
+++ b/admin/src/admin/static/templates/pages/users.html
@@ -15,16 +15,21 @@
 				<h3><i class="fa fa-user"></i> Users</h3>
 				<ul class="nav navbar-right panel_toolbox">
 					<li>
-						<a class="btn-new"><span style="color: #5499c7; "><i class="fa fa-plus"></i> Add new</span></a>
-						<a class="btn-delete_keycloak"><span style="color: #c75454; "><i class="fa fa-cross"></i> Delete all keycloak</span></a>
-						<a class="btn-sync_to_moodle"><span style="color: #5499c7; "><i class="fa fa-rocket"></i> Sync to Moodle</span></a>
-						<a class="btn-sync_to_nextcloud"><span style="color: #5499c7; "><i class="fa fa-rocket"></i> Sync to Nextcloud</span></a>
+						<a class="btn-new-user"><span style="color: #5499c7; "><i class="fa fa-plus"></i> Add new</span></a>
 					</li>
         </ul>
         <div class="clearfix"></div>
 			</div>
 			<div class="x_content">
-				<p class="text-muted font-13 m-b-30"></p>
+				<button class="btn btn-primary btn-xs btn-sync_to_nextcloud">
+					<i class="fa fa-refresh" aria-hidden="true"></i> Sync to Nextcloud
+				</button>
+				<button class="btn btn-primary btn-xs btn-sync_to_moodle">
+					<i class="fa fa-refresh" aria-hidden="true"></i> Sync to Moodle
+				</button>
+				<button class="btn btn-danger btn-xs btn-delete_keycloak">
+					<i class="fa fa-trash"></i> Delete all keycloak
+				</button>
 				<table id="users" class="table" width="100%">
 					<thead>
 						<tr>
@@ -51,6 +56,8 @@
 	</div>
 </div>
 
+{% include 'pages/modals/users_modals.html' %}
+
 {% endblock %}
 
 {% block pagescript %}