v1.6.4

fix filter view in inbounds
unifying texts (#765 )
2026-03-19 15:25:49 +00:00 · 2023-12-19 02:00:40 +01:00 · 2023-12-19 01:06:29 +01:00 · 2023-12-19 00:47:49 +01:00 · 2023-12-18 18:17:54 +01:00 · 2023-12-15 21:07:27 +01:00
42 changed files with 1381 additions and 2282 deletions
--- a/config/version
+++ b/config/version
@@ -1 +1 @@
-1.6.2
+1.6.4
--- a/go.mod
+++ b/go.mod
@@ -3,20 +3,19 @@ module x-ui
 go 1.21.4
 require (
 	github.com/Workiva/go-datastructures v1.1.1
 	github.com/gin-contrib/sessions v0.0.4
 	github.com/gin-gonic/gin v1.9.1
 	github.com/go-telegram-bot-api/telegram-bot-api/v5 v5.5.1
 	github.com/goccy/go-json v0.10.2
 	github.com/nicksnyder/go-i18n/v2 v2.3.0
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
-	github.com/pelletier/go-toml/v2 v2.1.0
+	github.com/pelletier/go-toml/v2 v2.1.1
 	github.com/robfig/cron/v3 v3.0.1
 	github.com/shirou/gopsutil/v3 v3.23.11
 	github.com/xtls/xray-core v1.8.6
 	go.uber.org/atomic v1.11.0
 	golang.org/x/text v0.14.0
-	google.golang.org/grpc v1.59.0
+	google.golang.org/grpc v1.60.0
 	gorm.io/driver/sqlite v1.5.4
 	gorm.io/gorm v1.25.5
 )
--- a/go.sum
+++ b/go.sum
@@ -10,8 +10,6 @@ git.apache.org/thrift.git v0.0.0-20180902110319-2566ecd5d999/go.mod h1:fPE2ZNJGy
 github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
 github.com/BurntSushi/toml v1.3.2 h1:o7IhLm0Msx3BaB+n3Ag7L8EVlByGnpq14C4YWiu/gL8=
 github.com/BurntSushi/toml v1.3.2/go.mod h1:CxXYINrC8qIiEnFrOxCa7Jy5BFHlXnUU2pbicEuybxQ=
 github.com/Workiva/go-datastructures v1.1.1 h1:9G5u1UqKt6ABseAffHGNfbNQd7omRlWE5QaxNruzhE0=
 github.com/Workiva/go-datastructures v1.1.1/go.mod h1:1yZL+zfsztete+ePzZz/Zb1/t5BnDuE2Ya2MMGhzP6A=
 github.com/andybalholm/brotli v1.0.6 h1:Yf9fFpf49Zrxb9NlQaluyE92/+X7UVHlhMNJN2sxfOI=
 github.com/andybalholm/brotli v1.0.6/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
 github.com/anmitsu/go-shlex v0.0.0-20161002113705-648efa622239/go.mod h1:2FmKhYUyUczH0OGQWaF5ceTx0UBShxjsH6f8oGKYe2c=
@@ -203,9 +201,8 @@ github.com/openzipkin/zipkin-go v0.1.1/go.mod h1:NtoC/o8u3JlF1lSlyPNswIbeQH9bJTm
 github.com/pelletier/go-toml v1.9.5 h1:4yBQzkHv+7BHq2PQUZF3Mx0IYxG7LsP222s7Agd3ve8=
 github.com/pelletier/go-toml v1.9.5/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCkoOuaOx1Y+c=
 github.com/pelletier/go-toml/v2 v2.0.1/go.mod h1:r9LEWfGN8R5k0VXJ+0BkIe7MYkRdwZOjgMj2KwnJFUo=
-github.com/pelletier/go-toml/v2 v2.1.0 h1:FnwAJ4oYMvbT/34k9zzHuZNrhlz48GB3/s6at6/MHO4=
+github.com/pelletier/go-toml/v2 v2.1.1 h1:LWAJwfNvjQZCFIDKWYQaM62NcYeYViCmWIwmOStowAI=
-github.com/pelletier/go-toml/v2 v2.1.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pelletier/go-toml/v2 v2.1.1/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
 github.com/philhofer/fwd v1.1.1/go.mod h1:gk3iGcWd9+svBvR0sR+KPcfE+RNWozjowpeBVG3ZVNU=
 github.com/pires/go-proxyproto v0.7.0 h1:IukmRewDQFWC7kfnb66CSomk2q/seBuilHBYFwyq0Hs=
 github.com/pires/go-proxyproto v0.7.0/go.mod h1:Vz/1JPY/OACxWGQNIRY2BeyDmpoaWmEP40O9LbuiFR4=
 github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
@@ -287,12 +284,10 @@ github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/tarm/serial v0.0.0-20180830185346-98f6abe2eb07/go.mod h1:kDXzergiv9cbyO7IOYJZWg1U88JhDg3PB6klq9Hg2pA=
 github.com/tinylib/msgp v1.1.5/go.mod h1:eQsjooMTnV42mHu917E26IogZ2930nFyBQdofk10Udg=
 github.com/tklauser/go-sysconf v0.3.12 h1:0QaGUFOdQaIVdPgfITYzaTegZvdCjmYO52cSFAEVmqU=
 github.com/tklauser/go-sysconf v0.3.12/go.mod h1:Ho14jnntGE1fpdOqQEEaiKRpvIavV0hSfmBq8nJbHYI=
 github.com/tklauser/numcpus v0.6.1 h1:ng9scYS7az0Bk4OZLvrNXNSAO2Pxr1XXRAPyjhIx+Fk=
 github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
 github.com/ttacon/chalk v0.0.0-20160626202418-22c06c80ed31/go.mod h1:onvgF043R+lC5RZ8IT9rBXDaEDnpnw/Cl+HFiw+v/7Q=
 github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go v1.1.7/go.mod h1:kZn38zHttfInRq0xu/PH0az30d+z6vm202qpg1oXVMw=
@@ -314,7 +309,6 @@ github.com/xtls/reality v0.0.0-20231112171332-de1173cf2b19 h1:capMfFYRgH9BCLd6A3
 github.com/xtls/reality v0.0.0-20231112171332-de1173cf2b19/go.mod h1:dm4y/1QwzjGaK17ofi0Vs6NpKAHegZky8qk6J2JJZAE=
 github.com/xtls/xray-core v1.8.6 h1:tr3nk/fZnFfCsmgZv7B3RC72N5qUC88oMGVLlybDey8=
 github.com/xtls/xray-core v1.8.6/go.mod h1:hj2EB8rtcLdlTC8zxiWm5xL+C0k2Aie9Pk0mXtDEP6U=
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yusufpapurcu/wmi v1.2.3 h1:E1ctvB7uKFMOJw3fdOW32DwGE9I7t++CRUEMKvFoFiw=
 github.com/yusufpapurcu/wmi v1.2.3/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 go.opencensus.io v0.18.0/go.mod h1:vKdFvxhtzZ9onBp9VKHK8z/sRpBMnKAsufL7wlDrCOA=
@@ -332,7 +326,6 @@ golang.org/x/build v0.0.0-20190111050920-041ab4dc3f9d/go.mod h1:OWs+y06UdEOHN4y+
 golang.org/x/crypto v0.0.0-20181030102418-4d3f4d9ffa16/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190313024323-a1f597ede03a/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20210711020723-a769d52b0f97/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.15.0 h1:frVn1TEaCEaZcn3Tmd7Y2b5KKPaZ+I32Q2OA3kYp5TA=
@@ -343,7 +336,6 @@ golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa/go.mod h1:zk2irFbV9DP96SEBUU
 golang.org/x/lint v0.0.0-20180702182130-06c8688daad7/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
 golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.14.0 h1:dGoOF9QVLYng8IHTm7BAyWqCqSheQ5pYWGhzW00YJr0=
 golang.org/x/mod v0.14.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -355,8 +347,6 @@ golang.org/x/net v0.0.0-20190108225652-1e06a53dbb7e/go.mod h1:mL1N/T3taQHkDXs73r
 golang.org/x/net v0.0.0-20190213061140-3a22650c66bd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20190313220215-9f648a60d977/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.18.0 h1:mIYleuAkSbHh0tCv7RvjL3F6ZVbLjq4+R7zbOn3Kokg=
 golang.org/x/net v0.18.0/go.mod h1:/czyP5RqHAH4odGYxBJ1qz0+CE5WZ+2j1YgoEo8F2jQ=
@@ -369,8 +359,6 @@ golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190227155943-e225da77a7e6/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.5.0 h1:60k92dhOjHxJkrqnwsfl8KuaHbn/5dl0lUPUklKo3qE=
 golang.org/x/sync v0.5.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@@ -382,7 +370,6 @@ golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200217220822-9197077df867/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@@ -412,14 +399,9 @@ golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGm
 golang.org/x/tools v0.0.0-20181030000716-a0a13e073c7b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.0.0-20201022035929-9cf592e881e9/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
 golang.org/x/tools v0.15.0 h1:zdAyfUGbYmuVokhzVmghFl2ZJh5QhcfebBgmVPFYA+8=
 golang.org/x/tools v0.15.0/go.mod h1:hpksKq4dtpQWS1uQ61JkdqWM3LscIS6Slf+VVkm+wQk=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2 h1:B82qJJgjvYKsXS9jeunTOisW56dUokqW/FOteYJJ/yg=
 golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2/go.mod h1:deeaetjYA+DHMHg+sMSMI58GrEteJUUzzw7en6TJQcI=
 golang.zx2c4.com/wireguard v0.0.0-20231022001213-2e0774f246fb h1:c5tyN8sSp8jSDxdCCDXVOpJwYXXhmTkNMt+g0zTSOic=
@@ -442,8 +424,8 @@ google.golang.org/grpc v1.14.0/go.mod h1:yo6s7OP7yaDglbqo1J04qKzAhqBH6lvTonzMVmE
 google.golang.org/grpc v1.16.0/go.mod h1:0JHn/cJsOMiMfNA9+DeHDlAU7KAAB5GDlYFpa9MZMio=
 google.golang.org/grpc v1.17.0/go.mod h1:6QZJwpn2B+Zp71q/5VxRsJ6NXXVCE5NRUHRo+f3cWCs=
 google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
-google.golang.org/grpc v1.59.0 h1:Z5Iec2pjwb+LEOqzpB2MR12/eKFhDPhuqW91O+4bwUk=
+google.golang.org/grpc v1.60.0 h1:6FQAR0kM31P6MRdeluor2w2gPaS4SVNrD/DNTxrQ15k=
-google.golang.org/grpc v1.59.0/go.mod h1:aUPDwccQo6OTjy7Hct4AfBPD1GptF4fyUjIkQ9YtF98=
+google.golang.org/grpc v1.60.0/go.mod h1:OlCHIeLYqSSsLi6i49B5QGdzaMZK9+M7LXN2FKz4eGM=
 google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
 google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
 google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
--- a/install.sh
+++ b/install.sh
@@ -163,20 +163,22 @@ install_x-ui() {
    systemctl start x-ui
    echo -e "${green}x-ui v${last_version}${plain} installation finished, it is up and running now..."
    echo -e ""
-    echo -e "x-ui control menu usages: "
+    echo "X-UI Control Menu Usage"
-    echo -e "----------------------------------------------"
+    echo "------------------------------------------"
-    echo -e "x-ui              - Enter     Admin menu"
+    echo "SUBCOMMANDS:" 
-    echo -e "x-ui start        - Start     x-ui"
+    echo "x-ui              - Admin Management Script"
-    echo -e "x-ui stop         - Stop      x-ui"
+    echo "x-ui start        - Start"
-    echo -e "x-ui restart      - Restart   x-ui"
+    echo "x-ui stop         - Stop"
-    echo -e "x-ui status       - Show      x-ui status"
+    echo "x-ui restart      - Restart"
-    echo -e "x-ui enable       - Enable    x-ui on system startup"
+    echo "x-ui status       - Current Status"
-    echo -e "x-ui disable      - Disable   x-ui on system startup"
+    echo "x-ui enable       - Enable Autostart on OS Startup"
-    echo -e "x-ui log          - Check     x-ui logs"
+    echo "x-ui disable      - Disable Autostart on OS Startup"
-    echo -e "x-ui update       - Update    x-ui"
+    echo "x-ui log          - Check Logs"
-    echo -e "x-ui install      - Install   x-ui"
+    echo "x-ui update       - Update"
-    echo -e "x-ui uninstall    - Uninstall x-ui"
+    echo "x-ui install      - Install"
-    echo -e "----------------------------------------------"
+    echo "x-ui uninstall    - Uninstall"
    echo "x-ui help         - Control Menu Usage"
    echo "------------------------------------------"
 }
 echo -e "${green}Excuting...${plain}"
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -55,7 +55,7 @@ style attribute {
 }
 .ant-table-tbody > tr > td,
 .ant-table-thead > tr > th {
-    padding: 12px 16px;
+    padding: 12px 8px;
    overflow-wrap: break-word;
 }
 .ant-table-thead > tr > th {
@@ -132,6 +132,13 @@ style attribute {
        margin: 0.5rem;
        padding: 0.5rem;
    }
    .ant-modal-body {
        padding: 10px;
    }
    .ant-form-item-label {
        line-height: 1.5;
        padding: 8px 0 0;
    }
 }
 .ant-layout-content {
@@ -409,6 +416,10 @@ style attribute {
    background-color: white;
 }
 .ant-form-item {
    margin-bottom: 0;
 }
 .ant-setting-textarea {
    margin-top: 1.5rem;
 }
--- a/web/assets/js/model/outbound.js
+++ b/web/assets/js/model/outbound.js
@@ -476,7 +476,7 @@ class Outbound extends CommonClass {
        if(data.length !=2) return null;
        switch(data[0].toLowerCase()){
            case Protocols.VMess:
-                return this.fromVmessLink(JSON.parse(atob(data[1])));
+                return this.fromVmessLink(JSON.parse(Base64.decode(data[1])));
            case Protocols.VLESS:
            case Protocols.Trojan:
            case 'ss':
@@ -493,8 +493,8 @@ class Outbound extends CommonClass {
        if (network === 'tcp') {
            stream.tcp = new TcpStreamSettings(
                json.type,
-                json.host ? json.host.split(','): [],
+                json.host ?? '',
-                json.path ? json.path.split(','): []);
+                json.path ?? '');
        } else if (network === 'kcp') {
            stream.kcp = new KcpStreamSettings();
            stream.type = json.type;
@@ -505,7 +505,7 @@ class Outbound extends CommonClass {
            stream.network = 'http'
            stream.http = new HttpStreamSettings(
                json.path,
-                json.host ? json.host.split(',') : []);
+                json.host);
        } else if (network === 'quic') {
            stream.quic = new QuicStreamSettings(
                json.host ? json.host : 'none',
@@ -570,7 +570,7 @@ class Outbound extends CommonClass {
            let sni=url.searchParams.get('sni') ?? '';
            let sid=url.searchParams.get('sid') ?? '';
            let spx=url.searchParams.get('spx') ?? '';
-            stream.tls = new RealityStreamSettings(pbk, fp, sni, sid, spx);
+            stream.reality = new RealityStreamSettings(pbk, fp, sni, sid, spx);
        }
        let data = link.split('?');
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -27,6 +27,7 @@
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .title {
    font-size: 32px;
@@ -36,7 +37,6 @@
    overflow: hidden;
  }
  #login {
    animation: charge 0.5s both;
    background-color: #fff;
    border-radius: 2rem;
    padding: 3rem;
@@ -45,24 +45,6 @@
  #login:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  }
  @keyframes charge {
    from {
      transform: translateY(5rem);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes wave {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .wave {
    opacity: 0.6;
    position: absolute;
@@ -70,20 +52,20 @@
    left: 50%;
    width: 6000px;
    height: 6000px;
-    background-color: rgba(14, 73, 181, 0.08);
+    background-color: rgba(0, 135, 113, 0.08);
    margin-left: -3000px;
    transform-origin: 50% 48%;
    border-radius: 46%;
    animation: wave 72s infinite linear;
    pointer-events: none;
    rotate: 125deg;
  }
  .wave2 {
-    animation: wave 88s infinite linear;
+    opacity: 0.4;
-    opacity: 0.3;
+    rotate: 70deg;
  }
  .wave3 {
-    animation: wave 80s infinite linear;
+    opacity: 0.2;
-    opacity: 0.1;
+    rotate: 90deg;
  }
  .under {
    background-color: #dce9f5;
@@ -100,120 +82,8 @@
  .dark h1 {
    color: rgba(255, 255, 255, 0.85);
  }
-  .ant-btn-primary-login {
+  .ant-form-item {
-    color: #0e49b5;
+    margin-bottom: 16px;
    background-color: #edf4fa;
    border-color: #a9c5e7;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    box-shadow: none;
    width: 100%;
  }
  .ant-btn-primary-login:focus,
  .ant-btn-primary-login:hover {
    color: #fff;
    background-color: #0c3f9d;
    border-color: #0e49b5;
    background-image: linear-gradient(
      270deg,
      rgba(123, 199, 77, 0) 30%,
      #2f67c2,
      rgba(123, 199, 77, 0) 100%
    );
    background-repeat: no-repeat;
    animation: ma-bg-move ease-in-out 5s infinite;
    background-position-x: -500px;
    width: 95%;
    animation-delay: -0.5s;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  }
  .ant-btn-primary-login.active,
  .ant-btn-primary-login:active {
    color: #fff;
    background-color: #04308f;
    border-color: #04308f;
  }
  @keyframes ma-bg-move {
    0% {
      background-position: -500px 0;
    }
    50% {
      background-position: 1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }
  .wave-btn-bg {
    position: relative;
    border-radius: 25px;
    width: 100%;
  }
  .dark .wave-btn-bg {
    color: #fff;
    position: relative;
    background-color: #0e49b5;
    border: 2px double transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 300%;
    animation: wave-btn-tara 4s ease infinite;
    transition: all 0.5s ease;
    width: 100%;
  }
  .dark .wave-btn-bg-cl {
    background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
      radial-gradient(circle at left top, #0e49b5, #387eff, #0e49b5) !important;
    border-radius: 3em;
  }
  .dark .wave-btn-bg-cl:hover {
    width: 95%;
  }
  .dark .wave-btn-bg-cl:before {
    position: absolute;
    content: "";
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
    z-index: -1;
    background: inherit;
    background-size: inherit;
    border-radius: 4em;
    opacity: 0;
    transition: 0.5s;
  }
  .dark .wave-btn-bg-cl:hover::before {
    opacity: 1;
    filter: blur(20px);
    animation: wave-btn-tara 8s linear infinite;
  }
  @keyframes wave-btn-tara {
    to {
      background-position: 300%;
    }
  }
  .dark .ant-btn-primary-login {
    font-size: 14px;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(
      rgba(13, 14, 33, 0.45),
      rgba(13, 14, 33, 0.35)
    );
    border-radius: 2rem;
    border: none;
    outline: none;
    background-color: transparent;
    height: 46px;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    padding: 0 15px;
    width: 100%;
    animation: none;
    background-position-x: 0;
    box-shadow: none;
  }
 </style>
 <body>
@@ -246,12 +116,10 @@
                        </a-form-item>
                        <a-form-item>
                            <a-row justify="center" class="centered">
-                                <div class="wave-btn-bg wave-btn-bg-cl">
+                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
-                                    <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+                                          :style="loading ? { width: '50px' } : { display: 'inline-block', width: '100%' }">
-                                              :style="loading ? { width: '50px' } : { display: 'inline-block' }">
+                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
-                                        [[ loading ? '' : '{{ i18n "login" }}' ]]
+                                </a-button>
                                    </a-button>
                                </div>
                            </a-row>
                        </a-form-item>
                        <a-form-item>
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -2,170 +2,105 @@
 <a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title" @ok="clientsBulkModal.ok"
         :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
         :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-    <a-form layout="inline">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <table width="100%" class="ant-table-tbody">
+        <a-form-item label='{{ i18n "pages.client.method" }}'>
-            <tr>
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" :dropdown-class-name="themeSwitcher.currentTheme">
-                <td>{{ i18n "pages.client.method" }}</td>
+                <a-select-option :value="0">Random</a-select-option>
-                <td>
+                <a-select-option :value="1">Random+Prefix</a-select-option>
-                    <a-form-item>
+                <a-select-option :value="2">Random+Prefix+Num</a-select-option>
-                        <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
-                            <a-select-option :value="0">Random</a-select-option>
+                <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
-                            <a-select-option :value="1">Random+Prefix</a-select-option>
+            </a-select>
-                            <a-select-option :value="2">Random+Prefix+Num</a-select-option>
+        </a-form-item>
-                            <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
+        <a-form-item label='{{ i18n "pages.client.first" }}' v-if="clientsBulkModal.emailMethod>1">
-                            <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
+            <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
-                        </a-select>
+        </a-form-item>
-                    </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.last" }}' v-if="clientsBulkModal.emailMethod>1">
-                </td>
+            <a-input-number v-model="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
-            </tr>
+        </a-form-item>
-            <tr v-if="clientsBulkModal.emailMethod>1">
+        <a-form-item label='{{ i18n "pages.client.prefix" }}' v-if="clientsBulkModal.emailMethod>0">
-                <td>{{ i18n "pages.client.first" }}</td>
+            <a-input v-model="clientsBulkModal.emailPrefix"></a-input>
-                <td>
+        </a-form-item>
-                    <a-form-item>
+        <a-form-item label='{{ i18n "pages.client.postfix" }}' v-if="clientsBulkModal.emailMethod>2">
-                        <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
+            <a-input v-model="clientsBulkModal.emailPostfix"></a-input>
-                    </a-form-item>
+        </a-form-item>
-                </td>
+        <a-form-item label='{{ i18n "pages.client.clientCount" }}' v-if="clientsBulkModal.emailMethod < 2">
-            </tr>
+            <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
-            <tr v-if="clientsBulkModal.emailMethod>1">
+        </a-form-item>
-                <td>{{ i18n "pages.client.last" }}</td>
+        <a-form-item label='Flow' v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
-                <td>
+            <a-select v-model="clientsBulkModal.flow" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-form-item>
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                        <a-input-number v-model="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
+                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    </a-form-item>
+            </a-select>
-                </td>
+        </a-form-item>
-            </tr>
+        <a-form-item v-if="app.subSettings.enable">
-            <tr v-if="clientsBulkModal.emailMethod>0">
+            <template slot="label">
-                <td>{{ i18n "pages.client.prefix" }}</td>
+                <a-tooltip>
-                <td>
+                    <template slot="title">
-                    <a-form-item>
+                        <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                        <a-input v-model="clientsBulkModal.emailPrefix" style="width: 250px"></a-input>
+                    </template>
-                    </a-form-item>
+                    Subscription
-                </td>
+                    <a-icon @click="clientsBulkModal.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
-            </tr>
+                </a-tooltip>
-            <tr v-if="clientsBulkModal.emailMethod>2">
+            </template>
-                <td>{{ i18n "pages.client.postfix" }}</td>
+            <a-input v-model.trim="clientsBulkModal.subId"></a-input>
-                <td>
+        </a-form-item>
-                    <a-form-item>
+        <a-form-item v-if="app.tgBotEnable">
-                        <a-input v-model="clientsBulkModal.emailPostfix" style="width: 250px"></a-input>
+            <template slot="label">
-                    </a-form-item>
+                <a-tooltip>
-                </td>
+                    <template slot="title">
-            </tr>
+                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-            <tr v-if="clientsBulkModal.emailMethod < 2">
+                    </template>
-                <td>{{ i18n "pages.client.clientCount" }}</td>
+                    Telegram ID
-                <td>
+                    <a-icon type="question-circle"></a-icon>
-                    <a-form-item>
+                </a-tooltip>
-                        <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
+            </template>
-                    </a-form-item>
+            <a-input v-model.trim="clientsBulkModal.tgId"></a-input>
-                </td>
+        </a-form-item>
-            </tr>
+        <a-form-item>
-            <tr v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
+            <template slot="label">
-                <td>Flow</td>
+                <a-tooltip>
-                <td>
+                    <template slot="title">
-                    <a-form-item>
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                        <a-select v-model="clientsBulkModal.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+                    </template>
-                            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+                    {{ i18n "pages.inbounds.totalFlow" }} (GB)
-                            <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+                    <a-icon type="question-circle"></a-icon>
-                        </a-select>
+                </a-tooltip>
-                    </a-form-item>
+            </template>
-                </td>
+            <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
-            </tr>
+        </a-form-item>
-            <tr v-if="app.subSettings.enable">
+        <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-                <td>Subscription
+            <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
-                    <a-tooltip>
+        </a-form-item>
-                        <template slot="title">
+        <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
-                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+            <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-                        </template>
+        </a-form-item>
-                        <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
+        <a-form-item v-else>
-                    </a-tooltip>
+            <template slot="label">
-                </td>
+                <a-tooltip>
-                <td>
+                    <template slot="title">
-                    <a-form-item>
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                        <a-input v-model.trim="clientsBulkModal.subId" style="width: 250px"></a-input>
+                    </template>
-                    </a-form-item>
+                    {{ i18n "pages.inbounds.expireDate" }}
-                </td>
+                    <a-icon type="question-circle"></a-icon>
-            </tr>
+                </a-tooltip>
-            <tr v-if="app.tgBotEnable">
+            </template>
-                <td>Telegram ID
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                    <a-tooltip>
+                :dropdown-class-name="themeSwitcher.currentTheme"
-                        <template slot="title">
+                v-model="clientsBulkModal.expiryTime"></a-date-picker>
-                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+        </a-form-item>
-                        </template>
+        <a-form-item v-if="clientsBulkModal.expiryTime != 0">
-                        <a-icon type="question-circle" theme="filled"></a-icon>
+            <template slot="label">
-                    </a-tooltip>
+                <span>{{ i18n "pages.client.renew" }}</span>
-                </td>
+                <a-tooltip>
-                <td>
+                    <template slot="title">
-                    <a-form-item>
+                        <span>{{ i18n "pages.client.renewDesc" }}</span>
-                        <a-input v-model.trim="clientsBulkModal.tgId" style="width: 250px"></a-input>
+                    </template>
-                    </a-form-item>
+                    <a-icon type="question-circle"></a-icon>
-                </td>
+                </a-tooltip>
-            </tr>
+            </template>
-            <tr>
+            <a-input-number v-model.number="clientsBulkModal.reset" :min="0"></a-input-number>
-                <td>
+        </a-form-item>
                    <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:ss' }" format="YYYY-MM-DD HH:mm:ss"
                                       :dropdown-class-name="themeSwitcher.currentTheme"
                                       v-model="clientsBulkModal.expiryTime" style="width: 250px;"></a-date-picker>
                    </a-form-item>
                </td>
            </tr>
            <tr v-if="clientsBulkModal.expiryTime != 0">
                <td>
                    <span>{{ i18n "pages.client.renew" }}</span>
                    <a-tooltip>
                        <template slot="title">
                            <span>{{ i18n "pages.client.renewDesc" }}</span>
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
                </td>
                <td>
                    <a-form-item>
                        <a-input-number v-model.number="clientsBulkModal.reset" :min="0"></a-input-number>
                    </a-form-item>
                </td>
            </tr>
        </table>
    </a-form>
 </a-modal>
 <script>
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -1,170 +1,125 @@
 {{define "form/client"}}
-<a-form layout="inline" v-if="client">
+<a-form layout="horizontal" v-if="client" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
-        <tr>
+        <a-switch v-model="client.enable"></a-switch>
-            <td>{{ i18n "pages.inbounds.enable" }}</td>
+    </a-form-item>
-            <td>
+    <a-form-item>
-                <a-form-item>
+        <template slot="label">
-                    <a-switch v-model="client.enable"></a-switch>
+            <a-tooltip>
-                </a-form-item>
+                <template slot="title">
-            </td>
+                    <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-        </tr>
+                </template>
-        <tr>
+                {{ i18n "pages.inbounds.email" }}
-            <td>
+                <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
-                <span>{{ i18n "pages.inbounds.email" }}</span>
+            </a-tooltip>
-                <a-tooltip>
+        </template>
-                    <template slot="title">
+        <a-input v-model.trim="client.email"></a-input>
-                        <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
+    </a-form-item>
-                    </template>
+    <a-form-item v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
-                    <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
+        <template slot="label">
-                </a-tooltip>
+            <a-tooltip>
-            </td>
+                <template slot="title">
-            <td>
+                    <span>{{ i18n "pages.client.renew" }}</span>
-                <a-form-item>
+                </template>
-                    <a-input v-model.trim="client.email" style="width: 250px"></a-input>
+                {{ i18n "password" }}
-                </a-form-item>
+                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
-            </td>
+                <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)" type="sync"></a-icon>
-        </tr>
+            </a-tooltip>
-        <tr v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
+        </template>
-            <td>password
+        <a-input v-model.trim="client.password"></a-input>
-                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
+    </a-form-item>
-            </td>
+    <a-form-item v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
-            <td>
+        <template slot="label">
-                <a-form-item>
+            <a-tooltip>
-                    <a-input v-model.trim="client.password" style="width: 250px"></a-input>
+                <template slot="title">
-                </a-form-item>
+                    <span>{{ i18n "pages.client.renew" }}</span>
-            </td>
+                </template>
-        </tr>
+                ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon>
-        <tr v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
+            </a-tooltip>
-            <td>ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon></td>
+        </template>
-            <td>
+        <a-input v-model.trim="client.id"></a-input>
-                <a-form-item>
+    </a-form-item>
-                    <a-input v-model.trim="client.id" style="width: 250px"></a-input>
+    <a-form-item v-if="client.email && app.subSettings.enable">
-                </a-form-item>
+        <template slot="label">
-            </td>
+            <a-tooltip>
-        </tr>
+                <template slot="title">
-        <tr v-if="client.email && app.subSettings.enable">
+                    <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-            <td>Subscription
+                </template>
-                <a-tooltip>
+                Subscription
-                    <template slot="title">
+                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
-                        <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+            </a-tooltip>
-                    </template>
+        </template>
-                    <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
+        <a-input v-model.trim="client.subId"></a-input>
-                </a-tooltip>
+    </a-form-item>
-            </td>
+    <a-form-item v-if="client.email && app.tgBotEnable">
-            <td>
+        <template slot="label">
-                <a-form-item>
+            <a-tooltip>
-                    <a-input v-model.trim="client.subId" style="width: 250px"></a-input>
+                <template slot="title">
-                </a-form-item>
+                    <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-            </td>
+                </template>
-        </tr>
+                Telegram ID
-        <tr v-if="client.email && app.tgBotEnable">
+                <a-icon type="question-circle"></a-icon>
-            <td>Telegram ID
+            </a-tooltip>
-                <a-tooltip>
+        </template>
-                    <template slot="title">
+        <a-input v-model.trim="client.tgId"></a-input>
-                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+    </a-form-item>
-                    </template>
+    <a-form-item v-if="inbound.canEnableTlsFlow()" label='Flow'>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
+        <a-select v-model="client.flow" :dropdown-class-name="themeSwitcher.currentTheme">
-                </a-tooltip>
+            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-            </td>
+            <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-            <td>
+        </a-select>
-                <a-form-item>
+    </a-form-item>
-                    <a-input v-model.trim="client.tgId" style="width: 250px"></a-input>
+    <a-form-item>
-                </a-form-item>
+        <template slot="label">
-            </td>
+            <a-tooltip>
-        </tr>
+                <template slot="title">
-        <tr v-if="inbound.canEnableTlsFlow()">
+                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-            <td>Flow</td>
+                </template>
-            <td>
+                {{ i18n "pages.inbounds.totalFlow" }}(GB)
-                <a-form-item>
+                <a-icon type="question-circle"></a-icon>
-                    <a-select v-model="client.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+            </a-tooltip>
-                        <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+        </template>
-                        <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-                    </a-select>
+    </a-form-item>
-                </a-form-item>
+    <a-form-item v-if="isEdit && clientStats" label='{{ i18n "usage" }}'>
-            </td>
+        <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
-        </tr>
+            [[ sizeFormat(clientStats.up) ]] / 
-        <tr>
+            [[ sizeFormat(clientStats.down) ]]
-            <td>
+            ([[ sizeFormat(clientStats.up + clientStats.down) ]])
-                <span>{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+        </a-tag>
-                <a-tooltip>
+        <a-tooltip>
-                    <template slot="title">
+            <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+            <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)" v-if="client.email.length > 0"></a-icon>
-                    </template>
+        </a-tooltip>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
+    </a-form-item>
-                </a-tooltip>
+    <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-            </td>
+        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-            <td>
+    </a-form-item>
-                <a-form-item>
+    <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
-                    <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-                </a-form-item>
+    </a-form-item>
-            </td>
+    <a-form-item v-else>
-        </tr>
+        <template slot="label">
-        <tr v-if="isEdit && clientStats">
+            <a-tooltip>
-            <td>{{ i18n "usage" }}</td>
+                <template slot="title">{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</template>
-            <td>
+                {{ i18n "pages.inbounds.expireDate" }}
-                <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
+                <a-icon type="question-circle"></a-icon>
-                    [[ sizeFormat(clientStats.up) ]] / 
+            </a-tooltip>
-                    [[ sizeFormat(clientStats.down) ]]
+        </template>
-                    ([[ sizeFormat(clientStats.up + clientStats.down) ]])
+        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                </a-tag>
+                        :dropdown-class-name="themeSwitcher.currentTheme"
-                <a-tooltip>
+                        v-model="client._expiryTime"></a-date-picker>
-                    <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
+        <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
-                    <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)" v-if="client.email.length > 0"></a-icon>
+    </a-form-item>
-                </a-tooltip>
+    <a-form-item v-if="client.expiryTime != 0">
-            </td>
+        <template slot="label">
-        </tr>
+            <a-tooltip>
-        <tr>
+                <template slot="title">{{ i18n "pages.client.renewDesc" }}</template>
-            <td>{{ i18n "pages.client.delayedStart" }}</td>
+                {{ i18n "pages.client.renew" }}
-            <td>
+                <a-icon type="question-circle"></a-icon>
-                <a-form-item>
+            </a-tooltip>
-                    <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+        </template>
-                </a-form-item>
+        <a-input-number v-model.number="client.reset" :min="0"></a-input-number>
-            </td>
+</a-form-item>
        </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:ss' }" format="YYYY-MM-DD HH:mm:ss"
                                   :dropdown-class-name="themeSwitcher.currentTheme"
                                   v-model="client._expiryTime" style="width: 250px;"></a-date-picker>
                    <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
                </a-form-item>
            </td>
        </tr>
        <tr v-if="client.expiryTime != 0">
            <td>
                <span>{{ i18n "pages.client.renew" }}</span>
                <a-tooltip>
                    <template slot="title">
                        <span>{{ i18n "pages.client.renewDesc" }}</span>
                    </template>
                    <a-icon type="question-circle" theme="filled"></a-icon>
                </a-tooltip>
            </td>
            <td>
                <a-form-item>
                    <a-input-number v-model.number="client.reset" :min="0"></a-input-number>
                </a-form-item>
            </td>
        </tr>
    </table>
 </a-form>
 {{end}}
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -1,91 +1,63 @@
 {{define "form/inbound"}}
 <!-- base -->
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "enable" }}'>
-        <tr>
+        <a-switch v-model="dbInbound.enable"></a-switch>
-            <td>{{ i18n "enable" }}</td>
+    </a-form-item>
-            <td>
+    <a-form-item label='{{ i18n "remark" }}'>
-                <a-form-item>
+        <a-input v-model.trim="dbInbound.remark"></a-input>
-                    <a-switch v-model="dbInbound.enable"></a-switch>
+    </a-form-item>
-                </a-form-item>
+
-            </td>
+    <a-form-item label='{{ i18n "protocol" }}'>
-        </tr>
+        <a-select v-model="inbound.protocol" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
-        <tr>
+            <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
-            <td>{{ i18n "remark" }}</td>
+        </a-select>
-            <td>
+    </a-form-item>
-                <a-form-item>
+
-                    <a-input v-model.trim="dbInbound.remark" style="width: 250px;"></a-input>
+    <a-form-item>
-                </a-form-item>
+        <template slot="label">
-            </td>
+            <a-tooltip>
        </tr>
        <tr>
            <td>{{ i18n "protocol" }}</td>
            <td>
                <a-form-item>
                    <a-select v-model="inbound.protocol" style="width: 250px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
                        <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>
+                {{ i18n "monitor" }}
-                </a-tooltip>
+                <a-icon type="question-circle"></a-icon>
-            </td>
+            </a-tooltip>
-            <td>
+        </template>
-                <a-form-item>
+        <a-input v-model.trim="inbound.listen"></a-input>
-                    <a-input v-model.trim="inbound.listen" style="width: 250px;"></a-input>
+    </a-form-item>
-                </a-form-item>
+
-            </td>
+    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        </tr>
+        <a-input-number v-model.number="inbound.port"></a-input-number>
-        <tr>
+    </a-form-item>
-            <td>{{ i18n "pages.inbounds.port" }}</td>
+
-            <td>
+    <a-form-item>
-                <a-form-item>
+        <template slot="label">
-                    <a-input-number v-model.number="inbound.port"></a-input-number>
+            <a-tooltip>
-                </a-form-item>
+                <template slot="title">
-            </td>
+                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-        </tr>
+                </template>
-        <tr>
+                {{ i18n "pages.inbounds.totalFlow" }}(GB)
-            <td>
+                <a-icon type="question-circle"></a-icon>
-                <span>{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+            </a-tooltip>
-                <a-tooltip>
+        </template>
-                    <template slot="title">
+        <a-input-number v-model="dbInbound.totalGB" :min="0"></a-input-number>
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+    </a-form-item>
-                    </template>
+
-                    <a-icon type="question-circle" theme="filled"></a-icon>
+    <a-form-item>
-                </a-tooltip>
+        <template slot="label">
-            </td>
+            <a-tooltip>
-            <td>
+                <template slot="title">
-                <a-form-item>
+                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    <a-input-number v-model="dbInbound.totalGB" :min="0"></a-input-number>
+                </template>
-                </a-form-item>
+                {{ i18n "pages.inbounds.expireDate" }}
-            </td>
+                <a-icon type="question-circle"></a-icon>
-        </tr>
+            </a-tooltip>
-        <tr>
+        </template>
-            <td>
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                <span>{{ i18n "pages.inbounds.expireDate" }}</span>
+                :dropdown-class-name="themeSwitcher.currentTheme"
-                <a-tooltip>
+                v-model="dbInbound._expiryTime"></a-date-picker>
-                    <template slot="title">
+        </a-form-item>
                        <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:ss' }" format="YYYY-MM-DD HH:mm:ss"
                                   :dropdown-class-name="themeSwitcher.currentTheme"
                                   v-model="dbInbound._expiryTime" style="width: 250px;"></a-date-picker>
                </a-form-item>
            </td>
        </tr>
    </table>
 </a-form>
 <!-- vmess settings -->
--- a/web/html/xui/form/outbound.html
+++ b/web/html/xui/form/outbound.html
@@ -2,535 +2,298 @@
 <!-- base -->
 <a-tabs :active-key="outModal.activeKey"  style="padding: 0; background-color: transparent;" @change="(activeKey) => {outModal.toggleJson(activeKey == '2'); }">
 <a-tab-pane key="1" tab="Form">
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+        <a-form-item label='{{ i18n "protocol" }}'>
-        <tr>
+            <a-select v-model="outbound.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>{{ i18n "protocol" }}</td>
+                <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
-            <td>
+            </a-select>
-                <a-form-item>
+        </a-form-item>
-                    <a-select v-model="outbound.protocol" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}' has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
-                        <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
+            <a-input v-model.trim="outbound.tag" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
-                    </a-select>
+        </a-form-item>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>{{ i18n "pages.xray.outbound.tag" }}</td>
            <td>
                <a-form-item has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
                    <a-input v-model.trim="outbound.tag" style="width: 250px" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
                </a-form-item>
            </td>
        </tr>
 <!-- freedom settings-->
 <template v-if="outbound.protocol === Protocols.Freedom">
-        <tr>
+        <a-form-item label='Strategy'>
-            <td>Strategy</td>
+            <a-select
-            <td>
+            v-model="outbound.settings.domainStrategy"
-                <a-form-item>
+            :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select
+                <a-select-option v-for="s in outboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-                    v-model="outbound.settings.domainStrategy"
+            </a-select>
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-form-item>
-                        <a-select-option v-for="s in outboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
+        <a-form-item label='Fragment'>
-                    </a-select>
+            <a-switch
-                </a-form-item>
+                :checked="Object.keys(outbound.settings.fragment).length >0"
-            </td>
+                @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
-        </tr>
+            </a-switch>
-        <tr>
+        </a-form-item>
            <td>Fragment</td>
            <td>
                <a-form-item>
                    <a-switch
                        :checked="Object.keys(outbound.settings.fragment).length >0"
                        @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
                    </a-switch>
                </a-form-item>
            </td>
        </tr>
    <template v-if="Object.keys(outbound.settings.fragment).length >0">
-        <tr>
+        <a-form-item label='Packets'>
-            <td>Packets</td>
+            <a-select
-            <td>
+            v-model="outbound.settings.fragment.packets"
-                <a-form-item>
+            :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select
+                <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
-                    v-model="outbound.settings.fragment.packets"
+            </a-select>
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-form-item>
-                        <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
+        <a-form-item label='Length'>
-                    </a-select>
+            <a-input v-model.trim="outbound.settings.fragment.length"></a-input>
-                </a-form-item>
+        </a-form-item>
-            </td>
+        <a-form-item label='Interval'>
-        </tr>
+            <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
-        <tr>
+        </a-form-item>
            <td>Length</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="outbound.settings.fragment.length" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>Interval</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="outbound.settings.fragment.interval" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
    </template>
 </template>
 <!-- blackhole settings -->
 <template v-if="outbound.protocol === Protocols.Blackhole">
-        <tr>
+        <a-form-item label='Response Type'>
-            <td>Response Type</td>
+            <a-select
-            <td>
+            v-model="outbound.settings.type"
-                <a-form-item>
+            :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select
+                <a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s ]]</a-select-option>
-                    v-model="outbound.settings.type"
+            </a-select>
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-form-item>
                        <a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s ]]</a-select-option>
                    </a-select>
                </a-form-item>
            </td>
        </tr>
 </template>
 <!-- dns settings -->
 <template v-if="outbound.protocol === Protocols.DNS">
-        <tr>
+        <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
-            <td>{{ i18n "pages.inbounds.network" }}</td>
+            <a-select
-            <td>
+            v-model="outbound.settings.network"
-                <a-form-item>
+            :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select
+                <a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s ]]</a-select-option>
-                    v-model="outbound.settings.network"
+            </a-select>
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-form-item>
                        <a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s ]]</a-select-option>
                    </a-select>
                </a-form-item>
            </td>
        </tr>
 </template>
 <!-- Address + Port -->
 <template v-if="outbound.hasAddressPort()">
-        <tr>
+        <a-form-item label='{{ i18n "pages.inbounds.address" }}'>
-            <td>{{ i18n "pages.inbounds.address" }}</td>
+            <a-input v-model.trim="outbound.settings.address"></a-input>
-            <td>
+        </a-form-item>
-                <a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-                    <a-input v-model.trim="outbound.settings.address" style="width: 250px"></a-input>
+            <a-input-number v-model.number="outbound.settings.port" :min="1" :max="65532"></a-input-number>
-                </a-form-item>
+        </a-form-item>
            </td>
        </tr>
        <tr>
            <td>{{ i18n "pages.inbounds.port" }}</td>
            <td>
                <a-form-item>
                    <a-input-number v-model.number="outbound.settings.port" :min="1" :max="65532"></a-input-number>
                </a-form-item>
            </td>
        </tr>
 </template>
 <!-- Vnext (vless/vmess) settings -->
 <template v-if="[Protocols.VMess, Protocols.VLESS].includes(outbound.protocol)">
-        <tr>
+        <a-form-item label='ID'>
-            <td>ID</td>
+            <a-input v-model.trim="outbound.settings.id"></a-input>
-            <td>
+        </a-form-item>
                <a-form-item>
                    <a-input v-model.trim="outbound.settings.id" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
    <!-- vless settings -->
    <template v-if="outbound.canEnableTlsFlow()">
-        <tr>
+        <a-form-item label='Flow'>
-            <td>Flow</td>
+            <a-select v-model="outbound.settings.flow" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                <a-form-item>
+                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    <a-select v-model="outbound.settings.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+            </a-select>
-                        <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+        </a-form-item>
                        <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                    </a-select>
                </a-form-item>
            </td>
        </tr>
    </template>
 </template>
 <!-- Servers (trojan/shadowsocks/socks/http) settings -->
 <template v-if="outbound.hasServers()">
-        <tr v-if="outbound.hasUsername()">
+    <template v-if="outbound.hasUsername()">
-            <td>{{ i18n "username" }}</td>
+        <a-form-item label='{{ i18n "username" }}'>
-            <td>
+            <a-input v-model.trim="outbound.settings.user"></a-input>
-                <a-form-item>
+        </a-form-item>
-                    <a-input v-model.trim="outbound.settings.user" style="width: 250px"></a-input>
+        <a-form-item label='{{ i18n "password" }}'>
-                </a-form-item>
+            <a-input v-model.trim="outbound.settings.password"></a-input>
-            </td>
+        </a-form-item>
-        </tr>
+    </template>
        <tr>
            <td>{{ i18n "password" }}</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="outbound.settings.password" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
    <!-- shadowsocks -->
    <template v-if="outbound.protocol === Protocols.Shadowsocks">
-        <tr>
+        <a-form-item label='{{ i18n "encryption" }}'>
-            <td>{{ i18n "encryption" }}</td>
+            <a-select v-model="outbound.settings.method" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>
+                <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
-                <a-form-item>
+            </a-select>
-                    <a-select v-model="outbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-form-item>
-                        <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
+        <a-form-item label='UDP over TCP'>
-                    </a-select>
+            <a-switch v-model="outbound.settings.uot"></a-switch>
-                </a-form-item>
+        </a-form-item>
            </td>
        </tr>
        <tr>
            <td>UDP over TCP</td>
            <td>
                <a-form-item>
                    <a-switch v-model="outbound.settings.uot"></a-switch>
                </a-form-item>
            </td>
        </tr>
    </template>
 </template>
 <!-- stream settings -->
 <template v-if="outbound.canEnableStream()">
-        <tr>
+        <a-form-item label='{{ i18n "transmission" }}'>
-            <td>{{ i18n "transmission" }}</td>
+            <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
-            <td>
+                    :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-form-item>
+                <a-select-option value="tcp">TCP</a-select-option>
-                    <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
+                <a-select-option value="kcp">KCP</a-select-option>
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="ws">WebSocket</a-select-option>
-                        <a-select-option value="tcp">TCP</a-select-option>
+                <a-select-option value="http">HTTP2</a-select-option>
-                        <a-select-option value="kcp">KCP</a-select-option>
+                <a-select-option value="quic">QUIC</a-select-option>
-                        <a-select-option value="ws">WebSocket</a-select-option>
+                <a-select-option value="grpc">gRPC</a-select-option>
-                        <a-select-option value="http">HTTP2</a-select-option>
+            </a-select>
-                        <a-select-option value="quic">QUIC</a-select-option>
+        </a-form-item>
                        <a-select-option value="grpc">gRPC</a-select-option>
                    </a-select>
                </a-form-item>
            </td>
        </tr>
    <template v-if="outbound.stream.network === 'tcp'">
-        <tr>
+        <a-form-item label='HTTP {{ i18n "camouflage" }}'>
-            <td>http {{ i18n "camouflage" }}</td>
+            <a-switch
-            <td>
+                :checked="outbound.stream.tcp.type === 'http'"
-                <a-form-item>
+                @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'">
-                    <a-switch
+            </a-switch>
-                            :checked="outbound.stream.tcp.type === 'http'"
+        </a-form-item>
                            @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'">
                    </a-switch>
                </a-form-item>
            </td>
        </tr>
        <template v-if="outbound.stream.tcp.type == 'http'">
-        <tr>
+        <a-form-item label='{{ i18n "host" }}'>
-            <td>{{ i18n "host" }}</td>
+            <a-input v-model.trim="outbound.stream.tcp.host"></a-input>
-            <td>
+        </a-form-item> 
-                <a-form-item>
+        <a-form-item label='{{ i18n "path" }}'>
-                    <a-input style="width: 250px;" v-model.trim="outbound.stream.tcp.host"></a-input>
+            <a-input v-model.trim="outbound.stream.tcp.path"></a-input>
-                </a-form-item> 
+        </a-form-item> 
            </td>
        </tr>
        <tr>
            <td>{{ i18n "path" }}</td>
            <td>
                <a-form-item>
                    <a-input style="width: 250px;" v-model.trim="outbound.stream.tcp.path"></a-input>
                </a-form-item> 
            </td>
        </tr>
        </template>
    </template>
    <!-- kcp -->
    <template v-if="outbound.stream.network === 'kcp'">
-        <tr>
+        <a-form-item label='{{ i18n "camouflage" }}'>
-            <td>{{ i18n "camouflage" }}</td>
+            <a-select v-model="outbound.stream.kcp.type" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>
+                <a-select-option value="none">none (not camouflage)</a-select-option>
-                <a-form-item>
+                <a-select-option value="srtp">srtp (video call)</a-select-option>
-                    <a-select v-model="outbound.stream.kcp.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="utp">utp (BT download)</a-select-option>
-                        <a-select-option value="none">none (not camouflage)</a-select-option>
+                <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
-                        <a-select-option value="srtp">srtp (video call)</a-select-option>
+                <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
-                        <a-select-option value="utp">utp (BT download)</a-select-option>
+                <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
-                        <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+            </a-select>
-                        <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
+        </a-form-item>
-                        <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
+        <a-form-item label='{{ i18n "password" }}'>
-                    </a-select>
+            <a-input v-model="outbound.stream.kcp.seed"></a-input>
-                </a-form-item>
+        </a-form-item>
-            </td>
+        <a-form-item label='MTU'>
-        </tr>
+            <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
-        <tr>
+        </a-form-item>
-            <td>{{ i18n "password" }}</td>
+        <a-form-item label='TTI (ms)'>
-            <td>
+            <a-input-number v-model.number="outbound.stream.kcp.tti"></a-input-number>
-                <a-form-item>
+        </a-form-item>
-                    <a-input v-model="outbound.stream.kcp.seed" style="width: 250px;"></a-input>
+        <a-form-item label='Uplink Capacity (Mb/s)'>
-                </a-form-item>
+            <a-input-number v-model.number="outbound.stream.kcp.upCap"></a-input-number>
-            </td>
+        </a-form-item> 
-        </tr>
+        <a-form-item label='Downlink Capacity (Mb/s)'>
-        <tr>
+            <a-input-number v-model.number="outbound.stream.kcp.downCap"></a-input-number>
-            <td>mtu</td>
+        </a-form-item>
-            <td>
+        <a-form-item label='Congestion'>
-                <a-form-item>
+            <a-switch v-model="outbound.stream.kcp.congestion"></a-switch>
-                    <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
+        </a-form-item>
-                </a-form-item>
+        <a-form-item label='Read Buffer Size (MB)'>
-            </td>
+            <a-input-number v-model.number="outbound.stream.kcp.readBuffer"></a-input-number>
-        </tr>
+        </a-form-item>
-        <tr>
+        <a-form-item label='Write Buffer Size (MB)'>
-            <td>tti (ms)</td>
+            <a-input-number v-model.number="outbound.stream.kcp.writeBuffer"></a-input-number>
-            <td>
+        </a-form-item>
                <a-form-item>
                    <a-input-number v-model.number="outbound.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="outbound.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="outbound.stream.kcp.downCap"></a-input-number>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>congestion</td>
            <td>
                <a-form-item>
                    <a-switch v-model="outbound.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="outbound.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="outbound.stream.kcp.writeBuffer"></a-input-number>
                </a-form-item>
            </td>
        </tr>
    </template>
    <!-- ws -->
    <template v-if="outbound.stream.network === 'ws'">
-        <tr>
+        <a-form-item label='{{ i18n "host" }}'>
-            <td>{{ i18n "host" }}</td>
+            <a-input v-model="outbound.stream.ws.host"></a-input>
-            <td><a-form-item><a-input style="width: 250px" v-model="outbound.stream.ws.host"></a-input></a-form-item></td>
+        </a-form-item>
-        </tr>
+        <a-form-item label='{{ i18n "path" }}'>
-        <tr>
+            <a-form-item><a-input v-model.trim="outbound.stream.ws.path"></a-input>
-            <td>{{ i18n "path" }}</td>
+        </a-form-item>
            <td><a-form-item><a-input style="width: 250px;" v-model.trim="outbound.stream.ws.path"></a-input></a-form-item></td>
        </tr>
    </template>
    <!-- http -->
    <template v-if="outbound.stream.network === 'http'">
-        <tr>
+        <a-form-item label='{{ i18n "host" }}'>
-            <td>{{ i18n "host" }}</td>
+            <a-input v-model.trim="outbound.stream.http.host"></a-input>
-            <td>
+        </a-form-item>
-                <a-form-item>
+        <a-form-item label='{{ i18n "path" }}'>
-                    <a-input v-model.trim="outbound.stream.http.host" style="width: 250px;"></a-input>
+            <a-input v-model.trim="outbound.stream.http.path"></a-input>
-                </a-form-item>
+        </a-form-item>
            </td>
        </tr>
        <tr>
            <td>{{ i18n "path" }}</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="outbound.stream.http.path" style="width: 250px;"></a-input>
                </a-form-item>
            </td>
        </tr>
    </template>
    <!-- quic -->
    <template v-if="outbound.stream.network === 'quic'">
-        <tr>
+        <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
-            <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
+            <a-select v-model="outbound.stream.quic.security" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>
+                <a-select-option value="none">none</a-select-option>
-                <a-form-item>
+                <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
-                    <a-select v-model="outbound.stream.quic.security" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
-                        <a-select-option value="none">none</a-select-option>
+            </a-select>
-                        <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
+        </a-form-item>
-                        <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
+        <a-form-item label='{{ i18n "password" }}'>
-                    </a-select>
+            <a-input v-model.trim="outbound.stream.quic.key"></a-input>
-                </a-form-item>
+        </a-form-item> 
-            </td>
+        <a-form-item label='{{ i18n "camouflage" }}'>
-        </tr>
+            <a-select v-model="outbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
-        <tr>
+                <a-select-option value="none">none (not camouflage)</a-select-option>
-            <td>{{ i18n "password" }}</td>
+                <a-select-option value="srtp">srtp (video call)</a-select-option>
-            <td>
+                <a-select-option value="utp">utp (BT download)</a-select-option>
-                <a-form-item>
+                <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
-                    <a-input v-model.trim="outbound.stream.quic.key" style="width: 250px;"></a-input>
+                <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
-                </a-form-item> 
+                <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
-            </td>
+            </a-select>
-        </tr>
+        </a-form-item>
        <tr>
            <td>{{ i18n "camouflage" }}</td>
            <td>
                <a-form-item>
                    <a-select v-model="outbound.stream.quic.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
                        <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>
    </template>
    <!-- grpc -->
    <template v-if="outbound.stream.network === 'grpc'">
-        <tr>
+        <a-form-item label='Service Name'>
-            <td>serviceName</td>
+            <a-input v-model.trim="outbound.stream.grpc.serviceName"></a-input>
-            <td>
+        </a-form-item>
-                <a-form-item>
+        <a-form-item label='MultiMode'>
-                    <a-input v-model.trim="outbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
+            <a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
-                </a-form-item>
+        </a-form-item>
            </td>
        </tr>
        <tr>
            <td>MultiMode</td>
            <td>
                <a-form-item>
                    <a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
                </a-form-item>
            </td>
        </tr>
    </template>
 </template>
 <!-- tls settings -->
 <template v-if="outbound.canEnableTls()">
-        <tr>
+        <a-form-item label='{{ i18n "security" }}'>
-            <td>{{ i18n "security" }}</td>
+            <a-radio-group v-model="outbound.stream.security" button-style="solid">
-            <td>
+                <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-                <a-form-item>
+                <a-radio-button value="tls">TLS</a-radio-button>
-                    <a-radio-group v-model="outbound.stream.security" button-style="solid">
+                <a-radio-button v-if="outbound.canEnableReality()" value="reality">Reality</a-radio-button>
-                        <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
+            </a-radio-group>
-                        <a-radio-button value="tls">TLS</a-radio-button>
+        </a-form-item>
                        <a-radio-button v-if="outbound.canEnableReality()" value="reality">Reality</a-radio-button>
                    </a-radio-group>
                </a-form-item>
            </td>
        </tr>
        <template v-if="outbound.stream.isTls">
-            <tr>
+            <a-form-item label="SNI" placeholder="Server Name Indication">
-                <td>SNI</td>
+                <a-input v-model.trim="outbound.stream.tls.serverName"></a-input>
-                <td>
+            </a-form-item>
-                    <a-form-item placeholder="Server Name Indication">
+            <a-form-item label="uTLS">
-                        <a-input v-model.trim="outbound.stream.tls.serverName" style="width: 250px"></a-input>
+                <a-select v-model="outbound.stream.tls.fingerprint"
-                    </a-form-item>                
+                            :dropdown-class-name="themeSwitcher.currentTheme">
-                </td>
+                    <a-select-option value=''>None</a-select-option>
-            </tr>
+                    <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-            <tr>
+                </a-select>
-                <td>uTLS</td>
+            </a-form-item>
-                <td>
+            <a-form-item label="ALPN">
-                    <a-form-item>
+                <a-select
-                        <a-select v-model="outbound.stream.tls.fingerprint"
+                    mode="multiple"
-                                    style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+                   
-                            <a-select-option value=''>None</a-select-option>
+                    :dropdown-class-name="themeSwitcher.currentTheme"
-                            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+                    v-model="outbound.stream.tls.alpn">
-                        </a-select>
+                    <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-                    </a-form-item>
+                </a-select>
-                </td>
+            </a-form-item>
-            </tr>
+            <a-form-item label="Allow Insecure">
-            <tr>
+                <a-switch v-model="outbound.stream.tls.allowInsecure"></a-switch>
-                <td>ALPN</td>
+            </a-form-item>
                <td>
                    <a-form-item>
                        <a-select
                            mode="multiple"
                            style="width: 250px"
                            :dropdown-class-name="themeSwitcher.currentTheme"
                            v-model="outbound.stream.tls.alpn">
                            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
                        </a-select>
                    </a-form-item>
                </td>
            </tr>
            <tr>
                <td>Allow insecure</td>
                <td>
                    <a-form-item>
                        <a-switch v-model="outbound.stream.tls.allowInsecure"></a-switch>
                    </a-form-item>
                </td>
            </tr>
        </template>
        <!-- reality settings -->
        <template v-if="outbound.stream.isReality">
-                <tr>
+                <a-form-item label='{{ i18n "domainName" }}'>
-                    <td>{{ i18n "domainName" }}</td>
+                    <a-input v-model.trim="outbound.stream.reality.serverName"></a-input>
-                    <td>
+                </a-form-item>
-                        <a-form-item>
+                <a-form-item label="uTLS">
-                            <a-input v-model.trim="outbound.stream.reality.serverName" style="width: 250px"></a-input>
+                    <a-select v-model="outbound.stream.reality.fingerprint"
-                        </a-form-item>
+                                :dropdown-class-name="themeSwitcher.currentTheme">
-                    </td>
+                        <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                </tr>
+                    </a-select>
-                <tr>
+                </a-form-item>
-                    <td>uTLS</td>
+                <a-form-item label="Short IDs">
-                    <td>
+                    <a-input v-model.trim="outbound.stream.reality.shortId" style="width:250px"></a-input>
-                        <a-form-item>
+                </a-form-item>
-                            <a-select v-model="outbound.stream.reality.fingerprint"
+                <a-form-item label="SpiderX">
-                                      style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-input v-model.trim="outbound.stream.reality.spiderX" style="width:250px"></a-input>
-                                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+                </a-form-item>
-                            </a-select>
+                <a-form-item label="Public Key">
-                        </a-form-item>
+                            <a-input v-model.trim="outbound.stream.reality.publicKey"></a-input>
-                    </td>
+                </a-form-item>
                </tr>
                <tr>
                    <td>Short Id</td>
                    <td>
                        <a-form-item>
                            <a-input v-model.trim="outbound.stream.reality.shortId" style="width:250px"></a-input>
                        </a-form-item>
                    </td>
                </tr>
                <tr>
                    <td>SpiderX</td>
                    <td>
                        <a-form-item>
                            <a-input v-model.trim="outbound.stream.reality.spiderX" style="width:250px"></a-input>
                        </a-form-item>
                    </td>
                </tr>
                <tr>
                    <td>Public Key</td>
                    <td>
                        <a-form-item>
                            <a-input v-model.trim="outbound.stream.reality.publicKey" style="width: 250px"></a-input>
                        </a-form-item>
                    </td>
                </tr>
        </template>
 </template>
    </table>
 </a-form>
 </a-tab-pane>
 <a-tab-pane key="2" tab="JSON" force-render="true">
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -1,42 +1,20 @@
 {{define "form/dokodemo"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "pages.inbounds.targetAddress"}}'>
-        <tr>
+        <a-input v-model.trim="inbound.settings.address"></a-input>
-            <td>{{ i18n "pages.inbounds.targetAddress"}}</td>
+    </a-form-item>
-            <td>
+    <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
-                <a-form-item>
+        <a-input-number v-model.number="inbound.settings.port"></a-input-number>
-                    <a-input v-model.trim="inbound.settings.address"></a-input>
+    </a-form-item>
-                </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-            </td>
+        <a-select v-model="inbound.settings.network" :dropdown-class-name="themeSwitcher.currentTheme">
-        </tr>
+            <a-select-option value="tcp,udp">TCP+UDP</a-select-option>
-        <tr>
+            <a-select-option value="tcp">TCP</a-select-option>
-            <td>{{ i18n "pages.inbounds.destinationPort"}}</td>
+            <a-select-option value="udp">UDP</a-select-option>
-            <td>
+        </a-select>
-                <a-form-item>
+    </a-form-item>           
-                    <a-input-number v-model.number="inbound.settings.port"></a-input-number>
+    <a-form-item label='Follow Redirect'>
-                </a-form-item>
+        <a-switch v-model="inbound.settings.followRedirect"></a-switch>
-            </td>
+    </a-form-item>
        </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="themeSwitcher.currentTheme">
                        <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}}
