diff --git a/mod/group.php b/mod/group.php
index c896362ca2..f6f8e41733 100755
--- a/mod/group.php
+++ b/mod/group.php
@@ -76,14 +76,17 @@ function group_content(&$a) {
 	if($switchtotext === false)
 		$switchtotext = 400;
 
+	$tpl = get_markup_template('group_edit.tpl');
+	$context = array('$submit' => t('Submit'));
+
 	if(($a->argc == 2) && ($a->argv[1] === 'new')) {
-		$tpl = get_markup_template('group_new.tpl');
-		$o .= replace_macros($tpl,array(
-			'$desc' => t('Create a group of contacts/friends.'),
-			'$name' => t('Group Name: '),
-			'$submit' => t('Submit')
-		 ));
-		return $o;
+		
+		return replace_macros($tpl, $context + array(
+			'$title' => t('Create a group of contacts/friends.'),
+			'$gname' => array('groupname',t('Group Name: '),$group['name'], ''),
+		));
+
+
 	}
 
 	if(($a->argc == 3) && ($a->argv[1] === 'drop')) {
@@ -156,66 +159,61 @@ function group_content(&$a) {
 
 		$celeb = ((($a->user['page-flags'] == PAGE_SOAPBOX) || ($a->user['page-flags'] == PAGE_COMMUNITY)) ? true : false);
 
-		$tpl = get_markup_template('group_edit.tpl');
-		$o .= replace_macros($tpl, array(
-			'$gid' => $group['id'],
-			'$name' => $group['name'],
-			'$drop' => $drop_txt,
-			'$desc' => t('Click on a contact to add or remove.'),
+		
+		$context = $context + array(
 			'$title' => t('Group Editor'),
-			'$gname' => t('Group Name: '),
-			'$submit' => t('Submit')
-		));
+			'$gname' => array('groupname',t('Group Name: '),$group['name'], ''),
+			'$gid' => $group['id'],
+			'$drop' => $drop_txt,
+		);
 
 	}
 
 	if(! isset($group))
 		return;
 
-	$o .= '<div id="group-update-wrapper">';
-	if($change) 
-		$o = '';
+	$groupeditor = array(
+		'label_members' => t('Members'),
+		'members' => array(),
+		'label_contacts' => t('All Contacts'),
+		'contacts' => arraY(),
+	);
+		
 
-	$o .= '<h3>' . t('Members') . '</h3>';
-	$o .= '<div id="group-members">';
 	$textmode = (($switchtotext && (count($members) > $switchtotext)) ? true : false);
 	foreach($members as $member) {
 		if($member['url']) {
 			$member['click'] = 'groupChangeMember(' . $group['id'] . ',' . $member['id'] . '); return true;';
-			$o .= micropro($member,true,'mpgroup', $textmode);
+			$groupeditor['members'][] = micropro($member,true,'mpgroup', $textmode);
 		}
 		else
 			group_rmv_member(local_user(),$group['name'],$member['id']);
 	}
 
-	$o .= '</div><div id="group-members-end"></div>';
-	$o .= '<hr id="group-separator" />';
-	
-	$o .= '<h3>' . t('All Contacts') . '</h3>';
-	$o .= '<div id="group-all-contacts">';
+	$r = q("SELECT * FROM `contact` WHERE `uid` = %d AND `blocked` = 0 and `pending` = 0 and `self` = 0 ORDER BY `name` ASC",
+		intval(local_user())
+	);
 
-		$r = q("SELECT * FROM `contact` WHERE `uid` = %d AND `blocked` = 0 and `pending` = 0 and `self` = 0 ORDER BY `name` ASC",
-			intval(local_user())
-		);
-
-		if(count($r)) {
-			$textmode = (($switchtotext && (count($r) > $switchtotext)) ? true : false);
-			foreach($r as $member) {
-				if(! in_array($member['id'],$preselected)) {
-					$member['click'] = 'groupChangeMember(' . $group['id'] . ',' . $member['id'] . '); return true;';
-					$o .= micropro($member,true,'mpall', $textmode);
-				}
+	if(count($r)) {
+		$textmode = (($switchtotext && (count($r) > $switchtotext)) ? true : false);
+		foreach($r as $member) {
+			if(! in_array($member['id'],$preselected)) {
+				$member['click'] = 'groupChangeMember(' . $group['id'] . ',' . $member['id'] . '); return true;';
+				$groupeditor['contacts'][] = micropro($member,true,'mpall', $textmode);
 			}
 		}
+	}
 
-		$o .= '</div><div id="group-all-contacts-end"></div>';
+	$context['$groupeditor'] = $groupeditor;
+	$context['$desc'] = t('Click on a contact to add or remove.');
 
 	if($change) {
-		echo $o;
+		$tpl = get_markup_template('groupeditor.tpl');
+		echo replace_macros($tpl, $context);
 		killme();
 	}
-	$o .= '</div>';
-	return $o;
+	
+	return replace_macros($tpl, $context);
 
 }
 
diff --git a/view/group_edit.tpl b/view/group_edit.tpl
index 51782ab952..3689db7535 100755
--- a/view/group_edit.tpl
+++ b/view/group_edit.tpl
@@ -2,17 +2,21 @@
 
 
 <div id="group-edit-wrapper" >
-<form action="group/$gid" id="group-edit-form" method="post" >
-<div id="group-edit-name-wrapper" >
-<label id="group-edit-name-label" for="group-edit-name" >$gname</label>
-<input type="text" id="group-edit-name" name="groupname" value="$name" />
-</div>
-<div id="group-edit-name-end"></div>
-$drop
-<div id="group-edit-submit-wrapper" >
-<input type="submit" name="submit" value="$submit" >
-</div>
-<div id="group-edit-desc">$desc</div>
-<div id="group-edit-select-end" ></div>
-</form>
+	<form action="group/$gid" id="group-edit-form" method="post" >
+		
+		{{ inc field_input.tpl with $field=$gname }}{{ endinc }}
+		{{ if $drop }}$drop{{ endif }}
+		<div id="group-edit-submit-wrapper" >
+			<input type="submit" name="submit" value="$submit" >
+		</div>
+		<div id="group-edit-select-end" ></div>
+	</form>
 </div>
+
+
+{{ if $groupeditor }}
+	<div id="group-update-wrapper">
+		{{ inc groupeditor.tpl }}{{ endinc }}
+	</div>
+{{ endif }}
+{{ if $desc }}<div id="group-edit-desc">$desc</div>{{ endif }}
diff --git a/view/group_new.tpl b/view/group_new.tpl
deleted file mode 100755
index 735b51634d..0000000000
--- a/view/group_new.tpl
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-<div id="group-new-wrapper" >
-<form action="group/new" method="post">
-
-<div id="group-new-text">
-<p>
-$desc
-
-<div id="group-new-input-wrapper">
-<label id="group-new-label" for="group-new-name" >$name</label>
-<input name="groupname" id="group-new-name" />
-</div>
-<div id="group-new-input-end" ></div>
-
-<div id="group-new-submit-wrapper" >
-<input type="submit" name="submit" value="$submit" />
-</form>
-</div>
-<div id="group-new-end"></div>
-
- 
\ No newline at end of file
diff --git a/view/groupeditor.tpl b/view/groupeditor.tpl
new file mode 100644
index 0000000000..aa3853375b
--- /dev/null
+++ b/view/groupeditor.tpl
@@ -0,0 +1,16 @@
+<div id="group">
+<h3>$groupeditor.label_members</h3>
+<div id="group-members" class="contact_list">
+{{ for $groupeditor.contacts as $c}} $c {{ endfor }}
+</div>
+<div id="group-members-end"></div>
+<hr id="group-separator" />
+</div>
+
+<div id="contacts">
+<h3>$groupeditor.label_contacts</h3>
+<div id="group-all-contacts" class="contact_list">
+{{ for $groupeditor.members as $m}} $m {{ endfor }}
+</div>
+<div id="group-all-contacts-end"></div>
+</div>
diff --git a/view/theme/quattro/colors.less b/view/theme/quattro/colors.less
index 18d0fc620d..9183b2e777 100755
--- a/view/theme/quattro/colors.less
+++ b/view/theme/quattro/colors.less
@@ -71,6 +71,8 @@
 @NoticeColor: @Grey1;
 @NoticeBackgroundColor: #511919;
 
+@FieldHelpColor: @Grey3;
+
 @ThreadBackgroundColor: #f6f7f8;
 @ShinyBorderColor: @Yellow1;
 
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 9d26082616..27c48f1952 100755
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -890,6 +890,31 @@ ul.tabs {
 }
 
 
+/** group editor **/
+#group-edit-desc { margin-top: 1em; color: @FieldHelpColor; }
+#group-update-wrapper{
+	height: auto; overflow: auto;
+	#group {
+		width:300px; 
+		float:left;
+		margin-right:20px;
+	}
+	#contacts {
+		width:300px;
+		float:left;
+	}
+	#group-separator { display: none; }
+	.contact_list {
+		height: 300px;
+		border: 1px solid @MenuBorder;
+		overflow: auto;
+		.contact-block-div  {
+			width: 50px; height: 50px;
+			float: left;
+		}
+	}
+}
+
 /**
  * Form fields
  */
