diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 7d77fd12df..bc03709046 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -156,6 +156,16 @@
     padding:16px;
 }
 
+.ant-menu-dark,
+.ant-menu-dark .ant-menu-sub,
+.ant-layout-header,
+.ant-layout-sider-dark,
+.ant-layout-sider-zero-width-trigger,
+.ant-dropdown-menu-dark,.ant-dropdown-menu-dark .ant-dropdown-menu,
+.ant-menu-dark.ant-menu-horizontal>.ant-menu-item,.ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu {
+    background:#161b22
+}
+
 .ant-card-dark {
     color: hsla(0,0%,100%,.65);
     background-color: #1a212a;
@@ -180,7 +190,7 @@
 .ant-card-dark .ant-calendar,
 .ant-card-dark .ant-table-placeholder {
     color: hsla(0,0%,100%,.65);
-    background-color: #1a212a;
+    background-color: #262f3d;
 }
 
 .ant-card-dark .ant-list-item-meta-title,
@@ -198,7 +208,8 @@
 .ant-card-dark .ant-calendar-year-select,
 .ant-card-dark .ant-calendar-date,
 .ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header,
-.ant-card-dark .ant-empty-normal {
+.ant-card-dark .ant-empty-normal,
+.ant-card-dark .ant-checkbox+span {
     color: hsla(0,0%,100%,.65);
 }
 
@@ -210,7 +221,7 @@
 
 .ant-card-dark tbody .ant-table-expanded-row {
     color: hsla(0,0%,100%,.65);
-    background-color: #023366; 
+    background-color: #1a212a; 
 }
 
 .ant-card-dark .ant-input,
@@ -219,7 +230,7 @@
 .ant-card-dark .ant-select-dropdown-menu-item-selected,
 .ant-card-dark .ant-select-selection {
     color: hsla(0,0%,100%,.65);
-    background-color: #023366;
+    background-color: #2e3b52;
 }
 
 .ant-card-dark .ant-collapse-item {
@@ -232,7 +243,7 @@
 .ant-card-dark .ant-modal-header,
 .ant-card-dark .ant-calendar-selected-day .ant-calendar-date {
     color: hsla(0,0%,100%,.65);
-    background-color: #242c3a; 
+    background-color: #222a37;
 }
 
 .client-table-header {
@@ -244,7 +255,7 @@
 }
 
 .ant-card-dark .client-table-header {
-    background-color:  #023366;
+    background-color:  #1a212a;
     color: hsla(0,0%,100%,.65);
 }
 
@@ -266,4 +277,62 @@
 .ant-drawer-dark .drawer-handle {
     background-color: #1a212a;
     border: 1px solid hsla(0,0%,100%,.30);
+}
+
+.ant-card-dark .ant-tag-blue {
+    color: #3c9ae8;
+    background: #111d2c;
+    border-color: #15395b;
+}
+
+.ant-card-dark .ant-tag-green {
+    color: #6abe39;
+    background: #162312;
+    border-color: #274916;
+}
+
+.ant-card-dark .ant-tag-cyan {
+    color: #33bcb7;
+    background: #112123;
+    border-color: #144848;
+}
+
+.ant-card-dark .ant-tag-red {
+    color: #e84749;
+    background: #2a1215;
+    border-color: #58181c;
+}
+
+.ant-card-dark .ant-tag-orange {
+    color: #e89a3c;
+    background: #2b1d11;
+    border-color: #593815;
+}
+
+.ant-card-dark .ant-table-row-expand-icon,
+.ant-card-dark .ant-checkbox-inner {
+    background: none;
+}
+
+.ant-card-dark .ant-switch-checked {
+    background-color: #0c61b0;
+}
+
+.ant-card-dark .ant-btn,
+.ant-card-dark .ant-radio-button-wrapper {
+    color: hsla(0,0%,100%,.65);
+    background: none;
+    border: 1px solid hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-radio-button-wrapper:hover {
+    color: #177ddc;
+}
+
+.ant-card-dark .ant-btn-primary {
+    color:  hsla(0,0%,100%,.65);
+    background-color: #073763;
+    border-color: #1890ff;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 0 rgba(0,0,0,.045);
 }
\ No newline at end of file
diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js
index 4f539f7c27..9b0f8de94a 100644
--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -95,7 +95,6 @@ const UTLS_FINGERPRINT = {
 const ALPN_OPTION = {
     H2: "h2",
     HTTP1: "http/1.1",
-    BOTH: "h2,http/1.1",
 };
 
 Object.freeze(Protocols);
@@ -575,9 +574,9 @@ TlsStreamSettings.Cert = class extends XrayCommonClass {
 };
 
 TlsStreamSettings.Settings = class extends XrayCommonClass {
-  constructor(insecure = false, fingerprint = '', serverName = '') {
+  constructor(allowInsecure = false, fingerprint = '', serverName = '') {
     super();
-    this.inSecure = insecure;
+    this.allowInsecure = allowInsecure;
     this.fingerprint = fingerprint;
     this.serverName = serverName;
   }
@@ -590,7 +589,7 @@ TlsStreamSettings.Settings = class extends XrayCommonClass {
   }
   toJson() {
     return {
-      allowInsecure: this.inSecure,
+      allowInsecure: this.allowInsecure,
       fingerprint: this.fingerprint,
       serverName: this.serverName,
     };
@@ -1084,7 +1083,8 @@ class Inbound extends XrayCommonClass {
             tls: this.stream.security,
 			sni: this.stream.tls.settings[0]['serverName'],
             fp: this.stream.tls.settings[0]['fingerprint'],
-            alpn: this.stream.tls.alpn[0],
+            alpn: this.stream.tls.alpn.join(','),
+            allowInsecure: this.stream.tls.settings[0].allowInsecure,
         };
         return 'vmess://' + base64(JSON.stringify(obj, null, 2));
     }
@@ -1096,7 +1096,6 @@ class Inbound extends XrayCommonClass {
         const type = this.stream.network;
         const params = new Map();
         params.set("type", this.stream.network);
-		params.set("security", this.stream.security);
         switch (type) {
             case "tcp":
                 const tcp = this.stream.tcp;
@@ -1143,8 +1142,12 @@ class Inbound extends XrayCommonClass {
         }
 
         if (this.tls) {
+            params.set("security", "tls");
             params.set("fp" , this.stream.tls.settings[0]['fingerprint']);
-            params.set("alpn", this.stream.tls.alpn[0]);
+            params.set("alpn", this.stream.tls.alpn);
+            if(this.stream.tls.settings[0].allowInsecure){
+                params.set("allowInsecure", "1");
+            }
             if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
                 address = this.stream.tls.server;
 			}
@@ -1156,12 +1159,17 @@ class Inbound extends XrayCommonClass {
             }
         }
 		
-		 if (this.XTLS) {
-				if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
+		if (this.XTLS) {
+            params.set("security", "tls");
+            params.set("alpn", this.stream.tls.alpn);
+            if(this.stream.tls.settings[0].allowInsecure){
+                params.set("allowInsecure", "1");
+            }
+			if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
 				address = this.stream.tls.server;
-				}
-			params.set("flow", this.settings.vlesses[clientIndex].flow);
 			}
+			params.set("flow", this.settings.vlesses[clientIndex].flow);
+		}
 
         const link = `vless://${uuid}@${address}:${port}`;
         const url = new URL(link);
@@ -1192,7 +1200,6 @@ class Inbound extends XrayCommonClass {
         const type = this.stream.network;
         const params = new Map();
 		params.set("type", this.stream.network);
-        params.set("security", this.stream.security);
         switch (type) {
             case "tcp":
                 const tcp = this.stream.tcp;
@@ -1239,8 +1246,12 @@ class Inbound extends XrayCommonClass {
         }
 
         if (this.tls) {
+            params.set("security", "tls");
             params.set("fp" , this.stream.tls.settings[0]['fingerprint']);
-            params.set("alpn", this.stream.tls.alpn[0]);
+            params.set("alpn", this.stream.tls.alpn);
+            if(this.stream.tls.settings[0].allowInsecure){
+                params.set("allowInsecure", "1");
+            }
             if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
                 address = this.stream.tls.server;
 			}
@@ -1249,12 +1260,17 @@ class Inbound extends XrayCommonClass {
             }
         }
 		
-		 if (this.XTLS) {
-				if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
-				address = this.stream.tls.server;
-				}
+		if (this.XTLS) {
+            params.set("security", "tls");
+            params.set("alpn", this.stream.tls.alpn);
+            if(this.stream.tls.settings[0].allowInsecure){
+                params.set("allowInsecure", "1");
+            }
+            if (!ObjectUtil.isEmpty(this.stream.tls.server)) {
+            address = this.stream.tls.server;
+            }
 			params.set("flow", this.settings.trojans[clientIndex].flow);
-			}
+		}
         
         const link = `trojan://${settings.trojans[clientIndex].password}@${address}:${this.port}#${encodeURIComponent(remark)}`;
         const url = new URL(link);
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index aa9c6c6d96..acb0a81560 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -40,11 +40,13 @@
     <a-form-item label='{{ i18n "domainName" }}'>
         <a-input v-model.trim="inbound.stream.tls.server"></a-input>
     </a-form-item>
-    <a-form-item label="Alpn" v-if="inbound.tls">
-        <a-select v-model="inbound.stream.tls.alpn[0]" style="width:200px">
-            <a-select-option value=''>auto</a-select-option>
-            <a-select-option v-for="key in ALPN_OPTION" :value="key">[[ key ]]</a-select-option>
-        </a-select>
+    <a-form-item label="Alpn">
+        <a-checkbox-group v-model="inbound.stream.tls.alpn" style="width:200px">
+            <a-checkbox v-for="key in ALPN_OPTION" :value="key">[[ key ]]</a-checkbox>
+        </a-checkbox-group>
+    </a-form-item>
+    <a-form-item label="Allow insecure">
+        <a-switch v-model="inbound.stream.tls.settings[0].allowInsecure"></a-switch>
     </a-form-item>
     <a-form-item label='{{ i18n "certificate" }}'>
         <a-radio-group v-model="inbound.stream.tls.certs[0].useFile" button-style="solid">
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index d5f697330c..f7b9e2edee 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -11,10 +11,6 @@
     .ant-col-sm-24 {
         margin-top: 10px;
     }
-
-    .ant-table-row-expand-icon {
-        color: rgba(0,0,0,.65);
-    }
 </style>
 <body>
 <a-layout id="app" v-cloak>