diff --git a/web/html/common/prompt_modal.html b/web/html/common/prompt_modal.html
index 6b64bc95..23bdca64 100644
--- a/web/html/common/prompt_modal.html
+++ b/web/html/common/prompt_modal.html
@@ -36,11 +36,11 @@
         },
         confirm() {},
         open({
-                title='',
-                type='text',
-                value='',
-                okText='{{ i18n "sure"}}',
-                confirm=() => {},
+                title = '',
+                type = 'text',
+                value = '',
+                okText = '{{ i18n "sure"}}',
+                confirm = () => {},
             }) {
             this.title = title;
             this.type = type;
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 06ca07a8..76ab7b41 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -23,7 +23,7 @@
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', dbInbound=new DBInbound(), copyText='', clientName = null) {
+        show: function (title = '', content = '', dbInbound = new DBInbound(), copyText = '', clientName = null) {
             this.title = title;
             this.content = content;
             this.dbInbound = dbInbound;
diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
index 649f73dd..1514051b 100644
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -21,7 +21,7 @@
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', fileName='') {
+        show: function (title = '', content = '', fileName = '') {
             this.title = title;
             this.content = content;
             this.fileName = fileName;
diff --git a/web/html/login.html b/web/html/login.html
index b98059e2..c1b88449 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -50,7 +50,7 @@
         <a-layout-content>
             <a-row type="flex" justify="center">
                 <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
-                    <h1 :style="themeSwitcher.textStyle">{{ i18n "pages.login.title" }}</h1>
+                    <h1 class="title" :style="themeSwitcher.textStyle">{{ i18n "pages.login.title" }}</h1>
                 </a-col>
             </a-row>
             <a-row type="flex" justify="center">
@@ -63,10 +63,9 @@
                             </a-input>
                         </a-form-item>
                         <a-form-item>
-                            <a-input type="password" v-model.trim="user.password"
-                                     placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                                <a-icon slot="prefix" type="lock" :style="themeSwitcher.textStyle"/>
-                            </a-input>
+                            <password-input icon="lock" v-model.trim="user.password"
+                                            placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
+                            </password-input>
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
@@ -78,14 +77,12 @@
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <a-col :span="12">
-                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
-                                        <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
-                                            <span role="img" aria-label="l.name" v-text="l.icon"></span>
-                                            &nbsp;&nbsp;<span v-text="l.name"></span>
-                                        </a-select-option>
-                                    </a-select>
-                                </a-col>
+                                <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
+                                    <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
+                                        <span role="img" aria-label="l.name" v-text="l.icon"></span>
+                                        &nbsp;&nbsp;<span v-text="l.name"></span>
+                                    </a-select-option>
+                                </a-select>
                             </a-row>
                         </a-form-item>
                         <a-form-item>
@@ -101,6 +98,7 @@
 </a-layout>
 {{template "js" .}}
 {{template "component/themeSwitcher" .}}
+{{template "component/password" .}}
 <script>
     const app = new Vue({
         delimiters: ['[[', ']]'],
@@ -125,7 +123,7 @@
                 }
             },
             updateBackground() {
-                document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : 'white';
+                document.querySelector('#app').style.background = colors[this.themeSwitcher.currentTheme].bg;
             },
         },
         watch: {
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 8c142ce8..ff636e71 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -10,7 +10,7 @@
                 <td>
                     <a-form-item>
                         <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 250px"
-                            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                            :dropdown-class-name="themeSwitcher.darkCardClass">
                             <a-select-option :value="0">Random</a-select-option>
                             <a-select-option :value="1">Random+Prefix</a-select-option>
                             <a-select-option :value="2">Random+Prefix+Num</a-select-option>
@@ -64,7 +64,7 @@
                 <td>Flow</td>
                 <td>
                     <a-form-item>
-                        <a-select v-model="clientsBulkModal.flow" style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                        <a-select v-model="clientsBulkModal.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.darkCardClass">
                             <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                             <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                         </a-select>
@@ -132,7 +132,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="clientsBulkModal.expiryTime" style="width: 250px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 1c715440..a02d81a3 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -7,9 +7,9 @@
     <a-icon type="user"></a-icon>
     <span>{{ i18n "menu.inbounds"}}</span>
 </a-menu-item>
-<a-menu-item key="{{ .base_path }}xui/setting">
+<a-menu-item key="{{ .base_path }}xui/settings">
     <a-icon type="setting"></a-icon>
-    <span>{{ i18n "menu.setting"}}</span>
+    <span>{{ i18n "menu.settings"}}</span>
 </a-menu-item>
 <a-sub-menu>
     <template slot="title">
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 83aab2be..5119a1c1 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -74,7 +74,7 @@
             <td>Flow</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="client.flow" style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="client.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                         <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                     </a-select>
@@ -140,7 +140,7 @@
             <td>
                 <a-form-item>
                     <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                   :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                   :dropdown-class-name="themeSwitcher.darkCardClass"
                                    v-model="client._expiryTime" style="width: 250px;"></a-date-picker>
                     <a-tag color="red" v-if="isExpiry">Expired</a-tag>
                 </a-form-item>
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 26e1cd61..253c4fe3 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -22,7 +22,7 @@
             <td>{{ i18n "protocol" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.protocol" style="width: 250px;" :disabled="isEdit" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.protocol" style="width: 250px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
                     </a-select>
                 </a-form-item>
@@ -80,7 +80,7 @@
             <td>
                 <a-form-item>
                     <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                   :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                   :dropdown-class-name="themeSwitcher.darkCardClass"
                                    v-model="dbInbound._expiryTime" style="width: 250px;"></a-date-picker>
                 </a-form-item>
             </td>
diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index c03acd34..bf22a585 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -21,7 +21,7 @@
             <td>{{ i18n "pages.inbounds.network"}}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="tcp,udp">tcp+udp</a-select-option>
                         <a-select-option value="tcp">tcp</a-select-option>
                         <a-select-option value="udp">udp</a-select-option>
diff --git a/web/html/xui/form/protocol/shadowsocks.html b/web/html/xui/form/protocol/shadowsocks.html
index 59ac4b78..fdf2f93c 100644
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -1,7 +1,7 @@
 {{define "form/shadowsocks"}}
 <a-form layout="inline">
     <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.shadowsockses.slice(0,1)" v-if="!isEdit">  
-        <a-collapse-panel header="{{ i18n "pages.inbounds.client" }}">
+        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
             <table width="100%" class="ant-table-tbody">
                 <tr>
                     <td>
@@ -47,7 +47,7 @@
                 </tr>
                 <tr>
                     <td>
-                        <span>{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                        <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                         <a-tooltip>
                             <template slot="title">
                                 0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -90,7 +90,7 @@
                     <td>
                         <a-form-item>
                             <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                           :dropdown-class-name="themeSwitcher.darkCardClass"
                                            v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                         </a-form-item>
                     </td>
@@ -115,7 +115,7 @@
             <td>{{ i18n "encryption" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
                     </a-select>
                 </a-form-item>
@@ -135,7 +135,7 @@
             <td>{{ i18n "pages.inbounds.network" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="tcp,udp">tcp+udp</a-select-option>
                         <a-select-option value="tcp">tcp</a-select-option>
                         <a-select-option value="udp">udp</a-select-option>
diff --git a/web/html/xui/form/protocol/socks.html b/web/html/xui/form/protocol/socks.html
index ad1ea372..a0d08194 100644
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -1,6 +1,5 @@
 {{define "form/socks"}}
 <a-form layout="inline">
-<!--    <a-form-item label="Password authentication">-->
     <table width="100%" class="ant-table-tbody">
         <tr>
             <td>{{ i18n "password" }}</td>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index 0fd73340..848eac4f 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -1,7 +1,7 @@
 {{define "form/trojan"}}
 <a-form layout="inline">
 <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">  
-    <a-collapse-panel header="{{ i18n "pages.inbounds.client" }}">
+    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
         <table width="100%" class="ant-table-tbody">
             <tr>
                 <td>
@@ -45,7 +45,7 @@
             </tr>
             <tr>
                 <td>
-                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -88,7 +88,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 494667e2..bb23a77f 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -31,7 +31,7 @@
                 <td>flow</td>
                 <td>
                     <a-form-item>
-                        <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                        <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                             <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                             <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                         </a-select>
@@ -99,7 +99,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index a1cba971..c03dee07 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -96,7 +96,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/form/stream/stream_kcp.html b/web/html/xui/form/stream/stream_kcp.html
index 31b4da29..1be5c026 100644
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -5,7 +5,7 @@
             <td>{{ i18n "camouflage" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.kcp.type" style="width: 250px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.kcp.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="none">none (not camouflage)</a-select-option>
                         <a-select-option value="srtp">srtp (video call)</a-select-option>
                         <a-select-option value="utp">utp (BT download)</a-select-option>
diff --git a/web/html/xui/form/stream/stream_quic.html b/web/html/xui/form/stream/stream_quic.html
index dbb1c5c7..25a71a06 100644
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -5,7 +5,7 @@
             <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.quic.security" style="width: 200px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.quic.security" style="width: 200px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="none">none</a-select-option>
                         <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
                         <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
@@ -25,7 +25,7 @@
             <td>{{ i18n "camouflage" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.quic.type" style="width: 200px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.quic.type" style="width: 200px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="none">none (not camouflage)</a-select-option>
                         <a-select-option value="srtp">srtp (video call)</a-select-option>
                         <a-select-option value="utp">utp (BT download)</a-select-option>
diff --git a/web/html/xui/form/stream/stream_settings.html b/web/html/xui/form/stream/stream_settings.html
index db71c7c7..e2398b15 100644
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -3,7 +3,7 @@
 <a-form layout="inline">
     <a-form-item label="{{ i18n "transmission" }}">
         <a-select v-model="inbound.stream.network" @change="streamNetworkChange"
-            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value="tcp">tcp</a-select-option>
             <a-select-option value="kcp">kcp</a-select-option>
             <a-select-option value="ws">ws</a-select-option>
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index b3252d3e..30fe1a18 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -25,7 +25,7 @@
             <td>CipherSuites</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 250px" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="">auto</a-select-option>
                         <a-select-option v-for="key in TLS_CIPHER_OPTION" :value="key">[[ key ]]</a-select-option>
                     </a-select>
@@ -36,7 +36,7 @@
             <td>MinVersion</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.tls.minVersion" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.tls.minVersion" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
                     </a-select>
                 </a-form-item>
@@ -46,7 +46,7 @@
             <td>MaxVersion</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.tls.maxVersion" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.tls.maxVersion" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
                     </a-select>
                 </a-form-item>
@@ -57,7 +57,7 @@
             <td>
                 <a-form-item>
                     <a-select v-model="inbound.stream.tls.settings.fingerprint"
-                              style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                              style="width: 250px" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value=''>None</a-select-option>
                         <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
                     </a-select>
@@ -177,7 +177,7 @@
             <td>
                 <a-form-item>
                     <a-select v-model="inbound.stream.reality.settings.fingerprint"
-                              style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                              style="width: 250px" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
                     </a-select>
                 </a-form-item>
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 788a6464..702de33c 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -41,19 +41,19 @@
                             <a-col :xs="24" :sm="24" :lg="12">
                                 {{ i18n "clients" }}:
                                 <a-tag color="green">[[ total.clients ]]</a-tag>
-                                <a-popover title="{{ i18n "disabled" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title="{{ i18n "disabled" }}" :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
                                     </template>
                                     <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title="{{ i18n "depleted" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title="{{ i18n "depleted" }}" :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
                                     </template>
                                     <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title="{{ i18n "depletingSoon" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title="{{ i18n "depletingSoon" }}" :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
                                     </template>
@@ -71,7 +71,7 @@
                                     <a-button type="primary" icon="plus" @click="openAddInbound">{{ i18n "pages.inbounds.addInbound" }}</a-button>
                                     <a-dropdown :trigger="['click']">
                                         <a-button type="primary" icon="menu">{{ i18n "pages.inbounds.generalActions" }}</a-button>
-                                        <a-menu slot="overlay" @click="a => generalActions(a)" :theme="siderDrawer.theme">
+                                        <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
                                             <a-menu-item key="export">
                                                 <a-icon type="export"></a-icon>
                                                 {{ i18n "pages.inbounds.export" }}
@@ -95,7 +95,7 @@
                                     <a-select v-model="refreshInterval"
                                               v-if="isRefreshEnabled"
                                               @change="changeRefreshInterval"
-                                              :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                                              :dropdown-class-name="themeSwitcher.darkCardClass">
                                         <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
                                     </a-select>
                                     <a-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
@@ -103,7 +103,7 @@
                                 </a-col>
                             </a-row>
                         </div>
-                        <a-input v-model.lazy="searchKey" placeholder="{{ i18n "search" }}" autofocus style="max-width: 300px"></a-input>
+                        <a-input v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px"></a-input>
                         <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
                                  :data-source="searchedInbounds"
                                  :loading="spinning" :scroll="{ x: 1300 }"
@@ -113,7 +113,7 @@
                             <template slot="action" slot-scope="text, dbInbound">
                                 <a-dropdown :trigger="['click']">
                                     <a-icon @click="e => e.preventDefault()" type="menu"></a-icon>
-                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="siderDrawer.theme">
+                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
                                         <a-menu-item key="edit">
                                             <a-icon type="edit"></a-icon>
                                             {{ i18n "edit" }}
@@ -171,19 +171,19 @@
                             <template slot="clients" slot-scope="text, dbInbound">
                                 <template v-if="clientCount[dbInbound.id]">
                                     <a-tag style="margin:0;" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
-                                    <a-popover title="{{ i18n "disabled" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
                                         </template>
                                         <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                                     </a-popover>
-                                    <a-popover title="{{ i18n "depleted" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
                                         </template>
                                         <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                                     </a-popover>
-                                    <a-popover title="{{ i18n "depletingSoon" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
                                         </template>
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index b7bfc58a..9d8fc749 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -212,7 +212,7 @@
                 <a-select v-model="logModal.rows"
                 style="width: 80px"
                 @change="openLogs(logModal.rows)"
-                :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                :dropdown-class-name="themeSwitcher.darkCardClass">
                     <a-select-option value="10">10</a-select-option>
                     <a-select-option value="20">20</a-select-option>
                     <a-select-option value="50">50</a-select-option>
@@ -427,7 +427,7 @@
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: async () => {
                         versionModal.hide();
-                        this.loading(true, '{{ i18n "pages.index.dontRefreshh"}}');
+                        this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
                         await HttpUtil.post(`/server/installXray/${version}`);
                         this.loading(false);
                     },
diff --git a/web/html/xui/setting.html b/web/html/xui/settings.html
similarity index 98%
rename from web/html/xui/setting.html
rename to web/html/xui/settings.html
index 4e8d720f..6657670a 100644
--- a/web/html/xui/setting.html
+++ b/web/html/xui/settings.html
@@ -43,7 +43,7 @@
                                     {{ i18n "pages.settings.infoDesc" }}
                                 </h2>
                             </a-row>
-                            <a-list item-layout="horizontal" :style="themeSwitcher.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
+                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningIP"}}' desc='{{ i18n "pages.settings.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
                                 <setting-list-item type="number" title='{{ i18n "pages.settings.panelPort"}}' desc='{{ i18n "pages.settings.panelPortDesc"}}' v-model.number="allSetting.webPort"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.publicKeyPath"}}' desc='{{ i18n "pages.settings.publicKeyPathDesc"}}' v-model="allSetting.webCertFile"></setting-list-item>
@@ -80,20 +80,18 @@
                             </a-list>
                         </a-tab-pane>
                         <a-tab-pane key="2" tab='{{ i18n "pages.settings.userSetting"}}'>
-                            <a-form :style="themeSwitcher.isDarkTheme ? 'color: hsla(0,0%,100%,.65); padding: 20px;': 'background: white; padding: 20px;'">
+                            <a-form :style="'padding: 20px;' + themeSwitcher.textStyle">
                                 <a-form-item label='{{ i18n "pages.settings.oldUsername"}}'>
                                     <a-input v-model="user.oldUsername" style="max-width: 300px"></a-input>
                                 </a-form-item>
                                 <a-form-item label='{{ i18n "pages.settings.currentPassword"}}'>
-                                    <a-input type="password" v-model="user.oldPassword"
-                                             style="max-width: 300px"></a-input>
+                                    <password-input v-model="user.oldPassword" style="max-width: 300px"></password-input>
                                 </a-form-item>
                                 <a-form-item label='{{ i18n "pages.settings.newUsername"}}'>
                                     <a-input v-model="user.newUsername" style="max-width: 300px"></a-input>
                                 </a-form-item>
                                 <a-form-item label='{{ i18n "pages.settings.newPassword"}}'>
-                                    <a-input type="password" v-model="user.newPassword"
-                                             style="max-width: 300px"></a-input>
+                                    <password-input v-model="user.newPassword" style="max-width: 300px"></password-input>
                                 </a-form-item>
                                 <a-form-item>
                                     <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
@@ -108,7 +106,7 @@
                                     {{ i18n "pages.settings.infoDesc" }}
                                 </h2>
                             </a-row>
-                            <a-list item-layout="horizontal" :style="themeSwitcher.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
+                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
                                 <a-tabs class="ant-card-dark-box-nohover" default-active-key="tpl-1" :class="themeSwitcher.darkCardClass" style="padding: 20px 20px;">
                                     <a-tab-pane key="tpl-1" tab='{{ i18n "pages.settings.templates.basicTemplate"}}' style="padding-top: 20px;">
                                         <a-collapse>
@@ -242,7 +240,7 @@
                                     {{ i18n "pages.settings.infoDesc" }}
                                 </h2>
                             </a-row>
-                            <a-list item-layout="horizontal" :style="themeSwitcher.isDarkTheme ? 'color: hsla(0,0%,100%,.65);': 'background: white;'">
+                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
                                 <setting-list-item type="switch" title='{{ i18n "pages.settings.telegramBotEnable" }}' desc='{{ i18n "pages.settings.telegramBotEnableDesc" }}'  v-model="allSetting.tgBotEnable"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.telegramToken"}}' desc='{{ i18n "pages.settings.telegramTokenDesc"}}'  v-model="allSetting.tgBotToken"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.telegramChatId"}}' desc='{{ i18n "pages.settings.telegramChatIdDesc"}}'  v-model="allSetting.tgBotChatId"></setting-list-item>
@@ -259,6 +257,7 @@
 </a-layout>
 {{template "js" .}}
 {{template "component/themeSwitcher" .}}
+{{template "component/password" .}}
 {{template "component/setting"}}
 <script>