@@ -913,7 +938,7 @@ ul.tabs {
 	.field_help {
 		display: block;
 		margin-left: 200px;
-		color: #666666;
+		color: @FieldHelpColor;
 		
 	}
 
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index b728023c9f..6087e4cd17 100755
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -1304,6 +1304,37 @@ ul.tabs li {
 ul.tabs li .active {
   border-bottom: 1px solid #005c94;
 }
+/** group editor **/
+#group-edit-desc {
+  margin-top: 1em;
+  color: #999999;
+}
+#group-update-wrapper {
+  height: auto;
+  overflow: auto;
+}
+#group-update-wrapper #group {
+  width: 300px;
+  float: left;
+  margin-right: 20px;
+}
+#group-update-wrapper #contacts {
+  width: 300px;
+  float: left;
+}
+#group-update-wrapper #group-separator {
+  display: none;
+}
+#group-update-wrapper .contact_list {
+  height: 300px;
+  border: 1px solid #364e59;
+  overflow: auto;
+}
+#group-update-wrapper .contact_list .contact-block-div {
+  width: 50px;
+  height: 50px;
+  float: left;
+}
 /**
  * Form fields
  */
@@ -1326,7 +1357,7 @@ ul.tabs li .active {
 .field .field_help {
   display: block;
   margin-left: 200px;
-  color: #666666;
+  color: #999999;
 }
 .field .onoff {
   float: left;