From c8dc4a96b4f62d20475566f341a44aa8874b9a0d Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Sun, 16 Apr 2023 19:21:35 +0200
Subject: [PATCH] [Reality] make it pretty

---
 web/assets/css/custom.css                     |   5 +
 web/html/xui/client_bulk_modal.html           | 190 ++++++++++------
 web/html/xui/component/setting.html           |   2 +-
 web/html/xui/form/client.html                 | 215 +++++++++++-------
 web/html/xui/form/inbound.html                | 129 +++++++----
 web/html/xui/form/protocol/dokodemo.html      |  54 +++--
 web/html/xui/form/protocol/http.html          |  24 +-
 web/html/xui/form/protocol/shadowsocks.html   |  47 ++--
 web/html/xui/form/protocol/socks.html         |  60 +++--
 web/html/xui/form/protocol/trojan.html        | 123 +++++++---
 web/html/xui/form/protocol/vless.html         | 142 ++++++++----
 web/html/xui/form/protocol/vmess.html         | 135 +++++++----
 web/html/xui/form/stream/stream_grpc.html     |  13 +-
 web/html/xui/form/stream/stream_http.html     |  28 ++-
 web/html/xui/form/stream/stream_kcp.html      | 115 +++++++---
 web/html/xui/form/stream/stream_quic.html     |  57 +++--
 web/html/xui/form/stream/stream_settings.html |  28 ++-
 web/html/xui/form/stream/stream_tcp.html      | 173 ++++++++------
 web/html/xui/form/stream/stream_ws.html       |  72 +++---
 web/html/xui/form/tls_settings.html           |  60 ++---
 web/html/xui/inbound_modal.html               |  45 ++--
 web/translation/translate.en_US.toml          |   4 +-
 web/translation/translate.fa_IR.toml          |   2 +-
 web/translation/translate.zh_Hans.toml        |   2 +-
 24 files changed, 1128 insertions(+), 597 deletions(-)

diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 3533806e..9b81f2e5 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -246,6 +246,11 @@
     background-color: #2e3b52;
 }
 
