diff --git a/web/src/auth/LinkedInLoginButton.js b/web/src/auth/LinkedInLoginButton.js
new file mode 100644
index 00000000..0ab445e4
--- /dev/null
+++ b/web/src/auth/LinkedInLoginButton.js
@@ -0,0 +1,32 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {createButton} from "react-social-login-buttons";
+import {StaticBaseUrl} from "../Setting";
+
+function Icon({ width = 24, height = 24, color }) {
+    return <img src={`${StaticBaseUrl}/buttons/linkedin.svg`} alt="Sign in with LinkedIn"/>;
+}
+
+const config = {
+    text: "Sign in with LinkedIn",
+    icon: Icon,
+    iconFormat: name => `fa fa-${name}`,
+    style: {background: "rgb(255,255,255)", color: "#000000"},
+    activeStyle: {background: "rgb(240,240,250)"},
+};
+
+const LinkedInLoginButton = createButton(config);
+
+export default LinkedInLoginButton;
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index f4dc1d46..00b99405 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -29,6 +29,8 @@ import GiteeLoginButton from "./GiteeLoginButton";
 import WechatLoginButton from "./WechatLoginButton";
 import WeiboLoginButton from "./WeiboLoginButton";
 import i18next from "i18next";
+import LinkedInLoginButton from "./LinkedInLoginButton";
+import WeComLoginButton from "./WeComLoginButton";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -161,9 +163,13 @@ class LoginPage extends React.Component {
       return <WechatLoginButton text={text} align={"center"} />
     } else if (type === "DingTalk") {
       return <DingTalkLoginButton text={text} align={"center"} />
-    } else {
-      return text;
+    } else if (type === "LinkedIn"){
+      return <LinkedInLoginButton text={text} align={"center"} />
+    } else if (type === "WeCom") {
+      return <WeComLoginButton text={text} align={"center"} />
     }
+
+    return text;
   }
 
   renderProviderLogo(provider, application, width, margin, size) {
diff --git a/web/src/auth/WeComLoginButton.js b/web/src/auth/WeComLoginButton.js
new file mode 100644
index 00000000..4041b658
--- /dev/null
+++ b/web/src/auth/WeComLoginButton.js
@@ -0,0 +1,32 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {createButton} from "react-social-login-buttons";
+import {StaticBaseUrl} from "../Setting";
+
+function Icon({ width = 24, height = 24, color }) {
+    return <img src={`${StaticBaseUrl}/buttons/wecom.svg`} alt="Sign in with WeCom"/>;
+}
+
+const config = {
+    text: "Sign in with WeCom",
+    icon: Icon,
+    iconFormat: name => `fa fa-${name}`,
+    style: {background: "rgb(255,255,255)", color: "#000000"},
+    activeStyle: {background: "rgb(100,150,250)"},
+};
+
+const WeComLoginButton = createButton(config);
+
+export default WeComLoginButton;