diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 37e6231a..4e8bbd2e 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -262,6 +262,7 @@ body {
 .ant-card-dark .ant-collapse-content,
 .ant-card-dark .ant-calendar,
 .ant-card-dark .ant-table-placeholder,
+.ant-card-dark .ant-select-selection__choice,
 .ant-card-dark .ant-input-group-addon {
     color: hsla(0,0%,100%,.65);
     background-color: #262f3d;
diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js
index 8ab2969d..47800884 100644
--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -78,9 +78,9 @@ const UTLS_FINGERPRINT = {
 };
 
 const ALPN_OPTION = {
-    HTTP1: "http/1.1",
-    H2: "h2",
     H3: "h3",
+    H2: "h2",
+    HTTP1: "http/1.1",
 };
 
 const SNIFFING_OPTION = {
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index 227c5466..28f61916 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -80,9 +80,13 @@
         </a-select>
     </a-form-item>
     <a-form-item label="Alpn">
-        <a-checkbox-group v-model="inbound.stream.tls.alpn" style="width:200px">
-            <a-checkbox v-for="key,value in ALPN_OPTION" :value="key">[[ value ]]</a-checkbox>
-        </a-checkbox-group>
+        <a-select
+            mode="multiple"
+            style="width: 250px"
+            :dropdown-class-name="themeSwitcher.darkCardClass"
+            v-model="inbound.stream.tls.alpn">
+            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+        </a-select>
     </a-form-item>
     <br>
     <a-form-item label="Allow insecure">