diff --git a/src/main/twirl/group.scala.html b/src/main/twirl/group.scala.html
index 0432a79..de8d1c0 100644
--- a/src/main/twirl/group.scala.html
+++ b/src/main/twirl/group.scala.html
@@ -31,8 +31,11 @@
             <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>
+                  <div class="btn-group is_manager" data-toggle="buttons-radio">
+                    <button type="button" class="is_manager_@userName btn btn-default btn-mini @if(!isManager){active}" value="false">Member</button>
+                    <button type="button" class="is_manager_@userName btn btn-default btn-mini @if(isManager){active}" value="true">Manager</button>
+                  </div>
+                  <a href="@url(userName)">@userName</a>
                   <a href="#" class="remove">(remove)</a>
                 </li>
               }
@@ -62,6 +65,10 @@
 }
 <script>
 $(function(){
+  $('input[type=submit]').click(function(){
+    updateMembers();
+  });
+
   $('#addMember').click(function(){
     $('#error-memberName').text('');
     var userName = $('#memberName').val();
@@ -88,14 +95,13 @@
         // add member
         $('#member-list').append($('<li>')
           .data('name', userName)
-          .append($('<input type="checkbox" class="is_manager">').attr('id', 'is_manager_' + userName))
+          .append($('<div class="btn-group is_manager" data-toggle="buttons-radio">')
+            .append($('<button type="button" class="btn btn-default btn-mini active" value="false">Member</button>').addClass('is_manager_' + userName))
+            .append($('<button type="button" class="btn btn-default btn-mini" value="true">Manager</button>').addClass('is_manager_' + userName)))
+          .append(' ')
           .append($('<a>').attr('href', '@path/' + userName).text(userName))
           .append(' ')
           .append($('<a>').attr('href', '#').addClass('remove').text('(remove)')));
-        $('#members').val('');
-
-        // update hidden value
-        updateMembers();
       } else {
         $('#error-memberName').text('User does not exist.');
       }
@@ -103,23 +109,14 @@
   });
 
   $(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();
-  });
-
   $('#delete').click(function(){
     return confirm('Once you delete this group, there is no going back.\nAre you sure?');
   });
@@ -127,9 +124,10 @@
   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);
+    return true;
   }
 });
 </script>
\ No newline at end of file