diff --git a/public/app/core/components/user_group_picker.ts b/public/app/core/components/user_group_picker.ts
index d3b9b2f8ef4..05f2c016f40 100644
--- a/public/app/core/components/user_group_picker.ts
+++ b/public/app/core/components/user_group_picker.ts
@@ -4,66 +4,38 @@ import _ from 'lodash';
 
 const template = `
 <div class="dropdown">
-  <metric-segment segment="ctrl.userGroupSegment"
-    get-options="ctrl.debouncedSearchUserGroups($query)"
-    on-change="ctrl.onChange()"></metric-segment>
-  </div>
+  <gf-form-dropdown model="ctrl.group"
+                    get-options="ctrl.debouncedSearchGroups($query)"
+                    css-class="gf-size-auto"
+                    on-change="ctrl.onChange($option)"
+  </gf-form-dropdown>
+</div>
 `;
 export class UserGroupPickerCtrl {
-  userGroupSegment: any;
-  userGroupId: number;
-  debouncedSearchUserGroups: any;
+  group: any;
+  userGroupPicked: any;
+  debouncedSearchGroups: any;
 
   /** @ngInject */
   constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
-    this.debouncedSearchUserGroups = _.debounce(this.searchUserGroups, 500, {'leading': true, 'trailing': false});
-    this.resetUserGroupSegment();
+    this.debouncedSearchGroups = _.debounce(this.searchGroups, 500, {'leading': true, 'trailing': false});
+    this.reset();
   }
 
-  resetUserGroupSegment() {
-    this.userGroupId = null;
-
-    const userGroupSegment = this.uiSegmentSrv.newSegment({
-      value: 'Choose',
-      selectMode: true,
-      fake: true,
-      cssClass: 'gf-size-auto'
-    });
-
-    if (!this.userGroupSegment) {
-      this.userGroupSegment = userGroupSegment;
-    } else {
-      this.userGroupSegment.value = userGroupSegment.value;
-      this.userGroupSegment.html = userGroupSegment.html;
-      this.userGroupSegment.value = userGroupSegment.value;
-    }
+  reset() {
+    this.group = {text: 'Choose', value: null};
   }
 
-  userGroupIdChanged(newVal) {
-    if (!newVal) {
-      this.resetUserGroupSegment();
-    }
-  }
-
-  searchUserGroups(query: string) {
+  searchGroups(query: string) {
     return Promise.resolve(this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + query).then(result => {
-      return _.map(result.userGroups, ug => { return this.uiSegmentSrv.newSegment(ug.name); });
+      return _.map(result.userGroups, ug => {
+        return {text: ug.name, value: ug};
+      });
     }));
   }
 
-  onChange() {
-    this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + this.userGroupSegment.value)
-      .then(result => {
-        if (!result) {
-          return;
-        }
-
-        result.userGroups.forEach(ug => {
-          if (ug.name === this.userGroupSegment.value) {
-            this.userGroupId = ug.id;
-          }
-        });
-    });
+  onChange(option) {
+    this.userGroupPicked({$group: option.value});
   }
 }
 
