diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 48021c55..38402ec7 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -15,17 +15,17 @@
         </span>
         <a-input v-model.trim="client.email" style="width: 150px;" ></a-input>
     </a-form-item>
-    <a-form-item label="{{ i18n "pages.inbounds.enable" }}">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
         <a-switch v-model="client.enable"></a-switch>
     </a-form-item>
     <a-form-item label="Password" v-if="inbound.protocol === Protocols.TROJAN">
         <a-input v-model.trim="client.password" style="width: 150px;" ></a-input>
     </a-form-item>
-    <a-form-item label="ID" v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
-        <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
-    </a-form-item>
     <a-form-item label='{{ i18n "additional" }} ID' v-if="inbound.protocol === Protocols.VMESS">
         <a-input type="number" v-model.number="client.alterId" style="width: 70px;"></a-input>
+    </a-form-item>
+    <a-form-item label="ID" v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
+        <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
     </a-form-item>
 	<a-form-item label="Subscription" v-if="client.email">
         <a-input v-model.trim="client.subId"></a-input>
diff --git a/web/html/xui/form/protocol/socks.html b/web/html/xui/form/protocol/socks.html
index 5857d413..2662f1d6 100644
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -1,6 +1,6 @@
 {{define "form/socks"}}
 <a-form layout="inline">
