diff --git a/src/main/scala/app/UserManagementController.scala b/src/main/scala/app/UserManagementController.scala
index dffc2e2..37d5e06 100644
--- a/src/main/scala/app/UserManagementController.scala
+++ b/src/main/scala/app/UserManagementController.scala
@@ -5,6 +5,7 @@
 import util.StringUtil._
 import util.ControlUtil._
 import jp.sf.amateras.scalatra.forms._
+import org.scalatra.i18n.Messages
 import org.apache.commons.io.FileUtils
 import util.Directory._
 
@@ -23,10 +24,10 @@
                           fileId: Option[String], clearImage: Boolean, isRemoved: Boolean)
 
   case class NewGroupForm(groupName: String, url: Option[String], fileId: Option[String],
-                          memberNames: Option[String])
+                          members: String)
 
   case class EditGroupForm(groupName: String, url: Option[String], fileId: Option[String],
-                           memberNames: Option[String], clearImage: Boolean, isRemoved: Boolean)
+                           members: String, clearImage: Boolean, isRemoved: Boolean)
 
   val newUserForm = mapping(
     "userName"    -> trim(label("Username"     ,text(required, maxlength(100), identifier, uniqueUserName))),
@@ -51,19 +52,19 @@
   )(EditUserForm.apply)
 
   val newGroupForm = mapping(
-    "groupName"   -> trim(label("Group name"   ,text(required, maxlength(100), identifier, uniqueUserName))),
-    "url"         -> trim(label("URL"          ,optional(text(maxlength(200))))),
-    "fileId"      -> trim(label("File ID"      ,optional(text()))),
-    "memberNames" -> trim(label("Member Names" ,optional(text())))
+    "groupName" -> trim(label("Group name" ,text(required, maxlength(100), identifier, uniqueUserName))),
+    "url"       -> trim(label("URL"        ,optional(text(maxlength(200))))),
+    "fileId"    -> trim(label("File ID"    ,optional(text()))),
+    "members"   -> trim(label("Members"    ,text(required, members)))
   )(NewGroupForm.apply)
 
   val editGroupForm = mapping(
-    "groupName"   -> trim(label("Group name"   ,text(required, maxlength(100), identifier))),
-    "url"         -> trim(label("URL"          ,optional(text(maxlength(200))))),
-    "fileId"      -> trim(label("File ID"      ,optional(text()))),
-    "memberNames" -> trim(label("Member Names" ,optional(text()))),
-    "clearImage"  -> trim(label("Clear image"  ,boolean())),
-    "removed"     -> trim(label("Disable"      ,boolean()))
+    "groupName"  -> trim(label("Group name"  ,text(required, maxlength(100), identifier))),
+    "url"        -> trim(label("URL"         ,optional(text(maxlength(200))))),
+    "fileId"     -> trim(label("File ID"     ,optional(text()))),
+    "members"    -> trim(label("Members"     ,text(required, members))),
+    "clearImage" -> trim(label("Clear image" ,boolean())),
+    "removed"    -> trim(label("Disable"     ,boolean()))
   )(EditGroupForm.apply)
 
   get("/admin/users")(adminOnly {
@@ -127,11 +128,11 @@
 
   post("/admin/users/_newgroup", newGroupForm)(adminOnly { form =>
     createGroup(form.groupName, form.url)
-    updateGroupMembers(form.groupName, form.memberNames.map(_.split(",").map {
+    updateGroupMembers(form.groupName, form.members.split(",").map {
       _.split(":") match {
         case Array(userName, isManager) => (userName, isManager.toBoolean)
       }
-    }.toList).getOrElse(Nil))
+    }.toList)
     updateImage(form.groupName, form.fileId, false)
     redirect("/admin/users")
   })
@@ -143,11 +144,11 @@
   })
 
   post("/admin/users/:groupName/_editgroup", editGroupForm)(adminOnly { form =>
-    defining(params("groupName"), form.memberNames.map(_.split(",").map {
+    defining(params("groupName"), form.members.split(",").map {
       _.split(":") match {
         case Array(userName, isManager) => (userName, isManager.toBoolean)
       }
-    }.toList).getOrElse(Nil)){ case (groupName, members) =>
+    }.toList){ case (groupName, members) =>
       getAccountByUserName(groupName, true).map { account =>
         updateGroup(groupName, form.url, form.isRemoved)
 
@@ -184,4 +185,12 @@
     getAccountByUserName(params("userName")).isDefined
   })
 
+  private def members: Constraint = new Constraint(){
+    override def validate(name: String, value: String, messages: Messages): Option[String] = {
+      if(value.split(",").exists {
+        _.split(":") match { case Array(userName, isManager) => isManager.toBoolean }
+      }) None else Some("Must select one manager at least.")
+    }
+  }
+
 }
diff --git a/src/main/twirl/account/group.scala.html b/src/main/twirl/account/group.scala.html
index b4b46dd..de23a6a 100644
--- a/src/main/twirl/account/group.scala.html
+++ b/src/main/twirl/account/group.scala.html
@@ -113,7 +113,7 @@
     }
     var managerButton = $('<button type="button" class="btn btn-default btn-mini" value="true">Manager</button>').addClass('is_manager_' + userName);
     if(isManager){
-      memberButton.addClass('active');
+      managerButton.addClass('active');
     }
 
     $('#member-list').append($('<li>')
@@ -133,7 +133,6 @@
       return userName + ':' + $('.is_manager_' + userName + '.active').attr('value');
     }).get().join(',');
     $('#members').val(members);