@@ -75,11 +47,11 @@ export function userGroupPicker() {
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {
-      userGroupId: '=',
+      userGroupPicked: '&',
     },
     link: function(scope, elem, attrs, ctrl) {
-      scope.$watch("ctrl.userGroupId", (newVal, oldVal) => {
-        ctrl.userGroupIdChanged(newVal);
+      scope.$on("user-group-picker-reset", () => {
+        ctrl.reset();
       });
     }
   };
diff --git a/public/app/features/dashboard/acl/acl.html b/public/app/features/dashboard/acl/acl.html
index 02727459a38..78c8b6d52e2 100644
--- a/public/app/features/dashboard/acl/acl.html
+++ b/public/app/features/dashboard/acl/acl.html
@@ -31,7 +31,7 @@
       </tr>
       <tr ng-show="ctrl.aclItems.length === 0">
         <td colspan="4">
-          <em>No permission, will only accessable by admins.</em>
+          <em>No permissions. Will only be accessible by admins.</em>
         </td>
       </tr>
     </table>
@@ -41,25 +41,14 @@
       <div class="gf-form-inline">
         <div class="gf-form">
           <div class="gf-form-select-wrapper">
-            <select class="gf-form-input gf-size-auto" ng-model="ctrl.newType" ng-options="r for r in ['User Group', 'User']"></select>
+            <select class="gf-form-input gf-size-auto" ng-model="ctrl.newType" ng-options="p.value as p.text for p in ctrl.aclTypes"  ng-change="ctrl.typeChanged()"></select>
           </div>
         </div>
         <div class="gf-form" ng-show="ctrl.newType === 'User'">
-          <span class="gf-form-label">User</span>
           <user-picker user-picked="ctrl.userPicked($user)"></user-picker>
         </div>
-        <div class="gf-form" ng-show="ctrl.newType === 'User Group'">
-          <span class="gf-form-label">User Group</span>
-          <user-group-picker user-group-id="ctrl.newAcl.userGroupId"></user-group-picker>
-        </div>
-        <div class="gf-form">
-          <span class="gf-form-label query-keyword">Can</span>
-          <div class="gf-form-select-wrapper">
-            <select class="gf-form-input gf-size-auto" ng-model="ctrl.newAcl.permission" ng-options="p.value as p.text for p in ctrl.permissionOptions"></select>
-          </div>
-        </div>
-        <div class="gf-form">
-          <button class="btn gf-form-btn btn-secondary" ng-click="ctrl.addPermission()">Add</button>
+        <div class="gf-form" ng-show="ctrl.newType === 'Group'">
+          <user-group-picker user-group-picked="ctrl.groupPicked($group)"></user-group-picker>
         </div>
       </div>
     </form>
diff --git a/public/app/features/dashboard/acl/acl.ts b/public/app/features/dashboard/acl/acl.ts
index 87249f8891f..d59ac6d2464 100644
--- a/public/app/features/dashboard/acl/acl.ts
+++ b/public/app/features/dashboard/acl/acl.ts
@@ -12,21 +12,28 @@ export class AclCtrl {
     {value: 2, text: 'Edit'},
     {value: 4, text: 'Admin'}
   ];
+  aclTypes = [
+    {value: 'Group', text: 'User Group'},
+    {value: 'User',  text: 'User'},
+    {value: 'Viewer', text: 'Everyone With Viewer Role'},
+    {value: 'Editor', text: 'Everyone With Editor Role'}
+  ];
 
   newType: string;
-  newAcl: DashboardAcl;
   canUpdate: boolean;
 
   /** @ngInject */
   constructor(private backendSrv, private dashboardSrv, private $sce, private $scope) {
     this.aclItems = [];
-    this.newType = 'User Group';
-    this.resetNew();
-
+    this.resetNewType();
     this.dashboard = dashboardSrv.getCurrent();
     this.get(this.dashboard.id);
   }
 
+  resetNewType() {
+    this.newType = 'Group';
+  }
+
   get(dashboardId: number) {
     return this.backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`)
       .then(result => {
@@ -49,33 +56,57 @@ export class AclCtrl {
     return item;
   }
 
-  addPermission() {
-    this.aclItems.push(this.prepareViewModel(this.newAcl));
-    this.$scope.$broadcast('user-picker-reset');
-    this.$scope.$broadcast('user-group-picker-reset');
-  }
-
-  resetNew() {
-    this.newAcl = {
-      userId: 0,
-      userGroupId: 0,
-      permission: 1
-    };
-  }
-
   update() {
     return this.backendSrv.post(`/api/dashboards/id/${this.dashboard.id}/acl`, {
-      acl: this.aclItems
+      acl: this.aclItems.map(item => {
+        return {
+          id: item.id,
+          userId: item.userId,
+          userGroupId: item.userGroupId,
+          role: item.role,
+          permission: item.permission,
+        };
+      })
     });
   }
 
+  typeChanged() {
+    if (this.newType === 'Viewer' || this.newType === 'Editor') {
+      this.aclItems.push(this.prepareViewModel({
+        permission: 1,
+        role: this.newType
+      }));
+
+      this.canUpdate = true;
+      this.resetNewType();
+    }
+  }
+
   permissionChanged() {
     this.canUpdate = true;
   }
 
   userPicked(user) {
-    this.newAcl.userLogin = user.login;
-    this.newAcl.userId = user.id;
+    this.aclItems.push(this.prepareViewModel({
+      userId: user.id,
+      userLogin: user.login,
+      permission: 1,
+    }));
+
+    this.canUpdate = true;
+    this.$scope.$broadcast('user-picker-reset');
+  }
+
+  groupPicked(group) {
+    console.log(group);
+    this.aclItems.push(this.prepareViewModel({
+      userGroupId: group.id,
+      userGroup: group.name,
+      permission: 1,
+    }));
+
+    this.canUpdate = true;
+    this.$scope.$broadcast('user-group-picker-reset');
   }
 
   removeItem(index) {
@@ -107,10 +138,10 @@ export interface FormModel {
 export interface DashboardAcl {
   id?: number;
   dashboardId?: number;
-  userId: number;
+  userId?: number;
   userLogin?: number;
   userEmail?: string;
-  userGroupId: number;
+  userGroupId?: number;
   userGroup?: string;
   permission?: number;
   permissionName?: string;