-<!--    <a-form-item label="Password authentication">-->
+    <!--    <a-form-item label="Password authentication">-->
     <a-form-item label='{{ i18n "password" }}'>
         <a-switch :checked="inbound.settings.auth === 'password'"
                   @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index b775a98b..b52c4dd9 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -1,21 +1,19 @@
 {{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 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-form layout="inline">
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.Email" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
-                        </template>
-                        <a-icon @click="getNewEmail(client)" type="sync"> </a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.email" style="width: 150px;" ></a-input>
-            </a-form-item>
-        </a-form>
+        <a-form-item>
+            <span slot="label">
+                <span>{{ i18n "pages.inbounds.Email" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                    </template>
+                    <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
+        </a-form-item>
         <a-form-item label="Password">
             <a-input v-model.trim="client.password" style="width: 150px;"></a-input>
         </a-form-item>
@@ -25,18 +23,18 @@
         <a-form-item label="Telegram Username" v-if="client.email">
             <a-input v-model.trim="client.tgId"></a-input>
         </a-form-item>
-		<a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input type="number" v-model.number="client.limitIp" min="0"  style="width: 70px;" ></a-input>
-		</a-form-item>
+        <a-form-item>
+            <span slot="label">
+                <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-input type="number" v-model.number="client.limitIp" min="0"  style="width: 70px;" ></a-input>
+        </a-form-item>
         <a-form-item v-if="inbound.xtls" label="Flow">
             <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                 <a-select-option value="">{{ i18n "none" }}</a-select-option>
@@ -66,7 +64,7 @@
                 </a-tooltip>
             </span>
             <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="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                             v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         </a-form-item>
     </a-collapse-panel>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 5a496b89..1d733d02 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -1,23 +1,21 @@
 {{define "form/vless"}}
 <a-form layout="inline">
-<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">    
+<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
     <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-        <a-form layout="inline">
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.Email" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
-                        </template>
-                        <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.email" style="width: 150px;" ></a-input>
-            </a-form-item>
-        </a-form>
+        <a-form-item>
+            <span slot="label">
+                <span>{{ i18n "pages.inbounds.Email" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                    </template>
+                    <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
+        </a-form-item>
         <a-form-item label="ID">
-            <a-input v-model.trim="client.id"  style="width: 300px;" ></a-input>
+            <a-input v-model.trim="client.id"  style="width: 300px;"></a-input>
         </a-form-item>
         <a-form-item label="Subscription" v-if="client.email">
             <a-input v-model.trim="client.subId"></a-input>
@@ -25,7 +23,7 @@
         <a-form-item label="Telegram Username" v-if="client.email">
             <a-input v-model.trim="client.tgId"></a-input>
         </a-form-item>
-		<a-form-item>
+        <a-form-item>
             <span slot="label">
                 <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
                 <a-tooltip>
@@ -36,8 +34,8 @@
                 </a-tooltip>
             </span>
             <a-input type="number" v-model.number="client.limitIp" min="0"  style="width: 70px;" ></a-input>
-		</a-form-item>
-		<a-form-item v-if="inbound.xtls" label="Flow">
+        </a-form-item>
+        <a-form-item v-if="inbound.xtls" label="Flow">
             <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                 <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
@@ -75,7 +73,7 @@
                            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                            v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         </a-form-item>
-    </a-collapse-panel>
+    </a-collapse-panel>     
 </a-collapse>
 <a-collapse v-else>
     <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
@@ -100,7 +98,7 @@
             </a-row>
         </a-form-item>
     </a-form>
-
+    
     <!-- vless fallbacks -->
     <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
         <a-divider>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index 574271b6..9cd48544 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -1,45 +1,43 @@
 {{define "form/vmess"}}
 <a-form layout="inline">
-<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">    
+<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">
     <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-        <a-form layout="inline">
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.Email" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
-                        </template>
-                        <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
-            </a-form-item>
-        </a-form>
-        <a-form-item label="ID">
-            <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
+        <a-form-item>
+            <span slot="label">
+                <span>{{ i18n "pages.inbounds.Email" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                    </template>
+                    <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "additional" }} ID'>
             <a-input type="number" v-model.number="client.alterId" style="width: 70px;"></a-input>
         </a-form-item>
+        <a-form-item label="ID">
+            <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
+        </a-form-item>
         <a-form-item label="Subscription" v-if="client.email">
             <a-input v-model.trim="client.subId"></a-input>
         </a-form-item>
         <a-form-item label="Telegram Username" v-if="client.email">
             <a-input v-model.trim="client.tgId"></a-input>
         </a-form-item>
-		<a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input type="number" v-model.number="client.limitIp" min="0" style="width: 70px;"></a-input>
-		</a-form-item>
+        <a-form-item>
+            <span slot="label">
+                <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-input type="number" v-model.number="client.limitIp" min="0" style="width: 70px;"></a-input>
+        </a-form-item>
         <a-form-item>
             <span slot="label">
                 <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
@@ -63,10 +61,10 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-							:dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
-							v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
+                            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                            v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         </a-form-item>
-    </a-collapse-panel>
+    </a-collapse-panel>     
 </a-collapse>
 <a-collapse v-else>
     <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vmesses.length">
@@ -85,5 +83,4 @@
         <a-switch v-model.number="inbound.settings.disableInsecure"></a-switch>
     </a-form-item>
 </a-form>
-
 {{end}}
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index 2a88bc47..e4be34cf 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -121,7 +121,7 @@
         <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
             <a-input v-model.trim="inbound.stream.xtls.certs[0].keyFile" style="width:300px;"></a-input>
         </a-form-item>
-        <a-button type="primary" icon="import" @click="setDefaultCertData">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
+        <a-button type="primary" icon="import" @click="setDefaultCertXtls">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
     </template>
     <template v-else>
         <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html
index 98cb188f..966de8dd 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -103,6 +103,10 @@
                 inModal.inbound.stream.tls.certs[0].certFile = app.defaultCert;
                 inModal.inbound.stream.tls.certs[0].keyFile = app.defaultKey;
             },
+            setDefaultCertXtls(){
+                inModal.inbound.stream.xtls.certs[0].certFile = app.defaultCert;
+                inModal.inbound.stream.xtls.certs[0].keyFile = app.defaultKey;
+            },
             async getNewX25519Cert(){
                 inModal.loading(true);
                 const msg = await HttpUtil.post('/server/getNewX25519Cert');