diff --git a/pkg/api/user_group.go b/pkg/api/user_group.go
index 8885cc1e961..183b7e80f65 100644
--- a/pkg/api/user_group.go
+++ b/pkg/api/user_group.go
@@ -66,6 +66,7 @@ func SearchUserGroups(c *middleware.Context) Response {
 		Name:  c.Query("name"),
 		Page:  page,
 		Limit: perPage,
+		OrgId: c.OrgId,
 	}
 
 	if err := bus.Dispatch(&query); err != nil {
diff --git a/pkg/models/user_group.go b/pkg/models/user_group.go
index 16f92046a3a..e5e361526d4 100644
--- a/pkg/models/user_group.go
+++ b/pkg/models/user_group.go
@@ -55,6 +55,7 @@ type SearchUserGroupsQuery struct {
 	Name  string
 	Limit int
 	Page  int
+	OrgId int64
 
 	Result SearchUserGroupQueryResult
 }
diff --git a/pkg/services/sqlstore/user_group.go b/pkg/services/sqlstore/user_group.go
index 36c4ab59cae..c90141310ab 100644
--- a/pkg/services/sqlstore/user_group.go
+++ b/pkg/services/sqlstore/user_group.go
@@ -119,12 +119,16 @@ func SearchUserGroups(query *m.SearchUserGroupsQuery) error {
 	queryWithWildcards := "%" + query.Query + "%"
 
 	sess := x.Table("user_group")
+	sess.Where("org_id=?", query.OrgId)
+
 	if query.Query != "" {
 		sess.Where("name LIKE ?", queryWithWildcards)
 	}
 	if query.Name != "" {
 		sess.Where("name=?", query.Name)
 	}
+	sess.Asc("name")
+
 	offset := query.Limit * (query.Page - 1)
 	sess.Limit(query.Limit, offset)
 	sess.Cols("id", "name")
@@ -222,7 +226,7 @@ func GetUserGroupMembers(query *m.GetUserGroupMembersQuery) error {
 	sess.Join("INNER", "user", fmt.Sprintf("user_group_member.user_id=%s.id", x.Dialect().Quote("user")))
 	sess.Where("user_group_member.user_group_id=?", query.UserGroupId)
 	sess.Cols("user.org_id", "user_group_member.user_group_id", "user_group_member.user_id", "user.email", "user.login")
-	sess.Asc("user.email", "user.login")
+	sess.Asc("user.login", "user.email")
 
 	err := sess.Find(&query.Result)
 	return err
diff --git a/public/app/features/org/partials/user_group_details.html b/public/app/features/org/partials/user_group_details.html
index da1e3066d31..a1f9f02f5cb 100644
--- a/public/app/features/org/partials/user_group_details.html
+++ b/public/app/features/org/partials/user_group_details.html
@@ -5,44 +5,45 @@
 		<h1>Edit User Group</h1>
 	</div>
 
-	<form name="userGroupDetailsForm" class="gf-form-group">
+	<form name="userGroupDetailsForm" class="gf-form-group gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label width-10">Name</span>
 			<input type="text" required ng-model="ctrl.userGroup.name" class="gf-form-input max-width-14" >
 		</div>
 
-		<div class="gf-form-button-row">
+		<div class="gf-form">
 			<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button>
 		</div>
 	</form>
 
-	<h3 class="page-heading">User Group Members</h3>
+  <div class="gf-form-group">
+    <h3 class="page-heading">User Group Members</h3>
 
-  <form name="ctrl.addMemberForm" class="gf-form-group">
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Name</span>
-      <user-picker user-id="ctrl.userId"></user-picker>
-    </div>
+    <form name="ctrl.addMemberForm" class="gf-form-group">
+      <div class="gf-form">
+        <span class="gf-form-label width-10">User</span>
+        <user-picker user-picked="ctrl.userPicked($user)"></user-picker>
+      </div>
+    </form>
 
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="ctrl.addMember()">Add</button>
-		</div>
-	</form>
-
-	<table class="grafana-options-table">
-		<tr>
-			<th>Username</th>
-			<th>Email</th>
-			<th></th>
-		</tr>
-		<tr ng-repeat="userGroup in ctrl.userGroupMembers">
-			<td>{{userGroup.login}}</td>
-			<td>{{userGroup.email}}</td>
-			<td style="width: 1%">
-				<a ng-click="ctrl.removeUserGroupMember(userGroup)" class="btn btn-danger btn-mini">
-					<i class="fa fa-remove"></i>
-				</a>
-			</td>
-		</tr>
-	</table>
+    <table class="grafana-options-table" ng-show="ctrl.userGroupMembers.length > 0">
+      <tr>
+        <th>Username</th>
+        <th>Email</th>
+        <th></th>
+      </tr>
+      <tr ng-repeat="member in ctrl.userGroupMembers">
+        <td>{{member.login}}</td>
+        <td>{{member.email}}</td>
+        <td style="width: 1%">
+          <a ng-click="ctrl.removeUserGroupMember(member)" class="btn btn-danger btn-mini">
+            <i class="fa fa-remove"></i>
+          </a>
+        </td>
+      </tr>
+    </table>
+    <div>
+  <em class="muted" ng-hide="ctrl.userGroupMembers.length > 0">
+    This user group has no members yet.
+  </em>
 </div>
diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html
index 293304fdfa1..7208ef433d6 100644
--- a/public/app/features/org/partials/user_groups.html
+++ b/public/app/features/org/partials/user_groups.html
@@ -16,7 +16,7 @@
       </span>
     </div>
   <div class="admin-list-table">
-    <table class="filter-table form-inline">
+    <table class="filter-table form-inline" ng-show="ctrl.userGroups.length > 0">
       <thead>
         <tr>
           <th>Id</th>
@@ -54,4 +54,8 @@
       </li>
     </ol>
   </div>
+
+  <em class="muted" ng-hide="ctrl.userGroups.length > 0">
+    No User Groups found.
+  </em>
 </div>
diff --git a/public/app/features/org/specs/user_group_details_ctrl_specs.ts b/public/app/features/org/specs/user_group_details_ctrl_specs.ts
index 99b06c79c25..7c68d678dbd 100644
--- a/public/app/features/org/specs/user_group_details_ctrl_specs.ts
+++ b/public/app/features/org/specs/user_group_details_ctrl_specs.ts
@@ -21,18 +21,20 @@ var backendSrv = {
       backendSrv: backendSrv,
       $routeParams: {id: 1}
     });
-    ctx.ctrl.userId = 1;
   }));
 
   describe('when user is chosen to be added to user group', () => {
     beforeEach(() => {
-      ctx.ctrl.addMemberForm = {$valid: true};
-      ctx.ctrl.addMember();
+      const userItem = {
+        id: 2,
+        login: 'user2',
+      };
+      ctx.ctrl.userPicked(userItem);
     });
 
     it('should parse the result and save to db', () => {
       expect(backendSrv.post.getCall(0).args[0]).to.eql('/api/user-groups/1/members');
-      expect(backendSrv.post.getCall(0).args[1].userId).to.eql(1);
+      expect(backendSrv.post.getCall(0).args[1].userId).to.eql(2);
     });
 
     it('should refresh the list after saving.', () => {
diff --git a/public/app/features/org/user_group_details_ctrl.ts b/public/app/features/org/user_group_details_ctrl.ts
index c8e4effadff..357ac84651e 100644
--- a/public/app/features/org/user_group_details_ctrl.ts
+++ b/public/app/features/org/user_group_details_ctrl.ts
@@ -6,9 +6,7 @@ import _ from 'lodash';
 export default class UserGroupDetailsCtrl {
   userGroup: UserGroup;
   userGroupMembers: User[] = [];
-  userId: number;
   navModel: any;
-  addMemberForm: any;
 
   constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
     this.navModel = navModelSrv.getOrgNav(3);
@@ -51,11 +49,9 @@ export default class UserGroupDetailsCtrl {
     this.backendSrv.put('/api/user-groups/' + this.userGroup.id, {name: this.userGroup.name});
   }
 
-  addMember() {
-    if (!this.addMemberForm.$valid) { return; }
-
-    this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: this.userId}).then(() => {
-      this.userId = null;
+  userPicked(user) {
+    this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: user.id}).then(() => {
+      this.$scope.$broadcast('user-picker-reset');
       this.get();
     });
   }