diff --git a/src/components/FormItem/CheckboxGroup/index.jsx b/src/components/FormItem/CheckboxGroup/index.jsx
index f2f6ba0f..4c324c95 100644
--- a/src/components/FormItem/CheckboxGroup/index.jsx
+++ b/src/components/FormItem/CheckboxGroup/index.jsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, { Component } from 'react';
-import { Checkbox } from 'antd';
+import { Checkbox, Row, Col } from 'antd';
 import PropTypes from 'prop-types';
 
 export default class index extends Component {
@@ -57,12 +57,22 @@ export default class index extends Component {
   };
 
   render() {
-    const { className, options } = this.props;
+    const { className, options, span } = this.props;
     const values = this.getValues();
     const conf = {
       className,
       onChange: this.onChange,
     };
-    return <Checkbox.Group {...conf} options={options} value={values} />;
+    return (
+      <Checkbox.Group {...conf} value={values} style={{ width: '100%' }}>
+        <Row>
+          {options.map((opt) => (
+            <Col span={span} key={opt.value}>
+              <Checkbox value={opt.value}>{opt.label}</Checkbox>
+            </Col>
+          ))}
+        </Row>
+      </Checkbox.Group>
+    );
   }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index ee1c87da..4442fdb8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -52,6 +52,7 @@
   "Add network": "Add network",
   "Additional routes announced to the instance, one entry per line(e.g. 192.168.200.0/24,10.56.1.254)": "Additional routes announced to the instance, one entry per line(e.g. 192.168.200.0/24,10.56.1.254)",
   "Additional routes announced to the instance, one entry per line(e.g. {ip})": "Additional routes announced to the instance, one entry per line(e.g. {ip})",
+  "Admin": "Admin",
   "Admin State": "Admin State",
   "Admin Status": "Admin Status",
   "Administrator": "Administrator",
@@ -1284,6 +1285,7 @@
   "Ram value is { ram }, NUMA RAM value is { totalRam }, need to be equal. ": "Ram value is { ram }, NUMA RAM value is { totalRam }, need to be equal. ",
   "Ramdisk ID": "Ramdisk ID",
   "Ramdisk Image": "Ramdisk Image",
+  "Reader": "Reader",
   "Real Name": "Real Name",
   "Reason": "Reason",
   "Reason: ": "Reason: ",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index befd5ac0..898ee3c5 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -52,6 +52,7 @@
   "Add network": "添加网络",
   "Additional routes announced to the instance, one entry per line(e.g. 192.168.200.0/24,10.56.1.254)": "云主机额外路由，每行一条(例如: 192.168.200.0/24,10.56.1.254)",
   "Additional routes announced to the instance, one entry per line(e.g. {ip})": "云主机额外路由，每行一条(例如: {ip})",
+  "Admin": "管理员",
   "Admin State": "管理状态",
   "Admin Status": "管理状态",
   "Administrator": "管理平台",
@@ -1284,6 +1285,7 @@
   "Ram value is { ram }, NUMA RAM value is { totalRam }, need to be equal. ": "内存是 { ram }MB，NUMA节点的内存是{ totalRam }MB，需要一致。",
   "Ramdisk ID": "内存盘ID",
   "Ramdisk Image": "Ramdisk镜像",
+  "Reader": "只读",
   "Real Name": "真实姓名",
   "Reason": "原因",
   "Reason: ": "原因：",
diff --git a/src/pages/user-center/containers/Credentials/actions/Create.jsx b/src/pages/user-center/containers/Credentials/actions/Create.jsx
index ae596f0f..e7b4ea62 100644
--- a/src/pages/user-center/containers/Credentials/actions/Create.jsx
+++ b/src/pages/user-center/containers/Credentials/actions/Create.jsx
@@ -19,18 +19,30 @@ import moment from 'moment';
 import globalRootStore from 'stores/root';
 import { toJS } from 'mobx';
 import FileSaver from 'file-saver';
+import rolePermission from 'resources/role';
 
-@inject('rootStore')
-@observer
-export default class Create extends ModalAction {
+export class Create extends ModalAction {
   static id = 'create-application_credentials';
 
   static title = t('Create Application Credentials');
 
+
+  static get modalSize() {
+    return 'middle';
+  }
+
+  getModalSize() {
+    return 'middle';
+  }
+
   get name() {
     return t('Create Application Credentials');
   }
 
+  get rolePermissions() {
+    return rolePermission;
+  }
+
   onSubmit = (values) => {
     if (values.expires_at) {
       values.expires_at = values.expires_at.clone().endOf('day');
@@ -61,7 +73,10 @@ export default class Create extends ModalAction {
     // const baseRoles = toJS(globalRootStore.baseRoles);
     const roles = toJS(globalRootStore.roles);
 
-    return roles.map((i) => ({ label: i.name, value: i.id }));
+    return roles.map((i) => ({
+      label: this.rolePermissions[i.name] || i.name,
+      value: i.id,
+    }));
   }
 
   get formItems() {
@@ -86,6 +101,7 @@ export default class Create extends ModalAction {
         label: t('Roles'),
         type: 'check-group',
         options: this.roleOptions,
+        span: 12,
       },
       {
         name: 'description',
@@ -96,3 +112,5 @@ export default class Create extends ModalAction {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Create))
\ No newline at end of file
diff --git a/src/pages/user-center/containers/Credentials/index.jsx b/src/pages/user-center/containers/Credentials/index.jsx
index 45ab83b9..a4d3e5a2 100644
--- a/src/pages/user-center/containers/Credentials/index.jsx
+++ b/src/pages/user-center/containers/Credentials/index.jsx
@@ -14,16 +14,14 @@
 
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { Popover, Row, Col } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
+import { Row, Col } from 'antd';
 import Base from 'containers/List';
 import { CredentialStore } from 'stores/keystone/credential';
 import globalRootStore from 'stores/root';
+import rolePermission from 'resources/role';
 import { actionConfigs, detailConfigs } from './actions';
 
-@inject('rootStore')
-@observer
-export default class Credentials extends Base {
+export class Credentials extends Base {
   init() {
     this.store = new CredentialStore();
     this.downloadStore = new CredentialStore();
@@ -43,6 +41,10 @@ export default class Credentials extends Base {
     return params;
   };
 
+  get rolePermissions() {
+    return rolePermission;
+  }
+
   get isFilterByBackend() {
     return true;
   }
@@ -91,23 +93,17 @@ export default class Credentials extends Base {
       {
         title: t('Roles'),
         dataIndex: 'roles',
-        render: (roles) => {
-          const content = (
-            <Row gutter={[8]} style={{ maxWidth: 200 }}>
-              {roles.map((i) => (
-                <Col span={24} key={i.id}>
-                  {i.name}
-                </Col>
-              ))}
-            </Row>
-          );
-          return (
-            <Popover content={content}>
-              <SearchOutlined />
-            </Popover>
-          );
-        },
-        isHideable: true,
+        render: (roles) => (
+          <Row gutter={[8]} style={{ maxWidth: 300 }}>
+            {roles.map((i) => (
+              <Col span={24} key={i.id}>
+                {this.rolePermissions[i.name] || i.name}
+              </Col>
+            ))}
+          </Row>
+        ),
+        stringify: (values) =>
+          values.map((i) => this.rolePermissions[i.name] || i.name).join('\n'),
       },
     ];
     return ret;
@@ -123,3 +119,5 @@ export default class Credentials extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(Credentials))
\ No newline at end of file
diff --git a/src/resources/role.js b/src/resources/role.js
index e47a0a5e..db8c92ea 100644
--- a/src/resources/role.js
+++ b/src/resources/role.js
@@ -18,6 +18,9 @@ const rolePermission = {
   project_member: t('Project Member'),
   system_admin: t('System Admin'),
   system_reader: t('System Reader'),
+  admin: t('Admin'),
+  reader: t('Reader'),
+  member: t('Member'),
 };
 
 export default rolePermission;