-    return true;
   }
 });
 </script>
\ No newline at end of file
diff --git a/src/main/twirl/admin/users/group.scala.html b/src/main/twirl/admin/users/group.scala.html
index 2ad79ad..2f75cd0 100644
--- a/src/main/twirl/admin/users/group.scala.html
+++ b/src/main/twirl/admin/users/group.scala.html
@@ -5,7 +5,7 @@
   @admin.html.menu("users"){
     <form method="POST" action="@if(account.isEmpty){@path/admin/users/_newgroup} else {@path/admin/users/@account.get.userName/_editgroup}" validate="true">
       <div class="row-fluid">
-        <div class="span7">
+        <div class="span5">
           <fieldset>
             <label for="groupName" class="strong">Group name</label>
             <div>
@@ -24,24 +24,17 @@
             <div>
               <span id="error-url" class="error"></span>
             </div>
-            <input type="text" name="url" id="url" style="width: 300px;" value="@account.map(_.url)"/>
+            <input type="text" name="url" id="url" value="@account.map(_.url)"/>
           </fieldset>
           <fieldset>
             <label for="avatar" class="strong">Image (Optional)</label>
             @helper.html.uploadavatar(account)
           </fieldset>
         </div>
-        <div class="span5">
+        <div class="span7">
           <fieldset>
             <label class="strong">Members</label>
             <ul id="member-list" class="collaborator">
-              @members.map { case (userName, isManager) =>
-                <li data-name="@userName">
-                  <input type="checkbox" class="is_manager" id="is_manager_@userName" @if(isManager){checked}/>
-                  <a href="@path/@url(userName)">@userName</a>
-                  <a href="#" class="remove">(remove)</a>
-                </li>
-              }
             </ul>
             @helper.html.account("memberName", 200)
             <input type="button" class="btn" value="Add" id="addMember"/>
@@ -61,6 +54,10 @@
 }
 <script>
 $(function(){
+  $('input[type=submit]').click(function(){
+    updateMembers();
+  });
+
   $('#addMember').click(function(){
     $('#error-memberName').text('');
     var userName = $('#memberName').val();
@@ -84,17 +81,7 @@
       'userName': userName
     }, function(data, status){
       if(data == 'true'){
-        // add member
-        $('#member-list').append($('<li>')
-          .data('name', userName)
-          .append($('<input type="checkbox" class="is_manager">').attr('id', 'is_manager_' + userName))
-          .append($('<a>').attr('href', '@path/' + userName).text(userName))
-          .append(' ')
-          .append($('<a>').attr('href', '#').addClass('remove').text('(remove)')));
-        $('#members').val('');
-
-        // update hidden value
-        updateMembers();
+        addMemberHTML(userName, false);
       } else {
         $('#error-memberName').text('User does not exist.');
       }
@@ -102,27 +89,43 @@
   });
 
   $(document).on('click', '.remove', function(){
-    // remove member
     $(this).parent().remove();
-    // update hidden value
-    updateMembers();
-    $('#members').val(members);
   });
 
   // Don't submit form by ENTER key
   $('#memberName').keypress(function(e){
-    console.log(e.keyCode);
     return !(e.keyCode == 13);
   });
 
-  $('.is_manager').change(function(){
-    updateMembers();
-  });
+  @members.map { case (userName, isManager) =>
+    addMemberHTML('@userName', @isManager);
+  }
+
+  function addMemberHTML(userName, isManager){
+    var memberButton = $('<button type="button" class="btn btn-default btn-mini" value="false">Member</button>').addClass('is_manager_' + userName);
+    if(!isManager){
+      memberButton.addClass('active');
+    }
+    var managerButton = $('<button type="button" class="btn btn-default btn-mini" value="true">Manager</button>').addClass('is_manager_' + userName);
+    if(isManager){
+      managerButton.addClass('active');
+    }
+
+    $('#member-list').append($('<li>')
+      .data('name', userName)
+      .append($('<div class="btn-group is_manager" data-toggle="buttons-radio">')
+        .append(memberButton)
+        .append(managerButton))
+      .append(' ')
+      .append($('<a>').attr('href', '@path/' + userName).text(userName))
+      .append(' ')
+      .append($('<a href="#" class="remove pull-right">(remove)</a>')));
+  }
 
   function updateMembers(){
     var members = $('#member-list li').map(function(i, e){
       var userName = $(e).data('name');
-      return userName + ':' + $('#is_manager_' + userName).prop('checked');
+      return userName + ':' + $('.is_manager_' + userName + '.active').attr('value');
     }).get().join(',');
     $('#members').val(members);
   }