diff --git a/object/role.go b/object/role.go
index 90622425..77e2a528 100644
--- a/object/role.go
+++ b/object/role.go
@@ -32,6 +32,7 @@ type Role 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"`
 	IsEnabled bool     `json:"isEnabled"`
diff --git a/web/src/RoleEditPage.js b/web/src/RoleEditPage.js
index 27f44ba0..3b292adf 100644
--- a/web/src/RoleEditPage.js
+++ b/web/src/RoleEditPage.js
@@ -14,11 +14,12 @@
 
 import React from "react";
 import {Button, Card, Col, Input, Row, Select, Switch} from "antd";
-import * as RoleBackend from "./backend/RoleBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as UserBackend from "./backend/UserBackend";
+import * as GroupBackend from "./backend/GroupBackend";
+import * as RoleBackend from "./backend/RoleBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-import * as UserBackend from "./backend/UserBackend";
 
 class RoleEditPage extends React.Component {
   constructor(props) {
@@ -30,6 +31,7 @@ class RoleEditPage extends React.Component {
       role: null,
       organizations: [],
       users: [],
+      groups: [],
       roles: [],
       mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
@@ -57,6 +59,7 @@ class RoleEditPage extends React.Component {
         });
 
         this.getUsers(this.state.organizationName);
+        this.getGroups(this.state.organizationName);
         this.getRoles(this.state.organizationName);
       });
   }
@@ -84,6 +87,20 @@ class RoleEditPage 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) => {
@@ -176,6 +193,17 @@ class RoleEditPage 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.role.groups}
+              onChange={(value => {this.updateRoleField("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/RoleListPage.js b/web/src/RoleListPage.js
index 9fdd0e5f..d3055538 100644
--- a/web/src/RoleListPage.js
+++ b/web/src/RoleListPage.js
@@ -33,6 +33,7 @@ class RoleListPage extends BaseListPage {
       createdTime: moment().format(),
       displayName: `New Role - ${randomName}`,
       users: [],
+      groups: [],
       roles: [],
       domains: [],
       isEnabled: true,
@@ -171,6 +172,17 @@ class RoleListPage 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",