diff --git a/idp/provider.go b/idp/provider.go
index 1dd413c1..294e77d9 100644
--- a/idp/provider.go
+++ b/idp/provider.go
@@ -33,11 +33,11 @@ type IdProvider interface {
 }
 
 func GetIdProvider(providerType string, clientId string, clientSecret string, redirectUrl string) IdProvider {
-	if providerType == "github" {
+	if providerType == "GitHub" {
 		return NewGithubIdProvider(clientId, clientSecret, redirectUrl)
-	} else if providerType == "google" {
+	} else if providerType == "Google" {
 		return NewGoogleIdProvider(clientId, clientSecret, redirectUrl)
-	} else if providerType == "qq" {
+	} else if providerType == "QQ" {
 		return NewQqIdProvider(clientId, clientSecret, redirectUrl)
 	}
 
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 1d5db221..a5354002 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -96,10 +96,10 @@ class ProviderEditPage extends React.Component {
             <Select virtual={false} style={{width: '100%'}} value={this.state.provider.type} onChange={(value => {this.updateProviderField('type', value);})}>
               {
                 [
-                  {id: 'google', name: 'Google'},
-                  {id: 'github', name: 'GitHub'},
-                  {id: 'qq', name: 'QQ'},
-                  {id: 'wechat', name: 'WeChat'},
+                  {id: 'Google', name: 'Google'},
+                  {id: 'GitHub', name: 'GitHub'},
+                  {id: 'QQ', name: 'QQ'},
+                  {id: 'WeChat', name: 'WeChat'},
                 ].map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>)
               }
             </Select>
diff --git a/web/src/ProviderListPage.js b/web/src/ProviderListPage.js
index e32f0fdc..a8245372 100644
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -49,7 +49,7 @@ class ProviderListPage extends React.Component {
       name: `provider_${this.state.providers.length}`,
       createdTime: moment().format(),
       displayName: `New Provider - ${this.state.providers.length}`,
-      type: "github",
+      type: "GitHub",
       clientId: "",
       clientSecret: "",
       providerUrl: "https://github.com/organizations/xxx/settings/applications/1234567",
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 377a8308..a4c71108 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Checkbox, Col, Form, Input, Row} from "antd";
+import {Button, Card, Checkbox, Col, Form, Input, Row} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as AuthBackend from "./AuthBackend";
 import * as Provider from "./Provider";
@@ -103,6 +103,40 @@ class LoginPage extends React.Component {
       });
   };
 
+  renderProviderLogo(provider, application, width, margin, size) {
+    if (size === "small") {
+      return (
+        <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
+          <img width={width} height={width} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: margin}} />
+        </a>
+      )
+    } else {
+      return (
+        <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
+          <Card
+            hoverable
+            bodyStyle={{padding: 0}}
+            style={{height: 60, marginBottom: 10, paddingTop: 10}}
+          >
+            <Row>
+              <Col span={3}>
+              </Col>
+              <Col span={3}>
+                <img width={width} height={width} src={Provider.getAuthLogo(provider)} alt={provider.displayName} />
+              </Col>
+              <Col span={18}>
+                <div style={{marginTop: 8, fontWeight: 500, color: "#757575"}}>
+                  Login by {provider.type}
+                </div>
+              </Col>
+            </Row>
+
+          </Card>
+        </a>
+      )
+    }
+  }
+
   renderForm(application) {
     if (this.state.msg !== null) {
       return Util.renderMessage(this.state.msg)
@@ -184,11 +218,7 @@ class LoginPage extends React.Component {
           <Form.Item>
             {
               application.providerObjs.map(provider => {
-                return (
-                  <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
-                    <img width={30} height={30} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: "3px"}} />
-                  </a>
-                );
+                return this.renderProviderLogo(provider, application, 30, 5, "small");
               })
             }
           </Form.Item>
@@ -207,11 +237,7 @@ class LoginPage extends React.Component {
           <br/>
           {
             application.providerObjs.map(provider => {
-              return (
-                <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
-                  <img width={40} height={40} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: "10px"}} />
-                </a>
-              );
+              return this.renderProviderLogo(provider, application, 40, 10, "big");
             })
           }
           {
diff --git a/web/src/auth/Provider.js b/web/src/auth/Provider.js
index d76ad78e..86c45165 100644
--- a/web/src/auth/Provider.js
+++ b/web/src/auth/Provider.js
@@ -31,13 +31,13 @@ const WeChatAuthUri = "https://open.weixin.qq.com/connect/qrconnect";
 const WeChatAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_wechat.png";
 
 export function getAuthLogo(provider) {
-  if (provider.type === "google") {
+  if (provider.type === "Google") {
     return GoogleAuthLogo;
-  } else if (provider.type === "github") {
+  } else if (provider.type === "GitHub") {
     return GithubAuthLogo;
-  } else if (provider.type === "qq") {
+  } else if (provider.type === "QQ") {
     return QqAuthLogo;
-  } else if (provider.type === "wechat") {
+  } else if (provider.type === "WeChat") {
     return WeChatAuthLogo;
   }
 }
@@ -45,13 +45,13 @@ export function getAuthLogo(provider) {
 export function getAuthUrl(application, provider, method) {
   const redirectUri = `${window.location.origin}/callback`;
   const state = Util.getQueryParamsToState(application.name, provider.name, method);
-  if (provider.type === "google") {
+  if (provider.type === "Google") {
     return `${GoogleAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GoogleAuthScope}&response_type=code&state=${state}`;
-  } else if (provider.type === "github") {
+  } else if (provider.type === "GitHub") {
     return `${GithubAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${GithubAuthScope}&response_type=code&state=${state}`;
-  } else if (provider.type === "qq") {
+  } else if (provider.type === "QQ") {
     return `${QqAuthUri}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${QqAuthScope}&response_type=code&state=${state}`;
-  } else if (provider.type === "wechat") {
+  } else if (provider.type === "WeChat") {
     return `${WeChatAuthUri}?appid=${provider.clientId}&redirect_uri=${redirectUri}&scope=${WeChatAuthScope}&response_type=code&state=${state}#wechat_redirect`;
   }
 }