--- a/web/html/xui/form/protocol/http.html
+++ b/web/html/xui/form/protocol/http.html
@@ -1,5 +1,5 @@
 {{define "form/http"}}
-<a-form layout="inline">
+<a-form>
        <table style="width: 100%; text-align: center; margin-bottom: 10px;">
            <tr>
                <td width="45%">{{ i18n "username" }}</td>
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -1,6 +1,5 @@
 {{define "form/shadowsocks"}}
-<a-form layout="inline">
+<template v-if="inbound.isSSMultiUser">
    <template v-if="inbound.isSSMultiUser">
    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.shadowsockses.slice(0,1)" v-if="!isEdit">  
        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
            {{template "form/client"}}
@@ -20,40 +19,39 @@
            </table>
        </a-collapse-panel>
    </a-collapse>
-    </template>
+</template>
-    <table width="100%" class="ant-table-tbody">
+<table width="100%" class="ant-table-tbody">
-        <tr>
+    <tr>
-            <td>{{ i18n "encryption" }}</td>
+        <td>{{ i18n "encryption" }}</td>
-            <td>
+        <td>
-                <a-form-item>
+            <a-form-item>
-                    <a-select v-model="inbound.settings.method" style="width: 250px;" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select v-model="inbound.settings.method" style="width: 250px;" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
+                    <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
-                    </a-select>
+                </a-select>
-                </a-form-item>
+            </a-form-item>
-            </td>
+        </td>
-        </tr>
+    </tr>
-        <tr v-if="inbound.isSS2022">
+    <tr v-if="inbound.isSS2022">
-            <td>{{ i18n "password" }}
+        <td>{{ i18n "password" }}
-                <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
+            <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-            </td>
+        </td>
-            <td>
+        <td>
-                <a-form-item>
+            <a-form-item>
-                    <a-input v-model.trim="inbound.settings.password" style="width: 250px"></a-input>
+                <a-input v-model.trim="inbound.settings.password" style="width: 250px"></a-input>
-                </a-form-item>
+            </a-form-item>
-            </td>
+        </td>
-        </tr>
+    </tr>
-        <tr>
+    <tr>
-            <td>{{ i18n "pages.inbounds.network" }}</td>
+        <td>{{ i18n "pages.inbounds.network" }}</td>
-            <td>
+        <td>
-                <a-form-item>
+            <a-form-item>
-                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="tcp,udp">tcp+udp</a-select-option>
+                    <a-select-option value="tcp,udp">TCP+UDP</a-select-option>
-                        <a-select-option value="tcp">tcp</a-select-option>
+                    <a-select-option value="tcp">TCP</a-select-option>
-                        <a-select-option value="udp">udp</a-select-option>
+                    <a-select-option value="udp">UDP</a-select-option>
-                    </a-select>
+                </a-select>
-                </a-form-item>
+            </a-form-item>
-            </td>
+        </td>
-        </tr>
+    </tr>
-    </table>
+</table>
 </a-form>
 {{end}}
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -1,52 +1,33 @@
 {{define "form/socks"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
-        <tr>
+        <a-switch v-model="inbound.settings.udp"></a-switch>
-            <td style="width: 30%;">{{ i18n "password" }}</td>
+    </a-form-item>
-            <td>
+    <a-form-item label="IP" v-if="inbound.settings.udp">
-                <a-form-item>
+        <a-input v-model.trim="inbound.settings.ip"></a-input>
-                    <a-switch :checked="inbound.settings.auth === 'password'"
+    </a-form-item>
-                              @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
+    <a-form-item label='{{ i18n "password" }}'>
-                </a-form-item>
+        <a-switch :checked="inbound.settings.auth === 'password'"
-            </td>
+        @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
-        </tr>
+    </a-form-item>
-        <tr v-if="inbound.settings.auth === 'password'">
+    <template v-if="inbound.settings.auth === 'password'">
-            <td colspan="2">
+        <table style="width: 100%; text-align: center; margin-bottom: 10px;">
-                <table style="width: 100%; text-align: center; margin-bottom: 10px;">
+            <tr>
-                    <tr>
+                <td width="45%">{{ i18n "username" }}</td>
-                        <td width="45%">{{ i18n "username" }}</td>
+                <td width="45%">{{ i18n "password" }}</td>
-                        <td width="45%">{{ i18n "password" }}</td>
+                <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())">+</a-button></td>
-                        <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())">+</a-button></td>
+            </tr>
-                    </tr>
+        </table>
-                </table>
+        <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
-                <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" }}'>
-                    <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
+                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-                        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+            </a-input>
-                    </a-input>
+            <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-                    <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
+                <template slot="addonAfter">
-                        <template slot="addonAfter">
+                    <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
-                            <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
+                </template>
-                        </template>
+            </a-input>
-                    </a-input>
+        </a-input-group>
-                </a-input-group>
+    </template>
            </td>
        </tr>
        <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 v-if="inbound.settings.udp">
            <td>IP</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="inbound.settings.ip"></a-input>
                </a-form-item>
            </td>
        </tr>
    </table>
 </a-form>
 {{end}}
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -1,5 +1,4 @@
 {{define "form/trojan"}}
 <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" }}'>
        {{template "form/client"}}