+.ant-card-dark .ant-select-disabled .ant-select-selection {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background-color: #242c3a;
+}
+
 .ant-card-dark .ant-collapse-item {
     color: hsla(0,0%,100%,.65);
     background-color: #161b22;
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 2328e35d..c48fdf94 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -4,73 +4,129 @@
          :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
     <a-form layout="inline">
-        <a-form-item label='{{ i18n "pages.client.method" }}'>
-            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-                <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>
-                <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
-                <a-select-option :value="4">Prefix+Num+Postfix [ BE CAREFUL! ]</a-select-option>
-            </a-select>
-        </a-form-item><br />
-        <a-form-item v-if="clientsBulkModal.emailMethod>1">
-            <span slot="label">{{ i18n "pages.client.first" }}</span>
-            <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
-        </a-form-item>
-        <a-form-item v-if="clientsBulkModal.emailMethod>1">
-            <span slot="label">{{ i18n "pages.client.last" }}</span>
-            <a-input-number v-model="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
-        </a-form-item>
-        <a-form-item v-if="clientsBulkModal.emailMethod>0">
-            <span slot="label">{{ i18n "pages.client.prefix" }}</span>
-            <a-input v-model="clientsBulkModal.emailPrefix" style="width: 120px"></a-input>
-        </a-form-item>
-        <a-form-item v-if="clientsBulkModal.emailMethod>2">
-            <span slot="label">{{ i18n "pages.client.postfix" }}</span>
-            <a-input v-model="clientsBulkModal.emailPostfix" style="width: 120px"></a-input>
-        </a-form-item>
-        <a-form-item v-if="clientsBulkModal.emailMethod < 2">
-            <span slot="label">{{ i18n "pages.client.clientCount" }}</span>
-            <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
-        </a-form-item>
-        <a-form-item label="Subscription">
-            <a-input v-model.trim="clientsBulkModal.subId"></a-input>
-        </a-form-item>
-        <a-form-item label="Telegram ID">
-            <a-input v-model.trim="clientsBulkModal.tgId"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-        <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item label="{{ i18n "pages.client.delayedStart" }}">
-            <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
-        </a-form-item>
-        <a-form-item label="{{ i18n "pages.client.expireDays" }}" v-if="clientsBulkModal.delayedStart">
-            <a-input type="number" v-model.number="delayedExpireDays" :min="0"></a-input>
-        </a-form-item>
-        <a-form-item v-else>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
-                           v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
+        <table width="100%" class="ant-table-tbody">
+            <tr>
+                <td>{{ i18n "pages.client.method" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 250px"
+                            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                            <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>
+                            <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
+                            <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="clientsBulkModal.emailMethod>1">
+                <td>{{ i18n "pages.client.first" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="clientsBulkModal.emailMethod>1">
+                <td>{{ i18n "pages.client.last" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="clientsBulkModal.emailMethod>0">
+                <td>{{ i18n "pages.client.prefix" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model="clientsBulkModal.emailPrefix" style="width: 250px"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="clientsBulkModal.emailMethod>2">
+                <td>{{ i18n "pages.client.postfix" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model="clientsBulkModal.emailPostfix" style="width: 250px"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="clientsBulkModal.emailMethod < 2">
+                <td>{{ i18n "pages.client.clientCount" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>Subscription</td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="clientsBulkModal.subId" style="width: 250px"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>Telegram Username</td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="clientsBulkModal.tgId" style="width: 250px"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                    <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>{{ i18n "pages.client.delayedStart" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="clientsBulkModal.delayedStart">
+                <td>{{ i18n "pages.client.expireDays" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-else>
+                <td>
+                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       v-model="clientsBulkModal.expiryTime" style="width: 250px;"></a-date-picker>
+                    </a-form-item>
+                </td>
+            </tr>
+        </table>
     </a-form>
 </a-modal>
 <script>
diff --git a/web/html/xui/component/setting.html b/web/html/xui/component/setting.html
index 9f8e8cbc..c6db1b01 100644
--- a/web/html/xui/component/setting.html
+++ b/web/html/xui/component/setting.html
@@ -9,7 +9,7 @@
                 <a-input :value="value" @input="$emit('input', $event.target.value)"></a-input>
             </template>
             <template v-else-if="type === 'number'">
-                <a-input type="number" :value="value" @input="$emit('input', $event.target.value)"></a-input>
+                <a-input-number :value="value" @input="$emit('input', $event.target.value)"></a-input-number>
             </template>
             <template v-else-if="type === 'textarea'">
                 <a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 10 }"></a-textarea>
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 36736135..add46a3e 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -3,82 +3,143 @@
     <template v-if="isEdit">
     <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
     </template>
-    <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"></a-input>
-    </a-form-item>
-    <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"></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"></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"></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 v-if="inbound.canEnableTlsFlow()" label="flow" layout="inline">
-        <a-select v-model="client.flow" style="width: 200px">
-            <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>
-    </a-form-item>
-    <a-form-item>
-        <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-            <a-tooltip>
-                <template slot="title">
-                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-            </a-tooltip>
-        </span>
-        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-        <template v-if="isEdit && clientStats">
-            <span>{{ i18n "usage" }}:</span>
-            <a-tag :color="statsColor">
-                [[ sizeFormat(clientStats.up) ]] / 
-                [[ sizeFormat(clientStats.down) ]]
-                ([[ sizeFormat(clientStats.up + clientStats.down) ]])
-            </a-tag>
-        </template>
-    </a-form-item>
-    <a-form-item label="{{ i18n "pages.client.delayedStart" }}">
-        <a-switch v-model="clientModal.delayedStart" @click="client._expiryTime=0"></a-switch>
-    </a-form-item>
-    <a-form-item label="{{ i18n "pages.client.expireDays" }}" v-if="clientModal.delayedStart">
-        <a-input type="number" v-model.number="delayedExpireDays" :min="0"></a-input>
-    </a-form-item>
-    <a-form-item v-else>
-        <span slot="label">
-            <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-            </a-tooltip>
-        </span>
-        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
-                       v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
-        <a-tag color="red" v-if="isExpiry">Expired</a-tag>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "pages.inbounds.enable" }}</td>
+            <td>
+                <a-form-item>
+                    <a-switch v-model="client.enable"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <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>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="client.email" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="inbound.protocol === Protocols.TROJAN">
+            <td>password</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="client.password" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
+            <td>ID</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="client.id" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="inbound.protocol === Protocols.VMESS">
+            <td>{{ i18n "additional" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="client.alterId"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="client.email">
+            <td>Subscription</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="client.subId" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="client.email">
+            <td>Telegram Username</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="client.tgId" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="inbound.canEnableTlsFlow()">
+            <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-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>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                <a-tooltip>
+                    <template slot="title">
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="isEdit && clientStats">
+            <td>{{ i18n "usage" }}</td>
+            <td>
+                <a-tag :color="statsColor">
+                    [[ sizeFormat(clientStats.up) ]] / 
+                    [[ sizeFormat(clientStats.down) ]]
+                    ([[ sizeFormat(clientStats.up + clientStats.down) ]])
+                </a-tag>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "pages.client.delayedStart" }}</td>
+            <td>
+                <a-form-item>
+                    <a-switch v-model="clientModal.delayedStart" @click="client._expiryTime=0"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-if="clientModal.delayedStart">
+            <td>{{ i18n "pages.client.expireDays" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr v-else>
+            <td>
+                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                                   :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                   v-model="client._expiryTime" style="width: 250px;"></a-date-picker>
+                    <a-tag color="red" v-if="isExpiry">Expired</a-tag>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 74fe1384..499395c6 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -1,58 +1,91 @@
 {{define "form/inbound"}}
 <!-- base -->
 <a-form layout="inline">
-    <a-form-item label='{{ i18n "remark" }}'>
-        <a-input v-model.trim="dbInbound.remark"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "enable" }}'>
-        <a-switch v-model="dbInbound.enable"></a-switch>
-    </a-form-item>
-    <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item>
-        <span slot="label">
-            {{ i18n "monitor" }}
-            <a-tooltip>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "enable" }}</td>
+            <td>
+                <a-form-item>
+                    <a-switch v-model="dbInbound.enable"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "remark" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="dbInbound.remark" style="width: 250px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <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-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "monitor" }}
+                <a-tooltip>
                 <template slot="title">
                     <span>{{ i18n "pages.inbounds.monitorDesc" }}</span>
                 </template>
                 <a-icon type="question-circle" theme="filled"></a-icon>
-            </a-tooltip>
-        </span>
-        <a-input v-model.trim="inbound.listen"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        <a-input type="number" v-model.number="inbound.port"></a-input>
-    </a-form-item>
-    <a-form-item>
-        <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-            <a-tooltip>
-                <template slot="title">
-                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-            </a-tooltip>
-        </span>
-        <a-input-number v-model="dbInbound.totalGB" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item>
-        <span slot="label">
-            <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-            </a-tooltip>
-        </span>
-        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
-                       v-model="dbInbound._expiryTime" style="width: 300px;"></a-date-picker>
-    </a-form-item>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.listen" style="width: 250px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "pages.inbounds.port" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.port"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                <a-tooltip>
+                    <template slot="title">
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model="dbInbound.totalGB" :min="0"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                                   :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                   v-model="dbInbound._expiryTime" style="width: 250px;"></a-date-picker>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 
 <!-- vmess settings -->
diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index dbba6b5b..c03acd34 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -1,20 +1,42 @@
 {{define "form/dokodemo"}}
 <a-form layout="inline">
-    <a-form-item label='{{ i18n "pages.inbounds.targetAddress"}}'>
-        <a-input v-model.trim="inbound.settings.address"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
-        <a-input type="number" v-model.number="inbound.settings.port"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <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>
-        </a-select>
-    </a-form-item>
-    <a-form-item label="FollowRedirect">
-        <a-switch v-model="inbound.settings.followRedirect"></a-switch>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "pages.inbounds.targetAddress"}}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.settings.address"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "pages.inbounds.destinationPort"}}</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.settings.port"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <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-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>
+                    </a-select>
+                </a-form-item>           
+            </td>
+        </tr>
+        <tr>
+            <td>FollowRedirect</td>
+            <td>
+                <a-form-item>
+                    <a-switch v-model="inbound.settings.followRedirect"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/http.html b/web/html/xui/form/protocol/http.html
index b4ba59b7..44669eb3 100644
--- a/web/html/xui/form/protocol/http.html
+++ b/web/html/xui/form/protocol/http.html
@@ -1,10 +1,22 @@
 {{define "form/http"}}
 <a-form layout="inline">
-    <a-form-item label='{{ i18n "username"}}'>
-        <a-input v-model.trim="inbound.settings.accounts[0].user"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.trim="inbound.settings.accounts[0].pass"></a-input>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "username"}}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.settings.accounts[0].user"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "password" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.settings.accounts[0].pass"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/shadowsocks.html b/web/html/xui/form/protocol/shadowsocks.html
index 21d614ae..fa85eb3e 100644
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -1,19 +1,36 @@
 {{define "form/shadowsocks"}}
 <a-form layout="inline">
-    <a-form-item label='{{ i18n "encryption" }}'>
-        <a-select v-model="inbound.settings.method" style="width: 165px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.trim="inbound.settings.password"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <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>
-        </a-select>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "encryption" }}</td>
+            <td>
+                <a-form-item>
+                    <a-select v-model="inbound.settings.method" style="width: 165px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                        <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "password" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.settings.password"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <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-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>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/socks.html b/web/html/xui/form/protocol/socks.html
index 5857d413..ad1ea372 100644
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -1,24 +1,50 @@
 {{define "form/socks"}}
 <a-form layout="inline">
 <!--    <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>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "password" }}</td>
+            <td>
+                <a-form-item>
+                    <a-switch :checked="inbound.settings.auth === 'password'"
+                              @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
     <template v-if="inbound.settings.auth === 'password'">
-        <a-form-item label='{{ i18n "username" }}'>
-            <a-input v-model.trim="inbound.settings.accounts[0].user"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "password" }}'>
-            <a-input v-model.trim="inbound.settings.accounts[0].pass"></a-input>
-        </a-form-item>
+        <tr>
+            <td>{{ i18n "username" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.settings.accounts[0].user"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "password" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.settings.accounts[0].pass"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
     </template>
-    <a-form-item label='{{ i18n "pages.inbounds.enable" }} udp'>
-        <a-switch v-model="inbound.settings.udp"></a-switch>
-    </a-form-item>
-    <a-form-item v-if="inbound.settings.udp"
-                 label="IP">
-        <a-input v-model.trim="inbound.settings.ip"></a-input>
-    </a-form-item>
+        <tr>
+            <td>{{ i18n "pages.inbounds.enable" }} udp</td>
+            <td>
+                <a-form-item>
+                    <a-switch v-model="inbound.settings.udp"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>IP</td>
+            <td>
+                <a-form-item v-if="inbound.settings.udp">
+                    <a-input v-model.trim="inbound.settings.ip"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index ca5ed2bf..8a61229d 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -2,9 +2,9 @@
 <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-form layout="inline">
-            <a-form-item>
-                <span slot="label">
+        <table width="100%" class="ant-table-tbody">
+            <tr>
+                <td>
                     <span>{{ i18n "pages.inbounds.Email" }}</span>
                     <a-tooltip>
                         <template slot="title">
@@ -12,39 +12,88 @@
                         </template>
                         <a-icon @click="getNewEmail(client)" type="sync"> </a-icon>
                     </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.email"></a-input>
-            </a-form-item>
-        </a-form>
-        <a-form-item label="password">
-            <a-input v-model.trim="client.password"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
-                           v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>password</td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="client.password" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>Subscription</td>
+                <td>
+                    <a-form-item v-if="client.email">
+                        <a-input v-model.trim="client.subId" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>Telegram Username</td>
+                <td>
+                    <a-form-item v-if="client.email">
+                        <a-input v-model.trim="client.tgId" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>{{ i18n "pages.client.delayedStart" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="delayedStart">
+                <td>{{ i18n "pages.client.expireDays" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+                    </a-form-item>            
+                </td>
+            </tr>
+            <tr v-else>
+                <td>
+                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
+                    </a-form-item>
+                </td>
+            </tr>
+        </table>
     </a-collapse-panel>
 </a-collapse>
 <a-collapse v-else>
@@ -91,7 +140,7 @@
             <a-input v-model="fallback.dest"></a-input>
         </a-form-item>
         <a-form-item label="xver">
-            <a-input type="number" v-model.number="fallback.xver"></a-input>
+            <a-input-number v-model.number="fallback.xver"></a-input-number>
         </a-form-item>
         <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 72200aad..bc400962 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -2,55 +2,109 @@
 <a-form layout="inline">
 <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">
+        <table width="100%" class="ant-table-tbody">
+            <tr>
+                <td>
                     <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-icon @click="getNewEmail(client)" type="sync"> </a-icon>
                     </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.email"></a-input>
-            </a-form-item>
-        </a-form>
-        <a-form-item label="id">
-            <a-input v-model.trim="client.id"></a-input>
-        </a-form-item>
-        <a-form-item v-else-if="inbound.canEnableTlsFlow()" label="flow" layout="inline">
-            <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px" :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 TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
-                           v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>id</td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="client.id" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="inbound.canEnableTlsFlow()">
+                <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-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>
+                    </a-form-item>    
+                </td>
+            </tr>
+            <tr>
+                <td>Subscription</td>
+                <td>
+                    <a-form-item v-if="client.email">
+                        <a-input v-model.trim="client.subId" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>Telegram Username</td>
+                <td>
+                    <a-form-item v-if="client.email">
+                        <a-input v-model.trim="client.tgId" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>{{ i18n "pages.client.delayedStart" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="delayedStart">
+                <td>{{ i18n "pages.client.expireDays" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+                    </a-form-item>            
+                </td>
+            </tr>
+            <tr v-else>
+                <td>
+                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
+                    </a-form-item>
+                </td>
+            </tr>
+        </table>
     </a-collapse-panel>
 </a-collapse>
 <a-collapse v-else>
@@ -97,7 +151,7 @@
             <a-input v-model="fallback.dest"></a-input>
         </a-form-item>
         <a-form-item label="xver">
-            <a-input type="number" v-model.number="fallback.xver"></a-input>
+            <a-input-number v-model.number="fallback.xver"></a-input-number>
         </a-form-item>
         <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index 09e7de0c..62d55a9e 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -2,9 +2,9 @@
 <a-form layout="inline">
 <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">
+        <table width="100%" class="ant-table-tbody">
+            <tr>
+                <td>
                     <span>{{ i18n "pages.inbounds.Email" }}</span>
                     <a-tooltip>
                         <template slot="title">
@@ -12,42 +12,96 @@
                         </template>
                         <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
                     </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.email"></a-input>
-            </a-form-item>
-        </a-form>
-        <a-form-item label="id">
-            <a-input v-model.trim="client.id"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "additional" }} ID'>
-            <a-input type="number" v-model.number="client.alterId"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
-                           v-model="client._expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>id</td>
+                <td>
+                    <a-form-item>
+                        <a-input v-model.trim="client.id" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>{{ i18n "additional" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model.number="client.alterId"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>Subscription</td>
+                <td>
+                    <a-form-item v-if="client.email">
+                        <a-input v-model.trim="client.subId" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>Telegram Username</td>
+                <td>
+                    <a-form-item v-if="client.email">
+                        <a-input v-model.trim="client.tgId" style="width: 200px;"></a-input>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr>
+                <td>{{ i18n "pages.client.delayedStart" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+                    </a-form-item>
+                </td>
+            </tr>
+            <tr v-if="delayedStart">
+                <td>{{ i18n "pages.client.expireDays" }}</td>
+                <td>
+                    <a-form-item>
+                        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+                    </a-form-item>            
+                </td>
+            </tr>
+            <tr v-else>
+                <td>
+                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </td>
+                <td>
+                    <a-form-item>
+                        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
+                    </a-form-item>
+                </td>
+            </tr>
+        </table>
     </a-collapse-panel>
 </a-collapse>
 <a-collapse v-else>
@@ -64,8 +118,7 @@
 </a-collapse>
 <a-form layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.disableInsecureEncryption" }}'>
-        <a-switch v-model.number="inbound.settings.disableInsecure"></a-switch>
+        <a-switch v-model="inbound.settings.disableInsecure"></a-switch>
     </a-form-item>
 </a-form>
-
 {{end}}
diff --git a/web/html/xui/form/stream/stream_grpc.html b/web/html/xui/form/stream/stream_grpc.html
index 205a4c84..15041a51 100644
--- a/web/html/xui/form/stream/stream_grpc.html
+++ b/web/html/xui/form/stream/stream_grpc.html
@@ -1,7 +1,14 @@
 {{define "form/streamGRPC"}}
 <a-form layout="inline">
-    <a-form-item label="serviceName">
-        <a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>serviceName</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_http.html b/web/html/xui/form/stream/stream_http.html
index ad30c45a..124258a7 100644
--- a/web/html/xui/form/stream/stream_http.html
+++ b/web/html/xui/form/stream/stream_http.html
@@ -1,12 +1,24 @@
 {{define "form/streamHTTP"}}
 <a-form layout="inline">
-    <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.http.path"></a-input>
-    </a-form-item>
-    <a-form-item label="host">
-        <a-row v-for="(host, index) in inbound.stream.http.host">
-            <a-input v-model.trim="inbound.stream.http.host[index]"></a-input>
-        </a-row>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "path" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.http.path" style="width: 250px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>host</td>
+            <td>
+                <a-form-item>
+                    <a-row v-for="(host, index) in inbound.stream.http.host">
+                        <a-input v-model.trim="inbound.stream.http.host[index]" style="width: 250px;"></a-input>
+                    </a-row>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_kcp.html b/web/html/xui/form/stream/stream_kcp.html
index bc0f5bf3..31b4da29 100644
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -1,38 +1,85 @@
 {{define "form/streamKCP"}}
 <a-form layout="inline">
-    <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <a-select-option value="none">none（not camouflage）</a-select-option>
-            <a-select-option value="srtp">srtp（camouflage video call）</a-select-option>
-            <a-select-option value="utp">utp（camouflage BT download）</a-select-option>
-            <a-select-option value="wechat-video">wechat-video（camouflage WeChat video）</a-select-option>
-            <a-select-option value="dtls">dtls（camouflage DTLS 1.2 packages）</a-select-option>
-            <a-select-option value="wireguard">wireguard（camouflage wireguard packages）</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.number="inbound.stream.kcp.seed"></a-input>
-    </a-form-item>
-    <a-form-item label="mtu">
-        <a-input type="number" v-model.number="inbound.stream.kcp.mtu"></a-input>
-    </a-form-item>
-    <a-form-item label="tti (ms)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.tti"></a-input>
-    </a-form-item>
-    <a-form-item label="uplink capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.upCap"></a-input>
-    </a-form-item>
-    <a-form-item label="downlink capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.downCap"></a-input>
-    </a-form-item>
-    <a-form-item label="congestion">
-        <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
-    </a-form-item>
-    <a-form-item label="read buffer size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.readBuffer"></a-input>
-    </a-form-item>
-    <a-form-item label="write buffer size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.writeBuffer"></a-input>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <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-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>
+                        <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+                        <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
+                        <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "password" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model="inbound.stream.kcp.seed" style="width: 250px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>mtu</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>tti (ms)</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.stream.kcp.tti"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>uplink capacity (MB/S)</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.stream.kcp.upCap"></a-input-number>
+                </a-form-item> 
+            </td>
+        </tr>
+        <tr>
+            <td>downlink capacity (MB/S)</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.stream.kcp.downCap"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>congestion</td>
+            <td>
+                <a-form-item>
+                    <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>read buffer size (MB)</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.stream.kcp.readBuffer"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>write buffer size (MB)</td>
+            <td>
+                <a-form-item>
+                    <a-input-number v-model.number="inbound.stream.kcp.writeBuffer"></a-input-number>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_quic.html b/web/html/xui/form/stream/stream_quic.html
index 2a48af84..dbb1c5c7 100644
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -1,24 +1,41 @@
 {{define "form/streamQUIC"}}
 <a-form layout="inline">
-    <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
-        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <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>
-        </a-select>
-    </a-form-item>
-    <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.trim="inbound.stream.quic.key"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
-            <a-select-option value="none">none（not camouflage）</a-select-option>
-            <a-select-option value="srtp">srtp（camouflage video call）</a-select-option>
-            <a-select-option value="utp">utp（camouflage BT download）</a-select-option>
-            <a-select-option value="wechat-video">wechat-video（camouflage WeChat video）</a-select-option>
-            <a-select-option value="dtls">dtls（camouflage DTLS 1.2 packages）</a-select-option>
-            <a-select-option value="wireguard">wireguard（camouflage wireguard packages）</a-select-option>
-        </a-select>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <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-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>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "password" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.quic.key" style="width: 200px;"></a-input>
+                </a-form-item> 
+            </td>
+        </tr>
+        <tr>
+            <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-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>
+                        <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+                        <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
+                        <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_settings.html b/web/html/xui/form/stream/stream_settings.html
index 042a7aee..b09e8d59 100644
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -1,16 +1,24 @@
 {{define "form/streamSettings"}}
 <!-- select stream network -->
 <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' : ''">
-            <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>
-            <a-select-option value="http">http</a-select-option>
-            <a-select-option value="quic">quic</a-select-option>
-            <a-select-option value="grpc">grpc</a-select-option>
-        </a-select>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "transmission" }}</td>
+            <td>
+                <a-form-item>
+                    <a-select v-model="inbound.stream.network" @change="streamNetworkChange"
+                        :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                        <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>
+                        <a-select-option value="http">http</a-select-option>
+                        <a-select-option value="quic">quic</a-select-option>
+                        <a-select-option value="grpc">grpc</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 
 <!-- tcp -->
diff --git a/web/html/xui/form/stream/stream_tcp.html b/web/html/xui/form/stream/stream_tcp.html
index 000551b6..4738a515 100644
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -13,74 +13,109 @@
 </a-form>
 
 <!-- tcp request -->
-<a-form v-if="inbound.stream.tcp.type === 'http'"
-        layout="inline">
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestMethod" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestPath" }}'>
-        <a-row v-for="(path, index) in inbound.stream.tcp.request.path">
-            <a-input v-model.trim="inbound.stream.tcp.request.path[index]"></a-input>
-        </a-row>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
-        <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.tcp.request.addHeader('Host', 'xxx.com')">
-                +
-            </a-button>
-        </a-row>
-        <a-input-group v-for="(header, index) in inbound.stream.tcp.request.headers">
-            <a-input style="width: 50%" v-model.trim="header.name"
-                     addon-before='{{ i18n "pages.inbounds.stream.general.name" }}'></a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
-                     addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.tcp.request.removeHeader(index)">
-                        -
-                    </a-button>
-                </template>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
-</a-form>
-
-<!-- tcp response -->
-<a-form v-if="inbound.stream.tcp.type === 'http'"
-        layout="inline">
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseStatus" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseStatusDescription" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
-        <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">
-                +
-            </a-button>
-        </a-row>
-        <a-input-group v-for="(header, index) in inbound.stream.tcp.response.headers">
-            <a-input style="width: 50%" v-model.trim="header.name"
-                     addon-before='{{ i18n "pages.inbounds.stream.general.name" }}'></a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
-                     addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.tcp.response.removeHeader(index)">
-                        -
-                    </a-button>
-                </template>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
+<a-form v-if="inbound.stream.tcp.type === 'http'" layout="inline">
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.tcp.request.version" style="width: 200px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "pages.inbounds.stream.tcp.requestMethod" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.tcp.request.method" style="width: 200px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "pages.inbounds.stream.tcp.requestPath" }}</td>
+            <td>
+                <a-form-item>
+                    <a-row v-for="(path, index) in inbound.stream.tcp.request.path">
+                        <a-input v-model.trim="inbound.stream.tcp.request.path[index]" style="width: 200px;"></a-input>
+                    </a-row>
+                </a-form-item> 
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
+                    <a-row>
+                        <a-button size="small"
+                                  @click="inbound.stream.tcp.request.addHeader('Host', 'xxx.com')">
+                            +
+                        </a-button>
+                    </a-row>
+                    <a-input-group v-for="(header, index) in inbound.stream.tcp.request.headers">
+                        <a-input style="width: 50%" v-model.trim="header.name"
+                                 addon-before='{{ i18n "pages.inbounds.stream.general.name" }}'></a-input>
+                        <a-input style="width: 50%" v-model.trim="header.value"
+                                 addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
+                            <template slot="addonAfter">
+                                <a-button size="small"
+                                          @click="inbound.stream.tcp.request.removeHeader(index)">
+                                    -
+                                </a-button>
+                            </template>
+                        </a-input>
+                    </a-input-group>
+                </a-form-item>
+            </td>
+        </tr>
+        <!-- tcp response -->
+        <tr>
+            <td>{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.tcp.response.version" style="width: 200px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatus" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.tcp.response.status" style="width: 200px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatusDescription" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.tcp.response.reason" style="width: 200px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
+                    <a-row>
+                        <a-button size="small"
+                                  @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">
+                            +
+                        </a-button>
+                    </a-row>
+                    <a-input-group v-for="(header, index) in inbound.stream.tcp.response.headers">
+                        <a-input style="width: 50%" v-model.trim="header.name"
+                                 addon-before='{{ i18n "pages.inbounds.stream.general.name" }}'></a-input>
+                        <a-input style="width: 50%" v-model.trim="header.value"
+                                 addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
+                            <template slot="addonAfter">
+                                <a-button size="small"
+                                          @click="inbound.stream.tcp.response.removeHeader(index)">
+                                    -
+                                </a-button>
+                            </template>
+                        </a-input>
+                    </a-input-group>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_ws.html b/web/html/xui/form/stream/stream_ws.html
index 46d6f7a3..784a7baa 100644
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/web/html/xui/form/stream/stream_ws.html
@@ -1,33 +1,47 @@
 {{define "form/streamWS"}}
 <a-form layout="inline">
-    <a-form-item label="acceptProxyProtocol">
-        <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
-    </a-form-item>
-</a-form>
-<a-form layout="inline">
-    <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.ws.path"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
-        <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.ws.addHeader('Host', '')">
-                +
-            </a-button>
-        </a-row>
-        <a-input-group v-for="(header, index) in inbound.stream.ws.headers">
-            <a-input style="width: 50%" v-model.trim="header.name"
-                     addon-before='{{ i18n "pages.inbounds.stream.general.name"}}'></a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
-                     addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.ws.removeHeader(index)">
-                        -
-                    </a-button>
-                </template>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>acceptProxyProtocol</td>
+            <td>
+                <a-form-item>
+                    <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ i18n "path" }}</td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.ws.path" style="width: 250px;"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
+                    <a-row>
+                        <a-button size="small"
+                                  @click="inbound.stream.ws.addHeader('Host', '')">
+                            +
+                        </a-button>
+                    </a-row>
+                    <a-input-group v-for="(header, index) in inbound.stream.ws.headers">
+                        <a-input style="width: 50%" v-model.trim="header.name"
+                                 addon-before='{{ i18n "pages.inbounds.stream.general.name"}}'></a-input>
+                        <a-input style="width: 50%" v-model.trim="header.value"
+                                 addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
+                            <template slot="addonAfter">
+                                <a-button size="small"
+                                          @click="inbound.stream.ws.removeHeader(index)">
+                                    -
+                                </a-button>
+                            </template>
+                        </a-input>
+                    </a-input-group>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index 8cefb5eb..bce8e3d6 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -1,11 +1,11 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
 <a-form v-if="inbound.canSetTls()" layout="inline">
-    <a-form-item label="tls">
+    <a-form-item label="TLS">
         <a-switch v-model="inbound.tls">
         </a-switch>
     </a-form-item>
-    <a-form-item v-if="inbound.canEnableReality()" label="reality">
+    <a-form-item v-if="inbound.canEnableReality()" label="Reality">
         <a-switch v-model="inbound.reality"></a-switch>
     </a-form-item>
 </a-form>
@@ -17,7 +17,7 @@
             <td>SNI</td>
             <td>
                 <a-form-item placeholder="Server Name Indication" v-if="inbound.tls">
-                    <a-input v-model.trim="inbound.stream.tls.settings.serverName" style="width: 300px"></a-input>
+                    <a-input v-model.trim="inbound.stream.tls.settings.serverName" style="width: 250px"></a-input>
                 </a-form-item>                
             </td>
         </tr>
@@ -25,7 +25,7 @@
             <td>CipherSuites</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                         <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" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.tls.minVersion" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                         <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" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.tls.maxVersion" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
                         <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
                     </a-select>
                 </a-form-item>
@@ -56,7 +56,7 @@
             <td>uTLS</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.tls.settings.fingerprint" style="width: 135px">
+                    <a-select v-model="inbound.stream.tls.settings.fingerprint" style="width: 250px">
                         <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>
@@ -67,7 +67,7 @@
             <td>{{ i18n "domainName" }}</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tls.server" style="width: 300px"></a-input>
+                    <a-input v-model.trim="inbound.stream.tls.server" style="width: 250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
@@ -75,7 +75,7 @@
             <td>Alpn</td>
             <td>
                 <a-form-item>
-                    <a-checkbox-group v-model="inbound.stream.tls.alpn" style="width:200px">
+                    <a-checkbox-group v-model="inbound.stream.tls.alpn">
                         <a-checkbox v-for="key in ALPN_OPTION" :value="key">[[ key ]]</a-checkbox>
                     </a-checkbox-group>
                 </a-form-item>
@@ -104,7 +104,7 @@
             <td>{{ i18n "pages.inbounds.publicKeyPath" }}</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tls.certs[0].certFile" style="width:300px;"></a-input>
+                    <a-input v-model.trim="inbound.stream.tls.certs[0].certFile" style="width:250px;"></a-input>
                 </a-form-item>
             </td>
         </tr>
@@ -112,7 +112,7 @@
             <td>{{ i18n "pages.inbounds.keyPath" }}</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile" style="width:300px;"></a-input>
+                    <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile" style="width:250px;"></a-input>
                 </a-form-item>
             </td>
         </tr>
@@ -128,7 +128,7 @@
             <td>{{ i18n "pages.inbounds.publicKeyContent" }}</td>
             <td>
                 <a-form-item>
-                    <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].cert"></a-input>
+                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="inbound.stream.tls.certs[0].cert"></a-input>
                 </a-form-item>
             </td>
         </tr>
@@ -136,7 +136,7 @@
             <td>{{ i18n "pages.inbounds.keyContent" }}</td>
             <td>
                 <a-form-item>
-                    <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].key"></a-input>
+                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="inbound.stream.tls.certs[0].key"></a-input>
                 </a-form-item>
             </td>
         </tr>
@@ -151,12 +151,12 @@
             <td>{{ i18n "domainName" }}</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.reality.settings.serverName" style="width: 300px"></a-input>
+                    <a-input v-model.trim="inbound.stream.reality.settings.serverName" style="width: 250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
         <tr>
-            <td>show</td>
+            <td>Show</td>
             <td>
                 <a-form-item>
                     <a-switch v-model="inbound.stream.reality.show"></a-switch>
@@ -164,10 +164,10 @@
             </td>
         </tr>
         <tr>
-            <td>xver</td>
+            <td>Xver</td>
             <td>
                 <a-form-item>
-                    <a-input type="number" v-model.number="inbound.stream.reality.xver" :min="0"></a-input>
+                    <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
                 </a-form-item>
             </td>
         </tr>
@@ -175,7 +175,7 @@
             <td>uTLS</td>
             <td>
                 <a-form-item >
-                    <a-select v-model="inbound.stream.reality.settings.fingerprint" style="width: 135px">
+                    <a-select v-model="inbound.stream.reality.settings.fingerprint" style="width: 250px">
                         <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>
@@ -183,50 +183,50 @@
             </td>
         </tr>
         <tr>
-            <td>dest</td>
+            <td>Dest</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.reality.dest" style="width: 300px"></a-input>
+                    <a-input v-model.trim="inbound.stream.reality.dest" style="width: 250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
         <tr>
-            <td>serverNames</td>
+            <td>Server Names</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.reality.serverNames" style="width: 300px"></a-input>
+                    <a-input v-model.trim="inbound.stream.reality.serverNames" style="width: 250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
         <tr>
-            <td>shortIds</td>
+            <td>Short Ids</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.reality.shortIds"></a-input>
+                    <a-input v-model.trim="inbound.stream.reality.shortIds" style="width:250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
         <tr>
-            <td>spiderX</td>
+            <td>SpiderX</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
+                    <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width:250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
         <tr>
-            <td>privateKey</td>
+            <td>Private Key</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.reality.privateKey" style="width: 300px"></a-input>
+                    <a-input v-model.trim="inbound.stream.reality.privateKey" style="width: 250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
         <tr>
-            <td>publicKey</td>
+            <td>Public Key</td>
             <td>
                 <a-form-item>
-                    <a-input v-model.trim="inbound.stream.reality.settings.publicKey" style="width: 300px"></a-input>
+                    <a-input v-model.trim="inbound.stream.reality.settings.publicKey" style="width: 250px"></a-input>
                 </a-form-item>
             </td>
         </tr>
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html
index 0f18fe30..98cb188f 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -43,6 +43,14 @@
         loading(loading) {
             inModal.confirmLoading = loading;
         },
+        getClients(protocol, clientSettings) {
+            switch(protocol){
+                case Protocols.VMESS: return clientSettings.vmesses;
+                case Protocols.VLESS: return clientSettings.vlesses;
+                case Protocols.TROJAN: return clientSettings.trojans;
+                default: return null;
+            }
+        },
     };
 
     const protocols = {
@@ -62,6 +70,7 @@
             inModal: inModal,
             Protocols: protocols,
             SSMethods: SSMethods,
+            delayedStart: false,
             get inbound() {
                 return inModal.inbound;
             },
@@ -70,32 +79,26 @@
             },
             get isEdit() {
                 return inModal.isEdit;
-            }
+            },
+            get client() {
+                return inModal.getClients(this.inbound.protocol, this.inbound.settings)[0];
+            },
+            get delayedExpireDays() {
+                return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
+            },
+            set delayedExpireDays(days){
+                this.client.expiryTime = -86400000 * days;
+            },
         },
         methods: {
-            streamNetworkChange(oldValue) {
-                if (oldValue === 'kcp') {
-                    this.inModal.inbound.tls = false;
+            streamNetworkChange() {
+                if (!inModal.inbound.canSetTls()) {
+                    this.inModal.inbound.stream.security = 'none';
                 }
-            },
-            addClient(protocol, clients) {
-                switch (protocol) {
-                    case Protocols.VMESS: return clients.push(new Inbound.VmessSettings.Vmess());
-                    case Protocols.VLESS: return clients.push(new Inbound.VLESSSettings.VLESS());
-                    case Protocols.TROJAN: return clients.push(new Inbound.TrojanSettings.Trojan());
-                    default: return null;
+                if (!inModal.inbound.canEnableReality()) {
+                    this.inModal.inbound.reality = false;
                 }
             },
-            removeClient(index, clients) {
-                clients.splice(index, 1);
-            },
-            isExpiry(index) {
-                return this.inbound.isExpiry(index)
-            },
-            isClientEnable(email) {
-                clientStats = this.dbInbound.clientStats ? this.dbInbound.clientStats.find(stats => stats.email === email) : null
-                return clientStats ? clientStats['enable'] : true
-            },
             setDefaultCertData(){
                 inModal.inbound.stream.tls.certs[0].certFile = app.defaultCert;
                 inModal.inbound.stream.tls.certs[0].keyFile = app.defaultKey;
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index a050ae04..8aad1fa3 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -39,7 +39,7 @@
 "depleted" = "Depleted"
 "depletingSoon" = "Depleting soon"
 "domainName" = "Domain name"
-"additional" = "Alter"
+"additional" = "Alter ID"
 "monitor" = "Listen IP"
 "certificate" = "Certificat"
 "fail" = "Fail"
@@ -156,7 +156,7 @@
 "first" = "First"
 "last" = "Last"
 "prefix" = "Prefix"
-"postfix" = "postfix"
+"postfix" = "Postfix"
 "delayedStart" = "Start after first use"
 "expireDays" = "Expire days"
 "days" = "day(s)"
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index f384727a..123f2155 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -117,7 +117,7 @@
 "network" = "شبکه"
 "destinationPort" = "پورت مقصد"
 "targetAddress" = "آدرس مقصد"
-"disableInsecureEncryption" = "رمزگذاری ناامن را غیرفعال کنید"
+"disableInsecureEncryption" = "غیرفعال سازی رمزگذاری ناامن"
 "monitorDesc" = "به طور پیش فرض خالی بگذارید"
 "meansNoLimit" = "یعنی بدون محدودیت"
 "totalFlow" = "کل ترافیک"
diff --git a/web/translation/translate.zh_Hans.toml b/web/translation/translate.zh_Hans.toml
index ef74e4e8..accb2d4a 100644
--- a/web/translation/translate.zh_Hans.toml
+++ b/web/translation/translate.zh_Hans.toml
@@ -39,7 +39,7 @@
 "depleted" = "耗尽"
 "depletingSoon" = "即将耗尽"
 "domainName" = "域名"
-"additional" = "额外"
+"additional" = "额外 ID"
 "monitor" = "监听"
 "certificate" = "证书"
 "fail" = "失败"