diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js
index e6143254..00b85448 100644
--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -2137,9 +2137,14 @@ Inbound.SocksSettings.SocksAccount = class extends XrayCommonClass {
 };
 
 Inbound.HttpSettings = class extends Inbound.Settings {
-    constructor(protocol, accounts=[new Inbound.HttpSettings.HttpAccount()]) {
+    constructor(
+        protocol, 
+        accounts = [new Inbound.HttpSettings.HttpAccount()],
+        allowTransparent = false,
+    ) {
         super(protocol);
         this.accounts = accounts;
+        this.allowTransparent = allowTransparent;
     }
 
     addAccount(account) {
@@ -2150,16 +2155,18 @@ Inbound.HttpSettings = class extends Inbound.Settings {
         this.accounts.splice(index, 1);
     }
 
-    static fromJson(json={}) {
+    static fromJson(json = {}) {
         return new Inbound.HttpSettings(
             Protocols.HTTP,
             json.accounts.map(account => Inbound.HttpSettings.HttpAccount.fromJson(account)),
+            json.allowTransparent,
         );
     }
 
     toJson() {
         return {
             accounts: Inbound.HttpSettings.toJsonArray(this.accounts),
+            allowTransparent: this.allowTransparent,
         };
     }
 };
diff --git a/web/html/xui/form/protocol/http.html b/web/html/xui/form/protocol/http.html
index ff266de5..106ff8e7 100644
--- a/web/html/xui/form/protocol/http.html
+++ b/web/html/xui/form/protocol/http.html
@@ -1,21 +1,25 @@
 {{define "form/http"}}
 <a-form>
-        <table style="width: 100%; text-align: center; margin-bottom: 10px;">
-            <tr>
-                <td width="45%">{{ i18n "username" }}</td>
-                <td width="45%">{{ i18n "password" }}</td>
-                <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.HttpSettings.HttpAccount())">+</a-button></td>
-            </tr>
-        </table>
-        <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
-            <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
-            <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-                <template slot="addonAfter">
-                    <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
-                </template>
-            </a-input>
-        </a-input-group>
+    <table style="width: 100%; text-align: center; margin-bottom: 10px;">
+        <tr>
+            <td width="45%">{{ i18n "username" }}</td>
+            <td width="45%">{{ i18n "password" }}</td>
+            <td><a-button size="small"
+                    @click="inbound.settings.addAccount(new Inbound.HttpSettings.HttpAccount())">+</a-button></td>
+        </tr>
+    </table>
+    <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
+        <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
+            <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+        </a-input>
+        <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
+            <template slot="addonAfter">
+                <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
+            </template>
+        </a-input>
+    </a-input-group>
+    <a-form-item label="Allow Transparent">
+        <a-switch v-model="inbound.settings.allowTransparent" />
+    </a-form-item>
 </a-form>
 {{end}}
\ No newline at end of file