@@ -32,54 +31,27 @@
    </a-form>
    <!-- trojan fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
        <a-divider style="margin:0;">
-            fallback[[ index + 1 ]]
+            Fallback[[ index + 1 ]]
            <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
        </a-divider>
-        <table width="100%">
+        <a-form-item label='Name'>
-            <tr>
+            <a-input v-model="fallback.name"></a-input>
-                <td style="width: 20%;">Name</td>
+        </a-form-item>            
-                <td>
+        <a-form-item label='ALPN'>
-                    <a-form-item>
+            <a-input v-model="fallback.alpn"></a-input>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
+        </a-form-item>
-                    </a-form-item>            
+        <a-form-item label='Path'>
-                </td>
+            <a-input v-model="fallback.path"></a-input>
-            </tr>
+        </a-form-item>
-            <tr>
+        <a-form-item label='Dest'>
-                <td>Alpn</td>
+            <a-input v-model="fallback.dest"></a-input>
-                <td>
+        </a-form-item>
-                    <a-form-item>
+        <a-form-item label='xVer'>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-                    </a-form-item>
+        </a-form-item>
                </td>
            </tr>
            <tr>
                <td>Path</td>
                <td>
                    <a-form-item>
                        <a-input v-model="fallback.path" style="width: 250px"></a-input>
                    </a-form-item>
                </td>
            </tr>
            <tr>
                <td>Dest</td>
                <td>
                    <a-form-item>
                        <a-input v-model="fallback.dest" style="width: 250px"></a-input>
                    </a-form-item>
                </td>
            </tr>
            <tr>
                <td>xVer</td>
                <td>
                    <a-form-item>
                        <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
                    </a-form-item>
                </td>
            </tr>
    </table>
    </a-form>
    <a-divider style="margin:0;"></a-divider>
 </template>
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -1,5 +1,4 @@
 {{define "form/vless"}}
 <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" }}'>
        {{template "form/client"}}
