diff --git a/object/application.go b/object/application.go
index 21080e6e..ba4aa305 100644
--- a/object/application.go
+++ b/object/application.go
@@ -25,6 +25,7 @@ type Application struct {
 	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
 
 	DisplayName string   `xorm:"varchar(100)" json:"displayName"`
+	Logo        string   `xorm:"varchar(100)" json:"logo"`
 	Providers   []string `xorm:"varchar(100)" json:"providers"`
 }
 
diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index 3077a28c..39d158b6 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import {Button, Card, Col, Input, Row, Select} from 'antd';
+import {AutoComplete, Button, Card, Col, Input, Row, Select} from 'antd';
 import {LinkOutlined} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as Setting from "./Setting";
@@ -86,6 +86,33 @@ class ApplicationEditPage extends React.Component {
             }} />
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Logo:
+          </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.application.logo} onChange={e => {
+                  this.updateApplicationField('logo', 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.application.logo}>
+                  <img src={this.state.application.logo} alt={this.state.application.logo} height={90} style={{marginBottom: '20px'}}/>
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
             Providers:
diff --git a/web/src/ApplicationListPage.js b/web/src/ApplicationListPage.js
index b4085079..c1afff0c 100644
--- a/web/src/ApplicationListPage.js
+++ b/web/src/ApplicationListPage.js
@@ -32,6 +32,7 @@ class ApplicationListPage extends React.Component {
       name: `application_${this.state.applications.length}`,
       createdTime: moment().format(),
       displayName: `New Application - ${this.state.applications.length}`,
+      logo: "https://cdn.jsdelivr.net/gh/casbin/static/img/logo@2x.png",
       providers: [],
     }
   }
@@ -96,6 +97,21 @@ class ApplicationListPage extends React.Component {
         // width: '100px',
         sorter: (a, b) => a.displayName.localeCompare(b.displayName),
       },
+      {
+        title: 'Logo',
+        dataIndex: 'logo',
+        key: 'logo',
+        width: '100px',
+        render: (text, record, index) => {
+          return (
+            <div>
+              <a target="_blank" href={text}>
+                <img src={text} alt={text} width={150} style={{marginBottom: '20px'}}/>
+              </a>
+            </div>
+          )
+        }
+      },
       {
         title: 'Providers',
         dataIndex: 'providers',