diff --git a/web/src/Conf.js b/web/src/Conf.js
index 5f49b05..7e5e7ba 100644
--- a/web/src/Conf.js
+++ b/web/src/Conf.js
@@ -6,3 +6,6 @@ export const AuthConfig = {
   organizationName: "casbin",
   redirectPath: "/callback",
 };
+
+export const ForceLanguage = "";
+export const DefaultLanguage = "en";
diff --git a/web/src/SelectLanguageBox.js b/web/src/SelectLanguageBox.js
new file mode 100644
index 0000000..77cc7f7
--- /dev/null
+++ b/web/src/SelectLanguageBox.js
@@ -0,0 +1,31 @@
+import React from "react";
+import * as Setting from "./Setting";
+import {Dropdown, Menu} from "antd";
+import {createFromIconfontCN} from "@ant-design/icons";
+import "./App.less";
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: "//at.alicdn.com/t/font_2680620_ffij16fkwdg.js",
+});
+
+const LanguageItems = [
+  {lang: "en", label: "English", icon: "icon-en"},
+  {lang: "zh", label: "中文", icon: "icon-zh"},
+];
+
+class SelectLanguageBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  render() {
+    return <Dropdown overlay={<Menu>{LanguageItems.map(({lang, label, icon}) => <Menu.Item key={lang} onClick={() => Setting.changeLanguage(lang)}><IconFont type={icon} />{label}</Menu.Item>)}</Menu>}>
+      <div className="language-box"></div>
+    </Dropdown>;
+  }
+}
+
+export default SelectLanguageBox;
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 6b20221..92ba15d 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -10,7 +10,7 @@ export let CasdoorSdk;
 export function initServerUrl() {
   const hostname = window.location.hostname;
   if (hostname === 'localhost') {
-    ServerUrl = `http://${hostname}:15000`;
+    ServerUrl = `http://${hostname}:17000`;
   }
 }
 
diff --git a/web/src/i18n.js b/web/src/i18n.js
new file mode 100644
index 0000000..9340ca6
--- /dev/null
+++ b/web/src/i18n.js
@@ -0,0 +1,57 @@
+import i18n from "i18next";
+import zh from "./locales/zh/data.json";
+import en from "./locales/en/data.json";
+import * as Conf from "./Conf";
+import * as Setting from "./Setting";
+import {initReactI18next} from "react-i18next";
+
+const resources = {
+  en: en,
+  zh: zh,
+};
+
+function initLanguage() {
+  let language = localStorage.getItem("language");
+  if (language === undefined || language === null) {
+    if (Conf.ForceLanguage !== "") {
+      language = Conf.ForceLanguage;
+    } else {
+      const userLanguage = navigator.language;
+      switch (userLanguage) {
+      case "zh-CN":
+        language = "zh";
+        break;
+      case "zh":
+        language = "zh";
+        break;
+      case "en":
+        language = "en";
+        break;
+      case "en-US":
+        language = "en";
+        break;
+      default:
+        language = Conf.DefaultLanguage;
+      }
+    }
+  }
+  Setting.changeMomentLanguage(language);
+
+  return language;
+}
+
+i18n.use(initReactI18next).init({
+  lng: initLanguage(),
+
+  resources: resources,
+
+  keySeparator: false,
+
+  interpolation: {
+    escapeValue: false,
+  },
+  // debug: true,
+  saveMissing: true,
+});
+
+export default i18n;
diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/web/src/locales/en/data.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/web/src/locales/zh/data.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file