diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 17f9c03e..93de4422 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -751,7 +751,7 @@ style attribute {
 .dark .ant-tag-purple {
     background-color: #2c1e32;
     border-color: #49394e;
-    color: #f2eaf1;
+    color: #cfb9cc;
 }
 
 .dark .ant-modal-content,
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index db92eea5..9c881844 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -106,9 +106,13 @@
         <a-input v-model.trim="inbound.stream.xtls.server" style="width: 250px"></a-input>
     </a-form-item>
     <a-form-item label="Alpn">
-        <a-checkbox-group v-model="inbound.stream.xtls.alpn" style="width:200px">
-            <a-checkbox v-for="key in ALPN_OPTION" :value="key">[[ key ]]</a-checkbox>
-        </a-checkbox-group>
+        <a-select
+            mode="multiple"
+            style="width: 250px"
+            :dropdown-class-name="themeSwitcher.currentTheme"
+            v-model="inbound.stream.xtls.alpn">
+            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+        </a-select>
     </a-form-item>
     <a-form-item label="Allow insecure">
         <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>