@@ -34,54 +33,27 @@
    </a-form>
    <!-- vless fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
        <a-divider style="margin:0;">
-            fallback[[ index + 1 ]]
+            Fallback[[ index + 1 ]]
            <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
        </a-divider>
-        <table width="100%">
+        <a-form-item label='Name'>
-            <tr>
+            <a-input v-model="fallback.name"></a-input>
-                <td style="width: 20%;">Name</td>
+        </a-form-item>            
-                <td>
+        <a-form-item label='ALPN'>
-                    <a-form-item>
+            <a-input v-model="fallback.alpn"></a-input>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
+        </a-form-item>
-                    </a-form-item>            
+        <a-form-item label='Path'>
-                </td>
+            <a-input v-model="fallback.path"></a-input>
-            </tr>
+        </a-form-item>
-            <tr>
+        <a-form-item label='Dest'>
-                <td>Alpn</td>
+            <a-input v-model="fallback.dest"></a-input>
-                <td>
+        </a-form-item>
-                    <a-form-item>
+        <a-form-item label='xVer'>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-                    </a-form-item>
+        </a-form-item>
                </td>
            </tr>
            <tr>
                <td>Path</td>
                <td>
                    <a-form-item>
                        <a-input v-model="fallback.path" style="width: 250px"></a-input>
                    </a-form-item>
                </td>
            </tr>
            <tr>
                <td>Dest</td>
                <td>
                    <a-form-item>
                        <a-input v-model="fallback.dest" style="width: 250px"></a-input>
                    </a-form-item>
                </td>
            </tr>
            <tr>
                <td>xVer</td>
                <td>
                    <a-form-item>
                        <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
                    </a-form-item>
                </td>
            </tr>
    </table>
    </a-form>
    <a-divider style="margin:0;"></a-divider>
 </template>
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -1,5 +1,4 @@
 {{define "form/vmess"}}
 <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" }}'>
        {{template "form/client"}}
--- a/web/html/xui/form/sniffing.html
+++ b/web/html/xui/form/sniffing.html
@@ -1,19 +1,19 @@
 {{define "form/sniffing"}}
 <a-divider style="margin:0;"></a-divider>
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
  <a-form-item>
    <span slot="label">
-        sniffing
+        Sniffing
        <a-tooltip>
            <template slot="title">
                <span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
            </template>
-            <a-icon type="question-circle" theme="filled"></a-icon>
+            <a-icon type="question-circle"></a-icon>
        </a-tooltip>
    </span>
    <a-switch v-model="inbound.sniffing.enabled"></a-switch>
  </a-form-item>
-  <a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
    <a-checkbox-group v-model="inbound.sniffing.destOverride" v-if="inbound.sniffing.enabled">
      <a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
    </a-checkbox-group>
