Minor fixes (#1943 )

remove drag button on mobile
v2.2.1
2024-02-28 19:53:18 +03:30 · 2024-02-28 19:15:44 +03:30 · 2024-02-28 16:37:00 +03:30 · 2024-02-28 14:35:01 +03:30 · 2024-02-27 21:18:12 +03:30 · 2024-02-27 19:02:23 +03:30
120 changed files with 11861 additions and 5436 deletions
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -1,4 +1,4 @@
-name: Release X-ui dockerhub
+name: Release 3X-UI for Docker
 on:
  push:
    tags:
@@ -11,15 +11,15 @@ jobs:

    steps:
      - name: Check out the code
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4
      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.0.0
+        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
+        uses: docker/setup-buildx-action@v3

-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3.0.0
+      - name: Login to GHCR
+        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -27,15 +27,15 @@ jobs:

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v5.3.0
+        uses: docker/metadata-action@v5
        with:
          images: ghcr.io/${{ github.repository }}

      - name: Build and push Docker image
-        uses: docker/build-push-action@v5.1.0
+        uses: docker/build-push-action@v5
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
-          platforms: linux/amd64, linux/arm64/v8
+          platforms: linux/amd64, linux/arm64/v8, linux/arm/v7, linux/arm/v6, linux/386
          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,4 +1,4 @@
-name: Release 3X-ui
+name: Release 3X-UI

 on:
  push:
@@ -10,22 +10,37 @@ jobs:
  build:
    strategy:
      matrix:
-        platform: [amd64, arm64]
+        platform:
+          - amd64
+          - arm64
+          - armv7
+          - armv6
+          - 386
+          - armv5
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4

      - name: Setup Go
-        uses: actions/setup-go@v5.0.0
+        uses: actions/setup-go@v5
        with:
-          go-version: '1.21'
-          
-      - name: Install dependencies for arm64
-        if: matrix.platform == 'arm64'
+          go-version: '1.22'
+
+      - name: Install dependencies
        run: |
          sudo apt-get update
-          sudo apt install gcc-aarch64-linux-gnu
+          if [ "${{ matrix.platform }}" == "arm64" ]; then
+            sudo apt install gcc-aarch64-linux-gnu
+          elif [ "${{ matrix.platform }}" == "armv7" ]; then
+            sudo apt install gcc-arm-linux-gnueabihf
+          elif [ "${{ matrix.platform }}" == "armv6" ]; then
+            sudo apt install gcc-arm-linux-gnueabihf
+          elif [ "${{ matrix.platform }}" == "386" ]; then
+            sudo apt install gcc-i686-linux-gnu
+          elif [ "${{ matrix.platform }}" == "armv5" ]; then
+            sudo apt install gcc-arm-linux-gnueabi
+          fi

      - name: Build x-ui
        run: |
@@ -33,7 +48,23 @@ jobs:
          export GOOS=linux
          export GOARCH=${{ matrix.platform }}
          if [ "${{ matrix.platform }}" == "arm64" ]; then
+            export GOARCH=arm64
            export CC=aarch64-linux-gnu-gcc
+          elif [ "${{ matrix.platform }}" == "armv7" ]; then
+            export GOARCH=arm
+            export GOARM=7
+            export CC=arm-linux-gnueabihf-gcc
+          elif [ "${{ matrix.platform }}" == "armv6" ]; then
+            export GOARCH=arm
+            export GOARM=6
+            export CC=arm-linux-gnueabihf-gcc
+          elif [ "${{ matrix.platform }}" == "386" ]; then
+            export GOARCH=386
+            export CC=i686-linux-gnu-gcc
+          elif [ "${{ matrix.platform }}" == "armv5" ]; then
+            export GOARCH=arm
+            export GOARM=5
+            export CC=arm-linux-gnueabi-gcc
          fi
          go build -o xui-release -v main.go
          
@@ -46,32 +77,50 @@ jobs:
          cd x-ui/bin
          
          # Download dependencies
+          Xray_URL="https://github.com/XTLS/Xray-core/releases/download/v1.8.8/"
          if [ "${{ matrix.platform }}" == "amd64" ]; then
-            wget https://github.com/XTLS/Xray-core/releases/download/v1.8.6/Xray-linux-64.zip
+            wget ${Xray_URL}Xray-linux-64.zip
            unzip Xray-linux-64.zip
            rm -f Xray-linux-64.zip
-          else
-            wget https://github.com/XTLS/Xray-core/releases/download/v1.8.6/Xray-linux-arm64-v8a.zip
+          elif [ "${{ matrix.platform }}" == "arm64" ]; then
+            wget ${Xray_URL}Xray-linux-arm64-v8a.zip
            unzip Xray-linux-arm64-v8a.zip
            rm -f Xray-linux-arm64-v8a.zip
+          elif [ "${{ matrix.platform }}" == "armv7" ]; then
+            wget ${Xray_URL}Xray-linux-arm32-v7a.zip
+            unzip Xray-linux-arm32-v7a.zip
+            rm -f Xray-linux-arm32-v7a.zip
+          elif [ "${{ matrix.platform }}" == "armv6" ]; then
+            wget ${Xray_URL}Xray-linux-arm32-v6.zip
+            unzip Xray-linux-arm32-v6.zip
+            rm -f Xray-linux-arm32-v6.zip
+          elif [ "${{ matrix.platform }}" == "386" ]; then
+            wget ${Xray_URL}Xray-linux-32.zip
+            unzip Xray-linux-32.zip
+            rm -f Xray-linux-32.zip
+          elif [ "${{ matrix.platform }}" == "armv5" ]; then
+            wget ${Xray_URL}Xray-linux-arm32-v5.zip
+            unzip Xray-linux-arm32-v5.zip
+            rm -f Xray-linux-arm32-v5.zip
          fi
-          rm -f geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat
+          rm -f geoip.dat geosite.dat
          wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geoip.dat
          wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geosite.dat
          wget -O geoip_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geoip.dat
          wget -O geosite_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geosite.dat
+          wget -O geoip_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geoip.dat
+          wget -O geosite_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geosite.dat
          mv xray xray-linux-${{ matrix.platform }}
          cd ../..
          
      - name: Package
        run: tar -zcvf x-ui-linux-${{ matrix.platform }}.tar.gz x-ui
        
-      - name: Upload
-        uses: svenstaro/upload-release-action@2.7.0
+      - name: Upload files to GH release
+        uses: svenstaro/upload-release-action@v2
        with:
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          tag: ${{ github.ref }}
          file: x-ui-linux-${{ matrix.platform }}.tar.gz
          asset_name: x-ui-linux-${{ matrix.platform }}.tar.gz
          prerelease: true
-          overwrite: true
--- a/DockerInit.sh
+++ b/DockerInit.sh
@@ -1,29 +1,40 @@
 #!/bin/sh
-
 case $1 in
    amd64)
        ARCH="64"
        FNAME="amd64"
        ;;
+    i386)
+        ARCH="32"
+        FNAME="i386"
+        ;;
    armv8 | arm64 | aarch64)
        ARCH="arm64-v8a"
        FNAME="arm64"
        ;;
+    armv7 | arm | arm32)
+        ARCH="arm32-v7a"
+        FNAME="arm32"
+        ;;
+    armv6)
+        ARCH="arm32-v6"
+        FNAME="armv6"
+        ;;
    *)
        ARCH="64"
        FNAME="amd64"
        ;;
 esac
-
 mkdir -p build/bin
 cd build/bin
-
-wget "https://github.com/XTLS/Xray-core/releases/download/v1.8.6/Xray-linux-${ARCH}.zip"
+wget "https://github.com/XTLS/Xray-core/releases/download/v1.8.8/Xray-linux-${ARCH}.zip"
 unzip "Xray-linux-${ARCH}.zip"
-rm -f "Xray-linux-${ARCH}.zip" geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat 
+rm -f "Xray-linux-${ARCH}.zip" geoip.dat geosite.dat
 mv xray "xray-linux-${FNAME}"
-
 wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geoip.dat
 wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geosite.dat
 wget -O geoip_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geoip.dat
 wget -O geosite_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geosite.dat
+wget -O geoip_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geoip.dat
+wget -O geosite_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geosite.dat
+cd ../../
--- a/17
+++ b/17
@@ -1,11 +1,9 @@
 # ========================================================
 # Stage: Builder
 # ========================================================
-FROM --platform=$BUILDPLATFORM golang:1.21-alpine AS builder
+FROM golang:1.22-alpine AS builder
 WORKDIR /app
 ARG TARGETARCH
-ENV CGO_ENABLED=1
-ENV CGO_CFLAGS="-D_LARGEFILE64_SOURCE"

 RUN apk --no-cache --update add \
  build-base \
@@ -15,6 +13,8 @@ RUN apk --no-cache --update add \

 COPY . .

+ENV CGO_ENABLED=1
+ENV CGO_CFLAGS="-D_LARGEFILE64_SOURCE"
 RUN go build -o build/x-ui main.go
 RUN ./DockerInit.sh "$TARGETARCH"

@@ -28,11 +28,13 @@ WORKDIR /app
 RUN apk add --no-cache --update \
  ca-certificates \
  tzdata \
-  fail2ban
+  fail2ban \
+  bash
+
+COPY --from=builder /app/build/ /app/
+COPY --from=builder /app/DockerEntrypoint.sh /app/
+COPY --from=builder /app/x-ui.sh /usr/bin/x-ui

-COPY --from=builder  /app/build/ /app/
-COPY --from=builder  /app/DockerEntrypoint.sh /app/
-COPY --from=builder  /app/x-ui.sh /usr/bin/x-ui

 # Configure fail2ban
 RUN rm -f /etc/fail2ban/jail.d/alpine-ssh.conf \
@@ -47,4 +49,5 @@ RUN chmod +x \
  /usr/bin/x-ui

 VOLUME [ "/etc/x-ui" ]
+CMD [ "./x-ui" ]
 ENTRYPOINT [ "/app/DockerEntrypoint.sh" ]
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-# 3x-ui
+# 3X-UI

-> **Disclaimer: This project is only for personal learning and communication, please do not use it for illegal purposes, please do not use it in a production environment**
+<p align="center"><a href="#"><img src="./media/3X-UI.png" alt="Image"></a></p>
+
+**An Advanced Web Panel • Built on Xray Core**

 [![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
 [![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](#)
@@ -8,64 +10,77 @@
 [![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](#)
 [![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)

-3x-ui panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese,Russian,Vietnamese,Spanish)**
-**If you think this project is helpful to you, you may wish to give a** :star2:
+> **Disclaimer:** This project is only for personal learning and communication, please do not use it for illegal purposes, please do not use it in a production environment

-**Buy Me a Coffee :**
+**If this project is helpful to you, you may wish to give it a**:star2:

- Tron USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+<p align="left"><a href="#"><img width="125" src="https://github.com/MHSanaei/3x-ui/assets/115543613/7aa895dd-048a-42e7-989b-afd41a74e2e1" alt="Image"></a></p>

-# Install & Upgrade
+- USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+
+## Install & Upgrade

 ```
 bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh)
 ```

-# Install custom version
+## Install Custom Version

-To install your desired version you can add the version to the end of install command. Example for ver `v2.0.0`:
+To install your desired version, add the version to the end of the installation command. e.g., ver `v2.2.1`:

 ```
-bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.0.0
+bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.2.1
 ```

-# SSL
+## SSL Certificate

+<details>
+  <summary>Click for SSL Certificate</summary>
+
+### Cloudflare
+
+The Management script has a built-in SSL certificate application for Cloudflare. To use this script to apply for a certificate, you need the following:
+
+- Cloudflare registered email
+- Cloudflare Global API Key
+- The domain name has been resolved to the current server through cloudflare
+
+**1:** Run the`x-ui`command on the terminal, then choose `Cloudflare SSL Certificate`.
+
+
+### Certbot
 ```
 apt-get install certbot -y
 certbot certonly --standalone --agree-tos --register-unsafely-without-email -d yourdomain.com
 certbot renew --dry-run
 ```

-You also can use `x-ui` menu then select `SSL Certificate Management`
+***Tip:*** *Certbot is also built into the Management script. You can run the `x-ui` command, then choose `SSL Certificate Management`.*

-# Features
+</details>

- System Status Monitoring
- Search within all inbounds and clients
- Support Dark/Light theme UI
- Support multi-user multi-protocol, web page visualization operation
- Supported protocols: vmess, vless, trojan, shadowsocks, dokodemo-door, socks, http
- Support for configuring more transport configurations
- Traffic statistics, limit traffic, limit expiration time
- Customizable xray configuration templates
- Support https access panel (self-provided domain name + ssl certificate)
- Support one-click SSL certificate application and automatic renewal
- For more advanced configuration items, please refer to the panel
- Fix api routes (user setting will create with api)
- Support to change configs by different items provided in panel
- Support export/import database from panel
-
-# Manual Install & Upgrade
+## Manual Install & Upgrade

 <details>
-  <summary>Click for Manual Install details</summary>
+  <summary>Click for manual install details</summary>
+
+#### Usage

 1. To download the latest version of the compressed package directly to your server, run the following command:

 ```sh
 ARCH=$(uname -m)
-[[ "${ARCH}" == "aarch64" || "${ARCH}" == "arm64" ]] && XUI_ARCH="arm64" || XUI_ARCH="amd64"
+case "${ARCH}" in
+  x86_64 | x64 | amd64) XUI_ARCH="amd64" ;;
+  i*86 | x86) XUI_ARCH="386" ;;
+  armv8* | armv8 | arm64 | aarch64) XUI_ARCH="arm64" ;;
+  armv7* | armv7) XUI_ARCH="armv7" ;;
+  armv6* | armv6) XUI_ARCH="armv6" ;;
+  armv5* | armv5) XUI_ARCH="armv5" ;;
+  *) XUI_ARCH="amd64" ;;
+esac
+
+
 wget https://github.com/MHSanaei/3x-ui/releases/latest/download/x-ui-linux-${XUI_ARCH}.tar.gz
 ```

@@ -73,7 +88,16 @@ wget https://github.com/MHSanaei/3x-ui/releases/latest/download/x-ui-linux-${XUI

 ```sh
 ARCH=$(uname -m)
-[[ "${ARCH}" == "aarch64" || "${ARCH}" == "arm64" ]] && XUI_ARCH="arm64" || XUI_ARCH="amd64"
+case "${ARCH}" in
+  x86_64 | x64 | amd64) XUI_ARCH="amd64" ;;
+  i*86 | x86) XUI_ARCH="386" ;;
+  armv8* | armv8 | arm64 | aarch64) XUI_ARCH="arm64" ;;
+  armv7* | armv7) XUI_ARCH="armv7" ;;
+  armv6* | armv6) XUI_ARCH="armv6" ;;
+  armv5* | armv5) XUI_ARCH="armv5" ;;
+  *) XUI_ARCH="amd64" ;;
+esac
+
 cd /root/
 rm -rf x-ui/ /usr/local/x-ui/ /usr/bin/x-ui
 tar zxvf x-ui-linux-${XUI_ARCH}.tar.gz
@@ -88,11 +112,13 @@ systemctl restart x-ui

 </details>

-# Install with Docker
+## Install with Docker

 <details>
  <summary>Click for Docker details</summary>

+#### Usage
+
 1. Install Docker:

   ```sh
@@ -125,63 +151,132 @@ systemctl restart x-ui
      ghcr.io/mhsanaei/3x-ui:latest
   ```

-</details>
-
-# Default settings
-
-<details>
-  <summary>Click for Default settings details</summary>
-
- Port: 2053
- username and password will be generated randomly if you skip to modify your own security(x-ui "7")
- database path: /etc/x-ui/x-ui.db
- xray config path: /usr/local/x-ui/bin/config.json
-
-Before you set ssl on settings
-
- http://ip:2053/panel
- http://domain:2053/panel
-
-After you set ssl on settings
-
- https://yourdomain:2053/panel
-</details>
-
-# Xray Configurations:
-
-<details>
-  <summary>Click for Xray Configurations details</summary>
-
-**copy and paste to xray Configuration :** (you don't need to do this if you have a fresh install)
-
- [traffic](./media/configs/traffic.json)
- [traffic + Block all Iran IP address](./media/configs/traffic+block-iran-ip.json)
- [traffic + Block all Iran Domains](./media/configs/traffic+block-iran-domains.json)
- [traffic + Block Ads + Use IPv4 for Google](./media/configs/traffic+block-ads+ipv4-google.json)
- [traffic + Block Ads + Route Google + Netflix + Spotify + OpenAI (ChatGPT) to WARP](./media/configs/traffic+block-ads+warp.json)
-
-</details>
-
-# [WARP Configuration](https://gitlab.com/fscarmen/warp) (Optional)
-
-<details>
-  <summary>Click for WARP Configuration details</summary>
-
-If you want to use routing to WARP follow steps as below:
-
-1. If you already installed warp, you can uninstall using below command:
+update to latest version

   ```sh
-   warp u
+    cd 3x-ui
+    docker compose down
+    docker compose pull 3x-ui
+    docker compose up -d
   ```

-2. Install WARP on **socks proxy mode**:
+remove 3x-ui from docker 
+
+   ```sh
+    docker stop 3x-ui
+    docker rm 3x-ui
+    cd --
+    rm -r 3x-ui
+   ```
+
+</details>
+
+
+## Recommended OS
+
+- Ubuntu 20.04+
+- Debian 11+
+- CentOS 8+
+- Fedora 36+
+- Arch Linux
+- Manjaro
+- Armbian
+- AlmaLinux 9+
+- Rockylinux 9+
+
+## Supported Architectures and Devices
+
+<details>
+  <summary>Click for Supported Architectures and devices details</summary>
+
+Our platform offers compatibility with a diverse range of architectures and devices, ensuring flexibility across various computing environments. The following are key architectures that we support:
+
+- **amd64**: This prevalent architecture is the standard for personal computers and servers, accommodating most modern operating systems seamlessly.
+
+- **x86 / i386**: Widely adopted in desktop and laptop computers, this architecture enjoys broad support from numerous operating systems and applications, including but not limited to Windows, macOS, and Linux systems.
+
+- **armv8 / arm64 / aarch64**: Tailored for contemporary mobile and embedded devices, such as smartphones and tablets, this architecture is exemplified by devices like Raspberry Pi 4, Raspberry Pi 3, Raspberry Pi Zero 2/Zero 2 W, Orange Pi 3 LTS, and more.
+
+- **armv7 / arm / arm32**: Serving as the architecture for older mobile and embedded devices, it remains widely utilized in devices like Orange Pi Zero LTS, Orange Pi PC Plus, Raspberry Pi 2, among others.
+
+- **armv6 / arm / arm32**: Geared towards very old embedded devices, this architecture, while less prevalent, is still in use. Devices such as Raspberry Pi 1, Raspberry Pi Zero/Zero W, rely on this architecture.
+
+- **armv5 / arm / arm32**: An older architecture primarily associated with early embedded systems, it is less common today but may still be found in legacy devices like early Raspberry Pi versions and some older smartphones.
+</details>
+
+## Languages
+
+- English
+- Farsi
+- Chinese
+- Russian
+- Vietnamese
+- Spanish
+- Indonesian 
+- Ukrainian
+
+
+## Features
+
+- System Status Monitoring
+- Search within all inbounds and clients
+- Dark/Light theme
+- Supports multi-user and multi-protocol
+- Supports protocols, including VMess, VLESS, Trojan, Shadowsocks, Dokodemo-door, Socks, HTTP, wireguard
+- Supports XTLS native Protocols, including RPRX-Direct, Vision, REALITY
+- Traffic statistics, traffic limit, expiration time limit
+- Customizable Xray configuration templates
+- Supports HTTPS access panel (self-provided domain name + SSL certificate)
+- Supports One-Click SSL certificate application and automatic renewal
+- For more advanced configuration items, please refer to the panel
+- Fixes API routes (user setting will be created with API)
+- Supports changing configs by different items provided in the panel.
+- Supports export/import database from the panel
+
+
+## Default Settings
+
+<details>
+  <summary>Click for default settings details</summary>
+
+  ### Information
+
+- **Port:** 2053
+- **Username & Password:** It will be generated randomly if you skip modifying.
+- **Database Path:**
+  - /etc/x-ui/x-ui.db
+- **Xray Config Path:**
+  - /usr/local/x-ui/bin/config.json
+- **Web Panel Path w/o Deploying SSL:**
+  - http://ip:2053/panel
+  - http://domain:2053/panel
+- **Web Panel Path w/ Deploying SSL:**
+  - https://domain:2053/panel
+ 
+</details>
+
+## [WARP Configuration](https://gitlab.com/fscarmen/warp)
+
+<details>
+  <summary>Click for WARP configuration details</summary>
+
+#### Usage
+
+If you want to use routing to WARP before v2.1.0 follow steps as below:
+
+**1.** Install WARP on **SOCKS Proxy Mode**:

   ```sh
   bash <(curl -sSL https://raw.githubusercontent.com/hamid-gh98/x-ui-scripts/main/install_warp_proxy.sh)
   ```

-3. Turn on the config you need in panel or [Copy and paste this file to Xray Configuration](./media/configs/traffic+block-ads+warp.json)
+**2.** If you already installed warp, you can uninstall using below command:
+
+   ```sh
+   warp u
+   ```
+
+**3.** Turn on the config you need in panel

   Config Features:

@@ -191,12 +286,14 @@ If you want to use routing to WARP follow steps as below:

 </details>

-# IP Limit
+## IP Limit

 <details>
-  <summary>Click for IP Limit details</summary>
+  <summary>Click for IP limit details</summary>

-**Note: IP Limit won't work correctly when using IP Tunnel**
+#### Usage
+
+**Note:** IP Limit won't work correctly when using IP Tunnel

 - For versions up to `v1.6.1`:

@@ -210,44 +307,46 @@ If you want to use routing to WARP follow steps as below:
    2. Select `IP Limit Management`.
    3. Choose the appropriate options based on your needs.
   
-  - make sure you have access.log on your Xray Configuration
+  - make sure you have ./access.log on your Xray Configuration after v2.1.3 we have an option for it
  
  ```sh
    "log": {
-    "loglevel": "warning",
    "access": "./access.log",
-    "error": "./error.log"
+    "dnsLog": false,
+    "loglevel": "warning"
    },
  ```

 </details>

-# Telegram Bot
+## Telegram Bot

 <details>
-  <summary>Click for Telegram Bot details</summary>
+  <summary>Click for Telegram bot details</summary>

-X-UI supports daily traffic notification, panel login reminder and other functions through the Tg robot. To use the Tg robot, you need to apply for the specific application tutorial. You can refer to the [blog](https://coderfan.net/how-to-use-telegram-bot-to-alarm-you-when-someone-login-into-your-vps.html)
-Set the robot-related parameters in the panel background, including:
+#### Usage

- Tg robot Token
- Tg robot ChatId
- Tg robot cycle runtime, in crontab syntax
- Tg robot Expiration threshold
- Tg robot Traffic threshold
- Tg robot Enable send backup in cycle runtime
- Tg robot Enable CPU usage alarm threshold
+The web panel supports daily traffic, panel login, database backup, system status, client info, and other notification and functions through the Telegram Bot. To use the bot, you need to set the bot-related parameters in the panel, including:

-Reference syntax:
+- Telegram Token
+- Admin Chat ID(s)
+- Notification Time (in cron syntax)
+- Expiration Date Notification
+- Traffic Cap Notification
+- Database Backup
+- CPU Load Notification

- 30 \* \* \* \* \* //Notify at the 30s of each point
- 0 \*/10 \* \* \* \* //Notify at the first second of each 10 minutes
- @hourly // hourly notification
- @daily // Daily notification (00:00 in the morning)
- @weekly // weekly notification
- @every 8h // notify every 8 hours

-# Telegram Bot Features
+**Reference syntax:**
+
+- `30 \* \* \* \* \*` - Notify at the 30s of each point
+- `0 \*/10 \* \* \* \*` - Notify at the first second of each 10 minutes
+- `@hourly` - Hourly notification
+- `@daily` - Daily notification (00:00 in the morning)
+- `@weekly` - weekly notification
+- `@every 8h` - Notify every 8 hours
+
+### Telegram Bot Features

 - Report periodic
 - Login notification
@@ -262,9 +361,8 @@ Reference syntax:
 - Check depleted users
 - Receive backup by request and in periodic reports
 - Multi language bot
-</details>

-# Setting up Telegram bot
+### Setting up Telegram bot

 - Start [Botfather](https://t.me/BotFather) in your Telegram account:
    ![Botfather](./media/botfather.png)
@@ -284,12 +382,15 @@ Enter the user ID in input field number 4. The Telegram accounts with this id wi
 - How to get Telegram user ID? Use this [bot](https://t.me/useridinfobot), Start the bot and it will give you the Telegram user ID.
 ![User ID](./media/user-id.png)

+</details>

-# API routes
+## API Routes

 <details>
  <summary>Click for API routes details</summary>

+#### Usage
+
 - `/login` with `POST` user data: `{username: '', password: ''}` for login
 - `/panel/api/inbounds` base for following actions:

@@ -324,10 +425,12 @@ Enter the user ID in input field number 4. The Telegram accounts with this id wi
 - [<img src="https://run.pstmn.io/button.svg" alt="Run In Postman" style="width: 128px; height: 32px;">](https://app.getpostman.com/run-collection/16802678-1a4c9270-ac77-40ed-959a-7aa56dc4a415?action=collection%2Ffork&source=rip_markdown&collection-url=entityId%3D16802678-1a4c9270-ac77-40ed-959a-7aa56dc4a415%26entityType%3Dcollection%26workspaceId%3D2cd38c01-c851-4a15-a972-f181c23359d9)
 </details>

-# Environment Variables
+## Environment Variables

 <details>
-  <summary>Click for Environment Variables details</summary>
+  <summary>Click for environment variables details</summary>
+
+#### Usage

 | Variable       |                      Type                      | Default       |
 | -------------- | :--------------------------------------------: | :------------ |
@@ -345,25 +448,7 @@ XUI_BIN_FOLDER="bin" XUI_DB_FOLDER="/etc/x-ui" go build main.go

 </details>

-# A Special Thanks To
-
- [alireza0](https://github.com/alireza0/)
-
-# Acknowledgment
-
- [Iran v2ray rules](https://github.com/chocolate4u/Iran-v2ray-rules) (License: **GPL-3.0**): _Enhanced v2ray/xray and v2ray/xray-clients routing rules with built-in Iranian domains and a focus on security and adblocking._
- [Iran Hosted Domains](https://github.com/bootmortis/iran-hosted-domains) (License: **MIT**): _A comprehensive list of Iranian domains and services that are hosted within the country._
- [PersianBlocker](https://github.com/MasterKia/PersianBlocker) (License: **AGPLv3**): _An optimal and extensive list to block ads and trackers on Persian websites._
-
-# Suggestion System
-
- Ubuntu 20.04+
- Debian 10+
- CentOS 8+
- Fedora 36+
- Arch Linux
-
-# Pictures
+## Preview

 ![1](./media/1.png)
 ![2](./media/2.png)
@@ -371,7 +456,17 @@ XUI_BIN_FOLDER="bin" XUI_DB_FOLDER="/etc/x-ui" go build main.go
 ![4](./media/4.png)
 ![5](./media/5.png)
 ![6](./media/6.png)
+![7](./media/7.png)

-## Stargazers over time
+## A Special Thanks to
+
+- [alireza0](https://github.com/alireza0/)
+
+## Acknowledgment
+
+- [Iran v2ray rules](https://github.com/chocolate4u/Iran-v2ray-rules) (License: **GPL-3.0**): _Enhanced v2ray/xray and v2ray/xray-clients routing rules with built-in Iranian domains and a focus on security and adblocking._
+- [Vietnam Adblock rules](https://github.com/vuong2023/vn-v2ray-rules) (License: **GPL-3.0**): _A hosted domain hosted in Vietnam and blocklist with the most efficiency for Vietnamese._
+
+## Stargazers over Time

 [![Stargazers over time](https://starchart.cc/MHSanaei/3x-ui.svg)](https://starchart.cc/MHSanaei/3x-ui)
--- a/config/version
+++ b/config/version
@@ -1 +1 @@
-2.0.0
+2.2.1
--- a/database/db.go
+++ b/database/db.go
@@ -21,6 +21,7 @@ var db *gorm.DB
 var initializers = []func() error{
 	initUser,
 	initInbound,
+	initOutbound,
 	initSetting,
 	initInboundClientIps,
 	initClientTraffic,
@@ -51,6 +52,10 @@ func initInbound() error {
 	return db.AutoMigrate(&model.Inbound{})
 }

+func initOutbound() error {
+	return db.AutoMigrate(&model.OutboundTraffics{})
+}
+
 func initSetting() error {
 	return db.AutoMigrate(&model.Setting{})
 }
--- a/database/model/model.go
+++ b/database/model/model.go
@@ -37,13 +37,22 @@ type Inbound struct {

 	// config part
 	Listen         string   `json:"listen" form:"listen"`
-	Port           int      `json:"port" form:"port" gorm:"unique"`
+	Port           int      `json:"port" form:"port"`
 	Protocol       Protocol `json:"protocol" form:"protocol"`
 	Settings       string   `json:"settings" form:"settings"`
 	StreamSettings string   `json:"streamSettings" form:"streamSettings"`
 	Tag            string   `json:"tag" form:"tag" gorm:"unique"`
 	Sniffing       string   `json:"sniffing" form:"sniffing"`
 }
+
+type OutboundTraffics struct {
+	Id    int    `json:"id" form:"id" gorm:"primaryKey;autoIncrement"`
+	Tag   string `json:"tag" form:"tag" gorm:"unique"`
+	Up    int64  `json:"up" form:"up" gorm:"default:0"`
+	Down  int64  `json:"down" form:"down" gorm:"default:0"`
+	Total int64  `json:"total" form:"total" gorm:"default:0"`
+}
+
 type InboundClientIps struct {
 	Id          int    `json:"id" gorm:"primaryKey;autoIncrement"`
 	ClientEmail string `json:"clientEmail" form:"clientEmail" gorm:"unique"`
--- a/go.mod
+++ b/go.mod
@@ -1,71 +1,71 @@
 module x-ui

-go 1.21.4
+go 1.22.0

 require (
 	github.com/Calidity/gin-sessions v1.3.1
 	github.com/gin-contrib/gzip v0.0.6
 	github.com/gin-gonic/gin v1.9.1
 	github.com/goccy/go-json v0.10.2
-	github.com/mymmrac/telego v0.28.0
-	github.com/nicksnyder/go-i18n/v2 v2.3.0
+	github.com/mymmrac/telego v0.29.1
+	github.com/nicksnyder/go-i18n/v2 v2.4.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
+	github.com/shirou/gopsutil/v3 v3.24.1
+	github.com/valyala/fasthttp v1.52.0
+	github.com/xtls/xray-core v1.8.8
 	go.uber.org/atomic v1.11.0
 	golang.org/x/text v0.14.0
-	google.golang.org/grpc v1.59.0
-	gorm.io/driver/sqlite v1.5.4
-	gorm.io/gorm v1.25.5
+	google.golang.org/grpc v1.62.0
+	gorm.io/driver/sqlite v1.5.5
+	gorm.io/gorm v1.25.7
 )

 require (
-	github.com/andybalholm/brotli v1.0.6 // indirect
+	github.com/andybalholm/brotli v1.1.0 // indirect
 	github.com/bytedance/sonic v1.10.2 // indirect
 	github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d // indirect
 	github.com/chenzhuoyu/iasm v0.9.1 // indirect
-	github.com/cloudflare/circl v1.3.6 // indirect
+	github.com/cloudflare/circl v1.3.7 // indirect
 	github.com/dgryski/go-metro v0.0.0-20211217172704-adc40b04c140 // indirect
 	github.com/fasthttp/router v1.4.22 // indirect
 	github.com/francoispqt/gojay v1.2.13 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.3 // indirect
-	github.com/gaukas/godicttls v0.0.4 // indirect
 	github.com/gin-contrib/sse v0.1.0 // indirect
 	github.com/go-ole/go-ole v1.3.0 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/go-playground/validator/v10 v10.15.5 // indirect
+	github.com/go-playground/validator/v10 v10.17.0 // indirect
 	github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572 // indirect
 	github.com/golang/protobuf v1.5.3 // indirect
 	github.com/google/btree v1.1.2 // indirect
-	github.com/google/pprof v0.0.0-20231101202521-4ca4178f5c7a // indirect
-	github.com/gorilla/context v1.1.1 // indirect
-	github.com/gorilla/securecookie v1.1.1 // indirect
-	github.com/gorilla/sessions v1.2.1 // indirect
+	github.com/google/pprof v0.0.0-20240225044709-fd706174c886 // indirect
+	github.com/gorilla/context v1.1.2 // indirect
+	github.com/gorilla/securecookie v1.1.2 // indirect
+	github.com/gorilla/sessions v1.2.2 // indirect
 	github.com/gorilla/websocket v1.5.1 // indirect
+	github.com/grbit/go-json v0.11.0 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
-	github.com/klauspost/compress v1.17.2 // indirect
-	github.com/klauspost/cpuid/v2 v2.2.6 // indirect
+	github.com/klauspost/compress v1.17.7 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.7 // indirect
 	github.com/leodido/go-urn v1.2.4 // indirect
-	github.com/lufia/plan9stats v0.0.0-20230326075908-cb1d2100619a // indirect
+	github.com/lufia/plan9stats v0.0.0-20231016141302-07b5767bb0ed // indirect
 	github.com/mattn/go-isatty v0.0.19 // indirect
-	github.com/mattn/go-sqlite3 v1.14.17 // indirect
+	github.com/mattn/go-sqlite3 v1.14.19 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/onsi/ginkgo/v2 v2.13.1 // indirect
+	github.com/onsi/ginkgo/v2 v2.15.0 // indirect
 	github.com/pires/go-proxyproto v0.7.0 // indirect
 	github.com/power-devops/perfstat v0.0.0-20221212215047-62379fc7944b // indirect
-	github.com/quic-go/qtls-go1-20 v0.4.1 // indirect
-	github.com/quic-go/quic-go v0.40.0 // indirect
-	github.com/refraction-networking/utls v1.5.4 // indirect
+	github.com/quic-go/quic-go v0.41.0 // indirect
+	github.com/refraction-networking/utls v1.6.3 // indirect
 	github.com/riobard/go-bloom v0.0.0-20200614022211-cdc8013cb5b3 // indirect
 	github.com/rogpeppe/go-internal v1.11.0 // indirect
-	github.com/sagernet/sing v0.2.17 // indirect
-	github.com/sagernet/sing-shadowsocks v0.2.5 // indirect
+	github.com/sagernet/sing v0.3.2 // indirect
+	github.com/sagernet/sing-shadowsocks v0.2.6 // indirect
 	github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
 	github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb // indirect
 	github.com/shoenig/go-m1cpu v0.1.6 // indirect
@@ -75,25 +75,25 @@ require (
 	github.com/ugorji/go/codec v1.2.11 // indirect
 	github.com/v2fly/ss-bloomring v0.0.0-20210312155135-28617310f63e // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.51.0 // indirect
+	github.com/valyala/fastjson v1.6.4 // indirect
 	github.com/vishvananda/netlink v1.2.1-beta.2.0.20230316163032-ced5aaba43e3 // indirect
 	github.com/vishvananda/netns v0.0.4 // indirect
 	github.com/xtls/reality v0.0.0-20231112171332-de1173cf2b19 // indirect
 	github.com/yusufpapurcu/wmi v1.2.3 // indirect
-	go.uber.org/mock v0.3.0 // indirect
-	go4.org/netipx v0.0.0-20230824141953-6213f710f925 // indirect
+	go.uber.org/mock v0.4.0 // indirect
+	go4.org/netipx v0.0.0-20231129151722-fdeea329fbba // indirect
 	golang.org/x/arch v0.6.0 // indirect
-	golang.org/x/crypto v0.15.0 // indirect
-	golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa // indirect
-	golang.org/x/mod v0.14.0 // indirect
-	golang.org/x/net v0.18.0 // indirect
-	golang.org/x/sys v0.15.0 // indirect
-	golang.org/x/time v0.4.0 // indirect
-	golang.org/x/tools v0.15.0 // indirect
+	golang.org/x/crypto v0.19.0 // indirect
+	golang.org/x/exp v0.0.0-20240222234643-814bf88cf225 // indirect
+	golang.org/x/mod v0.15.0 // indirect
+	golang.org/x/net v0.21.0 // indirect
+	golang.org/x/sys v0.17.0 // indirect
+	golang.org/x/time v0.5.0 // indirect
+	golang.org/x/tools v0.18.0 // indirect
 	golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2 // indirect
-	golang.zx2c4.com/wireguard v0.0.0-20231022001213-2e0774f246fb // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20231106174013-bbf56f31fb17 // indirect
-	google.golang.org/protobuf v1.31.0 // indirect
+	golang.zx2c4.com/wireguard v0.0.0-20231211153847-12269c276173 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20240221002015-b0ce06bbee7c // indirect
+	google.golang.org/protobuf v1.32.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 	gvisor.dev/gvisor v0.0.0-20231104011432-48a6d7d5bd0b // indirect
 	lukechampine.com/blake3 v1.2.1 // indirect
--- a/go.sum
+++ b/go.sum
@@ -12,8 +12,8 @@ github.com/BurntSushi/toml v1.3.2 h1:o7IhLm0Msx3BaB+n3Ag7L8EVlByGnpq14C4YWiu/gL8
 github.com/BurntSushi/toml v1.3.2/go.mod h1:CxXYINrC8qIiEnFrOxCa7Jy5BFHlXnUU2pbicEuybxQ=
 github.com/Calidity/gin-sessions v1.3.1 h1:nF3dCBWa7TZ4j26iYLwGRmzZy9YODhWoOS3fmi+snyE=
 github.com/Calidity/gin-sessions v1.3.1/go.mod h1:I0+QE6qkO50TeN/n6If6novvxHk4Isvr23U8EdvPdns=
-github.com/andybalholm/brotli v1.0.6 h1:Yf9fFpf49Zrxb9NlQaluyE92/+X7UVHlhMNJN2sxfOI=
-github.com/andybalholm/brotli v1.0.6/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
+github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
 github.com/anmitsu/go-shlex v0.0.0-20161002113705-648efa622239/go.mod h1:2FmKhYUyUczH0OGQWaF5ceTx0UBShxjsH6f8oGKYe2c=
 github.com/beorn7/perks v0.0.0-20180321164747-3a771d992973/go.mod h1:Dwedo/Wpr24TaqPxmxbtue+5NUziq4I4S80YR8gNf3Q=
 github.com/bradfitz/go-smtpd v0.0.0-20170404230938-deb6d6237625/go.mod h1:HYsPBTaaSFSlLx/70C2HPIMNZpVV8+vt/A+FMnYP11g=
@@ -30,8 +30,8 @@ github.com/chenzhuoyu/iasm v0.9.0/go.mod h1:Xjy2NpN3h7aUqeqM+woSuuvxmIe6+DDsiNLI
 github.com/chenzhuoyu/iasm v0.9.1 h1:tUHQJXo3NhBqw6s33wkGn9SP3bvrWLdlVIJ3hQBL7P0=
 github.com/chenzhuoyu/iasm v0.9.1/go.mod h1:Xjy2NpN3h7aUqeqM+woSuuvxmIe6+DDsiNLIrkAmYog=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
-github.com/cloudflare/circl v1.3.6 h1:/xbKIqSHbZXHwkhbrhrt2YOHIwYJlXH94E3tI/gDlUg=
-github.com/cloudflare/circl v1.3.6/go.mod h1:5XYMA4rFBvNIrhs50XuiBJ15vF2pZn4nnUKZrLbUZFA=
+github.com/cloudflare/circl v1.3.7 h1:qlCDlTPz2n9fu58M0Nh1J/JzcFpfgkFHHX3O35r5vcU=
+github.com/cloudflare/circl v1.3.7/go.mod h1:sRTcRWXGLrKw6yIGJ+l7amYJFfAXbZG0kBSc8r4zxgA=
 github.com/coreos/go-systemd v0.0.0-20181012123002-c6f51f82210d/go.mod h1:F5haX7vjVVG0kc13fIWeqUViNPyEJxv/OmvnBo0Yme4=
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
@@ -49,8 +49,6 @@ github.com/francoispqt/gojay v1.2.13/go.mod h1:ehT5mTG4ua4581f1++1WLG0vPdaA9HaiD
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
 github.com/gabriel-vasile/mimetype v1.4.3 h1:in2uUcidCuFcDKtdcBxlR0rJ1+fsokWf+uqxgUFjbI0=
 github.com/gabriel-vasile/mimetype v1.4.3/go.mod h1:d8uq/6HKRL6CGdk+aubisF/M5GcPfT7nKyLpA0lbSSk=
-github.com/gaukas/godicttls v0.0.4 h1:NlRaXb3J6hAnTmWdsEKb9bcSBD6BvcIjdGdeb0zfXbk=
-github.com/gaukas/godicttls v0.0.4/go.mod h1:l6EenT4TLWgTdwslVb4sEMOCf7Bv0JAK67deKr9/NCI=
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
 github.com/ghodss/yaml v1.0.1-0.20220118164431-d8423dcdf344 h1:Arcl6UOIS/kgO2nW3A65HN+7CMjSDP/gofXL4CZt1V4=
 github.com/ghodss/yaml v1.0.1-0.20220118164431-d8423dcdf344/go.mod h1:GIjDIg/heH5DOkXY3YJ/wNhfHsQHoXGjl8G8amsYQ1I=
@@ -78,8 +76,8 @@ github.com/go-playground/universal-translator v0.18.0/go.mod h1:UvRDBj+xPUEGrFYl
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
 github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
 github.com/go-playground/validator/v10 v10.10.0/go.mod h1:74x4gJWsvQexRdW8Pn3dXSGrTK4nAUsbPlLADvpJkos=
-github.com/go-playground/validator/v10 v10.15.5 h1:LEBecTWb/1j5TNY1YYG2RcOUN3R7NLylN+x8TTueE24=
-github.com/go-playground/validator/v10 v10.15.5/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU=
+github.com/go-playground/validator/v10 v10.17.0 h1:SmVVlfAOtlZncTxRuinDPomC2DkXJ4E5T9gDA0AIH74=
+github.com/go-playground/validator/v10 v10.17.0/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU=
 github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572 h1:tfuBGBXKqDEevZMzYi5KSi8KkcZtzBcTgAUUtapy0OI=
 github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572/go.mod h1:9Pwr4B2jHnOSGXyyzV8ROjYa2ojvAY6HCGYYfMoC3Ls=
 github.com/goccy/go-json v0.9.7/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
@@ -90,8 +88,8 @@ github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfU
 github.com/golang/lint v0.0.0-20180702182130-06c8688daad7/go.mod h1:tluoj9z5200jBnyusfRPU2LqT6J+DAorxEvtC7LHB+E=
 github.com/golang/mock v1.1.1/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
 github.com/golang/mock v1.2.0/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
-github.com/golang/mock v1.6.0 h1:ErTB+efbowRARo13NNdxyJji2egdxLGQhRaY+DUumQc=
-github.com/golang/mock v1.6.0/go.mod h1:p6yTPP+5HYm5mzsMV8JkE6ZKdX+/wYM6Hr+LicevLPs=
+github.com/golang/mock v1.7.0-rc.1 h1:YojYx61/OLFsiv6Rw1Z96LpldJIy31o+UHmwAUMJ6/U=
+github.com/golang/mock v1.7.0-rc.1/go.mod h1:s42URUywIqd+OcERslBJvOjepvNymP31m3q8d/GkuRs=
 github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
@@ -109,21 +107,25 @@ github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeN
 github.com/google/go-github v17.0.0+incompatible/go.mod h1:zLgOLi98H3fifZn+44m+umXrS52loVEgC2AApnigrVQ=
 github.com/google/go-querystring v1.0.0/go.mod h1:odCYkC5MyYFN7vkCjXpyrEuKhc/BUO6wN/zVPAxq5ck=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/google/gofuzz v1.2.0 h1:xRy4A+RhZaiKjJ1bPfwQ8sedCA+YS2YcCHW6ec7JMi0=
+github.com/google/gofuzz v1.2.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
 github.com/google/martian v2.1.0+incompatible/go.mod h1:9I4somxYTbIHy5NJKHRl3wXiIaQGbYVAs8BPL6v8lEs=
 github.com/google/pprof v0.0.0-20181206194817-3ea8567a2e57/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc=
-github.com/google/pprof v0.0.0-20231101202521-4ca4178f5c7a h1:fEBsGL/sjAuJrgah5XqmmYsTLzJp/TO9Lhy39gkverk=
-github.com/google/pprof v0.0.0-20231101202521-4ca4178f5c7a/go.mod h1:czg5+yv1E0ZGTi6S6vVK1mke0fV+FaUhNGcd6VRS9Ik=
+github.com/google/pprof v0.0.0-20240225044709-fd706174c886 h1:JSJUTZTQT1Gzb2ROdAKOY3HwzBYcclS2GgumhMfHqjw=
+github.com/google/pprof v0.0.0-20240225044709-fd706174c886/go.mod h1:czg5+yv1E0ZGTi6S6vVK1mke0fV+FaUhNGcd6VRS9Ik=
 github.com/googleapis/gax-go v2.0.0+incompatible/go.mod h1:SFVmujtThgffbyetf+mdk2eWhX2bMyUtNHzFKcPA9HY=
 github.com/googleapis/gax-go/v2 v2.0.3/go.mod h1:LLvjysVCY1JZeum8Z6l8qUty8fiNwE08qbEPm1M08qg=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
-github.com/gorilla/context v1.1.1 h1:AWwleXJkX/nhcU9bZSnZoi3h/qGYqQAGhq6zZe/aQW8=
-github.com/gorilla/context v1.1.1/go.mod h1:kBGZzfjB9CEq2AlWe17Uuf7NDRt0dE0s8S51q0aT7Yg=
-github.com/gorilla/securecookie v1.1.1 h1:miw7JPhV+b/lAHSXz4qd/nN9jRiAFV5FwjeKyCS8BvQ=
-github.com/gorilla/securecookie v1.1.1/go.mod h1:ra0sb63/xPlUeL+yeDciTfxMRAA+MP+HVt/4epWDjd4=
-github.com/gorilla/sessions v1.2.1 h1:DHd3rPN5lE3Ts3D8rKkQ8x/0kqfeNmBAaiSi+o7FsgI=
-github.com/gorilla/sessions v1.2.1/go.mod h1:dk2InVEVJ0sfLlnXv9EAgkf6ecYs/i80K/zI+bUmuGM=
+github.com/gorilla/context v1.1.2 h1:WRkNAv2uoa03QNIc1A6u4O7DAGMUVoopZhkiXWA2V1o=
+github.com/gorilla/context v1.1.2/go.mod h1:KDPwT9i/MeWHiLl90fuTgrt4/wPcv75vFAZLaOOcbxM=
+github.com/gorilla/securecookie v1.1.2 h1:YCIWL56dvtr73r6715mJs5ZvhtnY73hBvEF8kXD8ePA=
+github.com/gorilla/securecookie v1.1.2/go.mod h1:NfCASbcHqRSY+3a8tlWJwsQap2VX5pwzwo4h3eOamfo=
+github.com/gorilla/sessions v1.2.2 h1:lqzMYz6bOfvn2WriPUjNByzeXIlVzURcPmgMczkmTjY=
+github.com/gorilla/sessions v1.2.2/go.mod h1:ePLdVu+jbEgHH+KWw8I1z2wqd0BAdAQh/8LRvBeoNcQ=
 github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
 github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
+github.com/grbit/go-json v0.11.0 h1:bAbyMdYrYl/OjYsSqLH99N2DyQ291mHy726Mx+sYrnc=
+github.com/grbit/go-json v0.11.0/go.mod h1:IYpHsdybQ386+6g3VE6AXQ3uTGa5mquBme5/ZWmtzek=
 github.com/gregjones/httpcache v0.0.0-20180305231024-9cad4c3443a7/go.mod h1:FecbI9+v66THATjSRHfNgh1IVFe/9kFxbXtjV0ctIMA=
 github.com/grpc-ecosystem/grpc-gateway v1.5.0/go.mod h1:RSKVYQBd5MCa4OVpNdGskqpgL2+G+NZTnrVHpWWfpdw=
 github.com/jellevandenhooff/dkim v0.0.0-20150330215556-f50fe3d243e1/go.mod h1:E0B/fFc00Y+Rasa88328GlI/XbtyysCtTHZS8h7IrBU=
@@ -136,11 +138,11 @@ github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnr
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/jstemmer/go-junit-report v0.0.0-20190106144839-af01ea7f8024/go.mod h1:6v2b51hI/fHJwM22ozAgKL4VKDeJcHhJFhtBdhmNjmU=
 github.com/kisielk/gotool v1.0.0/go.mod h1:XhKaO+MFFWcvkIS/tQcRk01m1F5IRFswLeQ+oQHNcck=
-github.com/klauspost/compress v1.17.2 h1:RlWWUY/Dr4fL8qk9YG7DTZ7PDgME2V4csBXA8L/ixi4=
-github.com/klauspost/compress v1.17.2/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/klauspost/compress v1.17.7 h1:ehO88t2UGzQK66LMdE8tibEd1ErmzZjNEqWkjLAKQQg=
+github.com/klauspost/compress v1.17.7/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
-github.com/klauspost/cpuid/v2 v2.2.6 h1:ndNyv040zDGIDh8thGkXYjnFtiN02M1PVVF+JE/48xc=
-github.com/klauspost/cpuid/v2 v2.2.6/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/klauspost/cpuid/v2 v2.2.7 h1:ZWSB3igEs+d0qvnxR/ZBzXVmxkgt8DdzP6m9pfuVLDM=
+github.com/klauspost/cpuid/v2 v2.2.7/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
 github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI=
@@ -156,43 +158,43 @@ github.com/leodido/go-urn v1.2.1/go.mod h1:zt4jvISO2HfUBqxjfIshjdMTYS56ZS/qv49ic
 github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
 github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
-github.com/lufia/plan9stats v0.0.0-20230326075908-cb1d2100619a h1:N9zuLhTvBSRt0gWSiJswwQ2HqDmtX/ZCDJURnKUt1Ik=
-github.com/lufia/plan9stats v0.0.0-20230326075908-cb1d2100619a/go.mod h1:JKx41uQRwqlTZabZc+kILPrO/3jlKnQ2Z8b7YiVw5cE=
+github.com/lufia/plan9stats v0.0.0-20231016141302-07b5767bb0ed h1:036IscGBfJsFIgJQzlui7nK1Ncm0tp2ktmPj8xO4N/0=
+github.com/lufia/plan9stats v0.0.0-20231016141302-07b5767bb0ed/go.mod h1:ilwx/Dta8jXAgpFYFvSWEMwxmbWXyiUHkd5FwyKhb5k=
 github.com/lunixbochs/vtclean v1.0.0/go.mod h1:pHhQNgMf3btfWnGBVipUOjRYhoOsdGqdm/+2c2E2WMI=
 github.com/mailru/easyjson v0.0.0-20190312143242-1de009706dbe/go.mod h1:C1wdFJiN94OJF2b5HbByQZoLdCWB1Yqtg26g4irojpc=
 github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
 github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.17 h1:mCRHCLDUBXgpKAqIKsaAaAsrAlbkeomtRFKXh2L6YIM=
-github.com/mattn/go-sqlite3 v1.14.17/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
+github.com/mattn/go-sqlite3 v1.14.19 h1:fhGleo2h1p8tVChob4I9HpmVFIAkKGpiukdrgQbWfGI=
+github.com/mattn/go-sqlite3 v1.14.19/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=
 github.com/microcosm-cc/bluemonday v1.0.1/go.mod h1:hsXNsILzKxV+sX77C5b8FSuKF00vh2OMYv+xgHpAMF4=
-github.com/miekg/dns v1.1.57 h1:Jzi7ApEIzwEPLHWRcafCN9LZSBbqQpxjt/wpgvg7wcM=
-github.com/miekg/dns v1.1.57/go.mod h1:uqRjCRUuEAA6qsOiJvDd+CFo/vW+y5WR6SNmHE55hZk=
+github.com/miekg/dns v1.1.58 h1:ca2Hdkz+cDg/7eNF6V56jjzuZ4aCAE+DbVkILdQWG/4=
+github.com/miekg/dns v1.1.58/go.mod h1:Ypv+3b/KadlvW9vJfXOTf300O4UqaHFzFCuHz+rPkBY=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
 github.com/modern-go/reflect2 v1.0.1/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
 github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
-github.com/mymmrac/telego v0.28.0 h1:DNXaYISeZw1J9oB81vCNdskLow8gCRRUJxufqLuH3XE=
-github.com/mymmrac/telego v0.28.0/go.mod h1:oRperySNzJq8dRTl24+uBF1Uy7tlQGIjid/JQtHDsZg=
+github.com/mymmrac/telego v0.29.1 h1:nsNnK0mS18OL+unoDjDI6BVfafJBbT8Wtj7rCzEWoM8=
+github.com/mymmrac/telego v0.29.1/go.mod h1:ZLD1+L2TQRr97NPOCoN1V2w8y9kmFov33OfZ3qT8cF4=
 github.com/neelance/astrewrite v0.0.0-20160511093645-99348263ae86/go.mod h1:kHJEU3ofeGjhHklVoIGuVj85JJwZ6kWPaJwCIxgnFmo=
 github.com/neelance/sourcemap v0.0.0-20151028013722-8c68805598ab/go.mod h1:Qr6/a/Q4r9LP1IltGz7tA7iOK1WonHEYhu1HRBA7ZiM=
-github.com/nicksnyder/go-i18n/v2 v2.3.0 h1:2NPsCsNFCVd7i+Su0xYsBrIhS3bE2XMv5gNTft2O+PQ=
-github.com/nicksnyder/go-i18n/v2 v2.3.0/go.mod h1:nxYSZE9M0bf3Y70gPQjN9ha7XNHX7gMc814+6wVyEI4=
-github.com/onsi/ginkgo/v2 v2.13.1 h1:LNGfMbR2OVGBfXjvRZIZ2YCTQdGKtPLvuI1rMCCj3OU=
-github.com/onsi/ginkgo/v2 v2.13.1/go.mod h1:XStQ8QcGwLyF4HdfcZB8SFOS/MWCgDuXMSBe6zrvLgM=
-github.com/onsi/gomega v1.29.0 h1:KIA/t2t5UBzoirT4H9tsML45GEbo3ouUnBHsCfD2tVg=
-github.com/onsi/gomega v1.29.0/go.mod h1:9sxs+SwGrKI0+PWe4Fxa9tFQQBG5xSsSbMXOI8PPpoQ=
+github.com/nicksnyder/go-i18n/v2 v2.4.0 h1:3IcvPOAvnCKwNm0TB0dLDTuawWEj+ax/RERNC+diLMM=
+github.com/nicksnyder/go-i18n/v2 v2.4.0/go.mod h1:nxYSZE9M0bf3Y70gPQjN9ha7XNHX7gMc814+6wVyEI4=
+github.com/onsi/ginkgo/v2 v2.15.0 h1:79HwNRBAZHOEwrczrgSOPy+eFTTlIGELKy5as+ClttY=
+github.com/onsi/ginkgo/v2 v2.15.0/go.mod h1:HlxMHtYF57y6Dpf+mc5529KKmSq9h2FpCF+/ZkwUxKM=
+github.com/onsi/gomega v1.30.0 h1:hvMK7xYz4D3HapigLTeGdId/NcfQx1VHMJc60ew99+8=
+github.com/onsi/gomega v1.30.0/go.mod h1:9sxs+SwGrKI0+PWe4Fxa9tFQQBG5xSsSbMXOI8PPpoQ=
 github.com/op/go-logging v0.0.0-20160315200505-970db520ece7 h1:lDH9UUVJtmYCjyT0CI4q8xvlXPxeZ0gYCVvWbmPlp88=
 github.com/op/go-logging v0.0.0-20160315200505-970db520ece7/go.mod h1:HzydrMdWErDVzsI23lYNej1Htcns9BCg93Dk0bBINWk=
 github.com/openzipkin/zipkin-go v0.1.1/go.mod h1:NtoC/o8u3JlF1lSlyPNswIbeQH9bJTmOf0Erfk+hxe8=
 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.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pelletier/go-toml/v2 v2.1.1 h1:LWAJwfNvjQZCFIDKWYQaM62NcYeYViCmWIwmOStowAI=
+github.com/pelletier/go-toml/v2 v2.1.1/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
 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=
@@ -206,12 +208,10 @@ github.com/prometheus/client_golang v0.8.0/go.mod h1:7SWBe2y4D6OKWSNQJUaRYU/AaXP
 github.com/prometheus/client_model v0.0.0-20180712105110-5c3871d89910/go.mod h1:MbSGuTsp3dbXC40dX6PRTWyKYBIrTGTE9sqQNg2J8bo=
 github.com/prometheus/common v0.0.0-20180801064454-c7de2306084e/go.mod h1:daVV7qP5qjZbuso7PdcryaAu0sAZbrN9i7WWcTMWvro=
 github.com/prometheus/procfs v0.0.0-20180725123919-05ee40e3a273/go.mod h1:c3At6R/oaqEKCNdg8wHV1ftS6bRYblBhIjjI8uT2IGk=
-github.com/quic-go/qtls-go1-20 v0.4.1 h1:D33340mCNDAIKBqXuAvexTNMUByrYmFYVfKfDN5nfFs=
-github.com/quic-go/qtls-go1-20 v0.4.1/go.mod h1:X9Nh97ZL80Z+bX/gUXMbipO6OxdiDi58b/fMC9mAL+k=
-github.com/quic-go/quic-go v0.40.0 h1:GYd1iznlKm7dpHD7pOVpUvItgMPo/jrMgDWZhMCecqw=
-github.com/quic-go/quic-go v0.40.0/go.mod h1:PeN7kuVJ4xZbxSv/4OX6S1USOX8MJvydwpTx31vx60c=
-github.com/refraction-networking/utls v1.5.4 h1:9k6EO2b8TaOGsQ7Pl7p9w6PUhx18/ZCeT0WNTZ7Uw4o=
-github.com/refraction-networking/utls v1.5.4/go.mod h1:SPuDbBmgLGp8s+HLNc83FuavwZCFoMmExj+ltUHiHUw=
+github.com/quic-go/quic-go v0.41.0 h1:aD8MmHfgqTURWNJy48IYFg2OnxwHT3JL7ahGs73lb4k=
+github.com/quic-go/quic-go v0.41.0/go.mod h1:qCkNjqczPEvgsOnxZ0eCD14lv+B2LHlFAB++CNOh9hA=
+github.com/refraction-networking/utls v1.6.3 h1:MFOfRN35sSx6K5AZNIoESsBuBxS2LCgRilRIdHb6fDc=
+github.com/refraction-networking/utls v1.6.3/go.mod h1:yil9+7qSl+gBwJqztoQseO6Pr3h62pQoY1lXiNR/FPs=
 github.com/riobard/go-bloom v0.0.0-20200614022211-cdc8013cb5b3 h1:f/FNXud6gA3MNr8meMVVGxhp+QBTqY91tM8HjEuMjGg=
 github.com/riobard/go-bloom v0.0.0-20200614022211-cdc8013cb5b3/go.mod h1:HgjTstvQsPGkxUsCd2KWxErBblirPizecHcpD3ffK+s=
 github.com/robfig/cron/v3 v3.0.1 h1:WdRxkvbJztn8LMz/QEvLN5sBU+xKpSqwwUO1Pjr4qDs=
@@ -221,17 +221,17 @@ github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6po
 github.com/rogpeppe/go-internal v1.11.0 h1:cWPaGQEPrBb5/AsnsZesgZZ9yb1OQ+GOISoDNXVBh4M=
 github.com/rogpeppe/go-internal v1.11.0/go.mod h1:ddIwULY96R17DhadqLgMfk9H9tvdUzkipdSkR5nkCZA=
 github.com/russross/blackfriday v1.5.2/go.mod h1:JO/DiYxRf+HjHt06OyowR9PTA263kcR/rfWxYHBV53g=
-github.com/sagernet/sing v0.2.17 h1:vMPKb3MV0Aa5ws4dCJkRI8XEjrsUcDn810czd0FwmzI=
-github.com/sagernet/sing v0.2.17/go.mod h1:OL6k2F0vHmEzXz2KW19qQzu172FDgSbUSODylighuVo=
-github.com/sagernet/sing-shadowsocks v0.2.5 h1:qxIttos4xu6ii7MTVJYA8EFQR7Q3KG6xMqmLJIFtBaY=
-github.com/sagernet/sing-shadowsocks v0.2.5/go.mod h1:MGWGkcU2xW2G2mfArT9/QqpVLOGU+dBaahZCtPHdt7A=
+github.com/sagernet/sing v0.3.2 h1:CwWcxUBPkMvwgfe2/zUgY5oHG9qOL8Aob/evIFYK9jo=
+github.com/sagernet/sing v0.3.2/go.mod h1:qHySJ7u8po9DABtMYEkNBcOumx7ZZJf/fbv2sfTkNHE=
+github.com/sagernet/sing-shadowsocks v0.2.6 h1:xr7ylAS/q1cQYS8oxKKajhuQcchd5VJJ4K4UZrrpp0s=
+github.com/sagernet/sing-shadowsocks v0.2.6/go.mod h1:j2YZBIpWIuElPFL/5sJAj470bcn/3QQ5lxZUNKLDNAM=
 github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee h1:8Iv5m6xEo1NR1AvpV+7XmhI4r39LGNzwUL4YpMuL5vk=
 github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee/go.mod h1:qwtSXrKuJh/zsFQ12yEE89xfCrGKK63Rr7ctU/uCo4g=
 github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb h1:XfLJSPIOUX+osiMraVgIrMR27uMXnRJWGm1+GL8/63U=
 github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb/go.mod h1:bR6DqgcAl1zTcOX8/pE2Qkj9XO00eCNqmKb7lXP8EAg=
 github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
-github.com/shirou/gopsutil/v3 v3.23.11 h1:i3jP9NjCPUz7FiZKxlMnODZkdSIp2gnzfrvsu9CuWEQ=
-github.com/shirou/gopsutil/v3 v3.23.11/go.mod h1:1FrWgea594Jp7qmjHUUPlJDTPgcsb9mGnXDxavtikzM=
+github.com/shirou/gopsutil/v3 v3.24.1 h1:R3t6ondCEvmARp3wxODhXMTLC/klMa87h2PHUw5m7QI=
+github.com/shirou/gopsutil/v3 v3.24.1/go.mod h1:UU7a2MSBQa+kW1uuDq8DeEBS8kmrnQwsv2b5O513rwU=
 github.com/shoenig/go-m1cpu v0.1.6 h1:nxdKQNcEB6vzgA2E2bvzKIYRuNj7XNJ4S/aRSwKzFtM=
 github.com/shoenig/go-m1cpu v0.1.6/go.mod h1:1JJMcUBvfNwpq05QDQVAnx3gUHr9IYF7GNg9SUEw2VQ=
 github.com/shoenig/test v0.6.4 h1:kVTaSd7WLz5WZ2IaoM0RSzRsUD+m8wRR+5qvntpn4LU=
@@ -288,8 +288,10 @@ github.com/v2fly/ss-bloomring v0.0.0-20210312155135-28617310f63e h1:5QefA066A1tF
 github.com/v2fly/ss-bloomring v0.0.0-20210312155135-28617310f63e/go.mod h1:5t19P9LBIrNamL6AcMQOncg/r10y3Pc01AbHeMhwlpU=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasthttp v1.51.0 h1:8b30A5JlZ6C7AS81RsWjYMQmrZG6feChmgAolCl1SqA=
-github.com/valyala/fasthttp v1.51.0/go.mod h1:oI2XroL+lI7vdXyYoQk03bXBThfFl2cVdIA3Xl7cH8g=
+github.com/valyala/fasthttp v1.52.0 h1:wqBQpxH71XW0e2g+Og4dzQM8pk34aFYlA1Ga8db7gU0=
+github.com/valyala/fasthttp v1.52.0/go.mod h1:hf5C4QnVMkNXMspnsUlfM3WitlgYflyhHYoKol/szxQ=
+github.com/valyala/fastjson v1.6.4 h1:uAUNq9Z6ymTgGhcm0UynUAB6tlbakBrz6CQFax3BXVQ=
+github.com/valyala/fastjson v1.6.4/go.mod h1:CLCAqky6SMuOcxStkYQvblddUtoRxhYMGLrsQns1aXY=
 github.com/viant/assertly v0.4.8/go.mod h1:aGifi++jvCrUaklKEKT0BU95igDNaqkvz+49uaYMPRU=
 github.com/viant/toolbox v0.24.0/go.mod h1:OxMCG57V0PXuIP2HNQrtJf2CjqdmbrOx5EkMILuUhzM=
 github.com/vishvananda/netlink v1.2.1-beta.2.0.20230316163032-ced5aaba43e3 h1:tkMT5pTye+1NlKIXETU78NXw0fyjnaNHmJyyLyzw8+U=
@@ -299,18 +301,18 @@ github.com/vishvananda/netns v0.0.4 h1:Oeaw1EM2JMxD51g9uhtC0D7erkIjgmj8+JZc26m1Y
 github.com/vishvananda/netns v0.0.4/go.mod h1:SpkAiCQRtJ6TvvxPnOSyH3BMl6unz3xZlaprSwhNNJM=
 github.com/xtls/reality v0.0.0-20231112171332-de1173cf2b19 h1:capMfFYRgH9BCLd6A3Er/cH3A9Nz3CU2KwxwOQZIePI=
 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/xtls/xray-core v1.8.8 h1:6ApBa5pNkPZ+I7jyJDZod3v5sadizS/BZr0pW7zcs8o=
+github.com/xtls/xray-core v1.8.8/go.mod h1:Zp33A8cxnhP5Kt6nguQrMgNH4A/tgq7LE8cBedeNje8=
 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=
 go.uber.org/atomic v1.11.0 h1:ZvwS0R+56ePWxUNi+Atn9dWONBPp/AUETXlHW0DxSjE=
 go.uber.org/atomic v1.11.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0=
-go.uber.org/mock v0.3.0 h1:3mUxI1No2/60yUYax92Pt8eNOEecx2D3lcXZh2NEZJo=
-go.uber.org/mock v0.3.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
+go.uber.org/mock v0.4.0 h1:VcM4ZOtdbR4f6VXfiOpwpVJDL6lCReaZ6mw31wqh7KU=
+go.uber.org/mock v0.4.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
 go4.org v0.0.0-20180809161055-417644f6feb5/go.mod h1:MkTOUMDaeVYJUOUsaDXIhWPZYa1yOyC1qaOBpL57BhE=
-go4.org/netipx v0.0.0-20230824141953-6213f710f925 h1:eeQDDVKFkx0g4Hyy8pHgmZaK0EqB4SD6rvKbUdN3ziQ=
-go4.org/netipx v0.0.0-20230824141953-6213f710f925/go.mod h1:PLyyIXexvUFg3Owu6p/WfdlivPbZJsZdgWZlrGope/Y=
+go4.org/netipx v0.0.0-20231129151722-fdeea329fbba h1:0b9z3AuHCjxk0x/opv64kcgZLBseWJUpBw5I82+2U4M=
+go4.org/netipx v0.0.0-20231129151722-fdeea329fbba/go.mod h1:PLyyIXexvUFg3Owu6p/WfdlivPbZJsZdgWZlrGope/Y=
 golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/arch v0.6.0 h1:S0JTfE48HbRj80+4tbvZDYsJ3tGv6BUU3XxyZ7CirAc=
 golang.org/x/arch v0.6.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
@@ -319,16 +321,16 @@ golang.org/x/crypto v0.0.0-20181030102418-4d3f4d9ffa16/go.mod h1:6SG95UA2DQfeDnf
 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-20210711020723-a769d52b0f97/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
-golang.org/x/crypto v0.15.0 h1:frVn1TEaCEaZcn3Tmd7Y2b5KKPaZ+I32Q2OA3kYp5TA=
-golang.org/x/crypto v0.15.0/go.mod h1:4ChreQoLWfG3xLDer1WdlH5NdlQ3+mwnQq1YTKY+72g=
+golang.org/x/crypto v0.19.0 h1:ENy+Az/9Y1vSrlrvBSyna3PITt4tiZLf7sgCjZBX7Wo=
+golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
-golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa h1:FRnLl4eNAQl8hwxVVC17teOw8kdjVDVAiFMtgUdTSRQ=
-golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa/go.mod h1:zk2irFbV9DP96SEBUUAy67IdHUaZuSnrz1n472HUCLE=
+golang.org/x/exp v0.0.0-20240222234643-814bf88cf225 h1:LfspQV/FYTatPTr/3HzIcmiUFH7PGP+OQ6mgDYo3yuQ=
+golang.org/x/exp v0.0.0-20240222234643-814bf88cf225/go.mod h1:CxmFvTBINI24O/j8iY7H1xHzx2i4OsyguNBmN/uPtqc=
 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.14.0 h1:dGoOF9QVLYng8IHTm7BAyWqCqSheQ5pYWGhzW00YJr0=
-golang.org/x/mod v0.14.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.15.0 h1:SernR4v+D55NyBH2QiEQrlBAnj1ECL6AGrA5+dPaMY8=
+golang.org/x/mod v0.15.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -338,8 +340,8 @@ 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-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=
+golang.org/x/net v0.21.0 h1:AQyQV4dYCvJ7vGmJyKki9+PBdyvhkSd8EIx/qb0AYv4=
+golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20181017192945-9dcd33a902f4/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20181203162652-d668ce993890/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
@@ -349,8 +351,8 @@ 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.5.0 h1:60k92dhOjHxJkrqnwsfl8KuaHbn/5dl0lUPUklKo3qE=
-golang.org/x/sync v0.5.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.6.0 h1:5BMeUDZ7vkXGfEr1x9B4bRcTH4lpkTkpdh0T/J+qjbQ=
+golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180909124046-d0be0721c37e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20181029174526-d69651ed3497/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@@ -369,8 +371,9 @@ golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
-golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.17.0 h1:25cE3gD+tdBA7lp7QfhuV+rJiE9YXTcS3VG1SqssI/Y=
+golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -380,20 +383,20 @@ golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
 golang.org/x/time v0.0.0-20180412165947-fbb02b2291d2/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
-golang.org/x/time v0.4.0 h1:Z81tqI5ddIoXDPvVQ7/7CC9TnLM7ubaFG2qXYd5BbYY=
-golang.org/x/time v0.4.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
+golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
+golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.0.0-20180828015842-6cd1fcedba52/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 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.15.0 h1:zdAyfUGbYmuVokhzVmghFl2ZJh5QhcfebBgmVPFYA+8=
-golang.org/x/tools v0.15.0/go.mod h1:hpksKq4dtpQWS1uQ61JkdqWM3LscIS6Slf+VVkm+wQk=
+golang.org/x/tools v0.18.0 h1:k8NLag8AGHnn+PHbl7g43CtqZAwG60vZkLqgyZgIHgQ=
+golang.org/x/tools v0.18.0/go.mod h1:GL7B4CwcLLeo59yx/9UWWuNOW1n3VZ4f5axWfML7Lcg=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/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=
-golang.zx2c4.com/wireguard v0.0.0-20231022001213-2e0774f246fb/go.mod h1:tkCQ4FQXmpAgYVh++1cq16/dH4QJtmvpRv19DWGAHSA=
+golang.zx2c4.com/wireguard v0.0.0-20231211153847-12269c276173 h1:/jFs0duh4rdb8uIfPMv78iAJGcPKDeqAFnaLBropIC4=
+golang.zx2c4.com/wireguard v0.0.0-20231211153847-12269c276173/go.mod h1:tkCQ4FQXmpAgYVh++1cq16/dH4QJtmvpRv19DWGAHSA=
 google.golang.org/api v0.0.0-20180910000450-7ca32eb868bf/go.mod h1:4mhQ8q/RsB7i+udVvVy5NUi08OU8ZlA0gRVgrF7VFY0=
 google.golang.org/api v0.0.0-20181030000543-1d582fd0359e/go.mod h1:4mhQ8q/RsB7i+udVvVy5NUi08OU8ZlA0gRVgrF7VFY0=
 google.golang.org/api v0.1.0/go.mod h1:UGEZY7KEX120AnNLIHFMKIo4obdJhkp2tPbaPlQx13Y=
@@ -406,19 +409,19 @@ google.golang.org/genproto v0.0.0-20180831171423-11092d34479b/go.mod h1:JiN7NxoA
 google.golang.org/genproto v0.0.0-20181029155118-b69ba1387ce2/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
 google.golang.org/genproto v0.0.0-20181202183823-bd91e49a0898/go.mod h1:7Ep/1NZk928CDR8SjdVbjWNpdIf6nzjE3BTgJDr2Atg=
 google.golang.org/genproto v0.0.0-20190306203927-b5d61aea6440/go.mod h1:VzzqZJRnGkLBvHegQrXjBqPurQTc5/KpmUdxsrq26oE=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20231106174013-bbf56f31fb17 h1:Jyp0Hsi0bmHXG6k9eATXoYtjd6e2UzZ1SCn/wIupY14=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20231106174013-bbf56f31fb17/go.mod h1:oQ5rr10WTTMvP4A36n8JpR1OrO1BEiV4f78CneXZxkA=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20240221002015-b0ce06bbee7c h1:NUsgEN92SQQqzfA+YtqYNqYmB3DMMYLlIwUZAQFVFbo=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20240221002015-b0ce06bbee7c/go.mod h1:H4O17MA/PE9BsGx3w+a+W2VOLLD1Qf7oJneAoU6WktY=
 google.golang.org/grpc v1.14.0/go.mod h1:yo6s7OP7yaDglbqo1J04qKzAhqBH6lvTonzMVmEdcZw=
 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.59.0/go.mod h1:aUPDwccQo6OTjy7Hct4AfBPD1GptF4fyUjIkQ9YtF98=
+google.golang.org/grpc v1.62.0 h1:HQKZ/fa1bXkX1oFOvSjmZEUL8wLSaZTjCcLAlmZRtdk=
+google.golang.org/grpc v1.62.0/go.mod h1:IWTG0VlJLCh1SkC58F7np9ka9mx/WNkjl4PGJaiq+QE=
 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=
-google.golang.org/protobuf v1.31.0 h1:g0LDEJHgrBl9N9r17Ru3sqWhkIx2NB67okBHPwC7hs8=
-google.golang.org/protobuf v1.31.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+google.golang.org/protobuf v1.32.0 h1:pPC6BG5ex8PDFnkbrGU3EixyhKcQ2aDuBS36lqK/C7I=
+google.golang.org/protobuf v1.32.0/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
@@ -434,10 +437,10 @@ gopkg.in/yaml.v3 v3.0.0-20200605160147-a5ece683394c/go.mod h1:K4uyk7z7BCEPqu6E+C
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gorm.io/driver/sqlite v1.5.4 h1:IqXwXi8M/ZlPzH/947tn5uik3aYQslP9BVveoax0nV0=
-gorm.io/driver/sqlite v1.5.4/go.mod h1:qxAuCol+2r6PannQDpOP1FP6ag3mKi4esLnB/jHed+4=
-gorm.io/gorm v1.25.5 h1:zR9lOiiYf09VNh5Q1gphfyia1JpiClIWG9hQaxB/mls=
-gorm.io/gorm v1.25.5/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
+gorm.io/driver/sqlite v1.5.5 h1:7MDMtUZhV065SilG62E0MquljeArQZNfJnjd9i9gx3E=
+gorm.io/driver/sqlite v1.5.5/go.mod h1:6NgQ7sQWAIFsPrJJl1lSNSu2TABh0ZZ/zm5fosATavE=
+gorm.io/gorm v1.25.7 h1:VsD6acwRjz2zFxGO50gPO6AkNs7KKnvfzUjHQhZDz/A=
+gorm.io/gorm v1.25.7/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
 grpc.go4.org v0.0.0-20170609214715-11d0a25b4919/go.mod h1:77eQGdRu53HpSqPFJFmuJdjuHRquDANNeA4x7B8WQ9o=
 gvisor.dev/gvisor v0.0.0-20231104011432-48a6d7d5bd0b h1:yqkg3pTifuKukuWanp8spDsL4irJkHF5WI0J47hU87o=
 gvisor.dev/gvisor v0.0.0-20231104011432-48a6d7d5bd0b/go.mod h1:10sU+Uh5KKNv1+2x2A0Gvzt8FjD3ASIhorV3YsauXhk=
--- a/install.sh
+++ b/install.sh
@@ -26,10 +26,15 @@ echo "The OS release is: $release"
 arch3xui() {
    case "$(uname -m)" in
    x86_64 | x64 | amd64) echo 'amd64' ;;
-    armv8 | arm64 | aarch64) echo 'arm64' ;;
+    i*86 | x86) echo '386' ;;
+    armv8* | armv8 | arm64 | aarch64) echo 'arm64' ;;
+    armv7* | armv7 | arm) echo 'armv7' ;;
+    armv6* | armv6) echo 'armv6' ;;
+    armv5* | armv5) echo 'armv5' ;;
    *) echo -e "${green}Unsupported CPU architecture! ${plain}" && rm -f install.sh && exit 1 ;;
    esac
 }
+
 echo "arch: $(arch3xui)"

 os_version=""
@@ -41,20 +46,34 @@ if [[ "${release}" == "centos" ]]; then
    fi
 elif [[ "${release}" == "ubuntu" ]]; then
    if [[ ${os_version} -lt 20 ]]; then
-        echo -e "${red}please use Ubuntu 20 or higher version!${plain}\n" && exit 1
+        echo -e "${red} Please use Ubuntu 20 or higher version!${plain}\n" && exit 1
    fi

 elif [[ "${release}" == "fedora" ]]; then
    if [[ ${os_version} -lt 36 ]]; then
-        echo -e "${red}please use Fedora 36 or higher version!${plain}\n" && exit 1
+        echo -e "${red} Please use Fedora 36 or higher version!${plain}\n" && exit 1
    fi

 elif [[ "${release}" == "debian" ]]; then
-    if [[ ${os_version} -lt 10 ]]; then
-        echo -e "${red} Please use Debian 10 or higher ${plain}\n" && exit 1
+    if [[ ${os_version} -lt 11 ]]; then
+        echo -e "${red} Please use Debian 11 or higher ${plain}\n" && exit 1
+    fi
+
+elif [[ "${release}" == "almalinux" ]]; then
+    if [[ ${os_version} -lt 9 ]]; then
+        echo -e "${red} Please use AlmaLinux 9 or higher ${plain}\n" && exit 1
+    fi
+
+elif [[ "${release}" == "rocky" ]]; then
+    if [[ ${os_version} -lt 9 ]]; then
+        echo -e "${red} Please use RockyLinux 9 or higher ${plain}\n" && exit 1
    fi
 elif [[ "${release}" == "arch" ]]; then
-    echo "OS is ArchLinux"
+    echo "Your OS is ArchLinux"
+elif [[ "${release}" == "manjaro" ]]; then
+    echo "Your OS is Manjaro"
+elif [[ "${release}" == "armbian" ]]; then
+    echo "Your OS is Armbian"

 else
    echo -e "${red}Failed to check the OS version, please contact the author!${plain}" && exit 1
@@ -62,23 +81,25 @@ fi

 install_base() {
    case "${release}" in
-        centos|fedora)
-            yum install -y -q wget curl tar
-            ;;
-        arch)
-            pacman -Syu --noconfirm wget curl tar
-            ;;
-        *)
-            apt install -y -q wget curl tar
-            ;;
+    centos | almalinux | rocky)
+        yum -y update && yum install -y -q wget curl tar tzdata
+        ;;
+    fedora)
+        dnf -y update && dnf install -y -q wget curl tar tzdata
+        ;;
+    arch | manjaro)
+        pacman -Syu && pacman -Syu --noconfirm wget curl tar tzdata
+        ;;
+    *)
+        apt-get update && apt install -y -q wget curl tar tzdata
+        ;;
    esac
 }

-
 # This function will be called when user installed x-ui out of security
 config_after_install() {
    echo -e "${yellow}Install/update finished! For security it's recommended to modify panel settings ${plain}"
-    read -p "Do you want to continue with the modification [y/n]? ": config_confirm
+    read -p "Do you want to continue with the modification [y/n]?": config_confirm
    if [[ "${config_confirm}" == "y" || "${config_confirm}" == "Y" ]]; then
        read -p "Please set up your username:" config_account
        echo -e "${yellow}Your username will be:${config_account}${plain}"
@@ -102,9 +123,9 @@ config_after_install() {
            echo -e "${green}username:${usernameTemp}${plain}"
            echo -e "${green}password:${passwordTemp}${plain}"
            echo -e "###############################################"
-            echo -e "${red}if you forgot your login info,you can type x-ui and then type 7 to check after installation${plain}"
+            echo -e "${red}if you forgot your login info,you can type x-ui and then type 8 to check after installation${plain}"
        else
-            echo -e "${red} this is your upgrade,will keep old settings,if you forgot your login info,you can type x-ui and then type 7 to check${plain}"
+            echo -e "${red} this is your upgrade,will keep old settings,if you forgot your login info,you can type x-ui and then type 8 to check${plain}"
        fi
    fi
    /usr/local/x-ui/x-ui migrate
@@ -128,7 +149,7 @@ install_x-ui() {
    else
        last_version=$1
        url="https://github.com/MHSanaei/3x-ui/releases/download/${last_version}/x-ui-linux-$(arch3xui).tar.gz"
-        echo -e "Begining to install x-ui $1"
+        echo -e "Beginning to install x-ui $1"
        wget -N --no-check-certificate -O /usr/local/x-ui-linux-$(arch3xui).tar.gz ${url}
        if [[ $? -ne 0 ]]; then
            echo -e "${red}Download x-ui $1 failed,please check the version exists ${plain}"
@@ -144,18 +165,21 @@ install_x-ui() {
    tar zxvf x-ui-linux-$(arch3xui).tar.gz
    rm x-ui-linux-$(arch3xui).tar.gz -f
    cd x-ui
+    chmod +x x-ui
+
+    # Check the system's architecture and rename the file accordingly
+    if [[ $(arch3xui) == "armv5" || $(arch3xui) == "armv6" || $(arch3xui) == "armv7" ]]; then
+        mv bin/xray-linux-$(arch3xui) bin/xray-linux-arm
+        chmod +x bin/xray-linux-arm
+    fi
+
    chmod +x x-ui bin/xray-linux-$(arch3xui)
    cp -f x-ui.service /etc/systemd/system/
    wget --no-check-certificate -O /usr/bin/x-ui https://raw.githubusercontent.com/MHSanaei/3x-ui/main/x-ui.sh
    chmod +x /usr/local/x-ui/x-ui.sh
    chmod +x /usr/bin/x-ui
    config_after_install
-    #echo -e "If it is a new installation, the default web port is ${green}2053${plain}, The username and password are ${green}admin${plain} by default"
-    #echo -e "Please make sure that this port is not occupied by other procedures,${yellow} And make sure that port 2053 has been released${plain}"
-    #    echo -e "If you want to modify the 2053 to other ports and enter the x-ui command to modify it, you must also ensure that the port you modify is also released"
-    #echo -e ""
-    #echo -e "If it is updated panel, access the panel in your previous way"
-    #echo -e ""
+
    systemctl daemon-reload
    systemctl enable x-ui
    systemctl start x-ui
--- a/logger/logger.go
+++ b/logger/logger.go
@@ -65,6 +65,16 @@ func Infof(format string, args ...interface{}) {
 	addToBuffer("INFO", fmt.Sprintf(format, args...))
 }

+func Notice(args ...interface{}) {
+	logger.Notice(args...)
+	addToBuffer("NOTICE", fmt.Sprint(args...))
+}
+
+func Noticef(format string, args ...interface{}) {
+	logger.Noticef(format, args...)
+	addToBuffer("NOTICE", fmt.Sprintf(format, args...))
+}
+
 func Warning(args ...interface{}) {
 	logger.Warning(args...)
 	addToBuffer("WARNING", fmt.Sprint(args...))
--- a/media/1.png
+++ b/media/1.png
--- a/media/2.png
+++ b/media/2.png
--- a/media/3.png
+++ b/media/3.png
--- a/media/3X-UI.png
+++ b/media/3X-UI.png
--- a/media/4.png
+++ b/media/4.png
--- a/media/5.png
+++ b/media/5.png
--- a/media/6.png
+++ b/media/6.png
--- a/media/7.png
+++ b/media/7.png
--- a/media/configs/traffic+block-ads+ipv4-google.json
+++ b/media/configs/traffic+block-ads+ipv4-google.json
@@ -1,97 +0,0 @@
-{
-  "log": {
-    "loglevel": "warning",
-    "error": "./error.log"
-  },
-  "api": {
-    "tag": "api",
-    "services": [
-      "HandlerService",
-      "LoggerService",
-      "StatsService"
-    ]
-  },
-  "inbounds": [
-    {
-      "tag": "api",
-      "listen": "127.0.0.1",
-      "port": 62789,
-      "protocol": "dokodemo-door",
-      "settings": {
-        "address": "127.0.0.1"
-      }
-    }
-  ],
-  "outbounds": [
-    {
-      "protocol": "freedom",
-      "settings": {}
-    },
-    {
-      "tag": "blocked",
-      "protocol": "blackhole",
-      "settings": {}
-    },
-    {
-      "tag": "IPv4",
-      "protocol": "freedom",
-      "settings": {
-        "domainStrategy": "UseIPv4"
-      }
-    }
-  ],
-  "policy": {
-    "levels": {
-      "0": {
-        "statsUserDownlink": true,
-        "statsUserUplink": true
-      }
-    },
-    "system": {
-      "statsInboundDownlink": true,
-      "statsInboundUplink": true
-    }
-  },
-  "routing": {
-    "domainStrategy": "IPIfNonMatch",
-    "rules": [
-      {
-        "type": "field",
-        "inboundTag": [
-          "api"
-        ],
-        "outboundTag": "api"
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "ip": [
-          "geoip:private"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "protocol": [
-          "bittorrent"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "domain": [
-          "geosite:category-ads-all",
-          "ext:geosite_IR.dat:category-ads-all"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "IPv4",
-        "domain": [
-          "geosite:google"
-        ]
-      }
-    ]
-  },
-  "stats": {}
-}
--- a/media/configs/traffic+block-ads+warp.json
+++ b/media/configs/traffic+block-ads+warp.json
@@ -1,105 +0,0 @@
-{
-  "log": {
-    "loglevel": "warning",
-    "error": "./error.log"
-  },
-  "api": {
-    "tag": "api",
-    "services": [
-      "HandlerService",
-      "LoggerService",
-      "StatsService"
-    ]
-  },
-  "inbounds": [
-    {
-      "tag": "api",
-      "listen": "127.0.0.1",
-      "port": 62789,
-      "protocol": "dokodemo-door",
-      "settings": {
-        "address": "127.0.0.1"
-      }
-    }
-  ],
-  "outbounds": [
-    {
-      "protocol": "freedom",
-      "settings": {}
-    },
-    {
-      "tag": "blocked",
-      "protocol": "blackhole",
-      "settings": {}
-    },
-    {
-      "tag": "WARP",
-      "protocol": "socks",
-      "settings": {
-        "servers": [
-          {
-            "address": "127.0.0.1",
-            "port": 40000
-          }
-        ]
-      }
-    }
-  ],
-  "policy": {
-    "levels": {
-      "0": {
-        "statsUserDownlink": true,
-        "statsUserUplink": true
-      }
-    },
-    "system": {
-      "statsInboundDownlink": true,
-      "statsInboundUplink": true
-    }
-  },
-  "routing": {
-    "domainStrategy": "IPIfNonMatch",
-    "rules": [
-      {
-        "type": "field",
-        "inboundTag": [
-          "api"
-        ],
-        "outboundTag": "api"
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "ip": [
-          "geoip:private"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "protocol": [
-          "bittorrent"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "domain": [
-          "geosite:category-ads-all",
-          "ext:geosite_IR.dat:category-ads-all"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "WARP",
-        "domain": [
-          "geosite:spotify",
-          "geosite:netflix",
-          "geosite:openai",
-          "geosite:google"
-        ]
-      }
-    ]
-  },
-  "stats": {}
-}
--- a/media/configs/traffic+block-iran-domains.json
+++ b/media/configs/traffic+block-iran-domains.json
@@ -1,84 +0,0 @@
-{
-  "log": {
-    "loglevel": "warning",
-    "error": "./error.log"
-  },
-  "api": {
-    "tag": "api",
-    "services": [
-      "HandlerService",
-      "LoggerService",
-      "StatsService"
-    ]
-  },
-  "inbounds": [
-    {
-      "tag": "api",
-      "listen": "127.0.0.1",
-      "port": 62789,
-      "protocol": "dokodemo-door",
-      "settings": {
-        "address": "127.0.0.1"
-      }
-    }
-  ],
-  "outbounds": [
-    {
-      "protocol": "freedom",
-      "settings": {}
-    },
-    {
-      "tag": "blocked",
-      "protocol": "blackhole",
-      "settings": {}
-    }
-  ],
-  "policy": {
-    "levels": {
-      "0": {
-        "statsUserDownlink": true,
-        "statsUserUplink": true
-      }
-    },
-    "system": {
-      "statsInboundDownlink": true,
-      "statsInboundUplink": true
-    }
-  },
-  "routing": {
-    "domainStrategy": "IPIfNonMatch",
-    "rules": [
-      {
-        "type": "field",
-        "inboundTag": [
-          "api"
-        ],
-        "outboundTag": "api"
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "ip": [
-          "geoip:private"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "protocol": [
-          "bittorrent"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "domain": [
-          "regexp:.*\\.ir$",
-          "regexp:.*\\.xn--mgba3a4f16a$", 
-          "ext:geosite_IR.dat:ir"
-        ]
-      }
-    ]
-  },
-  "stats": {}
-}
--- a/media/configs/traffic+block-iran-ip.json
+++ b/media/configs/traffic+block-iran-ip.json
@@ -1,76 +0,0 @@
-{
-  "log": {
-    "loglevel": "warning",
-    "error": "./error.log"
-  },
-  "api": {
-    "tag": "api",
-    "services": [
-      "HandlerService",
-      "LoggerService",
-      "StatsService"
-    ]
-  },
-  "inbounds": [
-    {
-      "tag": "api",
-      "listen": "127.0.0.1",
-      "port": 62789,
-      "protocol": "dokodemo-door",
-      "settings": {
-        "address": "127.0.0.1"
-      }
-    }
-  ],
-  "outbounds": [
-    {
-      "protocol": "freedom",
-      "settings": {}
-    },
-    {
-      "tag": "blocked",
-      "protocol": "blackhole",
-      "settings": {}
-    }
-  ],
-  "policy": {
-    "levels": {
-      "0": {
-        "statsUserDownlink": true,
-        "statsUserUplink": true
-      }
-    },
-    "system": {
-      "statsInboundDownlink": true,
-      "statsInboundUplink": true
-    }
-  },
-  "routing": {
-    "domainStrategy": "IPIfNonMatch",
-    "rules": [
-      {
-        "type": "field",
-        "inboundTag": [
-          "api"
-        ],
-        "outboundTag": "api"
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "ip": [
-          "geoip:private",
-          "ext:geoip_IR.dat:ir"
-        ]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "protocol": [
-          "bittorrent"
-        ]
-      }
-    ]
-  },
-  "stats": {}
-}
--- a/media/configs/traffic.json
+++ b/media/configs/traffic.json
@@ -1,65 +0,0 @@
-{
-  "log": {
-    "loglevel": "warning",
-    "error": "./error.log"
-  },
-  "api": {
-    "tag": "api",
-    "services": ["HandlerService", "LoggerService", "StatsService"]
-  },
-  "inbounds": [
-    {
-      "tag": "api",
-      "listen": "127.0.0.1",
-      "port": 62789,
-      "protocol": "dokodemo-door",
-      "settings": {
-        "address": "127.0.0.1"
-      }
-    }
-  ],
-  "outbounds": [
-    {
-      "protocol": "freedom",
-      "settings": {}
-    },
-    {
-      "tag": "blocked",
-      "protocol": "blackhole",
-      "settings": {}
-    }
-  ],
-  "policy": {
-    "levels": {
-      "0": {
-        "statsUserDownlink": true,
-        "statsUserUplink": true
-      }
-    },
-    "system": {
-      "statsInboundDownlink": true,
-      "statsInboundUplink": true
-    }
-  },
-  "routing": {
-    "domainStrategy": "IPIfNonMatch",
-    "rules": [
-      {
-        "type": "field",
-        "inboundTag": ["api"],
-        "outboundTag": "api"
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "ip": ["geoip:private"]
-      },
-      {
-        "type": "field",
-        "outboundTag": "blocked",
-        "protocol": ["bittorrent"]
-      }
-    ]
-  },
-  "stats": {}
-}
--- a/sub/default.json
+++ b/sub/default.json
@@ -0,0 +1,105 @@
+{
+  "dns": {
+    "tag": "dns_out",
+    "queryStrategy": "UseIP",
+    "servers": [
+      {
+        "address": "8.8.8.8",
+        "skipFallback": false
+      }
+    ]
+  },
+  "inbounds": [
+    {
+      "port": 10808,
+      "protocol": "socks",
+      "settings": {
+        "auth": "noauth",
+        "udp": true,
+        "userLevel": 8
+      },
+      "sniffing": {
+        "destOverride": [
+          "http",
+          "tls",
+          "fakedns"
+        ],
+        "enabled": true
+      },
+      "tag": "socks"
+    },
+    {
+      "port": 10809,
+      "protocol": "http",
+      "settings": {
+        "userLevel": 8
+      },
+      "tag": "http"
+    }
+  ],
+  "log": {
+    "loglevel": "warning"
+  },
+  "outbounds": [
+    {
+      "tag": "direct",
+      "protocol": "freedom",
+      "settings": {
+        "domainStrategy": "UseIP"
+      }
+    },
+    {
+      "tag": "block",
+      "protocol": "blackhole",
+      "settings": {
+        "response": {
+          "type": "http"
+        }
+      }
+    }
+  ],
+  "policy": {
+    "levels": {
+      "8": {
+        "connIdle": 300,
+        "downlinkOnly": 1,
+        "handshake": 4,
+        "uplinkOnly": 1
+      }
+    },
+    "system": {
+      "statsOutboundUplink": true,
+      "statsOutboundDownlink": true
+    }
+  },
+  "routing": {
+    "domainStrategy": "AsIs",
+    "rules": [
+      {
+        "type": "field",
+        "network": "tcp,udp",
+        "balancerTag": "all"
+      }
+    ],
+    "balancers": [
+      {
+        "tag": "all",
+        "selector": [
+          "proxy"
+        ],
+        "strategy": {
+          "type": "leastPing"
+        }
+      }
+    ]
+  },
+  "observatory": {
+    "probeInterval": "5m",
+    "probeURL": "https://api.github.com/_private/browser/stats",
+    "subjectSelector": [
+      "proxy"
+    ],
+    "EnableConcurrency": true
+  },
+  "stats": {}
+}
--- a/sub/sub.go
+++ b/sub/sub.go
@@ -47,11 +47,6 @@ func (s *Server) initRouter() (*gin.Engine, error) {

 	engine := gin.Default()

-	subPath, err := s.settingService.GetSubPath()
-	if err != nil {
-		return nil, err
-	}
-
 	subDomain, err := s.settingService.GetSubDomain()
 	if err != nil {
 		return nil, err
@@ -61,9 +56,44 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 		engine.Use(middleware.DomainValidatorMiddleware(subDomain))
 	}

-	g := engine.Group(subPath)
+	LinksPath, err := s.settingService.GetSubPath()
+	if err != nil {
+		return nil, err
+	}

-	s.sub = NewSUBController(g)
+	JsonPath, err := s.settingService.GetSubJsonPath()
+	if err != nil {
+		return nil, err
+	}
+
+	Encrypt, err := s.settingService.GetSubEncrypt()
+	if err != nil {
+		return nil, err
+	}
+
+	ShowInfo, err := s.settingService.GetSubShowInfo()
+	if err != nil {
+		return nil, err
+	}
+
+	RemarkModel, err := s.settingService.GetRemarkModel()
+	if err != nil {
+		RemarkModel = "-ieo"
+	}
+
+	SubUpdates, err := s.settingService.GetSubUpdates()
+	if err != nil {
+		SubUpdates = "10"
+	}
+
+	SubJsonFragment, err := s.settingService.GetSubJsonFragment()
+	if err != nil {
+		SubJsonFragment = ""
+	}
+
+	g := engine.Group("/")
+
+	s.sub = NewSUBController(g, LinksPath, JsonPath, Encrypt, ShowInfo, RemarkModel, SubUpdates, SubJsonFragment)

 	return engine, nil
 }
--- a/sub/subController.go
+++ b/sub/subController.go
@@ -3,34 +3,56 @@ package sub
 import (
 	"encoding/base64"
 	"strings"
-	"x-ui/web/service"

 	"github.com/gin-gonic/gin"
 )

 type SUBController struct {
-	subService     SubService
-	settingService service.SettingService
+	subPath        string
+	subJsonPath    string
+	subEncrypt     bool
+	updateInterval string
+
+	subService     *SubService
+	subJsonService *SubJsonService
 }

-func NewSUBController(g *gin.RouterGroup) *SUBController {
-	a := &SUBController{}
+func NewSUBController(
+	g *gin.RouterGroup,
+	subPath string,
+	jsonPath string,
+	encrypt bool,
+	showInfo bool,
+	rModel string,
+	update string,
+	jsonFragment string) *SUBController {
+
+	a := &SUBController{
+		subPath:        subPath,
+		subJsonPath:    jsonPath,
+		subEncrypt:     encrypt,
+		updateInterval: update,
+
+		subService:     NewSubService(showInfo, rModel),
+		subJsonService: NewSubJsonService(jsonFragment),
+	}
 	a.initRouter(g)
 	return a
 }

 func (a *SUBController) initRouter(g *gin.RouterGroup) {
-	g = g.Group("/")
+	gLink := g.Group(a.subPath)
+	gJson := g.Group(a.subJsonPath)

-	g.GET("/:subid", a.subs)
+	gLink.GET(":subid", a.subs)
+
+	gJson.GET(":subid", a.subJsons)
 }

 func (a *SUBController) subs(c *gin.Context) {
-	subEncrypt, _ := a.settingService.GetSubEncrypt()
-	subShowInfo, _ := a.settingService.GetSubShowInfo()
 	subId := c.Param("subid")
 	host := strings.Split(c.Request.Host, ":")[0]
-	subs, headers, err := a.subService.GetSubs(subId, host, subShowInfo)
+	subs, header, err := a.subService.GetSubs(subId, host)
 	if err != nil || len(subs) == 0 {
 		c.String(400, "Error!")
 	} else {
@@ -40,14 +62,31 @@ func (a *SUBController) subs(c *gin.Context) {
 		}

 		// Add headers
-		c.Writer.Header().Set("Subscription-Userinfo", headers[0])
-		c.Writer.Header().Set("Profile-Update-Interval", headers[1])
-		c.Writer.Header().Set("Profile-Title", headers[2])
+		c.Writer.Header().Set("Subscription-Userinfo", header)
+		c.Writer.Header().Set("Profile-Update-Interval", a.updateInterval)
+		c.Writer.Header().Set("Profile-Title", subId)

-		if subEncrypt {
+		if a.subEncrypt {
 			c.String(200, base64.StdEncoding.EncodeToString([]byte(result)))
 		} else {
 			c.String(200, result)
 		}
 	}
 }
+
+func (a *SUBController) subJsons(c *gin.Context) {
+	subId := c.Param("subid")
+	host := strings.Split(c.Request.Host, ":")[0]
+	jsonSub, header, err := a.subJsonService.GetJson(subId, host)
+	if err != nil || len(jsonSub) == 0 {
+		c.String(400, "Error!")
+	} else {
+
+		// Add headers
+		c.Writer.Header().Set("Subscription-Userinfo", header)
+		c.Writer.Header().Set("Profile-Update-Interval", a.updateInterval)
+		c.Writer.Header().Set("Profile-Title", subId)
+
+		c.String(200, jsonSub)
+	}
+}
--- a/sub/subJsonService.go
+++ b/sub/subJsonService.go
@@ -0,0 +1,355 @@
+package sub
+
+import (
+	_ "embed"
+	"encoding/json"
+	"fmt"
+	"strings"
+	"x-ui/database/model"
+	"x-ui/logger"
+	"x-ui/util/json_util"
+	"x-ui/util/random"
+	"x-ui/web/service"
+	"x-ui/xray"
+)
+
+//go:embed default.json
+var defaultJson string
+
+type SubJsonService struct {
+	fragmanet string
+
+	inboundService service.InboundService
+	SubService
+}
+
+func NewSubJsonService(fragment string) *SubJsonService {
+	return &SubJsonService{
+		fragmanet: fragment,
+	}
+}
+
+func (s *SubJsonService) GetJson(subId string, host string) (string, string, error) {
+	inbounds, err := s.SubService.getInboundsBySubId(subId)
+	if err != nil || len(inbounds) == 0 {
+		return "", "", err
+	}
+
+	var header string
+	var traffic xray.ClientTraffic
+	var clientTraffics []xray.ClientTraffic
+	var configJson map[string]interface{}
+	var defaultOutbounds []json_util.RawMessage
+
+	json.Unmarshal([]byte(defaultJson), &configJson)
+	if outboundSlices, ok := configJson["outbounds"].([]interface{}); ok {
+		for _, defaultOutbound := range outboundSlices {
+			jsonBytes, _ := json.Marshal(defaultOutbound)
+			defaultOutbounds = append(defaultOutbounds, jsonBytes)
+		}
+	}
+
+	outbounds := []json_util.RawMessage{}
+	startIndex := 0
+	// Prepare Inbounds
+	for _, inbound := range inbounds {
+		clients, err := s.inboundService.GetClients(inbound)
+		if err != nil {
+			logger.Error("SubJsonService - GetClients: Unable to get clients from inbound")
+		}
+		if clients == nil {
+			continue
+		}
+		if len(inbound.Listen) > 0 && inbound.Listen[0] == '@' {
+			listen, port, streamSettings, err := s.getFallbackMaster(inbound.Listen, inbound.StreamSettings)
+			if err == nil {
+				inbound.Listen = listen
+				inbound.Port = port
+				inbound.StreamSettings = streamSettings
+			}
+		}
+
+		var subClients []model.Client
+		for _, client := range clients {
+			if client.Enable && client.SubID == subId {
+				subClients = append(subClients, client)
+				clientTraffics = append(clientTraffics, s.SubService.getClientTraffics(inbound.ClientStats, client.Email))
+			}
+		}
+
+		outbound := s.getOutbound(inbound, subClients, host, startIndex)
+		if outbound != nil {
+			outbounds = append(outbounds, outbound...)
+			startIndex += len(outbound)
+		}
+	}
+
+	if len(outbounds) == 0 {
+		return "", "", nil
+	}
+
+	// Prepare statistics
+	for index, clientTraffic := range clientTraffics {
+		if index == 0 {
+			traffic.Up = clientTraffic.Up
+			traffic.Down = clientTraffic.Down
+			traffic.Total = clientTraffic.Total
+			if clientTraffic.ExpiryTime > 0 {
+				traffic.ExpiryTime = clientTraffic.ExpiryTime
+			}
+		} else {
+			traffic.Up += clientTraffic.Up
+			traffic.Down += clientTraffic.Down
+			if traffic.Total == 0 || clientTraffic.Total == 0 {
+				traffic.Total = 0
+			} else {
+				traffic.Total += clientTraffic.Total
+			}
+			if clientTraffic.ExpiryTime != traffic.ExpiryTime {
+				traffic.ExpiryTime = 0
+			}
+		}
+	}
+
+	if s.fragmanet != "" {
+		outbounds = append(outbounds, json_util.RawMessage(s.fragmanet))
+	}
+
+	// Combile outbounds
+	outbounds = append(outbounds, defaultOutbounds...)
+	configJson["outbounds"] = outbounds
+	finalJson, _ := json.MarshalIndent(configJson, "", "  ")
+
+	header = fmt.Sprintf("upload=%d; download=%d; total=%d; expire=%d", traffic.Up, traffic.Down, traffic.Total, traffic.ExpiryTime/1000)
+	return string(finalJson), header, nil
+}
+
+func (s *SubJsonService) getOutbound(inbound *model.Inbound, clients []model.Client, host string, startIndex int) []json_util.RawMessage {
+	var newOutbounds []json_util.RawMessage
+	stream := s.streamData(inbound.StreamSettings)
+
+	externalProxies, ok := stream["externalProxy"].([]interface{})
+	if !ok || len(externalProxies) == 0 {
+		externalProxies = []interface{}{
+			map[string]interface{}{
+				"forceTls": "same",
+				"dest":     host,
+				"port":     float64(inbound.Port),
+			},
+		}
+	}
+
+	delete(stream, "externalProxy")
+
+	config_index := startIndex
+	for _, ep := range externalProxies {
+		extPrxy := ep.(map[string]interface{})
+		inbound.Listen = extPrxy["dest"].(string)
+		inbound.Port = int(extPrxy["port"].(float64))
+		newStream := stream
+		switch extPrxy["forceTls"].(string) {
+		case "tls":
+			if newStream["security"] != "tls" {
+				newStream["security"] = "tls"
+				newStream["tslSettings"] = map[string]interface{}{}
+			}
+		case "none":
+			if newStream["security"] != "none" {
+				newStream["security"] = "none"
+				delete(newStream, "tslSettings")
+			}
+		}
+		streamSettings, _ := json.MarshalIndent(newStream, "", "  ")
+		inbound.StreamSettings = string(streamSettings)
+
+		for _, client := range clients {
+			inbound.Tag = fmt.Sprintf("proxy_%d", config_index)
+			switch inbound.Protocol {
+			case "vmess", "vless":
+				newOutbounds = append(newOutbounds, s.genVnext(inbound, client))
+			case "trojan", "shadowsocks":
+				newOutbounds = append(newOutbounds, s.genServer(inbound, client))
+			}
+			config_index += 1
+		}
+	}
+
+	return newOutbounds
+}
+
+func (s *SubJsonService) streamData(stream string) map[string]interface{} {
+	var streamSettings map[string]interface{}
+	json.Unmarshal([]byte(stream), &streamSettings)
+	security, _ := streamSettings["security"].(string)
+	if security == "tls" {
+		streamSettings["tlsSettings"] = s.tlsData(streamSettings["tlsSettings"].(map[string]interface{}))
+	} else if security == "reality" {
+		streamSettings["realitySettings"] = s.realityData(streamSettings["realitySettings"].(map[string]interface{}))
+	}
+	delete(streamSettings, "sockopt")
+
+	if s.fragmanet != "" {
+		streamSettings["sockopt"] = json_util.RawMessage(`{"dialerProxy": "fragment", "tcpKeepAliveIdle": 100, "tcpNoDelay": true}`)
+	}
+
+	// remove proxy protocol
+	network, _ := streamSettings["network"].(string)
+	switch network {
+	case "tcp":
+		streamSettings["tcpSettings"] = s.removeAcceptProxy(streamSettings["tcpSettings"])
+	case "ws":
+		streamSettings["wsSettings"] = s.removeAcceptProxy(streamSettings["wsSettings"])
+	}
+
+	return streamSettings
+}
+
+func (s *SubJsonService) removeAcceptProxy(setting interface{}) map[string]interface{} {
+	netSettings, ok := setting.(map[string]interface{})
+	if ok {
+		delete(netSettings, "acceptProxyProtocol")
+	}
+	return netSettings
+}
+
+func (s *SubJsonService) tlsData(tData map[string]interface{}) map[string]interface{} {
+	tlsData := make(map[string]interface{}, 1)
+	tlsClientSettings := tData["settings"].(map[string]interface{})
+
+	tlsData["serverName"] = tData["serverName"]
+	tlsData["alpn"] = tData["alpn"]
+	if allowInsecure, ok := tlsClientSettings["allowInsecure"].(bool); ok {
+		tlsData["allowInsecure"] = allowInsecure
+	}
+	if fingerprint, ok := tlsClientSettings["fingerprint"].(string); ok {
+		tlsData["fingerprint"] = fingerprint
+	}
+	return tlsData
+}
+
+func (s *SubJsonService) realityData(rData map[string]interface{}) map[string]interface{} {
+	rltyData := make(map[string]interface{}, 1)
+	rltyClientSettings := rData["settings"].(map[string]interface{})
+
+	rltyData["show"] = false
+	rltyData["publicKey"] = rltyClientSettings["publicKey"]
+	rltyData["fingerprint"] = rltyClientSettings["fingerprint"]
+
+	// Set random data
+	rltyData["spiderX"] = "/" + random.Seq(15)
+	shortIds, ok := rData["shortIds"].([]interface{})
+	if ok && len(shortIds) > 0 {
+		rltyData["shortId"] = shortIds[random.Num(len(shortIds))].(string)
+	} else {
+		rltyData["shortId"] = ""
+	}
+	serverNames, ok := rData["serverNames"].([]interface{})
+	if ok && len(serverNames) > 0 {
+		rltyData["serverName"] = serverNames[random.Num(len(serverNames))].(string)
+	} else {
+		rltyData["serverName"] = ""
+	}
+
+	return rltyData
+}
+
+func (s *SubJsonService) genVnext(inbound *model.Inbound, client model.Client) json_util.RawMessage {
+	outbound := Outbound{}
+	usersData := make([]UserVnext, 1)
+
+	usersData[0].ID = client.ID
+	usersData[0].Level = 8
+	if inbound.Protocol == model.VLESS {
+		usersData[0].Flow = client.Flow
+		usersData[0].Encryption = "none"
+	}
+
+	vnextData := make([]VnextSetting, 1)
+	vnextData[0] = VnextSetting{
+		Address: inbound.Listen,
+		Port:    inbound.Port,
+		Users:   usersData,
+	}
+
+	outbound.Protocol = string(inbound.Protocol)
+	outbound.Tag = inbound.Tag
+	outbound.StreamSettings = json_util.RawMessage(inbound.StreamSettings)
+	outbound.Settings = OutboundSettings{
+		Vnext: vnextData,
+	}
+
+	result, _ := json.MarshalIndent(outbound, "", "  ")
+	return result
+}
+
+func (s *SubJsonService) genServer(inbound *model.Inbound, client model.Client) json_util.RawMessage {
+	outbound := Outbound{}
+
+	serverData := make([]ServerSetting, 1)
+	serverData[0] = ServerSetting{
+		Address:  inbound.Listen,
+		Port:     inbound.Port,
+		Level:    8,
+		Password: client.Password,
+	}
+
+	if inbound.Protocol == model.Shadowsocks {
+		var inboundSettings map[string]interface{}
+		json.Unmarshal([]byte(inbound.Settings), &inboundSettings)
+		method, _ := inboundSettings["method"].(string)
+		serverData[0].Method = method
+
+		// server password in multi-user 2022 protocols
+		if strings.HasPrefix(method, "2022") {
+			if serverPassword, ok := inboundSettings["password"].(string); ok {
+				serverData[0].Password = fmt.Sprintf("%s:%s", serverPassword, client.Password)
+			}
+		}
+	}
+
+	outbound.Protocol = string(inbound.Protocol)
+	outbound.Tag = inbound.Tag
+	outbound.StreamSettings = json_util.RawMessage(inbound.StreamSettings)
+	outbound.Settings = OutboundSettings{
+		Servers: serverData,
+	}
+
+	result, _ := json.MarshalIndent(outbound, "", "  ")
+	return result
+}
+
+type Outbound struct {
+	Protocol       string                 `json:"protocol"`
+	Tag            string                 `json:"tag"`
+	StreamSettings json_util.RawMessage   `json:"streamSettings"`
+	Mux            map[string]interface{} `json:"mux,omitempty"`
+	ProxySettings  map[string]interface{} `json:"proxySettings,omitempty"`
+	Settings       OutboundSettings       `json:"settings,omitempty"`
+}
+
+type OutboundSettings struct {
+	Vnext   []VnextSetting  `json:"vnext,omitempty"`
+	Servers []ServerSetting `json:"servers,omitempty"`
+}
+
+type VnextSetting struct {
+	Address string      `json:"address"`
+	Port    int         `json:"port"`
+	Users   []UserVnext `json:"users"`
+}
+
+type UserVnext struct {
+	Encryption string `json:"encryption,omitempty"`
+	Flow       string `json:"flow,omitempty"`
+	ID         string `json:"id"`
+	Level      int    `json:"level"`
+}
+
+type ServerSetting struct {
+	Password string `json:"password"`
+	Level    int    `json:"level"`
+	Address  string `json:"address"`
+	Port     int    `json:"port"`
+	Flow     string `json:"flow,omitempty"`
+	Method   string `json:"method,omitempty"`
+}
--- a/sub/subService.go
+++ b/sub/subService.go
@@ -20,47 +20,47 @@ type SubService struct {
 	address        string
 	showInfo       bool
 	remarkModel    string
+	datepicker     string
 	inboundService service.InboundService
 	settingService service.SettingService
 }

-func (s *SubService) GetSubs(subId string, host string, showInfo bool) ([]string, []string, error) {
+func NewSubService(showInfo bool, remarkModel string) *SubService {
+	return &SubService{
+		showInfo:    showInfo,
+		remarkModel: remarkModel,
+	}
+}
+
+func (s *SubService) GetSubs(subId string, host string) ([]string, string, error) {
 	s.address = host
-	s.showInfo = showInfo
 	var result []string
-	var headers []string
+	var header string
 	var traffic xray.ClientTraffic
 	var clientTraffics []xray.ClientTraffic
 	inbounds, err := s.getInboundsBySubId(subId)
 	if err != nil {
-		return nil, nil, err
+		return nil, "", err
 	}
-	s.remarkModel, err = s.settingService.GetRemarkModel()
+
+	s.datepicker, err = s.settingService.GetDatepicker()
 	if err != nil {
-		s.remarkModel = "-ieo"
+		s.datepicker = "gregorian"
 	}
 	for _, inbound := range inbounds {
 		clients, err := s.inboundService.GetClients(inbound)
 		if err != nil {
-			logger.Error("SubService - GetSub: Unable to get clients from inbound")
+			logger.Error("SubService - GetClients: Unable to get clients from inbound")
 		}
 		if clients == nil {
 			continue
 		}
 		if len(inbound.Listen) > 0 && inbound.Listen[0] == '@' {
-			fallbackMaster, err := s.getFallbackMaster(inbound.Listen)
+			listen, port, streamSettings, err := s.getFallbackMaster(inbound.Listen, inbound.StreamSettings)
 			if err == nil {
-				inbound.Listen = fallbackMaster.Listen
-				inbound.Port = fallbackMaster.Port
-				var stream map[string]interface{}
-				json.Unmarshal([]byte(inbound.StreamSettings), &stream)
-				var masterStream map[string]interface{}
-				json.Unmarshal([]byte(fallbackMaster.StreamSettings), &masterStream)
-				stream["security"] = masterStream["security"]
-				stream["tlsSettings"] = masterStream["tlsSettings"]
-				stream["externalProxy"] = masterStream["externalProxy"]
-				modifiedStream, _ := json.MarshalIndent(stream, "", "  ")
-				inbound.StreamSettings = string(modifiedStream)
+				inbound.Listen = listen
+				inbound.Port = port
+				inbound.StreamSettings = streamSettings
 			}
 		}
 		for _, client := range clients {
@@ -71,6 +71,8 @@ func (s *SubService) GetSubs(subId string, host string, showInfo bool) ([]string
 			}
 		}
 	}
+
+	// Prepare statistics
 	for index, clientTraffic := range clientTraffics {
 		if index == 0 {
 			traffic.Up = clientTraffic.Up
@@ -92,11 +94,8 @@ func (s *SubService) GetSubs(subId string, host string, showInfo bool) ([]string
 			}
 		}
 	}
-	headers = append(headers, fmt.Sprintf("upload=%d; download=%d; total=%d; expire=%d", traffic.Up, traffic.Down, traffic.Total, traffic.ExpiryTime/1000))
-	updateInterval, _ := s.settingService.GetSubUpdates()
-	headers = append(headers, fmt.Sprintf("%d", updateInterval))
-	headers = append(headers, subId)
-	return result, headers, nil
+	header = fmt.Sprintf("upload=%d; download=%d; total=%d; expire=%d", traffic.Up, traffic.Down, traffic.Total, traffic.ExpiryTime/1000)
+	return result, header, nil
 }

 func (s *SubService) getInboundsBySubId(subId string) ([]*model.Inbound, error) {
@@ -125,7 +124,7 @@ func (s *SubService) getClientTraffics(traffics []xray.ClientTraffic, email stri
 	return xray.ClientTraffic{}
 }

-func (s *SubService) getFallbackMaster(dest string) (*model.Inbound, error) {
+func (s *SubService) getFallbackMaster(dest string, streamSettings string) (string, int, string, error) {
 	db := database.GetDB()
 	var inbound *model.Inbound
 	err := db.Model(model.Inbound{}).
@@ -133,9 +132,19 @@ func (s *SubService) getFallbackMaster(dest string) (*model.Inbound, error) {
 		Where("EXISTS (SELECT * FROM json_each(settings, '$.fallbacks') WHERE json_extract(value, '$.dest') = ?)", dest).
 		Find(&inbound).Error
 	if err != nil {
-		return nil, err
+		return "", 0, "", err
 	}
-	return inbound, nil
+
+	var stream map[string]interface{}
+	json.Unmarshal([]byte(streamSettings), &stream)
+	var masterStream map[string]interface{}
+	json.Unmarshal([]byte(inbound.StreamSettings), &masterStream)
+	stream["security"] = masterStream["security"]
+	stream["tlsSettings"] = masterStream["tlsSettings"]
+	stream["externalProxy"] = masterStream["externalProxy"]
+	modifiedStream, _ := json.MarshalIndent(stream, "", "  ")
+
+	return inbound.Listen, inbound.Port, string(modifiedStream), nil
 }

 func (s *SubService) getLink(inbound *model.Inbound, email string) string {
@@ -573,6 +582,7 @@ func (s *SubService) genTrojanLink(inbound *model.Inbound, email string) string
 		if sniValue, ok := searchKey(tlsSetting, "serverName"); ok {
 			params["sni"], _ = sniValue.(string)
 		}
+
 		tlsSettings, _ := searchKey(tlsSetting, "settings")
 		if tlsSetting != nil {
 			if fpValue, ok := searchKey(tlsSettings, "fingerprint"); ok {
--- a/util/random/random.go
+++ b/util/random/random.go
@@ -2,7 +2,6 @@ package random

 import (
 	"math/rand"
-	"time"
 )

 var numSeq [10]rune
@@ -13,8 +12,6 @@ var numUpperSeq [36]rune
 var allSeq [62]rune

 func init() {
-	rand.Seed(time.Now().UnixNano())
-
 	for i := 0; i < 10; i++ {
 		numSeq[i] = rune('0' + i)
 	}
@@ -41,3 +38,7 @@ func Seq(n int) string {
 	}
 	return string(runes)
 }
+
+func Num(n int) int {
+	return rand.Intn(n)
+}
--- a/web/assets/codemirror/codemirror.js
+++ b/web/assets/codemirror/codemirror.js
@@ -538,7 +538,7 @@

  var on = function(emitter, type, f) {
    if (emitter.addEventListener) {
-      emitter.addEventListener(type, f, false);
+      emitter.addEventListener(type, f, { passive: false });
    } else if (emitter.attachEvent) {
      emitter.attachEvent("on" + type, f);
    } else {
--- a/web/assets/codemirror/xq.css
+++ b/web/assets/codemirror/xq.css
@@ -45,12 +45,12 @@ THE SOFTWARE.
 .cm-s-xq .CodeMirror-activeline-background { background: #e8f2ff; }
 .cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey;color:black !important;background:yellow; }

-.dark .cm-s-xq.CodeMirror { background-color: #222D42; border-color: #2c3950; color: rgb(255 255 255 / 65%); }
+.dark .cm-s-xq.CodeMirror { background-color: var(--dark-color-surface-200); border-color: var(--dark-color-surface-300); color: rgb(255 255 255 / 65%); }
 .dark .cm-s-xq.CodeMirror:hover { background-color: rgb(0 50 42 / 30%); border-color: #008771; transition: all .3s; }
-.dark .cm-s-xq div.CodeMirror-selected { background: rgba(0, 0, 0, 0.5);  }
-.dark .cm-s-xq .CodeMirror-line::selection, .dark .cm-s-xq .CodeMirror-line > span::selection, .dark .cm-s-xq .CodeMirror-line > span > span::selection { background: rgba(39, 0, 122, 0.99); }
-.dark .cm-s-xq .CodeMirror-line::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span > span::-moz-selection { background: rgba(39, 0, 122, 0.99); }
-.dark .cm-s-xq .CodeMirror-gutters { background: rgb(0 0 0 / 30%); border-right: 1px solid #2c3950; }
+.dark .cm-s-xq div.CodeMirror-selected { background: var(--dark-color-codemirror-line-selection); }
+.dark .cm-s-xq .CodeMirror-line::selection, .dark .cm-s-xq .CodeMirror-line > span::selection, .dark .cm-s-xq .CodeMirror-line > span > span::selection { background: var(--dark-color-codemirror-line-selection); }
+.dark .cm-s-xq .CodeMirror-line::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span > span::-moz-selection { background: var(--dark-color-codemirror-line-selection); }
+.dark .cm-s-xq .CodeMirror-gutters { background: rgb(0 0 0 / 30%); border-right: 1px solid var(--dark-color-surface-300); }
 .dark .cm-s-xq .CodeMirror-guttermarker { color: #FFBD40; }
 .dark .cm-s-xq .CodeMirror-guttermarker-subtle { color: rgb(255 255 255 / 70%); }
 .dark .cm-s-xq .CodeMirror-linenumber { color: rgb(255 255 255 / 50%); }
@@ -80,7 +80,7 @@ THE SOFTWARE.

 .Line-Hover{transition: all .2s;}
 .Line-Hover:hover{ background-color: rgba(0, 102, 85, 0.05) !important; }  
-.dark .Line-Hover:hover{ background-color: rgb(0 0 0 / 20%) !important; }
+.dark .Line-Hover:hover{ background-color: var(--dark-color-codemirror-line-hover) !important; }

 .CodeMirror-foldmarker { color: #fc8800; text-shadow: #ffd8aa 1px 1px 2px, #ffd8aa -1px -1px 2px, #ffd8aa 1px -1px 2px, #ffd8aa -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; }
 .dark .CodeMirror-foldmarker { color: #ffffff; text-shadow: #bbb 1px 1px 2px, #bbb -1px -1px 2px, #bbb 1px -1px 2px, #bbb -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; }
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -1,3 +1,87 @@
+:root {
+    --color-primary-100: #008771;
+    --dark-color-background: #0a1222;
+    --dark-color-surface-100: #151f31;
+    --dark-color-surface-200: #222d42;
+    --dark-color-surface-300: #2c3950;
+    --dark-color-surface-400: rgba(65, 85, 119, 0.5); /* line */
+    --dark-color-surface-500: #2c3950; /* popover & switch btn */
+    --dark-color-surface-600: #313f5a; /* dropmenu hover */ 
+    --dark-color-surface-700: #111929; /* modals */
+    --dark-color-table-hover: rgba(44, 57, 80, 0.2);
+    --dark-color-text-primary: rgba(255, 255, 255, 0.75);
+    --dark-color-stroke: #2c3950;
+    --dark-color-btn-danger: #cd3838;
+    --dark-color-btn-danger-border: transparent;
+    --dark-color-btn-danger-hover: #e94b4b;
+    --dark-color-tag-bg: rgba(255, 255, 255, 0.05);
+    --dark-color-tag-border:rgba(255, 255, 255, 0.15);
+    --dark-color-tag-color:rgba(255, 255, 255, 0.75);
+    --dark-color-tag-green-bg: #112421;
+    --dark-color-tag-green-border: #195141;
+    --dark-color-tag-green-color: #3ad3ba;
+    --dark-color-tag-purple-bg: #201425;
+    --dark-color-tag-purple-border: #5a2969;
+    --dark-color-tag-purple-color: #d988cd;
+    --dark-color-tag-red-bg: #291515;
+    --dark-color-tag-red-border: #5c2626;
+    --dark-color-tag-red-color: #e04141;
+    --dark-color-tag-orange-bg: #312313;
+    --dark-color-tag-orange-border: #593914;
+    --dark-color-tag-orange-color: #ffa031;
+    --dark-color-tag-blue-bg: #111a2c;
+    --dark-color-tag-blue-border: #1348ab;
+    --dark-color-tag-blue-color: #529fff;
+    --dark-color-codemirror-line-hover: rgba(0, 135, 113, 0.2);
+    --dark-color-codemirror-line-selection: rgba(0, 135, 113, 0.3);
+    --dark-color-login-background: var(--dark-color-background);
+    --dark-color-login-wave: var(--dark-color-surface-200);
+}
+
+html[data-theme='ultra-dark'] {
+    --dark-color-background: #21242a;
+    --dark-color-surface-100: #0c0e12;
+    --dark-color-surface-200: #222327;
+    --dark-color-surface-300: #32353b;
+    --dark-color-surface-400: rgba(255, 255, 255, 0.1);
+    --dark-color-surface-500: #3b404b;
+    --dark-color-surface-600: #505663;
+    --dark-color-surface-700: #101113;
+    --dark-color-table-hover: rgba(89, 89, 89, 0.15);
+    --dark-color-text-primary: rgb(255 255 255 / 85%);
+    --dark-color-stroke: #202025;
+    --dark-color-tag-green-bg: #112421;
+    --dark-color-tag-green-border: #1d5f4d;
+    --dark-color-tag-green-color: #59cbac;
+    --dark-color-tag-purple-bg: #241121;
+    --dark-color-tag-purple-border: #5a2969;
+    --dark-color-tag-purple-color: #d686ca;
+    --dark-color-tag-red-bg: #2a1215;
+    --dark-color-tag-red-border: #58181c;
+    --dark-color-tag-red-color: #e84749;
+    --dark-color-tag-orange-bg: #2b1d11;
+    --dark-color-tag-orange-border: #593815;
+    --dark-color-tag-orange-color: #e89a3c;
+    --dark-color-tag-blue-bg: #111a2c;
+    --dark-color-tag-blue-border: #0f367e;
+    --dark-color-tag-blue-color: #3c89e8;
+    --dark-color-codemirror-line-hover: rgba(85, 85, 85, 0.3);
+    --dark-color-codemirror-line-selection: rgba(85, 85, 85, 0.4);
+    --dark-color-login-background: #0a2227;
+    --dark-color-login-wave: #0f2d32;
+    .ant-dropdown-menu-dark {
+        background-color: var(--dark-color-surface-500);
+    }
+    .dark .ant-dropdown-menu-submenu-title:hover,
+    .dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),
+    .dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
+        background-color: var(--dark-color-surface-300);
+    }
+    .dark .waves-header {
+        background-color: #0a2227;
+    }
+}
+
 html,
 body {
    height: 100vh;
@@ -16,8 +100,9 @@ body {
    font-feature-settings: "tnum";
 }
 html {
-    --antd-wave-shadow-color: #008771;
+    --antd-wave-shadow-color: var(--color-primary-100);
    line-height: 1.15;
+    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
@@ -25,7 +110,7 @@ html {
 }

 ::selection {
-    color: #008771;
+    color: var(--color-primary-100);
    background-color: #cfe8e4;
 }

@@ -55,7 +140,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 {
@@ -93,7 +178,6 @@ style attribute {
 .ant-table-body {
    overflow-x: auto !important;
 }
-
 .ant-card-hoverable {
    cursor: auto;
    cursor: pointer;
@@ -133,6 +217,13 @@ style attribute {
        margin: 0.5rem;
        padding: 0.5rem;
    }
+    .ant-modal-body {
+        padding: 20px;
+    }
+    .ant-form-item-label {
+        line-height: 1.5;
+        padding: 8px 0 0;
+    }
 }

 .ant-layout-content {
@@ -211,7 +302,7 @@ style attribute {
 .ant-menu-submenu-active,
 .ant-menu-submenu-title:hover,
 .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open {
-    color: #008771;
+    color: var(--color-primary-100);
    background-color: rgb(232 244 242);
    border-radius: 0.5rem;
 }
@@ -410,6 +501,10 @@ style attribute {
    background-color: white;
 }

+.ant-form-item {
+    margin-bottom: 0;
+}
+
 .ant-setting-textarea {
    margin-top: 1.5rem;
 }
@@ -469,14 +564,14 @@ style attribute {
 }

 .normal-icon:hover {
-    color: #008771;
+    color: var(--color-primary-100);
 }

 /* DARK THEME */

 .dark ::selection {
    color: #fff;
-    background-color: #008771;
+    background-color: var(--color-primary-100);
 }

 .dark .normal-icon:hover {
@@ -491,13 +586,14 @@ style attribute {
 .dark .ant-table,
 .dark .ant-collapse-content,
 .dark .ant-tabs {
-    background-color: #151f31;
-    color: #ffffffa6;
+    background-color: var(--dark-color-surface-100);
+    color: var(--dark-color-text-primary);
 }

 .dark .ant-card-hoverable:hover,
 .dark .ant-space-item > .ant-tabs:hover {
-    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 80%);
+    /* box-shadow: 0 1px 10px -1px rgb(154 175 238 / 80%); */
+    box-shadow: 0 2px 8px transparent;
 }

 .dark > .ant-layout,
@@ -507,8 +603,8 @@ style attribute {
 .dark .ant-table-expanded-row:hover,
 .dark .ant-table-expanded-row .ant-table-tbody,
 .dark .ant-calendar {
-    background-color: #101828;
-    color: rgb(255 255 255 /65%);
+    background-color: var(--dark-color-background);
+    color: var(--dark-color-text-primary);
 }

 .dark .ant-table-expanded-row .ant-table-thead > tr:first-child > th {
@@ -517,7 +613,7 @@ style attribute {

 .dark .ant-calendar,
 .dark .ant-card-bordered {
-    border-color: #151f31;
+    border-color: var(--dark-color-background);
 }

 .dark .ant-table-bordered,
@@ -529,7 +625,7 @@ style attribute {
 .dark .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th,
 .dark .ant-table-bordered .ant-table-tbody > tr > td,
 .dark .ant-table-bordered .ant-table-thead > tr > th {
-    border-color: #2c3950;
+    border-color: var(--dark-color-surface-400);
 }

 .dark .ant-table-tbody > tr > td,
@@ -542,7 +638,7 @@ style attribute {
 .dark .ant-popover-title,
 .dark .ant-calendar-header,
 .dark .ant-calendar-input-wrap {
-    border-bottom-color: #2c3950;
+    border-bottom-color: var(--dark-color-surface-400);
 }

 .dark .ant-modal-footer,
@@ -550,7 +646,7 @@ style attribute {
 .dark .ant-calendar-footer,
 .dark .ant-divider-horizontal.ant-divider-with-text-center:before,
 .dark .ant-divider-horizontal.ant-divider-with-text-center:after {
-    border-top-color: #2c3950;
+    border-top-color: var(--dark-color-surface-300);
 }

 .dark .ant-progress-text,
@@ -586,7 +682,7 @@ style attribute {
 .dark .ant-calendar-year-panel-year,
 .dark .ant-calendar-month-panel-month,
 .dark .ant-calendar-decade-panel-decade {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-color-text-primary);
 }

 .dark .ant-list-item-meta-description {
@@ -612,13 +708,12 @@ style attribute {
 .dark .ant-select-dropdown li,
 .dark .ant-select-dropdown-menu-item,
 .dark .ant-divider:not(.ant-divider-with-text-center),
-.dark .ant-calendar-input,
 .dark .client-table-header,
 .dark .ant-select-selection--multiple .ant-select-selection__choice,
 .dark .ant-calendar-time-picker-inner {
-    background-color: #222d42;
-    border-color: #2c3950;
-    color: rgba(255, 255, 255, 0.65);
+    background-color: var(--dark-color-surface-200);
+    border-color: var(--dark-color-surface-300);
+    color: var(--dark-color-text-primary);
 }

 .dark .ant-select-selection:hover,
@@ -628,34 +723,34 @@ style attribute {
 .dark .ant-input:hover,
 .dark .ant-input:focus {
    background-color: rgba(0, 135, 113, 0.3);
-    border-color: #008771;
+    border-color: var(--color-primary-100);
 }

 .dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) {
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--dark-color-text-primary);
    background-color: rgb(10 117 87 / 30%);
-    border: 1px solid #008771;
+    border: 1px solid var(--color-primary-100);
 }

 .dark .ant-radio-button-wrapper,
 .dark .ant-radio-button-wrapper:before {
-    color: rgb(255 255 255 / 65%);
+    color: var(--dark-color-text-primary);
    background-color: rgba(0, 135, 113, 0.3);
-    border-color: #008771;
+    border-color: var(--color-primary-100);
 }

 .dark .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
 .dark .ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
    color: #fff;
    background-color: rgb(10 117 87 / 50%);
-    border-color: #008771;
+    border-color: var(--color-primary-100);
 }

 .dark .ant-btn-primary[disabled],
 .dark .ant-btn-danger[disabled],
 .dark .ant-calendar-ok-btn-disabled {
    color: rgb(255 255 255 / 35%);
-    background-color: #2c3950;
+    background-color: var(--dark-color-surface-300);
    border-color: #42516c;
 }

@@ -664,48 +759,47 @@ style attribute {
    > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
    > td,
 .dark .client-table-odd-row {
-    background-color: #00877122;
+    background-color: var(--dark-color-table-hover);
 }

 .dark .ant-table-row-expand-icon {
    color: #fff;
    background-color: #fff0;
-    border-color: #9ea2a8;
+    border-color: rgb(255 255 255 / 20%);
 }

 .dark .ant-table-row-expand-icon:hover {
-    color: #008771;
+    color: var(--color-primary-100);
    background-color: #fff0;
-    border-color: #008771;
+    border-color: var(--color-primary-100);
 }

 .dark .ant-switch:not(.ant-switch-checked),
 .dark .ant-progress-line .ant-progress-inner {
-    background-color: #2c3950;
+    background-color: var(--dark-color-surface-500);
 }

 .dark .ant-progress-circle-trail {
-    stroke: #2c3950 !important;
+    stroke: var(--dark-color-stroke) !important;
 }

-.ant-dropdown-menu-dark,
 .dark .ant-popover-inner {
-    background-color: #222d42;
+    background-color: var(--dark-color-surface-500);
 }

 .dark > .ant-popover-content > .ant-popover-arrow {
-    border-color: #222d42;
+    border-color: var(--dark-color-surface-500);
 }

 .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,
 .dark .ant-select-dropdown-menu-item-selected,
 .dark .ant-select-dropdown-menu-item:hover,
 .dark .ant-calendar-time-picker-select-option-selected {
-    background-color: #313f5a;
+    background-color: var(--dark-color-surface-600);
 }

 .ant-menu-dark .ant-menu-item:hover {
-    background-color: #2c3950;
+    background-color: var(--dark-color-surface-300);
 }

 .dark .ant-alert-message {
@@ -713,61 +807,61 @@ style attribute {
 }

 .dark .ant-tag {
-    color: rgba(255, 255, 255, 0.65);
-    background-color: #ffffff0a;
-    border-color: #344461;
+    color: var(--dark-color-tag-color);
+    background-color: var(--dark-color-tag-bg);
+    border-color: var(--dark-color-tag-border);
 }

 .dark .ant-tag-blue {
-    background-color: #111a2c;
-    border-color: #0f367e;
-    color: #3c89e8;
+    background-color: var(--dark-color-tag-blue-bg);
+    border-color: var(--dark-color-tag-blue-border);
+    color: var(--dark-color-tag-blue-color);
 }

 .dark .ant-tag-red,
 .dark .ant-alert-error {
-    background-color: #291515;
-    border-color: #5c2626;
-    color: #e04141;
+    background-color: var(--dark-color-tag-red-bg);
+    border-color: var(--dark-color-tag-red-border);
+    color: var(--dark-color-tag-red-color);
 }

 .dark .ant-tag-orange,
 .dark .ant-alert-warning {
-    background-color: #312313;
-    border-color: #593914;
-    color: #ffa031;
+    background-color: var(--dark-color-tag-orange-bg);
+    border-color: var(--dark-color-tag-orange-border);
+    color: var(--dark-color-tag-orange-color);
 }

 .dark .ant-tag-green {
-    background-color: #112421;
-    border-color: #144840;
-    color: #33bca5;
+    background-color: var(--dark-color-tag-green-bg);
+    border-color: var(--dark-color-tag-green-border);
+    color: var(--dark-color-tag-green-color);
 }

 .dark .ant-tag-purple {
-    background-color: #2c1e32;
-    border-color: #49394e;
-    color: #cfb9cc;
+    background-color: var(--dark-color-tag-purple-bg);
+    border-color: var(--dark-color-tag-purple-border);
+    color: var(--dark-color-tag-purple-color);
 }

 .dark .ant-modal-content,
 .dark .ant-modal-header {
-    background-color: #181f2c;
+    background-color: var(--dark-color-surface-700);
 }

 .dark .ant-calendar-next-month-btn-day .ant-calendar-date,
 .dark .ant-calendar-last-month-cell .ant-calendar-date {
-    color: #2c3950;
+    color: var(--dark-color-surface-300);
 }

 .dark .ant-calendar-selected-day .ant-calendar-date {
-    background-color: #008771 !important;
+    background-color: var(--color-primary-100) !important;
    color: #fff;
 }

 .dark .ant-calendar-date:hover,
 .dark .ant-calendar-time-picker-select li:hover {
-    background-color: #313f5a;
+    background-color: var(--dark-color-surface-600);
    color: #fff;
 }

@@ -781,27 +875,31 @@ style attribute {
    color: #fff;
    font-weight: 600;
    outline: none;
-    background-color: #008771;
+    background-color: var(--color-primary-100);
 }

 .dark .ant-calendar-time-picker-select {
-    border-right-color: #2c3950;
+    border-right-color: var(--dark-color-surface-300);
 }

+.has-warning .ant-select-selection,
+.has-warning .ant-select-selection:hover,
 .has-warning .ant-input,
 .has-warning .ant-input:hover {
-    background-color: #fff6e6;
-    border-color: #ffd98c;
+    background-color: #ffeee1;
+    border-color: #fec093;
 }

 .has-warning .ant-input::placeholder {
-    color: #faad14;
+    color: #f37b24;
 }

 .has-warning .ant-input:not([disabled]):hover {
-    border-color: #ffd98c;
+    border-color: #fec093;
 }

+.dark .has-warning .ant-select-selection,
+.dark .has-warning .ant-select-selection:hover,
 .dark .has-warning .ant-input,
 .dark .has-warning .ant-input:hover {
    border-color: #784e1d;
@@ -817,7 +915,7 @@ style attribute {
 }

 .dark .has-success .anticon {
-    color: #61bf39;
+    color: var(--color-primary-100);
    animation-name: diffZoomIn1 !important;
 }

@@ -840,6 +938,17 @@ style attribute {
 .ant-menu,
 .ant-radio-button-wrapper {
    user-select: none;
+    -webkit-user-select: none;
+}
+
+.ant-calendar-date,
+.ant-calendar-year-panel-year,
+.ant-calendar-decade-panel-decade,
+.ant-calendar-month-panel-month,
+.ant-checkbox-inner,
+.ant-checkbox-checked:after,
+.ant-table-row-expand-icon {
+    border-radius: 6px;
 }

 .ant-calendar-date:hover {
@@ -852,19 +961,19 @@ style attribute {
 }

 .ant-calendar-today .ant-calendar-date {
-    color: #008771;
+    color: var(--color-primary-100);
    font-weight: 700;
-    border-color: #008771;
+    border-color: var(--color-primary-100);
 }

 .dark .ant-calendar-today .ant-calendar-date {
    color: #fff;
    font-weight: 700;
-    border-color: #008771;
+    border-color: var(--color-primary-100);
 }

 .ant-calendar-selected-day .ant-calendar-date {
-    background: #008771;
+    background: var(--color-primary-100);
    color: #ffffff;
 }

@@ -898,7 +1007,7 @@ li.ant-select-dropdown-menu-item:empty:after {
 .ant-select-dropdown.ant-select-dropdown--multiple
    .ant-select-dropdown-menu-item-selected:hover
    .ant-select-selected-icon {
-    color: #3c89e8;
+    color: var(--color-primary-100);
 }
 .ant-select-selection:hover,
 .ant-input-number-focused,
@@ -907,7 +1016,7 @@ li.ant-select-dropdown-menu-item:empty:after {
 }

 .dark .ant-input-number-handler:active {
-    background-color: #008771;
+    background-color: var(--color-primary-100);
 }

 .dark .ant-input-number-handler:hover .ant-input-number-handler-down-inner,
@@ -935,7 +1044,7 @@ li.ant-select-dropdown-menu-item:empty:after {
 }

 .dark .ant-calendar-year-panel-header {
-    border-bottom: 1px solid #222d42;
+    border-bottom: 1px solid var(--dark-color-surface-200);
 }

 .dark .ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year,
@@ -943,10 +1052,11 @@ li.ant-select-dropdown-menu-item:empty:after {
    color: rgba(255, 255, 255, 0.35);
 }

+.ant-dropdown-menu-dark,
 .dark .ant-calendar-year-panel-year:hover,
 .dark .ant-calendar-month-panel-month:hover,
 .dark .ant-calendar-decade-panel-decade:hover {
-    background-color: #222d42;
+    background-color: var(--dark-color-surface-200);
 }

 .dark .ant-calendar-header a:hover {
@@ -954,13 +1064,13 @@ li.ant-select-dropdown-menu-item:empty:after {
 }

 .dark .ant-calendar-month-panel-header {
-    background-color: #101828;
-    border-bottom: 1px solid #222d42;
+    background-color: var(--dark-color-background);
+    border-bottom: 1px solid var(--dark-color-surface-200);
 }

 .dark .ant-calendar-year-panel,
 .dark .ant-calendar table {
-    background-color: #101828;
+    background-color: var(--dark-color-background);
 }

 .dark .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
@@ -978,7 +1088,7 @@ li.ant-select-dropdown-menu-item:empty:after {
    .ant-calendar-decade-panel-selected-cell
    .ant-calendar-decade-panel-decade:hover {
    color: #fff;
-    background-color: #008771;
+    background-color: var(--color-primary-100);
 }

 .dark .ant-calendar-last-month-cell .ant-calendar-date,
@@ -992,8 +1102,8 @@ li.ant-select-dropdown-menu-item:empty:after {

 .dark .ant-calendar-today .ant-calendar-date:hover {
    color: #fff;
-    border-color: #008771;
-    background-color: #008771;
+    border-color: var(--color-primary-100);
+    background-color: var(--color-primary-100);
 }

 .dark
@@ -1006,8 +1116,8 @@ li.ant-select-dropdown-menu-item:empty:after {
 }

 .dark .ant-calendar-decade-panel-header {
-    border-bottom: 1px solid #222d42;
-    background-color: #101828;
+    border-bottom: 1px solid var(--dark-color-surface-200);
+    background-color: var(--dark-color-background);
 }

 .dark .ant-checkbox-inner {
@@ -1016,30 +1126,41 @@ li.ant-select-dropdown-menu-item:empty:after {
 }

 .dark .ant-checkbox-checked .ant-checkbox-inner {
-    background-color: #008771;
-    border-color: #008771;
+    background-color: var(--color-primary-100);
+    border-color: var(--color-primary-100);
 }

 .dark .ant-calendar-input {
-    background-color: #101828;
+    background-color: var(--dark-color-background);
+    color: var(--dark-color-text-primary);
 }

 .dark .ant-calendar-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
 }

+.ant-input-group.ant-input-group-compact-addon:not(:first-child):not(
+    :last-child
+  ),
+.ant-input-group.ant-input-group-compact-wrap:not(:first-child):not(
+    :last-child
+  ),
+.ant-input-group.ant-input-group-compact
+  > .ant-input:not(:first-child):not(:last-child),
+.ant-input-number-handler,
 .ant-input-number-handler-wrap {
-    border-radius: 0;
-}
-
-.ant-input-number-handler {
-    border-radius: 0;
+  border-radius: 0;
 }

 .ant-input-number {
    overflow: clip;
 }

+.ant-modal-body,
+.ant-collapse-content>.ant-collapse-content-box {
+    overflow-x: auto;
+}
+
 .ant-calendar-year-panel-year:hover,
 .ant-calendar-decade-panel-decade:hover,
 .ant-calendar-month-panel-month:hover,
@@ -1062,13 +1183,69 @@ li.ant-select-dropdown-menu-item:empty:after {
    > td,
 .ant-table-thead
    > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-    > td {
+    > td,
+.ant-calendar-time-picker-select li:hover {
    background-color: rgb(232 244 242);
 }

-.dark .ant-dropdown-menu-item:hover,
 .dark .ant-dropdown-menu-submenu-title:hover,
 .dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),
 .dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
-    background-color: #313f5a;
+    background-color: var(--dark-color-surface-600);
+}
+
+.ant-select-dropdown,
+.ant-popover-inner {
+    overflow-x: hidden;
+}
+.ant-popover-inner-content {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.qr-bg {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    padding: 0.5rem;
+    border-radius: 1rem;
+}
+
+.ant-input-group-addon:not(:first-child):not(:last-child) {
+    border-radius: 0rem 1rem 1rem 0rem;
+}
+
+.ant-tag {
+    margin-right: 6px;
+}
+
+b, strong {
+    font-weight: 500;
+}
+
+.ant-collapse>.ant-collapse-item>.ant-collapse-header {
+    padding: 10px 16px 10px 40px;
+}
+
+.dark .ant-message-notice-content {
+    background-color: var(--dark-color-surface-200);
+    border: 1px solid var(--dark-color-surface-300); 
+    color: var(--dark-color-text-primary);
+}
+
+.ant-btn-danger {
+    background-color: var(--dark-color-btn-danger);
+    border-color: var(--dark-color-btn-danger-border);
+}
+
+.ant-btn-danger:focus, .ant-btn-danger:hover {
+    background-color: var(--dark-color-btn-danger-hover);
+    border-color: var(--dark-color-btn-danger-hover);
+}
+
+.dark .ant-alert-close-icon .anticon-close:hover {
+    color: rgb(255 255 255);
 }
--- a/web/assets/favicon.ico
+++ b/web/assets/favicon.ico
--- a/web/assets/js/langs.js
+++ b/web/assets/js/langs.js
@@ -29,6 +29,16 @@ const supportLangs = [
        value: 'es-ES',
        icon: '🇪🇸',
    },
+    {
+        name: 'Indonesian',
+        value: 'id-ID',
+        icon: '🇮🇩',
+    },
+    {
+        name: 'Український',
+        value: 'uk-UA',
+        icon: '🇺🇦',
+    },
 ];

 function getLang() {
--- a/web/assets/js/model/dbinbound.js
+++ b/web/assets/js/model/dbinbound.js
@@ -56,6 +56,10 @@ class DBInbound {
        return this.protocol === Protocols.HTTP;
    }

+    get isWireguard() {
+        return this.protocol === Protocols.WIREGUARD;
+    }
+
    get address() {
        let address = location.hostname;
        if (!ObjectUtil.isEmpty(this.listen) && this.listen !== "0.0.0.0") {
--- a/web/assets/js/model/outbound.js
+++ b/web/assets/js/model/outbound.js
@@ -8,6 +8,7 @@ const Protocols = {
    Shadowsocks: "shadowsocks",
    Socks: "socks",
    HTTP: "http",
+    Wireguard: "wireguard"
 };

 const SSMethods = {
@@ -46,18 +47,27 @@ const ALPN_OPTION = {
    HTTP1: "http/1.1",
 };

-const outboundDomainStrategies = [
+const OutboundDomainStrategies = [
    "AsIs",
    "UseIP",
    "UseIPv4",
    "UseIPv6"
-]
+];
+
+const WireguardDomainStrategy = [
+    "ForceIP",
+    "ForceIPv4",
+    "ForceIPv4v6",
+    "ForceIPv6",
+    "ForceIPv6v4"
+];

 Object.freeze(Protocols);
 Object.freeze(SSMethods);
 Object.freeze(TLS_FLOW_CONTROL);
 Object.freeze(ALPN_OPTION);
-Object.freeze(outboundDomainStrategies);
+Object.freeze(OutboundDomainStrategies);
+Object.freeze(WireguardDomainStrategy);

 class CommonClass {

@@ -408,7 +418,7 @@ class Outbound extends CommonClass {
    }

    canEnableTls() {
-        if (![Protocols.VMess, Protocols.VLESS, Protocols.Trojan].includes(this.protocol)) return false;
+        if (![Protocols.VMess, Protocols.VLESS, Protocols.Trojan, Protocols.Shadowsocks].includes(this.protocol)) return false;
        return ["tcp", "ws", "http", "quic", "grpc"].includes(this.stream.network);
    }

@@ -476,7 +486,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 +503,8 @@ class Outbound extends CommonClass {
        if (network === 'tcp') {
            stream.tcp = new TcpStreamSettings(
                json.type,
-                json.host ? json.host.split(','): [],
-                json.path ? json.path.split(','): []);
+                json.host ?? '',
+                json.path ?? '');
        } else if (network === 'kcp') {
            stream.kcp = new KcpStreamSettings();
            stream.type = json.type;
@@ -505,7 +515,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 +580,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('?');
@@ -625,6 +635,7 @@ Outbound.Settings = class extends CommonClass {
            case Protocols.Shadowsocks: return new Outbound.ShadowsocksSettings();
            case Protocols.Socks: return new Outbound.SocksSettings();
            case Protocols.HTTP: return new Outbound.HttpSettings();
+            case Protocols.Wireguard: return new Outbound.WireguardSettings();
            default: return null;
        }
    }
@@ -640,6 +651,7 @@ Outbound.Settings = class extends CommonClass {
            case Protocols.Shadowsocks: return Outbound.ShadowsocksSettings.fromJson(json);
            case Protocols.Socks: return Outbound.SocksSettings.fromJson(json);
            case Protocols.HTTP: return Outbound.HttpSettings.fromJson(json);
+            case Protocols.Wireguard: return Outbound.WireguardSettings.fromJson(json);
            default: return null;
        }
    }
@@ -838,23 +850,24 @@ Outbound.ShadowsocksSettings = class extends CommonClass {
        };
    }
 };
+
 Outbound.SocksSettings = class extends CommonClass {
-    constructor(address, port, user, password) {
+    constructor(address, port, user, pass) {
        super();
        this.address = address;
        this.port = port;
        this.user = user;
-        this.password = password;
+        this.pass = pass;
    }

    static fromJson(json={}) {
-        servers = json.servers;
+        let servers = json.servers;
        if(ObjectUtil.isArrEmpty(servers)) servers=[{users: [{}]}];
        return new Outbound.SocksSettings(
            servers[0].address,
            servers[0].port,
            ObjectUtil.isArrEmpty(servers[0].users) ? '' : servers[0].users[0].user,
-            ObjectUtil.isArrEmpty(servers[0].password) ? '' : servers[0].users[0].password,
+            ObjectUtil.isArrEmpty(servers[0].users) ? '' : servers[0].users[0].pass,
        );
    }

@@ -863,28 +876,28 @@ Outbound.SocksSettings = class extends CommonClass {
            servers: [{
                address: this.address,
                port: this.port,
-                users: ObjectUtil.isEmpty(this.user) ? [] : [{user: this.user, password: this.password}],
+                users: ObjectUtil.isEmpty(this.user) ? [] : [{user: this.user, pass: this.pass}],
            }],
        };
    }
 };
 Outbound.HttpSettings = class extends CommonClass {
-    constructor(address, port, user, password) {
+    constructor(address, port, user, pass) {
        super();
        this.address = address;
        this.port = port;
        this.user = user;
-        this.password = password;
+        this.pass = pass;
    }

    static fromJson(json={}) {
-        servers = json.servers;
+        let servers = json.servers;
        if(ObjectUtil.isArrEmpty(servers)) servers=[{users: [{}]}];
        return new Outbound.HttpSettings(
            servers[0].address,
            servers[0].port,
            ObjectUtil.isArrEmpty(servers[0].users) ? '' : servers[0].users[0].user,
-            ObjectUtil.isArrEmpty(servers[0].password) ? '' : servers[0].users[0].password,
+            ObjectUtil.isArrEmpty(servers[0].users) ? '' : servers[0].users[0].pass,
        );
    }

@@ -893,8 +906,91 @@ Outbound.HttpSettings = class extends CommonClass {
            servers: [{
                address: this.address,
                port: this.port,
-                users: ObjectUtil.isEmpty(this.user) ? [] : [{user: this.user, password: this.password}],
+                users: ObjectUtil.isEmpty(this.user) ? [] : [{user: this.user, pass: this.pass}],
            }],
        };
    }
+};
+
+Outbound.WireguardSettings = class extends CommonClass {
+    constructor(
+            mtu=1420, secretKey='',
+            address=[''], workers=2, domainStrategy='', reserved='',
+            peers=[new Outbound.WireguardSettings.Peer()], kernelMode=false) {
+        super();
+        this.mtu = mtu;
+        this.secretKey = secretKey;
+        this.pubKey = secretKey.length>0 ? Wireguard.generateKeypair(secretKey).publicKey : '';
+        this.address = address instanceof Array ? address.join(',') : address;
+        this.workers = workers;
+        this.domainStrategy = domainStrategy;
+        this.reserved = reserved instanceof Array ? reserved.join(',') : reserved;
+        this.peers = peers;
+        this.kernelMode = kernelMode;
+    }
+
+    addPeer() {
+        this.peers.push(new Outbound.WireguardSettings.Peer());
+    }
+
+    delPeer(index) {
+        this.peers.splice(index, 1);
+    }
+
+    static fromJson(json={}){
+        return new Outbound.WireguardSettings(
+            json.mtu,
+            json.secretKey,
+            json.address,
+            json.workers,
+            json.domainStrategy,
+            json.reserved,
+            json.peers.map(peer => Outbound.WireguardSettings.Peer.fromJson(peer)),
+            json.kernelMode,
+        );
+    }
+
+    toJson() {
+        return {
+            mtu: this.mtu?? undefined,
+            secretKey: this.secretKey,
+            address: this.address ? this.address.split(",") : [],
+            workers: this.workers?? undefined,
+            domainStrategy: WireguardDomainStrategy.includes(this.domainStrategy) ? this.domainStrategy : undefined,
+            reserved: this.reserved ? this.reserved.split(",").map(Number) : undefined,
+            peers: Outbound.WireguardSettings.Peer.toJsonArray(this.peers),
+            kernelMode: this.kernelMode,
+        };
+    }
+};
+
+Outbound.WireguardSettings.Peer = class extends CommonClass {
+    constructor(publicKey='', psk='', allowedIPs=['0.0.0.0/0','::/0'], endpoint='', keepAlive=0) {
+        super();
+        this.publicKey = publicKey;
+        this.psk = psk;
+        this.allowedIPs = allowedIPs;
+        this.endpoint = endpoint;
+        this.keepAlive = keepAlive;
+    }
+
+    static fromJson(json={}){
+        return new Outbound.WireguardSettings.Peer(
+            json.publicKey,
+            json.preSharedKey,
+            json.allowedIPs,
+            json.endpoint,
+            json.keepAlive
+        );
+    }
+
+    toJson() {
+        return {
+            publicKey: this.publicKey,
+            preSharedKey: this.psk.length>0 ? this.psk : undefined,
+            allowedIPs: this.allowedIPs ? this.allowedIPs : undefined,
+            endpoint: this.endpoint,
+            keepAlive: this.keepAlive?? undefined,
+        };
+    }
 };
--- a/web/assets/js/model/setting.js
+++ b/web/assets/js/model/setting.js
@@ -12,8 +12,10 @@ class AllSetting {
        this.expireDiff = "";
        this.trafficDiff = "";
        this.remarkModel = "-ieo";
+        this.datepicker = "gregorian";
        this.tgBotEnable = false;
        this.tgBotToken = "";
+        this.tgBotProxy = "";
        this.tgBotChatId = "";
        this.tgRunTime = "@daily";
        this.tgBotBackup = false;
@@ -26,6 +28,7 @@ class AllSetting {
        this.subListen = "";
        this.subPort = "2096";
        this.subPath = "/sub/";
+        this.subJsonPath = "/json/";
        this.subDomain = "";
        this.subCertFile = "";
        this.subKeyFile = "";
@@ -33,6 +36,8 @@ class AllSetting {
        this.subEncrypt = true;
        this.subShowInfo = false;
        this.subURI = '';
+        this.subJsonURI = '';
+        this.subJsonFragment = '';

        this.timeLocation = "Asia/Tehran";

--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -6,6 +6,7 @@ const Protocols = {
    DOKODEMO: 'dokodemo-door',
    SOCKS: 'socks',
    HTTP: 'http',
+    WIREGUARD: 'wireguard',
 };

 const SSMethods = {
@@ -235,6 +236,7 @@ TcpStreamSettings.TcpRequest = class extends XrayCommonClass {

    toJson() {
        return {
+            version: this.version,
            method: this.method,
            path: ObjectUtil.clone(this.path),
            headers: XrayCommonClass.toV2Headers(this.headers),
@@ -474,7 +476,7 @@ class TlsStreamSettings extends XrayCommonClass {
                cipherSuites = '',
                rejectUnknownSni = false,
                certificates=[new TlsStreamSettings.Cert()],
-                alpn=[ALPN_OPTION.HTTP1,ALPN_OPTION.H2],
+                alpn=[ALPN_OPTION.H2,ALPN_OPTION.HTTP1],
                settings=new TlsStreamSettings.Settings()) {
        super();
        this.sni = serverName;
@@ -602,7 +604,7 @@ class XtlsStreamSettings extends XrayCommonClass {
                alpn=[ALPN_OPTION.H2,ALPN_OPTION.HTTP1],
                settings=new XtlsStreamSettings.Settings()) {
        super();
-        this.server = serverName;
+        this.sni = serverName;
        this.certs = certificates;
        this.alpn = alpn;
        this.settings = settings;
@@ -636,7 +638,7 @@ class XtlsStreamSettings extends XrayCommonClass {

    toJson() {
        return {
-            serverName: this.server,
+            serverName: this.sni,
            certificates: XtlsStreamSettings.toJsonArray(this.certs),
            alpn: this.alpn,
            settings: this.settings,
@@ -764,16 +766,18 @@ class RealityStreamSettings extends XrayCommonClass {
 }

 RealityStreamSettings.Settings = class extends XrayCommonClass {
-    constructor(publicKey = '', fingerprint = UTLS_FINGERPRINT.UTLS_FIREFOX, spiderX= '/') {
+    constructor(publicKey = '', fingerprint = UTLS_FINGERPRINT.UTLS_FIREFOX, serverName = '', spiderX= '/') {
        super();
        this.publicKey = publicKey;
        this.fingerprint = fingerprint;
+        this.serverName = serverName;
        this.spiderX = spiderX;
    }
    static fromJson(json = {}) {
        return new RealityStreamSettings.Settings(
            json.publicKey,
            json.fingerprint,
+            json.serverName,
            json.spiderX,
        );
    }
@@ -781,6 +785,7 @@ RealityStreamSettings.Settings = class extends XrayCommonClass {
        return {
            publicKey: this.publicKey,
            fingerprint: this.fingerprint,
+            serverName: this.serverName,
            spiderX: this.spiderX,
        };
    }
@@ -794,6 +799,7 @@ class SockoptStreamSettings extends XrayCommonClass {
        this.mark = mark;
        this.tproxy = tproxy;
    }
+    
    static fromJson(json = {}) {
        if (Object.keys(json).length === 0) return undefined;
        return new SockoptStreamSettings(
@@ -995,18 +1001,6 @@ class Inbound extends XrayCommonClass {
        }
    }

-    get tls() {
-        return this.stream.security === 'tls';
-    }
-
-    set tls(isTls) {
-        if (isTls) {
-            this.stream.security = 'tls';
-        } else {
-            this.stream.security = 'none';
-        }
-    }
-
    get xtls() {
        return this.stream.security === 'xtls';
    }
@@ -1018,19 +1012,7 @@ class Inbound extends XrayCommonClass {
            this.stream.security = 'none';
        }
    }
-
-    get reality() {
-        return this.stream.security === 'reality';
-    }
-
-    set reality(isReality) {
-        if (isReality) {
-            this.stream.security = 'reality';
-        } else {
-            this.stream.security = 'none';
-        }
-    }
-
+    
    get network() {
        return this.stream.network;
    }
@@ -1081,7 +1063,7 @@ class Inbound extends XrayCommonClass {

    get serverName() {
        if (this.stream.isTls) return this.stream.tls.sni;
-        if (this.stream.isXtls) return this.stream.xtls.server;
+        if (this.stream.isXtls) return this.stream.xtls.sni;
        if (this.stream.isReality) return this.stream.reality.serverNames;
        return "";
    }
@@ -1142,11 +1124,6 @@ class Inbound extends XrayCommonClass {
        return ["tcp", "ws", "http", "quic", "grpc"].includes(this.network);
    }

-    canEnableReality() {
-        if(![Protocols.VLESS, Protocols.TROJAN].includes(this.protocol)) return false;
-        return ["tcp", "http", "grpc"].includes(this.network);
-    }
-
    //this is used for xtls-rprx-vision
    canEnableTlsFlow() {
        if (((this.stream.security === 'tls') || (this.stream.security === 'reality')) && (this.network === "tcp")) {
@@ -1155,6 +1132,11 @@ class Inbound extends XrayCommonClass {
        return false;
    }

+    canEnableReality() {
+        if(![Protocols.VLESS, Protocols.TROJAN].includes(this.protocol)) return false;
+        return ["tcp", "http", "grpc"].includes(this.network);
+    }
+
    canEnableXtls() {
        if(![Protocols.VLESS, Protocols.TROJAN].includes(this.protocol)) return false;
        return this.network === "tcp";
@@ -1164,10 +1146,6 @@ class Inbound extends XrayCommonClass {
        return [Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN, Protocols.SHADOWSOCKS].includes(this.protocol);
    }

-    canSniffing() {
-        return [Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN, Protocols.SHADOWSOCKS].includes(this.protocol);
-    }
-
    reset() {
        this.port = RandomUtil.randomIntRange(10000, 60000);
        this.listen = '';
@@ -1326,8 +1304,8 @@ class Inbound extends XrayCommonClass {
            if(this.stream.xtls.settings.allowInsecure){
                params.set("allowInsecure", "1");
            }
-            if (!ObjectUtil.isEmpty(this.stream.xtls.server)){
-                params.set("sni", this.stream.xtls.server);
+            if (!ObjectUtil.isEmpty(this.stream.xtls.sni)){
+                params.set("sni", this.stream.xtls.sni);
 			}
            params.set("flow", flow);
        }
@@ -1533,8 +1511,8 @@ class Inbound extends XrayCommonClass {
            if(this.stream.xtls.settings.allowInsecure){
                params.set("allowInsecure", "1");
            }
-            if (this.stream.xtls.settings.serverName !== ''){
-                params.set("sni", this.stream.xtls.settings.serverName);
+            if (!ObjectUtil.isEmpty(this.stream.xtls.sni)){
+                params.set("sni", this.stream.xtls.sni);
 			}
            params.set("flow", flow);
        }
@@ -1552,6 +1530,28 @@ class Inbound extends XrayCommonClass {
        return url.toString();
    }

+    getWireguardLink(address, port, remark, peerId) {
+        let txt = `[Interface]\n`
+        txt += `PrivateKey = ${this.settings.peers[peerId].privateKey}\n`
+        txt += `Address = ${this.settings.peers[peerId].allowedIPs[0]}\n`
+        txt += `DNS = 1.1.1.1, 1.0.0.1\n`
+        if (this.settings.mtu) {
+            txt += `MTU = ${this.settings.mtu}\n`
+        }
+        txt += `\n# ${remark}\n`
+        txt += `[Peer]\n`
+        txt += `PublicKey = ${this.settings.pubKey}\n`
+        txt += `AllowedIPs = 0.0.0.0/0, ::/0\n`
+        txt += `Endpoint = ${address}:${port}`
+        if (this.settings.peers[peerId].psk) {
+            txt += `\nPresharedKey = ${this.settings.peers[peerId].psk}`
+        }
+        if (this.settings.peers[peerId].keepAlive) {
+            txt += `\nPersistentKeepalive = ${this.settings.peers[peerId].keepAlive}\n`
+        }
+        return txt;
+    }
+
    genLink(address='', port=this.port, forceTls='same', remark='', client) {
        switch (this.protocol) {
            case Protocols.VMESS:
@@ -1575,7 +1575,7 @@ class Inbound extends XrayCommonClass {
        const orderChars = remarkModel.slice(1);
        let orders = {
            'i': remark,
-            'e': client ? client.email : '',
+            'e': email,
            'o': '',
          };
        if(ObjectUtil.isArrEmpty(this.stream.externalProxy)){
@@ -1598,6 +1598,7 @@ class Inbound extends XrayCommonClass {
    }

    genInboundLinks(remark = '', remarkModel = '-ieo') {
+        let addr = !ObjectUtil.isEmpty(this.listen) && this.listen !== "0.0.0.0" ? this.listen : location.hostname;
        if(this.clients){
           let links = [];
           this.clients.forEach((client) => {
@@ -1607,7 +1608,14 @@ class Inbound extends XrayCommonClass {
            });
            return links.join('\r\n');
        } else {
-            if(this.protocol == Protocols.SHADOWSOCKS && !this.isSSMultiUser) return this.genSSLink(this.listen, this.port, remark);
+            if(this.protocol == Protocols.SHADOWSOCKS && !this.isSSMultiUser) return this.genSSLink(addr, this.port, 'same', remark);
+            if(this.protocol == Protocols.WIREGUARD) {
+                let links = [];
+                this.settings.peers.forEach((p,index) => {
+                    links.push(this.getWireguardLink(addr,this.port,remark + remarkModel.charAt(0) + (index+1),index));
+                });
+                return links.join('\r\n');
+            }
            return '';
        }
    }
@@ -1657,7 +1665,8 @@ Inbound.Settings = class extends XrayCommonClass {
            case Protocols.SHADOWSOCKS: return new Inbound.ShadowsocksSettings(protocol);
            case Protocols.DOKODEMO: return new Inbound.DokodemoSettings(protocol);
            case Protocols.SOCKS: return new Inbound.SocksSettings(protocol);
-            case Protocols.HTTP: return new Inbound.HttpSettings(protocol);
+            case Protocols.HTTP: return new Inbound.HttpSettings(protocol);            
+            case Protocols.WIREGUARD: return new Inbound.WireguardSettings(protocol);
            default: return null;
        }
    }
@@ -1671,6 +1680,7 @@ Inbound.Settings = class extends XrayCommonClass {
            case Protocols.DOKODEMO: return Inbound.DokodemoSettings.fromJson(json);
            case Protocols.SOCKS: return Inbound.SocksSettings.fromJson(json);
            case Protocols.HTTP: return Inbound.HttpSettings.fromJson(json);
+            case Protocols.WIREGUARD: return Inbound.WireguardSettings.fromJson(json);
            default: return null;
        }
    }
@@ -2273,3 +2283,81 @@ Inbound.HttpSettings.HttpAccount = class extends XrayCommonClass {
        return new Inbound.HttpSettings.HttpAccount(json.user, json.pass);
    }
 };
+
+Inbound.WireguardSettings = class extends XrayCommonClass {
+    constructor(protocol, mtu=1420, secretKey=Wireguard.generateKeypair().privateKey, peers=[new Inbound.WireguardSettings.Peer()], kernelMode=false) {
+        super(protocol);
+        this.mtu = mtu;
+        this.secretKey = secretKey;
+        this.pubKey = secretKey.length>0 ? Wireguard.generateKeypair(secretKey).publicKey : '';
+        this.peers = peers;
+        this.kernelMode = kernelMode;
+    }
+
+    addPeer() {
+        this.peers.push(new Inbound.WireguardSettings.Peer(null,null,'',['10.0.0.' + (this.peers.length+2)]));
+    }
+
+    delPeer(index) {
+        this.peers.splice(index, 1);
+    }
+
+    static fromJson(json={}){
+        return new Inbound.WireguardSettings(
+            Protocols.WIREGUARD,
+            json.mtu,
+            json.secretKey,
+            json.peers.map(peer => Inbound.WireguardSettings.Peer.fromJson(peer)),
+            json.kernelMode,
+        );
+    }
+
+    toJson() {
+        return {
+            mtu: this.mtu?? undefined,
+            secretKey: this.secretKey,
+            peers: Inbound.WireguardSettings.Peer.toJsonArray(this.peers),
+            kernelMode: this.kernelMode,
+        };
+    }
+};
+
+Inbound.WireguardSettings.Peer = class extends XrayCommonClass {
+    constructor(privateKey, publicKey, psk='', allowedIPs=['10.0.0.2/32'], keepAlive=0) {
+        super();
+        this.privateKey = privateKey
+        this.publicKey = publicKey;
+        if (!this.publicKey){
+            [this.publicKey, this.privateKey] = Object.values(Wireguard.generateKeypair())
+        }
+        this.psk = psk;
+        allowedIPs.forEach((a,index) => {
+            if (a.length>0 && !a.includes('/')) allowedIPs[index] += '/32';
+        })
+        this.allowedIPs = allowedIPs;
+        this.keepAlive = keepAlive;
+    }
+
+    static fromJson(json={}){
+        return new Inbound.WireguardSettings.Peer(
+            json.privateKey,
+            json.publicKey,
+            json.preSharedKey,
+            json.allowedIPs,
+            json.keepAlive
+        );
+    }
+
+    toJson() {
+        this.allowedIPs.forEach((a,index) => {
+            if (a.length>0 && !a.includes('/')) this.allowedIPs[index] += '/32';
+        });
+        return {
+            privateKey: this.privateKey,            
+            publicKey: this.publicKey,
+            preSharedKey: this.psk.length>0 ? this.psk : undefined,
+            allowedIPs: this.allowedIPs,
+            keepAlive: this.keepAlive?? undefined,
+        };
+    }
+};
--- a/web/assets/js/util/utils.js
+++ b/web/assets/js/util/utils.js
@@ -295,3 +295,190 @@ class ObjectUtil {
        return true;
    }
 }
+
+class Wireguard {
+	static gf(init) {
+		var r = new Float64Array(16);
+		if (init) {
+			for (var i = 0; i < init.length; ++i)
+				r[i] = init[i];
+		}
+		return r;
+	}
+
+	static pack(o, n) {
+		var b, m = this.gf(), t = this.gf();
+		for (var i = 0; i < 16; ++i)
+			t[i] = n[i];
+		this.carry(t);
+		this.carry(t);
+		this.carry(t);
+		for (var j = 0; j < 2; ++j) {
+			m[0] = t[0] - 0xffed;
+			for (var i = 1; i < 15; ++i) {
+				m[i] = t[i] - 0xffff - ((m[i - 1] >> 16) & 1);
+				m[i - 1] &= 0xffff;
+			}
+			m[15] = t[15] - 0x7fff - ((m[14] >> 16) & 1);
+			b = (m[15] >> 16) & 1;
+			m[14] &= 0xffff;
+			this.cswap(t, m, 1 - b);
+		}
+		for (var i = 0; i < 16; ++i) {
+			o[2 * i] = t[i] & 0xff;
+			o[2 * i + 1] = t[i] >> 8;
+		}
+	}
+
+	static carry(o) {
+		var c;
+		for (var i = 0; i < 16; ++i) {
+			o[(i + 1) % 16] += (i < 15 ? 1 : 38) * Math.floor(o[i] / 65536);
+			o[i] &= 0xffff;
+		}
+	}
+
+	static cswap(p, q, b) {
+		var t, c = ~(b - 1);
+		for (var i = 0; i < 16; ++i) {
+			t = c & (p[i] ^ q[i]);
+			p[i] ^= t;
+			q[i] ^= t;
+		}
+	}
+
+	static add(o, a, b) {
+		for (var i = 0; i < 16; ++i)
+			o[i] = (a[i] + b[i]) | 0;
+	}
+
+	static subtract(o, a, b) {
+		for (var i = 0; i < 16; ++i)
+			o[i] = (a[i] - b[i]) | 0;
+	}
+
+	static multmod(o, a, b) {
+		var t = new Float64Array(31);
+		for (var i = 0; i < 16; ++i) {
+			for (var j = 0; j < 16; ++j)
+				t[i + j] += a[i] * b[j];
+		}
+		for (var i = 0; i < 15; ++i)
+			t[i] += 38 * t[i + 16];
+		for (var i = 0; i < 16; ++i)
+			o[i] = t[i];
+		this.carry(o);
+		this.carry(o);
+	}
+
+	static invert(o, i) {
+		var c = this.gf();
+		for (var a = 0; a < 16; ++a)
+			c[a] = i[a];
+		for (var a = 253; a >= 0; --a) {
+			this.multmod(c, c, c);
+			if (a !== 2 && a !== 4)
+                this.multmod(c, c, i);
+		}
+		for (var a = 0; a < 16; ++a)
+			o[a] = c[a];
+	}
+
+	static clamp(z) {
+		z[31] = (z[31] & 127) | 64;
+		z[0] &= 248;
+	}
+
+	static generatePublicKey(privateKey) {
+		var r, z = new Uint8Array(32);
+		var a = this.gf([1]),
+			b = this.gf([9]),
+			c = this.gf(),
+			d = this.gf([1]),
+			e = this.gf(),
+			f = this.gf(),
+			_121665 = this.gf([0xdb41, 1]),
+			_9 = this.gf([9]);
+		for (var i = 0; i < 32; ++i)
+			z[i] = privateKey[i];
+		this.clamp(z);
+		for (var i = 254; i >= 0; --i) {
+			r = (z[i >>> 3] >>> (i & 7)) & 1;
+			this.cswap(a, b, r);
+			this.cswap(c, d, r);
+			this.add(e, a, c);
+			this.subtract(a, a, c);
+			this.add(c, b, d);
+			this.subtract(b, b, d);
+			this.multmod(d, e, e);
+			this.multmod(f, a, a);
+			this.multmod(a, c, a);
+			this.multmod(c, b, e);
+			this.add(e, a, c);
+			this.subtract(a, a, c);
+			this.multmod(b, a, a);
+			this.subtract(c, d, f);
+			this.multmod(a, c, _121665);
+			this.add(a, a, d);
+			this.multmod(c, c, a);
+			this.multmod(a, d, f);
+			this.multmod(d, b, _9);
+			this.multmod(b, e, e);
+			this.cswap(a, b, r);
+			this.cswap(c, d, r);
+		}
+		this.invert(c, c);
+		this.multmod(a, a, c);
+		this.pack(z, a);
+		return z;
+	}
+
+	static generatePresharedKey() {
+		var privateKey = new Uint8Array(32);
+		window.crypto.getRandomValues(privateKey);
+		return privateKey;
+	}
+
+	static generatePrivateKey() {
+		var privateKey = this.generatePresharedKey();
+		this.clamp(privateKey);
+		return privateKey;
+	}
+
+	static encodeBase64(dest, src) {
+		var input = Uint8Array.from([(src[0] >> 2) & 63, ((src[0] << 4) | (src[1] >> 4)) & 63, ((src[1] << 2) | (src[2] >> 6)) & 63, src[2] & 63]);
+		for (var i = 0; i < 4; ++i)
+			dest[i] = input[i] + 65 +
+			(((25 - input[i]) >> 8) & 6) -
+			(((51 - input[i]) >> 8) & 75) -
+			(((61 - input[i]) >> 8) & 15) +
+			(((62 - input[i]) >> 8) & 3);
+	}
+
+	static keyToBase64(key) {
+		var i, base64 = new Uint8Array(44);
+		for (i = 0; i < 32 / 3; ++i)
+            this.encodeBase64(base64.subarray(i * 4), key.subarray(i * 3));
+        this.encodeBase64(base64.subarray(i * 4), Uint8Array.from([key[i * 3 + 0], key[i * 3 + 1], 0]));
+		base64[43] = 61;
+		return String.fromCharCode.apply(null, base64);
+	}
+
+    static keyFromBase64(encoded) {
+        const binaryStr = atob(encoded);
+        const bytes = new Uint8Array(binaryStr.length);
+        for (let i = 0; i < binaryStr.length; i++) {
+            bytes[i] = binaryStr.charCodeAt(i);
+        }
+        return bytes;
+    }
+
+	static generateKeypair(secretKey='') {
+        var privateKey = secretKey.length>0 ? this.keyFromBase64(secretKey) : this.generatePrivateKey();
+        var publicKey = this.generatePublicKey(privateKey);
+        return {
+            publicKey: this.keyToBase64(publicKey),
+            privateKey: secretKey.length>0 ? secretKey : this.keyToBase64(privateKey)
+        };
+    }
+}
--- a/web/assets/moment/moment-jalali.min.js
+++ b/web/assets/moment/moment-jalali.min.js
--- a/web/assets/persian-datepicker/persian-datepicker.min.css
+++ b/web/assets/persian-datepicker/persian-datepicker.min.css
@@ -0,0 +1,455 @@
+jdp-overlay {
+    height: 0;
+    width: 0;
+}
+jdp-container {
+    -moz-animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation;
+    -webkit-animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation;
+    animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation;
+    background: #fff;
+    border-radius: 1rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,.15);
+    direction: rtl;
+    display: none;
+    width: 280px;
+    overflow: hidden;
+    padding: 0.5rem 0;
+    position: absolute;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transform-origin: bottom;
+}
+jdp-container,
+jdp-container *,
+jdp-container :after,
+jdp-container :before {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+jdp-container .jdp-icon-minus,
+jdp-container .jdp-icon-plus {
+    outline: 1px solid rgb(232 244 242);
+    outline-offset: -1px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    flex: none;
+    overflow: hidden;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    transition: all 0.2s;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+}
+
+jdp-container .jdp-icon-minus:hover,
+jdp-container .jdp-icon-plus:hover {
+    background-color: rgb(232 244 242);
+}
+
+jdp-container .jdp-icon-minus svg,
+jdp-container .jdp-icon-plus svg {
+    height: 1.5rem;
+    padding: 0.25rem;
+    vertical-align: middle;
+    width: 1.5rem;
+}
+jdp-container .jdp-icon-minus.not-in-range,
+jdp-container .jdp-icon-plus.not-in-range {
+    cursor: not-allowed;
+}
+jdp-container .jdp-icon-minus.not-in-range svg,
+jdp-container .jdp-icon-plus.not-in-range svg {
+    opacity: 0.3;
+}
+jdp-container .jdp-months,
+jdp-container .jdp-years {
+    fill: rgba(0, 0, 0, 0.9);
+    color: rgba(0, 0, 0, 0.9);
+    display: -webkit-inline-box;
+    display: -webkit-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    font-size: 120%;
+    margin: 0 2.5%;
+}
+jdp-container .jdp-months {
+    width: 40%;
+    margin-right: 1rem;
+}
+jdp-container .jdp-years {
+    width: 40%;
+    margin: 0.5rem 1.2rem 0.8rem 0;
+}
+jdp-container .jdp-month,
+jdp-container .jdp-month input,
+jdp-container .jdp-month select,
+jdp-container .jdp-time,
+jdp-container .jdp-time input,
+jdp-container .jdp-time select,
+jdp-container .jdp-year,
+jdp-container .jdp-year input,
+jdp-container .jdp-year select {
+    background: #fff;
+    border: none;
+    border-radius: 0;
+    color: inherit;
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 300;
+    height: auto;
+    line-height: inherit;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    text-align: center;
+    vertical-align: initial;
+    width: 100%;
+    font-feature-settings: "ss01";
+}
+jdp-container .jdp-month input:active,
+jdp-container .jdp-month input:focus,
+jdp-container .jdp-month select:active,
+jdp-container .jdp-month select:focus,
+jdp-container .jdp-month:active,
+jdp-container .jdp-month:focus,
+jdp-container .jdp-time input:active,
+jdp-container .jdp-time input:focus,
+jdp-container .jdp-time select:active,
+jdp-container .jdp-time select:focus,
+jdp-container .jdp-time:active,
+jdp-container .jdp-time:focus,
+jdp-container .jdp-year input:active,
+jdp-container .jdp-year input:focus,
+jdp-container .jdp-year select:active,
+jdp-container .jdp-year select:focus,
+jdp-container .jdp-year:active,
+jdp-container .jdp-year:focus {
+    outline: 0;
+}
+jdp-container .jdp-month input option,
+jdp-container .jdp-month option,
+jdp-container .jdp-month select option,
+jdp-container .jdp-time input option,
+jdp-container .jdp-time option,
+jdp-container .jdp-time select option,
+jdp-container .jdp-year input option,
+jdp-container .jdp-year option,
+jdp-container .jdp-year select option {
+    font-size: 95%;
+    min-height: 1.3rem;
+    outline: 0;
+    padding: 0;
+}
+jdp-container .jdp-month input,
+jdp-container .jdp-time input,
+jdp-container .jdp-year input {
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+    cursor: text;
+}
+jdp-container .jdp-month input::-webkit-inner-spin-button,
+jdp-container .jdp-month input::-webkit-outer-spin-button,
+jdp-container .jdp-time input::-webkit-inner-spin-button,
+jdp-container .jdp-time input::-webkit-outer-spin-button,
+jdp-container .jdp-year input::-webkit-inner-spin-button,
+jdp-container .jdp-year input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}
+jdp-container .jdp-month select,
+jdp-container .jdp-time select,
+jdp-container .jdp-year select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    cursor: pointer;
+    appearance: none;
+    position: relative;
+}
+jdp-container .jdp-days {
+    -ms-flex-pack: justify;
+    display: inline-block;
+    display: -ms-flexbox;
+    display: flex;
+    flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    justify-content: space-around;
+    outline: 0;
+    padding: 8px 12px;
+    text-align: left;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+}
+jdp-container .jdp-day,
+jdp-container .jdp-day-name {
+    background: 0 0;
+    border: 1px solid transparent;
+    color: rgba(0,0,0,.65);
+    display: block;
+    font-weight: 400;
+    height: 24px;
+    justify-content: center;
+    line-height: 22px;
+    margin: 2px 6px;
+    position: relative;
+    text-align: center;
+    width: 24px;
+    font-feature-settings: "ss01";
+}
+jdp-container .jdp-day-name.today,
+jdp-container .jdp-day.today {
+    border-color: var(--color-primary-100);
+    color: var(--color-primary-100);
+    font-weight: 700;
+}
+.dark jdp-container .jdp-day-name.selected,
+.dark jdp-container .jdp-day.selected,
+jdp-container .jdp-day-name.selected,
+jdp-container .jdp-day.selected {
+    background-color: var(--color-primary-100) !important;
+    color: #fff !important;
+    opacity: 1 !important;
+}
+.dark jdp-container .jdp-day-name.holly-day,
+.dark jdp-container .jdp-day-name.last-week,
+.dark jdp-container .jdp-day.holly-day,
+.dark jdp-container .jdp-day.last-week,
+jdp-container .jdp-day-name.holly-day,
+jdp-container .jdp-day-name.last-week,
+jdp-container .jdp-day.holly-day,
+jdp-container .jdp-day.last-week {
+    color: #f44336;
+}
+.dark jdp-container .jdp-day.not-in-month,
+jdp-container .jdp-day.not-in-month {
+    opacity: 0.4;
+}
+jdp-container .jdp-day.disabled-day {
+    cursor: not-allowed;
+    opacity: 0.15;
+}
+jdp-container .jdp-day:not(.disabled-day) {
+    border-radius: 6px;
+    cursor: pointer;
+    transition: 0.1s linear;
+}
+jdp-container .jdp-day:not(.disabled-day):hover {
+    background: rgb(232 244 242);
+}
+jdp-container .jdp-day-name {
+    background-color: rgb(0 0 0 / 0%);
+    border-radius: 6px;
+    cursor: default;
+}
+jdp-container .jdp-footer {
+    -ms-flex-pack: justify;
+    display: inline-block;
+    display: -ms-flexbox;
+    display: flex;
+    flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    justify-content: space-between;
+    outline: 0;
+    padding: 6px 12px 0;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+}
+jdp-container .jdp-btn-close,
+jdp-container .jdp-btn-empty,
+jdp-container .jdp-btn-today {
+    background: #00877000;
+    border-radius: 5px;
+    color: var(--color-primary-100);
+    cursor: pointer;
+    display: inline-block;
+    font-size: 90%;
+    font-weight: 400;
+    padding: 0.3em 0.6em;
+    text-align: center;
+}
+jdp-container .jdp-btn-close.disabled-btn,
+jdp-container .jdp-btn-empty.disabled-btn,
+jdp-container .jdp-btn-today.disabled-btn {
+    cursor: not-allowed;
+    opacity: 0.2;
+}
+jdp-container .jdp-time-container {
+    display: flex;
+    padding: 6px 12px 12px 12px;
+}
+jdp-container .jdp-time-container .jdp-time {
+    flex: auto;
+    margin: 0 0.5rem;
+    position: relative;
+}
+jdp-container .jdp-time-container .jdp-time select {
+    border: 1px solid rgb(232 244 242);
+    border-radius: 6px;
+    appearance: none;
+    transition: all 0.2s;
+}
+
+jdp-container .jdp-time-container .jdp-time select:hover {
+    background-color: rgb(232 244 242);
+}
+
+jdp-container .jdp-time-container .jdp-time:after {
+    content: ":";
+    font-size: 1.5rem;
+    height: 100%;
+    position: absolute;
+    right: -0.7rem;
+    transform: translateY(-50%);
+}
+jdp-container .jdp-time-container .jdp-time:first-child:after {
+    display: none;
+}
+jdp-container .jdp-time-container.jdp-only-time .jdp-time select {
+    font-size: 1.5rem;
+    padding: 0.8rem 1rem 0.8rem 7px;
+}
+jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
+    font-size: 2.3rem;
+    position: absolute;
+    right: -0.8rem;
+}
+@-webkit-keyframes jdpOpenAnimation {
+    0% {
+        transform: scaleY(.8);
+        transform-origin: 0% 0%;
+        opacity: 0
+    }
+
+    to {
+        transform: scaleY(1);
+        transform-origin: 0% 0%;
+        opacity: 1
+    }
+}
+@keyframes jdpOpenAnimation {
+    0% {
+        transform: scaleY(.8);
+        transform-origin: 0% 0%;
+        opacity: 0
+    }
+
+    to {
+        transform: scaleY(1);
+        transform-origin: 0% 0%;
+        opacity: 1
+    }
+}
+@-webkit-keyframes jdpOpenAnimationMobile {
+    0% {
+        bottom: -10%;
+        opacity: 0;
+    }
+    to {
+        bottom: 0;
+        opacity: 1;
+    }
+}
+@keyframes jdpOpenAnimationMobile {
+    0% {
+        margin-bottom: -20%;
+        opacity: 0;
+    }
+    to {
+        margin-bottom: 0;
+        opacity: 1;
+    }
+}
+
+.dark jdp-container .jdp-days {
+    border-color: var(--dark-color-surface-400);
+}
+
+.dark jdp-overlay {
+    background-color: #181f2c;
+}
+.dark jdp-container {
+    background: var(--dark-color-background);
+    border-color: #2c3950;
+    box-shadow: 0 2px 8px rgba(0,0,0,.15);
+    color: #fff;
+}
+.dark jdp-container .jdp-icon-minus,
+.dark jdp-container .jdp-icon-plus {
+    outline-color: var(--dark-color-surface-600);
+}
+
+.dark jdp-container .jdp-icon-minus:hover,
+.dark jdp-container .jdp-icon-plus:hover {
+    background-color: var(--dark-color-surface-600);
+}
+
+.dark jdp-container .jdp-months,
+.dark jdp-container .jdp-years {
+    fill: rgba(255, 255, 255, 0.9);
+    color: rgba(255, 255, 255, 0.9);
+}
+.dark jdp-container .jdp-month,
+.dark jdp-container .jdp-month input,
+.dark jdp-container .jdp-month select,
+.dark jdp-container .jdp-time,
+.dark jdp-container .jdp-time input,
+.dark jdp-container .jdp-time select,
+.dark jdp-container .jdp-year,
+.dark jdp-container .jdp-year input,
+.dark jdp-container .jdp-year select {
+    background: var(--dark-color-background);
+    color: var(--dark-color-text-primary);
+}
+.dark jdp-container .jdp-day,
+.dark jdp-container .jdp-day-name {
+    border: 1px solid transparent;
+    color: var(--dark-color-text-primary);
+}
+.dark jdp-container .jdp-day-name.today,
+.dark jdp-container .jdp-day.today {
+    border-color: var(--color-primary-100);
+}
+.dark jdp-container .jdp-day.disabled-day {
+    opacity: 0.15;
+}
+.dark jdp-container .jdp-day:not(.disabled-day):hover {
+    background-color: var(--dark-color-surface-600);
+    color: #fff;
+}
+.dark jdp-container .jdp-footer {
+    border-color: var(--dark-color-surface-400);
+}
+.dark jdp-container .jdp-btn-close,
+.dark jdp-container .jdp-btn-empty,
+.dark jdp-container .jdp-btn-today {
+    color: rgb(255 255 255 / 65%);
+}
+
+.dark jdp-container .jdp-btn-close:hover,
+.dark jdp-container .jdp-btn-empty:hover,
+.dark jdp-container .jdp-btn-today:hover {
+    color: rgb(255, 255, 255);
+}
+
+.dark jdp-container .jdp-btn-close.disabled-btn,
+.dark jdp-container .jdp-btn-empty.disabled-btn,
+.dark jdp-container .jdp-btn-today.disabled-btn {
+    opacity: 0.2;
+}
+
+.dark jdp-container .jdp-time-container .jdp-time select:hover {
+    background-color: var(--dark-color-surface-600);
+    color: #fff;
+}
+
+.dark jdp-container .jdp-time-container .jdp-time select {
+    border: 1px solid var(--dark-color-surface-600);
+}
--- a/web/assets/persian-datepicker/persian-datepicker.min.js
+++ b/web/assets/persian-datepicker/persian-datepicker.min.js
--- a/web/controller/inbound.go
+++ b/web/controller/inbound.go
@@ -85,7 +85,11 @@ func (a *InboundController) addInbound(c *gin.Context) {
 	}
 	user := session.GetLoginUser(c)
 	inbound.UserId = user.Id
-	inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+	if inbound.Listen == "" || inbound.Listen == "0.0.0.0" || inbound.Listen == "::" || inbound.Listen == "::0" {
+		inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+	} else {
+		inbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
+	}

 	needRestart := false
 	inbound, needRestart, err = a.inboundService.AddInbound(inbound)
@@ -278,7 +282,11 @@ func (a *InboundController) importInbound(c *gin.Context) {
 	user := session.GetLoginUser(c)
 	inbound.Id = 0
 	inbound.UserId = user.Id
-	inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+	if inbound.Listen == "" || inbound.Listen == "0.0.0.0" || inbound.Listen == "::" || inbound.Listen == "::0" {
+		inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+	} else {
+		inbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
+	}

 	for index := range inbound.ClientStats {
 		inbound.ClientStats[index].Id = 0
--- a/web/controller/xray_setting.go
+++ b/web/controller/xray_setting.go
@@ -10,6 +10,7 @@ type XraySettingController struct {
 	XraySettingService service.XraySettingService
 	SettingService     service.SettingService
 	InboundService     service.InboundService
+	OutboundService    service.OutboundService
 	XrayService        service.XrayService
 }

@@ -26,6 +27,9 @@ func (a *XraySettingController) initRouter(g *gin.RouterGroup) {
 	g.POST("/update", a.updateSetting)
 	g.GET("/getXrayResult", a.getXrayResult)
 	g.GET("/getDefaultJsonConfig", a.getDefaultXrayConfig)
+	g.POST("/warp/:action", a.warp)
+	g.GET("/getOutboundsTraffic", a.getOutboundsTraffic)
+	g.POST("/resetOutboundsTraffic", a.resetOutboundsTraffic)
 }

 func (a *XraySettingController) getXraySetting(c *gin.Context) {
@@ -61,3 +65,43 @@ func (a *XraySettingController) getDefaultXrayConfig(c *gin.Context) {
 func (a *XraySettingController) getXrayResult(c *gin.Context) {
 	jsonObj(c, a.XrayService.GetXrayResult(), nil)
 }
+
+func (a *XraySettingController) warp(c *gin.Context) {
+	action := c.Param("action")
+	var resp string
+	var err error
+	switch action {
+	case "data":
+		resp, err = a.XraySettingService.GetWarp()
+	case "config":
+		resp, err = a.XraySettingService.GetWarpConfig()
+	case "reg":
+		skey := c.PostForm("privateKey")
+		pkey := c.PostForm("publicKey")
+		resp, err = a.XraySettingService.RegWarp(skey, pkey)
+	case "license":
+		license := c.PostForm("license")
+		resp, err = a.XraySettingService.SetWarpLicence(license)
+	}
+
+	jsonObj(c, resp, err)
+}
+
+func (a *XraySettingController) getOutboundsTraffic(c *gin.Context) {
+	outboundsTraffic, err := a.OutboundService.GetOutboundsTraffic()
+	if err != nil {
+		jsonMsg(c, "Error getting traffics", err)
+		return
+	}
+	jsonObj(c, outboundsTraffic, nil)
+}
+
+func (a *XraySettingController) resetOutboundsTraffic(c *gin.Context) {
+	tag := c.PostForm("tag")
+	err := a.OutboundService.ResetOutboundTraffic(tag)
+	if err != nil {
+		jsonMsg(c, "Error in reset outbound traffics", err)
+		return
+	}
+	jsonObj(c, "", nil)
+}
--- a/web/entity/entity.go
+++ b/web/entity/entity.go
@@ -28,6 +28,7 @@ type AllSetting struct {
 	RemarkModel      string `json:"remarkModel" form:"remarkModel"`
 	TgBotEnable      bool   `json:"tgBotEnable" form:"tgBotEnable"`
 	TgBotToken       string `json:"tgBotToken" form:"tgBotToken"`
+	TgBotProxy       string `json:"tgBotProxy" form:"tgBotProxy"`
 	TgBotChatId      string `json:"tgBotChatId" form:"tgBotChatId"`
 	TgRunTime        string `json:"tgRunTime" form:"tgRunTime"`
 	TgBotBackup      bool   `json:"tgBotBackup" form:"tgBotBackup"`
@@ -47,6 +48,10 @@ type AllSetting struct {
 	SubEncrypt       bool   `json:"subEncrypt" form:"subEncrypt"`
 	SubShowInfo      bool   `json:"subShowInfo" form:"subShowInfo"`
 	SubURI           string `json:"subURI" form:"subURI"`
+	SubJsonPath      string `json:"subJsonPath" form:"subJsonPath"`
+	SubJsonURI       string `json:"subJsonURI" form:"subJsonURI"`
+	SubJsonFragment  string `json:"subJsonFragment" form:"subJsonFragment"`
+	Datepicker       string `json:"datepicker" form:"datepicker"`
 }

 func (s *AllSetting) CheckValid() error {
@@ -72,8 +77,8 @@ func (s *AllSetting) CheckValid() error {
 		return common.NewError("Sub port is not a valid port:", s.SubPort)
 	}

-	if s.SubPort == s.WebPort {
-		return common.NewError("Sub and Web could not use same port:", s.SubPort)
+	if (s.SubPort == s.WebPort) && (s.WebListen == s.SubListen) {
+		return common.NewError("Sub and Web could not use same ip:port, ", s.SubListen, ":", s.SubPort, " & ", s.WebListen, ":", s.WebPort)
 	}

 	if s.WebCertFile != "" || s.WebKeyFile != "" {
@@ -103,6 +108,13 @@ func (s *AllSetting) CheckValid() error {
 		s.SubPath += "/"
 	}

+	if !strings.HasPrefix(s.SubJsonPath, "/") {
+		s.SubJsonPath = "/" + s.SubJsonPath
+	}
+	if !strings.HasSuffix(s.SubJsonPath, "/") {
+		s.SubJsonPath += "/"
+	}
+
 	_, err := time.LoadLocation(s.TimeLocation)
 	if err != nil {
 		return common.NewError("time location not exist:", s.TimeLocation)
--- a/web/html/common/head.html
+++ b/web/html/common/head.html
@@ -7,8 +7,6 @@
    <link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue@1.7.8/antd.min.css">
    <link rel="stylesheet" href="{{ .base_path }}assets/element-ui@2.15.0/theme-chalk/display.css">
    <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.css?{{ .cur_ver }}">
-    <link rel=”icon” type=”image/x-icon” href="{{ .base_path }}assets/favicon.ico">
-    <link rel="shortcut icon" type="image/x-icon" href="{{ .base_path }}assets/favicon.ico">
    <style>
        [v-cloak] {
            display: none;
@@ -30,4 +28,5 @@
    </style>
    <title>{{ .host }}-{{ i18n .title}}</title>
 </head>
+<div id="message"></div>
 {{end}}
--- a/web/html/common/prompt_modal.html
+++ b/web/html/common/prompt_modal.html
@@ -1,6 +1,7 @@
 {{define "promptModal"}}
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
         :closable="true" @ok="promptModal.ok" :mask-closable="false"
+         :confirm-loading="promptModal.confirmLoading"
         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
    <a-input id="prompt-modal-input" :type="promptModal.type"
             v-model="promptModal.value"
@@ -17,6 +18,7 @@
        value: '',
        okText: '{{ i18n "sure"}}',
        visible: false,
+        confirmLoading: false,
        keyEnter(e) {
            if (this.type !== 'textarea') {
                e.preventDefault();
@@ -30,7 +32,6 @@
            }
        },
        ok() {
-            promptModal.close();
            promptModal.confirm(promptModal.value);
        },
        confirm() {},
@@ -53,7 +54,10 @@
        },
        close() {
            this.visible = false;
-        }
+        },
+        loading(loading=true) {
+            this.confirmLoading = loading;
+        },
    };

    const promptModalApp = new Vue({
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -8,13 +8,23 @@
        {{ i18n "pages.inbounds.clickOnQRcode" }}
    </a-tag>
    <template v-if="app.subSettings.enable && qrModal.subId">
-        <a-divider>Subscription</a-divider>
-        <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" style="width: 100%; height: 100%;"></canvas>
+        <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
+        <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))"
+            id="qrCode-sub"
+            class="qr-bg">
+        </canvas>
+        <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
+        <canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))"
+            id="qrCode-subJson"
+            style="width: 100%; height: 100%; display: flex; border-radius: 1rem;">
+        </canvas>
    </template>
    <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
    <template v-for="(row, index) in qrModal.qrcodes">
        <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
-        <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas>
+        <canvas @click="copyToClipboard('qrCode-'+index, row.link)"
+            :id="'qrCode-'+index"
+            class="qr-bg"></canvas>
    </template>
 </a-modal>

@@ -35,12 +45,21 @@
            this.client = client;
            this.subId = '';
            this.qrcodes = [];
-            this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
-                this.qrcodes.push({
-                    remark: l.remark,
-                    link: l.link
+            if (this.inbound.protocol == Protocols.WIREGUARD){
+                this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l,index) =>{
+                    this.qrcodes.push({
+                        remark: "Peer " + (index+1),
+                        link: l
+                    });
                });
-            });
+            } else {
+                this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
+                    this.qrcodes.push({
+                        remark: l.remark,
+                        link: l.link
+                    });
+                });
+            }
            this.visible = true;
        },
        close: function () {
@@ -72,13 +91,17 @@
                });
            },
            genSubLink(subID) {
-                return app.subSettings.subURI+subID+'?name='+subID;
+                return app.subSettings.subURI+subID;
+            },
+            genSubJsonLink(subID) {
+                return app.subSettings.subJsonURI+subID;
            }
        },
        updated() {
            if (qrModal.client && qrModal.client.subId) {
                qrModal.subId = qrModal.client.subId;
                this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
+                this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
            }
            qrModal.qrcodes.forEach((element, index) => {
                this.setQrCode("qrCode-" + index, element.link);
@@ -87,4 +110,4 @@
    });

 </script>
-{{end}}
+{{end}}
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -1,15 +1,16 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
-         :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
-         :class="themeSwitcher.currentTheme"
-         :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
-    <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
-              :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
-              :download="txtModal.fileName">
-        {{ i18n "download" }} [[ txtModal.fileName ]]
-    </a-button>
-    <a-input type="textarea" v-model="txtModal.content"
-             :autosize="{ minRows: 10, maxRows: 20}"></a-input>
+         :closable="true"
+         :class="themeSwitcher.currentTheme">
+    <template slot="footer">
+        <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
+            :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
+            :download="txtModal.fileName">[[ txtModal.fileName ]]
+        </a-button>
+            <a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
+    </template>
+    <a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
+        :autosize="{ minRows: 10, maxRows: 20}"></a-input>
 </a-modal>

 <script>
@@ -28,7 +29,7 @@
            this.visible = true;
            textModalApp.$nextTick(() => {
                if (this.clipboard === null) {
-                    this.clipboard = new ClipboardJS('#txt-modal-ok-btn', {
+                    this.clipboard = new ClipboardJS('#copy-btn', {
                        text: () => this.content,
                    });
                    this.clipboard.on('success', () => {
@@ -52,4 +53,4 @@
    });

 </script>
-{{end}}
+{{end}}
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -2,9 +2,14 @@
 <html lang="en">
 {{template "head" .}}
 <style>
+  html * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
  h1 {
    text-align: center;
-    margin: 20px 0 50px 0;
+/*    margin: 20px 0 50px 0;*/
+    height: 110px;
  }
  .ant-btn,
  .ant-input {
@@ -27,10 +32,13 @@
    text-align: center;
    align-items: center;
    justify-content: center;
+    width: 100%;
  }
  .title {
    font-size: 32px;
-    font-weight: bold;
+  }
+  .title b {
+    font-weight: bold !important;
  }
  #app {
    overflow: hidden;
@@ -41,6 +49,9 @@
    border-radius: 2rem;
    padding: 3rem;
    transition: all 0.3s;
+    user-select:none;
+    -webkit-user-select:none;
+    -moz-user-select: none;
  }
  #login:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
@@ -55,57 +66,23 @@
      opacity: 1;
    }
  }
-  @keyframes wave {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  .wave {
-    opacity: 0.6;
-    position: absolute;
-    bottom: 40%;
-    left: 50%;
-    width: 6000px;
-    height: 6000px;
-    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;
-  }
-  .wave2 {
-    animation: wave 88s infinite linear;
-    opacity: 0.3;
-  }
-  .wave3 {
-    animation: wave 80s infinite linear;
-    opacity: 0.1;
-  }
  .under {
-    background-color: #dbf5ed;
-  }
-  .dark .wave {
-    background: rgb(10 117 87 / 20%);
+    background-color: #c7ebe2;
+    z-index: 0;
  }
  .dark .under {
-    background-color: #101828;
+    background-color: var(--dark-color-login-wave);
  }
  .dark #login {
-    background-color: #151f31;
+    background-color: var(--dark-color-surface-100);
  }
  .dark h1 {
-    color: rgba(255, 255, 255, 0.85);
+    color: rgba(255, 255, 255);
+  }
+  .ant-form-item {
+    margin-bottom: 16px;
  }
  .ant-btn-primary-login {
-    color: #008771;
-    background-color: #eef9f7;
-    border-color: #89d9cc;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: none;
    width: 100%;
  }
  .ant-btn-primary-login:focus,
@@ -147,6 +124,7 @@
    position: relative;
    border-radius: 25px;
    width: 100%;
+    transition: all 0.3s cubic-bezier(.645,.045,.355,1);
  }
  .dark .wave-btn-bg {
    color: #fff;
@@ -156,10 +134,10 @@
    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%;
+    z-index: 1;
  }
+  .dark .wave-btn-bg:hover {animation: wave-btn-tara 4s ease infinite;}
  .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, #006655, #009980, #006655) !important;
@@ -215,81 +193,289 @@
    background-position-x: 0;
    box-shadow: none;
  }
+  .waves-header {
+    position: fixed;
+    width: 100%;
+    text-align: center;
+    background-color: #dbf5ed;
+    color: white;
+    z-index: -1;
+  }
+  .dark .waves-header {
+    background-color: var(--dark-color-login-background);
+  }
+  .waves-inner-header {
+    height: 50vh;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+  .waves {
+    position: relative;
+    width: 100%;
+    height: 15vh;
+    margin-bottom: -8px; /*Fix for safari gap*/
+    min-height: 100px;
+    max-height: 150px;
+  }
+  .parallax > use {
+    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+  }
+  .dark .parallax > use {
+    fill: var(--dark-color-login-wave);
+  }
+  .parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 4s;
+    opacity: 0.2;
+  }
+  .parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 7s;
+    opacity: 0.4;
+  }
+  .parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 10s;
+    opacity: 0.6;
+  }
+  .parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 13s;
+  }
+  @keyframes move-forever {
+    0% {
+      transform: translate3d(-90px, 0, 0);
+    }
+    100% {
+      transform: translate3d(85px, 0, 0);
+    }
+  }
+  @media (max-width: 768px) {
+    .waves {
+      height: 40px;
+      min-height: 40px;
+    }
+  }
+  .words-wrapper {
+    width: 100%;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+  }
+  .words-wrapper b {
+    width: 100%;
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .words-wrapper b.is-visible {
+    position: relative;
+  }
+  .headline.zoom .words-wrapper {
+    -webkit-perspective: 300px;
+    -moz-perspective: 300px;
+    perspective: 300px;
+  }
+  .headline {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .headline.zoom b {
+    opacity: 0;
+  }
+  .headline.zoom b.is-visible {
+    opacity: 1;
+    -webkit-animation: zoom-in 0.8s;
+    -moz-animation: zoom-in 0.8s;
+    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
+  }
+  .headline.zoom b.is-hidden {
+    -webkit-animation: zoom-out 0.8s;
+    -moz-animation: zoom-out 0.8s;
+    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
+  }
+  @-webkit-keyframes zoom-in {
+    0% {
+      opacity: 0;
+      -webkit-transform: translateZ(100px);
+    }
+
+    100% {
+      opacity: 1;
+      -webkit-transform: translateZ(0);
+    }
+  }
+  @-moz-keyframes zoom-in {
+    0% {
+      opacity: 0;
+      -moz-transform: translateZ(100px);
+    }
+    100% {
+      opacity: 1;
+      -moz-transform: translateZ(0);
+    }
+  }
+  @keyframes zoom-in {
+    0% {
+      opacity: 0;
+      -webkit-transform: translateZ(100px);
+      -moz-transform: translateZ(100px);
+      -ms-transform: translateZ(100px);
+      -o-transform: translateZ(100px);
+      transform: translateZ(100px);
+    }
+    100% {
+      opacity: 1;
+      -webkit-transform: translateZ(0);
+      -moz-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+      -o-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+  }
+  @-webkit-keyframes zoom-out {
+    0% {
+      opacity: 1;
+      -webkit-transform: translateZ(0);
+    }
+    100% {
+      opacity: 0;
+      -webkit-transform: translateZ(-100px);
+    }
+  }
+  @-moz-keyframes zoom-out {
+    0% {
+      opacity: 1;
+      -moz-transform: translateZ(0);
+    }
+    100% {
+      opacity: 0;
+      -moz-transform: translateZ(-100px);
+    }
+  }
+  @keyframes zoom-out {
+    0% {
+      opacity: 1;
+      -webkit-transform: translateZ(0);
+      -moz-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+      -o-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+    100% {
+      opacity: 0;
+      -webkit-transform: translateZ(-100px);
+      -moz-transform: translateZ(-100px);
+      -ms-transform: translateZ(-100px);
+      -o-transform: translateZ(-100px);
+      transform: translateZ(-100px);
+    }
+  }
 </style>
 <body>
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
    <transition name="list" appear>
-        <a-layout-content class="under" style="min-height: 0;">
-            <div class='wave'></div>
-            <div class='wave wave2'></div>
-            <div class='wave wave3'></div>
-            <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
-            <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
+      <a-layout-content class="under" style="min-height: 0;">
+        <div class="waves-header">
+          <div class="waves-inner-header"></div>
+          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+               viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+            <defs>
+              <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+            </defs>
+            <g class="parallax">
+              <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
+              <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
+              <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
+              <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
+            </g>
+          </svg>
+        </div>
+        <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
+          <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
            <a-row type="flex" justify="center">
-                <a-col>
-                    <h1 class="title">{{ i18n "pages.login.title" }}</h1>
-                </a-col>
+              <a-col style="width: 100%;">
+                <h1 class="title headline zoom">
+                  <span class="words-wrapper">
+                    <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
+                    <b>{{ i18n "pages.login.title" }}</b>
+                  </span>
+                </h1>
+              </a-col>
            </a-row>
            <a-row type="flex" justify="center">
-                <a-col span="24">
-                    <a-form>
-                        <a-form-item>
-                            <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
-                                     @keydown.enter.native="login" autofocus>
-                                <a-icon slot="prefix" type="user" style="font-size: 16px;"/>
-                            </a-input>
-                        </a-form-item>
-                        <a-form-item>
-                            <password-input icon="lock" v-model.trim="user.password"
-                                            placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                            </password-input>
-                        </a-form-item>
-                        <a-form-item v-if="secretEnable">
-                            <password-input icon="key" v-model.trim="user.loginSecret"
-                                            placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
-                            </password-input>
-                        </a-input>
-                        </a-form-item>
-                        <a-form-item>
-                            <a-row justify="center" class="centered">
-                                <div class="wave-btn-bg wave-btn-bg-cl">
-                                    <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
-                                              :style="loading ? { width: '50px' } : { display: 'inline-block' }">
-                                        [[ loading ? '' : '{{ i18n "login" }}' ]]
-                                    </a-button>
-                                </div>
-                            </a-row>
-                        </a-form-item>
-                        <a-form-item>
-                            <a-row justify="center" class="centered">
-                                <a-col :span="24">
-                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" style="width: 150px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
-                                            <span role="img" aria-label="l.name" v-text="l.icon"></span>
-                                            &nbsp;&nbsp;<span v-text="l.name"></span>
-                                        </a-select-option>
-                                    </a-select>
-                                </a-col>
-                            </a-row>
-                        </a-form-item>
-                        <a-form-item>
-                            <a-row justify="center" class="centered">
-                                <a-col>
-                                    <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>&nbsp;
-                                </a-col>
-                                <a-col>
-                                    <theme-switch />
-                                </a-col>
-                            </a-row>
-                        </a-form-item>
-                    </a-form>
-                </a-col>
+              <a-col span="24">
+                <a-form>
+                  <a-form-item>
+                    <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
+                             @keydown.enter.native="login" autofocus>
+                      <a-icon slot="prefix" type="user" style="font-size: 16px;"></a-icon>
+                    </a-input>
+                  </a-form-item>
+                  <a-form-item>
+                    <password-input icon="lock" v-model.trim="user.password"
+                                    placeholder='{{ i18n "password" }}'
+                                    @keydown.enter.native="login">
+                    </password-input>
+                  </a-form-item>
+                  <a-form-item v-if="secretEnable">
+                    <password-input icon="key" v-model.trim="user.loginSecret"
+                                    placeholder='{{ i18n "secretToken" }}'
+                                    @keydown.enter.native="login">
+                    </password-input>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-row justify="center" class="centered">
+                      <div style="height: 50px;" class="wave-btn-bg wave-btn-bg-cl"
+                           :style="loading ? { width: '52px' } : { display: 'inline-block' }">
+                        <a-button class="ant-btn-primary-login" type="primary"
+                                  :loading="loading" @click="login"
+                                  :icon="loading ? 'poweroff' : undefined">
+                                  [[ loading ? '' : '{{ i18n "login" }}' ]]
+                        </a-button>
+                      </div>
+                    </a-row>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-row justify="center" class="centered">
+                      <a-col :span="24">
+                        <a-select ref="selectLang" v-model="lang"
+                                  @change="setLang(lang)" style="width: 150px;"
+                                  :dropdown-class-name="themeSwitcher.currentTheme">
+                          <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
+                            <span role="img" aria-label="l.name" v-text="l.icon"></span>
+                            &nbsp;&nbsp;<span v-text="l.name"></span>
+                          </a-select-option>
+                        </a-select>
+                      </a-col>
+                    </a-row>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-row justify="center" class="centered">
+                      <a-col>
+                        <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>&nbsp;
+                      </a-col>
+                      <a-col>
+                        <theme-switch></theme-switch>
+                        <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
+                                    :checked="themeSwitcher.isUltra"
+                                    @click="themeSwitcher.toggleUltra()">
+                                    Ultra
+                        </a-checkbox>
+                      </a-col>
+                    </a-row>
+                  </a-form-item>
+                </a-form>
+              </a-col>
            </a-row>
-            </a-col>
-            </a-row>
-        </a-layout-content>
+          </a-col>
+        </a-row>
+      </a-layout-content>
    </transition>
-</a-layout>
+  </a-layout>
 {{template "js" .}}
 {{template "component/themeSwitcher" .}}
 {{template "component/password" .}}
@@ -335,6 +521,42 @@
            },
        },
    });
+    document.addEventListener("DOMContentLoaded", function() {
+        var animationDelay = 2000;
+        initHeadline();
+
+        function initHeadline() {
+            animateHeadline(document.querySelectorAll('.headline'));
+        }
+
+        function animateHeadline(headlines) {
+            var duration = animationDelay;
+            headlines.forEach(function(headline) {
+                setTimeout(function() {
+                    hideWord(headline.querySelector('.is-visible'));
+                }, duration);
+            });
+        }
+
+        function hideWord(word) {
+            var nextWord = takeNext(word);
+            switchWord(word, nextWord);
+            setTimeout(function() {
+                hideWord(nextWord);
+            }, animationDelay);
+        }
+
+        function takeNext(word) {
+            return (word.nextElementSibling) ? word.nextElementSibling : word.parentElement.firstElementChild;
+        }
+
+        function switchWord(oldWord, newWord) {
+            oldWord.classList.remove('is-visible');
+            oldWord.classList.add('is-hidden');
+            newWord.classList.remove('is-hidden');
+            newWord.classList.add('is-visible');
+        }
+    });
 </script>
 </body>
 </html>
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -2,206 +2,125 @@
 <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">
-        <table width="100%" class="ant-table-tbody">
-            <tr>
-                <td>{{ i18n "pages.client.method" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option :value="0">Random</a-select-option>
-                            <a-select-option :value="1">Random+Prefix</a-select-option>
-                            <a-select-option :value="2">Random+Prefix+Num</a-select-option>
-                            <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
-                            <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>1">
-                <td>{{ i18n "pages.client.first" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>1">
-                <td>{{ i18n "pages.client.last" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.lastNum"
-                            :min="clientsBulkModal.firstNum"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>0">
-                <td>{{ i18n "pages.client.prefix" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="clientsBulkModal.emailPrefix" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>2">
-                <td>{{ i18n "pages.client.postfix" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="clientsBulkModal.emailPostfix" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod < 2">
-                <td>{{ i18n "pages.client.clientCount" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
-                <td>Flow</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="clientsBulkModal.flow" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                            <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="app.subSettings.enable">
-                <td>Subscription
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                        </template>
-                        <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
-                    </a-tooltip>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="clientsBulkModal.subId" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="app.tgBotEnable">
-                <td>Telegram ID
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="clientsBulkModal.tgId" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label>
-                        <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                        <a-tooltip>
-                            <template slot="title">
-                                <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                            </template>
-                            <a-icon type="question-circle" theme="filled"></a-icon>
-                        </a-tooltip>
-                    </label>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.limitIp" min="0"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td v-if="clientsBulkModal.inbound.xtls">
-                    <label>Flow</label>
-                </td>
-                <td v-if="clientsBulkModal.inbound.xtls">
-                    <a-form-item>
-                        <a-select v-model="clientsBulkModal.flow" style="width: 200px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value="">{{ i18n "none" }}</a-select-option>
-                            <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <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 :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "pages.client.method" }}'>
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option :value="0">Random</a-select-option>
+                <a-select-option :value="1">Random+Prefix</a-select-option>
+                <a-select-option :value="2">Random+Prefix+Num</a-select-option>
+                <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
+                <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.first" }}' v-if="clientsBulkModal.emailMethod>1">
+            <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.last" }}' v-if="clientsBulkModal.emailMethod>1">
+            <a-input-number v-model="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.prefix" }}' v-if="clientsBulkModal.emailMethod>0">
+            <a-input v-model="clientsBulkModal.emailPrefix"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.postfix" }}' v-if="clientsBulkModal.emailMethod>2">
+            <a-input v-model="clientsBulkModal.emailPostfix"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.clientCount" }}' v-if="clientsBulkModal.emailMethod < 2">
+            <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
+        </a-form-item>
+        <a-form-item label='Flow' v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
+            <a-select v-model="clientsBulkModal.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Flow' v-if="clientsBulkModal.inbound.xtls">
+            <a-select v-model="clientsBulkModal.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+                <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item v-if="app.subSettings.enable">
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                    </template>
+                    Subscription
+                    <a-icon @click="clientsBulkModal.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input v-model.trim="clientsBulkModal.subId"></a-input>
+        </a-form-item>
+        <a-form-item v-if="app.tgBotEnable">
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                    </template>
+                    Telegram ID
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input v-model.trim="clientsBulkModal.tgId"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
+                    </template>
+                    <span>{{ i18n "pages.inbounds.IPLimit" }} </span>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input-number v-model="clientsBulkModal.limitIp" min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                    </template>
+                    {{ i18n "pages.inbounds.totalFlow" }}
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+            <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
+            <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item v-else>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                    </template>
+                    {{ i18n "pages.inbounds.expireDate" }}
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                :dropdown-class-name="themeSwitcher.currentTheme" v-model="clientsBulkModal.expiryTime"></a-date-picker>
+            <persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
+                                value="clientsBulkModal.expiryTime" v-model="clientsBulkModal.expiryTime"></persian-datepicker>
+        </a-form-item>
+        <a-form-item v-if="clientsBulkModal.expiryTime != 0">
+            <template slot="label">
+                <span>{{ i18n "pages.client.renew" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.client.renewDesc" }}</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input-number v-model.number="clientsBulkModal.reset" :min="0"></a-input-number>
+        </a-form-item>
    </a-form>
 </a-modal>
 <script>
@@ -301,7 +220,7 @@
            clientsBulkModal.visible = false;
            clientsBulkModal.loading(false);
        },
-        loading(loading) {
+        loading(loading=true) {
            clientsBulkModal.confirmLoading = loading;
        },
    };
@@ -317,6 +236,9 @@
            get delayedExpireDays() {
                return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 : 0;
            },
+            get datepicker() {
+                return app.datepicker;
+            },
            set delayedExpireDays(days) {
                this.clientsBulkModal.expiryTime = -86400000 * days;
            },
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/client_modal.html
@@ -72,7 +72,7 @@
            clientModal.visible = false;
            clientModal.loading(false);
        },
-        loading(loading) {
+        loading(loading=true) {
            clientModal.confirmLoading = loading;
        },
    };
@@ -94,6 +94,9 @@
            get isEdit() {
                return this.clientModal.isEdit;
            },
+            get datepicker() {
+                return app.datepicker;
+            },
            get isTrafficExhausted() {
                if (!clientStats) return false
                if (clientStats.total <= 0) return false
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -1,27 +1,23 @@
 {{define "menuItems"}}
 <a-menu-item key="{{ .base_path }}panel/">
    <a-icon type="dashboard"></a-icon>
-    <span>{{ i18n "menu.dashboard"}}</span>
+    <span><b>{{ i18n "menu.dashboard"}}</b></span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/inbounds">
    <a-icon type="user"></a-icon>
-    <span>{{ i18n "menu.inbounds"}}</span>
+    <span><b>{{ i18n "menu.inbounds"}}</b></span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/settings">
    <a-icon type="setting"></a-icon>
-    <span>{{ i18n "menu.settings"}}</span>
+    <span><b>{{ i18n "menu.settings"}}</b></span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/xray">
    <a-icon type="tool"></a-icon>
-    <span>{{ i18n "menu.xray"}}</span>
+    <span><b>{{ i18n "menu.xray"}}</b></span>
 </a-menu-item>
-<!--<a-menu-item key="{{ .base_path }}panel/clients">-->
-<!--    <a-icon type="laptop"></a-icon>-->
-<!--    <span>Client</span>-->
-<!--</a-menu-item>-->
 <a-menu-item key="{{ .base_path }}logout">
    <a-icon type="logout"></a-icon>
-    <span>{{ i18n "menu.logout"}}</span>
+    <span><b>{{ i18n "menu.logout"}}</b></span>
 </a-menu-item>
 {{end}}

@@ -31,7 +27,13 @@
    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
        <a-menu-item mode="inline">
            <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-            <theme-switch />
+            <theme-switch>
+            </theme-switch>
+            <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
+                        :checked="themeSwitcher.isUltra"
+                        @click="themeSwitcher.toggleUltra()">
+                        Ultra
+            </a-checkbox>
        </a-menu-item>
    </a-menu>
    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
@@ -50,7 +52,13 @@
    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
        <a-menu-item mode="inline">
            <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-            <theme-switch />
+            <theme-switch>
+            </theme-switch>
+            <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
+                        :checked="themeSwitcher.isUltra"
+                        @click="themeSwitcher.toggleUltra()">
+                        Ultra
+            </a-checkbox>
        </a-menu-item>
    </a-menu>
    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
--- a/web/html/xui/component/persianDatepicker.html
+++ b/web/html/xui/component/persianDatepicker.html
@@ -0,0 +1,60 @@
+{{define "component/persianDatepickerTemplate"}}
+<template>
+    <div>
+        <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
+                 @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
+                 :placeholder="placeholder">
+            <template #addonAfter>
+                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;"/>
+            </template>
+        </a-input>
+    </div>
+</template>
+{{end}}
+
+{{define "component/persianDatepicker"}}
+<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css"/>
+<script src="{{ .base_path }}assets/moment/moment-jalali.min.js"></script>
+<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js"></script>
+<script>
+
+    const persianDatepicker = {};
+
+    Vue.component('persian-datepicker', {
+        props: ['placeholder', 'format', 'value'],
+        template: `{{template "component/persianDatepickerTemplate"}}`,
+        data() {
+            return {
+                date: '',
+                persianDatepicker,
+            };
+        },
+        watch: {
+            value: function (date) {
+                this.date = this.convertToJalalian(date)
+            }
+        },
+        mounted() {
+            this.date = this.convertToJalalian(this.value)
+            this.listenToDatepicker()
+        },
+        methods: {
+            convertToGregorian(date) {
+                return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) : null
+            },
+            convertToJalalian(date) {
+                return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null
+            },
+            listenToDatepicker() {
+                jalaliDatepicker.startWatch({
+                    time: true,
+                    zIndex: '9999',
+                    hideAfterChange: true,
+                    useDropDownYears: false,
+                    changeMonthRotateYear: true,
+                });
+            },
+        }
+    });
+</script>
+{{end}}
--- a/web/html/xui/component/sortableTable.html
+++ b/web/html/xui/component/sortableTable.html
@@ -0,0 +1,224 @@
+{{define "component/sortableTableTrigger"}}
+    <a-icon type="drag"
+        class="sortable-icon"
+        style="cursor: move;"
+        @mouseup="mouseUpHandler"
+        @mousedown="mouseDownHandler"
+        @click="clickHandler" />
+{{end}}
+
+{{define "component/sortableTable"}}
+<script>
+    const DRAGGABLE_ROW_CLASS = 'draggable-row';
+
+    const findParentRowElement = (el) => {
+        if (!el || !el.tagName) {
+            return null;
+        } else if (el.classList.contains(DRAGGABLE_ROW_CLASS)) {
+            return el;
+        } else if (el.parentNode) {
+            return findParentRowElement(el.parentNode);
+        } else {
+            return null;
+        }
+    }
+
+    Vue.component('a-table-sortable', {
+        data() {
+            return {
+                sortingElementIndex: null,
+                newElementIndex: null,
+            };
+        },
+        props: ['data-source', 'customRow'],
+        inheritAttrs: false,
+            provide() {
+            const sortable = {}
+
+            Object.defineProperty(sortable, "setSortableIndex", {
+                enumerable: true,
+                get: () => this.setCurrentSortableIndex,
+            });
+
+            Object.defineProperty(sortable, "resetSortableIndex", {
+                enumerable: true,
+                get: () => this.resetSortableIndex,
+            });
+
+            return {
+                sortable,
+            }
+        },
+        render: function (createElement) {
+            return createElement(
+                'a-table',
+                {
+                    class: {
+                        'ant-table-is-sorting': this.isDragging(),
+                    },
+                    props: {
+                        ...this.$attrs,
+                        'data-source': this.records,
+                        customRow: (record, index) => this.customRowRender(record, index),
+                    },
+                    on: this.$listeners,
+                    nativeOn: {
+                        drop: (e) => this.dropHandler(e),
+                    },
+                    scopedSlots: this.$scopedSlots,
+                },
+                this.$slots.default,
+            )
+        },
+        created() {
+            this.$memoSort = {};
+        },
+        methods: {
+            isDragging() {
+                const currentIndex = this.sortingElementIndex;
+                return currentIndex !== null && currentIndex !== undefined;
+            },
+            resetSortableIndex(e, index) {
+                this.sortingElementIndex = null;
+                this.newElementIndex = null;
+                this.$memoSort = {};
+            },
+            setCurrentSortableIndex(e, index) {
+                this.sortingElementIndex = index;
+            },
+            dragStartHandler(e, index) {
+                if (!this.isDragging()) {
+                    e.preventDefault();
+                    return;
+                }
+            },
+            dragStopHandler(e, index) {
+                this.resetSortableIndex(e, index);
+            },
+            dragOverHandler(e, index) {
+                if (!this.isDragging()) {
+                    return;
+                }
+
+                e.preventDefault();
+
+                const currentIndex = this.sortingElementIndex;
+                if (index === currentIndex) {
+                    this.newElementIndex = null;
+                    return;
+                }
+
+                const row = findParentRowElement(e.target);
+                if (!row) {
+                    return;
+                }
+
+                const rect = row.getBoundingClientRect();
+                const offsetTop = e.pageY - rect.top;
+
+                if (offsetTop < rect.height / 2) {
+                    this.newElementIndex = Math.max(index - 1, 0);
+                } else {
+                    this.newElementIndex = index;
+                }
+            },
+            dropHandler(e) {
+                if (this.isDragging()) {
+                    this.$emit('onsort', this.sortingElementIndex, this.newElementIndex);
+                }
+            },
+            customRowRender(record, index) {
+                const parentMethodResult = this.customRow?.(record, index) || {};
+                const newIndex = this.newElementIndex;
+                const currentIndex = this.sortingElementIndex;
+
+                return {
+                    ...parentMethodResult,
+                    attrs: {
+                        ...(parentMethodResult?.attrs || {}),
+                        draggable: true,
+                    },
+                    on: {
+                        ...(parentMethodResult?.on || {}),
+                        dragstart: (e) => this.dragStartHandler(e, index),
+                        dragend: (e) => this.dragStopHandler(e, index),
+                        dragover: (e) => this.dragOverHandler(e, index),
+                    },
+                    class: {
+                        ...(parentMethodResult?.class || {}),
+                        [DRAGGABLE_ROW_CLASS]: true,
+                        ['dragging']: this.isDragging()
+                            ? (newIndex === null ? index === currentIndex : index === newIndex)
+                            : false,
+                    },
+                };
+            }
+        },
+        computed: {
+            records() {
+                const newIndex = this.newElementIndex;
+                const currentIndex = this.sortingElementIndex;
+
+                if (!this.isDragging() || newIndex === null || currentIndex === newIndex) {
+                    return this.dataSource;
+                }
+
+                if (this.$memoSort.newIndex === newIndex) {
+                    return this.$memoSort.list;
+                }
+
+                let list = [...this.dataSource];
+                list.splice(newIndex, 0, list.splice(currentIndex, 1)[0]);
+
+                this.$memoSort = {
+                    newIndex,
+                    list,
+                };
+
+                return list;
+            }
+        }
+    });
+
+    Vue.component('table-sort-trigger', {
+        template: `{{template "component/sortableTableTrigger"}}`,
+        props: ['item-index'],
+        inject: ['sortable'],
+        methods: {
+            mouseDownHandler(e) {
+                if (this.sortable) {
+                    this.sortable.setSortableIndex(e, this.itemIndex);
+                }
+            },
+            mouseUpHandler(e) {
+                if (this.sortable) {
+                    this.sortable.resetSortableIndex(e, this.itemIndex);
+                }
+            },
+            clickHandler(e) {
+                e.preventDefault();
+            },
+        }
+    })
+</script>
+
+<style>
+    @media only screen and (max-width: 767px) {
+        .sortable-icon {
+            display: none;
+        }
+    }
+    .ant-table-is-sorting .draggable-row td {
+        background-color: white !important;
+    }
+    .dark .ant-table-is-sorting .draggable-row td {
+        background-color: var(--dark-color-surface-100) !important;
+    }
+    .ant-table-is-sorting .dragging {
+        opacity: 0.5;
+    }
+    .ant-table-is-sorting .dragging .ant-table-row-index {
+        opacity: 0;
+    }
+</style>
+{{end}}
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -10,25 +10,48 @@
 <script>
  function createThemeSwitcher() {
    const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
+    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
+    if (isUltra) {
+      document.documentElement.setAttribute('data-theme', 'ultra-dark');
+    }
    const theme = isDarkTheme ? 'dark' : 'light';
+    document.querySelector('body').setAttribute('class', theme);
    return {
      isDarkTheme,
+      isUltra,
      get currentTheme() {
        return this.isDarkTheme ? 'dark' : 'light';
      },
      toggleTheme() {
        this.isDarkTheme = !this.isDarkTheme;
        localStorage.setItem('dark-mode', this.isDarkTheme);
+        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
+        document.getElementById('message').className = themeSwitcher.currentTheme;
      },
+      toggleUltra() {
+        this.isUltra = !this.isUltra;
+        if (this.isUltra) {
+          document.documentElement.setAttribute('data-theme', 'ultra-dark');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
+        localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
+      }
    };
  }
-
  const themeSwitcher = createThemeSwitcher();
-
  Vue.component('theme-switch', {
    props: [],
    template: `{{template "component/themeSwitchTemplate"}}`,
-    data: () => ({ themeSwitcher }),
+    data: () => ({
+      themeSwitcher
+    }),
+    mounted() {
+      this.$message.config({
+        getContainer: () => document.getElementById('message')
+      });
+      document.getElementById('message').className = themeSwitcher.currentTheme;
+    }
  });
 </script>
-{{end}}
+{{end}}
--- a/web/html/xui/dns_modal.html
+++ b/web/html/xui/dns_modal.html
@@ -0,0 +1,86 @@
+{{define "dnsModal"}}
+<a-modal id="dns-modal" v-model="dnsModal.visible" :title="dnsModal.title" @ok="dnsModal.ok"
+         :closable="true" :mask-closable="false"
+         :ok-text="dnsModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "pages.xray.outbound.address" }}'>
+            <a-input v-model.trim="dnsModal.dnsServer.address"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.dns.domains" }}'>
+          <a-button size="small" type="primary" @click="dnsModal.dnsServer.domains.push('')">+</a-button>
+            <template v-for="(domain, index) in dnsModal.dnsServer.domains">
+              <a-input v-model.trim="dnsModal.dnsServer.domains[index]">
+                  <a-button size="small" slot="addonAfter" @click="dnsModal.dnsServer.domains.splice(index,1)">-</a-button>
+              </a-input>
+          </template>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.dns.strategy" }}' v-if="isAdvanced">
+          <a-select
+            v-model="dnsModal.dnsServer.queryStrategy"
+            style="width: 100%"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option :value="l" :label="l" v-for="l in ['UseIP', 'UseIPv4', 'UseIPv6']">
+                [[ l ]]
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+    </a-form>
+</a-modal>
+<script>
+    const dnsModal = {
+        title: '',
+        visible: false,
+        okText: '{{ i18n "confirm" }}',
+        isEdit: false,
+        confirm: null,
+        dnsServer: {
+          address: "localhost",
+          domains: [],
+          queryStrategy: 'UseIP',
+        },
+        ok() {
+          domains = dnsModal.dnsServer.domains.filter(d => d.length>0);
+          dnsModal.dnsServer.domains = domains;
+          newDnsServer = domains.length > 0 ? dnsModal.dnsServer : dnsModal.dnsServer.address;
+          ObjectUtil.execute(dnsModal.confirm, newDnsServer);
+        },
+        show({ title='', okText='{{ i18n "confirm" }}', dnsServer, confirm=(dnsServer)=>{}, isEdit=false  }) {
+            this.title = title;
+            this.okText = okText;
+            this.confirm = confirm;
+            this.visible = true;
+            if(isEdit) {
+              if (typeof dnsServer == 'object'){
+                this.dnsServer = dnsServer;
+              } else {
+                this.dnsServer.address = dnsServer?? '';
+              }
+            } else {
+              this.dnsServer = {
+                address: "localhost",
+                domains: [],
+                queryStrategy: 'UseIP',
+              }
+            }
+            this.isEdit = isEdit;
+        },
+        close() {
+            dnsModal.visible = false;
+        },
+    };
+
+    new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#dns-modal',
+        data: {
+            dnsModal: dnsModal,
+        },
+        computed: {
+          isAdvanced: {
+            get: function () { return dnsModal.dnsServer.domains.length>0 }
+          }
+        }
+    });
+
+</script>
+{{end}}
--- a/web/html/xui/fakedns_modal.html
+++ b/web/html/xui/fakedns_modal.html
@@ -0,0 +1,57 @@
+{{define "fakednsModal"}}
+<a-modal id="fakedns-modal" v-model="fakednsModal.visible" :title="fakednsModal.title" @ok="fakednsModal.ok"
+         :closable="true" :mask-closable="false"
+         :ok-text="fakednsModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "pages.xray.fakedns.ipPool" }}'>
+            <a-input v-model.trim="fakednsModal.fakeDns.ipPool"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.fakedns.poolSize" }}'>
+          <a-input-number style="width: 100%;" type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input-number>
+        </a-form-item>
+    </a-form>
+</a-modal>
+<script>
+    const fakednsModal = {
+        title: '',
+        visible: false,
+        okText: '{{ i18n "confirm" }}',
+        isEdit: false,
+        confirm: null,
+        fakeDns: {
+          ipPool: "198.18.0.0/16",
+          poolSize: 65535,
+        },
+        ok() {
+          ObjectUtil.execute(fakednsModal.confirm, fakednsModal.fakeDns);
+        },
+        show({ title='', okText='{{ i18n "confirm" }}', fakeDns, confirm=(fakeDns)=>{}, isEdit=false  }) {
+            this.title = title;
+            this.okText = okText;
+            this.confirm = confirm;
+            this.visible = true;
+            if(isEdit) {
+                this.fakeDns = fakeDns;
+            } else {
+              this.fakeDns = {
+                ipPool: "198.18.0.0/16",
+                poolSize: 65535,
+              }
+            }
+            this.isEdit = isEdit;
+        },
+        close() {
+            fakednsModal.visible = false;
+        },
+    };
+
+    new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#fakedns-modal',
+        data: {
+            fakednsModal: fakednsModal,
+        }
+    });
+
+</script>
+{{end}}
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -1,223 +1,170 @@
 {{define "form/client"}}
-<a-form layout="inline" v-if="client">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.enable" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="client.enable"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span>{{ i18n "pages.inbounds.email" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-                    </template>
-                    <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="client.email" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
-            <td>password
-                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-                <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)" type="sync"> </a-icon>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="client.password" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
-            <td>ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon></td>
-            <td>
-                <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
-            </td>
-        </tr>
-        <tr v-if="client.email && app.subSettings.enable">
-            <td>Subscription <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon></td>
-            <td>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                    </template>
-                </a-tooltip>
-                <a-form-item>
-                    <a-input v-model.trim="client.subId" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="client.email && app.tgBotEnable">
-            <td>Telegram ID
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="client.tgId" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model="client.limitIp" min="0"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="client.email && client.limitIp > 0 && isEdit">
-            <td>
-                <span>{{ i18n "pages.inbounds.IPLimitlog" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
-                    </template>
-                    <span style="color: #FF4D4F">
-                        <a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
-                    </span>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form layout="block">
-                    <a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email)"
-                        placeholder="Click To Get IPs" :auto-size="{ minRows: 5, maxRows: 10 }">
-                    </a-textarea>
-                </a-form>
-            </td>
-        </tr>
-        <tr v-if="inbound.xtls">
-            <td>Flow</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="client.flow" style="width: 200px"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="">{{ i18n "none" }}</a-select-option>
-                        <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-else-if="inbound.canEnableTlsFlow()">
-            <td>Flow</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="client.flow" style="width: 200px"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                        <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <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="client._totalGB" :min="0"></a-input-number>
-                </a-form-item>
-                <template v-if="isEdit && clientStats">
-                    <br>
-                    <span> {{ i18n "usage" }}:</span>
-                    <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
-                        [[ sizeFormat(clientStats.up) ]] /
-                        [[ sizeFormat(clientStats.down) ]]
-                        ([[ sizeFormat(clientStats.up + clientStats.down) ]])
-                    </a-tag>
-                    <a-tooltip>
-                        <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-                        <a-icon type="retweet"
-                            @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
-                            v-if="client.email.length > 0"></a-icon>
-                    </a-tooltip>
+<a-form layout="horizontal" v-if="client" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
+        <a-switch v-model="client.enable"></a-switch>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                </template>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.client.delayedStart" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="delayedStart">
-            <td>{{ i18n "pages.client.expireDays" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model="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: 170px;"></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>
+                {{ i18n "pages.inbounds.email" }}
+                <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.email"></a-input>
+    </a-form-item>
+    <a-form-item v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                {{ i18n "password" }}
+                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS"@click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+                <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.password"></a-input>
+    </a-form-item>
+    <a-form-item v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.id"></a-input>
+    </a-form-item>
+    <a-form-item v-if="client.email && app.subSettings.enable">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                </template>
+                Subscription
+                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.subId"></a-input>
+    </a-form-item>
+    <a-form-item v-if="client.email && app.tgBotEnable">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                </template>
+                Telegram ID
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.tgId"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.IPLimitDesc"}}</span>
+                </template>
+                    <span>{{ i18n "pages.inbounds.IPLimit"}} </span>
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model="client.limitIp" min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-if="client.email && client.limitIp > 0 && isEdit">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
+                </template>
+                    <span>{{ i18n "pages.inbounds.IPLimitlog" }}</span>
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-tooltip>
+            <template slot="title">
+                <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
+            </template>
+            <span style="color: #FF4D4F">
+                <a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
+            </span>
+        </a-tooltip>
+        <a-form layout="block">
+            <a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email)" placeholder="Click To Get IPs"
+                :auto-size="{ minRows: 5, maxRows: 10 }">
+            </a-textarea>
+        </a-form>
+    </a-form-item>
+    <a-form-item v-if="inbound.xtls" label='Flow'>
+        <a-select v-model="client.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+            <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item v-if="inbound.canEnableTlsFlow()" label='Flow'>
+        <a-select v-model="client.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+            <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                </template>
+                {{ i18n "pages.inbounds.totalFlow" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-if="isEdit && clientStats" label='{{ i18n "usage" }}'>
+        <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
+            [[ sizeFormat(clientStats.up) ]] /
+            [[ sizeFormat(clientStats.down) ]]
+            ([[ sizeFormat(clientStats.up + clientStats.down) ]])
+        </a-tag>
+        <a-tooltip>
+            <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
+            <a-icon type="retweet"
+                @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
+                v-if="client.email.length > 0"></a-icon>
+        </a-tooltip>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+    </a-form-item>
+    <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
+        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-else>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</template>
+                {{ i18n "pages.inbounds.expireDate" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+            :dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"></a-date-picker>
+        <persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
+                            value="client._expiryTime" v-model="client._expiryTime"></persian-datepicker>
+        <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
+    </a-form-item>
+    <a-form-item v-if="client.expiryTime != 0">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">{{ i18n "pages.client.renewDesc" }}</template>
+                {{ i18n "pages.client.renew" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model.number="client.reset" :min="0"></a-input-number>
+    </a-form-item>
 </a-form>
 {{end}}
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -1,93 +1,66 @@
 {{define "form/inbound"}}
 <!-- base -->
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "enable" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="dbInbound.enable"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "remark" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="dbInbound.remark" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </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>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "enable" }}'>
+        <a-switch v-model="dbInbound.enable"></a-switch>
+    </a-form-item>
+    <a-form-item label='{{ i18n "remark" }}'>
+        <a-input v-model.trim="dbInbound.remark"></a-input>
+    </a-form-item>
+
+    <a-form-item label='{{ i18n "protocol" }}'>
+        <a-select v-model="inbound.protocol" :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>
+
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
                <template slot="title">
                    <span>{{ i18n "pages.inbounds.monitorDesc" }}</span>
                </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.listen" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.port" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.port"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <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="dbInbound.totalGB" :min="0"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <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="dbInbound._expiryTime" style="width: 250px;"></a-date-picker>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
-</a-form>
+                {{ i18n "monitor" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.listen"></a-input>
+    </a-form-item>

+    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
+        <a-input-number v-model.number="inbound.port"></a-input-number>
+    </a-form-item>
+
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                </template>
+                {{ i18n "pages.inbounds.totalFlow" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model="dbInbound.totalGB" :min="0"></a-input-number>
+    </a-form-item>
+
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                </template>
+                {{ i18n "pages.inbounds.expireDate" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+            <a-date-picker style="width: 100%;" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                :dropdown-class-name="themeSwitcher.currentTheme"
+                v-model="dbInbound._expiryTime"></a-date-picker>
+            <persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
+                            value="dbInbound._expiryTime" v-model="dbInbound._expiryTime"></persian-datepicker>
+        </a-form-item>
+</a-form>

 <!-- vmess settings -->
 <template v-if="inbound.protocol === Protocols.VMESS">
@@ -124,6 +97,11 @@
    {{template "form/http"}}
 </template>

+<!-- wireguard -->
+<template v-if="inbound.protocol === Protocols.WIREGUARD">
+    {{template "form/wireguard"}}
+</template>
+
 <!-- stream settings -->
 <template v-if="inbound.canEnableStream()">
    {{template "form/streamSettings"}}
@@ -136,7 +114,7 @@
 </template>

 <!-- sniffing -->
-<template v-if="inbound.canSniffing()">
+<template>
    {{template "form/sniffing"}}
 </template>
-{{end}}
+{{end}}
--- a/web/html/xui/form/outbound.html
+++ b/web/html/xui/form/outbound.html
@@ -2,535 +2,393 @@
 <!-- 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">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "protocol" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.protocol" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
-                    </a-select>
-                </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>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "protocol" }}'>
+            <a-select v-model="outbound.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}' has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
+            <a-input v-model.trim="outbound.tag" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
+        </a-form-item>

 <!-- freedom settings-->
 <template v-if="outbound.protocol === Protocols.Freedom">
-        <tr>
-            <td>Strategy</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.domainStrategy"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in outboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <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>
+        <a-form-item label='Strategy'>
+            <a-select
+            v-model="outbound.settings.domainStrategy"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Fragment'>
+            <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>
    <template v-if="Object.keys(outbound.settings.fragment).length >0">
-        <tr>
-            <td>Packets</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.fragment.packets"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <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>
+        <a-form-item label='Packets'>
+            <a-select
+            v-model="outbound.settings.fragment.packets"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Length'>
+            <a-input v-model.trim="outbound.settings.fragment.length"></a-input>
+        </a-form-item>
+        <a-form-item label='Interval'>
+            <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
+        </a-form-item>
    </template>
 </template>

 <!-- blackhole settings -->
 <template v-if="outbound.protocol === Protocols.Blackhole">
-        <tr>
-            <td>Response Type</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.type"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+    <a-form-item label='Response Type'>
+        <a-select
+        v-model="outbound.settings.type"
+        :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s ]]</a-select-option>
+        </a-select>
+    </a-form-item>
 </template>

 <!-- dns settings -->
 <template v-if="outbound.protocol === Protocols.DNS">
-        <tr>
-            <td>{{ i18n "pages.inbounds.network" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.network"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+    <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
+        <a-select
+        v-model="outbound.settings.network"
+        :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+</template>
+
+<!-- wireguard settings -->
+<template v-if="outbound.protocol === Protocols.Wireguard">
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                </template>
+                {{ i18n "pages.xray.outbound.address" }} <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="outbound.settings.address"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                {{ i18n "pages.xray.wireguard.secretKey" }}
+                <a-icon type="sync"
+                    @click="[outbound.settings.pubKey, outbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())">
+                </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="outbound.settings.secretKey"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+        <a-input disabled v-model="outbound.settings.pubKey"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.xray.wireguard.domainStrategy" }}'>
+        <a-select v-model="outbound.settings.domainStrategy" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="wds in ['', ...WireguardDomainStrategy]" :value="wds">[[ wds ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item label='MTU'>
+        <a-input-number v-model.number="outbound.settings.mtu"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Workers'>
+        <a-input-number min="0" v-model.number="outbound.settings.workers"></a-input>
+    </a-form-item>
+    <a-form-item label='Kernel Mode'>
+        <a-switch v-model="outbound.settings.kernelMode"></a-switch>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                </template>
+                Reserved <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model="outbound.settings.reserved"></a-input>
+    </a-form-item>
+    <a-form-item label="Peers">
+        <a-button type="primary" size="small" @click="outbound.settings.addPeer()">+</a-button>
+    </a-form-item>
+    <a-form v-for="(peer, index) in outbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-divider style="margin:0;">
+            Peer [[ index + 1 ]]
+            <a-icon v-if="outbound.settings.peers.length>1" type="delete" @click="() => outbound.settings.delPeer(index)"
+                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
+        </a-divider>
+
+        <a-form-item label='{{ i18n "pages.xray.wireguard.endpoint" }}'>
+            <a-input v-model.trim="peer.endpoint"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+            <a-input v-model.trim="peer.publicKey"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.wireguard.psk" }}'>
+            <a-input v-model.trim="peer.psk"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                {{ i18n "pages.xray.wireguard.allowedIPs" }} <a-button type="primary" size="small" @click="peer.allowedIPs.push('')">+</a-button>
+            </template>
+            <template v-for="(aip, index) in peer.allowedIPs" style="margin-bottom: 10px;">
+                <a-input v-model.trim="peer.allowedIPs[index]">
+                    <a-button v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small" @click="peer.allowedIPs.splice(index, 1)">-</a-button>
+                </a-input>
+            </template>
+        </a-form-item>
+        <a-form-item label='Keep Alive'>
+            <a-input-number v-model.number="peer.keepAlive" :min="0"></a-input>
+        </a-form-item>    
+    </a-form>
 </template>

 <!-- Address + Port -->
 <template v-if="outbound.hasAddressPort()">
-        <tr>
-            <td>{{ i18n "pages.inbounds.address" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.address" style="width: 250px"></a-input>
-                </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>
+        <a-form-item label='{{ i18n "pages.inbounds.address" }}'>
+            <a-input v-model.trim="outbound.settings.address"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
+            <a-input-number v-model.number="outbound.settings.port" :min="1" :max="65532"></a-input-number>
+        </a-form-item>
 </template>

 <!-- Vnext (vless/vmess) settings -->
 <template v-if="[Protocols.VMess, Protocols.VLESS].includes(outbound.protocol)">
-        <tr>
-            <td>ID</td>
-            <td>
-                <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>
-            <td>Flow</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.settings.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                        <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='ID'>
+            <a-input v-model.trim="outbound.settings.id"></a-input>
+        </a-form-item>
+ <!-- vless settings -->
+ <template v-if="outbound.canEnableTlsFlow()">
+        <a-form-item label='Flow'>
+            <a-select v-model="outbound.settings.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
    </template>
 </template>

 <!-- Servers (trojan/shadowsocks/socks/http) settings -->
 <template v-if="outbound.hasServers()">
-        <tr v-if="outbound.hasUsername()">
-            <td>{{ i18n "username" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.user" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <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>
+    <!-- http / socks -->
+    <template v-if="outbound.hasUsername()">
+        <a-form-item label='{{ i18n "username" }}'>
+            <a-input v-model.trim="outbound.settings.user"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "password" }}'>
+            <a-input v-model.trim="outbound.settings.pass"></a-input>
+        </a-form-item>
+    </template>
+<!-- trojan/shadowsocks -->
+<template v-if="[Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
+        <a-form-item label='{{ i18n "password" }}'>
+        <a-input v-model.trim="outbound.settings.password"></a-input>
+        </a-form-item>
+    </template>
    <!-- shadowsocks -->
    <template v-if="outbound.protocol === Protocols.Shadowsocks">
-        <tr>
-            <td>{{ i18n "encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
-                    </a-select>
-                </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>
+        <a-form-item label='{{ i18n "encryption" }}'>
+            <a-select v-model="outbound.settings.method" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="(method, method_name) in SSMethods" :value="method">[[ method_name ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='UDP over TCP'>
+            <a-switch v-model="outbound.settings.uot"></a-switch>
+        </a-form-item>
+  </template>
 </template>

 <!-- stream settings -->
 <template v-if="outbound.canEnableStream()">
-        <tr>
-            <td>{{ i18n "transmission" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
-                    style="width: 250px;" :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-select-option value="http">HTTP2</a-select-option>
-                        <a-select-option value="quic">QUIC</a-select-option>
-                        <a-select-option value="grpc">gRPC</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "transmission" }}'>
+            <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
+                    :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="tcp">TCP</a-select-option>
+                <a-select-option value="kcp">mKCP</a-select-option>
+                <a-select-option value="ws">WS</a-select-option>
+                <a-select-option value="http">H2</a-select-option>
+                <a-select-option value="quic">QUIC</a-select-option>
+                <a-select-option value="grpc">gRPC</a-select-option>
+            </a-select>
+        </a-form-item>
    <template v-if="outbound.stream.network === 'tcp'">
-        <tr>
-            <td>http {{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch
-                            :checked="outbound.stream.tcp.type === 'http'"
-                            @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'">
-                    </a-switch>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='HTTP {{ i18n "camouflage" }}'>
+            <a-switch
+                :checked="outbound.stream.tcp.type === 'http'"
+                @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'">
+            </a-switch>
+        </a-form-item>
        <template v-if="outbound.stream.tcp.type == 'http'">
-        <tr>
-            <td>{{ i18n "host" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input style="width: 250px;" v-model.trim="outbound.stream.tcp.host"></a-input>
-                </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>
+        <a-form-item label='{{ i18n "host" }}'>
+            <a-input v-model.trim="outbound.stream.tcp.host"></a-input>
+        </a-form-item> 
+        <a-form-item label='{{ i18n "path" }}'>
+            <a-input v-model.trim="outbound.stream.tcp.path"></a-input>
+        </a-form-item> 
        </template>
    </template>
    
    <!-- kcp -->
    <template v-if="outbound.stream.network === 'kcp'">
-        <tr>
-            <td>{{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.stream.kcp.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>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model="outbound.stream.kcp.seed" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>mtu</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>tti (ms)</td>
-            <td>
-                <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>
+        <a-form-item label='{{ i18n "camouflage" }}'>
+            <a-select v-model="outbound.stream.kcp.type" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="none">None</a-select-option>
+                <a-select-option value="srtp">SRTP</a-select-option>
+                <a-select-option value="utp">uTP</a-select-option>
+                <a-select-option value="wechat-video">WeChat</a-select-option>
+                <a-select-option value="dtls">DTLS 1.2</a-select-option>
+                <a-select-option value="wireguard">WireGuard</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "password" }}'>
+            <a-input v-model="outbound.stream.kcp.seed"></a-input>
+        </a-form-item>
+        <a-form-item label='MTU'>
+            <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
+        </a-form-item>
+        <a-form-item label='TTI (ms)'>
+            <a-input-number v-model.number="outbound.stream.kcp.tti"></a-input-number>
+        </a-form-item>
+        <a-form-item label='Uplink (MB/s)'>
+            <a-input-number v-model.number="outbound.stream.kcp.upCap"></a-input-number>
+        </a-form-item> 
+        <a-form-item label='Downlink (MB/s)'>
+            <a-input-number v-model.number="outbound.stream.kcp.downCap"></a-input-number>
+        </a-form-item>
+        <a-form-item label='Congestion'>
+            <a-switch v-model="outbound.stream.kcp.congestion"></a-switch>
+        </a-form-item>
+        <a-form-item label='Read Buffer (MB)'>
+            <a-input-number v-model.number="outbound.stream.kcp.readBuffer"></a-input-number>
+        </a-form-item>
+        <a-form-item label='Write Buffer (MB)'>
+            <a-input-number v-model.number="outbound.stream.kcp.writeBuffer"></a-input-number>
+        </a-form-item>
    </template>
    
    <!-- ws -->
    <template v-if="outbound.stream.network === 'ws'">
-        <tr>
-            <td>{{ i18n "host" }}</td>
-            <td><a-form-item><a-input style="width: 250px" v-model="outbound.stream.ws.host"></a-input></a-form-item></td>
-        </tr>
-        <tr>
-            <td>{{ i18n "path" }}</td>
-            <td><a-form-item><a-input style="width: 250px;" v-model.trim="outbound.stream.ws.path"></a-input></a-form-item></td>
-        </tr>
+        <a-form-item label='{{ i18n "host" }}'>
+            <a-input v-model="outbound.stream.ws.host"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "path" }}'>
+            <a-form-item><a-input v-model.trim="outbound.stream.ws.path"></a-input>
+        </a-form-item>
    </template>
    
    <!-- http -->
    <template v-if="outbound.stream.network === 'http'">
-        <tr>
-            <td>{{ i18n "host" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.stream.http.host" style="width: 250px;"></a-input>
-                </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>
+        <a-form-item label='{{ i18n "host" }}'>
+            <a-input v-model.trim="outbound.stream.http.host"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "path" }}'>
+            <a-input v-model.trim="outbound.stream.http.path"></a-input>
+        </a-form-item>
    </template>
    
    <!-- quic -->
    <template v-if="outbound.stream.network === 'quic'">
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.stream.quic.security" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none</a-select-option>
-                        <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
-                        <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.stream.quic.key" style="width: 250px;"></a-input>
-                </a-form-item> 
-            </td>
-        </tr>
-        <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>
+        <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
+            <a-select v-model="outbound.stream.quic.security" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="none">None</a-select-option>
+                <a-select-option value="aes-128-gcm">AES-128-GCM</a-select-option>
+                <a-select-option value="chacha20-poly1305">CHACHA20-POLY1305</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "password" }}'>
+            <a-input v-model.trim="outbound.stream.quic.key"></a-input>
+        </a-form-item> 
+        <a-form-item label='{{ i18n "camouflage" }}'>
+            <a-select v-model="outbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="none">None</a-select-option>
+                <a-select-option value="srtp">SRTP</a-select-option>
+                <a-select-option value="utp">uTP</a-select-option>
+                <a-select-option value="wechat-video">WeChat</a-select-option>
+                <a-select-option value="dtls">DTLS 1.2</a-select-option>
+                <a-select-option value="wireguard">WireGuard</a-select-option>
+            </a-select>
+        </a-form-item>
    </template>
    
    <!-- grpc -->
    <template v-if="outbound.stream.network === 'grpc'">
-        <tr>
-            <td>serviceName</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
-                </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>
+        <a-form-item label='Service Name'>
+            <a-input v-model.trim="outbound.stream.grpc.serviceName"></a-input>
+        </a-form-item>
+        <a-form-item label='Multi Mode'>
+            <a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
+        </a-form-item>
    </template>
 </template>

 <!-- tls settings -->
 <template v-if="outbound.canEnableTls()">
-        <tr>
-            <td>{{ i18n "security" }}</td>
-            <td>
-                <a-form-item>
-                    <a-radio-group v-model="outbound.stream.security" button-style="solid">
-                        <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-                        <a-radio-button value="tls">TLS</a-radio-button>
-                        <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>
-                <td>SNI</td>
-                <td>
-                    <a-form-item placeholder="Server Name Indication">
-                        <a-input v-model.trim="outbound.stream.tls.serverName" style="width: 250px"></a-input>
-                    </a-form-item>                
-                </td>
-            </tr>
-            <tr>
-                <td>uTLS</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="outbound.stream.tls.fingerprint"
-                                    style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
-                            <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="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>
-                    <td>{{ i18n "domainName" }}</td>
-                    <td>
-                        <a-form-item>
-                            <a-input v-model.trim="outbound.stream.reality.serverName" style="width: 250px"></a-input>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <tr>
-                    <td>uTLS</td>
-                    <td>
-                        <a-form-item>
-                            <a-select v-model="outbound.stream.reality.fingerprint"
-                                      style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                            </a-select>
-                        </a-form-item>
-                    </td>
-                </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>
+    <a-form-item label='{{ i18n "security" }}'>
+        <a-radio-group v-model="outbound.stream.security" button-style="solid">
+            <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
+            <a-radio-button value="tls">TLS</a-radio-button>
+            <a-radio-button v-if="outbound.canEnableReality()" value="reality">REALITY</a-radio-button>
+        </a-radio-group>
+    </a-form-item>
+    <template v-if="outbound.stream.isTls">
+        <a-form-item label="SNI" placeholder="Server Name Indication">
+            <a-input v-model.trim="outbound.stream.tls.serverName"></a-input>
+        </a-form-item>
+        <a-form-item label="uTLS">
+            <a-select v-model="outbound.stream.tls.fingerprint" 
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <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>
+        <a-form-item label="ALPN">
+            <a-select mode="multiple" 
+            :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>
+        <a-form-item label="Allow Insecure">
+            <a-switch v-model="outbound.stream.tls.allowInsecure"></a-switch>
+        </a-form-item>
+    </template>
+
+    <!-- reality settings -->
+    <template v-if="outbound.stream.isReality">
+        <a-form-item label="SNI">
+            <a-input v-model.trim="outbound.stream.reality.serverName"></a-input>
+        </a-form-item>
+        <a-form-item label="uTLS">
+            <a-select v-model="outbound.stream.reality.fingerprint" 
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="Short ID">
+            <a-input v-model.trim="outbound.stream.reality.shortId" style="width:250px"></a-input>
+        </a-form-item>
+        <a-form-item label="SpiderX">
+            <a-input v-model.trim="outbound.stream.reality.spiderX" style="width:250px"></a-input>
+        </a-form-item>
+        <a-form-item label="Public Key">
+            <a-input v-model.trim="outbound.stream.reality.publicKey"></a-input>
+        </a-form-item>
+    </template>
 </template>
-    </table>
 </a-form>
 </a-tab-pane>
 <a-tab-pane key="2" tab="JSON" force-render="true">
@@ -541,4 +399,4 @@
        <textarea style="position:absolute; left: -800px;" id="outboundJson"></textarea>
 </a-tab-pane>
 </a-tabs>
-{{end}}
+{{end}}
--- 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">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.targetAddress"}}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.settings.address"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.destinationPort"}}</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.settings.port"></a-input-number>
-                </a-form-item>
-            </td>
-        </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 :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.targetAddress"}}'>
+        <a-input v-model.trim="inbound.settings.address"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
+        <a-input-number v-model.number="inbound.settings.port"></a-input-number>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
+        <a-select v-model="inbound.settings.network" :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>           
+    <a-form-item label='Follow Redirect'>
+        <a-switch v-model="inbound.settings.followRedirect"></a-switch>
+    </a-form-item>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/form/protocol/http.html
+++ b/web/html/xui/form/protocol/http.html
@@ -1,6 +1,6 @@
 {{define "form/http"}}
-<a-form layout="inline">
-        <table style="width: 100%; text-align: center; margin-bottom: 10px;">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <table style="width: 100%; text-align: center; margin: 1rem 0;">
            <tr>
                <td width="45%">{{ i18n "username" }}</td>
                <td width="45%">{{ i18n "password" }}</td>
@@ -18,4 +18,4 @@
            </a-input>
        </a-input-group>
 </a-form>
-{{end}}
+{{end}}
--- 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,29 @@
            </table>
        </a-collapse-panel>
    </a-collapse>
-    </template>
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <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>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.isSS2022">
-            <td>{{ i18n "password" }}
-                <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.settings.password" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </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>
-    </table>
+</template>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "encryption" }}'>
+        <a-select v-model="inbound.settings.method" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="(method,method_name) in SSMethods" :value="method">[[ method_name ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item v-if="inbound.isSS2022">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template> Password <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.settings.password"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
+        <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>
 </a-form>
-{{end}}
+{{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">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td style="width: 30%;">{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch :checked="inbound.settings.auth === 'password'"
-                              @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.settings.auth === 'password'">
-            <td colspan="2">
-                <table style="width: 100%; text-align: center; margin-bottom: 10px;">
-                    <tr>
-                        <td width="45%">{{ i18n "username" }}</td>
-                        <td width="45%">{{ i18n "password" }}</td>
-                        <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())">+</a-button></td>
-                    </tr>
-                </table>
-                <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
-                    <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
-                        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-                    </a-input>
-                    <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-                        <template slot="addonAfter">
-                            <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
-                        </template>
-                    </a-input>
-                </a-input-group>
-            </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 :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
+        <a-switch v-model="inbound.settings.udp"></a-switch>
+    </a-form-item>
+    <a-form-item label="IP" v-if="inbound.settings.udp">
+        <a-input v-model.trim="inbound.settings.ip"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "password" }}'>
+        <a-switch :checked="inbound.settings.auth === 'password'"
+        @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
+    </a-form-item>
+    <template v-if="inbound.settings.auth === 'password'">
+        <table style="width: 100%; text-align: center; margin: 1rem 0;">
+            <tr>
+                <td width="45%">{{ i18n "username" }}</td>
+                <td width="45%">{{ i18n "password" }}</td>
+                <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())">+</a-button></td>
+            </tr>
+        </table>
+        <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
+            <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
+                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+            </a-input>
+            <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
+                <template slot="addonAfter">
+                    <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
+                </template>
+            </a-input>
+        </a-input-group>
+    </template>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -1,86 +1,54 @@
 {{define "form/trojan"}}
-<a-form layout="inline" style="padding: 10px 0px;">
-    <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"}}
-        </a-collapse-panel>
-    </a-collapse>
-    <a-collapse v-else>
-        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
-            <table width="100%">
-                <tr class="client-table-header">
-                    <th>{{ i18n "pages.inbounds.email" }}</th>
-                    <th>Password</th>
-                </tr>
-                <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>[[ client.email ]]</td>
-                    <td>[[ client.password ]]</td>
-                </tr>
-            </table>
-        </a-collapse-panel>
-    </a-collapse>
-</a-form>
-<template v-if="inbound.isTcp">
-    <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"}}
+    </a-collapse-panel>
+</a-collapse>
+<a-collapse v-else>
+    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
+        <table width="100%">
+            <tr class="client-table-header">
+                <th>{{ i18n "pages.inbounds.email" }}</th>
+                <th>Password</th>
+            </tr>
+            <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                <td>[[ client.email ]]</td>
+                <td>[[ client.password ]]</td>
+            </tr>
+        </table>
+    </a-collapse-panel>
+</a-collapse>
+<template v-if="inbound.isTcp && !inbound.stream.isReality">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
        <a-form-item label="Fallbacks">
-            <a-row>
-                <a-button type="primary" size="small" @click="inbound.settings.addFallback()">
-                    +
-                </a-button>
-            </a-row>
+            <a-button type="primary" size="small" @click="inbound.settings.addFallback()">+</a-button>
        </a-form-item>
    </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:8} }"
+        :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;"/>
+                style="color: rgb(255, 77, 79);cursor: pointer;" />
        </a-divider>
-        <table width="100%">
-            <tr>
-                <td style="width: 20%;">Name</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
-                    </a-form-item>            
-                </td>
-            </tr>
-            <tr>
-                <td>Alpn</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
-                    </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-item label='SNI'>
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>
+        <a-form-item label='ALPN'>
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label='Path'>
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='xVer'>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
+        </a-form-item>
    </a-form>
-    <a-divider style="margin:0;"></a-divider>
+    <a-divider style="margin:5px 0;"></a-divider>
 </template>
-{{end}}
+{{end}}
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -1,88 +1,56 @@
 {{define "form/vless"}}
-<a-form layout="inline" style="padding: 10px 0px;">
-    <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"}}
-        </a-collapse-panel>     
-    </a-collapse>
-    <a-collapse v-else>
-        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
-            <table width="100%">
-                <tr class="client-table-header">
-                    <th>{{ i18n "pages.inbounds.email" }}</th>
-                    <th>Flow</th>
-                    <th>ID</th>
-                </tr>
-                <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>[[ client.email ]]</td>
-                    <td>[[ client.flow ]]</td>
-                    <td>[[ client.id ]]</td>
-                </tr>
-            </table>
-        </a-collapse-panel>
-    </a-collapse>
-</a-form>
-<template v-if="inbound.isTcp">
-    <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"}}
+    </a-collapse-panel>
+</a-collapse>
+<a-collapse v-else>
+    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
+        <table width="100%">
+            <tr class="client-table-header">
+                <th>{{ i18n "pages.inbounds.email" }}</th>
+                <th>Flow</th>
+                <th>ID</th>
+            </tr>
+            <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                <td>[[ client.email ]]</td>
+                <td>[[ client.flow ]]</td>
+                <td>[[ client.id ]]</td>
+            </tr>
+        </table>
+    </a-collapse-panel>
+</a-collapse>
+<template v-if="inbound.isTcp && !inbound.stream.isReality">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
        <a-form-item label="Fallbacks">
-            <a-row>
-                <a-button type="primary" size="small" @click="inbound.settings.addFallback()">
-                    +
-                </a-button>
-            </a-row>
+            <a-button type="primary" size="small" @click="inbound.settings.addFallback()">+</a-button>
        </a-form-item>
    </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:8} }"
+        :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;"/>
+                style="color: rgb(255, 77, 79);cursor: pointer;" />
        </a-divider>
-        <table width="100%">
-            <tr>
-                <td style="width: 20%;">Name</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
-                    </a-form-item>            
-                </td>
-            </tr>
-            <tr>
-                <td>Alpn</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
-                    </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-item label='SNI'>
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>
+        <a-form-item label='ALPN'>
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label='Path'>
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='xVer'>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
+        </a-form-item>
    </a-form>
-    <a-divider style="margin:0;"></a-divider>
+    <a-divider style="margin:5px 0;"></a-divider>
 </template>
 {{end}}
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -1,23 +1,21 @@
 {{define "form/vmess"}}
-<a-form layout="inline" style="padding: 10px 0px;">
-    <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-collapse-panel>     
-    </a-collapse>
-    <a-collapse v-else>
-        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount" }}: ' + inbound.settings.vmesses.length">
-            <table width="100%">
-                    <tr class="client-table-header">
-                        <th>{{ i18n "pages.inbounds.email" }}</th>
-                        <th>ID</th>
-                </tr>
-                <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>[[ client.email ]]</td>
-                    <td>[[ client.id ]]</td>
-                </tr>
-            </table>
-        </a-collapse-panel>
-    </a-collapse>
-</a-form>
+<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-collapse-panel>
+</a-collapse>
+<a-collapse v-else>
+    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vmesses.length">
+        <table width="100%">
+            <tr class="client-table-header">
+                <th>{{ i18n "pages.inbounds.email" }}</th>
+                <th>ID</th>
+            </tr>
+            <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                <td>[[ client.email ]]</td>
+                <td>[[ client.id ]]</td>
+            </tr>
+        </table>
+    </a-collapse-panel>
+</a-collapse>
 {{end}}
--- a/web/html/xui/form/protocol/wireguard.html
+++ b/web/html/xui/form/protocol/wireguard.html
@@ -0,0 +1,80 @@
+{{define "form/wireguard"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                {{ i18n "pages.xray.wireguard.secretKey" }}
+                <a-icon type="sync"
+                    @click="[inbound.settings.pubKey, inbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())">
+                </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.settings.secretKey"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
+        <a-input disabled v-model="inbound.settings.pubKey"></a-input>
+    </a-form-item>
+    <a-form-item label='MTU'>
+        <a-input-number v-model.number="inbound.settings.mtu"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Kernel Mode'>
+        <a-switch v-model="inbound.settings.kernelMode"></a-switch>
+    </a-form-item>
+    <a-form-item label="Peers">
+        <a-button type="primary" size="small" @click="inbound.settings.addPeer()">+</a-button>
+    </a-form-item>
+    <a-form v-for="(peer, index) in inbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-divider style="margin:0;">
+            Peer [[ index + 1 ]]
+            <a-icon v-if="inbound.settings.peers.length>1" type="delete" @click="() => inbound.settings.delPeer(index)"
+                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
+        </a-divider>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "reset" }}</span>
+                    </template>
+                    {{ i18n "pages.xray.wireguard.secretKey" }}
+                    <a-icon @click="[peer.publicKey, peer.privateKey] = Object.values(Wireguard.generateKeypair())"type="sync"> </a-icon>
+                </a-tooltip>
+            </template>
+            <a-input v-model.trim="peer.privateKey"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                {{ i18n "pages.xray.wireguard.publicKey" }}
+            </template>
+            <a-input v-model.trim="peer.publicKey"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "reset" }}</span>
+                    </template>
+                    {{ i18n "pages.xray.wireguard.psk" }}
+                    <a-icon @click="peer.psk = Wireguard.keyToBase64(Wireguard.generatePresharedKey())"type="sync"> </a-icon>
+                </a-tooltip>
+            </template>
+            <a-input v-model.trim="peer.psk"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                {{ i18n "pages.xray.wireguard.allowedIPs" }} <a-button type="primary" size="small" @click="peer.allowedIPs.push('')">+</a-button>
+            </template>
+            <template v-for="(aip, index) in peer.allowedIPs" style="margin-bottom: 10px;">
+                <a-input v-model.trim="peer.allowedIPs[index]">
+                    <a-button v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small" @click="peer.allowedIPs.splice(index, 1)">-</a-button>
+                </a-input>
+            </template>
+        </a-form-item>
+        <a-form-item label='Keep Alive'>
+            <a-input-number v-model.number="peer.keepAlive" :min="0"></a-input>
+        </a-form-item>    
+    </a-form>
+</a-form>
+{{end}}
--- a/web/html/xui/form/sniffing.html
+++ b/web/html/xui/form/sniffing.html
@@ -1,21 +1,22 @@
 {{define "form/sniffing"}}
-<a-form layout="inline">
-    <a-form-item>
-        <span slot="label">
-            Sniffing
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
-                </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-            </a-tooltip>
-        </span>
-        <a-switch v-model="inbound.sniffing.enabled"></a-switch>
-    </a-form-item>
-    <a-form-item>
-        <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-form-item>
+<a-divider style="margin:5px 0 0;"></a-divider>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form-item>
+    <span slot="label">
+        Sniffing
+        <a-tooltip>
+            <template slot="title">
+                <span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
+            </template>
+            <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 :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-form-item>
 </a-form>
-{{end}}
+{{end}}
--- 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-divider style="margin:0;"></a-divider>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-divider style="margin:5px 0 0;"></a-divider>
    <a-form-item label="External Proxy">
-    <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-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-form-item>
-    <table width="100%" class="ant-table-tbody" v-if="externalProxy" style="margin-bottom:5px">
-        <tr style="line-height: 40px;">
-            <td width="100%">
-                <a-input-group style="margin: 0 5px;" compact v-for="(row, index) in inbound.stream.externalProxy">
-                    <template>
-                        <a-tooltip title="Force TLS">
-                            <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
-                                <a-select-option value="none">{{ i18n "none" }}</a-select-option>
-                                <a-select-option value="tls">TLS</a-select-option>
-                            </a-select>
-                        </a-tooltip>
-                    </template>
-                    <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
-                    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
-                        <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
-                    </a-tooltip>
-                    <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-input-group style="margin: 8px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
+        <template>
+            <a-tooltip title="Force TLS">
+                <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
+                    <a-select-option value="none">{{ i18n "none" }}</a-select-option>
+                    <a-select-option value="tls">TLS</a-select-option>
+                </a-select>
+            </a-tooltip>
+        </template>
+        <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
+        <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
+            <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
+        </a-tooltip>
+        <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
+        <a-button style="width: 10%; margin: 0px; border-radius: 0 1rem 1rem 0;" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
+    </a-input-group>
 </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">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>serviceName</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
-                </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 :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="Service Name">
+        <a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
+    </a-form-item>
+    <a-form-item label="Multi Mode">
+        <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
+    </a-form-item>
 </a-form>
-{{end}}
+{{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">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "path" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.http.path" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>host</td>
-            <td>
-                <a-form-item>
-                    <a-row v-for="(host, index) in inbound.stream.http.host">
-                        <a-input v-model.trim="inbound.stream.http.host[index]" style="width: 250px;"></a-input>
-                    </a-row>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "path" }}'>
+        <a-input v-model.trim="inbound.stream.http.path"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">{{ i18n "host" }}
+            <a-button size="small" @click="inbound.stream.http.addHost()">+</a-button>
+        </template>
+        <template v-for="(host, index) in inbound.stream.http.host">
+            <a-input v-model.trim="inbound.stream.http.host[index]">
+                <a-button size="small" slot="addonAfter"
+                @click="inbound.stream.http.removeHost(index)"
+                v-if="inbound.stream.http.host.length>1">-</a-button>
+            </a-input>
+        </template>
+    </a-form-item>
 </a-form>
 {{end}}
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -1,86 +1,47 @@
 {{define "form/streamKCP"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.stream.kcp.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 (Camouflage Video Call)</a-select-option>
-                        <a-select-option value="utp">UTP (Camouflage BT Download)</a-select-option>
-                        <a-select-option value="wechat-video">Wechat-Video (Camouflage WeChat Video)</a-select-option>
-                        <a-select-option value="dtls">DTLS (Camouflage DTLS 1.2 Packages)</a-select-option>
-                        <a-select-option value="wireguard">Wireguard (Camouflage Wireguard Packages)</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model="inbound.stream.kcp.seed" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>MTU</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>TTI (ms)</td>
-            <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 :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "camouflage" }}'>
+        <a-select v-model="inbound.stream.kcp.type" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="none">None</a-select-option>
+            <a-select-option value="srtp">SRTP</a-select-option>
+            <a-select-option value="utp">uTP</a-select-option>
+            <a-select-option value="wechat-video">WeChat</a-select-option>
+            <a-select-option value="dtls">DTLS 1.2</a-select-option>
+            <a-select-option value="wireguard">WireGuard</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                {{ i18n "password" }}
+                <a-icon @click="inbound.stream.kcp.seed = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.stream.kcp.seed"></a-input>
+    </a-form-item>
+    <a-form-item label='MTU'>
+        <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
+    </a-form-item>
+    <a-form-item label='TTI (ms)'>
+        <a-input-number v-model.number="inbound.stream.kcp.tti"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Uplink (MB/s)'>
+        <a-input-number v-model.number="inbound.stream.kcp.upCap"></a-input-number>
+    </a-form-item> 
+    <a-form-item label='Downlink (MB/s)'>
+        <a-input-number v-model.number="inbound.stream.kcp.downCap"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Congestion'>
+        <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
+    </a-form-item>
+    <a-form-item label='Read Buffer (MB)'>
+        <a-input-number v-model.number="inbound.stream.kcp.readBuffer"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Write Buffer (MB)'>
+        <a-input-number v-model.number="inbound.stream.kcp.writeBuffer"></a-input-number>
+    </a-form-item>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -1,43 +1,33 @@
 {{define "form/streamQUIC"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.stream.quic.security" style="width: 250px;"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none</a-select-option>
-                        <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
-                        <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.quic.key" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.stream.quic.type" style="width: 280px;"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none (not camouflage)</a-select-option>
-                        <a-select-option value="srtp">srtp (camouflage video call)</a-select-option>
-                        <a-select-option value="utp">utp (camouflage BT download)</a-select-option>
-                        <a-select-option value="wechat-video">wechat-video (camouflage WeChat video)</a-select-option>
-                        <a-select-option value="dtls">dtls (camouflage DTLS 1.2 packages)</a-select-option>
-                        <a-select-option value="wireguard">wireguard (camouflage wireguard packages)</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
+        <a-select v-model="inbound.stream.quic.security" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="none">None</a-select-option>
+            <a-select-option value="aes-128-gcm">AES-128-GCM</a-select-option>
+            <a-select-option value="chacha20-poly1305">CHACHA20-POLY1305</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                {{ i18n "password" }}
+                <a-icon @click="inbound.stream.quic.key = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.stream.quic.key"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "camouflage" }}'>
+        <a-select v-model="inbound.stream.quic.type" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="none">None</a-select-option>
+            <a-select-option value="srtp">SRTP</a-select-option>
+            <a-select-option value="utp">uTP</a-select-option>
+            <a-select-option value="wechat-video">WeChat</a-select-option>
+            <a-select-option value="dtls">DTLS 1.2</a-select-option>
+            <a-select-option value="wireguard">WireGuard</a-select-option>
+        </a-select>
+    </a-form-item>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -1,11 +1,11 @@
 {{define "form/streamSettings"}}
 <!-- select stream network -->
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
    <a-form-item label='{{ i18n "transmission" }}'>
-        <a-select v-model="inbound.stream.network" @change="streamNetworkChange"
-            :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100px;">
+        <a-select v-model="inbound.stream.network" style="width: 50%" @change="streamNetworkChange"
+            :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="kcp">mKCP</a-select-option>
            <a-select-option value="ws">WS</a-select-option>
            <a-select-option value="http">H2</a-select-option>
            <a-select-option value="quic">QUIC</a-select-option>
@@ -43,9 +43,8 @@
 <template v-if="inbound.stream.network === 'grpc'">
    {{template "form/streamGRPC"}}
 </template>
-
 <!-- sockopt -->
 <template>
    {{template "form/streamSockopt"}}
 </template>
-{{end}}
+{{end}}
--- 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-form layout="inline">
-    <a-form-item label="Transparent Proxy">
+<a-divider style="margin:5px 0 0;"></a-divider>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="TPROXY">
        <a-switch v-model="inbound.stream.sockoptSwitch"></a-switch>
    </a-form-item>
-    <table width="100%" class="ant-table-tbody" v-if="inbound.stream.sockoptSwitch">
-        <tr>
-            <td>Accept Proxy Protocol</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>TCP FastOpen</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <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>
+    <template v-if="inbound.stream.sockoptSwitch">
+        <a-form-item label="PROXY Protocol">
+            <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
+        </a-form-item>
+        <a-form-item label="TCP Fast Open">
+            <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
+        </a-form-item>
+        <a-form-item label="Route Mark">
+            <a-input-number v-model="inbound.stream.sockopt.mark" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="TPROXY">
+            <a-select v-model="inbound.stream.sockopt.tproxy" :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">TPROXY</a-select-option>
+            </a-select>
+        </a-form-item>
+    </template>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -1,113 +1,82 @@
 {{define "form/streamTCP"}}
 <!-- tcp type -->
-<a-form layout="inline">
-    <a-form-item label="Accept Proxy Protocol" v-if="inbound.canEnableTls()">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="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-switch
-                :checked="inbound.stream.tcp.type === 'http'"
-                @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
+        <a-switch :checked="inbound.stream.tcp.type === 'http'"
+            @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">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.request.version" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.requestMethod" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.request.method" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td style="vertical-align: top; padding-top: 10px;">{{ i18n "pages.inbounds.stream.tcp.requestPath" }}
-                <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-row v-for="(path, index) in inbound.stream.tcp.request.path">
-                        <a-input v-model.trim="inbound.stream.tcp.request.path[index]" style="width: 200px;">
-                            <a-button size="small" slot="addonAfter"
-                            @click="inbound.stream.tcp.request.removePath(index)"
-                            v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
-                        </a-input>
-                    </a-row>
-                </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>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.response.version" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatus" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.response.status" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatusDescription" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.response.reason" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2" width="100%">
-                <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 v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }"
+    :wrapper-col="{ md: {span:14} }">
+    <!-- tcp request -->
+    <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
+            <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
+        </template>
+        <template v-for="(path, index) in inbound.stream.tcp.request.path">
+            <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
+                <a-button size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)"
+                    v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
+            </a-input>
+        </template>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+        <a-button size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')">+</a-button>
+    </a-form-item>
+    <a-form-item :wrapper-col="{span:24}">
+        <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>
+
+    <!-- tcp response -->
+    <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
+        <a-button size="small"
+            @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">+</a-button>
+    </a-form-item>
+    <a-form-item :wrapper-col="{span:24}">
+        <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>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/web/html/xui/form/stream/stream_ws.html
@@ -1,30 +1,23 @@
 {{define "form/streamWS"}}
-<a-form layout="inline">
-    <a-form-item label="AcceptProxyProtocol">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="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>
-        <a-row>
-            <span>{{ i18n "pages.inbounds.stream.general.requestHeader" }}:</span>
-            <a-button type="primary" size="small" style="margin-left: 10px"
-                @click="inbound.stream.ws.addHeader('Host', '')">+</a-button>
-        </a-row>
-        <a-input-group v-for="(header, index) in inbound.stream.ws.headers">
-            <a-input style="width: 50%" v-model.trim="header.name"
-                addon-before='{{ i18n "pages.inbounds.stream.general.name"}}'></a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
-                addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <template slot="addonAfter">
-                    <a-button type="primary" size="small" style="margin-left: 10px"
-                        @click="inbound.stream.ws.removeHeader(index)">-</a-button>
-                </template>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+        <a-button size="small" @click="inbound.stream.ws.addHeader('Host', '')">+</a-button>
+    </a-form-item>
+    <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-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.ws.removeHeader(index)">-</a-button>
            </a-input>
        </a-input-group>
    </a-form-item>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -1,395 +1,194 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
+<a-form v-if="inbound.canEnableTls()" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-divider style="margin:3px 0;"></a-divider>
+    <a-form-item label='{{ i18n "security" }}'>
+        <a-radio-group v-model="inbound.stream.security" button-style="solid">
+            <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.xtlsDesc" }}</span>
+                </template>
+                <a-radio-button v-if="inbound.canEnableXtls()" value="xtls">XTLS</a-radio-button>
+            </a-tooltip>
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.realityDesc" }}</span>
+                </template>
+                <a-radio-button v-if="inbound.canEnableReality()" value="reality">REALITY</a-radio-button>
+            </a-tooltip>
+            <a-radio-button value="tls">TLS</a-radio-button>
+        </a-radio-group>
+    </a-form-item>

-<a-form v-if="inbound.canEnableTls()" layout="inline">
-    <a-divider style="margin:0;"></a-divider>
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td colspan="2">
-                <a-form-item label='{{ i18n "security" }}'>
-                    <a-radio-group v-model="inbound.stream.security" button-style="solid">
-                        <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-                        <a-tooltip>
-                            <template slot="title">
-                                <span>{{ i18n "pages.inbounds.xtlsDesc" }}</span>
-                            </template>
-                            <a-radio-button v-if="inbound.canEnableXtls()" value="xtls">XTLS</a-radio-button>
-                        </a-tooltip>
-                        <a-tooltip>
-                            <template slot="title">
-                                <span>{{ i18n "pages.inbounds.realityDesc" }}</span>
-                            </template>
-                            <a-radio-button v-if="inbound.canEnableReality()" value="reality">Reality</a-radio-button>
-                        </a-tooltip>
-                        <a-radio-button value="tls">TLS</a-radio-button>
-                    </a-radio-group>
+    <!-- tls settings -->
+    <template v-if="inbound.stream.isTls">
+        <a-form-item label="SNI" placeholder="Server Name Indication">
+            <a-input v-model.trim="inbound.stream.tls.sni"></a-input>
+        </a-form-item>
+        <a-form-item label="Cipher Suites">
+            <a-select v-model="inbound.stream.tls.cipherSuites" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="">Auto</a-select-option>
+                <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[ value ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="Min/Max Version">
+            <a-input-group compact>
+                <a-select v-model="inbound.stream.tls.minVersion" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+                </a-select>
+                <a-select v-model="inbound.stream.tls.maxVersion" style="width: 50%" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+                </a-select>
+            </a-input-group>
+        </a-form-item>
+        <a-form-item label="uTLS">
+            <a-select v-model="inbound.stream.tls.settings.fingerprint" style="width: 50%"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+                <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>
+        <a-form-item label="ALPN">
+            <a-select mode="multiple" :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>
+        <a-form-item label="Allow Insecure">
+            <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
+        </a-form-item>
+        <a-form-item label="Reject Unknown SNI">
+            <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
+        </a-form-item>
+        <template v-for="cert,index in inbound.stream.tls.certs">
+            <a-form-item label='{{ i18n "certificate" }}'>
+                <a-radio-group v-model="cert.useFile" button-style="solid">
+                    <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+                    <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+                </a-radio-group>
+                <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.tls.addCert()"
+                    style="margin-left: 10px">+</a-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-form-item>
+            <template v-if="cert.useFile">
+                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+                    <a-input v-model.trim="cert.certFile"></a-input>
                </a-form-item>
-            </td>
-        </tr>
+                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+                    <a-input v-model.trim="cert.keyFile"></a-input>
+                </a-form-item>
+                <a-form-item label=" ">
+                    <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n
+                        "pages.inbounds.setDefaultCert" }}</a-button>
+                </a-form-item>
+            </template>
+            <template v-else>
+                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+                    <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+                    <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
+                </a-form-item>
+            </template>
+            <a-form-item label='OCSP stapling'>
+                <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
+            </a-form-item>
+        </template>
+    </template>

-        <!-- tls settings -->
-        <template v-if="inbound.stream.isTls">
-            <tr>
-                <td>SNI</td>
-                <td>
-                    <a-form-item placeholder="Server Name Indication">
-                        <a-input v-model.trim="inbound.stream.tls.sni" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>CipherSuites</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value="">auto</a-select-option>
-                            <a-select-option v-for="key,value in TLS_CIPHER_OPTION" 
-                            :value="key">[[ value]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Min/Max Version</td>
-                <td>
-                    <a-form-item>
-                        <a-input-group compact>
-                            <a-select style="width: 125px" v-model="inbound.stream.tls.minVersion"
-                                :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option v-for="key in TLS_VERSION_OPTION" 
-                                :value="key">[[ key ]]</a-select-option>
-                            </a-select>
-                            <a-select style="width: 125px" v-model="inbound.stream.tls.maxVersion"
-                                :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option v-for="key in TLS_VERSION_OPTION" 
-                                :value="key">[[ key ]]</a-select-option>
-                            </a-select>
-                        </a-input-group>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>uTLS</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="inbound.stream.tls.settings.fingerprint" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <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>
-                    <td>{{ i18n "certificate" }}</td>
-                    <td>
-                        <a-form-item>
-                            <a-radio-group v-model="cert.useFile" button-style="solid">
-                                <a-radio-button 
-                                    :value="true">{{ i18n "pages.inbounds.certificatePath"}}
-                                </a-radio-button>
-                                <a-radio-button 
-                                    :value="false">{{ i18n "pages.inbounds.certificateContent"}}
-                                </a-radio-button>
-                            </a-radio-group>
-                            <a-button v-if="index === 0" type="primary" size="small"
-                                @click="inbound.stream.tls.addCert()" style="margin-left: 10px">+</a-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-form-item>
-                    </td>
-                </tr>
-                <template v-if="cert.useFile">
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.publicKeyPath" }}</td>
-                        <td>
-                            <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>
-                        <td>{{ i18n "pages.inbounds.publicKeyContent" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
-                            </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>
-                    <td>ocspStapling</td>
-                    <td>
-                        <a-form-item>
-                            <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
-                        </a-form-item>
-                    </td>
-                </tr>
+    <!-- xtls settings -->
+    <template v-else-if="inbound.xtls">
+        <a-form-item label="SNI" placeholder="Server Name Indication">
+            <a-input v-model.trim="inbound.stream.xtls.sni"></a-input>
+        </a-form-item>
+        <a-form-item label="ALPN">
+            <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme"
+                v-model="inbound.stream.xtls.alpn">
+                <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="Allow Insecure">
+            <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
+        </a-form-item>
+        <template v-for="cert,index in inbound.stream.xtls.certs">
+            <a-form-item label='{{ i18n "certificate" }}'>
+                <a-radio-group v-model="cert.useFile" button-style="solid">
+                    <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+                    <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+                </a-radio-group>
+                <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.xtls.addCert()"
+                    style="margin-left: 10px">+</a-button>
+                <a-button v-if="inbound.stream.xtls.certs.length>1" type="primary" size="small"
+                    @click="inbound.stream.xtls.removeCert(index)" style="margin-left: 10px">-</a-button>
+            </a-form-item>
+            <template v-if="cert.useFile">
+                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+                    <a-input v-model.trim="cert.certFile"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+                    <a-input v-model.trim="cert.keyFile"></a-input>
+                </a-form-item>
+                <a-form-item label=" ">
+                    <a-button type="primary" icon="import" @click="setDefaultCertXtls(index)">{{ i18n
+                        "pages.inbounds.setDefaultCert" }}</a-button>
+                </a-form-item>
+            </template>
+            <template v-else>
+                <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+                    <a-input type="textarea" :rows="3" v-model="cert.cert"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'> 
+                    <a-input type="textarea" :rows="3" v-model="cert.key"></a-input>
+                </a-form-item>
            </template>
        </template>
-
-        <!-- xtls settings -->
-        <template v-else-if="inbound.xtls">
-            <tr>
-                <td>
-                    <span>SNI</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.xtls.server" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Alpn</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-select mode="multiple" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme"
-                            v-model="inbound.stream.xtls.alpn">
-                            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Allow insecure</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
-            <template v-for="cert,index in inbound.stream.xtls.certs">
-                <tr>
-                    <td>{{ i18n "certificate" }}</td>
-                    <td>
-                        <a-form-item>
-                            <a-radio-group v-model="cert.useFile" button-style="solid">
-                                <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath"
-                                    }}</a-radio-button>
-                                <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent"
-                                    }}</a-radio-button>
-                            </a-radio-group>
-                            <a-button v-if="index === 0" type="primary" size="small"
-                                @click="inbound.stream.xtls.addCert()" style="margin-left: 10px">+</a-button>
-                            <a-button v-if="inbound.stream.xtls.certs.length>1" type="primary" size="small"
-                                @click="inbound.stream.xtls.removeCert(index)" style="margin-left: 10px">-</a-button>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <template v-if="cert.useFile">
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.publicKeyPath" }}</td>
-                        <td>
-                            <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>
-                        <td>{{ i18n "pages.inbounds.publicKeyContent" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
-                            </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>
+    </template>
+    <!-- reality settings -->
+    <template v-if="inbound.stream.isReality">
+        <a-form-item label='Show'>
+            <a-switch v-model="inbound.stream.reality.show"></a-switch>
+        </a-form-item>
+        <a-form-item label='Xver'>
+            <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label='uTLS'>
+            <a-select v-model="inbound.stream.reality.settings.fingerprint" style="width: 50%"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model.trim="inbound.stream.reality.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='SNI'>
+            <a-input v-model.trim="inbound.stream.reality.serverNames"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "reset" }}</span>
+                    </template>
+                    Short ID
+                    <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()" type="sync"> </a-icon>
+                    </a-icon>
            </template>
-        </template>
-
-        <!-- reality settings -->
-        <template v-else-if="inbound.reality">
-            <tr>
-                <td>
-                    <span>Show</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="inbound.stream.reality.show"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>xVer</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="inbound.stream.reality.xver" :min="0"
-                            style="width: 60px"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>uTLS</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="inbound.stream.reality.settings.fingerprint" style="width: 135px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Dest</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.dest" style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Server Names</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.serverNames" style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>ShortIds</span> <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()"
-                        type="sync"> </a-icon>
-                </td>
-                <td>
-                    <a-form-item>
-
-                        <a-input v-model.trim="inbound.stream.reality.shortIds" style="width: 150px;"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>SpiderX</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width: 150px;"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Private Key</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.privateKey" style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Public Key</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.settings.publicKey"
-                            style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Key</a-button>
-                </td>
-            </tr>
-        </template>
-    </table>
+            <a-input v-model.trim="inbound.stream.reality.shortIds"></a-input>
+        </a-form-item>
+        <a-form-item label='SpiderX'>
+            <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
+            <a-input v-model.trim="inbound.stream.reality.privateKey"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
+            <a-input v-model.trim="inbound.stream.reality.settings.publicKey"></a-input>
+        </a-form-item>
+        <a-form-item label=" ">
+            <a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Cert</a-button>
+        </a-form-item>
+    </template>
 </a-form>
-{{end}}
+{{end}}
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -19,7 +19,7 @@
            :overlay-class-name="themeSwitcher.currentTheme"
            ok-text='{{ i18n "reset"}}'
            cancel-text='{{ i18n "cancel"}}'>
-            <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: #3c89e8' : 'color: blue'"></a-icon>
+            <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: #008771' : 'color: #008771'"></a-icon>
            <a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
        </a-popconfirm>
    </a-tooltip>
@@ -40,7 +40,7 @@
    <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
 </template>   
 <template slot="online" slot-scope="text, client, index">
-    <template v-if="isClientOnline(client.email)">
+    <template v-if="client.enable && isClientOnline(client.email)">
        <a-tag color="green">{{ i18n "online" }}</a-tag>
    </template>
    <template v-else>
@@ -52,7 +52,7 @@
        <template slot="title">
            <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
            <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
-            <template v-else-if="isClientOnline(client.email)">{{ i18n "online" }}</template>
+            <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
        </template>
    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'">
    </a-badge>
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -3,72 +3,89 @@
    v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
    :closable="true"
    :mask-closable="true"
-    :class="themeSwitcher.currentTheme"
    :footer="null"
    width="600px"
+    :class="themeSwitcher.currentTheme"
    >
-    <table style="margin-bottom: 10px; width: 100%;">
-        <tr><td>
-                <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.port" }}</td><td><a-tag>[[ dbInbound.port ]]</a-tag></td></tr>
-                </table>
-            </td>
-            <td v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                <table>
-                    <tr>
-                        <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
-                    </tr>
-                    <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-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-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td>
-                        </tr>
-                    </template>
-
-                    <template v-if="inbound.isQuic">
-                        <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.quicSecurity ]]</a-tag></td></tr>
-                        <tr><td>quic {{ i18n "password" }}</td><td><a-tag>[[ inbound.quicKey ]]</a-tag></td></tr>
-                        <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag>[[ inbound.quicType ]]</a-tag></td></tr>
-                    </template>
-        
-                    <template v-if="inbound.isKcp">
-                        <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.kcpType ]]</a-tag></td></tr>
-                        <tr><td>kcp {{ i18n "password" }}</td><td><a-tag>[[ inbound.kcpSeed ]]</a-tag></td></tr>
-                    </template>
-        
-                    <template v-if="inbound.isGrpc">
-                        <tr><td>grpc serviceName</td><td><a-tag>[[ inbound.serviceName ]]</a-tag></td></tr>
-                        <tr><td>grpc multiMode</td><td><a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
-                    </template>
-                </table>
-            </td></tr>
-        <tr colspan="2" v-if="dbInbound.hasLink()">
-            <td>
-                {{ i18n "security" }}
-                <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'blue'">[[ inbound.stream.security ]]</a-tag>
-                <br />
-                <template v-if="inbound.stream.security != 'none'">
-                {{ i18n "domainName" }}
-                <a-tag :color="inbound.serverName ? 'blue' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-                </template>
-            </td>
-        </tr>
-    </table>
+    <a-row>
+        <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-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>
+        </a-col>
+        <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="green">[[ inbound.network ]]</a-tag></td>
+                </tr>
+            <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
+                <tr>
+                    <td>{{ i18n "host" }}</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-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>
+            
+            <template v-if="inbound.isQuic">
+                <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.quicSecurity ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "password" }}</td><td><a-tag>[[ inbound.quicKey ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag>[[ inbound.quicType ]]</a-tag></td></tr>
+            </template>
+            
+            <template v-if="inbound.isKcp">
+                <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.kcpType ]]</a-tag></td></tr>
+                <tr><td>kcp {{ i18n "password" }}</td><td><a-tag>[[ inbound.kcpSeed ]]</a-tag></td></tr>
+            </template>
+            
+            <template v-if="inbound.isGrpc">
+                <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>
+        </template>
+        </a-col>
+        <template v-if="dbInbound.hasLink()">
+            {{ i18n "security" }}
+            <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
+            <br />
+            <template v-if="inbound.stream.security != 'none'">
+            {{ i18n "domainName" }}
+            <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+            </template>
+        </template>
    <table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;">
        <tr>
            <td>{{ i18n "encryption" }}</td>
            <td><a-tag color="green">[[ 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="green">[[ inbound.settings.network ]]</a-tag></td>
@@ -89,9 +106,17 @@
                <td>Flow</td>
                <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
            </tr>
+            <tr v-if="infoModal.inbound.xtls">
+                <td>Flow</td>
+                <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
+            </tr>
            <tr v-if="infoModal.clientSettings.password">
-                <td>Password</td>
-                <td><a-tag>[[ infoModal.clientSettings.password ]]</a-tag></td>
+                <td>{{ i18n "password" }}</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>
@@ -115,69 +140,79 @@
                <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
                <th>{{ i18n "pages.inbounds.expireDate" }}</th>
            </tr>
-        <tr>
-            <td>
-                <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
-                    [[ sizeFormat(infoModal.clientSettings.totalGB - infoModal.clientStats.up - infoModal.clientStats.down) ]]
-                </a-tag>
-            </td>
-            <td>
-                <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
-                    [[ sizeFormat(infoModal.clientSettings.totalGB) ]]
-                </a-tag>
-                <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
-            </td>
-            <td>
-                <template v-if="infoModal.clientSettings.expiryTime > 0">
-                    <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
-                        [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
+            <tr>
+                <td>
+                    <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+                        [[ sizeFormat(infoModal.clientSettings.totalGB - infoModal.clientStats.up - infoModal.clientStats.down) ]]
                    </a-tag>
-                </template>
-                <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
-                <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
-            </td>
-        </tr>
-    </table>
-    <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 :span="2">
-                <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>
-                    </button>
-                </a-tooltip>
-            </a-col>
-        </a-row>
+                </td>
+                <td>
+                    <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+                        [[ sizeFormat(infoModal.clientSettings.totalGB) ]]
+                    </a-tag>
+                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
+                </td>
+                <td>
+                    <template v-if="infoModal.clientSettings.expiryTime > 0">
+                        <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
+                            [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
+                        </a-tag>
+                    </template>
+                    <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
+                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
+                </td>
+            </tr>
+        </table>
+        <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
+            <a-divider>Subscription URL</a-divider>
+            <a-row>
+                <a-col :sx="24" :md="22">SUB: <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a></a-col>
+                <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>
+                        </button>
+                    </a-tooltip>
+                </a-col>
+            </a-row>
+            <a-row>
+                <a-col :sx="24" :md="22">JSON: <a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[ infoModal.subJsonLink ]]</a></a-col>
+                <a-col :sx="24" :md="2" style="text-align: right; margin-top: 5px;">
+                    <a-tooltip title='{{ i18n "copy" }}'>
+                        <button class="ant-btn ant-btn-primary" id="copy-subJson-link" @click="copyToClipboard('copy-subJson-link', infoModal.subJsonLink)">
+                            <a-icon type="snippets"></a-icon>
+                        </button>
+                    </a-tooltip>
+                </a-col>
+            </a-row>
+        </template>
+        <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
+            <a-divider>Telegram ID</a-divider>
+            <a-row>
+                <a-col :sx="24" :md="22">[[ infoModal.clientSettings.tgId ]]</a-col>
+                <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>
+                        </button>
+                    </a-tooltip>
+                </a-col>
+            </a-row>
+        </template>
+        <template v-if="dbInbound.hasLink()">
+            <a-divider>URL</a-divider>
+            <a-row v-for="(link,index) in infoModal.links">
+                <a-col :sx="24" :md="22"><a-tag color="green">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+                <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>
+                        </button>
+                    </a-tooltip>
+                </a-col>
+            </a-row>
+        </template>
    </template>
-    <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
-        <a-divider>Telegram Username</a-divider>
-        <a-row>
-            <a-col :span="22"><a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></a-col>
-            <a-col :span="2">
-                <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>
-                    </button>
-                </a-tooltip>
-            </a-col>
-        </a-row>
-    </template>
-    <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="green">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
-            <a-col :span="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>
-                    </button>
-                </a-tooltip>
-            </a-col>
-        </a-row>
-    </template>
-</template>
    <template v-else>
        <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
            <a-divider>URL</a-divider>
@@ -217,7 +252,7 @@
                <td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td>
            </tr>
            <template v-if="inbound.settings.auth == 'password'">
-                <tr>
+            <tr>
                <td> </td>
                <td>{{ i18n "username" }}</td>
                <td>{{ i18n "password" }}</td>
@@ -226,9 +261,9 @@
                <td><a-tag color="green">[[ account.user ]]</a-tag></td>
                <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
            </tr>
-        </template>
-    </table>
-    <table v-if="dbInbound.isHTTP" style="margin-bottom: 10px; width: 100%;">
+            </template>
+        </table>
+        <table v-if="dbInbound.isHTTP" style="margin-bottom: 10px; width: 100%;">
            <tr>
                <th> </th>
                <th>{{ i18n "username" }}</th>
@@ -239,6 +274,71 @@
                <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
            </tr>
        </table>
+        <table v-if="dbInbound.isWireguard" style="margin-bottom: 10px; width: 100%;">
+            <tr class="client-table-odd-row">
+                <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
+                <td>[[ inbound.settings.secretKey ]]</td>
+            </tr>
+            <tr>
+                <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
+                <td>[[ inbound.settings.pubKey ]]</td>
+            </tr>
+            <tr class="client-table-odd-row">
+                <td>MTU</td>
+                <td>[[ inbound.settings.mtu ]]</td>
+            </tr>
+            <tr>
+                <td>Kernel Mode</td>
+                <td>[[ inbound.settings.kernelMode ]]</td>
+            </tr>
+        <template v-for="(peer, index) in inbound.settings.peers">
+            <tr>
+                <td colspan="2"><a-divider>Peer [[ index + 1 ]]</a-divider></td>
+            </tr>
+            <tr class="client-table-odd-row">
+                <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
+                <td>[[ peer.privateKey ]]</td>
+            </tr>
+            <tr>
+                <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
+                <td>[[ peer.publicKey ]]</td>
+            </tr>
+            <tr class="client-table-odd-row">
+                <td>{{ i18n "pages.xray.wireguard.psk" }}</td>
+                <td>[[ peer.psk ]]</td>
+            </tr>
+            <tr>
+                <td>{{ i18n "pages.xray.wireguard.allowedIPs" }}</td>
+                <td>[[ peer.allowedIPs.join(",") ]]</td>
+            </tr>
+            <tr class="client-table-odd-row">
+                <td>Keep Alive</td>
+                <td>[[ peer.keepAlive ]]</td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <a-row>
+                        <a-col :span="22" style="overflow-wrap: anywhere;">
+                            <a-tag color="blue">Config</a-tag>
+                            <div 
+                            v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)"
+                            style="border-radius: 1rem; padding: 0.5rem;"
+                            class="client-table-odd-row"></div>
+                        </a-col>
+                        <a-col :span="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, infoModal.links[index])">
+                                    <a-icon type="snippets"></a-icon>
+                                </button>
+                            </a-tooltip>
+                        </a-col>
+                    </a-row>
+                </td>
+            </tr>
+        </table>
+        </template>
    </template>
 </a-modal>
 <script>
@@ -246,7 +346,6 @@
        visible: false,
        inbound: new Inbound(),
        dbInbound: new DBInbound(),
-        settings: null,
        clientSettings: null,
        clientStats: [],
        upStats: 0,
@@ -256,7 +355,7 @@
        index: null,
        isExpired: false,
        subLink: '',
-        tgLink: '',
+        subJsonLink: '',
        show(dbInbound, index) {
            this.index = index;
            this.inbound = dbInbound.toInbound();
@@ -264,13 +363,15 @@
            this.clientSettings = this.inbound.clients ? this.inbound.clients[index] : null;
            this.isExpired = this.inbound.clients ? this.inbound.isExpiry(index): this.dbInbound.isExpiry;
            this.clientStats = this.inbound.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
-            this.links = this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, this.clientSettings);
+            if (this.inbound.protocol == Protocols.WIREGUARD){
+                this.links = this.inbound.genInboundLinks(dbInbound.remark).split('\r\n')
+            } else {
+                this.links = this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, this.clientSettings);
+            }
            if (this.clientSettings) {
                if (this.clientSettings.subId) {
                    this.subLink = this.genSubLink(this.clientSettings.subId);
-                }
-                if (this.clientSettings.tgId) {
-                    this.tgLink = "https://t.me/" + this.clientSettings.tgId;
+                    this.subJsonLink = this.genSubJsonLink(this.clientSettings.subId);
                }
            }
            this.visible = true;
@@ -279,7 +380,10 @@
            infoModal.visible = false;
        },
        genSubLink(subID) {
-            return app.subSettings.subURI+subID+'?name='+subID;
+            return app.subSettings.subURI+subID;
+        },
+        genSubJsonLink(subID) {
+            return app.subSettings.subJsonURI+subID;
        }
    };

@@ -295,24 +399,24 @@
                return this.infoModal.inbound;
            },
            get isActive() {
-                if (infoModal.clientStats) {
+                if(infoModal.clientStats){
                    return infoModal.clientStats.enable;
                }
                return true;
            },
            get isEnable() {
-                if (infoModal.clientSettings) {
+                if(infoModal.clientSettings){
                    return infoModal.clientSettings.enable;
                }
                return infoModal.dbInbound.isEnable;
            },
        },
        methods: {
-            copyToClipboard(elmentId, content) {
+            copyToClipboard(elmentId,content) {
                this.infoModal.clipboard = new ClipboardJS('#' + elmentId, {
-                    text: () => content,
-                });
-                this.infoModal.clipboard.on('success', () => {
+                        text: () => content,
+                    });
+                this.infoModal.clipboard.on('success', () => { 
                    app.$message.success('{{ i18n "copied" }}')
                    this.infoModal.clipboard.destroy();
                });
@@ -321,7 +425,8 @@
                return usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
            }
        },
+        
    });

 </script>
-{{end}}
+{{end}}
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -40,7 +40,7 @@
            inModal.visible = false;
            inModal.loading(false);
        },
-        loading(loading) {
+        loading(loading=true) {
            inModal.confirmLoading = loading;
        },
    };
@@ -63,6 +63,9 @@
            get client() {
                return inModal.inbound.clients[0];
            },
+            get datepicker() {
+                return app.datepicker;
+            },
            get delayedExpireDays() {
                return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
            },
@@ -98,6 +101,11 @@
                        client.flow = "";
                    });
                }
+                if ((this.inModal.inbound.protocol == Protocols.VLESS || this.inModal.inbound.protocol == Protocols.TROJAN) && !inModal.inbound.xtls) {
+                    this.inModal.inbound.settings.vlesses.forEach(client => {
+                        client.flow = "";
+                    });
+                }
            },
            SSMethodChange() {
                if (this.inModal.inbound.isSSMultiUser) {
--- 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>
@@ -52,9 +56,13 @@
        <a-layout-content>
            <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
                <transition name="list" appear>
-                    <a-tag v-if="false" color="red" style="margin-bottom: 10px">
-                        Please go to the panel settings as soon as possible to modify the username and password, otherwise there may be a risk of leaking account information
-                    </a-tag>
+                    <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
+                    message='{{ i18n "secAlertTitle" }}'
+                    color="red"
+                    description='{{ i18n "secAlertSsl" }}'
+                    show-icon closable
+                    >
+                    </a-alert>
                </transition>
                <transition name="list" appear>
                    <a-card hoverable>
@@ -129,6 +137,10 @@
                                                <a-icon type="export"></a-icon>
                                                {{ i18n "pages.inbounds.export" }}
                                            </a-menu-item>
+                                            <a-menu-item key="subs" v-if="subSettings.enable">
+                                                <a-icon type="export"></a-icon>
+                                                {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }}
+                                            </a-menu-item>
                                            <a-menu-item key="resetInbounds">
                                                <a-icon type="reload"></a-icon>
                                                {{ i18n "pages.inbounds.resetAllTraffic" }}
@@ -137,7 +149,7 @@
                                                <a-icon type="file-done"></a-icon>
                                                {{ i18n "pages.inbounds.resetAllClientTraffics" }}
                                            </a-menu-item>
-                                            <a-menu-item key="delDepletedClients">
+                                            <a-menu-item key="delDepletedClients" style="color: #FF4D4F;">
                                                <a-icon type="rest"></a-icon>
                                                {{ i18n "pages.inbounds.delDepletedClients" }}
                                            </a-menu-item>
@@ -157,9 +169,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>
@@ -174,7 +186,7 @@
                            </a-radio-group>
                        </div>
                        <a-back-top></a-back-top>
-                        <a-table :columns="isMobile ? mobileColums : columns" :row-key="dbInbound => dbInbound.id"
+                        <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
                                 :data-source="searchedInbounds"
                                 :scroll="isMobile ? {} : { x: 1000 }"
                                 :pagination=pagination(searchedInbounds)
@@ -192,7 +204,7 @@
                                            <a-icon type="edit"></a-icon>
                                            {{ i18n "edit" }}
                                        </a-menu-item>
-                                        <a-menu-item key="qrcode" v-if="dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser">
+                                        <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
                                            <a-icon type="qrcode"></a-icon>
                                            {{ i18n "qrCode" }}
                                        </a-menu-item>
@@ -213,7 +225,11 @@
                                                <a-icon type="export"></a-icon>
                                                {{ i18n "pages.inbounds.export"}}
                                            </a-menu-item>
-                                            <a-menu-item key="delDepletedClients">
+                                            <a-menu-item key="subs" v-if="subSettings.enable">
+                                                <a-icon type="export"></a-icon>
+                                                {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}
+                                            </a-menu-item>
+                                            <a-menu-item key="delDepletedClients" style="color: #FF4D4F;">
                                                <a-icon type="rest"></a-icon>
                                                {{ i18n "pages.inbounds.delDepletedClients" }}
                                            </a-menu-item>
@@ -226,7 +242,7 @@
                                        </template>
                                        <a-menu-item key="clipboard">
                                            <a-icon type="copy"></a-icon>
-                                            {{ i18n "pages.inbounds.copyToClipboard" }}
+                                            {{ i18n "pages.inbounds.exportInbound" }}
                                        </a-menu-item>
                                        <a-menu-item key="resetTraffic">
                                            <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
@@ -240,7 +256,7 @@
                                            </span>
                                        </a-menu-item>
                                        <a-menu-item v-if="isMobile">
-                                            <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
+                                            <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
                                            {{ i18n "pages.inbounds.enable" }}
                                        </a-menu-item>
                                    </a-menu>
@@ -310,7 +326,7 @@
                                </a-popover>
                            </template>
                            <template slot="enable" slot-scope="text, dbInbound">
-                                <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
+                                <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
                            </template>
                            <template slot="expiryTime" slot-scope="text, dbInbound">
                                <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
@@ -423,7 +439,7 @@
                                    :columns="isMobile ? innerMobileColumns : innerColumns"
                                    :data-source="getInboundClients(record)"
                                    :pagination=pagination(getInboundClients(record))
-                                    style="margin: -12px -6px -13px;">
+                                    :style="isMobile ? 'margin: -12px 2px -13px;' : 'margin: -12px 22px -13px;'">
                                    {{template "client_table"}}
                                </a-table>
                            </template>
@@ -442,27 +458,28 @@
 <script src="{{ .base_path }}assets/js/model/xray.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
 {{template "component/themeSwitcher" .}}
+{{template "component/persianDatepicker" .}}
 <script>
    const columns = [{
        title: "ID",
        align: 'right',
        dataIndex: "id",
-        width: 40,
+        width: 30,
        responsive: ["xs"],
    }, {
        title: '{{ i18n "pages.inbounds.operate" }}',
        align: 'center',
-        width: 40,
+        width: 30,
        scopedSlots: { customRender: 'action' },
    }, {
        title: '{{ i18n "pages.inbounds.enable" }}',
        align: 'center',
-        width: 40,
+        width: 30,
        scopedSlots: { customRender: 'enable' },
    }, {
        title: '{{ i18n "pages.inbounds.remark" }}',
        align: 'center',
-        width: 80,
+        width: 60,
        dataIndex: "remark",
    }, {
        title: '{{ i18n "pages.inbounds.port" }}',
@@ -472,7 +489,7 @@
    }, {
        title: '{{ i18n "pages.inbounds.protocol" }}',
        align: 'left',
-        width: 90,
+        width: 70,
        scopedSlots: { customRender: 'protocol' },
    }, {
        title: '{{ i18n "clients" }}',
@@ -487,11 +504,11 @@
    }, {
        title: '{{ i18n "pages.inbounds.expireDate" }}',
        align: 'center',
-        width: 60,
+        width: 40,
        scopedSlots: { customRender: 'expiryTime' },
    }];

-    const mobileColums = [{
+    const mobileColumns = [{
        title: "ID",
        align: 'right',
        dataIndex: "id",
@@ -535,6 +552,7 @@
        data: {
            siderDrawer,
            themeSwitcher,
+            persianDatepicker,
            spinning: false,
            inbounds: [],
            dbInbounds: [],
@@ -553,10 +571,13 @@
            refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
            subSettings: {
                enable : false,
-                subURI : ''
+                subURI : '',
+                subJsonURI : '',
            },
            remarkModel: '-ieo',
+            datepicker: 'gregorian',
            tgBotEnable: false,
+            showAlert: false,
            pageSize: 0,
            isMobile: window.innerWidth <= 768,
        },
@@ -571,6 +592,7 @@
                    this.refreshing = false;
                    return;
                }
+
                await this.getOnlineUsers();
                this.setInbounds(msg.obj);
                setTimeout(() => {
@@ -597,10 +619,12 @@
                    this.tgBotEnable = tgBotEnable;
                    this.subSettings = {
                        enable : subEnable,
-                        subURI: subURI
+                        subURI: subURI,
+                        subJsonURI: subJsonURI
                    };
                    this.pageSize = pageSize;
                    this.remarkModel = remarkModel;
+                    this.datepicker = datepicker;
                }
            },
            setInbounds(dbInbounds) {
@@ -634,8 +658,12 @@
                    clientCount = clients.length;
                    if (dbInbound.enable) {
                        clients.forEach(client => {
-                            client.enable ? active.push(client.email) : deactive.push(client.email);
-                            if(this.isClientOnline(client.email)) online.push(client.email);
+                            if (client.enable) {
+                                active.push(client.email);
+                                if (this.isClientOnline(client.email)) online.push(client.email);
+                            } else {
+                                deactive.push(client.email);
+                            }
                        });
                        clientStats.forEach(client => {
                            if (!client.enable) {
@@ -660,6 +688,7 @@
                    online: online,
                };
            },
+
            searchInbounds(key) {
                if (ObjectUtil.isEmpty(key)) {
                    this.searchedInbounds = this.dbInbounds.slice();
@@ -723,6 +752,9 @@
                    case "export":
                        this.exportAllLinks();
                        break;
+                    case "subs":
+                        this.exportAllSubs();
+                        break;
                    case "resetInbounds":
                        this.resetAllTraffic();
                        break;
@@ -754,6 +786,9 @@
                    case "export":
                        this.inboundLinks(dbInbound.id);
                        break;
+                    case "subs":
+                        this.exportSubs(dbInbound.id);
+                        break;
                    case "clipboard":
                        this.copyToClipboard(dbInbound.id);
                        break;
@@ -803,7 +838,7 @@
                    protocol: baseInbound.protocol,
                    settings: Inbound.Settings.getSettings(baseInbound.protocol).toString(),
                    streamSettings: baseInbound.stream.toString(),
-                    sniffing: baseInbound.canSniffing() ? baseInbound.sniffing.toString() : '{}',
+                    sniffing: baseInbound.sniffing.toString(),
                };
                await this.submit('/panel/inbound/add', data, inModal);
            },
@@ -813,9 +848,7 @@
                    okText: '{{ i18n "pages.inbounds.create"}}',
                    cancelText: '{{ i18n "close" }}',
                    confirm: async (inbound, dbInbound) => {
-                        inModal.loading();
-                        await this.addInbound(inbound, dbInbound);
-                        inModal.close();
+                        await this.addInbound(inbound, dbInbound, inModal);
                    },
                    isEdit: false
                });
@@ -830,9 +863,7 @@
                    inbound: inbound,
                    dbInbound: dbInbound,
                    confirm: async (inbound, dbInbound) => {
-                        inModal.loading();
                        await this.updateInbound(inbound, dbInbound);
-                        inModal.close();
                    },
                    isEdit: true
                });
@@ -852,7 +883,7 @@
                    settings: inbound.settings.toString(),
                };
                if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
-                if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
+                data.sniffing = inbound.sniffing.toString();

                await this.submit('/panel/inbound/add', data, inModal);
            },
@@ -871,7 +902,7 @@
                    settings: inbound.settings.toString(),
                };
                if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
-                if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
+                data.sniffing = inbound.sniffing.toString();

                await this.submit(`/panel/inbound/update/${dbInbound.id}`, data, inModal);
            },
@@ -882,9 +913,7 @@
                    okText: '{{ i18n "pages.client.submitAdd"}}',
                    dbInbound: dbInbound,
                    confirm: async (clients, dbInboundId) => {
-                        clientModal.loading();
-                        await this.addClient(clients, dbInboundId);
-                        clientModal.close();
+                        await this.addClient(clients, dbInboundId, clientModal);
                    },
                    isEdit: false
                });
@@ -896,9 +925,7 @@
                    okText: '{{ i18n "pages.client.bulk"}}',
                    dbInbound: dbInbound,
                    confirm: async (clients, dbInboundId) => {
-                        clientsBulkModal.loading();
-                        await this.addClient(clients, dbInboundId);
-                        clientsBulkModal.close();
+                        await this.addClient(clients, dbInboundId, clientsBulkModal);
                    },
                });
            },
@@ -927,19 +954,19 @@
                    default: return clients.findIndex(item => item.id === client.id && item.email === client.email);
                }
            },
-            async addClient(clients, dbInboundId) {
+            async addClient(clients, dbInboundId, modal) {
                const data = {
                    id: dbInboundId,
                    settings: '{"clients": [' + clients.toString() + ']}',
                };
-                await this.submit(`/panel/inbound/addClient`, data);
+                await this.submit(`/panel/inbound/addClient`, data, modal);
            },
            async updateClient(client, dbInboundId, clientId) {
                const data = {
                    id: dbInboundId,
                    settings: '{"clients": [' + client.toString() + ']}',
                };
-                await this.submit(`/panel/inbound/updateClient/${clientId}`, data);
+                await this.submit(`/panel/inbound/updateClient/${clientId}`, data, clientModal);
            },
            resetTraffic(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
@@ -959,7 +986,7 @@
            },
            delInbound(dbInboundId) {
                this.$confirm({
-                    title: '{{ i18n "pages.inbounds.deleteInbound"}}',
+                    title: '{{ i18n "pages.inbounds.deleteInbound"}}' + ' #' + dbInboundId,
                    content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
                    class: themeSwitcher.currentTheme,
                    okText: '{{ i18n "delete"}}',
@@ -972,7 +999,7 @@
                clientId = this.getClientId(dbInbound.protocol, client);
                if (confirmation){
                    this.$confirm({
-                        title: '{{ i18n "pages.inbounds.deleteClient"}}',
+                        title: '{{ i18n "pages.inbounds.deleteClient"}}' + ' ' + client.email,
                        content: '{{ i18n "pages.inbounds.deleteClientContent"}}',
                        class: themeSwitcher.currentTheme,
                        okText: '{{ i18n "delete"}}',
@@ -1026,8 +1053,9 @@
                newDbInbound = this.checkFallback(dbInbound);
                infoModal.show(newDbInbound, index);
            },
-            switchEnable(dbInboundId) {
+            switchEnable(dbInboundId,state) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                dbInbound.enable = state;
                this.submit(`/panel/inbound/update/${dbInboundId}`, dbInbound);
            },
            async switchEnableClient(dbInboundId, client) {
@@ -1041,8 +1069,8 @@
                await this.updateClient(clients[index], dbInboundId, clientId);
                this.loading(false);
            },
-            async submit(url, data) {
-                const msg = await HttpUtil.postWithModal(url, data);
+            async submit(url, data, modal) {
+                const msg = await HttpUtil.postWithModal(url, data, modal);
                if (msg.success) {
                    await this.getDBInbounds();
                }
@@ -1089,7 +1117,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('/panel/inbound/delDepletedClients/' + dbInboundId),
                })
@@ -1177,6 +1205,22 @@
                newDbInbound = this.checkFallback(dbInbound);
                txtModal.show('{{ i18n "pages.inbounds.export"}}', newDbInbound.genInboundLinks(), newDbInbound.remark);
            },
+            exportSubs(dbInboundId) {
+                const dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                const clients = this.getInboundClients(dbInbound);
+                let subLinks = []
+                if (clients != null){
+                    clients.forEach(c => {
+                        if (c.subId && c.subId.length>0){
+                            subLinks.push(this.subSettings.subURI + c.subId + "?name=" + c.subId)
+                        }
+                    })
+                }
+                txtModal.show(
+                    '{{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}',
+                    [...new Set(subLinks)].join('\n'),
+                    dbInbound.remark + "-Subs");
+            },
            importInbound() {
                promptModal.open({
                    title: '{{ i18n "pages.inbounds.importInbound" }}',
@@ -1185,10 +1229,26 @@
                    okText: '{{ i18n "pages.inbounds.import" }}',
                    confirm: async (dbInboundText) => {
                        await this.submit('/panel/inbound/import', {data: dbInboundText}, promptModal);
-                        promptModal.close();
                    },
                });
            },
+            exportAllSubs() {
+                let subLinks = []
+                for (const dbInbound of this.dbInbounds) {
+                    const clients = this.getInboundClients(dbInbound);
+                    if (clients != null){
+                        clients.forEach(c => {
+                            if (c.subId && c.subId.length>0){
+                                subLinks.push(this.subSettings.subURI + c.subId + "?name=" + c.subId)
+                            }
+                        })
+                    }
+                }
+                txtModal.show(
+                    '{{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}',
+                    [...new Set(subLinks)].join('\r\n'),
+                    'All-Inbounds-Subs');
+            },
            exportAllLinks() {
                let copyText = [];
                for (const dbInbound of this.dbInbounds) {
@@ -1229,7 +1289,7 @@
            pagination(obj){
                if (this.pageSize > 0 && obj.length>this.pageSize) {
                    // Set page options based on object size
-                    sizeOptions = []
+                    sizeOptions = [];
                    for (i=this.pageSize;i<=obj.length;i=i+this.pageSize) {
                        sizeOptions.push(i.toString());
                    }
@@ -1242,8 +1302,8 @@
                        position: 'bottom',
                        pageSize: this.pageSize,
                        pageSizeOptions: sizeOptions
-                    }
-                    return p
+                    };
+                    return p;
                }
                return false
            },
@@ -1257,6 +1317,9 @@
            }, 500)
        },
        mounted() {
+            if (window.location.protocol !== "https:") {
+                this.showAlert = true;
+            }
            window.addEventListener('resize', this.onResize);
            this.onResize();
            this.loading();
@@ -1294,7 +1357,6 @@
            }
        },
    });
-
 </script>

 {{template "inboundModal"}}
@@ -1304,6 +1366,5 @@
 {{template "inboundInfoModal"}}
 {{template "clientsModal"}}
 {{template "clientsBulkModal"}}
-
 </body>
-</html>
+</html>
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -10,13 +10,11 @@
            margin-inline: 0.3rem;
        }
    }
-
    .ant-col-sm-24 {
        margin-top: 10px;
    }
-
    .ant-card-dark h2 {
-        color: hsla(0, 0%, 100%, .65);
+        color: var(--dark-color-text-primary);
    }
 </style>

@@ -26,6 +24,15 @@
    <a-layout id="content-layout">
        <a-layout-content>
            <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
+            <transition name="list" appear>
+                <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
+                message='{{ i18n "secAlertTitle" }}'
+                color="red"
+                description='{{ i18n "secAlertSsl" }}'
+                show-icon closable
+                >
+                </a-alert>
+            </transition>
            <transition name="list" appear>
                <a-row>
                    <a-card hoverable>
@@ -36,15 +43,15 @@
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.cpu.color"
                                                    :percent="status.cpu.percent"></a-progress>
-                                        <div>CPU:  [[ cpuCoreFormat(status.cpuCores) ]]</div>
-                                        <div>Speed:  [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+                                        <div><b>CPU:</b> [[ cpuCoreFormat(status.cpuCores) ]]</div>
+                                        <div><b>Speed:</b> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
                                    </a-col>
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.mem.color"
                                                    :percent="status.mem.percent"></a-progress>
                                        <div>
-                                            {{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
+                                            <b>{{ i18n "pages.index.memory"}}:</b> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
                                        </div>
                                    </a-col>
                                </a-row>
@@ -56,7 +63,7 @@
                                                    :stroke-color="status.swap.color"
                                                    :percent="status.swap.percent"></a-progress>
                                        <div>
-                                            Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
+                                            <b>Swap:</b> [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
                                        </div>
                                    </a-col>
                                    <a-col :span="12" style="text-align: center">
@@ -64,7 +71,7 @@
                                                    :stroke-color="status.disk.color"
                                                    :percent="status.disk.percent"></a-progress>
                                        <div>
-                                            {{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
+                                            <b>{{ i18n "pages.index.hard"}}:</b> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
                                        </div>
                                    </a-col>
                                </a-row>
@@ -75,164 +82,174 @@
            </transition>
            <transition name="list" appear>
                <a-row>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
-                            3X: <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
-                            Xray: <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
-                            <a href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@panel3xui</a-tag></a>
+                            <b>3X-UI:</b>
+                            <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
+                            <a rel="noopener" href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@Panel3xui</a-tag></a>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
-                            {{ i18n "menu.link" }}:
-                            <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
-                            <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
-                            <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
+                            <b>{{ i18n "pages.index.operationHours" }}:</b>
+                            <a-tag :color="status.xray.color">Xray: [[ formatSecond(status.appStats.uptime) ]]</a-tag>
+                            <a-tag color="green">OS: [[ formatSecond(status.uptime) ]]</a-tag>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
-                            {{ i18n "pages.index.xrayStatus" }}:
-                            <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
+                            <b>{{ i18n "pages.index.xrayStatus" }}:</b>
+                            <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]]
+                            </a-tag>
                            <a-popover v-if="status.xray.state === State.Error"
                                :overlay-class-name="themeSwitcher.currentTheme">
-                                <span slot="title" style="font-size: 12pt">Error in running xray-core
+                                <span slot="title" style="font-size: 12pt">An error occurred while running Xray
                                    <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
                                </span>
                                <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>                    
-                            <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
-                            {{ i18n "pages.index.operationHours" }}:
-                            Xray:
-                            <a-tag color="green">[[ formatSecond(status.appStats.uptime) ]]</a-tag>
-                            OS:
-                            <a-tag color="green">[[ formatSecond(status.uptime) ]]</a-tag>
+                            <b>{{ i18n "menu.link" }}:</b>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
-                            {{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
+                            <b>{{ i18n "pages.index.systemLoad" }}:</b>
+                            <a-tag color="green">
                            <a-tooltip>
+                                [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                                <template slot="title">
                                    {{ i18n "pages.index.systemLoadDesc" }}
                                </template>
-                                <a-icon type="question-circle" theme="filled"></a-icon>
                            </a-tooltip>
+                            </a-tag>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
-                            {{ i18n "usage"}}:
-                            Memory [[ sizeFormat(status.appStats.mem) ]] -
-                            Threads [[ status.appStats.threads ]]
-                            </a-tooltip>
+                            <b>{{ i18n "usage"}}:</b>
+                            <a-tag color="green">
+                                RAM: [[ sizeFormat(status.appStats.mem) ]]
+                            </a-tag>
+                            <a-tag color="green">
+                                Threads: [[ status.appStats.threads ]]
+                            </a-tag>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
                            <a-row>
                                <a-col :span="12">
-                                    IPv4:
+                                    <a-tag>
                                    <a-tooltip>
+                                    <a-icon type="global"></a-icon> IPv4
                                        <template slot="title">
                                            [[ status.publicIP.ipv4 ]]
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
-                                </a-col>
-                                <a-col :span="12">
-                                    IPv6:
+                                </a-tag>
+                            </a-col>
+                            <a-col :span="12">
+                                <a-tag>
                                    <a-tooltip>
+                                    <a-icon type="global"></a-icon> IPv6
                                        <template slot="title">
                                            [[ status.publicIP.ipv6 ]]
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
+                                    </a-tag>
                                </a-col>
                            </a-row>
                        </a-card>
                    </a-col>                    
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
                            <a-row>
                                <a-col :span="12">
-                                    TCP:  [[ status.tcpCount ]]
+                                    <a-tag>
                                    <a-tooltip>
+                                    <a-icon type="swap"></a-icon> TCP:  [[ status.tcpCount ]]
                                        <template slot="title">
                                            {{ i18n "pages.index.connectionTcpCountDesc" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
+                                    </a-tag>
                                </a-col>
                                <a-col :span="12">
-                                    UDP:  [[ status.udpCount ]]
+                                    <a-tag>
                                    <a-tooltip>
+                                    <a-icon type="swap"></a-icon> UDP:  [[ status.udpCount ]]
                                        <template slot="title">
                                            {{ i18n "pages.index.connectionUdpCountDesc" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
+                                    </a-tag>
                                </a-col>
                            </a-row>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
                            <a-row>
                                <a-col :span="12">
-                                    <a-icon type="arrow-up"></a-icon>
-                                    [[ sizeFormat(status.netIO.up) ]]/S
+                                    <a-tag>
                                    <a-tooltip>
+                                    <a-icon type="arrow-up"></a-icon>
+                                    Up: [[ sizeFormat(status.netIO.up) ]]/s
                                        <template slot="title">
                                            {{ i18n "pages.index.upSpeed" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
+                                    </a-tag>
                                </a-col>
                                <a-col :span="12">
-                                    <a-icon type="arrow-down"></a-icon>
-                                    [[ sizeFormat(status.netIO.down) ]]/S
+                                    <a-tag>
                                    <a-tooltip>
+                                    <a-icon type="arrow-down"></a-icon>
+                                    Down: [[ sizeFormat(status.netIO.down) ]]/s
                                        <template slot="title">
                                            {{ i18n "pages.index.downSpeed" }}
                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
+                                    </a-tag>
                                </a-col>
                            </a-row>
                        </a-card>
                    </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                        <a-card hoverable>
                            <a-row>
                                <a-col :span="12">
-                                    <a-icon type="cloud-upload"></a-icon>
-                                    [[ sizeFormat(status.netTraffic.sent) ]]
+                                    <a-tag>
                                    <a-tooltip>
+                                        <a-icon type="cloud-upload"></a-icon>
                                        <template slot="title">
                                            {{ i18n "pages.index.totalSent" }}
-                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        </template> Out: [[ sizeFormat(status.netTraffic.sent) ]]
                                    </a-tooltip>
+                                    </a-tag>
                                </a-col>
                                <a-col :span="12">
-                                    <a-icon type="cloud-download"></a-icon>
-                                    [[ sizeFormat(status.netTraffic.recv) ]]
+                                    <a-tag>
                                    <a-tooltip>
+                                        <a-icon type="cloud-download"></a-icon>
                                        <template slot="title">
                                            {{ i18n "pages.index.totalReceive" }}
-                                        </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        </template> In: [[ sizeFormat(status.netTraffic.recv) ]]
                                    </a-tooltip>
+                                    </a-tag>
                                </a-col>
                            </a-row>
                        </a-card>
@@ -246,64 +263,66 @@
             :closable="true" @ok="() => versionModal.visible = false"
             :class="themeSwitcher.currentTheme"
             footer="">
-        <h2>{{ i18n "pages.index.xraySwitchClick"}}</h2>
-        <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
+        <a-alert type="warning" style="margin-bottom: 12px; width: fit-content"
+        message='{{ i18n "pages.index.xraySwitchClickDesk" }}'
+        show-icon
+        ></a-alert>
        <template v-for="version, index in versionModal.versions">
            <a-tag :color="index % 2 == 0 ? 'purple' : 'green'"
-                   style="margin: 10px" @click="switchV2rayVersion(version)">
+                   style="margin-right: 10px" @click="switchV2rayVersion(version)">
                [[ version ]]
            </a-tag>
        </template>
    </a-modal>

-    <a-modal id="log-modal" v-model="logModal.visible" title="Logs"
-             :closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false"
+    <a-modal id="log-modal" v-model="logModal.visible"
+             :closable="true" @cancel="() => logModal.visible = false"
             :class="themeSwitcher.currentTheme"
-             width="800px"
-             footer="">
+             width="800px" footer="">
+        <template slot="title">
+            {{ i18n "pages.index.logs" }}
+            <a-icon :spin="logModal.loading"
+                    type="sync"
+                    style="vertical-align: middle; margin-left: 10px;"
+                    :disabled="logModal.loading"
+                    @click="openLogs()">
+            </a-icon>
+        </template>
        <a-form layout="inline">
-            <a-form-item label="Count">
-                <a-select v-model="logModal.rows"
-                style="width: 80px"
-                @change="openLogs()"
-                :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option value="10">10</a-select-option>
-                    <a-select-option value="20">20</a-select-option>
-                    <a-select-option value="50">50</a-select-option>
-                    <a-select-option value="100">100</a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item label="Log Level">
-                <a-select v-model="logModal.level"
-                style="width: 120px"
-                @change="openLogs()"
-                :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option value="debug">Debug</a-select-option>
-                    <a-select-option value="info">Info</a-select-option>
-                    <a-select-option value="notice">Notice</a-select-option>
-                    <a-select-option value="warning">Warning</a-select-option>
-                    <a-select-option value="err">Error</a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item label="SysLog">
-                <a-checkbox v-model="logModal.syslog" @change="openLogs()"></a-checkbox>
+            <a-form-item>
+                <a-input-group compact>
+                    <a-select v-model="logModal.rows" style="width:70px;"
+                    @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option value="10">10</a-select-option>
+                        <a-select-option value="20">20</a-select-option>
+                        <a-select-option value="50">50</a-select-option>
+                        <a-select-option value="100">100</a-select-option>
+                    </a-select>
+                    <a-select v-model="logModal.level" style="width:100px;"
+                    @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option value="debug">Debug</a-select-option>
+                        <a-select-option value="info">Info</a-select-option>
+                        <a-select-option value="notice">Notice</a-select-option>
+                        <a-select-option value="warning">Warning</a-select-option>
+                        <a-select-option value="err">Error</a-select-option>
+                    </a-select>
+                </a-input-group>
            </a-form-item>
            <a-form-item>
-                <a-button class="ant-btn ant-btn-primary" :loading="logModal.loading" @click="openLogs()"><a-icon :spin="logModal.loading" type="sync"></a-icon> Reload</a-button>
+                <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
            </a-form-item>
-            <a-form-item>
-                <a-button type="primary" style="margin-bottom: 10px;"
-                :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs)" download="x-ui.log">
-                    {{ i18n "download" }} x-ui.log
+            <a-form-item style="float: right;">
+                <a-button type="primary" icon="download"
+                :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs.join('\n'))" download="x-ui.log">
                </a-button>
            </a-form-item>
        </a-form>
-        <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto;" v-html="logModal.logs"></div>
+        <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto;" v-html="logModal.formattedLogs"></div>
    </a-modal>

    <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
-            :closable="true" :class="themeSwitcher.currentTheme"
-            @ok="() => backupModal.hide()" @cancel="() => backupModal.hide()">
+            :closable="true" footer=""
+            :class="themeSwitcher.currentTheme">
            <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
            :message="backupModal.description"
            show-icon
@@ -426,14 +445,15 @@

    const logModal = {
        visible: false,
-        logs: '',
+        logs: [],
        rows: 20,
        level: 'info',
        syslog: false,
        loading: false,
        show(logs) {
            this.visible = true;
-            this.logs = logs? this.formatLogs(logs) : "No Record...";
+            this.logs = logs; 
+            this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record...";
        },
        formatLogs(logs) {
            let formattedLogs = '';
@@ -511,6 +531,7 @@
            backupModal,
            spinning: false,
            loadingTip: '{{ i18n "loading"}}',
+            showAlert: false,
        },
        methods: {
            loading(spinning, tip = '{{ i18n "loading"}}') {
@@ -634,14 +655,14 @@
            },
        },
        async mounted() {
-            let retries = 0;
-            while (retries < 5) {
+            if (window.location.protocol !== "https:") {
+                this.showAlert = true;
+            }
+            while (true) {
                try {
                    await this.getStatus();
-                    retries = 0;
                } catch (e) {
-                    console.error("Error occurred while fetching status:", e);
-                    retries++;
+                    console.error(e);
                }
                await PromiseUtil.sleep(2000);
            }
@@ -650,4 +671,4 @@

 </script>
 </body>
-</html>
+</html>
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -75,28 +75,37 @@
    <a-layout id="content-layout">
        <a-layout-content>
            <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+                <transition name="list" appear>
+                    <a-alert type="error" v-if="confAlerts.length>0" style="margin: 10px 5px;"
+                    message='{{ i18n "secAlertTitle" }}'
+                    color="red"
+                    show-icon
+                    closable
+                    >
+                    <template slot="description">
+                    <b>{{ i18n "secAlertConf" }}</b>
+                    <ul><li v-for="a in confAlerts">[[ a ]]</li></ul>
+                    </template>
+                  </a-alert>
+                    </transition>
                <a-space direction="vertical">
-                    <a-card hoverable style="margin-bottom: .5rem;">
-                        <a-row>
-                            <a-col :xs="24" :sm="8" style="padding: 4px;">
+                    <a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;">
+                        <a-row style="display: flex; flex-wrap: wrap; align-items: center;">
+                            <a-col :xs="24" :sm="10" style="padding: 4px;">
                                <a-space direction="horizontal">
                                    <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
                                    <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
                                </a-space>
                            </a-col>
-                            <a-col :xs="24" :sm="16">
+                            <a-col :xs="24" :sm="14">
                                <template>
                                    <div>
-                                        <template>
-                                            <div>
-                                                <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
-                                                </a-back-top>
-                                                <a-alert type="warning" style="float: right; width: fit-content"
-                                                message='{{ i18n "pages.settings.infoDesc" }}'
-                                                show-icon
-                                                >
-                                            </div>
-                                        </template>
+                                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
+                                        </a-back-top>
+                                        <a-alert type="warning" style="float: right; width: fit-content"
+                                        message='{{ i18n "pages.settings.infoDesc" }}'
+                                        show-icon
+                                        >
                                    </div>
                                </template>
                            </a-col>
@@ -141,9 +150,29 @@
                                <a-list-item>
                                    <a-row style="padding: 20px">
                                        <a-col :lg="24" :xl="12">
-                                            <a-list-item-meta title="Language" />
+                                            <a-list-item-meta title='{{ i18n "pages.settings.datepicker"}}'>
+                                                <template slot="description">{{ i18n "pages.settings.datepickerDescription"}}</template>
+                                            </a-list-item-meta>
                                        </a-col>

+                                        <a-col :lg="24" :xl="12">
+                                            <template>
+                                                <a-select style="width: 100%"
+                                                          :dropdown-class-name="themeSwitcher.currentTheme"
+                                                          v-model="datepicker">
+                                                    <a-select-option v-for="item in datepickerList" :value="item.value">
+                                                        <span v-text="item.name"></span>
+                                                    </a-select-option>
+                                                </a-select>
+                                            </template>
+                                        </a-col>
+                                    </a-row>
+                                </a-list-item>
+                                <a-list-item>
+                                    <a-row style="padding: 20px">
+                                        <a-col :lg="24" :xl="12">
+                                            <a-list-item-meta title="Language" />
+                                        </a-col>
                                        <a-col :lg="24" :xl="12">
                                            <template>
                                                <a-select
@@ -166,42 +195,22 @@
                        </a-tab-pane>
                        <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding: 20px;">
                            <a-divider>{{ i18n "pages.settings.security.admin"}}</a-divider>
-                            <a-form style="padding: 20px;" layout="inline">
-                                <table cellpadding="2">
-                                    <tr>
-                                        <td>{{ i18n "pages.settings.oldUsername"}}:</td>
-                                        <td>
-                                            <a-form-item>
-                                                <a-input v-model="user.oldUsername" style="width: 200px"></a-input>
-                                            </a-form-item>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ i18n "pages.settings.currentPassword"}}:</td>
-                                        <td>
-                                            <a-form-item>
-                                                <password-input v-model="user.oldPassword" style="width: 200px"></password-input>
-                                            </a-form-item>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ i18n "pages.settings.newUsername"}}:</td>
-                                        <td>
-                                            <a-form-item>
-                                                <a-input v-model="user.newUsername" style="width: 200px"></a-input>
-                                            </a-form-item>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ i18n "pages.settings.newPassword"}}:</td>
-                                        <td>
-                                            <a-form-item>
-                                                <password-input v-model="user.newPassword" style="width: 200px"></password-input>
-                                            </a-form-item>            
-                                        </td>
-                                    </tr>
-                                </table>
-                                <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
+                            <a-form  layout="horizontal" :colon="false" style="float: left; margin: 10px 0;" :label-col="{ md: {span:10} }" :wrapper-col="{ md: {span:14} }">
+                                <a-form-item label='{{ i18n "pages.settings.oldUsername"}}'>
+                                    <a-input v-model="user.oldUsername"></a-input>
+                                </a-form-item>
+                                <a-form-item label='{{ i18n "pages.settings.currentPassword"}}'>
+                                    <password-input v-model="user.oldPassword"></password-input>
+                                </a-form-item>
+                                <a-form-item label='{{ i18n "pages.settings.newUsername"}}'>
+                                    <a-input v-model="user.newUsername"></a-input>
+                                </a-form-item>
+                                <a-form-item label='{{ i18n "pages.settings.newPassword"}}'>
+                                    <password-input v-model="user.newPassword"></password-input>
+                                </a-form-item>
+                                <a-form-item label=" ">
+                                    <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
+                                </a-form-item>
                            </a-form>
                            <a-divider>{{ i18n "pages.settings.security.secret"}}</a-divider>
                            <a-form style="padding: 20px;">
@@ -233,7 +242,6 @@
                                <a-button type="primary" :loading="this.changeSecret" @click="updateSecret">{{ i18n "confirm" }}</a-button>
                            </a-form>
                        </a-tab-pane>
-
                        <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings"}}'>
                            <a-list item-layout="horizontal">
                                <setting-list-item type="switch" title='{{ i18n "pages.settings.telegramBotEnable" }}' desc='{{ i18n "pages.settings.telegramBotEnableDesc" }}' v-model="allSetting.tgBotEnable"></setting-list-item>
@@ -243,20 +251,19 @@
                                <setting-list-item type="switch" title='{{ i18n "pages.settings.tgNotifyBackup" }}' desc='{{ i18n "pages.settings.tgNotifyBackupDesc" }}' v-model="allSetting.tgBotBackup"></setting-list-item>
                                <setting-list-item type="switch" title='{{ i18n "pages.settings.tgNotifyLogin" }}' desc='{{ i18n "pages.settings.tgNotifyLoginDesc" }}' v-model="allSetting.tgBotLoginNotify"></setting-list-item>
                                <setting-list-item type="number" title='{{ i18n "pages.settings.tgNotifyCpu" }}' desc='{{ i18n "pages.settings.tgNotifyCpuDesc" }}' v-model="allSetting.tgCpu" :min="0" :max="100"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.telegramProxy"}}' desc='{{ i18n "pages.settings.telegramProxyDesc"}}' v-model="allSetting.tgBotProxy" placeholder="socks5://user:pass@host:port"></setting-list-item>
                                <a-list-item>
                                    <a-row style="padding: 20px">
                                        <a-col :lg="24" :xl="12">
                                            <a-list-item-meta title="Telegram Bot Language" />
                                        </a-col>
-
                                        <a-col :lg="24" :xl="12">
                                            <template>
                                                <a-select
                                                    ref="selectBotLang"
                                                    v-model="allSetting.tgLang"
                                                    :dropdown-class-name="themeSwitcher.currentTheme"
-                                                    style="width: 100%"
-                                                >
+                                                    style="width: 100%">
                                                    <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
                                                        <span role="img" :aria-label="l.name" v-text="l.icon"></span>
                                                        &nbsp;&nbsp;<span v-text="l.name"></span>
@@ -283,6 +290,17 @@
                                <setting-list-item type="number" title='{{ i18n "pages.settings.subUpdates"}}' desc='{{ i18n "pages.settings.subUpdatesDesc"}}' v-model="allSetting.subUpdates"></setting-list-item>
                            </a-list>
                        </a-tab-pane>
+                        <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable">
+                            <a-list item-layout="horizontal">
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.subPath"}}' desc='{{ i18n "pages.settings.subPathDesc"}}' v-model="allSetting.subJsonPath"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.subURI"}}' desc='{{ i18n "pages.settings.subURIDesc"}}' v-model="allSetting.subJsonURI" placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
+                                <setting-list-item type="switch" title='{{ i18n "pages.settings.fragment"}}' desc='{{ i18n "pages.settings.fragmentDesc"}}' v-model="fragment"></setting-list-item>
+                                <template v-if="fragment">
+                                    <setting-list-item type="text" title='length' v-model="fragmentLength" placeholder="100-200"></setting-list-item>
+                                    <setting-list-item type="text" title='Interval' v-model="fragmentInterval" placeholder="10-20"></setting-list-item>
+                                </template>
+                            </a-list>
+                        </a-tab-pane>
                    </a-tabs>
                </a-space>
            </a-spin>
@@ -308,10 +326,28 @@
            saveBtnDisable: true,
            user: {},
            lang: getLang(),
-            showAlert: false,
            remarkModels: {i:'Inbound',e:'Email',o:'Other'},
            remarkSeparators: [' ','-','_','@',':','~','|',',','.','/'],
+            datepickerList: [{name:'Gregorian (Standard)', value: 'gregorian'}, {name:'Jalalian (شمسی)', value: 'jalalian'}],
            remarkSample: '',
+            defaultFragment: {
+                tag: "fragment",
+                protocol: "freedom",
+                settings: {
+                    domainStrategy: "AsIs",
+                    fragment: {
+                        packets: "tlshello",
+                        length: "100-200",
+                        interval: "10-20"
+                    }
+                },
+                streamSettings: {
+                    sockopt: {
+                        tcpKeepAliveIdle: 100,
+                        tcpNoDelay: true
+                    }
+                }
+            },
            get remarkModel() {
                rm = this.allSetting.remarkModel;
                return rm.length>1 ? rm.substring(1).split('') : [];
@@ -328,6 +364,12 @@
                this.allSetting.remarkModel = value + this.allSetting.remarkModel.substring(1);
                this.changeRemarkSample();
            },
+            get datepicker() {
+                return this.allSetting.datepicker ? this.allSetting.datepicker : 'gregorian';
+            },
+            set datepicker(value) {
+                this.allSetting.datepicker = value;
+            },
            changeRemarkSample(){
                sample = []
                this.remarkModel.forEach(r => sample.push(this.remarkModels[r]));
@@ -384,9 +426,7 @@
                if (msg.success) {
                    this.loading(true);
                    await PromiseUtil.sleep(5000);
-                    var { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting;
-                    if (host == this.oldAllSetting.webDomain) host = null;
-                    if (port == this.oldAllSetting.webPort) port = null;
+                    let { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting;
                    const isTLS = webCertFile !== "" || webKeyFile !== "";
                    const url = buildURL({ host, port, isTLS, base, path: "panel/settings" });
                    window.location.replace(url);
@@ -436,14 +476,59 @@
                }
            },
        },
+        computed: {
+            fragment: {
+                get: function() { return this.allSetting?.subJsonFragment != ""; },
+                set: function (v) {
+                    this.allSetting.subJsonFragment = v ? JSON.stringify(this.defaultFragment) : "";
+                }
+            },
+            fragmentLength: {
+                get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.length : ""; },
+                set: function(v) {
+                    if (v != ""){
+                        newFragment = JSON.parse(this.allSetting.subJsonFragment);
+                        newFragment.settings.fragment.length = v;
+                        this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+                    }
+                }
+            },
+            fragmentInterval: {
+                get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.interval : ""; },
+                set: function(v) {
+                    if (v != ""){
+                        newFragment = JSON.parse(this.allSetting.subJsonFragment);
+                        newFragment.settings.fragment.interval = v;
+                        this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+                    }
+                }
+            },
+            confAlerts: {
+                get: function() {
+                    if (!this.allSetting) return [];
+                    var alerts = []
+                    if (window.location.protocol !== "https:") alerts.push('{{ i18n "secAlertSSL" }}');
+                    if (this.allSetting.webPort == 54321) alerts.push('{{ i18n "secAlertPanelPort" }}');
+                    panelPath = window.location.pathname.split('/').length<4
+                    if (panelPath && this.allSetting.webBasePath == '/') alerts.push('{{ i18n "secAlertPanelURI" }}');
+                    if (this.allSetting.subEnable) {
+                        subPath = this.allSetting.subURI.length >0 ? new URL(this.allSetting.subURI).pathname : this.allSetting.subPath;
+                        if (subPath == '/sub/') alerts.push('{{ i18n "secAlertSubURI" }}');
+                        subJsonPath = this.allSetting.subJsonURI.length >0 ? new URL(this.allSetting.subJsonURI).pathname : this.allSetting.subJsonPath;
+                        if (subJsonPath == '/json/') alerts.push('{{ i18n "secAlertSubJsonURI" }}');
+                    }
+                    return alerts
+                }
+            }
+        }, 
        async mounted() {
            await this.getAllSetting();
            while (true) {
-                await PromiseUtil.sleep(600);
+                await PromiseUtil.sleep(1000);
                this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
            }
-        },
+        }
    });
 </script>
 </body>
-</html>
+</html>
--- a/web/html/xui/warp_modal.html
+++ b/web/html/xui/warp_modal.html
@@ -0,0 +1,205 @@
+{{define "warpModal"}}
+<a-modal id="warp-modal" v-model="warpModal.visible" title="Cloudflare WARP"
+         :confirm-loading="warpModal.confirmLoading" :closable="true" :mask-closable="true"
+         :footer="null" :class="themeSwitcher.currentTheme">
+    <template v-if="ObjectUtil.isEmpty(warpModal.warpData)">
+        <a-button icon="api" @click="register" :loading="warpModal.confirmLoading">{{ i18n "pages.inbounds.create" }}</a-button>
+    </template>
+    <template v-else>
+        <table style="margin: 5px 0; width: 100%;">
+            <tr class="client-table-odd-row">
+                <td>Access Token</td>
+                <td>[[ warpModal.warpData.access_token ]]</td>
+            </tr>
+            <tr>
+                <td>Devide ID</td>
+                <td>[[ warpModal.warpData.device_id ]]</td>
+            </tr>
+            <tr class="client-table-odd-row">
+                <td>License Key</td>
+                <td>[[ warpModal.warpData.license_key ]]</td>
+            </tr>
+            <tr>
+                <td>Private Key</td>
+                <td>[[ warpModal.warpData.private_key ]]</td>
+            </tr>
+        </table>
+        <a-divider style="margin: 0;">{{ i18n "pages.settings.toasts.modifySettings" }}</a-divider>
+        <a-collapse style="margin: 10px 0;">
+            <a-collapse-panel header='WARP/WARP+ License Key'>
+                <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+                    <a-form-item label="License Key">
+                        <a-input v-model="warpPlus"></a-input>
+                        <a-button @click="updateLicense(warpPlus)" :disabled="warpPlus.length<26" :loading="warpModal.confirmLoading">{{ i18n "pages.inbounds.update" }}</a-button>
+                    </a-form-item>
+                </a-form>
+            </a-collapse-panel>
+        </a-collapse>
+        <a-divider style="margin: 0;">{{ i18n "pages.settings.toasts.getSettings" }}</a-divider>
+        <a-button icon="sync" @click="getConfig" style="margin-bottom: 10px;" :loading="warpModal.confirmLoading">{{ i18n "info" }}</a-button>
+        <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig)">
+            <table style="width: 100%">
+                <tr class="client-table-odd-row">
+                    <td>Device Name</td>
+                    <td>[[ warpModal.warpConfig.name ]]</td>
+                </tr>
+                <tr>
+                    <td>Device Model</td>
+                    <td>[[ warpModal.warpConfig.model ]]</td>
+                </tr>
+                <tr class="client-table-odd-row">
+                    <td>Device Active</td>
+                    <td>[[ warpModal.warpConfig.enabled ]]</td>
+                </tr>
+            <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account)">
+                <tr>
+                    <td>Account Type</td>
+                    <td>[[ warpModal.warpConfig.account.account_type ]]</td>
+                </tr>
+                <tr class="client-table-odd-row">
+                    <td>Role</td>
+                    <td>[[ warpModal.warpConfig.account.role ]]</td>
+                </tr>
+                <tr>
+                    <td>Premium Data</td>
+                    <td>[[ sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
+                </tr>
+                <tr class="client-table-odd-row">
+                    <td>Quota</td>
+                    <td>[[ sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
+                </tr>
+                <tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
+                    <td>Usage</td>
+                    <td>[[ sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
+                </tr>
+            </template>
+            </table>
+            <a-divider style="margin: 10px 0;">WARP {{ i18n "pages.xray.rules.outbound" }}</a-divider>
+            <a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+                <a-form-item label='{{ i18n "status" }}'>
+                    <template v-if="warpOutboundIndex>=0">
+                        <a-tag color="green">{{ i18n "enabled" }}</a-tag>
+                        <a-button @click="resetOutbound" :loading="warpModal.confirmLoading">{{ i18n "reset" }}</a-button>
+                    </template>
+                    <template v-else>
+                        <a-tag color="orange">{{ i18n "disabled" }}</a-tag>
+                        <a-button @click="addOutbound" :loading="warpModal.confirmLoading">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
+                    </template>
+                </a-form-item>
+            </a-form>
+        </template>
+    </template>
+</a-modal>
+<script>
+
+    const warpModal = {
+        visible: false,
+        confirmLoading: false,
+        warpData: null,
+        warpConfig: null,
+        warpOutbound: null,
+        show() {
+            this.visible = true;
+            this.warpConfig = null;
+            this.getData();
+
+        },
+        close() {
+            this.visible = false;
+            this.loading(false);
+        },
+        loading(loading=true) {
+            this.confirmLoading = loading;
+        },
+        async getData(){
+            this.loading(true);
+            const msg = await HttpUtil.post('/panel/xray/warp/data');
+            this.loading(false);
+            if (msg.success) {
+                this.warpData = msg.obj.length>0 ? JSON.parse(msg.obj): null;
+            }
+        },
+    };
+
+    new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#warp-modal',
+        data: {
+            warpModal: warpModal,
+            warpPlus: '',
+        },
+        methods: {
+            collectConfig() {
+                config = warpModal.warpConfig.config;
+                peer = config.peers[0];
+                if(config){
+                    warpModal.warpOutbound = Outbound.fromJson({
+                        tag: 'warp',
+                        protocol: Protocols.Wireguard,
+                        settings: {
+                            mtu: 1420,
+                            secretKey: warpModal.warpData.private_key,
+                            address: Object.values(config.interface.addresses),
+                            domainStrategy: 'ForceIP',
+                            peers: [{
+                                publicKey: peer.public_key,
+                                endpoint: peer.endpoint.host,
+                            }],
+                            kernelMode: false
+                        }
+                    });
+                }
+            },
+            async register(){
+                warpModal.loading(true);
+                keys = Wireguard.generateKeypair();
+                const msg = await HttpUtil.post('/panel/xray/warp/reg',keys);
+                if (msg.success) {
+                    resp = JSON.parse(msg.obj);
+                    warpModal.warpData = resp.data;
+                    warpModal.warpConfig = resp.config;
+                    this.collectConfig();
+                }
+                warpModal.loading(false);
+            },
+            async updateLicense(l){
+                warpModal.loading(true);
+                const msg = await HttpUtil.post('/panel/xray/warp/license',{license: l});
+                if (msg.success) {
+                    warpModal.warpData = JSON.parse(msg.obj);
+                    warpModal.warpConfig = null;
+                    this.warpPlus = '';
+                }
+                warpModal.loading(false);
+            },
+            async getConfig(){
+                warpModal.loading(true);
+                const msg = await HttpUtil.post('/panel/xray/warp/config');
+                warpModal.loading(false);
+                if (msg.success) {
+                    warpModal.warpConfig = JSON.parse(msg.obj);
+                    this.collectConfig();
+                }
+            },
+            addOutbound(){
+                app.templateSettings.outbounds.push(warpModal.warpOutbound.toJson());
+                app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
+                warpModal.close();
+            },
+            resetOutbound(){
+                app.templateSettings.outbounds[this.warpOutboundIndex] = warpModal.warpOutbound.toJson();
+                app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
+                warpModal.close();
+            }
+        },
+        computed: {
+            warpOutboundIndex: {
+                get: function() {
+                    return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag == 'warp') : -1;
+                }
+            }
+        }
+    });
+
+</script>
+{{end}}
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
--- a/web/html/xui/xray_balancer_modal.html
+++ b/web/html/xui/xray_balancer_modal.html
@@ -0,0 +1,113 @@
+{{define "balancerModal"}}
+<a-modal 
+    id="balancer-modal"
+    v-model="balancerModal.visible"
+    :title="balancerModal.title"
+    @ok="balancerModal.ok"
+    :confirm-loading="balancerModal.confirmLoading"
+    :ok-button-props="{ props: { disabled: !balancerModal.isValid } }"
+    :closable="true"
+    :mask-closable="false"
+    :ok-text="balancerModal.okText"
+    cancel-text='{{ i18n "close" }}'
+    :class="themeSwitcher.currentTheme">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "pages.xray.balancer.tag" }}' has-feedback
+            :validate-status="balancerModal.duplicateTag? 'warning' : 'success'">
+            <a-input v-model.trim="balancerModal.balancer.tag" @change="balancerModal.check()"
+                placeholder='{{ i18n "pages.xray.balancer.tagDesc" }}'></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.balancer.balancerStrategy" }}'>
+            <a-select v-model="balancerModal.balancer.strategy" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="random">Random</a-select-option>
+                <a-select-option value="roundRobin">Round Robin</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.balancer.balancerSelectors" }}' has-feedback 
+        :validate-status="balancerModal.emptySelector? 'warning' : 'success'">
+            <a-select v-model="balancerModal.balancer.selector" mode="tags" @change="balancerModal.checkSelector()"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in balancerModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        </table>
+    </a-form>
+</a-modal>
+<script>
+    const balancerModal = {
+        title: '',
+        visible: false,
+        confirmLoading: false,
+        okText: '{{ i18n "sure" }}',
+        isEdit: false,
+        confirm: null,
+        duplicateTag: false,
+        emptySelector: false,
+        balancer: {
+            tag: '',
+            strategy: 'random',
+            selector: []
+        },
+        outboundTags: [],
+        balancerTags:[],
+        ok() {
+            if (balancerModal.balancer.selector.length == 0) {
+                balancerModal.emptySelector = true;
+                return;
+            }
+            balancerModal.emptySelector = false;
+            ObjectUtil.execute(balancerModal.confirm, balancerModal.balancer);
+        },
+        show({ title = '', okText = '{{ i18n "sure" }}', balancerTags = [], balancer, confirm = (balancer) => { }, isEdit = false }) {
+            this.title = title;
+            this.okText = okText;
+            this.confirm = confirm;
+            this.visible = true;
+            if (isEdit) {
+                balancerModal.balancer = balancer;
+            } else {
+                balancerModal.balancer = {
+                    tag: '',
+                    strategy: 'random',
+                    selector: []
+                };
+            }
+            this.balancerTags = balancerTags.filter((tag) => tag != balancer.tag);
+            this.outboundTags = app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag);
+            this.isEdit = isEdit;
+            this.check();
+            this.checkSelector();
+        },
+        close() {
+            this.visible = false;
+            this.loading(false);
+        },
+        loading(loading=true) {
+            this.confirmLoading = loading;
+        },
+        check() {
+            if (this.balancer.tag == '' || this.balancerTags.includes(this.balancer.tag)) {
+                this.duplicateTag = true;
+                this.isValid = false;
+            } else {
+                this.duplicateTag = false;
+                this.isValid = true;
+            }
+        },
+        checkSelector() {
+            this.emptySelector = this.balancer.selector.length == 0;
+        }
+    };
+
+    new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#balancer-modal',
+        data: {
+            balancerModal: balancerModal
+        },
+        methods: {
+        }
+    });
+
+</script>
+{{end}}
--- a/web/html/xui/xray_outbound_modal.html
+++ b/web/html/xui/xray_outbound_modal.html
@@ -42,7 +42,7 @@
            outModal.visible = false;
            outModal.loading(false);
        },
-        loading(loading) {
+        loading(loading=true) {
            outModal.confirmLoading = loading;
        },
        check(){
--- 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">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.xray.outbound.type" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="reverseModal.reverse.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <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>
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
+            <a-select v-model="reverseModal.reverse.type" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}'>
+            <a-input v-model.trim="reverseModal.reverse.tag"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.outbound.domain" }}'>
+            <a-input v-model.trim="reverseModal.reverse.domain"></a-input>
+        </a-form-item>
        <template v-if="reverseModal.reverse.type=='bridge'">
-        <tr>
-            <td>{{ i18n "pages.xray.outbound.intercon" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="reverseModal.rules[0].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>
-        <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>
+        <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
+            <a-select v-model="reverseModal.rules[0].outboundTag" :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>
+        <a-form-item label='{{ i18n "pages.xray.rules.outbound" }}'>
+            <a-select v-model="reverseModal.rules[1].outboundTag" :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>
        </template>
        <template v-else>
-            <tr>
-                <td>{{ i18n "pages.xray.outbound.intercon" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-checkbox-group
-                            v-model="reverseModal.rules[0].inboundTag"
-                            :options="reverseModal.inboundTags"></a-checkbox-group>
-                    </a-form-item>
-                </td>
-            </tr>
-            <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>
+            <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
+                <a-checkbox-group
+                    v-model="reverseModal.rules[0].inboundTag"
+                    :options="reverseModal.inboundTags"></a-checkbox-group>
+            </a-form-item>
+            <a-form-item label='{{ i18n "pages.xray.rules.inbound" }}'>
+                <a-checkbox-group
+                    v-model="reverseModal.rules[1].inboundTag"
+                    :options="reverseModal.inboundTags"></a-checkbox-group>
+            </a-form-item>
        </template>
    </table>
    </a-form>
@@ -156,7 +120,7 @@
            reverseModal.visible = false;
            reverseModal.loading(false);
        },
-        loading(loading) {
+        loading(loading=true) {
            reverseModal.confirmLoading = loading;
        },
    };
@@ -168,9 +132,7 @@
            reverseModal: reverseModal,
            reverseTypes: { bridge: '{{ i18n "pages.xray.outbound.bridge" }}', portal:'{{ i18n "pages.xray.outbound.portal" }}'},
        },
-        methods: {
-        }
    });

 </script>
-{{end}}
+{{end}}
--- a/web/html/xui/xray_rule_modal.html
+++ b/web/html/xui/xray_rule_modal.html
@@ -2,149 +2,124 @@
 <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">
-        <table width="100%" class="ant-table-tbody">
-            <tr>
-            <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-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='Domain Matcher'>
+                    <a-select v-model="ruleModal.rule.domainMatcher" :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>
-            </td>
-        </tr>
-        <tr>
-            <td>Source IPs
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                <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>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.source" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Source Port
+            </template>
+            <a-input v-model.trim="ruleModal.rule.source"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                <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>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.sourcePort" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Network</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.network" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x in ['','tcp','tdp','tcp,udp']" :value="x">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Protocol</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.protocol" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x in ['','http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <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
+            </template>
+            <a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
+        </a-form-item>
+        <a-form-item label='Network'>
+            <a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x in ['','TCP','UDP','TCP,UDP']" :value="x">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Protocol'>
+            <a-select v-model="ruleModal.rule.protocol" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x in ['http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Attributes'>
+            <a-button size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])">+</a-button>
+        </a-form-item>
+        <a-form-item :wrapper-col="{span: 24}">
+            <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>
+        <a-form-item>
+            <template slot="label">
                <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>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.ip" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Domain
+            </template>
+            <a-input v-model.trim="ruleModal.rule.ip"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                <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>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.domain" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Port
+            </template>
+            <a-input v-model.trim="ruleModal.rule.domain"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                <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>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.port" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Inbound Tags</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Outbound Tag</td>
-            <td>
-                <a-form-item>
-                    <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>
-                </a-form-item>
-            </td>
-        </tr>
+            </template>
+            <a-input v-model.trim="ruleModal.rule.user"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                    </template>
+                    Port <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input v-model.trim="ruleModal.rule.port"></a-input>
+        </a-form-item>
+        <a-form-item label='Inbound Tags'>
+            <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Outbound Tag'>
+            <a-select v-model="ruleModal.rule.outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.balancer.balancerDesc" }}</span>
+                    </template>
+                    Balancer Tag <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-select v-model="ruleModal.rule.balancerTag" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in ruleModal.balancerTags" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
+        </a-form-item>
    </table>
    </a-form>
 </a-modal>
@@ -171,11 +146,12 @@
            protocol: [],
            attrs: [],
            outboundTag: "",
+            balancerTag: "",
        },
        inboundTags: [],
        outboundTags: [],
        users: [],
-        balancerTag: [],
+        balancerTags: [],
        ok() {
            newRule = ruleModal.getResult();
            ObjectUtil.execute(ruleModal.confirm, newRule);
@@ -198,6 +174,7 @@
                this.rule.protocol = rule.protocol;
                this.rule.attrs = rule.attrs ? Object.entries(rule.attrs) : [];
                this.rule.outboundTag = rule.outboundTag;
+                this.rule.balancerTag = rule.balancerTag ? rule.balancerTag : "";
            } else {
                this.rule = {
                    domainMatcher: "",
@@ -212,24 +189,29 @@
                    protocol: [],
                    attrs: [],
                    outboundTag: "",
+                    balancerTag: "",
                }
            }
            this.isEdit = isEdit;
            this.inboundTags = app.templateSettings.inbounds.filter((i) => !ObjectUtil.isEmpty(i.tag)).map(obj => obj.tag);
            this.inboundTags.push(...app.inboundTags);
-            this.outboundTags = app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag);
+            this.outboundTags = ["", ...app.templateSettings.outbounds.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
            if(app.templateSettings.reverse){
                if(app.templateSettings.reverse.bridges) {
                    this.inboundTags.push(...app.templateSettings.reverse.bridges.map(b => b.tag));
                }
                if(app.templateSettings.reverse.portals) this.outboundTags.push(...app.templateSettings.reverse.portals.map(b => b.tag));
            }
+
+            if (app.templateSettings.routing && app.templateSettings.routing.balancers) {
+                this.balancerTags = [ "", ...app.templateSettings.routing.balancers.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag)];
+            }
        },
        close() {
            ruleModal.visible = false;
            ruleModal.loading(false);
        },
-        loading(loading) {
+        loading(loading=true) {
            ruleModal.confirmLoading = loading;
        },
        getResult() {
@@ -248,7 +230,8 @@
            rule.inboundTag = value.inboundTag;
            rule.protocol = value.protocol;
            rule.attrs = Object.fromEntries(value.attrs);
-            rule.outboundTag = value.outboundTag;
+            rule.outboundTag = value.outboundTag == "" ? undefined : value.outboundTag;
+            rule.balancerTag = value.balancerTag == "" ? undefined : value.balancerTag;

            for (const [key, value] of Object.entries(rule)) {
                if (
@@ -274,4 +257,4 @@
    });

 </script>
-{{end}}
+{{end}}
--- a/web/job/check_client_ip_job.go
+++ b/web/job/check_client_ip_job.go
@@ -1,7 +1,9 @@
 package job

 import (
+	"bufio"
 	"encoding/json"
+	"io"
 	"log"
 	"os"
 	"os/exec"
@@ -12,18 +14,22 @@ import (

 	"x-ui/database"
 	"x-ui/database/model"
+	"x-ui/config"
 	"x-ui/logger"
 	"x-ui/xray"
 )

-type CheckClientIpJob struct{}
+type CheckClientIpJob struct {
+	disAllowedIps []string
+}

 var job *CheckClientIpJob
-var disAllowedIps []string
 var ipFiles = []string{
 	xray.GetIPLimitLogPath(),
 	xray.GetIPLimitBannedLogPath(),
+	xray.GetIPLimitBannedPrevLogPath(),
 	xray.GetAccessPersistentLogPath(),
+	xray.GetAccessPersistentPrevLogPath(),
 }

 func NewCheckClientIpJob() *CheckClientIpJob {
@@ -33,8 +39,10 @@ func NewCheckClientIpJob() *CheckClientIpJob {

 func (j *CheckClientIpJob) Run() {

-	// create files required for iplimit if not exists
+	// create files and dirs required for iplimit if not exists
 	for i := 0; i < len(ipFiles); i++ {
+		err := os.MkdirAll(config.GetLogFolder(), 0770)
+		j.checkError(err)
 		file, err := os.OpenFile(ipFiles[i], os.O_CREATE|os.O_APPEND|os.O_RDWR, 0644)
 		j.checkError(err)
 		defer file.Close()
@@ -45,6 +53,37 @@ func (j *CheckClientIpJob) Run() {
 		j.checkFail2BanInstalled()
 		j.processLogFile()
 	}
+
+	if !j.hasLimitIp() && xray.GetAccessLogPath() == "./access.log" {
+		go j.clearLogTime()
+	}
+}
+
+func (j *CheckClientIpJob) clearLogTime() {
+	for {
+		time.Sleep(time.Hour)
+		j.clearAccessLog()
+	}
+}
+
+func (j *CheckClientIpJob) clearAccessLog() {
+	accessLogPath := xray.GetAccessLogPath()
+	logAccessP, err := os.OpenFile(xray.GetAccessPersistentLogPath(), os.O_CREATE|os.O_APPEND|os.O_RDWR, 0644)
+	j.checkError(err)
+	defer logAccessP.Close()
+
+	// reopen the access log file for reading
+	file, err := os.Open(accessLogPath)
+	j.checkError(err)
+	defer file.Close()
+
+	// copy access log content to persistent file
+	_, err = io.Copy(logAccessP, file)
+	j.checkError(err)
+
+	// clean access log
+	err = os.Truncate(accessLogPath, 0)
+	j.checkError(err)
 }

 func (j *CheckClientIpJob) hasLimitIp() bool {
@@ -88,24 +127,34 @@ func (j *CheckClientIpJob) checkFail2BanInstalled() {

 func (j *CheckClientIpJob) processLogFile() {
 	accessLogPath := xray.GetAccessLogPath()
-	if accessLogPath == "" {
-		logger.Warning("access.log doesn't exist in your config.json")
+
+	if accessLogPath == "none" {
+		logger.Warning("Access log is set to 'none' check your Xray Configs")
 		return
 	}

-	data, err := os.ReadFile(accessLogPath)
-	InboundClientIps := make(map[string][]string)
-	j.checkError(err)
+	if accessLogPath == "" {
+		logger.Warning("Access log doesn't exist in your Xray Configs")
+		return
+	}

-	lines := strings.Split(string(data), "\n")
-	for _, line := range lines {
-		ipRegx, _ := regexp.Compile(`[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+`)
+	file, err := os.Open(accessLogPath)
+	j.checkError(err)
+	defer file.Close()
+
+	InboundClientIps := make(map[string][]string)
+
+	scanner := bufio.NewScanner(file)
+	for scanner.Scan() {
+		line := scanner.Text()
+
+		ipRegx, _ := regexp.Compile(`(\d+\.\d+\.\d+\.\d+).* accepted`)
 		emailRegx, _ := regexp.Compile(`email:.+`)

-		matchesIp := ipRegx.FindString(line)
-		if len(matchesIp) > 0 {
-			ip := string(matchesIp)
-			if ip == "127.0.0.1" || ip == "1.1.1.1" {
+		matches := ipRegx.FindStringSubmatch(line)
+		if len(matches) > 1 {
+			ip := matches[1]
+			if ip == "127.0.0.1" {
 				continue
 			}

@@ -120,14 +169,14 @@ func (j *CheckClientIpJob) processLogFile() {
 					continue
 				}
 				InboundClientIps[matchesEmail] = append(InboundClientIps[matchesEmail], ip)
-
 			} else {
 				InboundClientIps[matchesEmail] = append(InboundClientIps[matchesEmail], ip)
 			}
 		}
 	}

-	disAllowedIps = []string{}
+	j.checkError(scanner.Err())
+
 	shouldCleanLog := false

 	for clientEmail, ips := range InboundClientIps {
@@ -138,27 +187,13 @@ func (j *CheckClientIpJob) processLogFile() {
 		} else {
 			shouldCleanLog = j.updateInboundClientIps(inboundClientIps, clientEmail, ips)
 		}
-
 	}

 	// added delay before cleaning logs to reduce chance of logging IP that already has been banned
 	time.Sleep(time.Second * 2)

 	if shouldCleanLog {
-		// copy access log to persistent file
-		logAccessP, err := os.OpenFile(xray.GetAccessPersistentLogPath(), os.O_CREATE|os.O_APPEND|os.O_RDWR, 0644)
-		j.checkError(err)
-		input, err := os.ReadFile(accessLogPath)
-		j.checkError(err)
-		if _, err := logAccessP.Write(input); err != nil {
-			j.checkError(err)
-		}
-		defer logAccessP.Close()
-
-		// clean access log
-		if err := os.Truncate(xray.GetAccessLogPath(), 0); err != nil {
-			j.checkError(err)
-		}
+		j.clearAccessLog()
 	}
 }

@@ -234,6 +269,7 @@ func (j *CheckClientIpJob) updateInboundClientIps(inboundClientIps *model.Inboun
 	json.Unmarshal([]byte(inbound.Settings), &settings)
 	clients := settings["clients"]
 	shouldCleanLog := false
+	j.disAllowedIps = []string{}

 	// create iplimit log file channel
 	logIpFile, err := os.OpenFile(xray.GetIPLimitLogPath(), os.O_CREATE|os.O_APPEND|os.O_RDWR, 0644)
@@ -252,7 +288,7 @@ func (j *CheckClientIpJob) updateInboundClientIps(inboundClientIps *model.Inboun
 				shouldCleanLog = true

 				if limitIp < len(ips) && inbound.Enable {
-					disAllowedIps = append(disAllowedIps, ips[limitIp:]...)
+					j.disAllowedIps = append(j.disAllowedIps, ips[limitIp:]...)
 					for i := limitIp; i < len(ips); i++ {
 						log.Printf("[LIMIT_IP] Email = %s || SRC = %s", clientEmail, ips[i])
 					}
@@ -260,8 +296,12 @@ func (j *CheckClientIpJob) updateInboundClientIps(inboundClientIps *model.Inboun
 			}
 		}
 	}
-	logger.Debug("disAllowedIps ", disAllowedIps)
-	sort.Strings(disAllowedIps)
+
+	sort.Strings(j.disAllowedIps)
+
+	if len(j.disAllowedIps) > 0 {
+		logger.Debug("disAllowedIps ", j.disAllowedIps)
+	}

 	db := database.GetDB()
 	err = db.Save(inboundClientIps).Error
--- a/web/job/check_xray_running_job.go
+++ b/web/job/check_xray_running_job.go
@@ -1,6 +1,9 @@
 package job

-import "x-ui/web/service"
+import (
+	"x-ui/logger"
+	"x-ui/web/service"
+)

 type CheckXrayRunningJob struct {
 	xrayService service.XrayService
@@ -15,11 +18,15 @@ func NewCheckXrayRunningJob() *CheckXrayRunningJob {
 func (j *CheckXrayRunningJob) Run() {
 	if j.xrayService.IsXrayRunning() {
 		j.checkTime = 0
-		return
+	} else {
+		j.checkTime++
+		//only restart if it's down 2 times in a row
+		if j.checkTime > 1 {
+			err := j.xrayService.RestartXray(false)
+			j.checkTime = 0
+			if err != nil {
+				logger.Error("Restart xray failed:", err)
+			}
+		}
 	}
-	j.checkTime++
-	if j.checkTime < 2 {
-		return
-	}
-	j.xrayService.SetToNeedRestart()
 }
--- a/web/job/clear_logs_job.go
+++ b/web/job/clear_logs_job.go
@@ -15,10 +15,38 @@ func NewClearLogsJob() *ClearLogsJob {
 // Here Run is an interface method of the Job interface
 func (j *ClearLogsJob) Run() {
 	logFiles := []string{xray.GetIPLimitLogPath(), xray.GetIPLimitBannedLogPath(), xray.GetAccessPersistentLogPath()}
+	logFilesPrev := []string{xray.GetIPLimitBannedPrevLogPath(), xray.GetAccessPersistentPrevLogPath()}
+	
+	// clear old previous logs
+	for i := 0; i < len(logFilesPrev); i++ {
+		if err := os.Truncate(logFilesPrev[i], 0); err != nil {
+			logger.Warning("clear logs job err:", err)
+		}
+	}

-	// clear log files
+	// clear log files and copy to previous logs
 	for i := 0; i < len(logFiles); i++ {
-		if err := os.Truncate(logFiles[i], 0); err != nil {
+		if i > 0 {
+			// copy to previous logs
+			logFilePrev, err := os.OpenFile(logFilesPrev[i-1], os.O_CREATE|os.O_APPEND|os.O_RDWR, 0644)
+			if err != nil {
+				logger.Warning("clear logs job err:", err)
+			}
+
+			logFile, err := os.ReadFile(logFiles[i])
+			if err != nil {
+				logger.Warning("clear logs job err:", err)
+			}
+
+			_, err = logFilePrev.Write(logFile)
+			if err != nil {
+				logger.Warning("clear logs job err:", err)
+			}
+			defer logFilePrev.Close()
+		}
+
+		err := os.Truncate(logFiles[i], 0)
+		if err != nil {
 			logger.Warning("clear logs job err:", err)
 		}
 	}
--- a/web/job/xray_traffic_job.go
+++ b/web/job/xray_traffic_job.go
@@ -6,8 +6,9 @@ import (
 )

 type XrayTrafficJob struct {
-	xrayService    service.XrayService
-	inboundService service.InboundService
+	xrayService     service.XrayService
+	inboundService  service.InboundService
+	outboundService service.OutboundService
 }

 func NewXrayTrafficJob() *XrayTrafficJob {
@@ -24,11 +25,15 @@ func (j *XrayTrafficJob) Run() {
 		logger.Warning("get xray traffic failed:", err)
 		return
 	}
-	err, needRestart := j.inboundService.AddTraffic(traffics, clientTraffics)
+	err, needRestart0 := j.inboundService.AddTraffic(traffics, clientTraffics)
 	if err != nil {
-		logger.Warning("add traffic failed:", err)
+		logger.Warning("add inbound traffic failed:", err)
 	}
-	if needRestart {
+	err, needRestart1 := j.outboundService.AddTraffic(traffics, clientTraffics)
+	if err != nil {
+		logger.Warning("add outbound traffic failed:", err)
+	}
+	if needRestart0 || needRestart1 {
 		j.xrayService.SetToNeedRestart()
 	}

--- a/web/service/config.json
+++ b/web/service/config.json
@@ -1,7 +1,9 @@
 {
  "log": {
-    "loglevel": "warning",
-    "error": "./error.log"
+    "access": "none",
+    "dnsLog": false,
+    "error": "./error.log",
+    "loglevel": "warning"
  },
  "api": {
    "tag": "api",
@@ -24,6 +26,7 @@
  ],
  "outbounds": [
    {
+      "tag": "direct",
      "protocol": "freedom",
      "settings": {}
    },
@@ -42,7 +45,9 @@
    },
    "system": {
      "statsInboundDownlink": true,
-      "statsInboundUplink": true
+      "statsInboundUplink": true,
+      "statsOutboundDownlink": true,
+      "statsOutboundUplink": true
    }
  },
  "routing": {
--- a/web/service/inbound.go
+++ b/web/service/inbound.go
@@ -38,9 +38,25 @@ func (s *InboundService) GetAllInbounds() ([]*model.Inbound, error) {
 	return inbounds, nil
 }

-func (s *InboundService) checkPortExist(port int, ignoreId int) (bool, error) {
+func (s *InboundService) checkPortExist(listen string, port int, ignoreId int) (bool, error) {
 	db := database.GetDB()
-	db = db.Model(model.Inbound{}).Where("port = ?", port)
+	if listen == "" || listen == "0.0.0.0" || listen == "::" || listen == "::0" {
+		db = db.Model(model.Inbound{}).Where("port = ?", port)
+	} else {
+		db = db.Model(model.Inbound{}).
+			Where("port = ?", port).
+			Where(
+				db.Model(model.Inbound{}).Where(
+					"listen = ?", listen,
+				).Or(
+					"listen = \"\"",
+				).Or(
+					"listen = \"0.0.0.0\"",
+				).Or(
+					"listen = \"::\"",
+				).Or(
+					"listen = \"::0\""))
+	}
 	if ignoreId > 0 {
 		db = db.Where("id != ?", ignoreId)
 	}
@@ -135,7 +151,7 @@ func (s *InboundService) checkEmailExistForInbound(inbound *model.Inbound) (stri
 }

 func (s *InboundService) AddInbound(inbound *model.Inbound) (*model.Inbound, bool, error) {
-	exist, err := s.checkPortExist(inbound.Port, 0)
+	exist, err := s.checkPortExist(inbound.Listen, inbound.Port, 0)
 	if err != nil {
 		return inbound, false, err
 	}
@@ -252,7 +268,7 @@ func (s *InboundService) GetInbound(id int) (*model.Inbound, error) {
 }

 func (s *InboundService) UpdateInbound(inbound *model.Inbound) (*model.Inbound, bool, error) {
-	exist, err := s.checkPortExist(inbound.Port, inbound.Id)
+	exist, err := s.checkPortExist(inbound.Listen, inbound.Port, inbound.Id)
 	if err != nil {
 		return inbound, false, err
 	}
@@ -295,7 +311,11 @@ func (s *InboundService) UpdateInbound(inbound *model.Inbound) (*model.Inbound,
 	oldInbound.Settings = inbound.Settings
 	oldInbound.StreamSettings = inbound.StreamSettings
 	oldInbound.Sniffing = inbound.Sniffing
-	oldInbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+	if inbound.Listen == "" || inbound.Listen == "0.0.0.0" || inbound.Listen == "::" || inbound.Listen == "::0" {
+		oldInbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+	} else {
+		oldInbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
+	}

 	needRestart := false
 	s.xrayApi.Init(p.GetAPIPort())
@@ -488,6 +508,10 @@ func (s *InboundService) DelInboundClient(inboundId int, clientId string) (bool,
 		}
 	}

+	if len(newClients) == 0 {
+		return false, common.NewError("no client remained in Inbound")
+	}
+
 	settings["clients"] = newClients
 	newSettings, err := json.MarshalIndent(settings, "", "  ")
 	if err != nil {
@@ -658,7 +682,7 @@ func (s *InboundService) UpdateInboundClient(data *model.Inbound, clientId strin
 	return needRestart, tx.Save(oldInbound).Error
 }

-func (s *InboundService) AddTraffic(inboundTraffics []*xray.Traffic, clientTraffics []*xray.ClientTraffic) (error, bool) {
+func (s *InboundService) AddTraffic(traffics []*xray.Traffic, clientTraffics []*xray.ClientTraffic) (error, bool) {
 	var err error
 	db := database.GetDB()
 	tx := db.Begin()
@@ -670,7 +694,7 @@ func (s *InboundService) AddTraffic(inboundTraffics []*xray.Traffic, clientTraff
 			tx.Commit()
 		}
 	}()
-	err = s.addInboundTraffic(tx, inboundTraffics)
+	err = s.addInboundTraffic(tx, traffics)
 	if err != nil {
 		return err, false
 	}
@@ -1146,6 +1170,8 @@ func (s *InboundService) SetClientTelegramUserID(trafficId int, tgId string) err
 		if oldClient.Email == clientEmail {
 			if inbound.Protocol == "trojan" {
 				clientId = oldClient.Password
+			} else if inbound.Protocol == "shadowsocks" {
+				clientId = oldClient.Email
 			} else {
 				clientId = oldClient.ID
 			}
@@ -1184,6 +1210,32 @@ func (s *InboundService) SetClientTelegramUserID(trafficId int, tgId string) err
 	return nil
 }

+func (s *InboundService) checkIsEnabledByEmail(clientEmail string) (bool, error) {
+	_, inbound, err := s.GetClientInboundByEmail(clientEmail)
+	if err != nil {
+		return false, err
+	}
+	if inbound == nil {
+		return false, common.NewError("Inbound Not Found For Email:", clientEmail)
+	}
+
+	clients, err := s.GetClients(inbound)
+	if err != nil {
+		return false, err
+	}
+
+	isEnable := false
+
+	for _, client := range clients {
+		if client.Email == clientEmail {
+			isEnable = client.Enable
+			break
+		}
+	}
+
+	return isEnable, err
+}
+
 func (s *InboundService) ToggleClientEnableByEmail(clientEmail string) (bool, error) {
 	_, inbound, err := s.GetClientInboundByEmail(clientEmail)
 	if err != nil {
@@ -1205,6 +1257,8 @@ func (s *InboundService) ToggleClientEnableByEmail(clientEmail string) (bool, er
 		if oldClient.Email == clientEmail {
 			if inbound.Protocol == "trojan" {
 				clientId = oldClient.Password
+			} else if inbound.Protocol == "shadowsocks" {
+				clientId = oldClient.Email
 			} else {
 				clientId = oldClient.ID
 			}
@@ -1266,6 +1320,8 @@ func (s *InboundService) ResetClientIpLimitByEmail(clientEmail string, count int
 		if oldClient.Email == clientEmail {
 			if inbound.Protocol == "trojan" {
 				clientId = oldClient.Password
+			} else if inbound.Protocol == "shadowsocks" {
+				clientId = oldClient.Email
 			} else {
 				clientId = oldClient.ID
 			}
@@ -1324,6 +1380,8 @@ func (s *InboundService) ResetClientExpiryTimeByEmail(clientEmail string, expiry
 		if oldClient.Email == clientEmail {
 			if inbound.Protocol == "trojan" {
 				clientId = oldClient.Password
+			} else if inbound.Protocol == "shadowsocks" {
+				clientId = oldClient.Email
 			} else {
 				clientId = oldClient.ID
 			}
@@ -1385,6 +1443,8 @@ func (s *InboundService) ResetClientTrafficLimitByEmail(clientEmail string, tota
 		if oldClient.Email == clientEmail {
 			if inbound.Protocol == "trojan" {
 				clientId = oldClient.Password
+			} else if inbound.Protocol == "shadowsocks" {
+				clientId = oldClient.Email
 			} else {
 				clientId = oldClient.ID
 			}
@@ -1613,10 +1673,10 @@ func (s *InboundService) DelDepletedClients(id int) (err error) {
 	return nil
 }

-func (s *InboundService) GetClientTrafficTgBot(tguname string) ([]*xray.ClientTraffic, error) {
+func (s *InboundService) GetClientTrafficTgBot(tgId string) ([]*xray.ClientTraffic, error) {
 	db := database.GetDB()
 	var inbounds []*model.Inbound
-	err := db.Model(model.Inbound{}).Where("settings like ?", fmt.Sprintf(`%%"tgId": "%s"%%`, tguname)).Find(&inbounds).Error
+	err := db.Model(model.Inbound{}).Where("settings like ?", fmt.Sprintf(`%%"tgId": "%s"%%`, tgId)).Find(&inbounds).Error
 	if err != nil && err != gorm.ErrRecordNotFound {
 		return nil, err
 	}
@@ -1627,7 +1687,7 @@ func (s *InboundService) GetClientTrafficTgBot(tguname string) ([]*xray.ClientTr
 			logger.Error("Unable to get clients from inbound")
 		}
 		for _, client := range clients {
-			if client.TgID == tguname {
+			if client.TgID == tgId {
 				emails = append(emails, client.Email)
 			}
 		}
@@ -1754,7 +1814,7 @@ func (s *InboundService) MigrationRequirements() {
 		json.Unmarshal([]byte(inbounds[inbound_index].Settings), &settings)
 		clients, ok := settings["clients"].([]interface{})
 		if ok {
-			// Fix Clinet configuration problems
+			// Fix Client configuration problems
 			var newClients []interface{}
 			for client_index := range clients {
 				c := clients[client_index].(map[string]interface{})
@@ -1840,6 +1900,13 @@ func (s *InboundService) MigrationRequirements() {
 		newStream, _ := json.MarshalIndent(stream, " ", "  ")
 		tx.Model(model.Inbound{}).Where("id = ?", ep.Id).Update("stream_settings", newStream)
 	}
+
+	err = tx.Raw(`UPDATE inbounds
+	SET tag = REPLACE(tag, '0.0.0.0:', '')
+	WHERE INSTR(tag, '0.0.0.0:') > 0;`).Error
+	if err != nil {
+		return
+	}
 }

 func (s *InboundService) MigrateDB() {
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .0.0
 .2.1