diff --git a/object/user.go b/object/user.go
index 97f120fc..2b5aff03 100644
--- a/object/user.go
+++ b/object/user.go
@@ -27,6 +27,7 @@ type User struct {
 	Password     string `xorm:"varchar(100)" json:"password"`
 	PasswordType string `xorm:"varchar(100)" json:"passwordType"`
 	DisplayName  string `xorm:"varchar(100)" json:"displayName"`
+	Avatar       string `xorm:"varchar(100)" json:"avatar"`
 	Email        string `xorm:"varchar(100)" json:"email"`
 	Phone        string `xorm:"varchar(100)" json:"phone"`
 }
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index 1e8dddd9..3c97305d 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -17,6 +17,7 @@ import {Button, Card, Col, Input, Row, Select} from 'antd';
 import * as UserBackend from "./backend/UserBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
+import {LinkOutlined} from "@ant-design/icons";
 
 const { Option } = Select;
 
@@ -102,6 +103,43 @@ class UserEditPage extends React.Component {
             }} />
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Display Name:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.displayName} onChange={e => {
+              this.updateUserField('displayName', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Avatar:
+          </Col>
+          <Col span={22} >
+            <Row style={{marginTop: '20px'}} >
+              <Col style={{marginTop: '5px'}} span={1}>
+                URL:
+              </Col>
+              <Col span={23} >
+                <Input prefix={<LinkOutlined/>} value={this.state.user.avatar} onChange={e => {
+                  this.updateUserField('avatar', e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: '20px'}} >
+              <Col style={{marginTop: '5px'}} span={1}>
+                Preview:
+              </Col>
+              <Col span={23} >
+                <a target="_blank" href={this.state.user.avatar}>
+                  <img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: '20px'}}/>
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
             Password Type:
@@ -122,16 +160,6 @@ class UserEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={2}>
-            Display Name:
-          </Col>
-          <Col span={22} >
-            <Input value={this.state.user.displayName} onChange={e => {
-              this.updateUserField('displayName', e.target.value);
-            }} />
-          </Col>
-        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
             Email:
diff --git a/web/src/UserListPage.js b/web/src/UserListPage.js
index 7a943a4a..f2060e14 100644
--- a/web/src/UserListPage.js
+++ b/web/src/UserListPage.js
@@ -49,6 +49,7 @@ class UserListPage extends React.Component {
       password: "123456",
       passwordType: "plain",
       displayName: `New User - ${this.state.users.length}`,
+      avatar: "https://casbin.org/img/casbin.svg",
       email: "user@example.com",
       phone: "1-12345678",
     }
@@ -144,6 +145,19 @@ class UserListPage extends React.Component {
         // width: '100px',
         sorter: (a, b) => a.displayName.localeCompare(b.displayName),
       },
+      {
+        title: 'Avatar',
+        dataIndex: 'avatar',
+        key: 'avatar',
+        width: '100px',
+        render: (text, record, index) => {
+          return (
+            <a target="_blank" href={text}>
+              <img src={text} alt={text} width={50} />
+            </a>
+          )
+        }
+      },
       {
         title: 'Email',
         dataIndex: 'email',