--- a/web/html/xui/form/stream/external_proxy.html
+++ b/web/html/xui/form/stream/external_proxy.html
@@ -1,32 +1,26 @@
 {{define "form/externalProxy"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
    <a-divider style="margin:0;"></a-divider>
    <a-form-item label="External Proxy">
-    <a-switch v-model="externalProxy"></a-switch>
+        <a-switch v-model="externalProxy"></a-switch>
-    <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
+        <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
    </a-form-item>
-    <table width="100%" class="ant-table-tbody" v-if="externalProxy" style="margin-bottom:5px">
+    <a-input-group style="margin: 5px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
-        <tr style="line-height: 40px;">
+        <template>
-            <td width="100%">
+            <a-tooltip title="Force TLS">
-                <a-input-group style="margin: 0 5px;" compact v-for="(row, index) in inbound.stream.externalProxy">
+                <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <template>
+                    <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
-                        <a-tooltip title="Force TLS">
+                    <a-select-option value="none">{{ i18n "none" }}</a-select-option>
-                            <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option value="tls">TLS</a-select-option>
-                                <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
+                </a-select>
-                                <a-select-option value="none">{{ i18n "none" }}</a-select-option>
+            </a-tooltip>
-                                <a-select-option value="tls">TLS</a-select-option>
+        </template>
-                            </a-select>
+        <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
-                        </a-tooltip>
+        <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
-                    </template>
+            <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
-                    <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
+        </a-tooltip>
-                    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
+        <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
-                        <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
+        <a-button style="width: 10%; margin: 0px" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
-                    </a-tooltip>
+    </a-input-group>
                    <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
                    <a-button style="width: 10%; margin: 0px" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
                </a-input-group>
            </td>
        </tr>
    </table>
 </a-form>
 {{end}}
--- a/web/html/xui/form/stream/stream_grpc.html
+++ b/web/html/xui/form/stream/stream_grpc.html
@@ -1,22 +1,10 @@
 {{define "form/streamGRPC"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label="Service Name">
-        <tr>
+        <a-input v-model.trim="inbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
-            <td>serviceName</td>
+    </a-form-item>
-            <td>
+    <a-form-item label="MultiMode">
-                <a-form-item>
+        <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
-                    <a-input v-model.trim="inbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
+    </a-form-item>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>MultiMode</td>
            <td>
                <a-form-item>
                    <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
                </a-form-item>
            </td>
        </tr>
    </table>
 </a-form>
 {{end}}
--- a/web/html/xui/form/stream/stream_http.html
+++ b/web/html/xui/form/stream/stream_http.html
@@ -1,24 +1,19 @@
 {{define "form/streamHTTP"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "path" }}'>
-        <tr>
+        <a-input v-model.trim="inbound.stream.http.path"></a-input>
-            <td>{{ i18n "path" }}</td>
+    </a-form-item>
-            <td>
+    <a-form-item>
-                <a-form-item>
+        <template slot="label">{{ i18n "host" }}
-                    <a-input v-model.trim="inbound.stream.http.path" style="width: 250px;"></a-input>
+            <a-button size="small" @click="inbound.stream.http.addHost()">+</a-button>
-                </a-form-item>
+        </template>
-            </td>
+        <template v-for="(host, index) in inbound.stream.http.host">
-        </tr>
+            <a-input v-model.trim="inbound.stream.http.host[index]">
-        <tr>
+                <a-button size="small" slot="addonAfter"
-            <td>host</td>
+                @click="inbound.stream.http.removeHost(index)"
-            <td>
+                v-if="inbound.stream.http.host.length>1">-</a-button>
-                <a-form-item>
+            </a-input>
-                    <a-row v-for="(host, index) in inbound.stream.http.host">
+        </template>
-                        <a-input v-model.trim="inbound.stream.http.host[index]" style="width: 250px;"></a-input>
+    </a-form-item>
                    </a-row>
                </a-form-item>
            </td>
        </tr>
    </table>
 </a-form>
 {{end}}
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -1,85 +1,38 @@
 {{define "form/streamKCP"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "camouflage" }}'>
-        <tr>
+        <a-select v-model="inbound.stream.kcp.type" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>{{ i18n "camouflage" }}</td>
+            <a-select-option value="none">none (not camouflage)</a-select-option>
-            <td>
+            <a-select-option value="srtp">srtp (video call)</a-select-option>
-                <a-form-item>
+            <a-select-option value="utp">utp (BT download)</a-select-option>
-                    <a-select v-model="inbound.stream.kcp.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
-                        <a-select-option value="none">none (not camouflage)</a-select-option>
+            <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
-                        <a-select-option value="srtp">srtp (video call)</a-select-option>
+            <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
-                        <a-select-option value="utp">utp (BT download)</a-select-option>
+        </a-select>
-                        <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+    </a-form-item>
-                        <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
+    <a-form-item label='{{ i18n "password" }}'>
-                        <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
+        <a-input v-model="inbound.stream.kcp.seed"></a-input>
-                    </a-select>
+    </a-form-item>
-                </a-form-item>
+    <a-form-item label='MTU'>
-            </td>
+        <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
-        </tr>
+    </a-form-item>
-        <tr>
+    <a-form-item label='TTI (ms)'>
-            <td>{{ i18n "password" }}</td>
+        <a-input-number v-model.number="inbound.stream.kcp.tti"></a-input-number>
-            <td>
+    </a-form-item>
-                <a-form-item>
+    <a-form-item label='Uplink (Mb/s)'>
-                    <a-input v-model="inbound.stream.kcp.seed" style="width: 250px;"></a-input>
+        <a-input-number v-model.number="inbound.stream.kcp.upCap"></a-input-number>
-                </a-form-item>
+    </a-form-item> 
-            </td>
+    <a-form-item label='Downlink (Mb/s)'>
-        </tr>
+        <a-input-number v-model.number="inbound.stream.kcp.downCap"></a-input-number>
-        <tr>
+    </a-form-item>
-            <td>mtu</td>
+    <a-form-item label='Congestion'>
-            <td>
+        <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
-                <a-form-item>
+    </a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
+    <a-form-item label='Read buffer (MB)'>
-                </a-form-item>
+        <a-input-number v-model.number="inbound.stream.kcp.readBuffer"></a-input-number>
-            </td>
+    </a-form-item>
-        </tr>
+    <a-form-item label='Write buffer (MB)'>
-        <tr>
+        <a-input-number v-model.number="inbound.stream.kcp.writeBuffer"></a-input-number>
-            <td>tti (ms)</td>
+    </a-form-item>
            <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}}
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -1,41 +1,24 @@
 {{define "form/streamQUIC"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
-        <tr>
+        <a-select v-model="inbound.stream.quic.security" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
+            <a-select-option value="none">none</a-select-option>
-            <td>
+            <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
-                <a-form-item>
+            <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
-                    <a-select v-model="inbound.stream.quic.security" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-select>
-                        <a-select-option value="none">none</a-select-option>
+    </a-form-item>
-                        <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
+    <a-form-item label='{{ i18n "password" }}'>
-                        <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
+        <a-input v-model.trim="inbound.stream.quic.key"></a-input>
-                    </a-select>
+    </a-form-item> 
-                </a-form-item>
+    <a-form-item label='{{ i18n "camouflage" }}'>
-            </td>
+        <a-select v-model="inbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
-        </tr>
+            <a-select-option value="none">none (not camouflage)</a-select-option>
-        <tr>
+            <a-select-option value="srtp">srtp (video call)</a-select-option>
-            <td>{{ i18n "password" }}</td>
+            <a-select-option value="utp">utp (BT download)</a-select-option>
-            <td>
+            <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
-                <a-form-item>
+            <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
-                    <a-input v-model.trim="inbound.stream.quic.key" style="width: 250px;"></a-input>
+            <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
-                </a-form-item> 
+        </a-select>
-            </td>
+    </a-form-item>
        </tr>
        <tr>
            <td>{{ i18n "camouflage" }}</td>
            <td>
                <a-form-item>
                    <a-select v-model="inbound.stream.quic.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
                        <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}}
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -1,9 +1,9 @@
 {{define "form/streamSettings"}}
 <!-- select stream network -->
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
    <a-form-item label="{{ i18n "transmission" }}">
        <a-select v-model="inbound.stream.network" @change="streamNetworkChange"
-            style="width: 150px;" :dropdown-class-name="themeSwitcher.currentTheme">
+            :dropdown-class-name="themeSwitcher.currentTheme">
            <a-select-option value="tcp">TCP</a-select-option>
            <a-select-option value="kcp">KCP</a-select-option>
            <a-select-option value="ws">WebSocket</a-select-option>
--- a/web/html/xui/form/stream/stream_sockopt.html
+++ b/web/html/xui/form/stream/stream_sockopt.html
@@ -1,46 +1,26 @@
 {{define "form/streamSockopt"}}
 <a-divider style="margin:0;"></a-divider>
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
    <a-form-item label="Transparent Proxy">
        <a-switch v-model="inbound.stream.sockoptSwitch"></a-switch>
    </a-form-item>
-    <table width="100%" class="ant-table-tbody" v-if="inbound.stream.sockoptSwitch">
+    <template v-if="inbound.stream.sockoptSwitch">
-        <tr>
+        <a-form-item label="Accept Proxy Protocol">
-            <td>Accept Proxy Protocol</td>
+            <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
-            <td>
+        </a-form-item>
-                <a-form-item>
+        <a-form-item label="TCP FastOpen">
-                    <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
+            <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
-                </a-form-item>
+        </a-form-item>
-            </td>
+        <a-form-item label="Route Mark">
-        </tr>
+            <a-input-number v-model="inbound.stream.sockopt.mark" :min="0"></a-input-number>
-        <tr>
+        </a-form-item>
-            <td>TCP FastOpen</td>
+        <a-form-item label="T-Proxy">
-            <td>
+            <a-select v-model="inbound.stream.sockopt.tproxy" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-form-item>
+                <a-select-option value="off">OFF</a-select-option>
-                    <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
+                <a-select-option value="redirect">Redirect</a-select-option>
-                </a-form-item>
+                <a-select-option value="tproxy">T-Proxy</a-select-option>
-            </td>
+            </a-select>
-        </tr>
+        </a-form-item>
-        <tr>
+    </template>
            <td>Route Mark</td>
            <td>
                <a-form-item>
                    <a-input-number v-model="inbound.stream.sockopt.mark" :min="0"></a-input-number>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>T-Proxy</td>
            <td>
                <a-form-item>
                    <a-select v-model="inbound.stream.sockopt.tproxy" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
                        <a-select-option value="off">OFF</a-select-option>
                        <a-select-option value="redirect">Redirect</a-select-option>
                        <a-select-option value="tproxy">T-Proxy</a-select-option>
                    </a-select>
                </a-form-item>
            </td>
        </tr>
    </table>
 </a-form>
 {{end}}
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -1,113 +1,76 @@
 {{define "form/streamTCP"}}
 <!-- tcp type -->
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
    <a-form-item label="Accept Proxy Protocol" v-if="inbound.canEnableTls()">
        <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
    </a-form-item>
-    <a-form-item label="http {{ i18n "camouflage" }}">
+    <a-form-item label="HTTP {{ i18n "camouflage" }}">
        <a-switch
-                :checked="inbound.stream.tcp.type === 'http'"
+            :checked="inbound.stream.tcp.type === 'http'"
-                @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
+            @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
        </a-switch>
    </a-form-item>
 </a-form>
 <!-- tcp request -->
-<a-form v-if="inbound.stream.tcp.type === 'http'" layout="inline">
+<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}'>
-        <tr>
+        <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
-            <td>{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}</td>
+    </a-form-item>
-            <td>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestMethod" }}'>
-                <a-form-item>
+                    <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
-                    <a-input v-model.trim="inbound.stream.tcp.request.version" style="width: 200px;"></a-input>
+    </a-form-item>
-                </a-form-item>
+    <a-form-item>
-            </td>
+        <template slot="label">{{ i18n "pages.inbounds.stream.tcp.requestPath" }}
-        </tr>
+            <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
-        <tr>
+        </template>
-            <td>{{ i18n "pages.inbounds.stream.tcp.requestMethod" }}</td>
+        <template v-for="(path, index) in inbound.stream.tcp.request.path">
-            <td>
+            <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
-                <a-form-item>
+                <a-button size="small" slot="addonAfter"
-                    <a-input v-model.trim="inbound.stream.tcp.request.method" style="width: 200px;"></a-input>
+                @click="inbound.stream.tcp.request.removePath(index)"
-                </a-form-item>
+                v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
-            </td>
+            </a-input>
-        </tr>
+        </template>
-        <tr>
+    </a-form-item> 
-            <td style="vertical-align: top; padding-top: 10px;">{{ i18n "pages.inbounds.stream.tcp.requestPath" }}
+    <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
-                <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
+        <a-button size="small" @click="inbound.stream.tcp.request.addHeader('', '')">+</a-button>
-            </td>
+    </a-form-item>
-            <td>
+    <a-form-item :wrapper-col="{span:24}">
-                <a-form-item>
+        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
-                    <a-row v-for="(path, index) in inbound.stream.tcp.request.path">
+            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-                        <a-input v-model.trim="inbound.stream.tcp.request.path[index]" style="width: 200px;">
+                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-                            <a-button size="small" slot="addonAfter"
+            </a-input>
-                            @click="inbound.stream.tcp.request.removePath(index)"
+            <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                            v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
+                <a-button slot="addonAfter" size="small" @click="inbound.stream.tcp.request.removeHeader(index)">-</a-button>
-                        </a-input>
+            </a-input>
-                    </a-row>
+        </a-input-group>
-                </a-form-item> 
+    </a-form-item>
            </td>
        </tr>
        <tr>
            <td colspan="2" width="100%">
                <a-form-item>
                    <span>{{ i18n "pages.inbounds.stream.general.requestHeader" }}:</span>
                    <a-button size="small" style="margin-left: 10px" @click="inbound.stream.tcp.request.addHeader('', '')">+</a-button>
                    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
                        <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
                            <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
                        </a-input>
                        <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
                            <a-button slot="addonAfter" size="small" @click="inbound.stream.tcp.request.removeHeader(index)">-</a-button>
                        </a-input>
                    </a-input-group>
                </a-form-item>
            </td>
        </tr>
        <!-- tcp response -->
-        <tr>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}'>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}</td>
+        <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
-            <td>
+    </a-form-item>
-                <a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseStatus" }}'>
-                    <a-input v-model.trim="inbound.stream.tcp.response.version" style="width: 200px;"></a-input>
+        <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
-                </a-form-item>
+    </a-form-item>
-            </td>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseStatusDescription" }}'>
-        </tr>
+        <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
-        <tr>
+    </a-form-item>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatus" }}</td>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
-            <td>
+        <a-button size="small"
-                <a-form-item>
+            @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">+</a-button>
-                    <a-input v-model.trim="inbound.stream.tcp.response.status" style="width: 200px;"></a-input>
+    </a-form-item>
-                </a-form-item>
+    <a-form-item :wrapper-col="{span:24}">
-            </td>
+        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
-        </tr>
+            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-        <tr>
+                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatusDescription" }}</td>
+            </a-input>
-            <td>
+            <a-input style="width: 50%" v-model.trim="header.value"
-                <a-form-item>
+                        placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                    <a-input v-model.trim="inbound.stream.tcp.response.reason" style="width: 200px;"></a-input>
+                <template slot="addonAfter">
-                </a-form-item>
+                    <a-button size="small" @click="inbound.stream.tcp.response.removeHeader(index)">-</a-button>
-            </td>
+                </template>
-        </tr>
+            </a-input>
-        <tr>
+        </a-input-group>
-            <td colspan="2" width="100%">
+    </a-form-item>
                <a-form-item>
                    <span>{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}:</span>
                    <a-button size="small" style="margin-left: 10px"
                        @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">+</a-button>
                    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
                        <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
                            <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
                        </a-input>
                        <a-input style="width: 50%" v-model.trim="header.value"
                                    placeholder='{{ 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}}
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/web/html/xui/form/stream/stream_ws.html
@@ -1,16 +1,15 @@
 {{define "form/streamWS"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="AcceptProxyProtocol">
+    <a-form-item label="Accept Proxy Protocol">
        <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
    </a-form-item>
    <br>
    <a-form-item label='{{ i18n "path" }}'>
        <a-input v-model.trim="inbound.stream.ws.path"></a-input>
    </a-form-item>
-    <br>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
-    <a-form-item style="width: 100%;">
+        <a-button size="small" @click="inbound.stream.ws.addHeader()">+</a-button>
-        <span>{{ i18n "pages.inbounds.stream.general.requestHeader" }}:</span>
+    </a-form-item>
-        <a-button size="small" style="margin-left: 10px" @click="inbound.stream.ws.addHeader()">+</a-button>
+    <a-form-item :wrapper-col="{span:24}">
        <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -1,251 +1,135 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
-<a-form v-if="inbound.canEnableTls()" layout="inline">
+<a-form v-if="inbound.canEnableTls()" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
    <a-divider style="margin:0;"></a-divider>
-    <table width="100%" class="ant-table-tbody">
+    <a-form-item label='{{ i18n "security" }}'>
-        <tr>
+        <a-radio-group v-model="inbound.stream.security" button-style="solid">
-            <td colspan="2">
+            <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-                <a-form-item label='{{ i18n "security" }}'>
+            <a-radio-button value="tls">TLS</a-radio-button>
-                    <a-radio-group v-model="inbound.stream.security" button-style="solid">
+            <a-radio-button v-if="inbound.canEnableReality()" value="reality">Reality</a-radio-button>
-                        <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
+        </a-radio-group>
-                        <a-radio-button value="tls">TLS</a-radio-button>
+    </a-form-item>
                        <a-radio-button v-if="inbound.canEnableReality()" value="reality">Reality</a-radio-button>
                    </a-radio-group>
                </a-form-item>
            </td>
        </tr>
 <!-- tls settings -->
 <template v-if="inbound.stream.isTls">
-    <tr>
+    <a-form-item label="SNI" placeholder="Server Name Indication">
-        <td>SNI</td>
+        <a-input v-model.trim="inbound.stream.tls.sni"></a-input>
-        <td>
+    </a-form-item>                
-            <a-form-item placeholder="Server Name Indication">
+    <a-form-item label="CipherSuites">
-                <a-input v-model.trim="inbound.stream.tls.sni" style="width: 250px"></a-input>
+        <a-select v-model="inbound.stream.tls.cipherSuites" :dropdown-class-name="themeSwitcher.currentTheme">
-            </a-form-item>                
+            <a-select-option value="">auto</a-select-option>
-        </td>
+            <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[ value ]]</a-select-option>
-    </tr>
+        </a-select>
-    <tr>
+    </a-form-item>
-        <td>CipherSuites</td>
+    <a-form-item label="Min/Max Version">
-        <td>
+        <a-input-group compact>
-            <a-form-item>
+            <a-select v-model="inbound.stream.tls.minVersion" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-                    <a-select-option value="">auto</a-select-option>
+            </a-select>
-                    <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[ value ]]</a-select-option>
+            <a-select v-model="inbound.stream.tls.maxVersion" :dropdown-class-name="themeSwitcher.currentTheme">
-                </a-select>
+                <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-            </a-form-item>
+            </a-select>
-        </td>
+        </a-input-group>
-    </tr>
+    </a-form-item>
-    <tr>
+    <a-form-item label="uTLS">
-        <td>Min/Max Version</td>
+        <a-select v-model="inbound.stream.tls.settings.fingerprint"
-        <td>
+                    :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-form-item>
+            <a-select-option value=''>None</a-select-option>
-                <a-input-group compact>
+            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                    <a-select style="width: 125px" v-model="inbound.stream.tls.minVersion" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-select>
-                        <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+    </a-form-item>
-                    </a-select>
+    <a-form-item label="ALPN">
-                    <a-select style="width: 125px" v-model="inbound.stream.tls.maxVersion" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-select
-                        <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+            mode="multiple"
-                    </a-select>
+            :dropdown-class-name="themeSwitcher.currentTheme"
-                </a-input-group>
+            v-model="inbound.stream.tls.alpn">
-            </a-form-item>
+            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-        </td>
+        </a-select>
-    </tr>
+    </a-form-item>
-    <tr>
+    <a-form-item label="Allow Insecure">
-        <td>uTLS</td>
+        <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
-        <td>
+    </a-form-item>
-            <a-form-item>
+    <a-form-item label="Reject Unknown SNI">
-                <a-select v-model="inbound.stream.tls.settings.fingerprint"
+        <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
-                            style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+    </a-form-item>
                    <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>
            </a-form-item>
        </td>
    </tr>
    <tr>
        <td>ALPN</td>
        <td>
            <a-form-item>
                <a-select
                    mode="multiple"
                    style="width: 250px"
                    :dropdown-class-name="themeSwitcher.currentTheme"
                    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>
        </td>
    </tr>
    <tr>
        <td>Allow insecure</td>
        <td>
            <a-form-item>
                <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
            </a-form-item>
        </td>
    </tr>
    <tr>
        <td>Reject Unknown SNI</td>
        <td>
            <a-form-item>
                <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
            </a-form-item>
        </td>
    </tr>
    <template v-for="cert,index in inbound.stream.tls.certs">
-        <tr>
+        <a-form-item label='{{ i18n "certificate" }}'>
-            <td>{{ i18n "certificate" }}</td>
+            <a-radio-group v-model="cert.useFile" button-style="solid">
-            <td>
+                <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
-                <a-form-item>
+                <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
-                    <a-radio-group v-model="cert.useFile" button-style="solid">
+            </a-radio-group>
-                        <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+            <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.tls.addCert()" style="margin-left: 10px">+</a-button>
-                        <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+            <a-button v-if="inbound.stream.tls.certs.length>1" type="primary" size="small" @click="inbound.stream.tls.removeCert(index)" style="margin-left: 10px">-</a-button>        
-                    </a-radio-group>
+        </a-form-item>
-                    <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.tls.addCert()" style="margin-left: 10px">+</a-button>
+    <template v-if="cert.useFile">
-                    <a-button v-if="inbound.stream.tls.certs.length>1" type="primary" size="small" @click="inbound.stream.tls.removeCert(index)" style="margin-left: 10px">-</a-button>        
+        <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-                </a-form-item>
+            <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
-            </td>
+        </a-form-item>
-        </tr>
+        <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-        <template v-if="cert.useFile">
+            <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
-        <tr>
+        </a-form-item>
-            <td>{{ i18n "pages.inbounds.publicKeyPath" }}</td>
+        <a-form-item label=" ">
-            <td>
+            <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
-                <a-form-item>
+        </a-form-item>
                    <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>{{ i18n "pages.inbounds.keyPath" }}</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
            </td>
        </tr>
    </template>
    <template v-else>
-        <tr>
+        <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-            <td>{{ i18n "pages.inbounds.publicKeyContent" }}</td>
+            <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
-            <td>
+        </a-form-item>
-                <a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
-                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
+            <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
-                </a-form-item>
+        </a-form-item>
            </td>
        </tr>
        <tr>
            <td>{{ i18n "pages.inbounds.keyContent" }}</td>
            <td>
                <a-form-item>
                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
                </a-form-item>
            </td>
        </tr>
    </template>
-        <tr>
+        <a-form-item label='ocspStapling'>
-            <td>ocspStapling</td>
+            <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
-            <td>
+        </a-form-item>
                <a-form-item>
                    <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
                </a-form-item>
            </td>
        </tr>
    </template>
 </template>
 <!-- reality settings -->
 <template v-if="inbound.stream.isReality">
-        <tr>
+    <a-form-item label='Show'>
-            <td>Show</td>
+        <a-switch v-model="inbound.stream.reality.show"></a-switch>
-            <td>
+    </a-form-item>                
-                <a-form-item>
+    <a-form-item label='Xver'>
-                    <a-switch v-model="inbound.stream.reality.show"></a-switch>
+        <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
-                </a-form-item>                
+    </a-form-item>
-            </td>
+    <a-form-item label='uTLS'>
-        </tr>
+        <a-select v-model="inbound.stream.reality.settings.fingerprint"
-        <tr>
+                    :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>Xver</td>
+            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-            <td>
+        </a-select>
-                <a-form-item>
+    </a-form-item>
-                    <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
+    <a-form-item label='Dest'>
-                </a-form-item>
+        <a-input v-model.trim="inbound.stream.reality.dest"></a-input>
-            </td>
+    </a-form-item>
-        </tr>
+    <a-form-item label='Server Names'>
-        <tr>
+        <a-input v-model.trim="inbound.stream.reality.serverNames"></a-input>
-            <td>uTLS</td>
+    </a-form-item>
-            <td>
+    <a-form-item>
-                <a-form-item>
+        <template slot="label">
-                    <a-select v-model="inbound.stream.reality.settings.fingerprint"
+            <a-tooltip>
-                              style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
+                <template slot="title">
-                        <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+                    <span>{{ i18n "pages.client.renew" }}</span>
-                    </a-select>
+                </template>
-                </a-form-item>
+                Short IDs
            </td>
        </tr>
        <tr>
            <td>Dest</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="inbound.stream.reality.dest" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>Server Names</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="inbound.stream.reality.serverNames" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>Short Ids
                <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId().join(',')" type="sync">
-            </td>
+            </a-icon>
-            <td>
+        </template>
-                <a-form-item>
+        <a-input v-model.trim="inbound.stream.reality.shortIds" style="width:250px"></a-input>
-                    <a-input v-model.trim="inbound.stream.reality.shortIds" style="width:250px"></a-input>
+    </a-form-item>
-                </a-form-item>
+    <a-form-item label='SpiderX'>
-            </td>
+        <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width:250px"></a-input>
-        </tr>
+    </a-form-item>
-        <tr>
+    <a-form-item label='Private Key'>
-            <td>SpiderX</td>
+        <a-input v-model.trim="inbound.stream.reality.privateKey"></a-input>
-            <td>
+    </a-form-item>
-                <a-form-item>
+    <a-form-item label='Public Key'>
-                    <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width:250px"></a-input>
+        <a-input v-model.trim="inbound.stream.reality.settings.publicKey"></a-input>
-                </a-form-item>
+    </a-form-item>
-            </td>
+    <a-form-item label=" ">
-        </tr>
+        <a-button type="primary" icon="import" @click="getNewX25519Cert">Get new cert</a-button>
-        <tr>
+    </a-form-item>
            <td>Private Key</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="inbound.stream.reality.privateKey" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>Public Key</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="inbound.stream.reality.settings.publicKey" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a-button type="primary" icon="import" @click="getNewX25519Cert">Get new cert</a-button>
            </td>
        </tr>
 </template>
    </table>
 </a-form>
 {{end}}
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -7,15 +7,20 @@
    width="600px"
    :class="themeSwitcher.currentTheme"
    >
-    <table style="margin-bottom: 10px; width: 100%;">
+    <a-row>
-        <tr><td>
+        <a-col :xs="24" :md="12">
            <table>
                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="purple">[[ dbInbound.protocol ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag>[[ dbInbound.address ]]</a-tag></td></tr>
+                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td>
                    <a-tooltip :title="[[ dbInbound.address ]]">
                        <a-tag class="info-large-tag">[[ dbInbound.address ]]</a-tag>
                    </a-tooltip>
                </td></tr>
                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag>[[ dbInbound.port ]]</a-tag></td></tr>
            </table>
-        </td>
+        </a-col>
-        <td v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+        <a-col :xs="24" :md="12">
        <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
            <table>
                <tr>
                    <td>{{ i18n "transmission" }}</td><td><a-tag color="blue">[[ inbound.network ]]</a-tag></td>
@@ -23,12 +28,19 @@
            <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
                <tr>
                    <td>{{ i18n "host" }}</td>
-                    <td v-if="inbound.host"><a-tag>[[ inbound.host ]]</a-tag></td>
+                    <td v-if="inbound.host">
                        <a-tooltip :title="[[ inbound.host ]]">
                            <a-tag class="info-large-tag">[[ inbound.host ]]</a-tag>
                        </a-tooltip>
                    </td>
                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
                </tr>
                <tr>
                    <td>{{ i18n "path" }}</td>
-                    <td v-if="inbound.path"><a-tag>[[ inbound.path ]]</a-tag></td>
+                    <td v-if="inbound.path">
                        <a-tooltip :title="[[ inbound.path ]]">
                            <a-tag class="info-large-tag">[[ inbound.path ]]</a-tag>
                        </a-tooltip>
                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td>
                </tr>
            </template>
@@ -45,30 +57,35 @@
            </template>
            <template v-if="inbound.isGrpc">
-                <tr><td>grpc serviceName</td><td><a-tag>[[ inbound.serviceName ]]</a-tag></td></tr>
+                <tr><td>grpc serviceName</td><td>
                    <a-tooltip :title="[[ inbound.serviceName ]]">
                        <a-tag class="info-large-tag">[[ inbound.serviceName ]]</a-tag>
                    </a-tooltip>
                <tr><td>grpc multiMode</td><td><a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
            </template>
            </table>
-        </td></tr>
+        </template>
-        <tr colspan="2" v-if="dbInbound.hasLink()">
+        </a-col>
-            <td>
+        <template v-if="dbInbound.hasLink()">
-                {{ i18n "security" }}
+            {{ i18n "security" }}
-                <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
+            <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
-                <br />
+            <br />
-                <template v-if="inbound.stream.security != 'none'">
+            <template v-if="inbound.stream.security != 'none'">
-                {{ i18n "domainName" }}
+            {{ i18n "domainName" }}
-                <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+            <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-                </template>
+            </template>
-            </td>
+        </template>
        </tr>
    </table>
    <table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;">
        <tr>
            <td>{{ i18n "encryption" }}</td>
            <td><a-tag color="blue">[[ inbound.settings.method ]]</a-tag></td>
        </tr><tr v-if="inbound.isSS2022">
            <td>{{ i18n "password" }}</td>
-            <td><a-tag>[[ inbound.settings.password ]]</a-tag></td>
+            <td>
                <a-tooltip :title="[[ inbound.settings.password  ]]">
                    <a-tag class="info-large-tag">[[ inbound.settings.password  ]]</a-tag>
                </a-tooltip>
            </td>
        </tr><tr>
            <td>{{ i18n "pages.inbounds.network" }}</td>
            <td><a-tag color="blue">[[ inbound.settings.network ]]</a-tag></td>
@@ -90,8 +107,12 @@
                <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
            </tr>
            <tr v-if="infoModal.clientSettings.password">
-                <td>Password</td>
+                <td>{{ i18n "password" }}</td>
-                <td><a-tag>[[ infoModal.clientSettings.password ]]</a-tag></td>
+                <td>
                    <a-tooltip :title="[[ infoModal.clientSettings.password  ]]">
                        <a-tag class="info-large-tag">[[ infoModal.clientSettings.password  ]]</a-tag>
                    </a-tooltip>
                </td>
            </tr>
            <tr>
                <td>{{ i18n "status" }}</td>
@@ -141,8 +162,8 @@
        <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
            <a-divider>Subscription link</a-divider>
            <a-row>
-                <a-col :span="22"><a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a></a-col>
+                <a-col :sx="24" :md="22"><a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a></a-col>
-                <a-col :span="2">
+                <a-col :sx="24" :md="2" style="text-align: right;">
                    <a-tooltip title='{{ i18n "copy" }}'>
                        <button class="ant-btn ant-btn-primary" id="copy-sub-link" @click="copyToClipboard('copy-sub-link', infoModal.subLink)">
                            <a-icon type="snippets"></a-icon>
@@ -154,8 +175,8 @@
        <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
            <a-divider>Telegram ID</a-divider>
            <a-row>
-                <a-col :span="22"><a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></a-col>
+                <a-col :sx="24" :md="22"><a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></a-col>
-                <a-col :span="2">
+                <a-col :sx="24" :md="2" style="text-align: right;">
                    <a-tooltip title='{{ i18n "copy" }}'>
                        <button class="ant-btn ant-btn-primary" id="copy-tg-link" @click="copyToClipboard('copy-tg-link', '@' + infoModal.clientSettings.tgId)">
                            <a-icon type="snippets"></a-icon>
@@ -167,8 +188,8 @@
        <template v-if="dbInbound.hasLink()">
            <a-divider>URL</a-divider>
            <a-row v-for="(link,index) in infoModal.links">
-                <a-col :span="22"><a-tag color="blue">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+                <a-col :sx="24" :md="22"><a-tag color="blue">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
-                <a-col :span="2" style="text-align: right;">
+                <a-col :sx="24" :md="2" style="text-align: right;">
                    <a-tooltip title='{{ i18n "copy" }}'>
                        <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
                            <a-icon type="snippets"></a-icon>
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -43,6 +43,10 @@
        0%, 50%, 100%   { transform: scale(1);  opacity:  1; }
        10%             { transform: scale(1.5); opacity: .2; }
    }
    .info-large-tag {
        max-width: 200px;
        overflow: hidden;
    }
 </style>
 <body>
@@ -160,9 +164,9 @@
                                </a-col>
                            </a-row>
                        </div>
-                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                        <div :style="isMobile ? '' : 'display: flex; align-items: center; justify-content: flex-start;'">
                            <a-switch v-model="enableFilter"
-                                style="margin-right: .5rem;"
+                                :style="isMobile ? 'margin-bottom: .5rem; display: flex;' : 'margin-right: .5rem;'"
                                @change="toggleFilter">
                                <a-icon slot="checkedChildren" type="search"></a-icon>
                                <a-icon slot="unCheckedChildren" type="filter"></a-icon>
@@ -517,9 +521,9 @@
        { title: '{{ i18n "pages.inbounds.operate" }}', width: 50, scopedSlots: { customRender: 'actions' } },
        { title: '{{ i18n "pages.inbounds.enable" }}', width: 20, scopedSlots: { customRender: 'enable' } },
        { title: '{{ i18n "online" }}', width: 20, scopedSlots: { customRender: 'online' } },
-        { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
+        { title: '{{ i18n "pages.inbounds.client" }}', width: 70, scopedSlots: { customRender: 'client' } },
        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
    ];
    const innerMobileColumns = [
@@ -1089,7 +1093,7 @@
                    title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
                    content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
                    class: themeSwitcher.currentTheme,
-                    okText: '{{ i18n "reset"}}',
+                    okText: '{{ i18n "delete"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => this.submit('/xui/inbound/delDepletedClients/' + dbInboundId),
                })
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -101,7 +101,7 @@
                                <template slot="title">
                                    {{ i18n "pages.index.operationHoursDesc" }}
                                </template>
