diff --git a/admin/themes/default/js/group_list.js b/admin/themes/default/js/group_list.js
new file mode 100644
index 000000000..69ff913c5
--- /dev/null
+++ b/admin/themes/default/js/group_list.js
@@ -0,0 +1,338 @@
+/*-------
+Group Popup
+-------*/
+
+$(".group_details_popup_trigger").click(function () {
+  $(".Group_details-popup-container").show();
+});
+
+$(".CloseGroupPopup").click(function () {
+  $(".Group_details-popup-container").hide();
+});
+
+/*-------
+ Add User toggle and reduces height of user list when add user form is visible
+ -------*/
+
+$("#form-btn").click(function () {
+  $("#cancel").show();
+  $("#addUserLabel").show();
+  $(".input-user-name").show();
+  $("#UserSubmit").show();
+  $("#form-btn").hide();
+  $(".groups .list_user").css("max-height", "100px");
+});
+
+$("#cancel").click(function () {
+  $("#cancel").hide();
+  $("#addUserLabel").hide();
+  $(".input-user-name").hide();
+  $("#UserSubmit").hide();
+  $("#form-btn").show();
+  $(".groups .list_user").css("max-height", "200px");
+});
+
+/*-------
+ Add Group toggle
+ -------*/
+
+$("#showAddGroup").click(function () {
+  $("#addGroupForm").css("display", "inline-block");
+  $("#showAddGroup").css("display", "none");
+});
+
+var closeAddGroup = function () {
+  $("#addGroupForm").css("display", "none");
+  $("#showAddGroup").css("display", "inline-block");
+};
+
+$("#addGroupClose").click(closeAddGroup);
+
+$(".actionButtons input").click(closeAddGroup);
+
+/*-------
+ Add Group Submit
+ -------*/
+
+jQuery(document).ready(function () {
+  $("#addGroupForm form").on("submit", function (e) {
+    e.preventDefault();
+    let name = $("#addGroupForm input[type=text]").val();
+    jQuery.ajax({
+      url: "ws.php?format=json&method=pwg.groups.add",
+      type: "POST",
+      data: "name=" + name + "&pwg_token=" + pwg_token,
+      success: function (raw_data) {
+        data = jQuery.parseJSON(raw_data);
+        if (data.stat === "ok") {
+          $(".addGroupFormLabelAndInput input").val('');
+          id = data.result.groups[0].id;
+          //Setup the group
+          newgroup = $("#group-template").clone().attr("id", "group-" + id);
+          newgroup.css("order", -id);
+          newgroup.attr("data-id", id);
+          newgroup.find("#group_name").html(name);
+          newgroup.find(".Group-checkbox label").attr("for", "Group-Checkbox-selection-" + id);
+          newgroup.find(".Group-checkbox input").attr("id", "Group-Checkbox-selection-" + id);
+          newgroup.find(".input-edit-group-name").attr("placeholder", name);
+          newgroup.find(".group_number_users").html("0 " + member_default);
+
+          //Setup the icon color
+          var colors = [["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]];
+          var colorId = Number(id)%4;
+          newgroup.find(".icon-users-1").attr("style", "color:"+colors[colorId][0]+"; background-color:"+colors[colorId][1]);  
+          
+          setupGroupBox(newgroup);
+          
+          //Place group in first Place 
+          newgroup.appendTo(".groups");
+          newgroup.find(".groupMessage").html(group_created);
+          newgroup.find(".groupMessage").fadeIn();
+          newgroup.find(".groupMessage").delay(4000).fadeOut();
+        } else {
+          $("#showAddGroup .groupError").html(name_taken);
+          $("#showAddGroup .groupError").fadeIn();
+          $("#showAddGroup .groupError").delay(3000).fadeOut();
+          $("#showAddGroup .groupError").delay(10).html(contents);
+        }
+      },
+      error: function (err) {
+        console.log(err);
+      },
+    });
+  });
+});
+
+/*-------
+ User List group pop-in
+ -------*/
+
+var modalUL = document.getElementById("UserList");
+
+var btn = document.getElementById("UserListTrigger");
+
+var close = document.getElementsByClassName("CloseUserList")[0];
+
+btn.onclick = function () {
+  modalUL.style.visibility = "visible";
+};
+
+close.onclick = function () {
+  modalUL.style.visibility = "hidden";
+};
+
+/*-------
+ SETUP JS ON GROUP BOX
+ -------*/
+jQuery(document).ready(function () {
+  $(".GroupContainer").each(function () {
+    setupGroupBox($(this));
+  });
+});
+
+var setupGroupBox = function (groupBox) {
+  var id = groupBox.data("id");
+
+  /* Change background color of group block if checked in selection mode */
+  groupBox.find(".Group-checkbox input[type='checkbox']").change(function () {
+    if ($(this).is(":checked")) {
+      groupBox.addClass("OrangeBackground");
+      groupBox.find(".icon-users-1").addClass("OrangeIcon");
+      groupBox.find(".group_number_users").addClass("OrangeFont");
+
+      //Display item selection on selection panel
+      item = $(
+        "<div data-id=" +
+          groupBox.data("id") +
+          ">" +
+          "<a class='icon-cancel'></a>" +
+          "<p>" +
+          groupBox.find("#group_name").html() +
+          "</p> </div>"
+      );
+      item.appendTo(".DeleteGroupList");
+      item.find("a").on("click", function () {
+        groupBox.find(".Group-checkbox input").attr("checked", false);
+        groupBox
+          .find(".Group-checkbox input[type='checkbox']")
+          .trigger("change");
+      });
+      updateSelectionPanel();
+    } else {
+      groupBox.removeClass("OrangeBackground");
+      groupBox.find(".icon-users-1").removeClass("OrangeIcon");
+      groupBox.find(".group_number_users").removeClass("OrangeFont");
+      $(".DeleteGroupList div").each(function () {
+        if ($(this).data("id") == id) {
+          $(this).remove();
+        }
+      });
+      updateSelectionPanel();
+    }
+  });
+
+  /* Display the option on the click on "..." */
+  groupBox.find(".group-dropdown-options").click(function GroupOptions() {
+    $(this).find("#GroupOptions").toggle();
+  });
+
+  /* Set the delete action */
+  groupBox.find("#GroupDelete").on("click", function () {
+    deleteGroup(id);
+  });
+
+  /* Set the rename action */
+  let contents = groupBox.find("#group_name").html();
+  groupBox.find("#group_name").blur(function() {
+    if (contents!=groupBox.find("#group_name").html()){
+      jQuery.ajax({
+        url: "ws.php?format=json&method=pwg.groups.setInfo",
+        type: "POST",
+        data: "group_id=" + id + "&pwg_token=" + pwg_token + "&name="+groupBox.find("#group_name").html(),
+        success: function (raw_data) {
+          data = jQuery.parseJSON(raw_data);
+          if (data.stat === "ok") {
+            groupBox.find(".groupMessage").html(renaming_done);
+            groupBox.find(".groupMessage").fadeIn();
+            groupBox.find(".groupMessage").delay(3000).fadeOut();
+            contents = groupBox.find("#group_name").html();
+          } else {
+            groupBox.find(".groupError").html(name_taken);
+            groupBox.find(".groupError").fadeIn();
+            groupBox.find(".groupError").delay(3000).fadeOut();
+            groupBox.find("#group_name").delay(10).html(contents);
+          }
+        },
+        error: function (err) {
+          console.log(err);
+        },
+      });
+    }
+  });
+};
+
+var deleteGroup = function (id) {
+  jQuery.ajax({
+    url: "ws.php?format=json&method=pwg.groups.delete",
+    type: "POST",
+    data: "group_id=" + id + "&pwg_token=" + pwg_token,
+    success: function (raw_data) {
+      data = jQuery.parseJSON(raw_data);
+      if (data.stat === "ok") {
+        $("#group-" + id).remove();
+      }
+    },
+    error: function (err) {
+      console.log(err);
+    },
+  });
+};
+
+/*-------
+ Selection mode toggle actions,  
+ changes "..." in group block to checkbox,
+ disables group actions in selection mode
+ -------*/
+
+$(function () {
+  $("#toggleSelectionMode").click(function () {
+    if ($(this).is(":checked")) {
+      $(".in-selection-mode").fadeIn();
+      $(".not-in-selection-mode").fadeOut();
+      $("#group_name").attr("contenteditable", false);
+      $(".GroupManagerButtons").removeClass("visible");
+    } else {
+      $(".in-selection-mode").fadeOut();
+      $(".not-in-selection-mode").fadeIn();
+      $(".GroupManagerButtons").addClass("visible");
+      $(".Group-checkbox input").attr("checked", false);
+      $(".Group-checkbox input[type='checkbox']").trigger("change");
+      $("#group_name").attr("contenteditable", true);
+    }
+  });
+});
+
+/*-------
+ Hide group options on click on the screen
+ -------*/
+
+$(document).mouseup(function (e) {
+  if ($(e.target).closest("#GroupOptions").length === 0) {
+    $(".group-dropdown-options #GroupOptions").hide();
+  }
+});
+
+/*-------
+ Update Selection Panel
+ -------*/
+var state = "NoSelection";
+
+var updateSelectionPanel = function (changedState = "") {
+  let numSelect = $(".DeleteGroupList div").length;
+  
+  if (numSelect == 0) {
+    updateStatePanel("NoSelection")
+  } else if (numSelect == 1 && (state == "OptionMerge" || state == "NoSelection" || state == "Selection")) {
+    updateStatePanel("OneSelected")
+  } else if (changedState != "") {
+    updateStatePanel(changedState)
+  } else if (numSelect > 1 && state == "OneSelected") {
+    updateStatePanel("Selection");
+  }
+
+  $(".number-Selected").html(numSelect + "");
+};
+
+/*Update the state of the panel in 5 states :
+ NoSelection, OneSelected, ConfirmDeletion, Selection, OptionMerge
+ */
+var updateStatePanel = function (newState = "Selection") {
+  state = newState;
+  switch (newState) {
+    case "OneSelected":
+    $("#DeleteSelectionMode").show();
+    $("#MergeSelectionMode").hide();
+    $("#MergeOptionsBlock").hide();
+    $("#ConfirmGroupAction").hide();
+      break;
+    case "ConfirmDeletion":
+    $("#DeleteSelectionMode").hide();
+    $("#MergeSelectionMode").hide();
+    $("#MergeOptionsBlock").hide();
+    $("#ConfirmGroupAction").show();
+      break;
+    case "Selection":
+    $("#DeleteSelectionMode").show();
+    $("#MergeSelectionMode").show();
+    $("#MergeOptionsBlock").hide();
+    $("#ConfirmGroupAction").hide();
+      break;
+      case "OptionMerge":
+    $("#DeleteSelectionMode").hide();
+    $("#MergeSelectionMode").hide();
+    $("#MergeOptionsBlock").show();
+    $("#ConfirmGroupAction").hide();
+      break;
+  }
+  if (newState == "NoSelection") {
+    $(".SelectionModeGroup").hide();
+    $("#nothing-selected").show();
+    $("#MergeOptionsBlock").hide();
+    $("#ConfirmGroupAction").hide();
+  } else {
+    $(".SelectionModeGroup").show();
+    $("#nothing-selected").hide();
+  }
+};
+
+/*-------
+ Delete function on button's pannel
+ -------*/
+
+$('.ConfirmDeleteButton').on("click", function() {
+  $('.DeleteGroupList div').each(function () {
+    deleteGroup($(this).data('id'));
+    $(this).remove();
+    updateSelectionPanel("NoSelection");
+  })
+})
\ No newline at end of file
diff --git a/admin/themes/default/template/group_list.tpl b/admin/themes/default/template/group_list.tpl
index cfc6b61f7..6e1e63306 100644
--- a/admin/themes/default/template/group_list.tpl
+++ b/admin/themes/default/template/group_list.tpl
@@ -1,269 +1,22 @@
 {footer_script}
-
 var pwg_token = "{$PWG_TOKEN}";
 var member_default = "{'member'|@translate}"
-
-{literal}
-
-
-/*-------
-Group Popup
--------*/
-
-$(".group_details_popup_trigger").click(function(){
-   $('.Group_details-popup-container').show();
-});
-
-$(".CloseGroupPopup").click(function(){
-   $('.Group_details-popup-container').hide();
-});
-
-
-/*-------
-Add User toggle and reduces height of user list when add user form is visible
--------*/
-
-$('#form-btn').click(function(){
-  $('#cancel').show();
-  $('#addUserLabel').show()
-  $('.input-user-name').show();
-  $('#UserSubmit').show();
-  $('#form-btn').hide();
-  $(".groups .list_user").css("max-height","100px");
-});
-
-$('#cancel').click(function(){
-  $('#cancel').hide();
-  $('#addUserLabel').hide()
-  $('.input-user-name').hide();
-  $('#UserSubmit').hide();
-  $('#form-btn').show();
-  $(".groups .list_user").css("max-height","200px");
-});
-
-/*-------
-Add Group toggle
--------*/
-
-$('#showAddGroup').click(function(){
-  $('#addGroupForm').css('display', 'inline-block');
-  $('#showAddGroup').css('display', 'none');
-});
-
-var closeAddGroup = function () {
-  $('#addGroupForm').css('display', 'none');
-  $('#showAddGroup').css('display', 'inline-block');
-}
-
-$('#addGroupClose').click(closeAddGroup);
-
-$('.actionButtons input').click(closeAddGroup);
-
-/*-------
-Add Group Submit
--------*/
-
-jQuery(document).ready(function() {
-  $('#addGroupForm form').on("submit", function(e) {
-    e.preventDefault();
-    let name = $('#addGroupForm input[type=text]').val();
-    jQuery.ajax({
-      url: "ws.php?format=json&method=pwg.groups.add",
-      type:"POST",
-      data: "name="+name+"&pwg_token="+pwg_token,
-      success: function(raw_data) {
-        data = jQuery.parseJSON(raw_data);
-        if (data.stat === "ok") {
-          id = data.result.groups[0].id;
-          newgroup = $('#group-template').clone().attr('id', "group-"+id);
-          newgroup.attr("data-id", id);
-          newgroup.find("#group_name").html(name);
-          newgroup.find(".Group-checkbox label").attr("for", "Group-Checkbox-selection-"+id)
-          newgroup.find(".Group-checkbox input").attr("id", "Group-Checkbox-selection-"+id)
-          newgroup.find(".input-edit-group-name").attr('placeholder', name);
-          newgroup.find(".group_number_users").html("0 "+member_default);
-          setupGroupBox(newgroup);
-          newgroup.appendTo('.groups')
-        }
-      },
-      error: function(err) {
-        console.log(err);
-      }
-    });
-  });
-});
-
-/*-------
-User List group pop-in
--------*/
-
-var modalUL = document.getElementById("UserList");
-
-var btn = document.getElementById("UserListTrigger");
-
-var close = document.getElementsByClassName("CloseUserList")[0];
-
-btn.onclick = function() {
-  modalUL.style.visibility = "visible";
-}
-
-close.onclick = function() {
-  modalUL.style.visibility = "hidden";
-}
-
-/*-------
-SETUP JS ON GROUP BOX
--------*/
-jQuery(document).ready(function() {
-  $(".GroupContainer").each(function () {
-    setupGroupBox($(this));
-  })
-});
-
-var setupGroupBox = function (groupBox) {
-
-  var id = groupBox.data('id');
-
-  /* Change background color of group block if checked in selection mode */
-  groupBox.find(".Group-checkbox input[type='checkbox']").change(function(){
-      if($(this).is(":checked")){
-        groupBox.addClass("OrangeBackground"); 
-        groupBox.find('.icon-users-1').addClass("OrangeIcon");
-        groupBox.find('.group_number_users').addClass("OrangeFont");
-
-        item = $("<div data-id="+groupBox.data('id')+">"
-        +"<a class='icon-cancel'></a>"
-        +"<p>"+groupBox.find("#group_name").html()+"</p> </div>");
-        item.appendTo(".DeleteGroupList");
-        item.find("a").on('click', function() {
-          groupBox.find(".Group-checkbox input").attr("checked", false);
-          groupBox.find(".Group-checkbox input[type='checkbox']").trigger("change");
-        });
-      }else{
-        groupBox.removeClass("OrangeBackground"); 
-        groupBox.find('.icon-users-1').removeClass("OrangeIcon"); 
-        groupBox.find('.group_number_users').removeClass("OrangeFont");
-        $(".DeleteGroupList div").each(function(){
-          if ($(this).data('id') == id) {$(this).remove()}
-        })
-      } 
-  });
-
-  /* Display the option on the click on "..." */
-  groupBox.find(".group-dropdown-options").click(function GroupOptions(){
-    $(this).find("#GroupOptions").toggle();
-  });
-
-  /* Set the delete action */
-  groupBox.find("#GroupDelete").on('click', function(){
-    jQuery.ajax({
-      url: "ws.php?format=json&method=pwg.groups.delete",
-      type:"POST",
-      data: "group_id="+id+"&pwg_token="+pwg_token,
-      success: function(raw_data) {
-        data = jQuery.parseJSON(raw_data);
-        if (data.stat === "ok") {
-          groupBox.remove();
-        }
-      },
-      error: function(err) {
-        console.log(err);
-      }
-    });
-  });
-}
-
-/*-------
-Selection mode toggle actions,  
-changes "..." in group block to checkbox,
-disables group actions in selection mode
--------*/
-
-$(function () {
-  $("#toggleSelectionMode").click(function () {
-    if ($(this).is(":checked")) {
-      $(".in-selection-mode").fadeIn();
-      $(".not-in-selection-mode").fadeOut();
-      $("#group_name").attr('contenteditable', false);
-    } else {
-      $(".in-selection-mode").fadeOut();
-      $(".not-in-selection-mode").fadeIn();
-      $(".Group-checkbox input").attr("checked", false);
-      $(".Group-checkbox input[type='checkbox']").trigger("change");
-      $("#group_name").attr('contenteditable', true);
-    }
-  });
-});
-
-
-/*-------
-Display group name in selection list
--------*/
-/*
-jQuery(document).ready(function() {
-        $("#Group-Checkbox-selection").click(function () {
-            if ($(this).is(":checked")) {
-              $('.SelectionModeGroup').show();
-              $('#nothing-selected').hide();
-            }else{
-              $('.SelectionModeGroup').hide();
-              $('#nothing-selected').show();
-            }
-        )};
-});
-*/
-
-/*-------
-Hide group options on click on the screen
--------*/
-
-$(document).mouseup(function (e) { 
-  if ($(e.target).closest("#GroupOptions").length === 0) { 
-    $(".group-dropdown-options #GroupOptions").hide(); 
-  } 
-});
-
-/*-------
-Merge Options in selection mode
--------*/
-
-function MergeOptions(){
-  jQuery("#MergeOptionsBlock").show();
-  jQuery("#DeleteSelectionMode").hide();
-  jQuery("#MergeSelectionMode").hide();
-};
-
-/*-------
-Cancel Merge options or deletion confirmation
--------*/
-
-function CancelAction(){
-  jQuery("#MergeOptionsBlock").hide();
-  jQuery("#ConfirmGroupAction").hide();
-  jQuery("#DeleteSelectionMode").show();
-  jQuery("#MergeSelectionMode").show();
-};
-
-/*-------
-Display deletion confirmation
--------*/
-
-function DeleteValidation(){
-  jQuery("#ConfirmGroupAction").show();
-  jQuery("#DeleteSelectionMode").hide();
-  jQuery("#MergeSelectionMode").hide();
-};
-
-
-
-{/literal}
+var group_created = "{'Group created'|@translate}"
+var renaming_done = "{'Renaming done'|@translate}"
+var name_taken = "{'Name is already taken'|@translate}"
 {/footer_script}
 
+{combine_script id='common' load='footer' path='admin/themes/default/js/group_list.js'}
+
 {* Define template function for the content of Groups*}
 {function name=groupContent}
 {function groupContent}
-  <div id="group-{$grp_id}" class="GroupContainer" data-id={$grp_id}>
-    <div class="icon-users-1"></div>
+  <div id="group-{$grp_id}" class="GroupContainer" data-id={$grp_id} style="order: -{$grp_id}">
+    <div class="groupHeader"> 
+      <div class="icon-users-1" style="color:{$icon_color};background-color:{$icon_background_color}"></div>
+      <div class="groupMessage icon-ok"></div>
+      <div class="groupError icon-cancel"></div>
+    </div>
           
     <div class="icon-ellipsis-vert group-dropdown-options not-in-selection-mode">
       <div id="GroupOptions">
@@ -293,7 +46,7 @@ function DeleteValidation(){
 
     <p class="group_number_users">{$grp_members}</p>
 
-    <div class="GroupManagerButtons not-in-selection-mode">
+    <div class="GroupManagerButtons visible">
       <a id="UserListTrigger" class="icon-user-1 manage-users">Manage users</a>
       <a class="icon-lock manage-permissions">Manage permissions</a>
     </div>
@@ -326,8 +79,8 @@ function DeleteValidation(){
     </div>
 
     </div>
-    <button id="MergeSelectionMode" class="icon-object-group" onclick="MergeOptions()">Merge</button>
-    <button id="DeleteSelectionMode" class="icon-trash-1" onclick="DeleteValidation()">Delete</button>
+    <button id="MergeSelectionMode" class="icon-object-group" onclick="updateSelectionPanel('OptionMerge')">Merge</button>
+    <button id="DeleteSelectionMode" class="icon-trash-1" onclick="updateSelectionPanel('ConfirmDeletion')">Delete</button>
    </div>
 
    <div id="MergeOptionsBlock">
@@ -339,15 +92,15 @@ function DeleteValidation(){
       </select>
     </div>
     
-    <button class="icon-ok ConfirmMergeButton" onclick="CancelAction()">Confirm merge</button>
-    <a id="CancelMerge" onclick="CancelAction()">Cancel</a>
+    <button class="icon-ok ConfirmMergeButton" onclick="updateSelectionPanel('Selection')">Confirm merge</button>
+    <a id="CancelMerge" onclick="updateSelectionPanel('Selection')">Cancel</a>
    </div>
  
 
    <div id="ConfirmGroupAction">
-    <p>You are about to delete [4] groups, are you sure?</p>
-    <button class="icon-ok ConfirmDeleteButton" onclick="CancelAction()">Yes, delete</button>
-    <a id="CancelDelete" onclick="CancelAction()">No, I have changed my mind</a>
+    <p>You are about to delete <span class="number-Selected">0</span> groups, are you sure?</p>
+    <button class="icon-ok ConfirmDeleteButton" onclick="updateSelectionPanel('Selection')">Yes, delete</button>
+    <a id="CancelDelete" onclick="updateSelectionPanel('Selection')">No, I have changed my mind</a>
     </div>
   
   </div>
@@ -358,6 +111,7 @@ function DeleteValidation(){
   <div class="groups">
 
     <div class="showCreateGroup" id="showAddGroup">
+      <div class="groupError icon-cancel"></div>
       <div class="addGroupBlock">
        <div class="icon-plus-circled"></div>
         <p id="addGroup">{'Add group'|translate}</p>
@@ -366,7 +120,6 @@ function DeleteValidation(){
 
     <div id="addGroupForm">
       <div class="addGroupFormBlock">
-      <div class="icon-users-1"></div>
         <form>
           <fieldset>
           <p class="addGroupFormTitle">{'Add group'|@translate}</p>
@@ -387,9 +140,19 @@ function DeleteValidation(){
     {* Template Group (for js application) *}
     {groupContent grp_id="template" grp_name="Template" grp_members=0}
 
+    {assign var='color_tab' value=[["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]]}
+
     {if not empty($groups)}
     {foreach from=$groups item=group name=group_loop}
-      {groupContent grp_id=$group.ID grp_name=$group.NAME grp_members=$group.MEMBERS}
+      {assign var='color_id' value=$group.ID%4}
+      {groupContent 
+        grp_id=$group.ID 
+        grp_name=$group.NAME 
+        grp_members=$group.MEMBERS 
+        icon_color=$color_tab[$color_id][0]
+        icon_background_color=$color_tab[$color_id][1]
+      }
+      
     {/foreach}
     {/if}
   </div>
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 9963950f1..d8854acf1 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1533,6 +1533,7 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
 }
 
 .showCreateGroup {
+  order: -10000000000;
   text-align: left;
   margin: 0 1em 25px 20px;
   line-height: 22px;
@@ -1540,10 +1541,13 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
 
  .content .groups form{
   margin:0;
+  margin-top: 40px;
 }
 
 .groups {
-  text-align:center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .group-manager{
@@ -1628,6 +1632,10 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   margin:0 5px;
 }
 
+.groups #addGroupForm {
+  order: -10000000000;
+}
+
 .groups .addGroupFormTitle{
   font-size:1.2em;
   font-weight:700;
@@ -1637,14 +1645,46 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   padding:5px;
 }
 
+.groupHeader {
+  margin:15px auto;
+}
+
 .groups .icon-users-1:first-child{
   font-size: 19px;
-  color: rgb(44,132,195);
-  background-color: #CDE9FD;
+  color: #4d4d4d;
+  background-color: #ffffff;
   width: 27px;
   padding: 10px;
   border-radius: 30px;
-  margin:15px auto;
+  margin: auto;
+  transition: 0.4s ease;
+}
+
+.groupMessage {
+  display: none;
+  position: absolute;
+  background-color: #d6ffcf;
+  min-height: 17px;
+  padding: 10px;
+  border-radius: 30px;
+  top: -17px;
+  font-size: 12px;
+  right: 50px;
+  width: 106px;
+}
+
+.groupError {
+  z-index: 2;
+  display: none;
+  position: absolute;
+  background-color: #ffcfcf;
+  min-height: 17px;
+  padding: 10px;
+  border-radius: 30px;
+  top: -17px;
+  font-size: 12px;
+  right: 29px;
+  width: 143px;
 }
 
 .groups .addGroupFormTitle{
@@ -1744,11 +1784,11 @@ input:checked + .slider:before {
 /*Selection mode content*/
 
 #nothing-selected{
-  display:none;
+  display:block;
 }
 
 .SelectionModeGroup{
-  display:block;
+  display:none;
   text-align:center;
 }
 
@@ -1802,6 +1842,7 @@ input:checked + .slider:before {
   background-color: #ffa744;
   border:none;
   margin-top:40px;
+  cursor: pointer;
 }
 
 /*Merge Options*/
@@ -2081,7 +2122,12 @@ input:checked + .slider:before {
 
 .groups .GroupManagerButtons{
   text-align:center;
-  margin:15px 0;
+  margin:18px 0;
+}
+
+.groups .GroupManagerButtons a {
+  padding-top :15px;
+  padding-bottom :15px;
 }
 
 .groups .manage-users,
@@ -2108,14 +2154,13 @@ input:checked + .slider:before {
 
 
 @media (hover: hover){
-  .GroupContainer li .GroupManagerButtons{
+  .GroupContainer .GroupManagerButtons{
     display:none;
   }
   
-  .GroupContainer li:hover .GroupManagerButtons{
+  .GroupContainer:hover .GroupManagerButtons.visible{
     display:block;
   }
-  
 }
 
 /*UserList Pop in*/