diff --git a/object/permission.go b/object/permission.go
index f99d13fe..45405c7e 100644
--- a/object/permission.go
+++ b/object/permission.go
@@ -30,6 +30,7 @@ type Permission struct {
 	Description string `xorm:"varchar(100)" json:"description"`
 
 	Users   []string `xorm:"mediumtext" json:"users"`
+	Groups  []string `xorm:"mediumtext" json:"groups"`
 	Roles   []string `xorm:"mediumtext" json:"roles"`
 	Domains []string `xorm:"mediumtext" json:"domains"`
 
diff --git a/web/src/PermissionEditPage.js b/web/src/PermissionEditPage.js
index 8858111a..5aa259c8 100644
--- a/web/src/PermissionEditPage.js
+++ b/web/src/PermissionEditPage.js
@@ -17,6 +17,7 @@ import {Button, Card, Col, Input, Row, Select, Switch} from "antd";
 import * as PermissionBackend from "./backend/PermissionBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as UserBackend from "./backend/UserBackend";
+import * as GroupBackend from "./backend/GroupBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import * as RoleBackend from "./backend/RoleBackend";
@@ -35,6 +36,7 @@ class PermissionEditPage extends React.Component {
       organizations: [],
       model: null,
       users: [],
+      groups: [],
       roles: [],
       models: [],
       resources: [],
@@ -67,6 +69,7 @@ class PermissionEditPage extends React.Component {
         });
 
         this.getUsers(permission.owner);
+        this.getGroups(permission.owner);
         this.getRoles(permission.owner);
         this.getModels(permission.owner);
         this.getResources(permission.owner);
@@ -97,6 +100,20 @@ class PermissionEditPage extends React.Component {
       });
   }
 
+  getGroups(organizationName) {
+    GroupBackend.getGroups(organizationName)
+      .then((res) => {
+        if (res.status === "error") {
+          Setting.showMessage("error", res.msg);
+          return;
+        }
+
+        this.setState({
+          groups: res.data,
+        });
+      });
+  }
+
   getRoles(organizationName) {
     RoleBackend.getRoles(organizationName)
       .then((res) => {
@@ -192,6 +209,7 @@ class PermissionEditPage extends React.Component {
             <Select virtual={false} style={{width: "100%"}} disabled={!Setting.isAdminUser(this.props.account)} value={this.state.permission.owner} onChange={(owner => {
               this.updatePermissionField("owner", owner);
               this.getUsers(owner);
+              this.getGroups(owner);
               this.getRoles(owner);
               this.getModels(owner);
               this.getResources(owner);
@@ -263,6 +281,17 @@ class PermissionEditPage extends React.Component {
             />
           </Col>
         </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("role:Sub groups"), i18next.t("role:Sub groups - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.permission.groups}
+              onChange={(value => {this.updatePermissionField("groups", value);})}
+              options={this.state.groups.map((group) => Setting.getOption(`${group.owner}/${group.name}`, `${group.owner}/${group.name}`))}
+            />
+          </Col>
+        </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("role:Sub roles"), i18next.t("role:Sub roles - Tooltip"))} :
diff --git a/web/src/PermissionListPage.js b/web/src/PermissionListPage.js
index 645d9682..c55fca12 100644
--- a/web/src/PermissionListPage.js
+++ b/web/src/PermissionListPage.js
@@ -33,6 +33,7 @@ class PermissionListPage extends BaseListPage {
       createdTime: moment().format(),
       displayName: `New Permission - ${randomName}`,
       users: [`${this.props.account.owner}/${this.props.account.name}`],
+      groups: [],
       roles: [],
       domains: [],
       resourceType: "Application",
@@ -179,6 +180,17 @@ class PermissionListPage extends BaseListPage {
           return Setting.getTags(text, "users");
         },
       },
+      {
+        title: i18next.t("role:Sub groups"),
+        dataIndex: "groups",
+        key: "groups",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("groups"),
+        render: (text, record, index) => {
+          return Setting.getTags(text, "groups");
+        },
+      },
       {
         title: i18next.t("role:Sub roles"),
         dataIndex: "roles",