-                                <a-icon type="question-circle" theme="filled"></a-icon>
+                                <a-icon type="question-circle"></a-icon>
                            </a-tooltip>
                            <a-tag color="blue">[[ formatSecond(status.uptime) ]]</a-tag>
                        </a-card>
@@ -118,7 +118,7 @@
                                <template slot="content">
                                    <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
                                </template>
-                                <a-icon type="question-circle" theme="filled"></a-icon>
+                                <a-icon type="question-circle"></a-icon>
                            </a-popover>
                            <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
                            <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>                    
@@ -140,7 +140,7 @@
                    <a-col :sm="24" :md="12">
                        <a-card hoverable>
                            {{ i18n "usage"}}:
-                            Memory: [[ sizeFormat(status.appStats.mem) ]] -
+                            RAM: [[ sizeFormat(status.appStats.mem) ]] -
                            Threads: [[ status.appStats.threads ]]
                            </a-tooltip>
                        </a-card>
@@ -153,7 +153,7 @@
                                <template slot="title">
                                    [[ status.hostInfo.ipv4 ]]
                                </template>
-                                <a-icon type="question-circle" theme="filled"></a-icon>
+                                <a-icon type="question-circle"></a-icon>
                            </a-tooltip>
                            </template>
                            <template v-if="status.hostInfo.ipv6">IPv6:
@@ -161,7 +161,7 @@
                                <template slot="title">
                                    [[ status.hostInfo.ipv6 ]]
                                </template>
-                                <a-icon type="question-circle" theme="filled"></a-icon>
+                                <a-icon type="question-circle"></a-icon>
                            </a-tooltip>
                            </template>
                        </a-card>
