diff --git a/group/index.php b/group/index.php
index 8244cf194db..a3d4e57e633 100644
--- a/group/index.php
+++ b/group/index.php
@@ -11,6 +11,8 @@
 require_once('../config.php');
 require_once('lib.php');
 require_once($CFG->libdir.'/moodlelib.php');
+require_once($CFG->libdir.'/json/JSON.php');
+
 
 $success = true;
  
@@ -21,6 +23,7 @@ $userid     = optional_param('user', false, PARAM_INT);
 
 $action = groups_param_action();
 
+
 // Get the course information so we can print the header and
 // check the course id is valid
 $course = groups_get_course_info($courseid);
@@ -29,6 +32,7 @@ if (! $course) {
     print_error('invalidcourse'); //'The course ID is invalid'
 }
 
+
 if ($success) {
     // Make sure that the user has permissions to manage groups.
     require_login($courseid);
@@ -41,53 +45,72 @@ if ($success) {
     // Set the session key so we can check this later
     $sesskey = !empty($USER->id) ? $USER->sesskey : '';
 
+
     switch ($action) {
-    
-    case 'showgroupingsettingsform':
-        redirect(groups_grouping_edit_url($courseid, $groupingid, false));
-        break;
-    case 'showgroupingpermsform':
-        break;
-    case 'deletegrouping':
-        break;
-    case 'showcreategroupingform':
-        redirect(groups_grouping_edit_url($courseid, null, false));
-        break;
-    case 'printerfriendly':
-        redirect('groupui/printgrouping.php?courseid='. $courseid .'&groupingid='. $groupingid);
-        break;
+        case 'ajax_getgroupsingrouping':
+            $groups = groups_groupids_to_groups(groups_get_groups_in_grouping($groupingid));
+            $json = new Services_JSON();
+            echo $json->encode($groups);
+            die;  // Client side JavaScript takes it from here.
 
-    case 'showgroupsettingsform':
-        redirect(groups_group_edit_url($courseid, $groupid, $groupingid, false));
-        break;
-    case 'deletegroup':
-        redirect(groups_group_edit_url($courseid, $groupid, $groupingid, false, 'delete=1'));
-        break;
-    case 'removegroup':
-        break;
-    case 'showcreategroupform':
-        if (GROUP_NOT_IN_GROUPING == $groupingid) {
-            print_error('errornotingrouping', 'group', groups_home_url($courseid), get_string('notingrouping', 'group'));
-        }
-        redirect(groups_group_edit_url($courseid, null, $groupingid, false));
-        break;
-    case 'addgroupstogroupingsform':
-        break;
-    case 'updategroups': //Currently reloading.
-        break;
+        case 'ajax_getmembersingroup':
+            $memberids = groups_get_members($groupid);
+            $members = array();
 
-    case 'removemembers':
-        break;
-    case 'showaddmembersform':
-        redirect(groups_members_add_url($courseid, $groupid, $groupingid, false));
-        break;
-    case 'updatemembers': //Currently reloading.
-        break;
-    default:
-        //print_error('Unknown action.');
-        break;
+            foreach ($memberids as $memberid) {
+                $member = groups_get_user($memberid);
+                array_push($members, $member);
+            }
+            $json = new Services_JSON();
+            echo $json->encode($members);
+            die;  // Client side JavaScript takes it from here.
+
+        case 'showgroupingsettingsform':
+            redirect(groups_grouping_edit_url($courseid, $groupingid, false));
+            break;
+        case 'showgroupingpermsform':
+            break;
+        case 'deletegrouping':
+            break;
+        case 'showcreategroupingform':
+            redirect(groups_grouping_edit_url($courseid, null, false));
+            break;
+        case 'printerfriendly':
+            redirect('groupui/printgrouping.php?courseid='. $courseid .'&groupingid='. $groupingid);
+            break;
+
+        case 'showgroupsettingsform':
+            redirect(groups_group_edit_url($courseid, $groupid, $groupingid, false));
+            break;
+        case 'deletegroup':
+            redirect(groups_group_edit_url($courseid, $groupid, $groupingid, false, 'delete=1'));
+            break;
+        case 'removegroup':
+            break;
+        case 'showcreategroupform':
+            if (GROUP_NOT_IN_GROUPING == $groupingid) {
+                print_error('errornotingrouping', 'group', groups_home_url($courseid), get_string('notingrouping', 'group'));
+            }
+            redirect(groups_group_edit_url($courseid, null, $groupingid, false));
+            break;
+        case 'addgroupstogroupingsform':
+            break;
+        case 'updategroups': //Currently reloading.
+            break;
+
+        case 'removemembers':
+            break;
+        case 'showaddmembersform':
+            redirect(groups_members_add_url($courseid, $groupid, $groupingid, false));
+            break;
+        case 'updatemembers': //Currently reloading.
+            break;
+        default:
+            //print_error('Unknown action.');
+            break;
     }
 
+
     // Print the page and form
     $strgroups = get_string('groups');
     $strparticipants = get_string('participants');
@@ -101,17 +124,21 @@ if ($success) {
     $usehtmleditor = false;
     //TODO: eventually we'll implement all buttons, meantime hide the ones we haven't finised.
     $shownotdone  = false;
+    
+    print_heading($course->shortname.' '.$strgroups, 'center', 3);
 ?>
-<form name="groupeditform" id="groupeditform" action="index.php" method="post">
+<form id="groupeditform" action="index.php" method="post">
+    <fieldset class="invisiblefieldset">
     <input type="hidden" name="id" value="<?php echo $courseid; ?>" />
 
 <?php /*    
 <input type="hidden" name="groupid" value="<?php p($selectedgroup) ?>" />
 <input type="hidden" name="sesskey" value="<?php p($sesskey) ?>" />
 <input type="hidden" name="roleid" value="<?php p($roleid) ?>" />
-*/ ?>
+*/
+?>
 
-    <table cellpadding="10" class="generaltable generalbox groupmanagementtable" summary="">
+    <table cellpadding="10" class="generaltable generalbox groupmanagementtable boxaligncenter" summary="">
         <tr>
             <td class="generalboxcontent">
                 <p><label for="groupings"><?php print_string('groupings', 'group'); ?></label></p>
@@ -137,7 +164,7 @@ if ($success) {
                 $select = ' selected="selected"';
                 $sel_groupingid = $id;
             }
-            echo "<option value=\"$id\"$select >$name</option>\n";
+            echo "<option value=\"$id\"$select onclick=\"groupsCombo.refreshGroups($id)\" >$name</option>\n";
             $count++;
         }
     }
@@ -229,9 +256,21 @@ if ($success) {
     </table>
 
     <!--input type="hidden" name="rand" value="om" /-->
+</fieldset>
 </form>
 <?php
+    echo '<script type="text/javascript" src="'.$CFG->wwwroot.'/lib/yui/yahoo/yahoo-min.js"></script>';
+    echo '<script type="text/javascript" src="'.$CFG->wwwroot.'/lib/yui/connection/connection-min.js"></script>';
+    echo '<script type="text/javascript" src="'.$CFG->wwwroot.'/group/lib/clientlib.js"></script>'."\n";
+
+    echo '<script type="text/javascript" defer="defer">'."\n";
+    echo '//<![CDATA['."\n";
+    echo 'var groupsCombo = new UpdatableGroupsCombo("'.$CFG->wwwroot.'", '.$course->id.');'."\n";
+    echo 'var membersCombo = new UpdatableMembersCombo("'.$CFG->wwwroot.'", '.$course->id.');'."\n";
+    echo '//]]>'."\n";
+    echo '</script>'."\n";
+
     print_footer($course);
 }
 
-?>
+?>
\ No newline at end of file
diff --git a/group/lib/clientlib.js b/group/lib/clientlib.js
new file mode 100644
index 00000000000..58a98c55391
--- /dev/null
+++ b/group/lib/clientlib.js
@@ -0,0 +1,118 @@
+/**
+ * Client-side JavaScript for group management interface.
+ * @author vy-shane AT moodle.com 
+ * @license http://www.gnu.org/copyleft/gpl.html GNU Public License
+ * @package groups
+ */
+
+
+/**
+ * Class UpdatableGroupsCombo
+ */
+function UpdatableGroupsCombo(wwwRoot, courseId) {
+    this.wwwRoot = wwwRoot;
+    this.courseId = courseId;
+
+    this.callback = {
+        success: function(o) {
+
+        	if (o.responseText !== undefined) {
+                var groupsComboEl = document.getElementById("groups");
+                var membersComboEl = document.getElementById("members");
+
+                if (membersComboEl) {
+                    // Clear the members combo box.
+                    while (membersComboEl.firstChild) {
+                        membersComboEl.removeChild(membersComboEl.firstChild);
+                    }
+                }
+
+        	    if (groupsComboEl) {
+        	        // Clear the groups combo box.
+                    while (groupsComboEl.firstChild) {
+                        groupsComboEl.removeChild(groupsComboEl.firstChild);
+                    }
+            	    if (o.responseText) {
+            	        var groups = eval('('+o.responseText+')');
+
+            	        // Populate the groups combo box.
+                        for (var i=0; i<groups.length; i++) {
+                            var optionEl = document.createElement("option");
+                            optionEl.setAttribute("value", groups[i].id);
+                            optionEl.setAttribute("onclick",
+                                "membersCombo.refreshMembers("+groups[i].id+")");
+                            optionEl.innerHTML = groups[i].name;
+                            groupsComboEl.appendChild(optionEl);
+                        }
+            	    }
+                }
+        	}
+        }
+    }
+    
+    // Hide the updategroups input since AJAX will take care of this.
+    var updateGroupsButton = document.getElementById("updategroups");
+    updateGroupsButton.setAttribute("style", "display:none;");
+}
+
+/**
+ * When a grouping is selected, we need to update the groups.
+ */
+UpdatableGroupsCombo.prototype.refreshGroups = function (groupingId) {
+    var sUrl = this.wwwRoot+"/group/index.php?id="+this.courseId+"&grouping="
+                        +groupingId+"&act_ajax_getgroupsingrouping";
+    YAHOO.util.Connect.asyncRequest('GET', sUrl, this.callback, null);
+}
+
+
+
+/**
+ * Class UpdatableMembersCombo
+ */
+function UpdatableMembersCombo(wwwRoot, courseId) {
+    this.wwwRoot = wwwRoot;
+    this.courseId = courseId;
+
+    this.callback = {
+        success: function(o) {
+
+        	if (o.responseText !== undefined) {
+                var selectEl = document.getElementById("members");
+
+        	    if (selectEl) {
+        	        // Clear the members combo box.
+                    while (selectEl.firstChild) {
+                        selectEl.removeChild(selectEl.firstChild);
+                    }
+            	    if (o.responseText) {
+            	        var members = eval('('+o.responseText+')');
+
+            	        // Populate the members combo box.
+                        for (var i=0; i<members.length; i++) {
+                            var optionEl = document.createElement("option");
+                            optionEl.setAttribute("value", members[i].id);
+                            optionEl.innerHTML = members[i].firstname+" "+members[i].lastname;
+                            selectEl.appendChild(optionEl);
+                        }
+            	    }
+                }
+        	}
+        }
+    }
+    
+    // Hide the updatemembers input since AJAX will take care of this.
+    var updateMembersButton = document.getElementById("updatemembers");
+    updateMembersButton.setAttribute("style", "display:none;");
+}
+
+/**
+ * When a group is selected, we need to update the members.
+ */
+UpdatableMembersCombo.prototype.refreshMembers = function (groupId) {
+    var sUrl = this.wwwRoot+"/group/index.php?id="+this.courseId+"&group="
+                        +groupId+"&act_ajax_getmembersingroup";
+    YAHOO.util.Connect.asyncRequest('GET', sUrl, this.callback, null);
+}
+
+
+