@@ -175,7 +175,7 @@
                                        <template slot="title">
                                            {{ i18n "pages.index.connectionTcpCountDesc" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                    </a-tooltip>
                                </a-col>
                                <a-col :span="12">
@@ -184,7 +184,7 @@
                                        <template slot="title">
                                            {{ i18n "pages.index.connectionUdpCountDesc" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                    </a-tooltip>
                                </a-col>
                            </a-row>
@@ -195,22 +195,22 @@
                            <a-row>
                                <a-col :span="12">
                                    <a-icon type="arrow-up"></a-icon>
-                                    [[ sizeFormat(status.netIO.up) ]] / S
+                                    [[ sizeFormat(status.netIO.up) ]]/s
                                    <a-tooltip>
                                        <template slot="title">
                                            {{ i18n "pages.index.upSpeed" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                    </a-tooltip>
                                </a-col>
                                <a-col :span="12">
                                    <a-icon type="arrow-down"></a-icon>
-                                    [[ sizeFormat(status.netIO.down) ]] / S
+                                    [[ sizeFormat(status.netIO.down) ]]/s
                                    <a-tooltip>
                                        <template slot="title">
                                            {{ i18n "pages.index.downSpeed" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                    </a-tooltip>
                                </a-col>
                            </a-row>
@@ -226,7 +226,7 @@
                                        <template slot="title">
                                            {{ i18n "pages.index.totalSent" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                    </a-tooltip>
                                </a-col>
                                <a-col :span="12">
@@ -236,7 +236,7 @@
                                        <template slot="title">
                                            {{ i18n "pages.index.totalReceive" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                    </a-tooltip>
                                </a-col>
                            </a-row>
@@ -251,8 +251,10 @@
             :closable="true" @ok="() => versionModal.visible = false"
             :class="themeSwitcher.currentTheme"
             footer="">
-        <h2>{{ i18n "pages.index.xraySwitchClick"}}</h2>
+        <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
-        <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
+        message='{{ i18n "pages.index.xraySwitchClickDesk" }}'
        show-icon
        ></a-alert>
        <template v-for="version, index in versionModal.versions">
            <a-tag :color="index % 2 == 0 ? 'purple' : 'blue'"
                   style="margin: 10px" @click="switchV2rayVersion(version)">
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -135,40 +135,38 @@
                        </a-tab-pane>
                        <a-tab-pane key="2" tab='{{ i18n "pages.settings.userSettings"}}'>
                            <a-form style="padding: 20px;" layout="inline">
-                                <table cellpadding="2">
+                                    <a-row>
-                                    <tr>
+                                        <a-col :xs="24" :md="8" style="margin-top: 8px;">{{ i18n "pages.settings.oldUsername"}}:</a-col>
-                                        <td>{{ i18n "pages.settings.oldUsername"}}:</td>
+                                        <a-col :xs="24" :md="8">
                                        <td>
                                            <a-form-item>
                                                <a-input v-model="user.oldUsername" style="width: 200px"></a-input>
                                            </a-form-item>
-                                        </td>
+                                        </a-col>
-                                    </tr>
+                                    </a-row>
-                                    <tr>
+                                    <a-row>
-                                        <td>{{ i18n "pages.settings.currentPassword"}}:</td>
+                                        <a-col :xs="24" :md="8" style="margin-top: 8px;">{{ i18n "pages.settings.currentPassword"}}:</a-col>
-                                        <td>
+                                        <a-col :xs="24" :md="8">
                                            <a-form-item>
                                                <password-input v-model="user.oldPassword" style="width: 200px"></password-input>
                                            </a-form-item>
-                                        </td>
+                                        </a-col>
-                                    </tr>
+                                    </a-row>
-                                    <tr>
+                                    <a-row>
-                                        <td>{{ i18n "pages.settings.newUsername"}}:</td>
+                                        <a-col :xs="24" :md="8" style="margin-top: 8px;">{{ i18n "pages.settings.newUsername"}}:</a-col>
-                                        <td>
+                                        <a-col :xs="24" :md="8">
                                            <a-form-item>
                                                <a-input v-model="user.newUsername" style="width: 200px"></a-input>
                                            </a-form-item>
-                                        </td>
+                                        </a-col>
-                                    </tr>
+                                    </a-row>
-                                    <tr>
+                                    <a-row>
-                                        <td>{{ i18n "pages.settings.newPassword"}}:</td>
+                                        <a-col :xs="24" :md="8" style="margin-top: 8px;">{{ i18n "pages.settings.newPassword"}}:</a-col>
-                                        <td>
+                                        <a-col :xs="24" :md="8">
                                            <a-form-item>
                                                <password-input v-model="user.newPassword" style="width: 200px"></password-input>
                                            </a-form-item>            
-                                        </td>
+                                        </a-col>
-                                    </tr>
+                                    </a-row>
                                </table>
                                <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
                            </a-form>
                        </a-tab-pane>
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -3,9 +3,10 @@
 {{template "head" .}}
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/codemirror.css">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/fold/foldgutter.css">
-<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.css">
+<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/lint/lint.css">
 <script src="{{ .base_path }}assets/base64/base64.min.js"></script>
 <script src="{{ .base_path }}assets/js/model/outbound.js"></script>
 <script src="{{ .base_path }}assets/codemirror/codemirror.js"></script>
 <script src="{{ .base_path }}assets/codemirror/javascript.js"></script>
@@ -29,6 +30,10 @@
            margin: 0;
            padding: 12px .5rem;
        }
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
            padding: 10px 0px;
        }
    }
    .ant-tabs-bar {
@@ -80,7 +85,7 @@
                                        <template slot="content">
                                            <p style="max-width: 400px" v-for="line in restartResult.split('\n')">[[ line ]]</p>
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                    </a-popover>
                                </a-space>
                            </a-col>
@@ -419,7 +424,7 @@
        { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
        { title: '{{ i18n "pages.xray.rules.source"}}', children: [
            { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true },
-            { title: 'port', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true } ]},
+            { title: 'Port', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true } ]},
        { title: '{{ i18n "pages.inbounds.network"}}', children: [
            { title: 'L4', dataIndex: 'network', align: 'center', width: 10 },
            { title: 'Protocol', dataIndex: 'protocol', align: 'center', width: 10, ellipsis: true },
@@ -430,7 +435,7 @@
            { title: 'Port', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]},
        { title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
            { title: 'Inbound Tag', dataIndex: 'inboundTag', align: 'center', width: 20, ellipsis: true },
-            { title: 'User email', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
+            { title: 'Client Email', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
        { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 20 },
    ];
@@ -777,17 +782,27 @@
                    confirm: (reverse, rules) => {
                        reverseModal.loading();
                        if(reverse.tag.length > 0){
-                            oldtag = this.reverseData[index].tag;
+                            oldData = this.reverseData[index];
                            this.deleteReverse(index);
                            newTemplateSettings = this.templateSettings;
-                            if(newTemplateSettings.reverse == undefined) newTemplateSettings.reverse = {};
+                            oldReverseIndex = newTemplateSettings.reverse[oldData.type+'s'].findIndex(rs => rs.tag == oldData.tag);
-                            if(newTemplateSettings.reverse[reverse.type+'s']  == undefined) newTemplateSettings.reverse[reverse.type+'s'] = [];
+                            oldRuleIndex0 = oldRules.length>0 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[0])) : -1;
-                            newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
+                            oldRuleIndex1 = oldRules.length==2 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[1])) : -1;
                            if(oldData.type == reverse.type){
                                newTemplateSettings.reverse[oldData.type + 's'][oldReverseIndex] = { tag: reverse.tag, domain: reverse.domain };
                            } else {
                                newTemplateSettings.reverse[oldData.type+'s'].splice(oldReverseIndex,1);
                                // delete empty object
                                if(newTemplateSettings.reverse[oldData.type+'s'].length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
                                // add other type of reverse if it is not exist
                                if(!newTemplateSettings.reverse[reverse.type+'s']) newTemplateSettings.reverse[reverse.type+'s'] = [];
                                newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
                            }
                            this.templateSettings = newTemplateSettings;
                            // Adjust Rules
-                            newRules = this.templateSettings.routing.rules.filter(r => r.outboundTag != oldtag && (r.inboundTag && !r.inboundTag.includes(oldtag)));
+                            newRules = this.templateSettings.routing.rules;
-                            newRules.push(...rules)
+                            oldRuleIndex0 != -1 ? newRules[oldRuleIndex0] = rules[0] : newRules.push(rules[0]);
                            oldRuleIndex1 != -1 ? newRules[oldRuleIndex1] = rules[1] : newRules.push(rules[1]);
                            this.routingRuleSettings = JSON.stringify(newRules);
                        }
                        reverseModal.close();
@@ -802,10 +817,17 @@
                realIndex = reverseTypeObj.findIndex(r => r.tag==oldData.tag && r.domain==oldData.domain);
                newTemplateSettings.reverse[oldData.type+'s'].splice(realIndex,1);
                // delete empty objects
                if(reverseTypeObj.length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
                if(Object.keys(newTemplateSettings.reverse).length === 0) Reflect.deleteProperty(newTemplateSettings, 'reverse');
-                newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag && (r.inboundTag && !r.inboundTag.includes(oldData.tag)));
+                // delete related routing rules
                newRules = newTemplateSettings.routing.rules;
                if(oldData.type == "bridge"){
                    newRules = newTemplateSettings.routing.rules.filter(r => !( r.inboundTag && r.inboundTag.length == 1 && r.inboundTag[0] == oldData.tag));
                } else if(oldData.type == "portal"){
                    newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag);
                }
                newTemplateSettings.routing.rules = newRules;
                this.templateSettings = newTemplateSettings;
--- a/web/html/xui/xray_reverse_modal.html
+++ b/web/html/xui/xray_reverse_modal.html
@@ -2,77 +2,41 @@
 <a-modal id="reverse-modal" v-model="reverseModal.visible" :title="reverseModal.title" @ok="reverseModal.ok"
         :confirm-loading="reverseModal.confirmLoading" :closable="true" :mask-closable="false"
         :ok-text="reverseModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-    <a-form layout="inline">
+    <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-    <table width="100%" class="ant-table-tbody">
+        <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-        <tr>
+            <a-select v-model="reverseModal.reverse.type" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>{{ i18n "pages.xray.outbound.type" }}</td>
+                <a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
-            <td>
+            </a-select>
-                <a-form-item>
+        </a-form-item>
-                    <a-select v-model="reverseModal.reverse.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}'>
-                        <a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
+            <a-input v-model.trim="reverseModal.reverse.tag"></a-input>
-                    </a-select>
+        </a-form-item>
-                </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.outbound.domain" }}'>
-            </td>
+            <a-input v-model.trim="reverseModal.reverse.domain"></a-input>
-        </tr>
+        </a-form-item>
        <tr>
            <td>{{ i18n "pages.xray.outbound.tag" }}</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="reverseModal.reverse.tag" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>{{ i18n "pages.xray.outbound.domain" }}</td>
            <td>
                <a-form-item>
                    <a-input v-model.trim="reverseModal.reverse.domain" style="width: 250px"></a-input>
                </a-form-item>
            </td>
        </tr>
        <template v-if="reverseModal.reverse.type=='bridge'">
-        <tr>
+        <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
-            <td>{{ i18n "pages.xray.outbound.intercon" }}</td>
+            <a-select v-model="reverseModal.rules[0].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
-            <td>
+                <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
-                <a-form-item>
+            </a-select>
-                    <a-select v-model="reverseModal.rules[0].outboundTag" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+        </a-form-item>
-                        <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
+        <a-form-item label='{{ i18n "pages.xray.rules.outbound" }}'>
-                    </a-select>
+            <a-select v-model="reverseModal.rules[1].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
-                </a-form-item>
+                <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
-            </td>
+            </a-select>
-        </tr>
+        </a-form-item>
        <tr>
            <td>{{ i18n "pages.xray.rules.outbound" }}</td>
            <td>
                <a-form-item>
                    <a-select v-model="reverseModal.rules[1].outboundTag" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
                        <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
                    </a-select>
                </a-form-item>
            </td>
        </tr>
        </template>
        <template v-else>
-            <tr>
+            <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
-                <td>{{ i18n "pages.xray.outbound.intercon" }}</td>
+                <a-checkbox-group
-                <td>
+                    v-model="reverseModal.rules[0].inboundTag"
-                    <a-form-item>
+                    :options="reverseModal.inboundTags"></a-checkbox-group>
-                        <a-checkbox-group
+            </a-form-item>
-                            v-model="reverseModal.rules[0].inboundTag"
+            <a-form-item label='{{ i18n "pages.xray.rules.inbound" }}'>
-                            :options="reverseModal.inboundTags"></a-checkbox-group>
+                <a-checkbox-group
-                    </a-form-item>
+                    v-model="reverseModal.rules[1].inboundTag"
-                </td>
+                    :options="reverseModal.inboundTags"></a-checkbox-group>
-            </tr>
+            </a-form-item>
            <tr>
                <td>{{ i18n "pages.xray.rules.inbound" }}</td>
                <td>
                    <a-form-item>
                        <a-checkbox-group
                            v-model="reverseModal.rules[1].inboundTag"
                            :options="reverseModal.inboundTags"></a-checkbox-group>
                    </a-form-item>
                </td>
            </tr>
        </template>
    </table>
    </a-form>
--- a/web/html/xui/xray_rule_modal.html
+++ b/web/html/xui/xray_rule_modal.html
@@ -2,149 +2,111 @@
 <a-modal id="rule-modal" v-model="ruleModal.visible" :title="ruleModal.title" @ok="ruleModal.ok"
         :confirm-loading="ruleModal.confirmLoading" :closable="true" :mask-closable="false"
         :ok-text="ruleModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-    <a-form layout="inline">
+    <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-        <table width="100%" class="ant-table-tbody">
+        <a-form-item label='Domain Matcher'>
-            <tr>
+                    <a-select v-model="ruleModal.rule.domainMatcher" :dropdown-class-name="themeSwitcher.currentTheme">
            <td style="width: 30%;">Domain Matcher</td>
            <td>
                <a-form-item>
                    <a-select v-model="ruleModal.rule.domainMatcher" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
                        <a-select-option v-for="dm in ['','hybrid','linear']" :value="dm">[[ dm ]]</a-select-option>
                    </a-select>
-                </a-form-item>
+        </a-form-item>
-            </td>
+        <a-form-item>
-        </tr>
+            <template slot="label">
        <tr>
            <td>Source IPs
                <a-tooltip>
                    <template slot="title">
                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                    </template>
-                    <a-icon type="question-circle"></a-icon>
+                    Source IPs <a-icon type="question-circle"></a-icon>
                </a-tooltip>
-            </td>
+            </template>
-            <td>
+            <a-input v-model.trim="ruleModal.rule.source"></a-input>
-                <a-form-item>
+        </a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.source" style="width: 250px"></a-input>
+        <a-form-item>
-                </a-form-item>
+            <template slot="label">Source Port
            </td>
        </tr>
        <tr>
            <td>Source Port
                <a-tooltip>
                    <template slot="title">
                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                    </template>
-                    <a-icon type="question-circle"></a-icon>
+                    Source Port <a-icon type="question-circle"></a-icon>
                </a-tooltip>
-            </td>
+            </template>
-            <td>
+            <a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
-                <a-form-item>
+        </a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.sourcePort" style="width: 250px"></a-input>
+        <a-form-item label='Network'>
-                </a-form-item>
+            <a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
-            </td>
+                <a-select-option v-for="x in ['','tcp','udp','tcp,udp']" :value="x">[[ x ]]</a-select-option>
-        </tr>
+            </a-select>
-        <tr>
+        </a-form-item>
-            <td>Network</td>
+        <a-form-item label='Protocol'>
-            <td>
+            <a-select v-model="ruleModal.rule.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-form-item>
+                <a-select-option v-for="x in ['','http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
-                    <a-select v-model="ruleModal.rule.network" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+            </a-select>
-                        <a-select-option v-for="x in ['','tcp','tdp','tcp,udp']" :value="x">[[ x ]]</a-select-option>
+        </a-form-item>
-                    </a-select>
+        <a-form-item label='Attributes'>
-                </a-form-item>
+            <a-button size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])">+</a-button>
-            </td>
+        </a-form-item>
-        </tr>
+        <a-form-item :wrapper-col="{span: 24}">
-        <tr>
+            <a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
-            <td>Protocol</td>
+                <a-input style="width: 50%" v-model="attr[0]" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-            <td>
+                    <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-                <a-form-item>
+                </a-input>
-                    <a-select v-model="ruleModal.rule.protocol" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-input style="width: 50%" v-model="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                        <a-select-option v-for="x in ['','http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
+                    <a-button slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)">-</a-button>
-                    </a-select>
+                </a-input>
-                </a-form-item>
+            </a-input-group>
-            </td>
+        </a-form-item>
-        </tr>
+        <a-form-item>
-        <tr>
+            <template slot="label">
            <td colspan="2">
                <a-form-item>
                    <span>Attributes</span>
                    <a-button size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])">+</a-button>
                    <a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
                        <a-input style="width: 50%" v-model="attr[0]" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
                            <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
                        </a-input>
                        <a-input style="width: 50%" v-model="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
                            <a-button slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)">-</a-button>
                        </a-input>
                    </a-input-group>
                </a-form-item>
            </td>
        </tr>
        <tr>
            <td>IP
                <a-tooltip>
                    <template slot="title">
                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                    </template>
-                    <a-icon type="question-circle"></a-icon>
+                    IP <a-icon type="question-circle"></a-icon>
                </a-tooltip>
-            </td>
+            </template>
-            <td>
+            <a-input v-model.trim="ruleModal.rule.ip"></a-input>
-                <a-form-item>
+        </a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.ip" style="width: 250px"></a-input>
+        <a-form-item>
-                </a-form-item>
+            <template slot="label">
            </td>
        </tr>
        <tr>
            <td>Domain
                <a-tooltip>
                    <template slot="title">
                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                    </template>
-                    <a-icon type="question-circle"></a-icon>
+                    Domain <a-icon type="question-circle"></a-icon>
                </a-tooltip>
-            </td>
+            </template>
-            <td>
+            <a-input v-model.trim="ruleModal.rule.domain"></a-input>
-                <a-form-item>
+        </a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.domain" style="width: 250px"></a-input>
+        <a-form-item>
-                </a-form-item>
+            <template slot="label">
            </td>
        </tr>
        <tr>
            <td>Port
                <a-tooltip>
                    <template slot="title">
                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                    </template>
-                    <a-icon type="question-circle"></a-icon>
+                    User <a-icon type="question-circle"></a-icon>
                </a-tooltip>
-            </td>
+            </template>
-            <td>
+            <a-input v-model.trim="ruleModal.rule.user"></a-input>
-                <a-form-item>
+        </a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.port" style="width: 250px"></a-input>
+        <a-form-item>
-                </a-form-item>
+            <template slot="label">
-            </td>
+                <a-tooltip>
-        </tr>
+                    <template slot="title">
-        <tr>
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-            <td>Inbound Tags</td>
+                    </template>
-            <td>
+                    Port <a-icon type="question-circle"></a-icon>
-                <a-form-item>
+                </a-tooltip>
-                    <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+            </template>
-                        <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
+            <a-input v-model.trim="ruleModal.rule.port"></a-input>
-                    </a-select>
+        </a-form-item>
-                </a-form-item>
+        <a-form-item label='Inbound Tags'>
-            </td>
+            <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
-        </tr>
+                <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
-        <tr>
+            </a-select>
-            <td>Outbound Tag</td>
+        </a-form-item>
-            <td>
+        <a-form-item label='Outbound Tag'>
-                <a-form-item>
+            <a-select v-model="ruleModal.rule.outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select v-model="ruleModal.rule.outboundTag" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
-                        <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
-                    </a-select>
+        </a-form-item>
                </a-form-item>
            </td>
        </tr>
    </table>
    </a-form>
 </a-modal>
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -26,7 +26,7 @@
 "edit" = "Edit"
 "delete" = "Delete"
 "reset" = "Reset"
-"copySuccess" = "Copied successfully"
+"copySuccess" = "Copied Successfully"
 "sure" = "Sure"
 "encryption" = "Encryption"
 "transmission" = "Transmission"
@@ -40,18 +40,18 @@
 "depletingSoon" = "Depleting"
 "offline" = "Offline"
 "online" = "Online"
-"domainName" = "Domain name"
+"domainName" = "Domain Name"
 "monitor" = "Listen IP"
 "certificate" = "Certificate"
 "fail" = " Fail"
 "success" = " Success"
-"getVersion" = "Get version"
+"getVersion" = "Get Version"
 "install" = "Install"
 "clients" = "Clients"
 "usage" = "Usage"
 "remained" = "Remained"
 "secAlertTitle" = "Security Alert"
-"secAlertSsl" = "This connection is not secure; Please refrain from entering sensitive information until TLS is activated for data protection"
+"secAlertSsl" = "This connection is not secure; Please refrain from entering sensitive information until TLS is activated for data protection."
 "security" = "Security"
 [menu]
@@ -60,11 +60,11 @@
 "settings" = "Panel Settings"
 "xray" = "Xray Settings"
 "logout" = "Logout"
-"link" = "Other"
+"link" = "Management"
 [pages.login]
 "title" = "Login"
-"loginAgain" = "The login time limit has expired, please log in again"
+"loginAgain" = "Your session has expired, please log in again."
 [pages.login.toasts]
 "invalidFormData" = "Input data format is invalid."
@@ -75,23 +75,23 @@
 [pages.index]
 "title" = "System Status"
-"memory" = "Memory"
+"memory" = "RAM"
-"hard" = "Hard Disk"
+"hard" = "Disk"
 "xrayStatus" = "Xray Status"
 "stopXray" = "Stop"
 "restartXray" = "Restart"
-"xraySwitch" = "Switch Version"
+"xraySwitch" = "Switch Xray Version"
-"xraySwitchClick" = "Choose the version you want to switch to."
+"xraySwitchClick" = "Choose the version you want to switch."
-"xraySwitchClickDesk" = "Choose wisely, as older versions may not be compatible with current configurations."
+"xraySwitchClickDesk" = "Choose wisely, as older versions may not be compatible with current configs."
-"operationHours" = "Operation Hours"
+"operationHours" = "System Uptime"
-"operationHoursDesc" = "System uptime: time since startup."
+"operationHoursDesc" = "Time since startup"
 "systemLoad" = "System Load"
-"connectionTcpCountDesc" = "Total TCP connections across all network cards."
+"connectionTcpCountDesc" = "Total TCP connections across all network cards"
-"connectionUdpCountDesc" = "Total UDP connections across all network cards."
+"connectionUdpCountDesc" = "Total UDP connections across all network cards"
-"upSpeed" = "Total upload speed for all network cards."
+"upSpeed" = "Total upload speed for all network cards"
-"downSpeed" = "Total download speed for all network cards."
+"downSpeed" = "Total download speed for all network cards"
-"totalSent" = "Total upload traffic of all network cards since system startup."
+"totalSent" = "Total upload data across all network cards since OS startup"
-"totalReceive" = "Total download data across all network cards since system startup."
+"totalReceive" = "Total download data across all network cards since OS startup"
 "xraySwitchVersionDialog" = "Switch Xray Version"
 "xraySwitchVersionDialogDesc" = "Are you sure you want to switch the Xray version to"
 "dontRefresh" = "Installation is in progress, please do not refresh this page."
@@ -99,7 +99,7 @@
 "config" = "Config"
 "backup" = "Backup & Restore"
 "backupTitle" = "Backup & Restore Database"
-"backupDescription" = "Remember to backup before importing a new database."
+"backupDescription" = "It is recommended to backup before importing a new database."
 "exportDatabase" = "Download Database"
 "importDatabase" = "Upload Database"
@@ -134,7 +134,7 @@
 "destinationPort" = "Destination Port"
 "targetAddress" = "Target Address"
 "monitorDesc" = "Leave blank by default"
-"meansNoLimit" = "Means No Limit"
+"meansNoLimit" = "Means no limit"
 "totalFlow" = "Total Flow"
 "leaveBlankToNeverExpire" = "Leave blank to never expire"
 "noRecommendKeepDefault" = "No special requirements to keep the default"
@@ -152,34 +152,34 @@
 "cloneInboundContent" = "All settings of this inbound, except for Port, Listening IP, and Clients, will be applied to the clone."
 "cloneInboundOk" = "Clone"
 "resetAllTraffic" = "Reset All Inbounds Traffic"
-"resetAllTrafficTitle" = "Reset all inbounds traffic"
+"resetAllTrafficTitle" = "Reset All Inbounds Traffic"
 "resetAllTrafficContent" = "Are you sure you want to reset all inbounds traffic?"
 "resetInboundClientTraffics" = "Reset Clients Traffic"
-"resetInboundClientTrafficTitle" = "Reset all clients traffic"
+"resetInboundClientTrafficTitle" = "Reset Clients Traffic"
 "resetInboundClientTrafficContent" = "Are you sure you want to reset all traffic for this inbound's clients?"
 "resetAllClientTraffics" = "Reset All Clients Traffic"
-"resetAllClientTrafficTitle" = "Reset all clients traffic"
+"resetAllClientTrafficTitle" = "Reset All Clients Traffic"
 "resetAllClientTrafficContent" = "Are you sure you want to reset all traffics for all clients?"
 "delDepletedClients" = "Delete Depleted Clients"
-"delDepletedClientsTitle" = "Delete depleted clients"
+"delDepletedClientsTitle" = "Delete Depleted Clients"
 "delDepletedClientsContent" = "Are you sure you want to delete all depleted clients?"
 "email" = "Email"
 "emailDesc" = "Please provide a unique email address."
-"setDefaultCert" = "Set cert from panel"
+"setDefaultCert" = "Set Cert from Panel"
-"telegramDesc" = "Use Telegram ID without @ or chat IDs ( you can get it here @userinfobot or use '/id' command in bot )"
+"telegramDesc" = "Use Telegram ID without @ or chat IDs (you can get it here @userinfobot or use '/id' command in bot)"
 "subscriptionDesc" = "You can find your sub link on Details, also you can use the same name for several configurations"
 "info" = "Info"
 "same" = "Same"
-"inboundData" = "Inbound's data"
+"inboundData" = "Inbound's Data"
-"copyToClipboard" = "Copy to clipboard"
+"copyToClipboard" = "Copy to Clipboard"
 "import" = "Import"
-"importInbound" = "Import an inbound"
+"importInbound" = "Import an Inbound"
 [pages.client]
 "add" = "Add Client"
 "edit" = "Edit Client"
 "submitAdd" = "Add Client"
-"submitEdit" = "Save changes"
+"submitEdit" = "Save Changes"
 "clientCount" = "Number of Clients"
 "bulk" = "Add Bulk"
 "method" = "Method"
@@ -187,28 +187,28 @@
 "last" = "Last"
 "prefix" = "Prefix"
 "postfix" = "Postfix"
-"delayedStart" = "Start after first use"
+"delayedStart" = "Start After First Use"
-"expireDays" = "Expire days"
+"expireDays" = "Expire Days"
-"days" = "day(s)"
+"days" = "Day(s)"
-"renew" = "Auto renew"
+"renew" = "Auto Renew"
 "renewDesc" = "Auto renew days after expiration. 0 = disable"
 [pages.inbounds.toasts]
 "obtain" = "Obtain"
 [pages.inbounds.stream.general]
-"requestHeader" = "Request header"
+"requestHeader" = "Request Header"
 "name" = "Name"
 "value" = "Value"
 [pages.inbounds.stream.tcp]
-"requestVersion" = "Request version"
+"requestVersion" = "Request Version"
-"requestMethod" = "Request method"
+"requestMethod" = "Request Method"
-"requestPath" = "Request path"
+"requestPath" = "Request Path"
-"responseVersion" = "Response version"
+"responseVersion" = "Response Version"
-"responseStatus" = "Response status"
+"responseStatus" = "Response Status"
-"responseStatusDescription" = "Response status description"
+"responseStatusDescription" = "Response Status Description"
-"responseHeader" = "Response header"
+"responseHeader" = "Response Header"
 [pages.inbounds.stream.quic]
 "encryption" = "Encryption"
@@ -217,84 +217,84 @@
 "title" = "Settings"
 "save" = "Save"
 "infoDesc" = "Every change made here needs to be saved. Please restart the panel for the changes to take effect."
-"restartPanel" = "Restart Panel "
+"restartPanel" = "Restart Panel"
-"restartPanelDesc" = "Are you sure you want to restart the panel? Click OK to restart after 3 seconds. If you cannot access the panel after restarting, please view the panel log information on the server."
+"restartPanelDesc" = "Are you sure you want to restart the panel? click OK to restart after 3 Secs. If you cannot access the panel after restarting, please view the panel log info on the server."
-"resetDefaultConfig" = "Reset to default config"
+"resetDefaultConfig" = "Reset to Default Config"
 "panelConfig" = "Panel Configurations"
 "userSettings" = "User Settings"
 "TGBotSettings" = "Telegram Bot Settings"
 "panelListeningIP" = "Panel Listening IP"
 "panelListeningIPDesc" = "Leave blank by default to monitor all IPs."
 "panelListeningDomain" = "Panel Listening Domain"
-"panelListeningDomainDesc" = "Leave blank by default to monitor all domains and IPs"
+"panelListeningDomainDesc" = "Leave blank by default to monitor all domains and IPs."
 "panelPort" = "Panel Port"
 "panelPortDesc" = "Port number for serving the panel."
-"publicKeyPath" = "Panel Certificate Public Key File Path"
+"publicKeyPath" = "Panel Certificate Public Key Path"
 "publicKeyPathDesc" = "Fill in an absolute path starting with '/'"
-"privateKeyPath" = "Panel Certificate Private Key File Path"
+"privateKeyPath" = "Panel Certificate Private Key Path"
 "privateKeyPathDesc" = "Fill in an absolute path starting with '/'"
 "panelUrlPath" = "Panel URL Root Path"
 "panelUrlPathDesc" = "Must start with '/' and end with '/'"
-"pageSize" = "Pagination size"
+"pageSize" = "Pagination Size"
-"pageSizeDesc" = "Define page size for inbounds table. Set 0 to disable"
+"pageSizeDesc" = "Define page size for inbounds table. Set 0 to disable."
-"remarkModel" = "Remark Model and Seperation charachter"
+"remarkModel" = "Remark Model and Seperation Charachter"
-"sampleRemark" = "Sample remark"
+"sampleRemark" = "Sample Remark"
 "oldUsername" = "Current Username"
 "currentPassword" = "Current Password"
 "newUsername" = "New Username"
 "newPassword" = "New Password"
-"telegramBotEnable" = "Enable Telegram bot"
+"telegramBotEnable" = "Enable Telegram Bot"
-"telegramBotEnableDesc" = "Your telegram bot will interact with the panel"
+"telegramBotEnableDesc" = "Your telegram bot will interact with the panel."
 "telegramToken" = "Telegram Token"
-"telegramTokenDesc" = "The Token you have got from @BotFather"
+"telegramTokenDesc" = "The token you have got from @BotFather"
-"telegramChatId" = "Telegram Admin ChatIDs"
+"telegramChatId" = "Telegram Admin Chat IDs"
-"telegramChatIdDesc" = "Multiple Chat IDs separated by comma. use @userinfobot or use '/id' command in bot to get your Chat IDs."
+"telegramChatIdDesc" = "Multiple chat IDs separated by comma. use @userinfobot or use '/id' command in bot to get your chat IDs."
-"telegramNotifyTime" = "Telegram bot notification time"
+"telegramNotifyTime" = "Telegram Bot Notification Time"
-"telegramNotifyTimeDesc" = "Use Crontab timing format."
+"telegramNotifyTimeDesc" = "Use crontab timing format."
 "tgNotifyBackup" = "Database Backup"
-"tgNotifyBackupDesc" = "Send database backup file with report notification"
+"tgNotifyBackupDesc" = "Send database backup file with report notification."
 "tgNotifyLogin" = "Login Notification"
 "tgNotifyLoginDesc" = "Displays the username, IP address, and time when someone tries to log into your panel."
-"sessionMaxAge" = "Session maximum age"
+"sessionMaxAge" = "Session Duration"
-"sessionMaxAgeDesc" = "The time that you can stay login (unit: minute)"
+"sessionMaxAgeDesc" = "The time that you can stay login. (unit: minute)"
-"expireTimeDiff" = "Expiration threshold for notification"
+"expireTimeDiff" = "Client Expiration Threshold Notification"
-"expireTimeDiffDesc" = "Get notified about account expiration before the threshold (unit: day)"
+"expireTimeDiffDesc" = "Get notified about client expiration before the threshold. (unit: day)"
-"trafficDiff" = "Traffic threshold for notification"
+"trafficDiff" = "Traffic Limit Threshold Notification"
-"trafficDiffDesc" = "Get notified about traffic exhaustion before reaching the threshold (unit: GB)"
+"trafficDiffDesc" = "Get notified about traffic exhaustion before reaching the threshold. (unit: GB)"
-"tgNotifyCpu" = "CPU percentage alert threshold"
+"tgNotifyCpu" = "CPU Load Threshold Notification"
-"tgNotifyCpuDesc" = "Receive notification if CPU usage exceeds this threshold (unit: %)"
+"tgNotifyCpuDesc" = "Get notified if CPU usage exceeds this threshold. (unit: %)"
 "timeZone" = "Time Zone"
 "timeZoneDesc" = "Scheduled tasks run according to the time in this time zone."
 "subSettings" = "Subscription"
-"subEnable" = "Enable service"
+"subEnable" = "Enable Service"
-"subEnableDesc" = "Subscription feature with separate configuration"
+"subEnableDesc" = "Subscription feature with separate configuration."
 "subListen" = "Listening IP"
-"subListenDesc" = "Leave blank by default to monitor all IPs"
+"subListenDesc" = "Leave blank by default to monitor all IPs."
 "subPort" = "Subscription Port"
-"subPortDesc" = "Port number for serving the subscription service must be unused in server"
+"subPortDesc" = "Port number for serving the subscription service. Must be unused in the server."
-"subCertPath" = "Subscription Certificate Public Key File Path"
+"subCertPath" = "Subscription Certificate Public Key Path"
 "subCertPathDesc" = "Fill in an absolute path starting with '/'"
-"subKeyPath" = "Subscription Certificate Private Key File Path"
+"subKeyPath" = "Subscription Certificate Private Key Path"
 "subKeyPathDesc" = "Fill in an absolute path starting with '/'"
 "subPath" = "Subscription URL Root Path"
 "subPathDesc" = "Must start with '/' and end with '/'"
 "subDomain" = "Listening Domain"
-"subDomainDesc" = "Leave blank by default to monitor all domains and IPs"
+"subDomainDesc" = "Leave blank by default to monitor all domains and IPs."
 "subUpdates" = "Subscription update intervals"
-"subUpdatesDesc" = "Interval hours between updates in client application"
+"subUpdatesDesc" = "Interval hours between updates in client application."
-"subEncrypt" = "Encrypt configs"
+"subEncrypt" = "Encode Configs"
-"subEncryptDesc" = "Encrypt the returned configs in subscription"
+"subEncryptDesc" = "Encode the returned configs in subscription."
-"subShowInfo" = "Show usage info"
+"subShowInfo" = "Show Usage Info"
-"subShowInfoDesc" = "Show remained traffic and date after config name"
+"subShowInfoDesc" = "Show remained traffic and date after config name."
 "subURI" = "Reverse Proxy URI"
-"subURIDesc" = "Change base URI of subscription URL for using on behind of proxies"
+"subURIDesc" = "Change base URI of subscription URL for using on behind of proxies."
 [pages.settings.toasts]
-"modifySettings" = "Modify Settings "
+"modifySettings" = "Modify Settings"
-"getSettings" = "Get Settings "
+"getSettings" = "Get Settings"
-"modifyUser" = "Modify User "
+"modifyUser" = "Modify User"
 "originalUserPassIncorrect" = "Incorrect original username or password"
-"userPassMustBeNotEmpty" = "New username and new password cannot be empty"
+"userPassMustBeNotEmpty" = "New username and password cannot be empty"
 [pages.xray]
 "title" = "Xray Settings"
@@ -318,37 +318,37 @@
 "FreedomStrategyDesc" = "Set the output strategy of the network in the Freedom Protocol."
 "RoutingStrategy" = "Configure Domains Routing Strategy"
 "RoutingStrategyDesc" = "Set the overall routing strategy for DNS resolving."
-"Torrent" = "Ban BitTorrent Usage"
+"Torrent" = "Ban BitTorrent Protocol"
-"TorrentDesc" = "Change the configuration template to avoid using BitTorrent by users."
+"TorrentDesc" = "Change the configuration template to avoid using BitTorrent protocol."
-"PrivateIp" = "Ban Private IP Ranges to Connect"
+"PrivateIp" = "Ban Private IPs Connection"
 "PrivateIpDesc" = "Change the configuration template to avoid connecting to private IP ranges."
 "Ads" = "Block Ads"
-"AdsDesc" = "Change the configuration template to block ads"
+"AdsDesc" = "Change the configuration template to block ads."
 "Family" = "Enable Family-Friendly Configuration"
 "FamilyDesc" = "Avoid connecting to unsafe websites for family protection."
-"IRIp" = "Disable connection to Iran IP ranges"
+"IRIp" = "Disable Connection to Iran IPs"
 "IRIpDesc" = "Change the configuration template to avoid connecting to Iran IP ranges."
-"IRDomain" = "Disable connection to Iran domains"
+"IRDomain" = "Disable Connection to Iran Domains"
 "IRDomainDesc" = "Change the configuration template to avoid connecting to Iran domains."
-"ChinaIp" = "Disable connection to China IP ranges"
+"ChinaIp" = "Disable Connection to China IPs"
 "ChinaIpDesc" = "Change the configuration template to avoid connecting to China IP ranges."
-"ChinaDomain" = "Disable connection to China domains"
+"ChinaDomain" = "Disable Connection to China Domains"
 "ChinaDomainDesc" = "Change the configuration template to avoid connecting to China domains."
-"RussiaIp" = "Disable connection to Russia IP ranges"
+"RussiaIp" = "Disable Connection to Russia IPs"
 "RussiaIpDesc" = "Change the configuration template to avoid connecting to Russia IP ranges."
-"RussiaDomain" = "Disable connection to Russia domains"
+"RussiaDomain" = "Disable Connection to Russia Domains"
 "RussiaDomainDesc" = "Change the configuration template to avoid connecting to Russia domains."
-"DirectIRIp" = "Direct connection to Iran IP ranges"
+"DirectIRIp" = "Direct Connection to Iran IPs"
 "DirectIRIpDesc" = "Change the configuration template for direct connecting to Iran IP ranges."
-"DirectIRDomain" = "Direct connection to Iran domains"
+"DirectIRDomain" = "Direct Connection to Iran Domains"
 "DirectIRDomainDesc" = "Change the configuration template for direct connecting to Iran domains."
-"DirectChinaIp" = "Direct connection to China IP ranges"
+"DirectChinaIp" = "Direct Connection to China IPs"
 "DirectChinaIpDesc" = "Change the configuration template for direct connecting to China IP ranges."
-"DirectChinaDomain" = "Direct connection to China domains"
+"DirectChinaDomain" = "Direct Connection to China Domains"
 "DirectChinaDomainDesc" = "Change the configuration template for direct connecting to China domains."
-"DirectRussiaIp" = "Direct connection to Russia IP ranges"
+"DirectRussiaIp" = "Direct Connection to Russia IPs"
 "DirectRussiaIpDesc" = "Change the configuration template for direct connecting to Russia IP ranges."
-"DirectRussiaDomain" = "Direct connection to Russia domains"
+"DirectRussiaDomain" = "Direct Connection to Russia Domains"
 "DirectRussiaDomainDesc" = "Change the configuration template for direct connecting to Russia domains."
 "GoogleIPv4" = "Use IPv4 for Google"
 "GoogleIPv4Desc" = "Add routing for Google to connect with IPv4."
@@ -357,7 +357,7 @@
 "completeTemplate" = "All"
 "Inbounds" = "Inbounds"
 "Outbounds" = "Outbounds"
-"Routings" = "Routing rules"
+"Routings" = "Routing Rules"
 "RoutingsDesc" = "The priority of each rule is important!"
 [pages.xray.rules]
@@ -375,12 +375,12 @@
 "useComma" = "Comma separated items"
 [pages.xray.outbound]
-"addOutbound" = "Add outbound"
+"addOutbound" = "Add Outbound"
-"addReverse" = "Add reverse"
+"addReverse" = "Add Reverse"
-"editOutbound" = "Edit outbound"
+"editOutbound" = "Edit Outbound"
-"editReverse" = "Edit reverse"
+"editReverse" = "Edit Reverse"
 "tag" = "Tag"
-"tagDesc" = "Unique tag"
+"tagDesc" = "Unique Tag"
 "address" = "Address"
 "reverse" = "Reverse"
 "domain" = "Domain"
@@ -406,36 +406,36 @@
 "help" = "🤖 Welcome to this bot! It's designed to offer you specific data from the server, and it allows you to make modifications as needed.\r\n\r\n"
 "start" = "👋 Hello <i>{{ .Firstname }}</i>.\r\n"
 "welcome" = "🤖 Welcome to <b>{{ .Hostname }}</b> management bot.\r\n"
-"status" = "✅ Bot is ok!"
+"status" = "✅ Bot is OK!"
 "usage" = "❗ Please provide a text to search!"
 "getID" = "🆔 Your ID: <code>{{ .ID }}</code>"
 "helpAdminCommands" = "Search for a client email:\r\n<code>/usage [Email]</code>\r\n \r\nSearch for inbounds (with client stats):\r\n<code>/inbound [Remark]</code>"
 "helpClientCommands" = "To search for statistics, just use the following command:\r\n \r\n<code>/usage [UUID|Password]</code>\r\n \r\nUse UUID for vmess/vless and Password for Trojan."
 [tgbot.messages]
-"cpuThreshold" = "🔴 The CPU usage {{ .Percent }}% is more than threshold {{ .Threshold }}%"
+"cpuThreshold" = "🔴 CPU load {{ .Percent }}% is more than threshold {{ .Threshold }}%"
 "loginSuccess" = "✅ Successfully logged-in to the panel.\r\n"
 "loginFailed" = "❗️ Login to the panel failed.\r\n"
-"report" = "🕰 Scheduled Reports: {{ .RunTime }}\r\n"
+"report" = "🕰 Scheduled reports: {{ .RunTime }}\r\n"
 "datetime" = "⏰ Date-Time: {{ .DateTime }}\r\n"
 "hostname" = "💻 Hostname: {{ .Hostname }}\r\n"
-"version" = "🚀 X-UI Version: {{ .Version }}\r\n"
+"version" = "🚀 X-UI version: {{ .Version }}\r\n"
 "ipv6" = "🌐 IPv6: {{ .IPv6 }}\r\n"
 "ipv4" = "🌐 IPv4: {{ .IPv4 }}\r\n"
 "ip" = "🌐 IP: {{ .IP }}\r\n"
-"serverUpTime" = "⏳ Server Uptime: {{ .UpTime }} {{ .Unit }}\r\n"
+"serverUpTime" = "⏳ Server uptime: {{ .UpTime }} {{ .Unit }}\r\n"
-"serverLoad" = "📈 Server Load: {{ .Load1 }}, {{ .Load2 }}, {{ .Load3 }}\r\n"
+"serverLoad" = "📈 Server load: {{ .Load1 }}, {{ .Load2 }}, {{ .Load3 }}\r\n"
-"serverMemory" = "📋 Server Memory: {{ .Current }}/{{ .Total }}\r\n"
+"serverMemory" = "📋 Server RAM: {{ .Current }}/{{ .Total }}\r\n"
-"tcpCount" = "🔹 TcpCount: {{ .Count }}\r\n"
+"tcpCount" = "🔹 TCP: {{ .Count }}\r\n"
-"udpCount" = "🔸 UdpCount: {{ .Count }}\r\n"
+"udpCount" = "🔸 UDP: {{ .Count }}\r\n"
 "traffic" = "🚦 Traffic: {{ .Total }} (↑{{ .Upload }},↓{{ .Download }})\r\n"
-"xrayStatus" = "ℹ️ Xray Status: {{ .State }}\r\n"
+"xrayStatus" = "ℹ️ Xray status: {{ .State }}\r\n"
 "username"   = "👤 Username: {{ .Username }}\r\n"
 "time" = "⏰ Time: {{ .Time }}\r\n"
 "inbound" = "📍 Inbound: {{ .Remark }}\r\n"
 "port" = "🔌 Port: {{ .Port }}\r\n"
-"expire" = "📅 Expire Date: {{ .DateTime }}\r\n \r\n"
+"expire" = "📅 Expire date: {{ .DateTime }}\r\n \r\n"
-"expireIn" = "📅 Expire In: {{ .Time }}\r\n \r\n"
+"expireIn" = "📅 Expire in: {{ .Time }}\r\n \r\n"
 "active" = "💡 Active: {{ .Enable }}\r\n"
 "online" = "🌐 Connection status: {{ .Status }}\r\n"
 "email" = "📧 Email: {{ .Email }}\r\n"
@@ -447,7 +447,7 @@
 "onlinesCount" = "🌐 Online clients count: {{ .Count }}\r\n"
 "disabled" = "🛑 Disabled: {{ .Disabled }}\r\n"
 "depleteSoon" = "🔜 Deplete soon: {{ .Deplete }}\r\n \r\n"
-"backupTime" = "🗄 Backup Time: {{ .Time }}\r\n"
+"backupTime" = "🗄 Backup time: {{ .Time }}\r\n"
 "yes" = "✅ Yes"
 "no" = "❌ No"
@@ -455,7 +455,7 @@
 "dbBackup" = "Get DB Backup"
 "serverUsage" = "Server Usage"
 "getInbounds" = "Get Inbounds"
-"depleteSoon" = "Deplete soon"
+"depleteSoon" = "Deplete Soon"
 "clientUsage" = "Get Usage"
 "onlines" = "Online Clients"
 "commands" = "Commands"
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -60,7 +60,7 @@
 "settings" = "تنظیمات پنل"
 "xray" = "الگوی ایکس‌ری"
 "logout" = "خروج"
-"link" = "دیگر"
+"link" = "مدیریت"
 [pages.login]
 "title" = "ورود به سیستم"
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -60,7 +60,7 @@
 "settings" = "Настройки"
 "xray" = "Xray Настройки"
 "logout" = "Выйти"
-"link" = "Другое"
+"link" = "менеджмент"
 [pages.login]
 "title" = "Войти"
@@ -368,7 +368,7 @@
 "source" = "Источник"
 "dest" = "Пункт назначения"
 "inbound" = "Входящий"
-"outboun" = "Исходящий"
+"outbound" = "Исходящий"
 "info" = "Информация"
 "add" = "Добавить правило"
 "edit" = "Редактировать правило"
--- a/web/translation/translate.vi_VN.toml
+++ b/web/translation/translate.vi_VN.toml
@@ -60,7 +60,7 @@
 "settings" = "Cài đặt bảng điều khiển"
 "xray" = "Cài đặt Xray"
 "logout" = "Đăng xuất"
-"link" = "Khác"
+"link" = "sự quản lý"
 [pages.login]
 "title" = "Đăng nhập"
--- a/web/translation/translate.zh_Hans.toml
+++ b/web/translation/translate.zh_Hans.toml
@@ -60,7 +60,7 @@
 "settings" = "面板设置"
 "xray" = "Xray 设置"
 "logout" = "退出登录"
-"link" = "其他"
+"link" = "管理"
 [pages.login]
 "title" = "登录"
@@ -361,7 +361,7 @@
 "RoutingsDesc" = "每条规则的优先级都很重要"
 [pages.xray.rules]
-"firsto" = "第一个"
+"first" = "第一个"
 "last" = "最后"
 "up" = "向上"
 "down" = "向下"
@@ -382,7 +382,7 @@
 "tag" = "标签"
 "tagDesc" = "独特的标签"
 "address" = "地址"
-"rreverse" = "反转"
+"reverse" = "反转"
 "domain" = "域名"
 "type" = "类型"
 "bridge" = "桥"
--- a/x-ui.sh
+++ b/x-ui.sh
@@ -653,18 +653,18 @@ show_usage() {
    echo "X-UI Control Menu Usage"
    echo "------------------------------------------"
    echo "SUBCOMMANDS:" 
-    echo "x-ui              - Admin management script"
+    echo "x-ui              - Admin Management Script"
-    echo "x-ui start        - Start X-UI"
+    echo "x-ui start        - Start"
-    echo "x-ui stop         - Stop X-UI"
+    echo "x-ui stop         - Stop"
-    echo "x-ui restart      - Restart X-UI"
+    echo "x-ui restart      - Restart"
-    echo "x-ui status       - Current X-UI status"
+    echo "x-ui status       - Current Status"
-    echo "x-ui enable       - Enable X-UI on system startup"
+    echo "x-ui enable       - Enable Autostart on OS Startup"
-    echo "x-ui disable      - Disable X-UI on system startup"
+    echo "x-ui disable      - Disable Autostart on OS Startup"
-    echo "x-ui log          - Check X-UI logs"
+    echo "x-ui log          - Check Logs"
-    echo "x-ui update       - Update X-UI"
+    echo "x-ui update       - Update"
-    echo "x-ui install      - Install X-UI"
+    echo "x-ui install      - Install"
-    echo "x-ui uninstall    - Uninstall X-UI"
+    echo "x-ui uninstall    - Uninstall"
-    echo "x-ui help         - Control menu usage"
+    echo "x-ui help         - Control Menu Usage"
    echo "------------------------------------------"
 }
@@ -674,28 +674,28 @@ show_menu() {
 ————————————————
  ${green}0.${plain} Exit 
 ————————————————
-  ${green}1.${plain} Install X-UI
+  ${green}1.${plain} Install
-  ${green}2.${plain} Update X-UI
+  ${green}2.${plain} Update
-  ${green}3.${plain} Uninstall X-UI
+  ${green}3.${plain} Uninstall
 ————————————————
  ${green}4.${plain} Reset Username and Password
  ${green}5.${plain} Reset Panel Settings
  ${green}6.${plain} Set Panel Port
-  ${green}7.${plain} View Current Panel Settings
+  ${green}7.${plain} View Panel Settings
 ————————————————
-  ${green}8.${plain} Start X-UI
+  ${green}8.${plain} Start
-  ${green}9.${plain} Stop X-UI
+  ${green}9.${plain} Stop
-  ${green}10.${plain} Restart X-UI
+  ${green}10.${plain} Restart
-  ${green}11.${plain} Check X-UI State
+  ${green}11.${plain} Check State
-  ${green}12.${plain} Check X-UI Logs
+  ${green}12.${plain} Check Logs
 ————————————————
-  ${green}13.${plain} Set X-UI Autostart
+  ${green}13.${plain} Enable Autostart
-  ${green}14.${plain} Cancel X-UI Autostart
+  ${green}14.${plain} Disable Autostart
 ————————————————
  ${green}15.${plain} 一A Key Installation BBR (latest kernel)
  ${green}16.${plain} 一SSL Certificate Management
  ${green}17.${plain} 一Cloudflare SSL Certificate
-  ${green}18.${plain} 一Update Geo files
+  ${green}18.${plain} 一Update Geo Files
 ————————————————
 "
    show_status
Author	SHA1	Message	Date
Alireza Ahmadi	c9e4918494	v1.6.4	2023-12-19 02:00:40 +01:00
Alireza Ahmadi	63b166ce40	fix filter view in inbounds	2023-12-19 01:06:29 +01:00
shahin-io	2ab1726131	unifying texts (#765 ) * Update install.sh * Update x-ui.sh * Update install.sh * Update stream_tcp.html * Update stream_ws.html * Update tls_settings.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.fa_IR.toml * Update translate.ru_RU.toml * Update translate.zh_Hans.toml * Update translate.vi_VN.toml * Update translate.en_US.toml * Update index.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update dokodemo.html * Update shadowsocks.html * Update socks.html * Update xray_rule_modal.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update dokodemo.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update index.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update index.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update index.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update index.html * Update index.html * Update vless.html * Update trojan.html * Update outbound.html * Update tls_settings.html * Update dokodemo.html * Update outbound.html * Update stream_kcp.html * Update outbound.html * Update xray.html * Update xray.html * Update xray.html * Update xray.html * Update xray.html	2023-12-19 00:47:49 +01:00
Alireza Ahmadi	7dd5449cf4	[xray] add user field	2023-12-18 18:17:54 +01:00
Alireza Ahmadi	ded780b11a	fix reverse edit/delete #766	2023-12-15 21:07:27 +01:00
shahin-io	2e44501573	fix small typo here and there (#761 ) * Update install.sh * Update x-ui.sh * Update install.sh * Update stream_tcp.html * Update stream_ws.html * Update tls_settings.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.fa_IR.toml * Update translate.ru_RU.toml * Update translate.zh_Hans.toml * Update translate.vi_VN.toml * Update translate.en_US.toml * Update index.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update dokodemo.html * Update shadowsocks.html * Update socks.html * Update xray_rule_modal.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update dokodemo.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml * Update index.html * Update translate.en_US.toml * Update translate.en_US.toml * Update translate.en_US.toml	2023-12-14 22:36:32 +01:00
Alireza Ahmadi	3e7770ad97	Merge pull request #762 from MHSanaei/main bug fix - lang	2023-12-14 22:32:53 +01:00
MHSanaei	0c380aebdd	bug fix - lang	2023-12-14 10:23:47 +03:30
Alireza Ahmadi	93f6ba897c	v1.6.3	2023-12-13 18:18:10 +01:00
Alireza Ahmadi	b93adb7435	v1.6.3	2023-12-13 17:50:06 +01:00
Alireza Ahmadi	538fdb9860	change fallback form to new design	2023-12-13 15:21:54 +01:00
Alireza Ahmadi	c4ed595a1c	better information view	2023-12-13 15:17:11 +01:00
Alireza Ahmadi	5acfdf584e	password autogenerate for trojan client #751	2023-12-13 15:00:36 +01:00
Alireza Ahmadi	62ceaeba8f	[gui] remove login animations	2023-12-13 14:55:24 +01:00
Alireza Ahmadi	3c688d85e7	Merge pull request #755 from alireza0/dependabot/go_modules/google.golang.org/grpc-1.60.0 Bump google.golang.org/grpc from 1.59.0 to 1.60.0	2023-12-13 13:38:25 +01:00
dependabot[bot]	99a4cf4179	Bump google.golang.org/grpc from 1.59.0 to 1.60.0 Bumps [google.golang.org/grpc](https://github.com/grpc/grpc-go) from 1.59.0 to 1.60.0. - [Release notes](https://github.com/grpc/grpc-go/releases) - [Commits](https://github.com/grpc/grpc-go/compare/v1.59.0...v1.60.0) --- updated-dependencies: - dependency-name: google.golang.org/grpc dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2023-12-13 12:37:50 +00:00
Alireza Ahmadi	7aa242b64e	Merge pull request #749 from alireza0/dependabot/go_modules/github.com/pelletier/go-toml/v2-2.1.1 Bump github.com/pelletier/go-toml/v2 from 2.1.0 to 2.1.1	2023-12-13 13:37:02 +01:00
shahin-io	cbb3c009cc	Small typo edit (#753 ) * Update install.sh * Update x-ui.sh * Update install.sh	2023-12-13 13:36:16 +01:00
Alireza Ahmadi	d8e8195271	[bug] fix errors in link converter	2023-12-13 13:34:56 +01:00
Alireza Ahmadi	e31ec2cade	[gui] redesign forms	2023-12-13 12:22:08 +01:00
dependabot[bot]	af42723213	Bump github.com/pelletier/go-toml/v2 from 2.1.0 to 2.1.1 Bumps [github.com/pelletier/go-toml/v2](https://github.com/pelletier/go-toml) from 2.1.0 to 2.1.1. - [Release notes](https://github.com/pelletier/go-toml/releases) - [Changelog](https://github.com/pelletier/go-toml/blob/v2/.goreleaser.yaml) - [Commits](https://github.com/pelletier/go-toml/compare/v2.1.0...v2.1.1) --- updated-dependencies: - dependency-name: github.com/pelletier/go-toml/v2 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2023-12-11 21:26:45 +00:00
Alireza Ahmadi	94117f94e8	v1.6.2	2023-12-11 15:17:57 +01:00